/* Content styles */
.color-primary {
    color: var(--color-primary);
}
.color-primary-light {
    color: var(--color-primary-light);
}
.color-secondary {
    color: var(--color-secondary);
}
.color-tertiary {
    color: var(--color-tertiary);
}
.color-green {
    color: var(--color-green);
}
.color-white {
    color: var(--color-white);
}
.color-black {
    color: var(--color-black);
}
.color-dark {
   color: var(--color-dark);
}


.heading-text-region {
    font-size: 23px;
}

.display-flex {
   display: flex;
   align-items: center;
}

.button {
   padding: 20px;
   border-radius: 10px;
   font-weight: 600;
}
.button--clear-account,
.button--clear-cart {
    background-repeat: no-repeat;
}
.button--link {
   background: none;
}
button {
   border: 0;
}
/* .button-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
} */



/* SVG is used as a mask so the arrow can be reused and recoloured via currentColor without inlining the SVG markup. */
.icon {
    display: inline-block;
    background-color: currentColor;

    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;

    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.icon--arrow {
    width: 2rem;
    height: 2rem;
    -webkit-mask-image: url('/icons/arrow-right-icon.svg');
    mask-image: url('/icons/arrow-right-icon.svg');
}

.icon--directions {
      width: 4rem;
      height: 4rem;
    -webkit-mask-image: url('/icons/icon-directions.svg');
    mask-image: url('/icons/icon-directions.svg');
}

.icon--parking {
      width: 4rem;
      height: 4rem;
    -webkit-mask-image: url('/icons/icon-parking.svg');
    mask-image: url('/icons/icon-parking.svg');
}

.icon--accessibility {
      width: 4rem;
      height: 4rem;
    -webkit-mask-image: url('/icons/icon-accessibility.svg');
    mask-image: url('/icons/icon-accessibility.svg');
}

/* ========================================
   TABLET
   768px and up
======================================== */

@media (min-width: 768px) {
   .icon--arrow {
      width: 2.9375rem;
      height: 2.5625rem;
   }
   .icon--directions {
    width: 5rem;
    height: 5rem;
   }
   .icon--parking {
    width: 5rem;
    height: 5rem;
   }
   .icon--accessibility {
    width: 5rem;
    height: 5rem;
   }
}

.debug {
   border: 1px dashed lime;
}


/* display styles */
@media screen and (min-width:1566px) {
    .hide-for-xxlarge {
        display: none !important
    }
}
@media screen and (min-width:1566px) {
    .show-for-xxlarge {
        display: block !important
    }
}

@media screen and (min-width:90.0625em) and (max-width:99.99875em) {
    .hide-for-xlarge-only {
        display: none !important
    }
}


/* Layout styles */
body {
    background-color: #000000;
}
.site-wrapper {
    margin: 0 2.5rem;
}

      @media screen and (max-width: 768px) {
         .site-wrapper {
            margin: 0 1rem;
         }
      }
.grid-container {
   max-width: 1200px;
}


.masthead {
    display: flex;
    flex-direction: column;
   margin-top: 2rem;
}
.masthead-order {
   display: flex;
   flex-direction: column-reverse;
}
.masthead .logo {
    max-width: 100%;
   margin-top: 2rem;
}
.masthead .menu-container {
   display: block;
   position: relative;
    width: 100%;
    background-color: none;
    border-bottom: 0;
    z-index: 100;
    height: unset;
    top: unset;
}
.masthead .mobile {
   display: none;
}


      @media screen and (max-width: 1569px) {
         .masthead {
            margin-top: 1rem;
         }
         .masthead .logo {
            margin-top: 1rem;
         }
         .masthead-order {
            display: flex;
            flex-direction: column;
         }
         .masthead .menu-container {
            display: none;
         }
         .masthead .mobile {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 2rem;
         }
      }

      @media screen and (max-width: 768px) {
         .masthead .mobile {
            margin-top: 1.5rem;
         }
      }

.masthead .menu-container .grid-container {
    max-width: unset;
    padding: 0;
}
.masthead .menu-container .grid-container .grid-x {
   gap: 2rem;
}
.masthead .menu-container .main-menu ul#main-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
   margin: 0;
}
.masthead .menu-container .main-menu ul#main-menu li {
   list-style: none;
}
.masthead .secondary-menu {
   display: flex;
   gap: 2rem;
}
.masthead .menu-container .main-menu li a,
.masthead .secondary-menu a {
    font-size: 1.0625rem;
    font-size: var(--text-menu);
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    -webkit-transition: color .3s;
    transition: color .3s;
    white-space: nowrap;
}

