.search-wrapper{position:relative;overflow:hidden;border:2px solid #9c44f5;}
.search-wrapper .input-holder{overflow:hidden;position:relative;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.search-wrapper .input-holder .search-input{width:calc(100% - 50px);height:35px;padding:0 10px;line-height:35px;opacity:1;background:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:none;outline:none;float:left;color:#FFF;-moz-transform:translate(0, 60px);-moz-transition:all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);-moz-transition-delay:0.3s;font-size:14px;font-weight:600;}
.search-wrapper .input-holder .search-input::placeholder{color:#c717fa;}
.search-wrapper .input-holder .search-icon{width:35px;height:35px;border:none;border-radius:6px;padding:0px;outline:none;position:relative;z-index:2;float:right;cursor:pointer;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;background:none;color:#c915fb;font-size:20px;}
.search-wrapper .input-holder .search-icon span{display:inline-block;vertical-align:middle;position:relative;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-moz-transition:all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);}
.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:4px;height:11px;left:9px;top:18px;border-radius:2px;background:#974BE0;}
.search-wrapper .input-holder .search-icon span::after{width:14px;height:14px;left:0px;top:0px;border-radius:16px;border:4px solid #974BE0;}
.search-wrapper .close{position:absolute;z-index:1;top:24px;right:20px;width:25px;height:25px;cursor:pointer;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transition:all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);-moz-transition:all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);transition:all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);-webkit-transition-delay:0.2s;-moz-transition-delay:0.2s;transition-delay:0.2s;}
@media screen and (max-width:980px){.search-wrapper{border:0;padding-right:25px;}
.search-wrapper.active{padding-right:0;}
.search-wrapper .input-holder .search-input{height:0;padding:0;}
.search-wrapper.active .input-holder .search-input{height:35px;padding:0 10px;}
.search-wrapper .close{opacity:0;}
.search-wrapper.active .input-holder{border-radius:50px;background:rgba(0,0,0,0.5);-webkit-transition:all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);-moz-transition:all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);transition:all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);margin-right:40px;border:1px solid #545454;}
.search-wrapper.active .input-holder .search-icon span{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);}
.search-wrapper.active .close{right:5px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);-moz-transition:all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);transition:all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);-webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;transition-delay:0.5s;background:none;z-index:9999;display:block;opacity:1;top:5px;}
.search-wrapper .close::before, .search-wrapper .close::after{position:absolute;content:'';background:#FFF;border-radius:2px;}
.search-wrapper .close::before{width:5px;height:25px;left:10px;top:0px;}
.search-wrapper .close::after{width:25px;height:5px;left:0px;top:10px;}
.search-wrapper .result-container{width:100%;position:absolute;top:80px;left:0px;text-align:center;font-family:"Open Sans", Arial, Verdana;font-size:14px;display:none;color:#B7B7B7;}
.search-wrapper .input-holder .search-icon{color:#fff;}
}
@media screen and (max-width:640px){.search-wrapper.active{padding-right:0;margin-top:51px;padding:10px;background:#381f34;}
.search-wrapper.active .close{top:15px;right:5px;}
}