.header-search-box {
    width: 200px;
    height: 45px;
    position: relative;
    margin-right: 20px;
    display: none;
}

input.header-search {
    width: 100%;
    height: 100%;
    border-radius: 50px;
    padding: 0 40px 0 15px;
}

.header-search-box .btn-search {
    height: 45px;
    width: 45px;
    border-radius: 50px;
    background: none;
    position: absolute;
    right: 0;
}

input.header-search:focus {
    outline: none;
}

button.btn-search {
    text-align: center;
}

button.btn-search:focus {
    outline: none;
}

button.btn-search,
button.btn-reset {
    background: #babcbb;
    border: none;
    height: 30px;
    font-size: 16px;
    padding: 1px;
    position: absolute;
    width: 30px;
}

.sample {
    float: left;
    height: 50px;
    position: relative;
    width: 34%;
}

.sample.one input,
.sample.two input {
    border-radius: 15px;
    right: 0;
    transition: all .3s ease-in-out;
    width: 50%;
}

.sample.one input:focus,
.sample.two input:focus {
    width: 100%;
}

.sample.one input:focus~button.btn-search,
.sample.two input:focus~button.btn-search {
    background: #eb1d24;
    color: #fff;
}

.sample.one input:focus~button.btn-reset,
.sample.two input:focus~button.btn-reset {
    right: -22px;
}

.sample.one button,
.sample.two button {
    transition: all .3s ease-in-out;
}

.sample.one button.btn-search,
.sample.two button.btn-search {
    background: #ccc;
    border-radius: 50%;
    height: 26px;
    right: 2px;
    top: 2px;
    transition: all .3s ease-in-out;
    width: 26px;
}

.sample.one button.btn-reset,
.sample.two button.btn-reset {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    padding: 0;
    right: 5px;
    top: 5px;
    width: 20px;
    z-index: -1;
}

.sample.three,
.sample.four {
    perspective: 400px;
}

.sample.three input,
.sample.four input {
    width: 320px;
}

.sample.three input:focus~button.btn-search,
.sample.four input:focus~button.btn-search {
    transform: rotateY(180deg);
    transition: transform .6s ease-in-out .2s;
}

.sample.three input:focus~button.btn-reset,
.sample.four input:focus~button.btn-reset {
    transform: rotateX(0deg) translateY(32px) translateX(2px);
    transition: transform .6s ease-in-out .8s;
}

.sample.three button.btn-search,
.sample.four button.btn-search {
    backface-visibility: visible;
    color: #fff;
    padding: 0;
    position: relative;
    transform: rotateY(0deg);
    transform-origin: 340px 0;
    transform-style: preserve3d;
    transition: transform .6s ease-in-out .2s;
    width: 340px;
}

.sample.three button.btn-reset,
.sample.four button.btn-reset {
    backface-visibility: hidden;
    background: #ccc;
    transform: rotateX(-180deg) translateY(30px) translateX(2px);
    transform-origin: 0 32px;
    transform-style: preserve3d;
    transition: transform .6s ease-in-out .2s;
    width: 340px;
}

.sample.four button.btn-search {
    transition: transform .6s ease-in-out .8s;
}

.sample.five,
.sample.six {
    perspective: 400px;
}

.sample.five input,
.sample.six input {
    width: 340px;
}

.sample.five input:focus~button.btn-search,
.sample.six input:focus~button.btn-search {
    transform: rotateY(180deg) translateX(60px);
    transition: all .6s ease-in-out .2s;
    width: 60px;
}

.sample.five input:focus~button.btn-reset,
.sample.six input:focus~button.btn-reset {
    transform: rotateY(0deg);
    transition: all .6s ease-in-out .8s;
}

.sample.five button.btn-search,
.sample.six button.btn-search {
    backface-visibility: visible;
    color: #fff;
    padding: 0;
    position: relative;
    transform: rotateY(0deg) translateX(0px);
    transform-origin: 121px 0;
    transform-style: preserve3d;
    transition: all .6s ease-in-out .2s;
    width: 120px;
}