.masthead .mobile .utility-wrapper {
   display: flex;
   align-items: center; 
   gap: 1rem;
   padding: 0;   
}
.masthead .mobile .utility-wrapper .mobile-btn {
    background-color: transparent;
    color: #fff;
    text-transform: none;
    font-size: unset;
    padding: 0;
    cursor: pointer;
    height: unset;
    float: unset;
}
.masthead .mobile .utility-wrapper .mobile-btn img {
    float: unset;
    height: 20px;
    margin-left: 0;
    -webkit-transform: none;
    transform: none;
}

.masthead .utility-menu__right {
   display: flex;
   align-items: center;
   gap: 1rem;
}
.masthead .utility-menu__right .search {
    padding: 0;
}
.masthead .utility-menu__right .account-wrapper,
.masthead .utility-menu__right .cart-wrapper {
   display: flex;
   align-items: center;
   gap: 0.25rem;
}
.masthead .utility-menu__right a.account-wrapper,
.masthead .utility-menu__right a.cart-wrapper {
   color: #fff;
}
.masthead .utility-menu__right .button--clear-account,
.masthead .utility-menu__right .button--clear-cart {
    width: 21px;
    height: 21px;
    padding: 0;
}






.site-header {
    position: relative;
    left: 0;
    transform: none;
    width: 100%;
   max-width: unset;
    top: 0;
    z-index: 100;
    margin: 1rem 0;
    padding-top: 0;
}
.site-header.is-stuck {
   height: 85px;
   margin: 0;
   padding-top: 0;
   background-color: #000;
   border: 0;
}
.site-header .logo {
    display: none;
}
.site-header.is-stuck .logo {
   display: block;
   width: 380px;
   max-width: unset;
   margin-top: 0;
   transform: none;
}
.site-header .mobile {
    display: none;
}
.site-header.is-stuck .mobile {
   display: none;
}
.site-header .main-menu {
   display: none;
}
.site-header.is-stuck .main-menu {
    display: block;
}
.site-header .main-menu ul {
    display: flex;
    gap: 2rem;
   margin: 0;
   list-style-type: none;
}
.site-header .main-menu li {
    float: unset;
    margin-right: 0;
    position: relative;
}

      @media screen and (max-width: 1569px) {
         .masthead .secondary-menu {
            gap: 1rem;
         }
         .masthead .utility-menu__right {
            display: none !important;
         }
         /* .site-header .secondary-menu.mobile {
            display: block;
         } */
         .site-header.is-stuck .grid-container.grid-container-large {
            gap: 1rem;
            margin: 0 1rem;
         }
         .site-header.is-stuck .logo {
            width: unset;
            max-width: 350px;
            min-width: 0;
            flex: 1 1 auto;
         }
         .site-header.is-stuck .main-menu {
            display: none;
         }
         .site-header.is-stuck .mobile {
            display: flex;
            margin-top: 0;
            gap: 1rem;
         }
         .site-header.is-stuck .secondary-menu {
            gap: 1rem;
         }
         .site-header.is-stuck .mobile .utility-wrapper {
            flex: 0 0 auto;
         }
      }


.site-header .grid-container.grid-container-large {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2rem;
   max-width: unset;
   margin: 0 2rem;
   padding: 0;
}





/* ========================================
   Mobile Menu Expanded
======================================== */
.off-canvas {
    background: var(--color-black);
}
.mobile-menu-logo {
   margin: 1rem;
   padding-bottom: 1.5rem;   
   border-bottom: 1px solid var(--color-white);

}
.mobile-menu__button--close {
    margin: 1rem;
}
.mobile-menu__buttons {
   background-color: var(--color-black);
}
.mobile-menu__menu--main {
   margin: 0 1rem;   
   background-color: var(--color-black);
   border: solid var(--color-white);
   border-width: 0 0 1px 0;
}
.mobile-menu > ul li:first-of-type {
    margin-top: 3rem;
}
.mobile-menu__menu li {
    border-top: 0;
    line-height: 30px;
}
.mobile-menu > ul > li > a {
   padding: 15px 0;
   font-size: 1.25rem;
   font-family: var(--font-primary);
   font-weight: 600;
   color: var(--color-white);
   text-transform: uppercase;
}
.mobile-menu__menu--main .nested.is-accordion-submenu {
   background-color: transparent;
}
.mobile-menu__menu .is-accordion-submenu-parent > .submenu-toggle:after {
   margin-right: 0.5rem;
}
.mobile-menu .submenu li.is-submenu-item.is-accordion-submenu-item {
    margin-top: 0;
}
.mobile-menu__menu .has-submenu-toggle.submenu-expanded > a {
   color: var(--color-primary-light);
}
.accordion-menu .is-accordion-submenu a {
   padding: 0.25rem 1rem;
   color: var(--color-primary-light);
   font-weight: 500;
}
.submenu-toggle[aria-expanded="true"]::after {
   border-bottom: 1px solid var(--color-primary-light) !important;
   border-right: 1px solid var(--color-primary-light) !important;
}




