/*
    Foundation
    Mobile
    Shameless Bootstrap Grid Grab
*/
:root {
    --dark: #031723;
    --sky: #2193fd;
    --sunny: #FFE03F;
    --purple: #1D0254;
    --white: #fff;
}
  
/*
Foundation
*/
body.menu-open {
    overflow: hidden;
}
.nav, .nav.mega-menu-nav {
    background-color: transparent;
}

#csMegaMenuTop *, #csMegaMenuMobile * {
  box-sizing: border-box;
}

#csMegaMenuTop .nav-item > a,
#csMegaMenuTop .mega-menu-toggle,
#csMegaMenuMobile .nav-item > a,
#csMegaMenuMobile .mm-mobile-toggle,
.nav.megamenu-nav.darkHeader .top-nav-wrapper a
.top-nav-wrapper a {
    color: var(--white);
}
#csMegaMenuTop .nav-item > a:hover,
#csMegaMenuTop .nav-item .mega-menu-toggle:hover,
#csMegaMenuTop .nav-item .mega-menu-toggle.open {
    color: var(--sunny);
}
#csMegaMenuTop .nav-item .mega-menu-toggle:hover .caret path,
#csMegaMenuTop .nav-item .mega-menu-toggle.open .caret path {
    fill: var(--sunny);
}
.nav.mega-menu-nav {
    transition: all 0.3s ease-out;
}
.nav.mega-menu-nav.white {
    background-color: var(--white);
    box-shadow: 0 4px 34px 0 #0000000d;
}
.nav.mega-menu-nav.white .mb-menu-toggle svg path {
    fill: var(--dark);
}
.nav.mega-menu-nav.white .top-nav-wrapper a {
    color: var(--dark);
}
.nav.mega-menu-nav.white #csMegaMenuTop .nav-item > a,
.nav.mega-menu-nav.white #csMegaMenuTop .nav-item .mega-menu-toggle,
.nav.mega-menu-nav.white #csMegaMenuTop .nav-item .mega-menu-toggle,
.nav.mega-menu-nav.white #csMegaMenuTop .nav-item .mm-mobile-toggle,
.nav.mega-menu-nav.white #csMegaMenuTop .nav-item .mm-mobile-toggle {
    color: var(--dark);
}
.nav.mega-menu-nav.white #csMegaMenuTop .nav-item .mega-menu-toggle .caret path,
.nav.mega-menu-nav.white #csMegaMenuTop .nav-item .mega-menu-toggle .caret path {
    fill: var(--dark);
}
.nav.mega-menu-nav.white #csMegaMenuTop .nav-item .mega-menu-toggle:hover .caret path,
.nav.mega-menu-nav.white #csMegaMenuTop .nav-item .mega-menu-toggle:hover .caret path {
    fill: var(--sky);
}
.nav.mega-menu-nav.white #csMegaMenuTop .nav-item > a:hover,
.nav.mega-menu-nav.white #csMegaMenuTop .nav-item .mega-menu-toggle:hover,
.nav.mega-menu-nav.white #csMegaMenuTop .nav-item .mega-menu-toggle.open {
    color: var(--sky);
}
.top-nav-wrapper {
    padding-bottom: 15px;
}
.mega-menu-container {
align-items: center;
display: flex;
justify-content: space-between;
padding: 20px 0;
}
.main-nav {
    align-items: center;
    display: flex;
    list-style-type: none;
    gap: 33px;
}
.mega-menu-toggle {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    gap: 4px;
}
nav.mega-menu .nav-item > .direct-link,
nav.mega-menu .nav-item > .mega-menu-toggle,
nav.mega-menu .nav-item > .mm-mobile-toggle {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 125% */
    padding: 12px 0;
    text-decoration: none;
    transition: all 0.2s ease-out;
}
.mega-menu .nav-item .mega-menu-toggle .caret,
.mega-menu .nav-item .mm-mobile-toggle .caret {
    transition: all 0.1s ease-out;
}
.mega-menu .nav-item .mega-menu-toggle.open .caret,
.mega-menu .nav-item .mm-mobile-toggle.open .caret {
    transform: rotate(180deg) scaleX(-1);
}
.mega-menu-display .menu-section {
    margin: 0 auto;
    max-width: 1330px;
}
.mega-menu-display .menu-section.bottom-links-active,
.mm-mobile .menu-section.bottom-links-active {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 120px;
}
.mm .menu-section.bottom-links-active .bottom-links {
    bottom: 0;
    display: flex;
    left: 0;
    position: absolute;
    width: 100%;
}
.mm .menu-section.bottom-links-active .bottom-links a {
    color: var(--sunny);
    text-align: center;
    padding: 30px 20px;
    width: 50%;
}
#csMegaMenuTop .nav-item > a:hover {
    transition: background-color 0.2s ease-out;
}
.mega-menu-display {
    border-radius: 10px;
    border: 2px solid var(--Primary-Colors-Contract-Safe-Blue, #0D4EB5);
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.25);
    display: none;
    margin: 0 auto;
    max-width: 1330px;
    overflow: hidden;
    position: absolute;
    top: 135px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
.mega-menu-display .menu-section {
    padding: 20px 50px;
}
.mm-inner {
    align-items: stretch;
}
.mm .cta-link {
    text-decoration: none;
}
.mm .cta-img {
    margin-bottom: 20px;
    width: 100%;
}
.mm .cta-title {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 30px */
}
.mm .cta-subtext {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}
.mm .cta-text {
    align-items: center;
    display: flex;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    gap: 15px;
    line-height: 150%; /* 24px */
    padding: 10px 10px 10px 0;
}
.mm-title {
    border-bottom: 2px solid var(--sunny);
    color: var(--Primary-Colors-White, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
    margin-bottom: 40px;
    padding-bottom: 10px;
}
.mm-links {
    display: flex;
    flex-wrap: wrap;
}
.mm-link {
    border-radius: 10px;
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    overflow: hidden;
    padding: 11px 15px;
    text-decoration: none;
    transition: all 0.2s ease-out;
}
.mm-links.item-cols-1 {
  flex-direction: column;
}
.mm-links.item-cols-1 .mm-link {
    //max-width: 300px;
}
.mm-links.item-cols-2 .mm-link {
    max-width: 50%;
}
.mm-links.item-cols-3 .mm-link {
    max-width: 33.3%;
}
.mm-links.item-cols-4 .mm-link {
    max-width: 25%;
}
.mm-links.item-cols-5 .mm-link {
    max-width: 20%;
}
.mm-link .link-title {
    align-items: flex-start;
    display: flex;
    gap: 6px;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
}
.mm-link .link-subtext {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 20.8px */
}
.mm-link .tag {
    background-color: var(--sunny);
    border-radius: 10px;
    color: var(--dark);
    display: inline-flex;
    padding: 1px 6px;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 15.6px */
    margin-top: 4px;
    text-transform: uppercase;
}
.mega-menu-display.bottom-links {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 30px 50px;
}
.mega-menu-display .bottom-links a {
    color: var(--sunny);
    width: 50%;
}


/*
Shameless Bootstrap Grid Grab
*/
//.row {
    //--bs-gutter-x: 1.5rem;
    //--bs-gutter-y: 0;
    //display: flex;
    //flex-wrap: wrap;
    //margin-top: calc(-1 * var(--bs-gutter-y));
    //margin-right: calc(-.5 * var(--bs-gutter-x));
    //margin-left: calc(-.5 * var(--bs-gutter-x))
//}
//.row>* {
    //box-sizing: border-box;
    //flex-shrink: 0;
    //width: 100%;
    //max-width: 100%;
    //padding-right: calc(var(--bs-gutter-x) * .5);
    //padding-left: calc(var(--bs-gutter-x) * .5);
    //margin-top: var(--bs-gutter-y)
//}
.col {
    flex: 1 0 0%
}
.row-cols-auto>* {
    flex: 0 0 auto;
    width: auto
}
.row-cols-1>* {
    flex: 0 0 auto;
    width: 100%
}
.row-cols-2>* {
    flex: 0 0 auto;
    width: 50%
}
.row-cols-3>* {
    flex: 0 0 auto;
    width: 33.33333333%
}
.row-cols-4>* {
    flex: 0 0 auto;
    width: 25%
}
.row-cols-5>* {
    flex: 0 0 auto;
    width: 20%
}
.row-cols-6>* {
    flex: 0 0 auto;
    width: 16.66666667%
}
.col-auto {
    flex: 0 0 auto;
    width: auto
}
.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%
}
.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%
}
.col-3 {
    flex: 0 0 auto;
    width: 25%
}
.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%
}
.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%
}
.col-6 {
    flex: 0 0 auto;
    width: 50%
}
.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%
}
.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%
}
.col-9 {
    flex: 0 0 auto;
    width: 75%
}
.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%
}
.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%
}
.col-12 {
    flex: 0 0 auto;
    width: 100%
}