.sample.five button.btn-reset,
.sample.six button.btn-reset {
    backface-visibility: hidden;
    background: #ccc;
    left: 184px;
    transform: rotateY(180deg);
    transform-origin: left 0;
    transform-style: preserve3d;
    transition: all .6s ease-in-out .2s;
    width: 60px;
}

.sample.six button.btn-search {
    transition: all .6s ease-in-out .8s;
}

.sample.seven input,
.sample.eight input {
    border-right: none;
    transition: all .3s ease-in;
    width: 120px;
}

.sample.seven input:focus,
.sample.eight input:focus {
    width: 220px;
}

.sample.seven input:focus~button.btn-search,
.sample.eight input:focus~button.btn-search {
    background: #eb1d24;
    border-radius: 0 50% 50% 0;
    color: #fff;
    left: 220px;
}

.sample.seven input:focus~button.btn-reset,
.sample.eight input:focus~button.btn-reset {
    animation: bounceRight .6s;
    animation-delay: .2s;
    animation-timing-function: cubic-bezier(0.3, 0.2, 1, 0.8);
    border-radius: 50%;
    color: #fff;
    left: 254px;
}

.sample.seven button.btn-search,
.sample.eight button.btn-search {
    background: #ccc;
    left: 120px;
    transition: all .3s ease-in;
}

.sample.seven button.btn-reset,
.sample.eight button.btn-reset {
    background: #000;
    height: 20px;
    left: 120px;
    top: 5px;
    transition: all .3s ease-in;
    width: 20px;
    z-index: -1;
}

.sample.nine input,
.sample.ten input {
    border-radius: 33px;
    transition: all .6s ease-in-out .3s;
    width: 320px;
}

.sample.nine input:focus,
.sample.ten input:focus {
    transition-delay: 0;
    width: 400px;
}

.sample.nine input:focus~button,
.sample.ten input:focus~button {
    transform: rotateZ(360deg);
}

.sample.nine input:focus~button.btn-search,
.sample.ten input:focus~button.btn-search {
    background: #eb1d24;
    color: #fff;
    left: 362px;
    transition-delay: 0;
}

.sample.nine input:focus~button.btn-reset,
.sample.ten input:focus~button.btn-reset {
    left: 202px;
    transition-delay: .3s;
}

.sample.nine button,
.sample.ten button {
    transition: all .6s ease-in-out;
}

.sample.nine button.btn-search,
.sample.ten button.btn-search {
    background: #ccc;
    border-radius: 50%;
    height: 40px;
    left: 281px;
    top: 0px;
    transition-delay: .3s;
    width: 40px;
}

.sample.nine button.btn-reset,
.sample.ten button.btn-reset {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    font-size: 10px;
    height: 20px;
    left: 92px;
    line-height: 20px;
    padding: 0;
    top: 5px;
    width: 20px;
    z-index: -1;
}

.sample.eleven input,
.sample.twelve input {
    border-radius: 15px;
    transition: all .6s ease-in-out;
    width: 120px;
}

.sample.eleven input:focus,
.sample.twelve input:focus {
    width: 200px;
}

.sample.eleven input:focus~button.btn-search,
.sample.twelve input:focus~button.btn-search {
    animation: jumpTowardSearch 1.2s linear;
    background: #eb1d24;
    color: #fff;
    left: 172px;
}

.sample.eleven input:focus~button.btn-reset,
.sample.twelve input:focus~button.btn-reset {
    animation: jumpTowardReset 1.2s linear .4s;
    left: 202px;
}

.sample.eleven button,
.sample.twelve button {
    transition: all .6s ease-in-out;
}

.sample.eleven button.btn-search,
.sample.twelve button.btn-search {
    background: #ccc;
    border-radius: 50%;
    height: 26px;
    left: 92px;
    top: 2px;
    width: 26px;
}