/* ========================================
   HERO Section
======================================== */

.slider--event {
    background-color: #000;
}
.slider--event .slide .banner__content {
   background-color: #000;
}
.slick-list.draggable {
   border-radius: 15px;
}
.slider .slick-arrow {
   top: 9rem;
}

@media (min-width: 768px) {
   .banner--home {
      height: 100vh;
      min-height: max(100vh, 900px);
   }
    .slider--event .slide .banner__content {
        padding: 0 4rem;
        background-color: unset;
    }
}


/* ========================================
   Explore Section
======================================== */

section.explore  {
   position: relative;
   margin: 5rem 0;
   padding: 0 !important;
   overflow: hidden;
   background: none;

   background-image: none !important;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}
section.explore:before {
   opacity: 0;
}
section.explore .grid-container.img-default {
   height: 350px;
   padding: 20px;
   background-size: cover;
   border-radius: 8px;
}
section.explore .cell.heading-text-region.heading-text-region--large {
   margin-bottom: 0;
   color: var(--color-white);
}
section.explore .heading-text-region h1 {
   text-transform: uppercase;
   font-size: 40px;
   text-shadow: none;
}
section.explore .heading-text-region {
    font-size: 1rem;
}
section.explore .grid-container.card-wrapper {
   margin: 0;   
   padding: 0;
}
section.explore .grid-container.card-wrapper .grid-x {
   gap: 1.5rem;
}
section.explore .tote--explore {
   margin: 0;
   background-color: color-mix(in srgb, var(--color-secondary) 90%, transparent);
   border: 0;
   border-radius: 8px;
   box-shadow: none;
}
section.explore .grid-x > .tote--explore + .tote--explore {
   background-color: color-mix(in srgb, var(--color-tertiary) 90%, transparent);
}
section.explore .tote--explore .tote__title { 
   display: block;
   margin-bottom: 4rem;
   font-family: var(--font-secondary);
   font-size: var(--text-40);
   font-weight: 800;
   line-height: 2.25rem;
   text-transform: uppercase;
   text-shadow: none;
}
section.explore .tote--explore .tote__title p { 
   margin-bottom: 0
}
section.explore .button-wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;   
}
section.explore .tote--explore .button.button--link {
   color: var(--color-white) !important;
   font-family: var(--font-secondary);
   font-size: 24px;
   font-weight: 800;
   line-height: 2.75rem;   
   text-shadow: none;
}
section.explore .tote--explore .icon--arrow {
   width: 20px;
   min-width: 20px;
}
section.explore #fullwidth-image {
   display: none;
}

   @media (min-width: 1024px) {
   section.explore {
      height: 900px;
      min-height: unset;
      padding: 20px !important;      
   }
   section.explore .grid-container.img-default {
      width: 100%;
      max-width: 1200px;
      padding: 5rem 0;
      background-image: none !important;
   }
   section.explore .heading-text-region {
      font-size: 23px;
   }   
   section.explore .heading-text-region h1 {
      font-size: 80px;
   }
   section.explore .grid-container.card-wrapper {
      width: 100%;
      max-width: 1200px;   
      margin: 0 auto;
      display: flex;
      justify-content: center;
   }
   section.explore .grid-container.card-wrapper .grid-x {
      width: 100%;
   }
   section.explore .tote--explore {
      flex: 1;
      background-color: color-mix(in srgb, var(--color-secondary) 64%, transparent);
   }
   section.explore .grid-x > .tote--explore + .tote--explore {
      background-color: color-mix(in srgb, var(--color-tertiary) 64%, transparent);
   }
   section.explore .tote--explore .tote__title { 
      margin-bottom: 7rem;
      font-size: var(--text-64);
      line-height: 3.5rem;
   }
   section.explore .tote--explore .button.button--link {
      font-size: var(--text-40);
      color: #FF9FEA !important;
   }
   section.explore .grid-x > .tote--explore:nth-of-type(2) .button.button--link {
      color: #FFC290 !important;
   }
   section.explore .tote--explore .icon--arrow {
      width: 2rem;
   }
   section.explore #fullwidth-image {
      display: block;
   }
}




