.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-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-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 .2s cubic-bezier(0.285, -0.450, 0.935, 0.110);-moz-transition:all .2s cubic-bezier(0.285, -0.450, 0.935, 0.110);transition:all .2s 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:1024px){.search-wrapper{border:0;}
.search-wrapper.active{padding-right:0;}
.search-wrapper .input-holder .search-input{height:0;padding:0;}
header #top-nav .searchbar form{
    border: 0;
    width: auto;
    padding: 0;
    margin-right: 5px;
}
header #top-nav .searchbar .search-wrapper .input-holder input{
    width: 200px;
}
.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: rgb(0, 0, 0);-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);border: 1px solid #e0e0e0;position: absolute;top: 50px;right: 0;width: 250px;}
.search-wrapper.active .input-holder .search-icon span{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg);}
.search-wrapper.active .close{right: 200px;-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;}
header #top-nav .searchbar{
    position: absolute;
    top: 17px;
    right: 20px;
    margin: 0;
    z-index: 98;
}
}
@media screen and (max-width:768px){
    .search-wrapper.active .close{right: 190px;}
}
@media screen and (max-width:640px){.search-wrapper.active{padding-right:0;margin-top: 10px;padding: 10px;}
header #top-nav .searchbar form{
    margin-right: 0px;
}
}
@media screen and (max-width:590px){
    .search-wrapper.active .close{right: 40px;}
}
@media screen and (max-width:480px){
	header #top-nav .searchbar{
    top: 12px;
    right: 18px;
}
}
@media screen and (max-width:420px){
    .search-wrapper.active .close{right: 42px;}
}