#footer {
    display: none;
}

#logo-main {
    box-shadow: 3px 0 8px rgba(0, 0, 0, 0.08);
}

#logo-main .site-title {
    margin: 0;
    padding: 0 12px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: 0.4px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

html,
body {
    overflow-x: hidden;
}


/* =========================================================
   GENERAL RESPONSIVE SAFETY
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

.site-title,
.site-description {
    max-width: 100%;
}


/* =========================================================
   HEADER / LOGO
   ========================================================= */

/* Tablet */
@media (max-width: 900px) {

    #logo-main {
        width: 100%;
    }

    #logo-main .site-title {
        font-size: 27px;
        line-height: 1;
        letter-spacing: 0.7px;
        padding: 0 15px;
    }

}


/* Mobile */
@media (max-width: 767px) {

    #logo-main {
        width: 100%;
        padding: 12px 10px;
    }

    #logo-main .site-title {
        font-size: 22px !important;
        line-height: 1.15 !important;
        letter-spacing: 0.8px;
        padding: 0 8px;
        white-space: normal;
    }

    #logo-main .site-description {
        font-size: 12px;
        line-height: 1.4;
        padding: 4px 10px 0;
        text-align: center;
    }

}


/* =========================================================
   NAVIGATION
   ========================================================= */

/* Tablet */
@media (max-width: 900px) {

    #main-menu > ul > li > a,
    .main-navigation ul li a {
        padding-left: 7px;
        padding-right: 7px;
        font-size: 13px;
    }

}


/* Mobile */
@media (max-width: 767px) {

    #main-menu,
    .main-navigation {
        width: 100%;
    }

    #main-menu > ul {
        width: 100%;
    }

    #main-menu > ul > li {
        width: 100%;
    }

    #main-menu > ul > li > a,
    .main-navigation ul li a {
        display: block;
        width: 100%;
        padding: 11px 15px;
        font-size: 15px;
        line-height: 1.4;
    }

    /* Mobile dropdowns */
    #main-menu ul ul {
        position: static;
        width: 100%;
        box-shadow: none;
    }

    #main-menu ul ul li,
    #main-menu ul ul li a {
        width: 100%;
    }

}


/* =========================================================
   GENERAL MOBILE COLUMN FIXES
   ========================================================= */

@media (max-width: 767px) {

    .one_half,
    .one_third,
    .one_fourth,
    .two_third,
    .three_fourth {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 25px;
    }

    .container,
    .inner,
    .site-content,
    .content-area {
        max-width: 100%;
        width: 100%;
    }

}


/* =========================================================
   MORE INFORMATION SECTION
   Contact Lenses / Pay Your Bill / Locations / Insurance
   ========================================================= */

/*
   Desktop:
   Keep the four sections in a clean 2 x 2 layout.

   The theme's existing column classes are used rather than
   relying on a made-up section ID.
*/

@media (min-width: 768px) {

    .one_half {
        box-sizing: border-box;
    }

}


/* Tablet */
@media (max-width: 900px) and (min-width: 768px) {

    .one_half {
        width: 50% !important;
        box-sizing: border-box;
    }

}


/* Mobile */
@media (max-width: 767px) {

    /*
       Stack the More Information content vertically.
       This prevents the four sections from becoming cramped.
    */

    .one_half {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 25px !important;
    }

}


/* =========================================================
   MORE INFORMATION TYPOGRAPHY
   ========================================================= */

@media (max-width: 767px) {

    /*
       Make the section headings easier to read on phones.
    */

    h2 {
        line-height: 1.25;
    }

    h3 {
        line-height: 1.3;
    }

    p {
        line-height: 1.6;
    }

}


/* =========================================================
   BUTTONS / LINKS
   ========================================================= */

@media (max-width: 767px) {

    .button,
    .read-more,
    input[type="submit"],
    input[type="button"] {
        max-width: 100%;
        white-space: normal;
        height: auto;
    }

}


/* =========================================================
   PHONE NUMBERS
   ========================================================= */

@media (max-width: 767px) {

    a[href^="tel:"] {
        white-space: nowrap;
    }

}


/* =========================================================
   MOBILE SPACING
   ========================================================= */

@media (max-width: 767px) {

    .site-content {
        padding-left: 15px;
        padding-right: 15px;
    }

}