/* ========================================
   Spotlight Section
======================================== */

section.spotlight--home {
   margin: 2rem 0;   
   padding: 0;
   background-color: unset;
}
section.spotlight--home .grid-container {
   max-width: 1200px;
   padding: 0;
}
section.spotlight--home .heading-text-region {
    margin-bottom: 2rem;
}
section.spotlight--home .heading-text-region h1 {
   font-size: var(--text-40);
   font-size: 35px;
   text-align: unset;
}
.spotlight--home .article-grid {
    position: relative !important;
    height: unset !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}
.spotlight--home .article-grid article:nth-child(1) {
    background-color: var(--color-primary-light);
}
.spotlight--home .article-grid article:nth-child(2) {
    background-color: var(--color-secondary);
}
.spotlight--home .article-grid article:nth-child(3) {
    background-color: var(--color-yellow);
}
.spotlight--home .article-grid article:nth-child(4) {
    background-color: var(--color-green);
}
section.spotlight--home article {
   position: unset !important;
   height: 100%;   
   margin: 0;
   background-color: var(--color-primary);
   border-radius: 15px;
   border: 0;
   overflow: hidden;
}
section.spotlight--home .tote__content {
   display: flex;
   flex-direction: column;
}
section.spotlight--home .tote--spotlight .tote__img {
   height: 250px;
}
section.spotlight--home .tote--spotlight .tote__img:before {
   opacity: 0;
}
.spotlight--home article .tote__details {
   height: 100%;
   margin: 0;
   padding: 1rem 1rem 0 1rem;
   font-size: var(--text-40);
   font-size: 24px;
   font-weight: 800;
   color: #000;
   text-transform: unset;
}
.spotlight--home .tote--spotlight:nth-of-type(1n) .tote__details:before {
    display: none;
}
section.spotlight--home .content-wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;   
   padding: 1rem;
}
.spotlight--home article p {
   padding: 0 !important;
   font-size: var(--text-16);
   font-weight: 400;
   color: #000;
   text-transform: unset;
}
.spotlight--home article .icon--arrow {
   width: 20px;
   min-width: 20px;
}



/* ========================================
   DESKTOP
   1024px and up
======================================== */

@media (min-width: 768px) {
   section.spotlight--home {
      margin: 11.5rem 0;
   }
   section.spotlight--home .heading-text-region h1 {
      font-size: 80px;
   }
   section.spotlight--home .article-grid {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
   }
   section.spotlight--home article {
      flex: 0 0 calc(50% - 0.75rem);
      width: calc(50% - 0.75rem);
   }
   section.spotlight--home .tote--spotlight .tote__img {
      height: 360px;
   }
   .spotlight--home article .tote__details {
      padding: 2rem 2rem 0 2rem;
      font-size: 45px;
   }
   section.spotlight--home .content-wrapper {
      padding: 0 2rem 2rem;
   }
   .spotlight--home article .content-wrapper p {
      font-size: 23px;
   }
}



/* ========================================
   Support Section
======================================== */

