/*--- redefine font families ----*/

@font-face {
    font-family: 'Montserrat', sans-serif;
}

@font-face {
    font-family: 'Lato', sans-serif;
}

.base-font{
    font-family: 'Montserrat';
    -webkit-font-smoothing: antialiased;
}

.secondary-font{
    font-family: 'Lato';
    -webkit-font-smoothing: antialiased;
}

.modern{
  font-family: 'roboto', 'sans-serif';
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
    font-family: 'Montserrat';
}

button{
    font-family: 'Lato';
}

/*------------- navigation --------------*/

.nav-dd {
    display: flex;
    position: relative;
    white-space: nowrap;
    line-height: 90px;
    padding-left: 12px;
    padding-right: 12px;
}

.nav-sublinks {
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    max-height: 0px;
    position: absolute;
    top: 35px;
    background-color: #fff;
    padding: 0px;
    color: #111;
    padding-left: 20px;
    padding-right: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
    left: -25px;
}

.nav-sublinks > a{
    white-space: nowrap;
    padding-top: 10px;
    padding-bottom: 10px !important;
    padding-left: 18px;
    padding-right: 18px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    font-weight: 400 !important;
    letter-spacing: initial !important;
    font-family: 'Lato' !important;
    font-size: 16px !important;
    color: #5c6275 !important;
    text-transform: initial !important;
    line-height: initial;
}

.nav-sublinks > a:hover{
    background-color: #f3f5fb;
}

.nav-sublinks > a:after{
    display: none !important;
}

.nav-dd:hover .nav-sublinks > a{
    opacity: 1;
}

.nav-dd:hover .nav-sublinks{
    visibility: visible;
    opacity: 1;
    max-height: initial;
    top: 90px;
    border-top: 1px solid #e0e9ee;
}

.list-item-sublink-text, .list-item-sublink-text-external {
    position: relative;
}

.list-item-sublink p{
    font-family: 'Lato';
    font-size: 16px;
    color: #5c6275;
}

.list-item-sublink-text:hover p, .list-item-sublink-text-external:hover p{
    color: #2a3664;
}

.list-item-sublink-text:hover, .list-item-sublink-text-external:hover{
    background-color: #f3f5fb;
}

.list-item-sublink .absoluteA{
    margin: 0px !important;
}

.list-item-sublink-text, .list-item-sublink-text-external{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    font-size: 13px !important;
    width: auto !important;
}


.list-item-sublink-link{
    margin-top: 0px !important;
}

/*
.list-item-sublink > .list-item-sublink-link:first-child > .list-item-sublink-text:first-child{
    padding-top: 10px !important;
}

.list-item-sublink > .list-item-sublink-link:first-child > .list-item-sublink-text-external:first-child{
    padding-top: 10px !important;
}
*/

/*------------------------ drilldown headers (for object detail views) --------------------- */
  
  .cs-drilldown-menu{
      border-top: 1px solid #e4ebf1;
      margin-top: 10px;
  }
  
  .cs-drilldown-menu::-webkit-scrollbar { 
      display: none; 
  }
  
  .cs-drilldown-menu-item{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-weight: 400;
        font-size: 16px;
        border-top: 3px solid rgba(255,255,255,0);
        color: #99a4b3;
        white-space: nowrap;
        cursor: pointer;
        font-family: roboto;
  }
  
  .cs-drilldown-menu-item.active, .cs-drilldown-menu-item.active:hover{
      border-top: 3px solid #2a375f;
        color: #2a375f;
  }
  
  .cs-drilldown-menu-item:hover{
      color: #081333;
  }
  
  .cs-drilldown-menu-item.dots{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/dots_on_grey_horizontal.png);
      width: 30px;
      min-width: 30px;
      max-width: 30px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 25px;
      padding-left: 8px;
      padding-right: 8px;
  }
  
  .cs-drilldown-menu-item.dots:hover{
      background-image: url(https://s3-us-west-2.amazonaws.com/myclubspot/dots_on_grey_horizontal_active.png);
  }
  
  .cs-drilldown-menu-dropdown{
      opacity: 0;
      visibility: hidden;
      top: 140px;
      position: absolute;
      text-align: left;
      background-color: #fff;
      padding: 0px;
      border-radius: 2px;
      box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -moz-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      -webkit-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
      color: #111;
      z-index: 10;
      right: -5px;
      padding-left: 15px;
      padding-right: 15px;
  }

/*------------------------ nav and header -------------- */

.cs-header-icon{
    margin-top: 10px;
    margin-right: 0px;
    border-radius: 0px;
    background-size: contain;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    box-shadow: none;
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: left;
    height: 80px;
    max-height: 80px;
    min-height: 80px;
}

.cs-header{
    height: 90px;
    background-color: rgba(255,255,255, 0);
    z-index: 102;
    position: relative;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    -webkit-transform: translate3d(0,0,0);
    /*
    overflow: hidden;
    */
}

/* RGB channels for gradient fills / early interim — keep in sync with
   .color_scheme_* .cs-header-background solid fills. */
.cs-header.color_scheme_white{ --cs-header-background-rgb: 255, 255, 255; }
.cs-header.color_scheme_light{ --cs-header-background-rgb: 234, 239, 239; }
.cs-header.color_scheme_dark{ --cs-header-background-rgb: 24, 27, 62; }
.cs-header.color_scheme_black{ --cs-header-background-rgb: 0, 0, 0; }
.cs-header.color_scheme_accent_light{ --cs-header-background-rgb: 255, 255, 255; }
.cs-header.color_scheme_accent_dark{ --cs-header-background-rgb: 35, 102, 81; }

.cs-header.cs-header-background-color-white,
.cs-header.cs-header-background-color-light,
.cs-header.cs-header-background-color-accent_light{
    --cs-header-submenu-text-rgb: 24, 27, 62;
}
.cs-header.cs-header-background-color-dark,
.cs-header.cs-header-background-color-black,
.cs-header.cs-header-background-color-accent_dark{
    --cs-header-submenu-text-rgb: 255, 255, 255;
}
.cs-header.cs-header-background-color-white{ --cs-header-background-rgb: 255, 255, 255; }
.cs-header.cs-header-background-color-light{ --cs-header-background-rgb: 234, 239, 239; }
.cs-header.cs-header-background-color-dark{ --cs-header-background-rgb: 24, 27, 62; }
.cs-header.cs-header-background-color-black{ --cs-header-background-rgb: 0, 0, 0; }
.cs-header.cs-header-background-color-accent_light{ --cs-header-background-rgb: 255, 255, 255; }
.cs-header.cs-header-background-color-accent_dark{ --cs-header-background-rgb: 35, 102, 81; }

/* Sticky blur replaces the solid header layer. */
.cs-header-blur-layer{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.01);
    -webkit-backdrop-filter: blur(var(--cs-header-blur-radius, 14px)) saturate(130%);
    backdrop-filter: blur(var(--cs-header-blur-radius, 14px)) saturate(130%);
    transition: opacity 350ms ease;
}

