#overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none; background: #434857;
opacity: .8;
z-index: 25; }
.overlay_search {
font-family: "Varela Round", Arial, "Helvetica Neue", Helvetica, serif;
z-index: 100;
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden; }
.overlay_search:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;  background: #FFF000;		
background: #FDFC47; background: -webkit-linear-gradient(to left, #FDFC47 , #FFF000); background: linear-gradient(to left, #FDFC47 , #FFF000);
opacity:0.98;
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 100%;
-webkit-transform: scale(0.04) translateY(9999px);
transform: scale(0.04) translateY(9999px);
overflow: hidden; }
.overlay_search .form_search-wrap {
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
min-width: 1170px;
opacity: 0; }
@media (max-width: 1024px) {
.overlay_search .form_search-wrap {
min-width: 90%;
padding: 0 15px; } }
@media (max-width: 980px) {
.overlay_search .form_search-wrap {
min-width: 72%; } }
@media (max-width: 800px) {
.overlay_search .form_search-wrap {
min-width: 90%; } }
.overlay_search .form_search-wrap form {
position: relative;
transition: all .3s ease; }
.overlay_search .form_search-wrap form .overlay_search-input {
background-color: transparent;
padding: 0 0 25px;
border: none!important;
border-bottom: 2px solid #000!important;
color: #000;
font-size: 24px;
transition: all .3s ease; 
width: 100%;
}
.overlay_search .form_search-wrap form .overlay_search-input:hover {
border-bottom: 2px solid #fff;
color: #333; }
.overlay_search .form_search-wrap form .overlay_search-input:hover + .overlay_search-close span {
background: #333; }
.overlay_search .form_search-wrap form .overlay_search-input:focus {
border-bottom: 2px solid #333;
color: #000; }
.overlay_search .form_search-wrap form .overlay_search-input:focus + .overlay_search-close span {
background: #333; }
.overlay_search .form_search-wrap form .overlay_search-close {
width: 30px;
height: 30px;
position: absolute;
display: block;
right: -5px;
top: 0; }
.overlay_search .form_search-wrap form .overlay_search-close span {
display: block;
height: 2px;
background: #000;
border-radius: 10px;
margin: auto;
width: 100%;
transition: all .3s ease;
top: 50%;
position: absolute; }
.overlay_search .form_search-wrap form .overlay_search-close span:first-of-type {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg); }
.overlay_search .form_search-wrap form .overlay_search-close span:last-of-type {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg); }
.open .overlay_search {
top: 0; }
.open .overlay_search:before {
-webkit-animation: menu-animation 0.8s ease-out forwards;
animation: menu-animation 0.8s ease-out forwards; }
.open .overlay_search .form_search-wrap {
opacity: 1;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transition: opacity 3s ease-out, -webkit-transform 1s ease-out;
transition: opacity 1s ease-out, -webkit-transform .5s ease-out;
transition: transform .5s ease-out, opacity 1s ease-out;
transition: transform .5s ease-out, opacity 1s ease-out, -webkit-transform .5s ease-out;
transition-delay: .5s; }
@-webkit-keyframes menu-animation {
0% {
opacity: 0;
-webkit-transform: scale(0.04) translateY(300%);
transform: scale(0.04) translateY(300%); }
40% {
-webkit-transform: scale(0.04) translateY(0);
transform: scale(0.04) translateY(0);
-webkit-transition: ease-out;
transition: ease-out; }
40% {
-webkit-transform: scale(0.04) translateY(0);
transform: scale(0.04) translateY(0); }
60% {
opacity: 1;
-webkit-transform: scale(0.02) translateY(0px);
transform: scale(0.02) translateY(0px); }
61% {
-webkit-transform: scale(0.04);
transform: scale(0.04); }
99.9% {
height: 0;
padding-bottom: 100%;
border-radius: 100%; }
100% {
-webkit-transform: scale(2);
transform: scale(2);
height: 100%;
padding-bottom: 0;
border-radius: 0; } }
@keyframes menu-animation {
0% {
opacity: 0;
-webkit-transform: scale(0.04) translateY(300%);
transform: scale(0.04) translateY(300%); }
40% {
-webkit-transform: scale(0.04) translateY(0);
transform: scale(0.04) translateY(0);
-webkit-transition: ease-out;
transition: ease-out; }
40% {
-webkit-transform: scale(0.04) translateY(0);
transform: scale(0.04) translateY(0); }
60% {
opacity: 1;
-webkit-transform: scale(0.02) translateY(0px);
transform: scale(0.02) translateY(0px); }
61% {
-webkit-transform: scale(0.04);
transform: scale(0.04); }
99.9% {
height: 0;
padding-bottom: 100%;
border-radius: 100%; }
100% {
-webkit-transform: scale(2);
transform: scale(2);
height: 100%;
padding-bottom: 0;
border-radius: 0; } }