/* Search Style */ 
#search {
	position: fixed;
	top: 20%;
	left: 34%;
	width: 30%;
	height: 15%;
	background-color: rgba(0, 0, 0, 0.8);
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-webkit-transform: translate(0px, -100%) scale(0, 0);
	-moz-transform: translate(0px, -100%) scale(0, 0);
	-ms-transform: translate(0px, -100%) scale(0, 0);
	-o-transform: translate(0px, -100%) scale(0, 0);
	transform: translate(0px, -100%) scale(0, 0);
	opacity: 0;
	display: none;
}

#search.open {
	-webkit-transform: translate(0px, 0px) scale(1, 1);
	-moz-transform: translate(0px, 0px) scale(1, 1);
	-ms-transform: translate(0px, 0px) scale(1, 1);
	-o-transform: translate(0px, 0px) scale(1, 1);
	transform: translate(0px, 0px) scale(1, 1);
	opacity: 1;
	z-index: 106;
	display: block;
}

#search input[type="search"] {
    position: absolute;
    margin-top: 7%;
    width: 70%;
    margin-left: 7%;
    color: rgb(255, 255, 255);
  	background-color: rgba(0, 0, 0, 0.5);
  	border: 1px solid rgba(255, 255, 255, .8);
  	padding: 10px;
}

#search button {
    position: absolute;
    margin-top: 7%;
    margin-left: 80%;
  	background: transparent;
  	border: 0;
}
  
#search .close {
	position: fixed;
	top: 10px;
	right: 15px;
	opacity: 1;
	font-size: 20px;
	color: #fff;
}

#search .close:hover {
	cursor: pointer;
}