.support {
    position: relative;
    margin: 5rem 0;
    padding: 0;
    overflow: hidden;
    background: none;
   border-radius: 8px;
}
.support .col-1 {
    position: relative;
    height: 300px;
}
.support .col-1 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.support .col-1::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 40%);
    z-index: 1;
}
.support .col-2 {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}
.support .col-2 h1 {
   margin-bottom: 0;
   font-size: 35px;
   color: var(--color-white);
   text-shadow: none;
   text-transform: uppercase;
}
.support .col-2 .button-wrapper {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}
.support .col-2 .button-wrapper a {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   align-items: center;

   font-family: var(--font-secondary);
   font-size: 24px;
   font-weight: 900;
   line-height: 1;
   color: var(--color-primary-light);
   text-transform: uppercase;
}
.support .col-2 .button-wrapper a .icon--arrow {
   width: 20px;
   min-width: 20px;
}

   @media (min-width: 1024px) {
      .support {
         display: flex;
         margin: 11.5rem 0;
      }
      .support .col-1,
      .support .col-2 {
         width: 50%;
      }
      .support .col-1 {
         height: 600px;
      }
      .support .col-1 img {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
      .support .col-1::after {
         display: none;
      }
      .support .col-2 {
         position: static;
         justify-content: flex-start;
         gap: 5rem;
         background: none;
         background-color: var(--color-primary-light);
      }
      .support .col-2 h1 {
         font-size: 100px;
         color: var(--color-dark);
      }
      .support .col-2 .button-wrapper {
         display: flex;
         flex-direction: row;
         gap: 5rem;
      }
      .support .col-2 .button-wrapper a,
      .support .col-2 .button-wrapper a .icon--arrow {
         color: var(--color-dark);
         -webkit-transition: background .3s, color .3s;
         transition: background .3s, color .3s;
      }
      .support .col-2 .button-wrapper a:hover,
      .support .col-2 .button-wrapper a:hover .icon--arrow {
         color: var(--color-white);
      }
   }



/* ========================================
   Utility Footer
======================================== */

.utility-footer {
   display: flex;
   flex-direction: column;
    gap: 1.5rem;
    margin: 5rem 0;
}

.button--footer:nth-of-type(1):after,
.button--footer:nth-of-type(3):after,
.button--footer .button__content:after {
   display: none;
}

/* button wrapper */
.utility-footer .button.button--footer {
    display: flex;
    align-items: center;   
    gap: 1rem;
    flex: 1;
    min-height: 120px;
    background-color: transparent;
    border: 2px solid;
}
.utility-footer .button.button--footer:nth-child(1) {
    border-color: var(--color-primary-light);
}
.utility-footer .button.button--footer:nth-child(2) {
    border-color: var(--color-secondary);
}
.utility-footer .button.button--footer:nth-child(3) {
    border-color: var(--color-tertiary);
}
.utility-footer .button.button--footer:hover:nth-child(1) {
    background-color: var(--color-primary-light);
}
.utility-footer .button.button--footer:hover:nth-child(2) {
    background-color: var(--color-secondary);
}
.utility-footer .button.button--footer:hover:nth-child(3) {
    background-color: var(--color-tertiary);
}

/* button text */
.utility-footer .button--footer .button__content {
   display: flex;
   justify-content: flex-start;
   margin: 0;
   padding: 0;
   background-image: none !important;
   overflow: unset;
   -webkit-transition: background .3s, color .3s;
   transition: background .3s, color .3s;

   font-size: 24px;
   font-weight: 900;
   text-shadow: none;
}
.utility-footer .button--footer:not(:last-of-type) .button__content:before {
   display: none;
}
.utility-footer .button.button--footer:nth-child(1) .button__content {
    color: var(--color-primary-light);
}
.utility-footer .button.button--footer:nth-child(2) .button__content {
    color: var(--color-secondary);
}
.utility-footer .button.button--footer:nth-child(3) .button__content {
    color: var(--color-tertiary);
}
.utility-footer .button.button--footer:hover .icon--arrow,
.utility-footer .button.button--footer:hover .button__content {
    color: var(--color-white);
}
.utility-footer .button.button--footer:hover .icon {
    background-color: var(--color-white);
}
.utility-footer .button.button--footer .icon--arrow {
   width: 25px;
   min-width: 25px;
}

   @media (min-width: 576px) {
      .utility-footer .button--footer .button__content {
         font-size: 40px;
      }
   }

   @media (min-width: 768px) {
      .utility-footer {
         margin: 11.5rem 0;
         flex-direction: row;
      }
      .utility-footer .button.button--footer {
         flex-direction: column;
      }
      .utility-footer .button--footer .button__content {
         justify-content: center;
      }
   }

   @media (min-width: 1200px) {
      .utility-footer .button.button--footer {
         min-height: 140px;
      }
   } 

   @media (min-width: 1500px) {
      .utility-footer .button.button--footer {
         flex-direction: row;
      }
   } 



/* ========================================
   FOOTER
======================================== */ 

.site-footer .footer-menu {
   display: none;
}
.site-footer .social-btns {
   justify-content: flex-start;
   gap: 2rem;
   margin-bottom: 3rem;
}
.site-footer .social-btns .btn {
   width: auto;
   height: auto;   
   background-color: unset;
   box-shadow: none;
   color: var(--color-black) !important;
}
.site-footer .social-btns .btn .fa {
   font-size: 2.5rem;
}
.site-footer .social-btns .btn:before {
   display: none;
}
.site-footer .grid-x.sponsor-logos {
   justify-content: flex-start;
   gap: 2rem;
   padding-bottom: 1.5rem; 
   border-bottom: 1px solid var(--color-black);
}
.site-footer .grid-x.sponsor-logos a img {
   height: 30px;
}
.site-footer .copyright {
   font-family: var(--font-primary);
}  


   @media (min-width: 1024px) {

      .site-footer .footer-menu:before,
      .site-footer .footer__info-cell:before {
         height: 6px;
         width: 80px;
      }
      .site-footer .footer__info-cell:nth-of-type(1):before {
         background-color: var(--color-primary);
      }      
      .site-footer .footer__info-cell:nth-of-type(2):before {
         background-color: var(--color-secondary);
      }
      .site-footer .footer__info-cell:nth-of-type(3):before {
         background-color: var(--color-tertiary);
      }
      .site-footer .footer__info-cell strong,
      .site-footer .footer-menu ul li a {
         margin-bottom: 1rem;
         font-family: var(--font-tertiary);
         color: var(--color-black);         
         font-weight: 800 !important;
         font-size: 20px;
         -webkit-transition: color .3s;
         transition: color .3s;
         text-transform: uppercase;
      }
      .site-footer .footer__info-cell {
         font-size: 1.25rem;
         line-height: 140%;
         color: var(--color-black);
         font-weight: 400;
         font-family: var(--font-primary);
      }
      .site-footer .footer__info-cell a {
         font-style: normal;
      }
      .site-footer .footer-menu {
         display: block;
      }
      .site-footer .footer-menu ul {
         margin-bottom: 8rem;
      }
      .site-footer .footer-menu:before {
         background-color: var(--color-green);
      }
      .site-footer .grid-x.grid-margin-x {
         clear: both;
      }
      .site-footer p {
         max-width: 50%;
         font-size: 1rem;
        line-height: 1.3;
      }
   }




/* ========================================
   PDP Page
======================================== */

.pdp-page .jump-menu.stick {
    width: calc(100% - 5rem);
}


.pdp-page section.spotlight--performance {
    margin: 2rem 0;   
    background-color: var(--color-dark);
    border-radius: 8px;
}


.pdp-page .banner .banner__content {
           margin-top: 360px;
        background-color: unset;
    }
       .banner--overview {
    margin: 2rem 0;
}
.pdp-page .banner.banner--overview img {
           height: 360px;
    border-radius: 8px;
   }

.pdp-page .jump-menu-wrapper {
   border-radius: 8px 8px 0 0;
   overflow: hidden;
}
.pdp-page section.grey {
        border-radius: 0 0 8px 8px;
    }
.pdp-page section.grey img {
   border-radius: 15px;
}

.pdp-page .slick-list.draggable {
   border-radius: 0;
}
.pdp-page .slider--cast {
    width: 100%;
}
.pdp-page .cast {
    border: 0;
    color: #fff;
    font-size: 1.25rem;
    line-height: 120%;
    width: 220px;
    padding-bottom: 80px;
    height: auto;
    text-shadow: none;
    position: relative;
    display: block;
    -webkit-transition: color .3s;
    transition: color .3s;
    background-color: #000;
    border-radius: 8px;
    margin-right: 1rem;
    overflow: hidden;
}

.pdp-page section.media {
   padding: 0;
    background-color: transparent;
}
.pdp-page .tote--media {
    background-color: unset;
    border: 0;
    padding: 0;
}
.pdp-page section.media .grid-container{
   padding: 0;
}


/* ========================================
   MOBILE — DEFAULT
   0px and up
======================================== */

.component {
    /* Mobile styles */
}


/* ========================================
   TABLET
   576px and up
======================================== */

@media (min-width: 576px) {

}


/* ========================================
   TABLET
   768px and up
======================================== */

@media (min-width: 768px) {

}


/* ========================================
   DESKTOP
   1024px and up
======================================== */

@media (min-width: 1024px) {

.pdp-page .banner.banner--overview img {
    height: 100%;
}


}


/* ========================================
   LARGE DESKTOP
   1200px and up
======================================== */

@media (min-width: 1200px) {

} 


/* ========================================
   XLARGE DESKTOP
   1500px and up
======================================== */

@media (min-width: 1500px) {

} 



/* ========================================
   Text Styles
======================================== */

.banner--interior .grid-container {
    margin: 0;
    /* padding: 0 150px 70px 150px; */
}
.banner .banner__content h1 {
   text-shadow: none;
   /* font-size: var(--text-110); */
}

/* ========================================
   TABLET
   768px and up
======================================== */

@media (min-width: 768px) {
   .banner--interior .grid-container {
    padding: 0 150px 70px 150px;
   }
   .banner .banner__content h1 {
      font-size: var(--text-110);
   }
}





/* ========================================
   EDUCATION Page
======================================== */

.banner--overview {
    margin: 0;
    display: flex;
    flex-direction: column-reverse;
    height: auto;
}

.banner--overview .grid-container {
   margin: 0;
}
.banner .banner__content {
   background-color: unset;
   margin-top: 0;
   padding: 25px 0;
}
.banner .banner__content h1 {
   text-transform: uppercase;
}
.banner > picture img, .banner > img {
   height: 360px;
   border-radius: 8px;
}

.jump-list {
   padding: 2.75rem;
   background-color: var(--color-primary-light);
   border-radius: 15px;
   z-index: 100;
   position: relative;
}
.jump-list ul {
    justify-content: center;
}
.jump-list ul li a {
    color: var(--color-black);
}

section.age-groups,
section.dark {
    background-color: #2fb0a7;
    background-color: var(--color-dark);
    color: var(--color-primary-light);
   border-radius: 8px;
}
.tote--education-alt,
.tote--play {
    background-color: color-mix(in srgb, var(--color-black) 60%, transparent);
        border: 0;
    border-radius: 8px;
    overflow: hidden;
}

.tote--education-alt .tote__content,
.tote--play .tote__content {
    color: #181e24;
    display: flex;
    flex-direction: column;
}
.tote__description {
    margin-bottom: 1rem;
}
section.age-groups .overview-text-region h1:before,
section.dark .overview-text-region h1:before {
   display: none;
}
.tote__content-link h1 {
    color: var(--color-primary-light);
}
.tote__description p {
    color: var(--color-white);
}
.tote--education-alt:hover,
.tote--play:hover {
    background-color: #15c4b8;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary-light);
    border-radius: 8px;
    overflow: hidden;
}
.tote--education-alt:hover .tote__content-link h1,
.tote--education-alt:hover .tote__description p,
.tote--play:hover .tote__content-link h1,
.tote--play:hover .tote__description p {
    color: var(--color-black);
}
.tote--education .icon--arrow,
.tote--play .icon--arrow {
        width: 20px;
        min-width: 25px;
    }



/* ========================================
   EDUCATION Interior Page
======================================== */
.banner--interior .grid-container {
   margin: 0;
}
    .banner--interior {
        height: auto;
        display: flex;
        flex-direction: column-reverse;
    }
    .banner > picture img, .banner > img {
        position: relative;
    }
.tote--education-alt,
.tote--play {
    border-radius: 15px;
    padding: 0;
}
.interior section.age-groups,
.interior section.dark {
   margin-bottom: 2rem;
   border-radius: 8px;
}

.interior .richTextRowContent {
    background-color: #F4F4F4;
    border-radius: 8px;
    margin-bottom: 4rem;
}


/* ========================================
   DESKTOP
   1024px and up
======================================== */

@media (min-width: 1024px) {
   .education .banner--overview,
      .interior .banner--interior {
      height: 750px;
      margin-bottom: 2rem;
   }
   .banner > picture img, .banner > img {
      position: absolute;
      height: 100%;
      border-radius: 15px;
   }
       .tote--education {
        width: calc(33% - 1.875rem);
    }
    section.age-groups,
section.dark {
    background-color: #2fb0a7;
    background-color: var(--color-dark);
    color: var(--color-primary-light);
        border-radius: 0 0 8px 8px;
    margin-top: -1rem;
    overflow: hidden;
    z-index: 1;
}

.interior section.age-groups,
.interior section.dark {
      margin-bottom: 5rem;
   border-radius: 15px;
}
.interior  .overview-text-region h1 {
    color: var(--color-primary-light);
}

}


/* ========================================
   topLevelPage
======================================== */

   .topLevelPage .banner--overview,
      .interior .banner--interior {
      height: unset;
    margin-bottom: unset;
   }

.heading-text-region {
    color: unset;
}


/* ========================================
   DESKTOP
   1024px and up
======================================== */

@media (min-width: 1024px) {
   .topLevelPage .banner--overview,
      .interior .banner--interior {
      height: 750px;
      margin-bottom: 2rem;
   }
   .banner > picture img, .banner > img {
      position: absolute;
      height: 100%;
      border-radius: 15px;
   }
       .tote--education {
        width: calc(33% - 1.875rem);
    }
    section.age-groups,
    section.dark {
    background-color: var(--color-dark);
    color: var(--color-primary-light);
        border-radius: 0 0 8px 8px;
    margin-top: -1rem;
    overflow: hidden;
    z-index: 1;
    margin-bottom: 4rem;
}

.interior section.age-groups,
.interior section.dark {
      margin-bottom: 5rem;
   border-radius: 15px;
}
.interior  .overview-text-region h1,
.interior  .heading-text-region h1 {
    color: var(--color-primary-light);
}

}



/* ========================================
   BlockGridPage
======================================== */

.blockGridPage .interior .umb-block-grid__layout-container {
   border-radius: 15px;
    overflow: hidden;
    margin-bottom: 4rem;
    background-color: var(--color-paper);
}

.blockGridPage .interior .richTextRowContent {
    background-color: var(--color-paper);
}

.blockGridPage .umb-block-grid__layout-container .umb-block-grid__layout-item:nth-child(even) .umb-block-grid__layout-item {
    background-color: unset;
}

.blockGridPage #richtext-row-83f0249c-a6c0-444b-8300-a4ce3bdeb533 {
    background-color: var(--color-primary-light);
    border-radius: 8px;
    overflow: hidden;
}
.blockGridPage #richtext-row-9ae5ac61-6207-472c-a46d-fc3cbec52ee8 {
    background-color: var(--color-secondary);
    border-radius: 8px;
    overflow: hidden;
}

