.search-wrapper{}
.search-wrapper .input-holder{position:relative;width:40px;height:40px;background:transparent;overflow:hidden;border-radius:6px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.search-wrapper.active .input-holder{border-radius:50px;width:250px; background:#f5f5f5;-webkit-transition:all .5s cubic-bezier(0,.105,.035,1.57);-moz-transition:all .5s cubic-bezier(0,.105,.035,1.57);transition:all .5s cubic-bezier(0,.105,.035,1.57); top:0px;}
.search-wrapper .input-holder .search-input{width:100%;height:40px;padding:0 70px 0 20px;opacity:0;position:absolute;top:0;left:0;background:0 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:0;outline:0;font-family:open sans,Arial,Verdana;font-size:16px;font-weight:400;line-height:40px;color:#454545;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);transform:translate(0,0);-webkit-transition:all .3s cubic-bezier(0,.105,.035,1.57);-moz-transition:all .3s cubic-bezier(0,.105,.035,1.57);transition:all .3s cubic-bezier(0,.105,.035,1.57);-webkit-transition-delay:.3s;-moz-transition-delay:.3s;transition-delay:.3s; font-size:12px;}
.search-wrapper.active .input-holder .search-input{opacity:1;-webkit-transform:translate(0,0px);-moz-transform:translate(0,0);transform:translate(0,0)}
.search-wrapper .input-holder .search-icon{width:40px;height:40px;border:0;border-radius:6px;background:none;padding:0;outline:0;position:relative;float:right;cursor:pointer;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.search-wrapper.active .input-holder .search-icon{width:40px;height:40px;margin:0px;border-radius:30px}
.search-wrapper .input-holder .search-icon span{width:22px;height:22px;display:inline-block;vertical-align:middle;position:relative;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:all .4s cubic-bezier(.65,-.6,.24,1.65);-moz-transition:all .4s cubic-bezier(.65,-.6,.24,1.65);transition:all .4s cubic-bezier(.65,-.6,.24,1.65)}
.search-wrapper.active .input-holder .search-icon span{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);}
.search-wrapper .input-holder .search-icon span::before,.search-wrapper .input-holder .search-icon span::after{position:absolute;content:''}
.search-wrapper .input-holder .search-icon span::before{width:2px;height:6px;left:9px;top:18px;border-radius:2px;background:#666}
.search-wrapper .input-holder .search-icon span::after{width:14px;height:14px;left:0;top:0;border-radius:16px;border:2px solid #666}
.search-wrapper.active .input-holder .search-icon span::before{background:#333;}
.search-wrapper.active .input-holder .search-icon span::after{border:2px solid #333;}
.search-wrapper .close{position:absolute;top:5px;right:-30px;width:20px;height:20px;opacity:0;cursor:pointer;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transition:all .3s cubic-bezier(.285,-.45,.935,.11);-moz-transition:all .3s cubic-bezier(.285,-.45,.935,.11);transition:all .3s cubic-bezier(.285,-.45,.935,.11);-webkit-transition-delay:.2s;-moz-transition-delay:.2s;transition-delay:.2s;}
.search-wrapper.active .close{opacity:1;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all .6s cubic-bezier(0,.105,.035,1.57);-moz-transition:all .6s cubic-bezier(0,.105,.035,1.57);transition:all .6s cubic-bezier(0,.105,.035,1.57);-webkit-transition-delay:.5s;-moz-transition-delay:.5s;transition-delay:.5s}
.search-wrapper .close::before,.search-wrapper .close::after{position:absolute;content:'';background:#666;border-radius:2px}
.search-wrapper .close::before{width:5px;height:25px;left:10px;top:0}
.search-wrapper .close::after{width:25px;height:5px;left:0;top:10px}
.search-wrapper .result-container{width:100%;position:absolute;top:60px;left:0;text-align:center;font-size:12px;display:none; color:#fff}
@media screen and (max-width:560px){
	.search-wrapper.active .input-holder{width:320px;top:70px;}
	.search-wrapper .close{top:12px; right:0}
}