#search {
position: fixed;
top: 80px;
left: 0px;
width: 100%;
height: 100%;
background: url(bg.jpg) center center repeat;
color: #0f1321;
transition: all 0.5s ease-in-out;
transform: translate(0px, 0px) scale(1, 1); 
opacity: 0;
display: none;
}
a.searchi {
    color: #0f1321 !important;
    line-height: 45px;
}
#sp-search i {
color:#0f1321;
line-height:70px;
float:right;
}
#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"],
#search input {
position: absolute;
top: 35%;
left: 0;
margin-top: 0;
width: 60%;
margin-left: 20%;
font-size: 40px;
font-weight: 400;
text-align: center;
outline: none;
padding: 10px;
border: 2px solid #0f1321;
border-radius:3px;
color: #0f1321;
font-size: 19px;
padding-left: 10px;
background: #ffffff;
transition: .3s;
height:62px;
box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.2);
}
  
#search .close {
position: fixed;
top: 25px;
right: 10%;
opacity: 1;
font-size: 27px;
color: #0f1321;
}
#search .close::before {
content: "\f00d";
font-family: 'FontAwesome';
font-size: 20px;
color: #0f1321;

}
#search .close:hover{
color: #0f1321;
cursor: pointer;
}
#searchform .btn {
position: absolute;
top: 51%;
right: 20.4%;
height:50px;
border-radius:0px;
z-index:9;
background: #fff;
border-left: 2px solid #0f1321;
border-right: 0px solid #0f1321;
border-top: 0px solid #0f1321;
border-bottom: 0px solid #0f1321;
font-weight:500;
color:#0f1321;
padding:0 20px;
}
#searchform .element-invisible {
	display:none;
}

@media (max-width: 1023px) {
#search input[type="search"] {
position: absolute;
top: 40%;
width: 80%;
margin-left: 10%;
}
#searchform .btn {
position: absolute;
top: 40.5%;
right: 10.5%;
}
}