.desktop-only{
    display: none;
}
.search-form-container {
    position: absolute;
    max-width: 0;
    overflow: hidden;
    transition: max-width .5s ease-in-out;
    left: 1%;
    top: 50%;
    transform: translateY(-50%);
    transition-delay: .2s;
    width: 170%;
    z-index: 5;
}

.search-form-container-active {
    max-width: 20rem;
}

.close-search-form-button {
    position: absolute;
    left: 88%;
    color: #555;
    font-size: 1.2rem !important;
    top: 50%;
    transform: translateY(-50%);

}

.search-form-input {
    border: 1px solid var(--gold-color);
    height: 8vh;
    border-radius: 1rem;
    background: #eee;
    padding-left: 30px;
    width: 100%;
}

.send-search-form-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 85%;
    display: none;
}

.open-search-form-button {
    position: relative;
    top: 50%;
    left: 0;
    transition: all .9s ease;
    z-index: 10;
}

.open-search-form-button-active {
    transform: translateX(-227%);
    /* transition-delay: .3s; */
}
@media (min-width:768px){

}
@media(min-width:1024px) {
    .mobile-only{
        display: none;
    }
    .desktop-only{
        display: initial;
    }
    .search-form-container {
        transition-delay: 0s;
        right: 1.7%;
        left: unset;
        z-index: 1;
        width: 80%;
    }

    .bigger-search-form {
        right: 9%;
    }


    .search-form-input {
        height: 2.8rem;
        width: 10rem;
    }
    .bigger-search-form .search-form-input{
        width: 100%;
    }

    .send-search-form-button {
        right: 5%;
    }

    .send-search-form-button {
        display: inline-block;
    }

    .close-search-form-button {
        left: 4%;
    }
}