.blockGridPage #richtext-row-bcdee87f-eb42-4b13-b596-b6c1698c018a {
   background-color: var(--color-tertiary);
    border-radius: 8px;
    overflow: hidden;
}


.blockGridPage .overview-text-region--aqua h1:before {
   display: none;
}
 .blockGridPage .interior .overview-text-region h1 {
        color: var(--color-black);
    }


section.media {
    background-color: #052C3B;
    border-radius: 8px;
}
.tote--media {
    background-color: unset;
    border: 0;
    padding: 0;
}
.blockGridPage .interior section.media .overview-text-region h1 {
    color: var(--color-white);
}





/* ========================================
   Search Results Page
======================================== */

section.grey {
   background-color: #ffffff;
   border-radius: 15px 15px 0 0;
}
.interior section.grey .overview-text-region h1 {
   color: var(--color-black);
   /* font-size: var(--text-54); */
}
.search-dialog .grid-container {
   padding: 0;
}
.search-dialog .btn {
    display: inline-block;
    color: #000;
    font-size: .9375rem;
    padding: 15px;
    background-color: #7f58a1;
    background-color: var(--color-primary-light);
    border: none;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    cursor: pointer;
    border-radius: 10px;
    font-weight: 600;
}

section.generic {
   margin-bottom: 4rem;
   background-color: #F4F4F4;
   border-radius: 0 0 15px 15px;
}
.interior section.generic .overview-text-region h1 {
   color: var(--color-black);
   /* font-size: var(--text-54); */
}
.interior section.generic  .overview-text-region h1:before {
    content: '';
    display: none;
}
.search-results p {
   margin-bottom: 0;
}
.search-results p + p {
   margin-bottom: 4rem;
}

   @media (min-width: 768px) {
      .interior section.grey .overview-text-region h1 {
         font-size: var(--text-54);
      }
      .interior section.generic .overview-text-region h1 {
         font-size: var(--text-54);
      }
   }




