@media (min-width: 320px) and (max-width: 480px) {
    #overlays {
        position: fixed; /* Sit on top of the page content */
        display: none; /* Hidden by default */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(
            0,
            107,
            103,
            0.85
        ); /* Black background with opacity */
        z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
        cursor: default; /* Add a pointer on hover */
    }

    #overlays .header-search-box {
        width: 1200px;
        max-width: 90vw;
        margin-top: 30px;
        background-color: #fff;
        padding: 1rem;
        margin-left: auto;
        margin-right: auto;
        transition: all 3s ease-in;
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    #overlays {
        position: fixed; /* Sit on top of the page content */
        display: none; /* Hidden by default */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(
            0,
            107,
            103,
            0.85
        ); /* Black background with opacity */
        z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
        cursor: default; /* Add a pointer on hover */
    }

    #overlays .header-search-box {
        width: 1200px;
        max-width: 90vw;
        margin-top: 150px;
        background-color: #fff;
        padding: 1rem;
        margin-left: auto;
        margin-right: auto;
        transition: all 3s ease-in;
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }
}

@media (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {
    #overlays {
        position: fixed; /* Sit on top of the page content */
        display: none; /* Hidden by default */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(
            0,
            107,
            103,
            0.85
        ); /* Black background with opacity */
        z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
        cursor: default; /* Add a pointer on hover */
    }

    #overlays .header-search-box {
        width: 1200px;
        max-width: 90vw;
        margin-top: 150px;
        background-color: #fff;
        padding: 1rem;
        margin-left: auto;
        margin-right: auto;
        transition: all 3s ease-in;
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    #overlays {
        position: fixed; /* Sit on top of the page content */
        display: none; /* Hidden by default */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(
            0,
            107,
            103,
            0.85
        ); /* Black background with opacity */
        z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
        cursor: default; /* Add a pointer on hover */
    }

    #overlays .header-search-box {
        width: 1200px;
        max-width: 90vw;
        margin-top: 150px;
        background-color: #fff;
        padding: 1rem;
        margin-left: auto;
        margin-right: auto;
        transition: all 3s ease-in;
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #overlays {
        position: fixed; /* Sit on top of the page content */
        display: none; /* Hidden by default */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(
            0,
            107,
            103,
            0.85
        ); /* Black background with opacity */
        z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
        cursor: default; /* Add a pointer on hover */
    }

    #overlays .header-search-box {
        width: 1200px;
        max-width: 90vw;
        margin-top: 150px;
        background-color: #fff;
        padding: 1rem;
        margin-left: auto;
        margin-right: auto;
        transition: all 3s ease-in;
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    #overlays {
        position: fixed; /* Sit on top of the page content */
        display: none; /* Hidden by default */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(
            0,
            107,
            103,
            0.85
        ); /* Black background with opacity */
        z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
        cursor: default; /* Add a pointer on hover */
    }

    #overlays .header-search-box {
        width: 1200px;
        max-width: 90vw;
        margin-top: 150px;
        background-color: #fff;
        padding: 1rem;
        margin-left: auto;
        margin-right: auto;
        transition: all 3s ease-in;
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }
}

@media (min-width: 1281px) {
    #overlays {
        position: fixed; /* Sit on top of the page content */
        display: none; /* Hidden by default */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(
            0,
            107,
            103,
            0.85
        ); /* Black background with opacity */
        z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
        cursor: default; /* Add a pointer on hover */
    }

    #overlays .header-search-box {
        width: 1200px;
        max-width: 90vw;
        margin-top: 150px;
        background-color: #fff;
        padding: 1rem;
        margin-left: auto;
        margin-right: auto;
        transition: all 3s ease-in;
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }
}