.cs-header-blur-light{ --cs-header-blur-radius: 5px; }
.cs-header-blur-medium{ --cs-header-blur-radius: 12px; }
.cs-header-blur-strong{ --cs-header-blur-radius: 18px; }

.cs-header-section-gradient{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 330ms ease;
    height: var(--cs-header-section-gradient-height, 45vh);
    background-image: linear-gradient(
        to bottom,
        rgba(var(--cs-overlay-rgb, 24, 27, 62), var(--cs-header-section-gradient-peak, 0.75)) 0%,
        rgba(var(--cs-overlay-rgb, 24, 27, 62), 0) 100%
    );
}

.cs-header-section-gradient.cs-overlay-color-white{ --cs-overlay-rgb: 255, 255, 255; }
.cs-header-section-gradient.cs-overlay-color-light{ --cs-overlay-rgb: 234, 239, 239; }
.cs-header-section-gradient.cs-overlay-color-dark{ --cs-overlay-rgb: 24, 27, 62; }
.cs-header-section-gradient.cs-overlay-color-black{ --cs-overlay-rgb: 0, 0, 0; }

.cs-header-section-gradient.cs-header-section-gradient-legacy{
    background-image: linear-gradient(
        to bottom,
        var(--cs-fade-color-top, #ffffff),
        transparent
    );
}

.cs-header-following-section-gradient .cs-header-section-gradient{
    opacity: 1;
}

.cs-header.cs-header-following-section-gradient .cs-header-blur-layer,
.cs-header.cs-header-following-section-gradient .cs-header-background{
    opacity: 0 !important;
}

.cs-header-has-v2-chrome.cs-header-background-mode-gradient .cs-header-blur-layer{
    opacity: 0 !important;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.cs-header-has-v2-chrome.cs-header-background-mode-gradient .cs-header-background{
    bottom: -10%;
    background-color: transparent !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.cs-header-has-v2-chrome .cs-header-background::before{
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: 0;
    background-image: linear-gradient(
        to bottom,
        rgba(
            var(--cs-header-background-rgb, 255, 255, 255),
            var(--cs-header-background-opacity, 1)
        ) 0%,
        rgba(var(--cs-header-background-rgb, 255, 255, 255), 0) 100%
    );
    transition: opacity 500ms ease;
}

.cs-header-has-v2-chrome.cs-header-background-mode-gradient .cs-header-background::before{
    opacity: 1;
}

/* Use the configured scrolled treatment color for the soft handoff before the
   first section clears the header. */
.cs-header.cs-header-background-on-scroll:not(.cs-header-has-section-gradient-transfer) .cs-header-section-gradient{
    height: 160%;
    --cs-overlay-rgb: var(--cs-header-background-rgb, 255, 255, 255);
    --cs-header-section-gradient-peak: var(--cs-header-background-opacity, 1);
    background-image: linear-gradient(
        to bottom,
        rgba(
            var(--cs-header-background-rgb, 255, 255, 255),
            var(--cs-header-background-opacity, 1)
        ) 0%,
        rgba(var(--cs-header-background-rgb, 255, 255, 255), 0) 100%
    );
}

.cs-header-early-default-gradient.cs-header-background-on-scroll .cs-header-blur-layer,
.cs-header-early-default-gradient.cs-header-background-on-scroll .cs-header-background{
    opacity: 0 !important;
}

.cs-header-early-default-gradient.cs-header-background-on-scroll .cs-header-section-gradient{
    opacity: 1;
}

/* The active solid background scales this shadow with its configured opacity. */
.cs-header-blur-active:not(.cs-header-background-mode-gradient) .cs-header-background::after,
.cs-header-top-visible:not(.cs-header-background-mode-gradient) .cs-header-background::after{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    pointer-events: none;
    box-shadow:
        0 3px 9px rgba(0, 0, 0, 0.82),
        0 9px 24px rgba(0, 0, 0, 0.46);
}

.cs-header.cs-header-behavior_always_visible{
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
}

.cs-header-has-v2-chrome .cs-header-background{
    opacity: 0 !important;
    background-color: rgb(var(--cs-header-background-rgb, 255, 255, 255)) !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    -moz-box-shadow: none;
    transition: opacity 330ms ease, background-color 500ms ease;
}

.cs-header-background-on-scroll .cs-header-blur-layer,
.cs-header-background-on-scroll .cs-header-section-gradient,
.cs-header-background-on-scroll .cs-header-background{
    transition-duration: 500ms;
}

.cs-header-blur-active .cs-header-blur-layer,
.cs-header-top-visible .cs-header-blur-layer{
    opacity: 1;
}

.cs-header-blur-active .cs-header-background,
.cs-header-top-visible .cs-header-background{
    opacity: var(--cs-header-background-opacity, 1) !important;
}

.cs-header-background-mode-none .cs-header-blur-layer,
.cs-header-background-mode-none .cs-header-background{
    opacity: 0 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-image: none;
    transition: none;
}

.cs-header-background-mode-none:not(.cs-header-early-default-gradient) .cs-header-section-gradient{
    opacity: 0 !important;
    background-image: none;
    transition: none;
}

/* this is for swapping in a title on mobile */
.cs-header-title-insert{
    display: none;
}

.cs-header.opaque.promoActive{
    height: 88px;
}

.cs-header.opaque.scrolled.promoActive{
    height: 90px;
}

.cs-header-promo{
    margin-top: 0px;
    height: 20px;
    color: #fff;
    background-color: #3a80d8;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    line-height: 21px;
    font-family: 'roboto';
    font-weight: normal;
}

.cs-header-promo.error{
    background-color: #8e3e3e;
}

/*-- hide it as the user scrolls --*/
.cs-header.scrolled.promoActive .cs-header-promo{
    margin-top: -20px;
}

/*
.paddingTopHeader{
    padding-top: 109px;
}
*/

.cs-header.startOpaque{
    background-color: #fff;
}

.cs-header.opaque, .cs-header.stayOpaque{
    background-color: rgba(255,255,255, 0.95) !important;
    box-shadow: 0px -3px 6px #1c364a;
    -moz-box-shadow: 0px -3px 6px #1c364a;
    -webkit-box-shadow: 0px -3px 6px #1c364a;
    height: 90px;
}

.cs-account-icon-wrap{
    height: 34px;
    line-height: 34px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 18px;
    position: absolute;
    right: 0px;
    top: 0px;
    font-weight: bold;
    color: #3d62d9;
    padding-right: 10px;
}

.previewZone .cs-sub-header{
    position: relative;
    top: initial;
}

.cs-sub-header{
    height: 40px;
    line-height: 40px;
    background-color: rgba(253,253,253, 0.95);
    border-bottom: 1px solid #e7ecf1;
    top: 90px;
    position: fixed;
    left: 0px;
    right: 0px;
    z-index: 10;
}

.cs-header-link-wrap{
    color: #596677;
    font-family: 'roboto';
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: normal;
    margin-left: 14px;
    margin-right: 14px;
    padding-left: 5px;
    padding-right: 5px;
    border-top: 2px solid rgba(255,255,255,0);
    border-bottom: 2px solid rgba(255,255,255,0);
    position: relative;
}

.cs-header-link-wrap:hover, .cs-header-link-wrap.active{
    color: #111;
    /*
    border-bottom: 2px solid #527ffc;
    */
}

/*
.innerHeader{
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
    width: 97%;
    position: relative;
}

.innerHeader.narrow{
    max-width: 900px;
}
*/

.cs-header h1{
    font-weight: 100;
    line-height: 70px;
    padding-left: 24px;
    font-size: 24px;
    letter-spacing: 2px;
    color: #323f4c;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'roboto';
    font-weight: normal;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cs-header h1.lessPadding{
    padding-left: 15px;
}

.cs-mobile-menu-section-header{
    font-family: 'Montserrat';
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    color: #323f4c !important;
    padding-bottom: 10px !important;
    padding-top: 30px !important;
}

.cs-mobile-menu-section-header:hover{
    background-color: #f3f5fb !important;
}

/*------------------------ overwriting material ui menu (mobile) -------------- */
    
.MuiDrawer-root.MuiDrawer-modal .MuiPaper-root.MuiDrawer-paper.MuiDrawer-paperAnchorLeft{
    width: 90% !important;
    max-width: 400px !important;
}


.MuiDrawer-root.MuiDrawer-modal .MuiPaper-root.MuiDrawer-paper.MuiDrawer-paperAnchorLeft .MuiList-root.MuiList-padding{
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: auto !important;
    overflow-x: hidden !important;
    padding-top: 30px !important;
    padding-bottom: 50px !important;
        overflow: auto;
      -webkit-transition-property: top, bottom;
      transition-property: top, bottom;
      -webkit-transition-duration: .2s, .2s;
      transition-duration: .2s, .2s;
      -webkit-transition-timing-function: linear, linear;
      transition-timing-function: linear, linear;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
}

/*------------------------ header sublinks -------------- */

.cs-header-sublink-outer{
    opacity: 0;
    visibility: hidden;
    z-index: 30;
    position: absolute;
    text-align: left;
    line-height: 40px;
    background-color: #fff;
    border-radius: 3px;
    top: 60px;
    right: 0px;
    white-space: nowrap;
    box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -moz-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    -webkit-box-shadow: 1px 1px 5px 2px rgba(50,50,93,.1), 0 3px 6px 0 rgba(0,0,0,.07);
}

.cs-nth-sublink-wrap{
    border-top: 1px solid #f0f3f7;
}

.cs-header-link-wrap:hover .cs-header-sublink-outer, .cs-header-sublink-outer:hover{
    visibility: visible;
    opacity: 1;
    top: 55px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.cs-header-sublink-outer::after, .startOpaque.opaque .cs-header-sublink-outer::after{
    content: "";
    position: absolute;
    bottom: 100%;
    top: auto;
    left: 85%;
    margin-left: -16px;
    border-width: 11px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.startOpaque .cs-header-sublink-outer::after{
    border-color: transparent transparent #e9eef2 transparent;
}

.cs-header-sublink-wrap{
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

.nthSublinkWrap{
    border-top: 1px solid #f0f3f7;
}

.cs-header-sublink-label{
    font-family: 'Lato';
    color: #5b6779;
    font-size: 14px;
    line-height: 20px;
    text-transform: none;
    font-weight: normal;
}

.cs-header-sublink-label:hover{
    color: #111;
}

.cs-header-sublink-explain{
        font-size: 14px;
    text-transform: none;
    font-family: 'Lato';
    font-weight: normal;
    line-height: 18px;
    padding-bottom: 10px;
    color: #6e7885;
}

/* Left-aligned sub-menus whose options cascade down/in on hover (opt-in via
   header.submenu_style: "animated_buttons" or "animated_flat"). Background
   mirrors the header's own on-scroll blur/tint look (color, opacity, blur
   amount) when sticky blur is configured on the header; otherwise falls
   back to a generic frosted panel (--cs-header-blur-radius /
   --cs-header-background-opacity are simply undefined in that case, so the
   var() fallbacks below kick in). */
.cs-header-submenu-style_animated_buttons .cs-header-sublink-outer,
.cs-header-submenu-style_animated_flat .cs-header-sublink-outer{
    left: 0;
    right: auto;
    transform: none;
    top: 55px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: rgba(var(--cs-header-background-rgb, 255, 255, 255), .92);
    -webkit-backdrop-filter: blur(var(--cs-header-blur-radius, 14px)) saturate(130%);
    backdrop-filter: blur(var(--cs-header-blur-radius, 14px)) saturate(130%);
    transition: opacity .15s ease, visibility 0s linear .15s;
}

/* Flips to hang from the right when the left-aligned panel would otherwise
   run past the right edge of the viewport (toggled in JS - see
   sync_submenu_edge_alignment in the header component). */
.cs-header-submenu-style_animated_buttons .cs-header-sublink-outer.cs-header-sublink-outer_align-right,
.cs-header-submenu-style_animated_flat .cs-header-sublink-outer.cs-header-sublink-outer_align-right{
    left: auto;
    right: 0;
}

.cs-header-submenu-style_animated_buttons.cs-header-has-v2-chrome .cs-header-sublink-outer,
.cs-header-submenu-style_animated_flat.cs-header-has-v2-chrome .cs-header-sublink-outer{
    background-color: rgba(var(--cs-header-background-rgb, 255, 255, 255), .84);
}

.cs-header-submenu-style_animated_buttons.cs-header-has-v2-chrome .cs-header-sublink-label,
.cs-header-submenu-style_animated_flat.cs-header-has-v2-chrome .cs-header-sublink-label{
    color: rgb(var(--cs-header-submenu-text-rgb, 24, 27, 62)) !important;
}

.cs-header-submenu-style_animated_buttons.cs-header-has-v2-chrome .cs-header-sublink-label:hover,
.cs-header-submenu-style_animated_flat.cs-header-has-v2-chrome .cs-header-sublink-label:hover,
.cs-header-submenu-style_animated_buttons.cs-header-has-v2-chrome .cs-header-sublink-explain,
.cs-header-submenu-style_animated_flat.cs-header-has-v2-chrome .cs-header-sublink-explain{
    color: rgba(var(--cs-header-submenu-text-rgb, 24, 27, 62), .72) !important;
}

.cs-header-submenu-style_animated_buttons .cs-header-link-wrap:hover .cs-header-sublink-outer,
.cs-header-submenu-style_animated_buttons .cs-header-sublink-outer:hover,
.cs-header-submenu-style_animated_flat .cs-header-link-wrap:hover .cs-header-sublink-outer,
.cs-header-submenu-style_animated_flat .cs-header-sublink-outer:hover{
    transition: opacity .15s ease, visibility 0s linear 0s;
}

.cs-header-submenu-style_animated_buttons .cs-header-sublink-outer::after,
.cs-header-submenu-style_animated_flat .cs-header-sublink-outer::after{
    display: none;
}

/* Each option cascades down/in with a short stagger (--sm-index set per item). */
.cs-header-submenu-style_animated_buttons .cs-header-sublink-wrap,
.cs-header-submenu-style_animated_flat .cs-header-sublink-wrap{
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, background-color .1s ease;
    transition-delay:
        calc(var(--sm-index, 0) * 0.045s),
        calc(var(--sm-index, 0) * 0.045s),
        0s;
}

.cs-header-submenu-style_animated_buttons .cs-header-link-wrap:hover .cs-header-sublink-wrap,
.cs-header-submenu-style_animated_buttons .cs-header-sublink-outer:hover .cs-header-sublink-wrap,
.cs-header-submenu-style_animated_flat .cs-header-link-wrap:hover .cs-header-sublink-wrap,
.cs-header-submenu-style_animated_flat .cs-header-sublink-outer:hover .cs-header-sublink-wrap{
    opacity: 1;
    transform: translateY(0);
}

/* "Buttons" variant: each item is its own rounded, insettable pill with a
   visible hover chip so the color change reads clearly against the panel. */
.cs-header-submenu-style_animated_buttons .cs-header-sublink-wrap{
    margin: 2px 5px;
    border-radius: 6px;
}

.cs-header-submenu-style_animated_buttons .cs-nth-sublink-wrap{
    border-top: none;
}

.cs-header-submenu-style_animated_buttons .cs-header-sublink-wrap:hover{
    background-color: rgba(0, 0, 0, .06);
}

.cs-header-submenu-style_animated_buttons.color_scheme_dark .cs-header-sublink-wrap:hover,
.cs-header-submenu-style_animated_buttons.color_scheme_black .cs-header-sublink-wrap:hover,
.cs-header-submenu-style_animated_buttons.color_scheme_accent_dark .cs-header-sublink-wrap:hover{
    background-color: rgba(255, 255, 255, .12);
}

/* "Flat" variant: straight edges, items flush edge-to-edge (no pill inset),
   and a very faint hover tint instead of a visible chip. */
.cs-header-submenu-style_animated_flat .cs-header-sublink-outer{
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.cs-header-submenu-style_animated_flat .cs-header-sublink-wrap:hover{
    background-color: rgba(0, 0, 0, .035);
}

.cs-header-submenu-style_animated_flat.color_scheme_dark .cs-header-sublink-wrap:hover,
.cs-header-submenu-style_animated_flat.color_scheme_black .cs-header-sublink-wrap:hover,
.cs-header-submenu-style_animated_flat.color_scheme_accent_dark .cs-header-sublink-wrap:hover{
    background-color: rgba(255, 255, 255, .06);
}

.cs-header-submenu-style_animated_buttons.color_scheme_dark .cs-header-sublink-label,
.cs-header-submenu-style_animated_buttons.color_scheme_black .cs-header-sublink-label,
.cs-header-submenu-style_animated_buttons.color_scheme_accent_dark .cs-header-sublink-label,
.cs-header-submenu-style_animated_flat.color_scheme_dark .cs-header-sublink-label,
.cs-header-submenu-style_animated_flat.color_scheme_black .cs-header-sublink-label,
.cs-header-submenu-style_animated_flat.color_scheme_accent_dark .cs-header-sublink-label{
    color: #fff;
}

.cs-header-submenu-style_animated_buttons.color_scheme_dark .cs-header-sublink-label:hover,
.cs-header-submenu-style_animated_buttons.color_scheme_black .cs-header-sublink-label:hover,
.cs-header-submenu-style_animated_buttons.color_scheme_accent_dark .cs-header-sublink-label:hover,
.cs-header-submenu-style_animated_flat.color_scheme_dark .cs-header-sublink-label:hover,
.cs-header-submenu-style_animated_flat.color_scheme_black .cs-header-sublink-label:hover,
.cs-header-submenu-style_animated_flat.color_scheme_accent_dark .cs-header-sublink-label:hover{
    color: rgba(255, 255, 255, .7);
}

.cs-header-submenu-style_animated_buttons.color_scheme_accent_light .cs-header-sublink-label,
.cs-header-submenu-style_animated_flat.color_scheme_accent_light .cs-header-sublink-label{
    color: #236651;
}

.cs-header-submenu-style_animated_buttons.color_scheme_accent_light .cs-header-sublink-label:hover,
.cs-header-submenu-style_animated_flat.color_scheme_accent_light .cs-header-sublink-label:hover{
    color: rgba(35, 102, 81, .7);
}

.cs-header-submenu-style_animated_buttons.color_scheme_dark .cs-header-sublink-explain,
.cs-header-submenu-style_animated_buttons.color_scheme_black .cs-header-sublink-explain,
.cs-header-submenu-style_animated_buttons.color_scheme_accent_dark .cs-header-sublink-explain,
.cs-header-submenu-style_animated_flat.color_scheme_dark .cs-header-sublink-explain,
.cs-header-submenu-style_animated_flat.color_scheme_black .cs-header-sublink-explain,
.cs-header-submenu-style_animated_flat.color_scheme_accent_dark .cs-header-sublink-explain{
    color: rgba(255, 255, 255, .7);
}

.cs-header-submenu-style_animated_flat.color_scheme_dark .cs-nth-sublink-wrap,
.cs-header-submenu-style_animated_flat.color_scheme_black .cs-nth-sublink-wrap,
.cs-header-submenu-style_animated_flat.color_scheme_accent_dark .cs-nth-sublink-wrap{
    border-top-color: rgba(255, 255, 255, .15);
}

@media (prefers-reduced-motion: reduce) {
  .cs-header-submenu-style_animated_buttons .cs-header-sublink-outer,
  .cs-header-submenu-style_animated_buttons .cs-header-sublink-wrap,
  .cs-header-submenu-style_animated_flat .cs-header-sublink-outer,
  .cs-header-submenu-style_animated_flat .cs-header-sublink-wrap {
    transition: none !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
}

/*-------------------------------------------- hamburger ------------------------------------------------ */

.cs-hamburger-wrap{
    position: absolute;
    left: 10px;
    top: 10px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 30px;
    width: 30px;
    cursor: pointer;
    z-index: 1;
}

.cs-hamburger>div{
  background-color: #777;
  position: absolute;
}

.cs-hamburger.active>div{
  position: absolute;
}

.cs-hamburger #headerLineTop{
    right: 0px;
    left: 0px;
    top: 12px;
    height: 2px;
    width: 22px;
}

.cs-hamburger #headerLineMiddle{
     right: 0px;
    left: 0px;
    top: 20px;
    height: 2px;
    opacity: 1;
}

.cs-hamburger #headerLineBottom{
    right: 0px;
    left: 0px;
    top: 28px;
    height: 2px;
    width: 22px;
}

.cs-hamburger.active #headerLineTop{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    top: 20px;
}

.cs-hamburger.active #headerLineMiddle{
    opacity: 0;
}

.cs-hamburger.active #headerLineBottom{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    top: 20px;
}

/*----------------------------------------------- calendars --------------------------------- */

.cs-calendar-wrap{

}

.cs-calendar{

}

.cs-calendar-header{
    height: 74px;
}

.cs-calendar-body{
    background-color: #f1f5f9;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    position: relative;
    min-height: 20px;
    /*-- important so tooltips and other content don't push width of page on mobile --*/
    overflow: hidden;
}

.cs-calendar-title-insert{
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 8px;
}

.cs-calendar-table{
    min-width: 100%;
    width: 100%;
}

/*----------------------------------------------- image carousels and hero banners --------------------------------- */

.cs-carousel-image{
    width: 100%;
    display: inline-block;
    height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.cs-hero-image{
    width: 100%;
    min-height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.cs-default-image-icon{
    background-color: #f2f4f7;
    background-image: url('https://s3-us-west-2.amazonaws.com/myclubspot/upload-photo-icon.jpg');
    background-size: 250px;
    background-position: center;
}

.cs-hero-image .cs-copy-wrap{
    padding-top: 220px;
    padding-bottom: 220px;
    color: #fff;
}

.cs-copy-wrap{
    text-align: center;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
}

.cs-copy-wrap h1{
    font-size: 50px;
    line-height: 70px;
    padding-bottom: 18px;
}

.cs-copy-wrap h2{
    font-weight: normal;
    font-size: 28px;
}

.cs-copy-wrap h3{
    font-weight: bold;
    font-size: 24px;
}

/*--- short version --*/

.cs-hero-banner.height_short .cs-hero-image{
    min-height: 250px;
}

.cs-hero-banner.height_short .cs-copy-wrap{
    padding-top: 100px;
    padding-bottom: 100px;
}

.cs-image-carousel.height_short .cs-carousel-image{
    height: 250px;
}

/*--- tall version --*/

.cs-hero-banner.height_tall .cs-hero-image{
    min-height: 750px;
}

.cs-hero-banner.height_tall .cs-copy-wrap{
    padding-top: 350px;
    padding-bottom: 350px;
}

.cs-image-carousel.height_tall .cs-carousel-image{
    height: 750px;
}

/*-- image overlays --*/

.cs-image-overlay{
    opacity: 0;
    /* Classic opacity-only overlays keep pre-Phase-1 navy; color classes /
       edge fades use --cs-overlay-rgb below. */
    background-color: #141a21;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    --cs-overlay-rgb: 24, 27, 62;
}

/* Color tokens only set RGB for gradients. Never set background-color here —
   a solid fill shows through transparent gradient stops and washes the section. */
.cs-image-overlay.cs-overlay-color-white{ --cs-overlay-rgb: 255, 255, 255; }
.cs-image-overlay.cs-overlay-color-light{ --cs-overlay-rgb: 234, 239, 239; }
.cs-image-overlay.cs-overlay-color-dark{ --cs-overlay-rgb: 24, 27, 62; }
.cs-image-overlay.cs-overlay-color-black{ --cs-overlay-rgb: 0, 0, 0; }

.cs-image-overlay.cs-overlay-color-top-white{ --cs-overlay-rgb-top: 255, 255, 255; }
.cs-image-overlay.cs-overlay-color-top-light{ --cs-overlay-rgb-top: 234, 239, 239; }
.cs-image-overlay.cs-overlay-color-top-dark{ --cs-overlay-rgb-top: 24, 27, 62; }
.cs-image-overlay.cs-overlay-color-top-black{ --cs-overlay-rgb-top: 0, 0, 0; }

.cs-image-overlay.cs-overlay-color-bottom-white{ --cs-overlay-rgb-bottom: 255, 255, 255; }
.cs-image-overlay.cs-overlay-color-bottom-light{ --cs-overlay-rgb-bottom: 234, 239, 239; }
.cs-image-overlay.cs-overlay-color-bottom-dark{ --cs-overlay-rgb-bottom: 24, 27, 62; }
.cs-image-overlay.cs-overlay-color-bottom-black{ --cs-overlay-rgb-bottom: 0, 0, 0; }

/* Edge fades: size the layer to the fade band so it can't wash the whole section.
   Fade to rgba(...,0) of the same color (not the transparent keyword) so light/dark
   don't muddy through black. Legacy gradient_* aliases kept. */
.cs-image-overlay.cs-overlay-top,
.cs-image-overlay.cs-overlay-gradient_top{
    opacity: 1;
    top: 0;
    bottom: auto;
    height: var(--cs-overlay-end, 45%);
    background-color: transparent;
    background-image:
        linear-gradient(
            to bottom,
            rgba(var(--cs-overlay-rgb, 24, 27, 62), var(--cs-overlay-peak, 0.75)) 0%,
            rgba(var(--cs-overlay-rgb, 24, 27, 62), 0) 100%
        );
}

.cs-image-overlay.cs-overlay-bottom,
.cs-image-overlay.cs-overlay-gradient_bottom{
    opacity: 1;
    top: auto;
    bottom: 0;
    height: var(--cs-overlay-end, 45%);
    background-color: transparent;
    background-image:
        linear-gradient(
            to top,
            rgba(var(--cs-overlay-rgb, 24, 27, 62), var(--cs-overlay-peak, 0.75)) 0%,
            rgba(var(--cs-overlay-rgb, 24, 27, 62), 0) 100%
        );
}

.cs-image-overlay.cs-overlay-both{
    opacity: 1;
    background-color: transparent;
    background-image:
        linear-gradient(
            to bottom,
            rgba(var(--cs-overlay-rgb-top, 24, 27, 62), var(--cs-overlay-peak-top, 0.75)) 0%,
            rgba(var(--cs-overlay-rgb-top, 24, 27, 62), 0) var(--cs-overlay-end-top, 45%),
            rgba(var(--cs-overlay-rgb-top, 24, 27, 62), 0) 100%
        ),
        linear-gradient(
            to top,
            rgba(var(--cs-overlay-rgb-bottom, 24, 27, 62), var(--cs-overlay-peak-bottom, 0.75)) 0%,
            rgba(var(--cs-overlay-rgb-bottom, 24, 27, 62), 0) var(--cs-overlay-end-bottom, 45%),
            rgba(var(--cs-overlay-rgb-bottom, 24, 27, 62), 0) 100%
        );
}

/*-- refinement knobs (opt-in; absent = unchanged rendering) --*/

/* Section pad + type-aware element rhythm (vars drive heading/body spacing).
   Pad is slightly top-heavy; headers take a larger share of the rhythm. */
.cs-pad-y-s{
    padding-top: 28px;
    padding-bottom: 20px;
    --cs-space-h1: 44px;
    --cs-space-h2: 32px;
    --cs-space-h3: 24px;
    --cs-space-p: 8px;
    --cs-space-block: 10px;
    --cs-space-column: 22px;
}
.cs-pad-y-m{
    padding-top: 56px;
    padding-bottom: 40px;
    --cs-space-h1: 64px;
    --cs-space-h2: 44px;
    --cs-space-h3: 32px;
    --cs-space-p: 10px;
    --cs-space-block: 12px;
    --cs-space-column: 32px;
}
.cs-pad-y-l{
    padding-top: 84px;
    padding-bottom: 60px;
    --cs-space-h1: 80px;
    --cs-space-h2: 56px;
    --cs-space-h3: 40px;
    --cs-space-p: 12px;
    --cs-space-block: 16px;
    --cs-space-column: 42px;
}
.cs-pad-y-xl{
    padding-top: 112px;
    padding-bottom: 80px;
    --cs-space-h1: 100px;
    --cs-space-h2: 70px;
    --cs-space-h3: 48px;
    --cs-space-p: 14px;
    --cs-space-block: 18px;
    --cs-space-column: 52px;
}

.cs-pad-y-s h1,
.cs-pad-y-m h1,
.cs-pad-y-l h1,
.cs-pad-y-xl h1{
    margin-top: var(--cs-space-h1);
}
.cs-pad-y-s h2,
.cs-pad-y-m h2,
.cs-pad-y-l h2,
.cs-pad-y-xl h2{
    margin-top: var(--cs-space-h2);
}
.cs-pad-y-s h3,
.cs-pad-y-m h3,
.cs-pad-y-l h3,
.cs-pad-y-xl h3{
    margin-top: var(--cs-space-h3);
}
.cs-pad-y-s p,
.cs-pad-y-m p,
.cs-pad-y-l p,
.cs-pad-y-xl p{
    margin-top: var(--cs-space-p);
}
.cs-pad-y-s .cs-button,
.cs-pad-y-m .cs-button,
.cs-pad-y-l .cs-button,
.cs-pad-y-xl .cs-button,
.cs-pad-y-s img,
.cs-pad-y-m img,
.cs-pad-y-l img,
.cs-pad-y-xl img,
.cs-pad-y-s table,
.cs-pad-y-m table,
.cs-pad-y-l table,
.cs-pad-y-xl table,
.cs-pad-y-s .cs-accordion-header,
.cs-pad-y-m .cs-accordion-header,
.cs-pad-y-l .cs-accordion-header,
.cs-pad-y-xl .cs-accordion-header{
    margin-top: var(--cs-space-block);
}

/* Keep the first element anchored so added rhythm does not shift centered stacks. */
.cs-pad-y-s .cs-element-stack > :first-child,
.cs-pad-y-m .cs-element-stack > :first-child,
.cs-pad-y-l .cs-element-stack > :first-child,
.cs-pad-y-xl .cs-element-stack > :first-child{
    --cs-space-h1: 0px;
    --cs-space-h2: 0px;
    --cs-space-h3: 0px;
    --cs-space-p: 0px;
    --cs-space-block: 0px;
}

/* Wider gutters between text columns when section padding is set. */
.cs-pad-y-s .cs-text_text-wrap-column,
.cs-pad-y-m .cs-text_text-wrap-column,
.cs-pad-y-l .cs-text_text-wrap-column,
.cs-pad-y-xl .cs-text_text-wrap-column{
    padding-left: var(--cs-space-column);
    padding-right: var(--cs-space-column);
}

/* Pull a non-first section up over the previous one. z-index keeps it above.
   An alpha mask fades the section (bg + slider + content) so the pulled-up
   band blends. Builder: mask the section child only — never the whole
   .componentPreview, or the bottom-right toolbar fades with the seam.
   Mostly linear, with a short soft tip so the last ~12% of each edge doesn't
   cut off abruptly. */
.cs-overlap-y-s,
.cs-overlap-y-m,
.cs-overlap-y-l,
.cs-overlap-y-xl,
:not(.event-page-callout):has(+ [class*="cs-overlap-y-"]),
.componentPreview:has(+ .componentPreview [class*="cs-overlap-y-"]) > :not(.component-toolbar-group):not(.event-page-callout):not(.cs-hero-image-change-chip),
.wb-diff-section:has(+ .wb-diff-section [class*="cs-overlap-y-"]){
    position: relative;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgba(0, 0, 0, 0.22) calc(var(--cs-overlap-mask-top, 0px) * 0.12),
        #000 var(--cs-overlap-mask-top, 0px),
        #000 calc(100% - var(--cs-overlap-mask-bottom, 0px)),
        rgba(0, 0, 0, 0.22) calc(100% - var(--cs-overlap-mask-bottom, 0px) * 0.12),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        rgba(0, 0, 0, 0.22) calc(var(--cs-overlap-mask-top, 0px) * 0.12),
        #000 var(--cs-overlap-mask-top, 0px),
        #000 calc(100% - var(--cs-overlap-mask-bottom, 0px)),
        rgba(0, 0, 0, 0.22) calc(100% - var(--cs-overlap-mask-bottom, 0px) * 0.12),
        transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.cs-overlap-y-s,
.cs-overlap-y-m,
.cs-overlap-y-l,
.cs-overlap-y-xl{
    z-index: 2;
}
.cs-overlap-y-s{ margin-top: -40px; --cs-overlap-mask-top: 56px; }
.cs-overlap-y-m{ margin-top: -72px; --cs-overlap-mask-top: 96px; }
.cs-overlap-y-l{ margin-top: -104px; --cs-overlap-mask-top: 136px; }
.cs-overlap-y-xl{ margin-top: -144px; --cs-overlap-mask-top: 176px; }

/* Fade the bottom of the section being overlapped so both edges blend into each
   other. Live sections are siblings; the builder wraps each in .componentPreview;
   review/publish iframes wrap each in .wb-diff-section.
   --cs-overlap-chrome-lift = pull distance + 16px so builder chrome clears the
   seam with a little breathing room. */
:not(.event-page-callout):has(+ .cs-overlap-y-s),
.componentPreview:has(+ .componentPreview .cs-overlap-y-s),
.wb-diff-section:has(+ .wb-diff-section .cs-overlap-y-s){
    --cs-overlap-mask-bottom: 56px;
    --cs-overlap-chrome-lift: 56px; /* overlap pull + 16px clearance */
}
:not(.event-page-callout):has(+ .cs-overlap-y-m),
.componentPreview:has(+ .componentPreview .cs-overlap-y-m),
.wb-diff-section:has(+ .wb-diff-section .cs-overlap-y-m){
    --cs-overlap-mask-bottom: 96px;
    --cs-overlap-chrome-lift: 88px;
}
:not(.event-page-callout):has(+ .cs-overlap-y-l),
.componentPreview:has(+ .componentPreview .cs-overlap-y-l),
.wb-diff-section:has(+ .wb-diff-section .cs-overlap-y-l){
    --cs-overlap-mask-bottom: 136px;
    --cs-overlap-chrome-lift: 120px;
}
:not(.event-page-callout):has(+ .cs-overlap-y-xl),
.componentPreview:has(+ .componentPreview .cs-overlap-y-xl),
.wb-diff-section:has(+ .wb-diff-section .cs-overlap-y-xl){
    --cs-overlap-mask-bottom: 176px;
    --cs-overlap-chrome-lift: 160px;
}

/* Optional fade-through color across the seam (same tokens as overlay edges).
   Top band on the overlapping section + bottom band on the previous one so both
   dissolve into a shared color rather than into the page background. */
.cs-overlap-through-white{ --cs-overlap-through-rgb: 255, 255, 255; }
.cs-overlap-through-light{ --cs-overlap-through-rgb: 234, 239, 239; }
.cs-overlap-through-dark{ --cs-overlap-through-rgb: 24, 27, 62; }
.cs-overlap-through-black{ --cs-overlap-through-rgb: 0, 0, 0; }

:not(.event-page-callout):has(+ .cs-overlap-through-white),
.componentPreview:has(+ .componentPreview .cs-overlap-through-white),
.wb-diff-section:has(+ .wb-diff-section .cs-overlap-through-white){ --cs-overlap-through-rgb: 255, 255, 255; }
:not(.event-page-callout):has(+ .cs-overlap-through-light),
.componentPreview:has(+ .componentPreview .cs-overlap-through-light),
.wb-diff-section:has(+ .wb-diff-section .cs-overlap-through-light){ --cs-overlap-through-rgb: 234, 239, 239; }
:not(.event-page-callout):has(+ .cs-overlap-through-dark),
.componentPreview:has(+ .componentPreview .cs-overlap-through-dark),
.wb-diff-section:has(+ .wb-diff-section .cs-overlap-through-dark){ --cs-overlap-through-rgb: 24, 27, 62; }
:not(.event-page-callout):has(+ .cs-overlap-through-black),
.componentPreview:has(+ .componentPreview .cs-overlap-through-black),
.wb-diff-section:has(+ .wb-diff-section .cs-overlap-through-black){ --cs-overlap-through-rgb: 0, 0, 0; }

[class*="cs-overlap-through-"]::before,
:not(.event-page-callout):has(+ [class*="cs-overlap-through-"])::after,
.componentPreview:has(+ .componentPreview [class*="cs-overlap-through-"]) > :not(.component-toolbar-group):not(.event-page-callout):not(.cs-hero-image-change-chip)::after,
.wb-diff-section:has(+ .wb-diff-section [class*="cs-overlap-through-"])::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 3;
}
[class*="cs-overlap-through-"]::before{
    top: 0;
    height: var(--cs-overlap-mask-top, 96px);
    /* Mostly linear; soft tip only so the last bit of the band is less noticeable. */
    background: linear-gradient(
        to bottom,
        rgba(var(--cs-overlap-through-rgb, 24, 27, 62), 0.9) 0%,
        rgba(var(--cs-overlap-through-rgb, 24, 27, 62), 0.22) 82%,
        rgba(var(--cs-overlap-through-rgb, 24, 27, 62), 0) 100%
    );
}
:not(.event-page-callout):has(+ [class*="cs-overlap-through-"])::after,
.componentPreview:has(+ .componentPreview [class*="cs-overlap-through-"]) > :not(.component-toolbar-group):not(.event-page-callout):not(.cs-hero-image-change-chip)::after,
.wb-diff-section:has(+ .wb-diff-section [class*="cs-overlap-through-"])::before{
    bottom: 0;
    height: var(--cs-overlap-mask-bottom, 96px);
    background: linear-gradient(
        to top,
        rgba(var(--cs-overlap-through-rgb, 24, 27, 62), 0.9) 0%,
        rgba(var(--cs-overlap-through-rgb, 24, 27, 62), 0.22) 82%,
        rgba(var(--cs-overlap-through-rgb, 24, 27, 62), 0) 100%
    );
}

.cs-fade-top,
.cs-fade-bottom{
    position: relative;
    /* Keep the layering below contained so it can't compete with the site header
       (z-index 10) or neighbouring sections. */
    isolation: isolate;
}

.cs-fade-top::before,
.cs-fade-bottom::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 96px;
    pointer-events: none;
    z-index: 1;
}

/* Backgrounds, sliders, videos and overlays are all z-index auto, so they stay
   under the band; content has to be lifted over it. Scoped to faded sections. */
.cs-fade-top .element-wrapper,
.cs-fade-bottom .element-wrapper,
.cs-fade-top.cs-iframe-wrap > *,
.cs-fade-bottom.cs-iframe-wrap > *{
    position: relative;
    z-index: 2;
}

.cs-fade-top::before{
    top: 0;
    background: linear-gradient(to bottom, var(--cs-fade-color-top, #ffffff), transparent);
}

.cs-fade-bottom::after{
    bottom: 0;
    background: linear-gradient(to top, var(--cs-fade-color-bottom, #ffffff), transparent);
}

.cs-fade-color-top-white{ --cs-fade-color-top: #ffffff; }
.cs-fade-color-top-light{ --cs-fade-color-top: #eaefef; }
.cs-fade-color-top-dark{ --cs-fade-color-top: #181b3e; }
.cs-fade-color-top-black{ --cs-fade-color-top: #000000; }

.cs-fade-color-bottom-white{ --cs-fade-color-bottom: #ffffff; }
.cs-fade-color-bottom-light{ --cs-fade-color-bottom: #eaefef; }
.cs-fade-color-bottom-dark{ --cs-fade-color-bottom: #181b3e; }
.cs-fade-color-bottom-black{ --cs-fade-color-bottom: #000000; }

.cs-scroll-anim-fade_in{
    opacity: 0;
    transition: opacity 0.7s ease;
}

.cs-scroll-anim-fade_in.cs-scroll-anim-active{
    opacity: 1;
}

.cs-scroll-anim-fade_up{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.cs-scroll-anim-fade_up.cs-scroll-anim-active{
    opacity: 1;
    transform: translateY(0);
}

@keyframes cs-el-fade-in{
    from{ opacity: 0; }
    to{ opacity: 1; }
}

@keyframes cs-el-fade-up{
    from{ opacity: 0; transform: translateY(18px); }
    to{ opacity: 1; transform: translateY(0); }
}

@keyframes cs-el-up{
    from{ transform: translateY(18px); }
    to{ transform: translateY(0); }
}

.cs-element-anim-fade_in .cs-el-anim-target,
.cs-element-anim-fade_up .cs-el-anim-target{
    opacity: 0;
}

.cs-element-anim-up .cs-el-anim-target{
    transform: translateY(18px);
}

.cs-scroll-anim-active.cs-element-anim-fade_in .cs-el-anim-target{
    animation: cs-el-fade-in 0.65s ease forwards;
    animation-delay: calc(var(--el-index, 0) * 0.1s);
}

.cs-scroll-anim-active.cs-element-anim-fade_up .cs-el-anim-target{
    animation: cs-el-fade-up 0.65s ease forwards;
    animation-delay: calc(var(--el-index, 0) * 0.1s);
}

.cs-scroll-anim-active.cs-element-anim-up .cs-el-anim-target{
    animation: cs-el-up 0.65s ease forwards;
    animation-delay: calc(var(--el-index, 0) * 0.1s);
}

@media (prefers-reduced-motion: reduce){
    .cs-scroll-anim-fade_in,
    .cs-scroll-anim-fade_up,
    .cs-element-anim-fade_in .cs-el-anim-target,
    .cs-element-anim-fade_up .cs-el-anim-target,
    .cs-element-anim-up .cs-el-anim-target{
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/*----------------- image grid ----------------- */

/*
.askewImageNav_ImageOne{
    width: 60vw;
    height: 400px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    opacity: .9;
    transition: 0.2s;
  }

  .askewImageNav_ImageOne:hover{
    width: 60vw;
    height: 400px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    opacity: 1;
    transform: scale(1.03);
  }

  .askewImageNav_ImageTwo{
    width: 34vw;
    height: 740px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    opacity: .9;
    transition: 0.2s;
  }
  .askewImageNav_ImageTwo:hover{
    width: 34vw;
    height: 740px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    opacity: 1;
    transform: scale(1.03);
  }

  .askewImageNav_ImageThree{
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    opacity: .9;
    transition: 0.2s;
  }
  .askewImageNav_ImageThree:hover{
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    opacity: 1;
    transform: scale(1.03);
  }

    .askewImageNav_ImageFour{
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position: center;
        cursor: pointer;
        opacity: .9;
        transition: 0.2s;
      }

      .askewImageNav_ImageFour:hover{
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position: center;
        cursor: pointer;
        opacity: 1;
        transform: scale(1.03);
      }

      .askewImageNav_ImageFive{
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position: center;
        cursor: pointer;
        opacity: .9;
        transition: 0.2s;
      }

      .askewImageNav_ImageFive:hover{
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position: center;
        cursor: pointer;
        opacity: 1;
        transform: scale(1.03);
      }

      .askewImageNav_mobile{
      width: 95.5%;
      height: 400px;
      background-size: cover;
      background-position: center;
      cursor: pointer;
      opacity: .9;
      transition: 0.2s;
  }

  .askewImageNav_mobile:hover{
    width: 95.5%;
    height: 400px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    opacity: 1;
    transform: scale(1.03);
}

.askewImageNav_mobile_container{
    width: 95.5%;
    height: 400px;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 20px;
    overflow: hidden;
}

  */

  .askewImageNav_ImageOne_container {
      height:400px;
      overflow: hidden;
  }

  .askewImageNav_ImageTwo_container{
     min-width: 30vh;
    margin-right: 20px;
    margin-top: 20px;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .askewImageNav_ImageThree_container{
    height: 400px;
    margin-right: 20px;
    margin-left: 20px;
    overflow: hidden;
}

  .askewImageNav_ImageFour_container{
      min-width: 34%;
      height: 300px;
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 20px;
      overflow: hidden;
  }

  .askewImageNav_ImageFive_container{
    height: 300px;
    margin-top: 20px;
    margin-right: 20px;
    overflow: hidden;
}

.askewQuoteIcon{
    font-size: 40px !important;
    margin-top: 40px !important;
    text-align: center !important;
}

  .askewQuoteBox{
      margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .askewQuoteBox p {
    font-size: 24px;
    line-height: 40px;
    font-family: 'Sanchez';
    font-style: italic;
    color: #444955;
  }

  .fullPageAskewView{
      display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
  }

  .askewImage{
    bottom: 0px;
    top: 0px;
    left: 0px;
    right: 0px;
    transform: scale(1.07);
    position: absolute;
    background-size: cover;
    background-position: center;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
  }

  .cs-flex-wrap-on-tablet{
    display: flex;
  }

  .askewImageLabel{
      font-size: 26px;
    letter-spacing: 1px;
    font-weight: bold;
    color: white;
    top: 50px;
    left: 40px;
    position: absolute;
    z-index: 50;
    font-family: 'Montserrat';
  }

  .albumLabel{
    font-size: 26px;
  letter-spacing: 1px;
  font-weight: bold;
  color: white !important;
  top: 50px;
  left: 40px;
  z-index: 50;
  font-family: 'Montserrat';
}

  .askew-image-container{
    cursor: pointer;
  }

  .askew-image-container:hover .askewImage{
    transform: scale(1.0);
  }

  .album-container{
      cursor: pointer;
      justify-content: flex-end;
      align-items: flex-end;
      opacity: .9;
      transition: 1s;
  }

  .album-container:hover{
      opacity: 1;
  }

  .cs-left-column{
    display: flex;
    flex-direction: column;
    width: 70vh;
    padding: 20px;
  }

  .askew-image-container:hover .askewImageOverlay{
    opacity: 0.1;
  }

  .askewImageOverlay{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    background-color: #2b2b38;
    opacity: 0.05;
  }

/*----------------------------------------------- image-with-text --------------------------------- */

.cs-image-with-text-image{
    min-width: 250px;
    max-width: 300px;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 30px;
}

/*----------------------------------------------- rich text --------------------------------- */

.cs-rich-text .cs-copy-wrap{
    padding-top: 120px;
    padding-bottom: 120px;
    color: #283664;
}

.cs-rich-text .cs-copy-wrap h3{
    font-weight: bold;
    font-size: 24px;
}

.cs-rich-text .cs-copy-wrap p{
    font-weight: normal;
    font-size: 18px;
    font-family: 'roboto';
    line-height: 30px;
    margin-top: 25px;
    max-width: 600px;
    text-align: left;
}

/*----------------------------------------------- login page --------------------------------- */

.cs-login-image{
    height: 100%;
    min-height: 250px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.cs-login-burgee{
    height: 90px;
    background-repeat: no-repeat;
    background-position-x: left;
    background-size: contain;
}

/*

.cs-login-burgee.centered{
  background-position-x: center;
}

.cs-login-username{
  color: #697684;
  text-align: center;
}
*/

/*----------------------------------------------- iframes --------------------------------- */

.cs-iframe-wrap{
    height: 600px;
    box-sizing: border-box;
}

.cs-iframe-wrap.height_short{
    height: 400px;
}

.cs-iframe-wrap.height_tall{
    height: 800px;
}

/*----------------------------------------------- media queries --------------------------------- */

@media all and (max-width: 720px) {
    .cs-flex-wrap-on-tablet{
        display: -ms-flex;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-flex-direction: row;
      flex-direction: row;
      -webkit-flex-flow: row wrap;
      justify-content: center;
      -webkit-justify-content: center;
      -ms-justify-content: center;
      -moz-justify-content: center;
      -moz-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      text-align: center;
    }
    .askew-image-container{
        height: 400px !important;
    }
    .askewImageNav_ImageTwo_container{
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 0px;
        margin-bottom: 20px;
    }
    .askewImageNav_ImageFour_container{
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        min-width: 70%;
    }
    .askewImageNav_ImageFive_container{
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        min-width: 70%;
    }
    .cs-header h1{
        display: none;
    }
    .cs-header .cs-header-icon{
        margin-left: auto;
        margin-right: auto;
    }
    .cs-sub-header{
        display: none;
    }
    .cs-special-padding-on-mobile{
        padding-top: 20px;
        padding-bottom: 12px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .cs-account-header .drilldownHeader{
        font-size: 20px;
        line-height: 30px;
    }
}