.sample.eleven button.btn-reset,
.sample.twelve button.btn-reset {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    font-size: 10px;
    height: 20px;
    left: 92px;
    line-height: 20px;
    padding: 0;
    top: 5px;
    width: 20px;
    z-index: -1;
}

.sample.thirteen input,
.sample.fourteen input {
    background: none;
    border-color: #000;
    border-radius: 15px;
    border-width: 0 0 1px;
    transition: all .8s ease-in-out;
    width: 30px;
}

.sample.thirteen input:focus,
.sample.fourteen input:focus {
    background: radial-gradient(ellipse at top left, rgba(0, 0, 0, 0) 65%, #ff69b4 140%);
    border-radius: 0 15px 15px 0;
    width: 250px;
}

.sample.thirteen input:focus~button.btn-search,
.sample.fourteen input:focus~button.btn-search {
    background: #eb1d24;
    color: #fff;
    left: 222px;
    transform: rotate(720deg);
}

.sample.thirteen input:focus~button.btn-reset,
.sample.fourteen input:focus~button.btn-reset {
    left: 256px;
    transform: rotate(360deg);
}

.sample.thirteen button,
.sample.fourteen button {
    transition: all .8s ease-in-out;
}

.sample.thirteen button.btn-search,
.sample.fourteen button.btn-search {
    background: #ccc;
    border: 1px solid #000;
    border-radius: 50%;
    height: 30px;
    left: 0;
    width: 30px;
}

.sample.thirteen button.btn-reset,
.sample.fourteen button.btn-reset {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    font-size: 10px;
    height: 20px;
    left: 2px;
    line-height: 20px;
    padding: 0;
    top: 10px;
    width: 20px;
    z-index: -1;
}

@keyframes bounceRight {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0px);
    }
}

@keyframes jumpTowardSearch {
    0% {
        background: #ccc;
        opacity: 1;
        transform: rotateZ(0deg) scale(1);
    }
    20% {
        background: #ccc;
        opacity: 0;
        transform: rotateZ(-60deg) scale(50);
    }
    55% {
        background: #eb1d24;
        opacity: 0;
        transform: rotateZ(-30deg) scale(100);
    }
    90% {
        background: #eb1d24;
        opacity: 0;
        transform: rotateZ(-30deg) scale(50);
    }
    100% {
        background: #eb1d24;
        opacity: 1;
        transform: rotateZ(0deg) scale(1);
    }
}

@keyframes jumpTowardReset {
    0% {
        opacity: 0;
        transform: rotateZ(0deg) scale(1);
    }
    20% {
        opacity: 0;
        transform: rotateZ(-60deg) scale(50);
    }
    55% {
        opacity: 0;
        transform: rotateZ(-30deg) scale(100);
    }
    90% {
        opacity: 0;
        transform: rotateZ(-30deg) scale(50);
    }
    100% {
        opacity: 1;
        transform: rotateZ(0deg) scale(1);
    }
}

@media (min-width: 1200px) {
    .header-search-box {
        width: 315px;
        margin-right: 80px;
    }
}

@media (min-width: 992px) {
    .header-search-box {
        display: block;
    }
    input.header-search {
        border: 0;
    }
}
@media (max-width: 800px) {
    .header-search-box {
        width: 215px;
        height: 45px;
        margin-right: 20px;
        display: block;
        position: absolute;
        left: 100px;
        top: 0;
        z-index: 111;
    }
    .ui-widget.ui-widget-content.ui-autocomplete{
        height: 400px;
    }
}
@media (max-width: 500px) {
    .header-search-box {
        width: 96%;
        height: 45px;
        margin-right: 20px;
         display: block;
        position: absolute;
        left: 2%;
        top: 43px;
        z-index: 111;
    }
    .ui-widget.ui-widget-content.ui-autocomplete{
        height: 400px;
    }
}