.search-box {

    position: absolute;

    top: 50%;

    left: 85%;

    transform: translate(-50%,-50%);

    background: #2f3640;

    border-radius: 40px;

    padding: 10px;

}



    .search-box:hover > .search-txt {

        width: 220px;

        padding: 0 6px;

    }



    .search-box:hover > .search-btn {

        background: white;

    }



.search-btn {

    color: #e84118;

    float: right;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background: #2f3640;

    display: flex;

    justify-content: center;

    align-items: center;

}



.search-txt {

    border: none;

    background: none;

    outline: none;

    float: left;

    padding: 0;

    color: white;

    font-size: 16px;

    transition: 0.4s;

    line-height: 30px;

    width: 0px;

}



#search-main {

    position: fixed !important;

}



@media screen and (max-width: 1024px) {

    #search-main {

        display: none;

    }

}