button:focus { border:none; outline: none;  }
   button       { background:none; border:none; outline: none; }

    .adj-search         { font-size:14px; color:#666;}
    .adj-search-pos     { position:absolute; top:24px; right:287px; /*230*/ z-index:9999}
    #body.smhead .adj-search-pos     { right:277px; }

    .search-wrapper { position:absolute; top:50%; left:50%;
                        -webkit-transform: translate(-50%, -50%);
                           -moz-transform: translate(-50%, -50%);
                                transform: translate(-50%, -50%); }
    .search-wrapper.active          { margin-left: -70px}

    .search-wrapper .input-holder   { overflow: hidden; /* height: 70px;*/ background:rgba(255,255,255,0); position:relative; width:70px;
                        -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.active .input-holder { width:450px; background-color:#ececec;
                        -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); }

    .search-wrapper .input-holder .search-input { width:100%; height:50px; padding:0px 70px 0 20px; opacity:0; position:absolute; top:0px; left:0px; background: transparent;
                                                    font-size:14px; font-weight:500; line-height:20px; color:#666;
                                                     -webkit-box-sizing: border-box;
                                                        -moz-box-sizing: border-box;
                                                             box-sizing: border-box;
                                                                  border:none;
                                                                 outline:none;
                                                        -webkit-transform: translate(0, 60px);
                                                            moz-transform: translate(0, 60px);
                                                                transform: translate(0, 60px);
                                                       -webkit-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
                                                          -moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
                                                               transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);
                                                 -webkit-transition-delay: 0.3s;
                                                    -moz-transition-delay: 0.3s;
                                                         transition-delay: 0.3s; }
   
    .search-wrapper.active .input-holder .search-input { opacity:1;
                                                        -webkit-transform: translate(0, 10px);
                                                           -moz-transform: translate(0, 10px);
                                                                transform: translate(0, 10px); }

    .search-wrapper .input-holder .search-icon          { width:53px; height:53px; background:#fff; padding:0px; position:relative; z-index:2; float:right; outline:none;
                                                            cursor: pointer; border:1px solid #ececec;
                                                            -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-icon:hover    { background-color:#ffd400}           


    .search-wrapper.active .input-holder .search-icon   { width:50px; height:50px; margin:10px; border-radius:30px; top:5px; }
    .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(0.650, -0.600, 0.240, 1.650);
                                                           -moz-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);
                                                                transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);}

    .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:4px; height:11px; left:9px; top:18px; border-radius:2px; background:#666; }
    .search-wrapper .input-holder .search-icon span::after  { width:14px; height:14px; left:0px; top:0px; border-radius:16px; border:2px solid #666; }

    .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.1s;
                            -moz-transition-delay: 0.1s;
                                 transition-delay: 0.1s; opacity:0 }

    .search-wrapper.active .close { right:-40px; top:24px; opacity:1;
                                -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; }
    .search-wrapper .close::before, .search-wrapper .close::after { position:absolute; content:''; background:#ccc; 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-size:14px; display:none; color:#B7B7B7;}

    #body.smhead header .search-wrapper .input-holder .search-icon          { width:44px; height:44px;}
    #body.smhead header .adj-search-pos        { top:19px; }
    #body.smhead header .search-wrapper .close { top:25px; right:18px; }
    #body.smhead header  .search-wrapper.active .close { right:-40px; top:25px;}


    @media only screen and (max-width : 1300px)  { 
    .adj-search-pos             { top:51px; right:247px; /*191*/ background-color: red }
    #body.smhead header .adj-search-pos             { top:51px; right:247px; /*191*/ }
    #body.smhead header .search-wrapper .input-holder .search-icon          { width:52px; height:52px;}

    .search-wrapper .input-holder .search-icon          { width:52px; height:52px;}
    .search-wrapper.active      { margin-left: -20px}
    .search-wrapper.active .input-holder .search-icon   { top:0px; }
    .search-wrapper.active .input-holder { width:300px;}
    }

    @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { 
    .adj-search-pos     { top:26px;}
    }

    @media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { 
    .adj-search-pos     { top:26px;}
    }


    @media screen and (max-width: 767px) {
    .search-wrapper.active .input-holder { width:280px; height:80px; overflow:hidden;}
    .adj-search-pos                      { top:45px; right:40px;  }
    .search-wrapper .input-holder .search-icon     { border:none}
    .search-wrapper.active              { margin-left: -170px; top:-5px;}
    .search-wrapper.active .input-holder .search-icon   { top:5px; }

    #body.smhead header .adj-search-pos  { top:30px; right:40px; }
    #body.smhead header .search-wrapper.active  { top:10px;}
    #body.smhead header .search-wrapper .input-holder   {  height: 60px; overflow:hidden; top:-10px;}
    #body.smhead header  .search-wrapper.active .close { top:10px;}
    #body.smhead header .search-wrapper .input-holder .search-icon           { top:20px;}
    #body.smhead header .search-wrapper.active .input-holder .search-icon    { top:-5px;}
    }