/*
Mobile
*/
#csMegaMenuMobile,
.nav.mega-menu-nav .mb-menu-toggle {
    display: none;
}
.nav.mega-menu-nav .mb-menu-toggle {
    overflow: hidden;
    height: 24px;
    margin-left: 20px;
    position: relative;
    width: 32px;
}
.nav.mega-menu-nav .mb-menu-toggle svg {
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.2s ease-out;
}
.nav.mega-menu-nav .mb-menu-toggle .close {
    transform: translateX(32px);
}
.nav.mega-menu-nav .mb-menu-toggle.open .close {
    transform: translateX(0px);
}
.nav.mega-menu-nav .mb-menu-toggle.open .open {
    transform: translateX(32px);
}
@media screen and (max-width: 1200px) {
a.nav-cta {
    font-size: 12px;
    margin-left: 20px;
    padding: 10px;
}
.main-nav {
    gap: 10px;
}
}
@media screen and (max-width: 991px) {
    header {
        background-color: var(--purple) !important;
    }
    //#csBody {
        //padding-top: 112px;
    //}
    .nav, .nav.mega-menu-nav {
        background: var(--purple);
    }
    .nav.mega-menu-nav {
        display: block;
    }
    .nav.mega-menu-nav .mb-menu-toggle {
        cursor: pointer;
        display: block;
        padding: 11px 8px;
    }
    .mega-menu-container {
        padding: 10px 24px;
    }
    .mega-menu-container .cs-logo {
        max-width: 33vw;
        padding-top: 5px;
        width: 150px;
    }
    .mega-menu-container .nav-cta {
        align-items: center;
        display: flex;
        font-size: 12.6px;
        font-weight: 700;
        line-height: 18px; /* 142.857% */
        padding: 5px 13.5px;
    }
    .main-nav-mb {
        padding: 0;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    body nav.mega-menu .nav-item > a.direct-link,
    body nav.mega-menu .nav-item > .mm-mobile-toggle {
        align-items: center;
        cursor: pointer;
        display: flex;
        gap: 10px;
        padding: 15px 35px;
    }
    .main-nav-mb .menu-section {
        padding: 20px 35px
    }
    .nav ul.main-nav-mb,
    #csMegaMenuMobile {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }
    .nav ul.main-nav-mb,
    #csMegaMenuMobile.menu-open {
        max-height: 85vh;
        overflow-x: hidden;
        overflow-y: scroll;
        transition: max-height 0.5s ease-in;
    }
    #csMegaMenuMobile .mega-menu {
        padding: 20px 0;
    }
    .mm-mobile {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
    }
    #csMegaMenuMobile .mm-mobile.open {
        max-height: 500vh;
        position: relative;
        transition: max-height 1s ease-in;
    }
    .mm-mobile .mm-inner {
        flex-direction: column;
    }
    ul.main-nav-mb {
        list-style: none;
    }
    ul.main-nav-mb li {
        margin: 0px;
    }
    #hs_cos_wrapper_mega_menu #csMegaMenuMobile .nav-item >.mm-mobile-toggle.open {
        color: var(--sunny);
    }
    #hs_cos_wrapper_mega_menu #csMegaMenuMobile .nav-item >.mm-mobile-toggle.open .caret path {
        fill: var(--sunny) !important;
    }
    .mm-mobile .menu-section .mm-links {
        border-top: 2px solid var(--sunny);
        padding: 20px 0 0 0;
    }
    .mm-mobile .mm-link { 
        max-width: 50%;
    }
    .mm-mobile .menu-section:first-child {
        padding-top: 10px;
    }
    .mm-mobile .menu-section:first-child .mm-title {
        margin-bottom: 10px;
    }
    .mm-mobile .menu-section:first-child .mm-title {
        display: none;
    }
    .no-mobile {
        display: none !important;
    }
}
@media screen and (max-width: 500px) {
    .mega-menu-container .nav-cta {
        font-size: 10px;
    }
    .mega-menu-container {
        padding: 10px 20px;
    }
    .mm-mobile .menu-section.bottom-links-active {
        margin-bottom: 0px;
    }
    .main-nav-mb .nav-item:last-child .menu-section.bottom-links-active {
        margin-bottom: 50px;
    }
    .mm-mobile .mm-link {
        max-width: 100%;
    }
    .top-nav-wrapper {
    padding-right: 25px;
    }
}
@media screen and (max-width: 400px) {
  .mega-menu-container .nav-cta {
    font-size: 9px;
  }
}