@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html {
  font-size: 100%; /* This defaults to the user's base font size, typically 16px */
}

.hide,
.hidden {
    display: none !important;
	visibility: hidden !important;
}

/*
 * Header Styles
*/
header .re-branded-sog-header-container {
    /* color: #414141; */
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    /* padding: 2.5rem 8.4375rem 1.875rem 8.4375rem; */
}

/* Single breakpoint (e.g., Only Medium devices): */
@media (min-width: 768px) and (max-width: 1192.98px) {
    header .re-branded-sog-header-container {
        padding-right: 3rem;
        padding-left: 3rem;
    }
}

/* Small mobile and down (phones or small devices). */
@media(max-width: 767.99px) {
    header .re-branded-sog-header-container {
        padding-right: 1rem;
        padding-left: 3rem;
    }

    header .re-branded-sog-header-container .school-name-container.border-bottom-solid {
        margin-right: 1rem;
    }
}

header .re-branded-sog-header-container .school-name-container.border-bottom-solid {
    border-bottom: 1px solid #4B9CD3 !important;
    margin-bottom: 1rem; /* 0.625rem */
    padding: 3.125rem 0; /* 8.4375rem; */
    display: flex;
    /* height: 6.25rem; */
    /* padding: 3.125rem 8.4375rem; */
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* gap: 0.625rem; */
    align-self: stretch;
}

header .re-branded-sog-header-container .school-name-container .school-name h1 {
    color: #4B9CD3;

    /* Header level 1 */
    font-family: "Open Sans";
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.875rem; /* 100% */
    margin: 0;
}

header .re-branded-sog-header-container .site-name-navigation-container {
    display: flex;
    padding: 0 0 0.875rem 0; /* padding: 0 8.4375rem 0.875rem 8.4375rem; */
    flex-direction: row;
    align-items: flex-start;
    /* gap: 0.625rem; */
    align-self: stretch;
    justify-content: space-between;
}

header .re-branded-sog-header-container .site-name-navigation-container .site-name h2 {
    color: #414141;
    font-family: Montserrat;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem; /* 125% */
    letter-spacing: 0.06rem;
    text-transform: uppercase;
}

header .re-branded-sog-header-container .site-name-navigation-container .header-navigation {
    display: flex;
    /* width: 2.91006rem;
    height: 1.34375rem; */
    flex-direction: row;
    flex-shrink: 0;
    justify-content: space-between; /* justify-content: center; */
    align-items: center;
    align-self: stretch;
}

header .re-branded-sog-header-container .site-name-navigation-container .header-navigation ul#menu-main {
    display: inline-flex;
    padding: 0 0.9375rem 0.25rem 0.3125rem; /* 0.25rem 0.9375rem 0.25rem 0.3125rem; */
    align-items: center;
    /* gap: 0.625rem; */
}

header .re-branded-sog-header-container .site-name-navigation-container .header-navigation ul#menu-main li.menu-item {
    display: inline-flex;
    /* width: 33.93875rem;
    height: 1.5625rem; */
    padding: 0 0.625rem;
    justify-content: center;
    align-items: flex-start;
    gap: 1.25rem;
}

header .re-branded-sog-header-container .site-name-navigation-container .header-navigation ul#menu-main li.menu-item a {
    color: #272626;
    font-family: Poppins;
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem; /* 160% */
    display: flex;
    /* width: 2.88875rem;
    height: 1.5625rem; */
    padding: 0 0 0.09375rem 0; /* 0.125rem 0 0.09375rem 0; */
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

header.header .hfg_header.site-header {
    box-shadow: none !important;
    border-bottom: none !important;
}

/*
 * Make the neve header section inline with our header design,
 * and remove the default box shadow and border bottom that the
 * Neve header has by default. The div#header-grid selector is
 * included here in case we need to add any styles to the header
 * grid container in the future, but currently it is empty because
 * we are able to achieve the desired header design without adding
 * any additional styles to the header grid container.
 */

.builder-item.has-nav.hfg-is-group.has-primary-menu {
    max-height: 44px;
}

/* Min-width (e.g., Small devices and up): */
/* Applies to sm, md, lg, xl, and xxl */
/* @media (min-width: 576px) {} */

/* Styles ONLY for screens between 992px and 1199.98px */
@media (min-width: 2904px) and (max-width: 3375.98px) {
    div#header-grid {
        position: absolute;
        right: calc(66.85% - 1170px);
        top: 6.55em;
        max-height: 3.75rem;
    }
}

@media (min-width: 2469px) and (max-width: 2903.98px) {
    div#header-grid {
        position: absolute;
        right: calc(70% - 1170px);
        top: 6.55em;
        max-height: 3.75rem;
    }
}

@media (min-width: 2122px) and (max-width: 2468.98px) {
    div#header-grid {
        position: absolute;
        right: calc(73% - 1170px);
        top: 6.55em;
        max-height: 3.75rem;
    }
}

@media (min-width: 1806px) and (max-width: 2121.98px) {
    div#header-grid {
        position: absolute;
        right: calc(77% - 1170px);
        top: 6.55em;
        max-height: 3.75rem;
    }
}

@media (min-width: 1388px) and (max-width: 1805.98px) {
    div#header-grid {
        position: absolute;
        right: calc(82% - 1170px);
        top: 6.55em;
        max-height: 3.75rem;
    }
}

/* Styles ONLY for screens between 992px and 1199.98px */
@media (min-width: 1354px) and (max-width: 1623.98px) {
    div#header-grid {
        position: absolute;
        right: calc(85% - 1170px);
        top: 6.55em;
        max-height: 3.75rem;
    }
}

/* Styles ONLY for screens between 992px and 1199.98px */
@media (min-width: 1206px) and (max-width: 1353.98px) {
    div#header-grid {
        position: absolute;
        right: calc(92% - 1170px);
        top: 6.55em;
        max-height: 3.75rem;
    }
}

/* Styles ONLY for screens between 992px and 1199.98px */
@media (min-width: 1200px) and (max-width: 1205.98px) {
    div#header-grid {
        position: absolute;
        right: 0; /* 19em; */
        top: 6.55em;
        max-height: 3.75rem;
    }
}

/* Styles ONLY for screens between 992px and 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    div#header-grid {
        position: absolute;
        right: 1rem;
        top: 6.55em;
        max-height: 3.75rem;
    }
}

/* Applies to md, lg */
/* @media (min-width: 768px) and (max-width: 991.98px) {
    div#header-grid {
        position: absolute;
        right: 0;
        top: 6.55em;
        max-height: 3.75rem;
    }
} */

/* Medium mobile right before mobile menu shows. */
@media (min-width: 959px) and (max-width: 972.98px) {
    div#header-grid .builder-item .item--inner {
        font-size: 0.95rem;
    }
}


@media (min-width: 960px) and (max-width: 991.98px) {
    div#header-grid {
        top: 6.55em !important;
    }
}

@media (min-width: 768px) and (max-width: 959.98px) {
    div#header-grid {
        top: 8.55em;
    }
}

/* Single breakpoint (e.g., Only Medium devices): */
@media (min-width: 768px) and (max-width: 991.98px) {
    div#header-grid {
        position: absolute;
        right: 0;
        max-height: 3.75rem;
    }
}

/* Max-width (e.g., Medium devices and down): */
/* Applies to md, sm, and xs */
@media (max-width: 991.98px) {
    /* div#header-grid {
        position: absolute;
        right: 0;
        top: 9.55em;
        max-height: 3.75rem;
    } */
}