/* ========================================
   On Stage
======================================== */

section.spotlight--stage {
    background-color: var(--color-dark);
}

section.spotlight--stage .tote--play {
   display: flex;
    flex-direction: column;
    background-color: var(--color-black);
}
section.spotlight--stage .tote--play .tote__details {
    position: relative;
}
section.spotlight--stage .tote--play h1 {
    color: var(--color-primary-light);
    font-size: var(--text-32);
}
section.spotlight--stage .tote--play .tote__content {
    color: var(--color-white);
}

section.spotlight--stage .tote__details {
   margin-top: auto;
}






/* 
.interior {
    margin-bottom: 2rem;
}
.banner .banner__content {
    background-color: unset;
    padding: 25px 0;
}

.banner--interior .banner__content h1 {
    text-transform: uppercase;
}

.banner.banner--interior .grid-container {
   width: 100%
}


.interior .banner > picture img, 
.interior .banner > img {
    height: 360px;
}

.interior .richTextRowContent .grid-container {
   padding: 0;
}
.interior .richTextRowContent {
   color: pink !important;
}


 */



/* ========================================
   DESKTOP
   1024px and up
======================================== */

@media (min-width: 1024px) {

/* .banner--interior {
    height: 675px;
}
.banner > picture img, .banner > img {
    position: absolute;
}
.interior .banner > picture img, 
.interior .banner > img {
    height: unset;
} */
}