@import "../css/theme.event.css";

 :root {

    --linkColor:#FF510B;
    --errorColor:#E4253C;

    --white:#FFFFFF;
    --black-100:#02020B;
    --black-70:#111113;

    --black-65:#161618;
    --black-60: #1C1C1E;
    --black-50: #2C2C2E;
    --black-40: #3A3A3C;
    --black-30: #48484A;
    --black-20: #636366;
    --black-10: #8E8E93;

    --grey-60: #8E8E93;
    --grey-50: #AEAEB2;
    --grey-40: #C7C7CC;
    --grey-30: #D1D1D6;
    --grey-20: #E5E5EA;
    --grey-10: #F5F5F7;
    --grey-5: #FAFAFA;

    --brandColor:#FF4023;
    --primary:#FF4023;
    --secondary:#4023ff;
    --primary-1:#F9f5f4;

     --fontFamily: "Geist", "Helvetica Neue", "Helvetica", "sans-serif";
     /*--fontFamilySecondary: "ATMOS", "Helvetica Neue", "Helvetica", "sans-serif";*/
     --fontFamilySystem: "Helvetica Neue", "Helvetica", "sans-serif";
     --fontAwesome: "Font Awesome 6 Free";

     /* Matches themenectar.com/salient/tether's .container.main-content,
        measured directly: max-width:88% + no padding below 1000px, then
        max-width:1425px + 40px padding at/above 1000px. */
     --container-max-width: 88%;
     --container-max-width-desktop: 1425px;
}
 html {
     scroll-behavior: smooth
}

/* Sitewide container width/gutter, matching Salient Tether's
   .container.main-content behavior instead of Bootstrap's stock stepped
   breakpoints (540/720/960/1140/1320px). Loads after Bootstrap's own CSS,
   so this — same .container specificity, later in the cascade — overrides
   Bootstrap's width:100% and every one of its breakpoint-scoped
   max-width rules at once, without needing an @media wrapper of its own
   for the base (sub-1000px) state.
   Sets --bs-gutter-x rather than padding directly: .row's negative
   margins are calculated from that same variable, so changing it (instead
   of overriding .container's padding on its own) keeps the row/column
   grid internally consistent — the video overlay hit exactly this bug
   earlier (container gutter zeroed without touching --bs-gutter-x, row
   bled past the container) when only half of this pair was changed.
   Bootstrap's .row also redeclares --bs-gutter-x directly on itself
   (bootstrap.min.css: ".row{--bs-gutter-x:1.5rem;...}"), so it doesn't
   just inherit whatever .container sets — .row needs the same override
   applied to it directly too, or it keeps Bootstrap's own default. */
.container,
.row {
    --bs-gutter-x: 0px;
}
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
}
@media only screen and (min-width: 1000px) {
    .container,
    .row {
        --bs-gutter-x: 80px;
    }
    .container {
        max-width: var(--container-max-width-desktop);
    }
}

/* Gap between items in a grid or carousel: block cards/icons/text and
   post cards, side by side and row to row. Deliberately separate from the
   80px page gutter above, which also sets the container's side padding
   and the site nav's alignment. A row holding items (or a carousel) swaps
   its gutter for this; the row's negative margin and its columns' padding
   both come from that one variable, so items still line up with the
   container edge. Carousel slides read it too (.slides li below). */
:root {
    --item-gap: 16px;
}
@media only screen and (min-width: 1000px) {
    :root {
        --item-gap: 24px;
    }
}
.row:has(> [class*="block-"], > [class*="post-"], > .slider, > .col-12 > .slider) {
    --bs-gutter-x: var(--item-gap);
}

 @media screen and (prefers-reduced-motion:reduce) {
     html {
         scroll-behavior: smooth
    }
}
 section {
     scroll-margin-top: 144px;
}
 @media only screen and (max-width:768px){
     section {
         scroll-margin-top: 59px;
    }
}

@font-face {
    font-family: Geist;
    src: url(../../fonts/theme/Geist-UltraBlack.woff) format("woff");
    font-style: normal;
    font-stretch:normal;
    font-weight:900;
}
 @font-face {
    font-family: Geist;
    src: url(../../fonts/theme/Geist-Black.woff) format("woff");
    font-style:normal;
    font-stretch:normal;
    font-weight:800;
}
@font-face {
    font-family: Geist;
    src: url(../../fonts/theme/Geist-Bold.woff) format("woff");
    font-style: normal;
    font-stretch:normal;
    font-weight:700;
}
@font-face {
    font-family: Geist;
    src: url(../../fonts/theme/Geist-SemiBold.woff) format("woff");
    font-style: normal;
    font-stretch:normal;
    font-weight:600;
}

@font-face {
    font-family: Geist;
    src: url(../../fonts/theme/Geist-Medium.woff) format("woff");
    font-style: normal;
    font-stretch:normal;
    font-weight:500;
}
@font-face {
    font-family: Geist;
    src: url(../../fonts/theme/Geist-Regular.woff) format("woff");
    font-style: normal;
    font-stretch:normal;
    font-weight:400;
}
@font-face {
    font-family: Geist;
    src: url(../../fonts/theme/Geist-Light.woff) format("woff");
    font-style: normal;
    font-stretch:normal;
    font-weight:300;
}
@font-face {
    font-family: Geist;
    src: url(../../fonts/theme/Geist-UltraLight.woff) format("woff");
    font-style: normal;
    font-stretch:normal;
    font-weight:200;
}

#logo-gradient {
  --color-stop-1: var(--brandColor);
  --color-stop-2: #FF7723;
}

svg.logo circle {
    fill: url(#logo-gradient) var(--brandColor) !important;
}

svg.logo path {
    fill: white!important;
}

 @media only screen and (max-width:932px) {
     #wrapper {
         margin-top: 59px
    }
     .desktop-hidden {
         display: block
    }
    #wrapper {
         margin-top: 50px
    }
     #wrapper #hero.hero-size-fullscreen,
     #wrapper .feature-cover-large {
         height: calc(100vh - 50px);
         height: -moz-calc(100vh - 50px);
         height: -webkit-calc(100vh - 50px);
         max-height: -webkit-fill-available
    }
}

#hero,
.feature-cover-large {
     padding: 0;
     min-height: 350px
}
.hero-size-fullscreen,
.feature-cover-large {
     height: 100vh
}
 .hero-size-standard {
     height: 64vh
}

 .ghost {
     background: rgba(0, 0, 0, .85);
     backdrop-filter: saturate(160%) blur(20px);
     -webkit-backdrop-filter: saturate(160%) blur(20px);
     webkit-backdrop-filter: saturate(160%) blur(20px)
}

/*....................SECTION OVERWRITE & CUSTOM BEHAVIOUR....................*/
section#hero-card,
section#hero-video-card,
section#hero-video-player
{
    padding-bottom:3.71428571em!important;
}
section#hero-card,
section#hero-video-card,
section#hero-video-player
{
     padding-top:3.71428571em!important;
}
section#bottom-video-card
{
     padding-top:0em!important;
}
section#hero-video-card,
section#hero-video-player
{
    background: linear-gradient(var(--black-100), var(--black-65));
}
 @media only screen and (max-width: 768px) {
    section#bottom-video-card {
         padding-bottom: 3.71428571em!important;
    }
}
 @media only screen and (max-width: 430px) {
    section#hero-video-player {
         padding-top:0em!important;
    }

}
 section {
     border: none !important
}

 h5.caption {
    background:none;
    color: var(--primary)!important;
    font-size:0.9em;
    line-height: 2.12em!important;
    display: inline-block;
    margin-bottom:2.22em;
    padding:2px 14px;
    border-radius: 25px;
    border:1px solid var(--primary)!important;
}
 .caption i {
     margin-right: 8px
}
 blockquote {
     font-family: "Helvetica Neue", "HelveticaNeue", sans-serif;
     font-style: italic;
     font-weight: 400
}
 body {
     color:var(--grey-60);
     font-family:var(--fontFamilySystem);
     font-size: 1em;
     font-weight: 300;
     line-height: 1.85714286em;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscal;
     -webkit-transition: ease .3s;
     -moz-transition: ease .3s;
     -ms-transition: ease .3s;
     -o-transition: ease .3s;
     transition: ease .3s
}
a,
a:hover {
     color: var(--secondary);
}
 a:link,
 a:hover,
 a:visited,
 a:active {
     text-decoration: none
}

a.btn-link,
a.btn-link:hover,
a.btn-link:active {
    color: var(--secondary);
    font-weight: 400;
    text-transform: none;
    letter-spacing:-0.02em;
}
a.btn-link:hover,
a.btn-link:active {
    text-decoration:underline 1.2px;
    text-underline-offset: 0.4rem;
}
a.btn-link:after {
    position: relative;
    margin-left:0.4rem;
    top:-2px;
    content: '';
    display: inline-block;
    border-bottom: 1.2px solid;
    border-right: 1.2px solid;
    height: 12px;
    width: 12px;
    transform: rotate(-45deg);
}

a p,
a.p,
.boxed a[class*="h"]:not(.btn-link):hover
{
     color:var(--black-100);
}

.bg--dark .boxed a[class*="h"]:not(.btn-link):hover
{
     color:var(--white);
}

i.icon {
color:var(--black-100);
}
.block-icon i.icon
{
color:var(--grey-40);
}
a[class*="block"] :not(.bg--primary):not(.bg--dark) i.icon {
     color: var(--grey-40);
}
[class*="block"]:not(.block-icon) i.icon
{
color:var(--grey-20);
}

.bg--dark i.icon,
.bg--dark div[class*="block"] :not([class*="bg"]) i.icon
{
color:var(--white);
}

[class*="block"] .bg--dark i.icon,
.bg--dark a[class*="block"] :not(div) :not([class*="bg"]) i.icon
{
    color: var(--black-10);
}

h1,
h2,
h3,
h4,
h5,
p,
a,
ul {
     margin: 0;
     padding: 0
}

.h1,
.h2,
.h3,
.h4,
.h5,
 h1,
 h2,
 h3,
 h4,
 h5
 {
     font-family: var(--fontFamily);
     font-kerning:normal;
     color:var(--black-100);
}

 .h1, h1 {
     font-size: 4.4em;
     font-weight:800;
     letter-spacing:-0.02em;
     line-height: 1.2em;
     text-transform: uppercase;
}
.h2,
h2 {
     font-size: 3.2em;
     font-weight:600;
     letter-spacing:-0.02em;
     line-height:1.22em;
}
h2 strong {
     font-weight:700;
}
.h3, h3 {
    font-size: 1.88em;
    font-weight: 300;
    letter-spacing:-0.02em;
    line-height:1.4em;
}
h3 strong {
    font-weight: 600;
}
 .h4, h4 {
     font-size: 1.5em;
     font-weight:600;
     letter-spacing:0em;
     text-transform:none;
     word-spacing: 0.01em;
     line-height: 1.25em;
     font-size: 1.4em;
}

.h5, h5 {
     font-weight: 700;
     letter-spacing: .05em;
     text-transform: uppercase;
}

 .h6, h6 {
    font-size:13px;
     font-weight: 700;
     letter-spacing:0.12em;
     text-transform: uppercase;
}
 @media only screen and (max-width:768px) {
	.h1, h1 {
         font-size: 2.6em
    }
     .h2, h2 {
         font-size: 2.4em;
         line-height: 1.1em
    }
     .h3, h3 {
         font-size: 1.68em;
         line-height: 1.4em
    }
}

.p, p {
     font-family: var(--fontFamilySystem);
     font-size: 1em;
     font-weight: 400;
     letter-spacing: .02em;
     line-height: 1.46em
}
p:not(:last-child) {
     margin-bottom: 1.36842105263158em
}
.lead:not(:last-child) {
     margin-bottom: 1.36842105263158em
}

 .lead {
    color:var(--black-10);
    line-height: 1.46em;
    font-weight:300;
    font-family: var(--fontFamily);
    letter-spacing: .02em;
}

 h2:first-of-type + .btn, h3:first-of-type + .btn {
     margin-bottom:0rem!important;
}
 h2:last-of-type {
     margin-bottom:1.04rem;
}
h3:last-of-type {
     margin-bottom:1.02rem;
}
 article .article__body p, article .article__body ul {
     color:var(--black-80);
     opacity:0.8;
     font-weight: 400;
     letter-spacing: .022em;
     font-size:1.4em;
     line-height:1.6em;
}
 .label {
     height: 26px;
     line-height: 27px
}
 b, strong {
     font-weight: 600;
}
 @media only screen and (max-width:768px) {
     .hero-bar p.lead, .series-bar p.lead {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap
    }
     .hero-bar a.btn, .series-bar a.btn {
         padding: 1% 4.6%
    }
     .section--overlap .row {
         margin-top: 0 !important
    }
}
/*Accordion FIXES*/
 .accordion {
     --bs-accordion-bg:none;
     --bs-accordion-border-width:0;
     --bs-accordion-active-bg:none;
     --bs-accordion-btn-padding-x:0;
     --bs-accordion-btn-padding-y:0.6rem;
     --bs-accordion-body-padding-x:0;
     --bs-accordion-body-padding-y: 1rem;

}

.accordion {
    --bs-accordion-active-color:red;
    --bs-accordion-icon-color:#FFFFFF!important;

}

/* CAROUSEL ........................................*/
/* Structure lives in theme.carousel.css; these are the site's own tweaks. */
 @media only screen and (min-width:768px) {
    .slides.video-special-set .post-video.is-selected .feature__thumb {
         outline: solid 5px var(--primary);
    }
}

 @media only screen and (max-width:430px)
 {
    .post-watch .slides [class*=block-card],
    .post-watch .slides .block-stacked,
    .post-watch .slides .post-video {
         flex: 0 0 auto;
         width: 91.66666667%;
    }
}
 @media only screen and (max-width:430px) {
    .post-watch .slides .post-blog {
         flex: 0 0 auto;
         width: 71.66666667%;
    }
}

/* Row-to-row gap: each item's top margin, cancelled for the first row by
   the negative margin on its list/row. Same --item-gap as side to side. */
.post-watch .slides.dual-set-mobile .slide,
.post-watch .slides.trio-set-mobile .slide {
    margin-top: var(--item-gap);
}

a[class*=block-],
li[class*=block-],
li[class*=post-] {
    margin-top: var(--item-gap);
}

.post-watch .slides,
.row-adjust {
    --bs-gutter-y: var(--item-gap);
    margin-top: calc(-1* var(--bs-gutter-y));
}

.slides li,
.slides a[class*=block-] {
     padding-right: calc(var(--bs-gutter-x)* .5);
     padding-left: calc(var(--bs-gutter-x)* .5);
}
 @media only screen and (max-width: 430px) {
    section#hero-video-player .container
   {
        --bs-gutter-x: 0rem;
    }
}

container-sm

 .pos-absolute {
     position: absolute;
     z-index: 1
}
 .pos-bottom {
     bottom: 0
}
 .pos-vertical-center {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
}
 @media (max-width:576px) {
     section.feature-large .row, section.feature-large .row.justify-content-end {
         justify-content: center !important
    }
     .boxed.boxed--lg {
         padding: 3em;
    }
}
/* BLOCK ICON ........................................ */
 .block-icon-stack>div>h2, .block-icon-stack>div>h4, .block-icon>div>h2, .block-icon>div>h4 {
     margin-bottom: 0.22em
}

/* BLOCK NON-ICON............................................................ */
 li[class*=block-],
 a[class*=block-] {
     list-style: none;
     float: left;
}

 .imageblock__content .video-play-icon {
     transition: .35s ease-out;
     -webkit-transition: .35s ease-out;
     -moz-transition: .35s ease-out
}
 .imageblock__content .video-play-icon:hover {
     transform: translate3d(0, -10px, 0);
     -webkit-transform: translate3d(0, -10px, 0);
     box-shadow: 0 23px 40px rgba(0, 0, 0, .2)
}
 .slider.is-carousel .slides li.feature, .slider.is-carousel .slides li .feature {
     margin-bottom: 0;
}

.block-card-video>div, .block-card-ad>div, .block-card-billboard>div, .block-card-map>div {
    height:725px;
    max-height:725px;
}
[class*=block-card]:not(.block-card-video):not(.block-card-ad):not(.block-card-billboard):not(.block-card-map)>div,
[class*=block-card]>a{
    height:450px;
    max-height:450px;
}
@media only screen and (max-width:992px) {
    .block-card-video>div, .block-card-billboard>div {
        height:500px;
        max-height: 500px;
    }
    [class*=block-card]:not(.block-card-video):not(.block-card-billboard)>div,
    [class*=block-card]>a{
        height: 425px;
        max-height: 425px;
    }
}
@media only screen and (min-width:1024px) and (max-height:1366px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:1.5) {

    .block-card-video>div, .block-card-ad>div, .block-card-billboard>div {
        height:525px;
        max-height:525px;
    }
    [class*=block-card]:not(.block-card-video):not(.block-card-ad):not(.block-card-billboard):not(.block-card-map)>div {
        height:425px;
        max-height:425px;
    }
}

.cal {
     width: 55px;
     height: 60px;
     background-color: #ffffff;
     border-radius: 8px;
     position: relative;
     font-family: var(--fontFamilySecondary);
}
 .cal-top {
     width:55px;
     height:25px;
     position: absolute;
     top: -1px;
     background-color:var(--primary);
     border-radius: 8px 8px 0 0;
     letter-spacing: 0.5px;
     color:white;
     text-align: center;
     font-weight: 700;
     line-height:2em;
}
 .cal-bottom {
     width:55px;
     height:30px;
     position: absolute;
     top: 30px;
     letter-spacing:0;
     color:black;
     text-align: center;
     font-size: 1.4em;
     font-weight: 700;
}
 .block-post .feature a[class*=block]>img,
 .block-post .feature>img
 /*[class*=post-].feature a[class=block]>img*/ {
     border-radius: 18px 18px 0 0 !important
}
 @media only screen and (min-width:992px) {
     .block-post.feature [class*=box-shadow],
     [class*=block-icon-card]:not(.stable)>div,
     [class*=block-card-poster]>div,
     [class*=post-]>div:not(.stable):not(.feature__thumb):not(.slider__frame) {
        border-radius:18px;
        transition: .4s ease-out;
        -webkit-transition: .4s ease-out;
        -moz-transition: .4s ease-out
    }
    .block-post.feature [class*=box-shadow]:hover,
    [class*=block-icon-card]:not(.stable)>div:hover,
    [class*=block-card-poster]>div:hover,
    [class*=post-]>div:not(.stable):not(.slider__frame):hover {
        transform: translate3d(0, -10px, 0);
        -webkit-transform: translate3d(0, -10px, 0);
        box-shadow: 0 20px 40px rgba(0, 0, 0, .2);
    }
}
/* POSTS .................................................. */

 [class*=post-].feature {
     float: left;
     list-style: none;
     text-align: left
}

[class*=post-].feature .feature__body,
[class*=post-].feature .feature__bottom,
[class*=block-].feature .feature__bottom {
     border-radius: 0 0 18px 18px;
}

.post-video .feature__bottom > a.block > img {
    height:100px!important;
    overflow:hidden;
}
.post-video .feature__bottom > p:last-child {
     display: block;
     overflow: hidden;
     text-decoration: none;
     text-overflow: ellipsis;
     white-space: nowrap;
}
 .post-blog .feature__body > a:first-child {
     display: inline-block;
}
 .post-blog .feature__body > p:last-child {
     font-size: 1.2em;
     font-weight: 400;
     letter-spacing: .02em;
     line-height: 1.38em
}
 [class*=post-] span i {
     margin-right: .5em
}
 .post-blog.feature .feature__body {
     border-radius: 0;
     margin-bottom: 0;
     padding-bottom: 0;
     height: 200px;
     max-height: 200px;
     min-height: 200px;
     overflow: hidden
}
.post-blog .feature__bottom .contributor {
     margin-right:8%
}
 .post-blog .feature__bottom .details {
     overflow: hidden;
     text-decoration: none;
     text-overflow: ellipsis;
     white-space: nowrap
}
 .feature__bottom:not([class*=bg-]) {
     background:var(--white);
}

 .post-news {
     padding-top: 2em !important;
     padding-bottom: 2em !important
}
 .post-news:nth-child(odd) {
     background: #f5f5f7
}
 .post-news h4:last-child {
     color: #6e6e73;
     font-size: 1.2em;
     font-weight: 500;
     margin-bottom: 0;
     min-height: 0;
     text-decoration: none;
     text-overflow: ellipsis;
     white-space: nowrap
}
 .post-news h4:last-child>i {
     margin-right: .6em
}
 @media only screen and (max-width:768px) {
     .post-news .btn:last-child {
         margin-left: 0 !important
    }
}

.video-contributor a.p {
font-weight:500;
}

.avatar {
     border-radius: 100%!important;
     moz-border-radius: 100%;
     webkit-border-radius: 100%
}
 .avatar.avatar--xs {
     max-height: 3.71428571em
}

 h1.vjs-watermark {
     display: inline;
     position: absolute;
     z-index: 2000
}
 ol {
     list-style-position: inside
}
 blockquote span {
     font-size: 13px;
     font-style: normal;
     font-weight: 400
}
 .color--primary {
     color: var(--primary)!important;
}
 .color--secondary {
     color: var(--secondary)!important;
}
 .bg--ghost {
     background: rgba(20, 20, 20, 0.3);
}
.bg--site {
     background-color:var(--white);
}
.bg--white {
     background:var(--white);
}
.bg--dark {
     background:var(--black-65);
}
section.bg--dark:last-of-type+footer.bg--dark {
     background:var(--black-70);
}
.bg--grey {
     background:var(--grey-10);
}
.bg--light-grey {
     background:var(--grey-5);
}
 .bg--primary {
     background: var(--primary);
}
 .bg--secondary {
     background:var(--secondary);
}

.boxed:not([class*="bg-"]) {
    background:var(--white);
}

 /*[class*=card-] .bg--dark:not(.boxed),*/
 .bg--dark [class*=post-] .feature__bottom,
 .bg--dark [class*=block-] .boxed:not([class*="bg"]),
 .bg--dark .bg--dark.boxed
 {
     background:var(--black-50);
}

 [class*=post-] .feature__body.bg--dark, .bg--dark [class*=post-] .feature__body {
     background:var(--black-60);
}
 hr,
 [class*="primary"] hr {
     opacity:1;
     border-color:var(--grey-30);
}
 .bg--dark:last-child hr {
     opacity:1;
     border-color:var(--grey-80);
}
 :not([class*="bg"]) .imagebg:not(.image--light) hr, .imagebg hr:not(.short) {
     opacity:0.3;
     border-color:var(--white);
}
.bg--primary .caption,
.bg--secondary .caption,
[data-gradient-bg] .caption,
[data-scrim-bottom] .caption,
.imagebg:not(.image--light)[data-overlay] .caption {
    color:var(--grey-20)!important;
    border-color:var(--grey-20)!important;
}
 .imagebg.image--light[data-overlay] .caption {
     color:var(--black-100);
     border-color:var(--black-70);
}

section.bg--dark .bg--dark:nth-of-type(2) { background-color:var(--black-70); }

.imagebg:not(.image--light) h1,
.imagebg:not(.image--light) h2,
.imagebg:not(.image--light) h3,
.imagebg:not(.image--light) h4,
.imagebg:not(.image--light) h5,
.imagebg:not(.image--light) h6,
.imagebg:not(.image--light) i {
     color:var(--white);
}
.imagebg:not(.image--light) a,
.imagebg:not(.image--light) ul,
.imagebg:not(.image--light) span/*,
.imagebg:not(.image--light) span svg path*/ {
     color:var(--white);
     /*fill:var(--white);*/
    --bs-btn-border-color:var(--white);
}
 .imagebg:not(.image--light) p,
 .imagebg:not(.image--light) p.lead,
 [data-scrim-bottom]:not(.image--light) p,
 [data-scrim-bottom]:not(.image--light) p.lead {
     opacity:1;
     color:var(--grey-30);
}

 .imagebg:not(.image--light) .bg--white p,
 .imagebg:not(.image--light) .bg--white p.lead {
     color:var(--black-10);
}

.bg--dark h1,
.bg--dark h2,
.bg--dark h3,
.bg--dark h4,
.bg--dark h5,
.bg--dark h6,
.bg--dark .h1,
.bg--dark .h2,
.bg--dark .h3,
.bg--dark .h4,
.bg--dark .h5,
.bg--dark .h6,
.bg--primary h1,
.bg--primary h2,
.bg--primary h3,
.bg--primary h4,
.bg--primary h5,
.bg--primary h6,
.bg--primary .h1,
.bg--primary .h2,
.bg--primary .h3,
.bg--primary:last-child .h4,
.bg--primary .h5,
.bg--primary .h6,
/*.bg--primary i,*/
.bg--secondary h1,
.bg--secondary h2,
.bg--secondary h3,
.bg--secondary h4,
.bg--secondary h5,
.bg--secondary h6,
.bg--secondary .h1,
.bg--secondary .h2,
.bg--secondary .h3,
.bg--secondary:last-child .h4,
.bg--secondary .h5,
.bg--secondary .h6
/*.bg--secondary i*/
{
    color:var(--white);
}
.bg--dark a:not(.sub-nav-link):not(.site-nav-link),
.bg--dark:last-child ul:not(.gform_fields),
.bg--dark:last-child span:not(.update-year),
/*.bg--dark:last-child span svg path,*/
.bg--primary:last-child a,
.bg--primary:last-child ul,
.bg--primary:last-child span
/*.bg--primary:last-child span svg path*/,
.bg--secondary:last-child a,

.bg--secondary:last-child ul,
.bg--secondary:last-child span
/*.bg--secondary:last-child span svg path*/ {
     color:var(--white);
     /*fill:var(--white);*/
    --bs-btn-border-color:var(--white);
}

body .bg--dark,
.bg--dark p,
.bg--dark p.lead,
.bg--dark p small {
     opacity:1;
     color:var(--black-10);
}

body .bg--primary:last-child,
.bg--primary p,
.bg--primary p.lead,
.bg--primary p small,
body .bg--secondary:last-child,
.bg--secondary p,
.bg--secondary p.lead,
.bg--secondary p small,
.bg--secondary a.btn-link
{
     color:var(--white)!important;
}

.bg--white:last-child h1,
.bg--white:last-child h2,
.bg--white:last-child h3,
.bg--white:last-child h4,
.bg--white:last-child h5,
.bg--white:last-child h6,
.bg--grey:last-child h1,
.bg--grey:last-child h2,
.bg--grey:last-child h3,
.bg--grey:last-child h4,
.bg--grey:last-child h5,
.bg--grey:last-child h6,
.bg--light-grey:last-child h1,
.bg--light-grey:last-child h2,
.bg--light-grey:last-child h3,
.bg--light-grey:last-child h4,
.bg--light-grey:last-child h5,
.bg--light-grey:last-child h6,
.bg--light-grey:last-child i
{
     color:var(--black-100);
}

.bg--white p,
.bg--white p.lead,
.bg--white p small,
.bg--grey p,
.bg--grey p.lead,
.bg--grey p small,
.bg--light-grey p,
.bg--light-grey p.lead,
.bg--light-grey p small,
.bg--light-grey p,
.bg--light-grey p.lead,
.bg--light-grey p small {
     opacity:1;
     color:var(--black-20);
}

/* .......... BUTTON .......... */
 .btn[class*=col-] {
     margin-left: 0;
     margin-right: 0
}

.btn {
    --bs-btn-font-family: var(--fontFamilySystem);
    --bs-btn-border-color:var(--black-70);
    --bs-btn-border-width:0.18rem;
    --bs-btn-border-radius:50px;
    --bs-btn-hover-border-color:1;
    --bs-border-opacity:1;
     padding:1.35rem 2.2rem 1.2rem;
     transition: all .3s ease-in-out;
}
.btn:hover {
    --bs-btn-color:var(--black-70);
    --bs-btn-border-color:var(--black-70);
    --bs-border-opacity:1;
    transform: translate3d(0, -4px, 0);
    -webkit-transform: translate3d(0, -4px, 0);
}
.btn__text {
     color:var(--black-70);
     font-size: 1.2em;
     font-weight: 500;
     letter-spacing: .01em;
     text-transform: none;
     line-height:0;
}

/* Sitewide spacing between adjacent buttons — e.g. "Watch now" next to
   "More videos" — wherever multiple .btn elements sit next to each other,
   regardless of which wrapper class groups them (.multi-btn, .multibutton,
   or otherwise). :not(:last-child) means this scales correctly whether
   there are two buttons or several: every gap between consecutive buttons
   gets spacing, and the last one in the group never gets a trailing margin.
   .btn is display:inline-block with vertical-align:middle (not flex, despite
   the "flex" class name some wrappers use) — margin-right only on wide
   viewports; a margin-bottom here would apply asymmetrically (non-last
   child only) and throw off vertical-align:middle's alignment between
   siblings sharing the same line, visibly shifting one button relative to
   the other. */
.btn:not(:last-child) {
    margin-right: 1rem;
}

/* Below this width buttons run out of horizontal room and wrap onto their
   own line (stacked), so the vertical-align concern above no longer
   applies — add bottom spacing so a wrapped button isn't flush against the
   one above it. */
@media only screen and (max-width: 768px) {
    .btn:not(:last-child) {
        margin-bottom: .75rem;
    }
}

.btn svg path.cls-1 {
     fill:var(--white)!important;
     color:white;
}
.btn svg {
    margin-left:4px;
    width: 23px;
    height: 23px;
    max-height: 23px;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.87 24"><defs><style> .cls-1 { stroke-width: 0px; } </style></defs><path class="cls-1" d="m3.5,3.45C-1.17,8.13-1.17,15.81,3.5,20.49c4.67,4.68,12.21,4.68,16.87,0,4.67-4.68,4.67-12.24,0-16.92C15.71-1.11,8.17-1.23,3.5,3.45Zm1.32,1.32c3.95-3.96,10.41-3.96,14.36,0,3.95,3.96,3.95,10.44,0,14.4-3.95,3.96-10.41,3.96-14.36,0s-3.95-10.44,0-14.4Zm5.27,2.64s2.51,0,5.5,0c.24,0,.48.12.6.24.12.12.24.36.24.6v5.52c0,.24-.12.48-.24.6-.12.12-.36.24-.6.24-.48,0-.96-.36-.96-.84v-3.36l-5.62,5.64c-.36.36-.96.36-1.32,0s-.36-.96,0-1.32l5.62-5.64h-3.35c-.36.12-.72-.24-.72-.72,0-.24.12-.48.24-.6.12-.24.36-.36.6-.36Z"/></svg>');
}
.btn svg.new-window {
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.87 24"><defs><style> .cls-1 { stroke-width: 0px; } </style></defs><path class="cls-1" d="m3.5,3.45C-1.17,8.13-1.17,15.81,3.5,20.49c4.67,4.68,12.21,4.68,16.87,0,4.67-4.68,4.67-12.24,0-16.92C15.71-1.11,8.17-1.23,3.5,3.45Zm1.32,1.32c3.95-3.96,10.41-3.96,14.36,0,3.95,3.96,3.95,10.44,0,14.4-3.95,3.96-10.41,3.96-14.36,0s-3.95-10.44,0-14.4Zm5.27,2.64s2.51,0,5.5,0c.24,0,.48.12.6.24.12.12.24.36.24.6v5.52c0,.24-.12.48-.24.6-.12.12-.36.24-.6.24-.48,0-.96-.36-.96-.84v-3.36l-5.62,5.64c-.36.36-.96.36-1.32,0s-.36-.96,0-1.32l5.62-5.64h-3.35c-.36.12-.72-.24-.72-.72,0-.24.12-.48.24-.6.12-.24.36-.36.6-.36Z"/></svg>');

}

 @media only screen and (max-width:768px) {
     .btn {
         padding:1.25rem 2rem 1rem;
    }
}

.btn.bg--white,
.btn.bg--white:hover,
.btn.bg--white:visited {
    border: none;
    background:var(--white);
}
.btn.bg--white:last-child span,
.btn.bg--white:last-child span svg path
{
    color:var(--black-100);
    fill:var(--black-100);
}

.btn.bg--dark,
.btn.bg--dark:hover,
.btn.bg--dark:visited{
    border:none;
    background:var(--black-70);
}
.btn.bg--dark span,
.btn.bg--dark span svg path
{
    color:var(--white);
    fill:var(--white);
}

.btn.bg--primary,
.btn.bg--primary:hover,
.btn.bg--primary:visited {
    border: none;
    background:var(--primary);
}
.btn.bg--primary span,
.btn.bg--primary span svg path
{
    color:var(--white);
    fill:var(--white);
}

.btn.bg--secondary,
.btn.bg--secondary:hover,
.btn.bg--secondary:visited {
    border: none;
    background:var(--secondary);
}
.btn.bg--secondary span,
.btn.bg--secondary span svg path
{
    color:var(--white);
    fill:var(--white);
}

/* .......... MULTI-BUTTON .......... */

/* .......... PAGINATION .......... */
 .paging-navigation ul {
     list-style-type: none;
     margin: 0;
     padding: 0
}
 .paging-navigation li {
     display: inline
}
 a.page-numbers, span.page-numbers {
     background: #fff;
     border: 1px solid #d3d3d3;
     border-radius: 10%;
     color: #333;
     padding: .6em 1.1em;
     text-align: center
}
 a:hover.page-numbers {
     color: #000
}
 .paging-navigation .current {
     background: #f2f2f2;
     color: #000;
     font-weight: 700
}
 .videoWrapper {
     height: 0;
     padding-bottom: 56.25%;
     position: relative
}
 .videoWrapper iframe {
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%
}
/* .......... NAVIGATION ........... */

 .navigation a:focus {
     outline: 0
}
 

 .navigation {
     font-family: var(--fontFamilySystem);
     left: 0;
     position: fixed;
     right: 0;
     top: 0;
     z-index: 900
}
 .navigation~.wrapper {
     margin-top: 44px
}
 .navigation.with-site-nav~.wrapper {
     margin-top: 124px
}
 .desktop-hidden {
     display: none
}
 @media only screen and (max-width:932px) {
     .toggle-chevron {
         border-bottom: 1.2px solid var(--brandColor);
         border-left: 1.2px solid var(--brandColor);
         display: block;
         height: 10px;
        width: 10px;
         margin-right: 5px;
         transform: rotate(-45deg);
         transition: all .3s ease-in-out;
    }
     .toggle-chevron-right {
         border-bottom: 1.2px solid var(--black-80);
         border-left: 1.2px solid var(--black-80);
         transform: rotate(-135deg)
    }
     .toggle-chevron-left {
         border-bottom: 1.2px solid;
         border-left: 1.2px solid;
         transform: rotate(45deg)
    }
     .toggle-chevron.active {
         transform: rotate(135deg)
    }
}
/* .......... NAVIGATION - DESKTOP .......... */
 .site-nav {
     background:var(--white);
     height: 80px;
     position: relative;
     padding-left:1.5rem;
    padding-right:1.5rem;

}
.site-nav-logo {
     color:var(--black-100);
     font-size: 16px;
     text-transform: uppercase;
}
.site-nav-logo svg {
    height:44px;
    width:44px;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    margin-bottom: 0;
    margin-right: 10px
}
/* "ATMOSPHERE" wordmark: the letters from the footer logo SVG, in place
   of the old live <h4> text. Deliberately not class="logo", so none of
   the svg.logo circle/path rules (white fill, gradient) reach it; it
   takes the link's color instead (black, white on .bg--dark). Same size
   as the footer's wordmark: the footer logo is sized so its circle is
   44px (252 viewBox units), and its wordmark is 852.24 x 93.9 of those
   units, so 44px x 852.24 / 252 = ~149px wide (~16.4px tall).
   Always that size on desktop: when the pill row gets tight there, the
   gaps between the global menu links give way instead (theme.nav.js).
   Only on mobile may it shrink (below), and only when the row genuinely
   can't fit it — a phone showing the LIVE badge on a site with no Site
   Nav Title — scaling down proportionally rather than pushing the menu
   button out of the pill. The 44px logo mark never shrinks. */
.site-nav-logo svg.site-nav-wordmark {
    display: block;
    flex: 0 0 auto;
    /* Both dimensions explicit, straight from the viewBox (852.24 x 93.9
       units at the footer's 44px-per-252-units scale), rather than one
       side plus height/width:auto: browsers differ in how they size an
       inline SVG's auto side (Safari especially), and that alone was
       enough for the two wordmarks not to match. The footer logo gets
       the same treatment below. */
    width: calc(44px * 852.24 / 252);
    height: calc(44px * 93.9 / 252);
    margin-right: 0;
    fill: currentColor;
}
.site-nav-logo svg.logo {
    flex-shrink: 0;
}
@media only screen and (max-width: 932px) {
    .site-nav-logo,
    .site-nav-logo a {
        min-width: 0;
    }
    .site-nav-logo svg.site-nav-wordmark {
        flex-shrink: 1;
        min-width: 0;
        max-width: 100%;
    }
}
/* Global menu fitting (theme.nav.js): when the logo, title and links
   don't all fit the desktop pill row, the script first narrows the
   links' side padding just enough (--site-nav-link-pad, down to 2px);
   if that's not enough it compacts them (.is-compact: 12px text, no
   letter-spacing, and a 12px gap after the logo instead of ~19px) and
   fits the padding again; only as a last resort does it hide links from
   the end, rather than let the row push the menu button out of the
   pill. */
.site-nav-list.is-fitted .site-nav-link {
    padding-left: var(--site-nav-link-pad);
    padding-right: var(--site-nav-link-pad);
}
.site-nav-list.is-compact .site-nav-link {
    font-size: 12px;
    letter-spacing: 0;
}
.site-nav:has(.site-nav-list.is-compact) .site-nav-logo {
    padding-right: 12px !important;
}
.site-nav-list > li[hidden] {
    display: none !important;
}
.site-nav.bg--dark .site-nav-logo a,
.site-nav.bg--dark .site-nav-logo a:hover {
    color: var(--white);
}
/* "Site Nav Title" (Theme Settings > Navigation): small text beside the
   wordmark, after a thin vertical line a couple of steps darker (lighter
   on .bg--dark) than the nav's other dividers so it holds its own at
   20px tall.
   Same 13px caps as the menu links but a lighter weight, so it reads as a
   label on the logo rather than another menu item. On mobile the
   ATMOSPHERE wordmark steps aside for it (below). */
.site-nav-title {
    display: flex;
    align-items: center;
    height: 20px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--grey-50);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1;
    white-space: nowrap;
}
.site-nav.bg--dark .site-nav-title {
    border-left-color: var(--black-30);
}
/* Mobile: logo mark, line, title — the wordmark hides when there's a
   title to show, so the row stays short enough for the LIVE badge and
   menu button. A site without a title keeps its wordmark. The logo
   mark's own 10px right margin already spaces it from the line, so the
   title's own left margin drops to 2px to keep the same 12px. */
@media only screen and (max-width: 932px) {
    .site-nav-logo a:has(.site-nav-title) .site-nav-wordmark {
        display: none;
    }
    .site-nav-title {
        margin-left: 2px;
    }
}
.site-nav-logo a {
     align-items: center;
     color:var(--black-100);
     display: flex
}
 .site-nav-logo a:hover {
     color:var(--black-100);
     text-decoration: none
}
 .site-nav-logo a h4 {
     font-weight: 700;
     font-size:21px;
     color:inherit;
     letter-spacing:0.008em;
     position: relative;
     top:0;
     text-transform:uppercase;
}
 .site-nav-logo a h4 span {
     font-weight: 500;
}
 .site-nav-list {
     /*background:var(--white-90);*/
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     height: 80px;
     list-style: none;
     margin-bottom: 0;
     padding-left: 0;
     text-align: center;
     z-index: 550
}
 li.site-nav-item {
     display: inline;
     font-size: 16px;
     font-weight: 700;
     letter-spacing: .056em;
     line-height: 20px !important;
     padding: 0;
     text-transform: uppercase;
     white-space: nowrap
}
 .site-nav-item {
     border-bottom: 3px solid transparent;
}
 .site-nav-item:active,
 .site-nav-item:focus,
 .site-nav-item:hover {
    text-decoration: none;
    border-bottom: 3px solid var(--brandColor);
    padding: 28.5px 0px;
    bottom: 0px;
    outline: 0;
}
 .site-nav-link {
     font-weight:700;
     color:var(--black-100);
     padding: 30px 10px;
     /* The sitewide underline reset is `a:link, a:hover, a:visited,
        a:active { text-decoration: none }` — :link/:visited only match
        an <a> that actually has an href, so a parent site-nav item with
        its href removed (site-nav-expanded's non-navigable column
        headers) falls through to the browser default underline outside
        :hover/:active. Setting it here directly, not gated by a
        pseudo-class, covers that href-less case too. */
     text-decoration: none;
}
 .site-nav-link:active,
 .site-nav-link:focus,
 .site-nav-link:hover {
     font-weight:700;
     color:var(--black-50);
     opacity: .6;
}
 .site-sub-nav-container {
     background:var(--white);
     display: flex;
     left: 0;
     margin-top: 31.5px;
     max-height: 0;
     overflow: hidden;
     position: absolute;
     transition: all .4s ease-in-out;
     width: 100vw;
}
 .site-sub-nav-container-expand {
     max-height: 700px;
     padding:22px 0;
}
 .site-sub-nav-list {
     list-style: none;
     padding-left: 0;
     text-align: left
}
 .site-sub-nav-item {
     height: 40px;
     opacity: 1;
     visibility: visible;
     overflow: visible;
     padding-bottom: 10px;
     padding-top: 10px;
    /*transition: all .4s ease-in-out, opacity .4s ease-in-out, visibility .4s ease-in-out, overflow .4s ease-in-out, padding-top .4s ease-in-out, padding-bottom .4s ease-in-out;
    */
}
 .site-sub-nav-title {
     display: none
}
 .sub-nav-list {
     min-height: 10vh;
     width: auto;
     padding-right:32px;
     padding-left: 0;
     list-style: none;
     margin-bottom: 0;
     z-index: 420;
}
 .sub-nav-list .sub-nav-item {
     max-width: 87vw;
     padding: 10px 0px;
     text-align: left;
}
 .sub-nav-link {
     align-items: center;
     color: var(--black-70);
     display: flex;
     font-size: 17px;
     font-weight: 400;
     letter-spacing: .016em;
     line-height: 20px;
     opacity: 0;
     text-transform:none;
     transition: all .2s ease-in-out;
     width: fit-content;
     width: -moz-fit-content;
     width: -webkit-fit-content
}
 .sub-nav-link:active, .sub-nav-link:focus, .sub-nav-link:hover {
     color: var(--primary);
     text-decoration: none
}
 .site-sub-nav-container-expand .sub-nav-link {
     opacity:1;
}
/* The floating pill nav overlaps the page (position:fixed, no reserved
   #wrapper margin) rather than pushing all content down, so it can sit on
   top of every section as the page scrolls, not just the first one.
   theme.nav.js marks whichever section ends up first (page content is
   built from flexible-content blocks, so that varies per page) with
   .has-floating-nav — give just that section enough top padding to clear
   the pill (22px margin + 64px height = 86px to its bottom edge) so its
   own headline/content isn't covered on load. Every *, *::before,
   *::after is border-box (Bootstrap's reboot), so this padding is
   absorbed into any height:100vh/64vh hero section instead of growing it
   past the viewport.
   120px, not just 86px + a token buffer: the dedicated hero sections
   (#hero-card etc., further below) already read fine with a small gap
   since their own heading is a big, vertically-centered focal point with
   room around it by design. A plain flexible-content block used as the
   first section (e.g. /contact/, /get-involved/) has no such built-in
   breathing room, so its heading ends up sitting right under the pill at
   only a small gap — the extra buffer here is for that generic case, and
   doesn't hurt the hero sections either.
   Selector is `#wrapper .has-floating-nav`, not just `.has-floating-nav`:
   section#hero-card/#hero-video-card/#hero-video-player (further below)
   already set padding-top with !important on a plain ID selector
   (specificity 1,0,1). A bare class (0,1,0) can never outrank that even
   with !important of its own — adding #wrapper's ID plus our class
   (1,1,0) does, since #wrapper is guaranteed to be this section's
   ancestor on every template. */
@media only screen and (min-width: 933px) {
    #wrapper .has-floating-nav {
        padding-top: 120px !important;
    }
}
/* .......... NAVIGATION - DESKTOP: FLOATING PILL ..........
   Restyles #site-nav (logo + parent menu items) as an inset, floating,
   rounded bar, matching apple.com's product-page local nav structure
   (.localnav-wrap: ~1024px wide, 10px inset margin, 18px corner radius,
   blurred translucent background) — colors kept on-brand instead of
   copying Apple's dark theme, and border-radius matches the site's own
   .btn pill radius (50px) for consistency with existing buttons.
   Scoped to min-width:933px, the exact complement of the existing
   max-width:932px mobile nav breakpoint below, so mobile is untouched.
   Child/dropdown submenu behavior (.site-sub-nav-container etc.) is
   deliberately left as-is — parent items only, per the current scope. */
@media only screen and (min-width: 933px) {
    .site-nav {
        background: rgba(255, 255, 255, .8);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border-radius: 50px;
        box-shadow: 0 0 0 1px var(--grey-30);
        /* The pill's outer edges line up with the left edge of the page
           content's text, not .container's own outer edge — specifically
           the card text in the sermon/video card blocks (.block-card-video
           > .boxed.boxed--lg), per design. That text sits inside
           .container by .boxed--lg's padding (2.78571429em on a 1rem
           element, so 2.78571429rem — tracks the root font-size steps in
           theme.core.css) plus, at/above 1000px only, the 40px column
           padding .row > * gets from --bs-gutter-x:80px. --nav-inset holds
           that per-side offset; the min-width:1000px rule further down
           adds the 40px.
           min(88%/1425px, 100%) is .container's own width (width:100%,
           max-width doing the constraining), so subtracting 2x the inset
           from it keeps the pill matched to the text at every width.
           The inset is always ≥ ~36px, so the pill's rounded corners never
           go flush to the viewport edge even where .container itself is
           full-bleed (1000px to ~1619px). */
        --nav-inset: 2.78571429rem;
        width: 100%;
        max-width: calc(min(var(--container-max-width), 100%) - 2 * var(--nav-inset));
        margin: 22px auto 0;
        /* Explicit 0, not just omitted: an older, unscoped "NAVIGATION -
           DESKTOP" .site-nav rule higher up this file sets padding-left/
           right:1.5rem — harmless while this block also set its own
           10px (same specificity, later wins), but simply removing that
           without replacing it let the older 1.5rem leak back through.
           .site-nav is just the pill shell now; each direct child
           manages its own horizontal inset instead (the row below sets
           its own 10px to match the logo/more-button circles;
           .site-nav-expanded gets its via .boxed.boxed--lg on the
           markup). */
        padding-left: 0;
        padding-right: 0;
        /* Column, not row: the pill has two stacked children now — the
           64px logo/menu/button row, then .site-nav-expanded below it
           (see the "More" button block further down). max-height (not
           height) + overflow:hidden is the standard trick for animating
           to an unknown content height; collapsed it clips at exactly the
           row's own 64px, expanded it opens up to reveal the panel.
           height:auto explicitly, not left at the default: an older,
           unscoped "NAVIGATION - DESKTOP" .site-nav rule higher up this
           file sets height:80px — harmless while this block also set a
           fixed height (same specificity, later wins), but with only
           max-height here now, that stale height:80px would otherwise
           win outright, since max-height only caps an existing height
           rather than replacing a fixed one. */
        display: flex;
        flex-direction: column;
        height: auto;
        max-height: 64px;
        overflow: hidden;
        transition: max-height .4s cubic-bezier(0.65, 0, 0.35, 1), border-radius .3s ease-in-out;
    }
    .site-nav.is-menu-open {
        max-height: 70vh;
        /* Not 24px: the logo (top-left) and .site-nav-more (top-right)
           circles are 44px (radius 22) inset just 10px from each edge —
           for a circle that close to a rounded corner to stay fully
           inside it (not visually poke past the curve), the math is
           distance(circle-center, corner-arc-center) + circle-radius <=
           corner-radius. At 24px that required the circle's center to
           sit within ~2px of the arc's center — effectively impossible
           at a normal 10px inset, which is why the corner visibly cut
           into the close button. 32px leaves a comfortable ~10px of
           clearance with the same 10px inset instead. */
        border-radius: 32px;
    }
    /* The row used to be centered via the parent's align-items:center in
       row-mode; now that .site-nav is a column flex container, it needs
       its own fixed height instead (also stops it from being stretched
       or squashed once .site-nav-expanded is added below it). Its
       existing .align-items-center class still centers the logo/list/
       button within that height exactly as before.
       padding-left/right: .site-nav itself carries none now — same
       10px both sides so the logo circle (44px) on the left and the
       .site-nav-more circle (44px) on the right sit mirrored. */
    #site-nav > .d-flex.justify-content-center {
        height: 64px;
        flex-shrink: 0;
        padding-left: 10px;
        padding-right: 10px;
    }
    /* .bg--dark's own background/box-shadow live in the existing
       "NAVIGATION (IF DARK) - DESKTOP" block further down — it already
       targets .site-nav.bg--dark at the same specificity and comes later
       in the cascade, so setting it here too would just get overridden. */
    /* .site-nav-logo is positioned via Bootstrap's .position-absolute/
       .start-0 utility classes in the shared markup (used by mobile too),
       and .justify-content-center on its flex parent — both Bootstrap
       utilities set their property with !important, so overriding them
       (even from a higher-specificity compound selector) needs !important
       too, or Bootstrap's own !important wins regardless of specificity. */
    .site-nav-logo.position-absolute {
        position: static !important;
    }
    #site-nav > .d-flex.justify-content-center {
        justify-content: space-between !important;
    }
    .site-nav-list {
        height: auto;
        justify-content: flex-end;
        gap: 2px;
    }
    li.site-nav-item {
        border-bottom: none;
    }
    .site-nav-item:active,
    .site-nav-item:focus,
    .site-nav-item:hover {
        border-bottom: none;
        padding: 0;
    }
    .site-nav-link {
        border-radius: 50px;
        padding: 10px 18px;
        transition: color .2s ease-in-out, opacity .2s ease-in-out;
    }
    .site-nav-link:active,
    .site-nav-link:focus,
    .site-nav-link:hover {
        color: var(--black-100);
        opacity: 1;
    }
    /* Global menu (the pill row's own links): no hover background, just
       a subtle fade of the text — to the same --black-20 grey as the
       expanded menu's sub-links, or a soft light grey on .bg--dark. */
    .site-nav-list .site-nav-link:hover,
    .site-nav-list .site-nav-link:focus-visible {
        color: var(--black-20);
    }
    .site-nav.bg--dark .site-nav-list .site-nav-link:hover,
    .site-nav.bg--dark .site-nav-list .site-nav-link:focus-visible {
        color: var(--grey-50);
    }
    /* "More" button: a solid 44px circle with three dots, pinned to the
       pill's right end. margin-left:auto on the list (not the button)
       keeps the menu items pushed right against it now that the flex row
       has three children under justify-content:space-between. Inverts
       with the pill: black circle/white dots on the light pill, white
       circle/black dots on .bg--dark. */
    #site-nav .site-nav-list {
        margin-left: auto;
    }
    .site-nav-more {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        margin-left: 12px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--black-100);
        color: var(--white);
        cursor: pointer;
        transition: opacity .2s ease-in-out;
    }
    .site-nav-more svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }
    .site-nav-more:hover,
    .site-nav-more:focus-visible {
        opacity: .8;
    }
    .site-nav.bg--dark .site-nav-more {
        background: var(--white);
        color: var(--black-100);
    }
    /* Hamburger-to-X morph: top/bottom lines slide onto the middle line's
       row (5 user units, matching the 6/11/16 y-spacing on the rects) and
       rotate into an X; the middle line just fades out.
       transform-box: fill-box is required for transform-origin:center to
       mean each rect's OWN center — SVG child elements default to
       transform-box:view-box, where "center" is the shared <svg> viewBox
       center (12,12) for all three rects instead. Rotating the top/bottom
       rects around that one shared point rather than their own centers
       (7 and 17) put the two arms of the X at different heights instead
       of crossing at the same point — a visibly crooked X. */
    .site-nav-more-line {
        transform-box: fill-box;
        transform-origin: center;
        transition: transform .3s ease-in-out, opacity .2s ease-in-out;
    }
    .site-nav-more.is-active .site-nav-more-line--top {
        transform: translateY(5px) rotate(45deg);
    }
    .site-nav-more.is-active .site-nav-more-line--middle {
        opacity: 0;
    }
    .site-nav-more.is-active .site-nav-more-line--bottom {
        transform: translateY(-5px) rotate(-45deg);
    }
    /* Expanded panel: hidden (0 height, no paint) while collapsed so it
       never affects the pill's 64px collapsed layout or scroll/tab order;
       .site-nav.is-menu-open (above) is what actually opens the pill up
       to reveal it. Padding comes from the .boxed.boxed--lg classes on
       the markup itself (2.78571429em, same as the card text elsewhere
       .site-nav's own width already lines up with — see the pill's own
       --nav-inset comment above) rather than a one-off value here. */
    .site-nav-expanded {
        flex-shrink: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: opacity .25s ease-in-out, max-height .4s cubic-bezier(0.65, 0, 0.35, 1);
    }
    .site-nav.is-menu-open .site-nav-expanded {
        max-height: 60vh;
        opacity: 1;
        /* .boxed:not([class*="bg-"]) (further up this file) paints an
           opaque white background on anything with .boxed and no bg-*
           class — .site-nav-expanded has .boxed.boxed--lg for its
           padding only (see the earlier comment on this class), not for
           a background. Dark mode already escapes it via .bg--dark
           .boxed:not(...){background:none} in theme.core.css, but that
           selector requires an actual .bg--dark ancestor, so the light
           pill had no equivalent — it was covering .site-nav's own
           blurred/translucent background with a solid white box. */
        background: none;
    }
    /* While the panel is open, the collapsed row's global menu (the
       HOME/VISIT US/GIVE list) has no reason to stay visible next to the
       logo — the primary menu below takes over as the only nav. */
    .site-nav.is-menu-open .site-nav-list {
        display: none;
    }
    /* li.site-nav-item's base (unscoped, further up this file) rule sets
       display:inline — the pill's own .site-nav-list sidesteps that only
       because display:flex/grid on the <ul> forces block-level items
       regardless of the <li>'s own display value. This list needs the
       same escape hatch, or its items render as one squashed inline run
       instead of a list.
       Grid, not flex: each top-level item is its own column (auto-fit,
       160px minimum, so the count of columns adapts to how many
       top-level items and .site-nav's own width), with its own label
       above a stacked sub-menu — same visual shape as a typical site
       footer's link columns. wp_nav_menu's default walker (no custom
       theme_menu_walker here) already nests children as a plain
       <ul class="sub-menu"> inside the parent <li>, which is exactly the
       markup this layout expects. */
    .site-nav-expanded-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 28px 24px;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    /* The scroll arrows only mean something for mobile's horizontally-
       scrolling row — desktop's grid never scrolls. */
    .site-nav-expanded-list-arrow {
        display: none;
    }
    /* Top-level item doubles as the column header, but deliberately
       carries no typography overrides of its own — .site-nav-link and
       .site-nav-item's shared, unscoped base rules are the same classes
       the collapsed row's global menu items use, so both read as the
       same style rather than the panel introducing its own. */
    .site-nav-expanded-list > .site-nav-item > .site-nav-link {
        display: block;
    }
    .site-nav-expanded-list .sub-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    /* li.site-nav-item's base (unscoped, further up this file) rule sets
       text-transform:uppercase — fine for the top-level column headers
       (matching the collapsed row's global menu), but a nested child
       link reads better in normal case. */
    .site-nav-expanded-list .sub-menu .site-nav-item {
        text-transform: none;
    }
    /* font-size/weight has to target .site-nav-link itself, not just its
       parent .site-nav-item: the base (unscoped) .site-nav-link rule
       further up this file sets font-weight:700 directly on the <a>,
       which wins over whatever the <li> around it has — that's a
       specified value on the element itself, not an inherited one.
       Matched to mobile's own sub-menu link size/weight (15px/400, see
       the mobile block further down) rather than the pill row's 13px/
       500, so a sub-item reads the same regardless of breakpoint. */
    .site-nav-expanded-list .sub-menu .site-nav-link {
        display: block;
        font-size: 15px;
        font-weight: 400;
        /* .site-nav-link's own base pill-row rule (padding:10px 18px,
           further up this file) is what actually spaces stacked sub-
           menu items apart — .sub-menu itself (above) is a plain flex
           column with no gap of its own. Tightened here since a sub-
           menu reads better packed closer together than the top-level
           column headers it's nested under. */
        padding-top: 4px;
        padding-bottom: 4px;
    }
    /* .site-nav-link:active/:focus/:hover (further up this file) also
       force font-weight:700 directly, same issue as the default state
       above — keep it at 400 on hover too instead of jumping bold. */
    .site-nav-expanded-list .sub-menu .site-nav-link:active,
    .site-nav-expanded-list .sub-menu .site-nav-link:focus,
    .site-nav-expanded-list .sub-menu .site-nav-link:hover {
        font-weight: 400;
    }
    /* Everything else about .site-nav-link (color, size, weight) still
       matches the collapsed row's global menu on purpose — just no
       hover/focus pill background here, unlike the collapsed row. */
    .site-nav-expanded-list .site-nav-link:active,
    .site-nav-expanded-list .site-nav-link:focus,
    .site-nav-expanded-list .site-nav-link:hover {
        background: none;
    }
    .site-nav.bg--dark .site-nav-expanded-list .site-nav-link:active,
    .site-nav.bg--dark .site-nav-expanded-list .site-nav-link:focus,
    .site-nav.bg--dark .site-nav-expanded-list .site-nav-link:hover {
        background: none;
    }
    /* Second row below the primary menu: reuses the site's social_media
       loop/classes (list-inline/list-inline-item) for spacing between
       the icons themselves, and i.icon's own base/.bg--dark rules
       already handle color. display:flex here (instead of leaving it to
       Bootstrap's .list-inline-item inline-block flow) is only for
       .site-nav-item-special — theme.nav.js moves that opt-in "pinned"
       menu item into this list at runtime, and it needs a flex row to
       push itself to the end with margin-left:auto (further down this
       file). Only the divider between the two rows is new here. */
    .site-nav-expanded-divider {
        border: none;
        border-top: 1px solid var(--grey-30);
        margin: 24px 0 20px;
    }
    .site-nav.bg--dark .site-nav-expanded-divider {
        border-top-color: var(--black-50);
    }
    .site-nav-menu-social {
        display: flex;
        align-items: center;
    }
    .site-nav-menu-social .icon {
        font-size: 16px;
    }
    /* Backdrop: a separate fixed layer behind the pill (z-index below
       #navigation's 900) so the page content blurs through it while the
       pill itself stays crisp on top. A near-zero alpha, not fully
       transparent, is a known Safari quirk workaround — backdrop-filter
       can fail to apply on a background that's exactly transparent. */
    .site-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 890;
        background: rgba(0, 0, 0, .001);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
    }
    /* Locks page scroll while the panel is open. Desktop-only feature, so
       plain overflow:hidden is enough — no need for the iOS rubber-band
       workaround video-overlay.js uses (position:fixed + scroll restore),
       that's specifically a mobile Safari issue. */
    body.site-nav-more-open {
        overflow: hidden;
    }
    .site-nav-backdrop.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}
@media only screen and (min-width: 1000px) {
    /* Mirrors .container's own min-width:1000px upgrade (same breakpoint,
       same value) — must come after the min-width:933px block above,
       since that block also sets .site-nav's max-width unconditionally;
       with this earlier in the file instead, the later, equal-specificity
       rule silently won at any width past 1000px and this 1425px cap
       never actually applied. Also adds the 40px column padding (.row > *,
       half of --bs-gutter-x:80px) that the card text picks up from this
       breakpoint on — see the --nav-inset comment above. */
    .site-nav {
        --nav-inset: calc(40px + 2.78571429rem);
        max-width: calc(min(var(--container-max-width-desktop), 100%) - 2 * var(--nav-inset));
    }
}
@media only screen and (min-width: 933px) and (max-width: 1279px) {
    /* At the narrow end of the pill's fluid range (now width:88% instead
       of a wider fixed inset), 7 items at full size genuinely don't fit
       in the space left after the logo — tighten padding, letter-spacing
       and font-size together here, and shrink the logo wordmark a touch
       too, rather than relying on padding alone (wide desktop has room
       to spare, so that stays at the roomier default sizing). */
    .site-nav-link {
        padding-left: 8px;
        padding-right: 8px;
        font-size: 13px;
        letter-spacing: .02em;
    }
    .site-nav-list {
        gap: 0;
    }
    .site-nav-logo a h4 {
        font-size: 17px;
    }
}
@media only screen and (min-width: 933px) and (max-width: 999px) {
    /* Below 1000px the pill is inset to the card text (--nav-inset), so
       it's ~70px narrower than .container here — the tightest range of
       all, with the .site-nav-more circle taking another 56px. Trim link
       padding and font-size a little more so 7 items still fit. */
    .site-nav-link {
        padding-left: 4px;
        padding-right: 4px;
        font-size: 12px;
    }
}

/* .......... NAVIGATION - MOBILE .......... */
 @media only screen and (max-width:932px) {
    .site-nav {
        border-bottom: none;
        flex-direction: column;
        height: 100%;
        height: auto;
        justify-content: flex-end;
        margin-left: auto;
        overflow: hidden;
        padding: 0;
        position: relative;
        transform: translateX(100%);
        transition: all .4s ease-in-out;
        width: 100vw;
        z-index: 420
    }
     .site-nav.show-nav {
         background:var(--white);
         height: 100%;
         max-height: calc(100vh - 90px);
         transform: translateX(0)
    }
    .site-nav-list {
        height: 100%;
        width: 100%;
        padding-top:2rem;
        padding-left:1.5rem;
        padding-right:1.5rem;
        background:none;
        display: block;
        overflow-y: hidden;
    }

     li.site-nav-item {
         display: block;
         letter-spacing: .054em;
         text-align: left;
         text-transform: uppercase!important;
         border-bottom: none;
         padding:10px 0px;
         height:40px;
    }
     .site-nav-item:active,
     .site-nav-item:focus,
     .site-nav-item:hover {
         border-bottom: none;
         padding:10px 0px;
    }
     .site-sub-nav-container {
         background:var(--white);
         height: auto;
         height: calc(100% - 40px);
         min-height: calc(100% - 80px);
         left: 100%;
         margin-top: 0;
         overflow-y: auto;
         top: 0;
         opacity: 1;
         visibility:visible;
         transition: all .4s ease-in-out, opacity .1s ease-in-out, visibility .4s ease-in-out;
    }
     .site-nav-link {
         color: var(--black-70);
         display: flex;
         font-size: 15px;
         font-weight: 700;
         letter-spacing: .042em;
         padding:0;
    }
     .site-nav-link:active, .site-nav-link:focus, .site-nav-link:hover {
         opacity:0.6;
    }
     .sub-nav-link {
         color: var(--black-70);
         display: flex;
         font-size: 15px;
         font-weight: 700;
         letter-spacing: .042em;
         text-transform: uppercase;
    }
     .sub-nav-link:active, .sub-nav-link:focus, .sub-nav-link:hover {
         opacity:0.6;
    }
     .site-sub-nav-container-expand {
         height: 100%;
         left: 0;
         padding-bottom: 0;
         padding-top: 0;
         z-index: 420;
    }
     .nav-toggle {
         align-items: center;
         display: flex;
         justify-content: space-between;
         padding: 0;
         width: 100%
    }
     .site-sub-nav-list {
         height: 100%;
    }
    .sub-nav-list {
        height: 100%;
        width:87vw;
        padding-top:2rem;
        padding-left:1.5rem;
        padding-right:1.5rem;
        background: var(--white);
        display: block;
        overflow-y: hidden;
    }
     .sub-nav-list .sub-nav-item {
         border-bottom: none;
         width:100%;
    }
     .site-nav-item:active,
     .site-nav-item:focus,
     .site-nav-item:hover {
         border-bottom: none;
    }
     .site-nav .sub-nav-link:active, .site-nav .sub-nav-link:focus, .site-nav .sub-nav-link:hover {
         color:var(--black-80);
    }
     .sub-nav-title {
         text-transform:uppercase;
         font-size:15px;
         font-weight: 400;
         letter-spacing: .042em;
         color: var(--primary)!important;
    }
}
/* .......... NAVIGATION (IF DARK) - DESKTOP .......... */
 @media only screen and (min-width:932px) {
     .site-nav.bg--dark {
         background:var(--black-70);
    }
     .site-nav.bg--dark .site-nav-link {
         color:var(--white);
    }
}
/* Floating-pill treatment for the dark nav variant, kept alongside the
   block above (rather than in the pill block itself) since this is the
   later, higher-precedence declaration for .site-nav.bg--dark's own
   background at this same min-width:932/933px breakpoint. */
@media only screen and (min-width: 933px) {
    .site-nav.bg--dark {
        background: rgba(18, 18, 18, .8);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        box-shadow: 0 0 0 1px var(--black-50);
    }
    /* theme.nav.js toggles .bg--dark as the pill scrolls over dark and
       light sections, so ease between the two rather than snapping. */
    .site-nav,
    .site-nav .site-nav-logo a,
    .site-nav .site-nav-more {
        transition: background .3s ease-in-out, box-shadow .3s ease-in-out, color .3s ease-in-out;
    }
    .site-nav .site-nav-link {
        transition: background .2s ease-in-out, color .3s ease-in-out, opacity .2s ease-in-out;
    }
}
/* .......... NAVIGATION - MOBILE: FLOATING PILL ..........
   #site-nav is the only collapsed nav bar at every width now, mobile
   included, driven by the same toggleSiteNavMore() as desktop (see
   "NAVIGATION - DESKTOP: FLOATING PILL") — there's no separate #nav-
   mobile/toggleNav pill-and-slide-in-panel pair to keep in sync with
   any more. This block only needs to supply the sizing/position values
   that genuinely differ from desktop's (a tighter 12px top offset, and
   no extra --nav-inset alignment to the wider card grid) plus the
   shell/open-state/icon-morph/backdrop mechanics desktop scopes to
   min-width:933px, duplicated here at mobile's own values instead of
   widening that block's media query (kept separate, matching how
   "IF DARK" above and the rest of this file already pairs a DESKTOP
   block with its own MOBILE counterpart rather than sharing one). */
@media only screen and (max-width: 932px) {
    .site-nav {
        background: rgba(255, 255, 255, .8);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        /* 32px = half the collapsed 64px height, i.e. fully rounded. */
        border-radius: 50px;
        box-shadow: 0 0 0 1px var(--grey-30);
        /* .container's own width: width:100%, max-width:88% under 1000px.
           No top/left/right: .site-nav isn't itself position:fixed (its
           ancestor #navigation is, pinned to the viewport top), so like
           desktop's pill this is centered and offset from the top purely
           via margin, not viewport-relative positioning. */
        width: min(var(--container-max-width), 100%);
        margin: 12px auto 0;
        padding-left: 0;
        padding-right: 0;
        display: flex;
        flex-direction: column;
        /* The "NAVIGATION - MOBILE" block above (predating this pill,
           still kept for its still-relevant li/link rules) sets
           justify-content:flex-end on this same selector — fine while
           collapsed (content exactly fills max-height either way), but
           would shove the open panel's content down against the bottom
           of the taller open max-height instead of anchoring it to the
           top under the row. */
        justify-content: flex-start;
        height: auto;
        max-height: 64px;
        overflow: hidden;
        transform: none;
        transition: max-height .4s cubic-bezier(0.65, 0, 0.35, 1), border-radius .3s ease-in-out, background .3s ease-in-out, box-shadow .3s ease-in-out;
    }
    .site-nav.bg--dark {
        background: rgba(18, 18, 18, .8);
        box-shadow: 0 0 0 1px var(--black-50);
    }
    /* Open: the pill grows down into a box instead of squaring off a
       separate sibling panel underneath it — same mechanism as desktop's
       .is-menu-open, just capped to the viewport height minus the same
       12px top/bottom breathing room instead of a fixed 70vh. */
    .site-nav.is-menu-open {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        border-radius: 32px;
    }
    #site-nav > .d-flex.justify-content-center {
        height: 64px;
        flex-shrink: 0;
        padding-left: 10px;
        padding-right: 10px;
    }
    /* .site-nav-logo is positioned via Bootstrap's .position-absolute/
       .start-0 utilities (!important), same override desktop needs to
       lay it out as a normal flex row item instead. */
    .site-nav-logo.position-absolute {
        position: static !important;
    }
    #site-nav > .d-flex.justify-content-center {
        justify-content: space-between !important;
    }
    /* The collapsed row's global menu (HOME/VISIT US/GIVE) has no
       equivalent visible row on mobile — the box opens straight to
       .site-nav-expanded's primary menu instead, same structure as
       desktop, just stacked single-column below. */
    .site-nav-list {
        display: none;
    }
    /* "More" button: the same 44px solid circle as desktop's, black with
       a white icon, inverted on .bg--dark — duplicated here since
       desktop's own copy is scoped to min-width:933px. */
    .site-nav-more {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: var(--black-100);
        color: var(--white);
        cursor: pointer;
    }
    .site-nav-more svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }
    .site-nav.bg--dark .site-nav-more {
        background: var(--white);
        color: var(--black-100);
    }
    /* Hamburger-to-X morph — same rects/transforms as desktop's copy,
       see the transform-box comment there for why fill-box is required. */
    .site-nav-more-line {
        transform-box: fill-box;
        transform-origin: center;
        transition: transform .3s ease-in-out, opacity .2s ease-in-out;
    }
    .site-nav-more.is-active .site-nav-more-line--top {
        transform: translateY(5px) rotate(45deg);
    }
    .site-nav-more.is-active .site-nav-more-line--middle {
        opacity: 0;
    }
    .site-nav-more.is-active .site-nav-more-line--bottom {
        transform: translateY(-5px) rotate(-45deg);
    }
    /* Expanded panel: hidden while collapsed so it never affects the
       pill's 64px collapsed layout; .site-nav.is-menu-open (above) opens
       the pill up to reveal it. Padding comes from its own .boxed.
       boxed--lg classes on the markup (2.78571429em, stepping down at
       max-width:767px via theme.core.css). */
    .site-nav-expanded {
        flex-shrink: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: opacity .25s ease-in-out, max-height .4s cubic-bezier(0.65, 0, 0.35, 1);
    }
    .site-nav.is-menu-open .site-nav-expanded {
        max-height: calc(100vh - 88px);
        max-height: calc(100dvh - 88px);
        opacity: 1;
        overflow-y: auto;
        background: none;
    }
    /* Horizontally-swipeable row instead of desktop's grid (matching
       apple.com's own product-picker carousel: a horizontal scroller of
       "cards", each item sized to its own content, snapping into place
       as you swipe) — .site-nav-expanded-list's base li.site-nav-item
       rule sets display:inline, same escape-hatch issue as desktop;
       display:flex fixes it here too. Each item is its own card (parent
       link + its stacked sub-menu below it, same shape as a desktop grid
       column, just laid out in a row you scroll through rather than
       wrapped). Scrollbar hidden since the swipe gesture itself is the
       intended affordance, same as Apple's own carousel. */
    .site-nav-expanded-list {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
        list-style: none;
        margin: 0;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        /* Permanent edge fade — unlike the arrow buttons below (which
           hide themselves once there's nothing left in that direction),
           this doesn't need to track scroll position: a masked-out edge
           on a line of text reads as "cut off, keep going" on its own,
           so it's harmless even on the one side with nothing further to
           scroll to. Masks the content's own edges to transparent rather
           than overlaying a solid-color gradient, so it stays correct
           against the pill's translucent/blurred background regardless
           of the light/dark state or whatever's scrolling behind it. */
        -webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
        mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
    }
    .site-nav-expanded-list::-webkit-scrollbar {
        display: none;
    }
    .site-nav-expanded-list-wrap {
        position: relative;
    }
    /* Scroll arrows: always in the markup, only shown at this width
       (desktop's grid has no scroll to indicate) — theme.nav.js hides
       each one specifically once there's nothing left to scroll toward
       it. Plain chevron mark, no button chrome (background/border) of
       its own — just a bare indicator sitting over the list's edge,
       matching apple.com's own carousel reference (a simple ">"/"<",
       not a boxed button). */
    .site-nav-expanded-list-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 28px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
        transition: opacity .2s ease-in-out;
    }
    /* Lines up with the collapsed row's own logo/more-button edges
       above (10px inset from #site-nav's own side, via #site-nav >
       .d-flex's padding) rather than .site-nav-expanded-list-wrap's own
       edge, which sits further in — inset by .boxed.boxed--lg's padding
       (2.78571429em by default, further overridden at two narrower
       breakpoints below — theme.core.css steps it to 1.23809524em at
       max-width:767px, and a separate, unrelated theme.atmos.css rule
       for section.feature-large also happens to catch .boxed.boxed--lg
       and bump it to a flat 3em at max-width:576px). */
    .site-nav-expanded-list-arrow--prev {
        left: calc(10px - 2.78571429em);
    }
    .site-nav-expanded-list-arrow--next {
        right: calc(10px - 2.78571429em);
    }
    @media only screen and (max-width: 767px) {
        .site-nav-expanded-list-arrow--prev {
            left: calc(10px - 1.23809524em);
        }
        .site-nav-expanded-list-arrow--next {
            right: calc(10px - 1.23809524em);
        }
    }
    @media only screen and (max-width: 576px) {
        .site-nav-expanded-list-arrow--prev {
            left: calc(10px - 3em);
        }
        .site-nav-expanded-list-arrow--next {
            right: calc(10px - 3em);
        }
    }
    .site-nav-expanded-list-arrow.is-hidden {
        opacity: 0;
        pointer-events: none;
    }
    /* Self-contained chevron (not the sitewide .toggle-chevron class —
       that one is built for a 10px caret sitting inline next to text,
       with its own margin/color baked in for that context, and fighting
       those defaults here was more trouble than a few independent
       lines). Two borders rotated 45deg is the same technique .toggle-
       chevron itself uses. */
    .site-nav-expanded-list-arrow-icon {
        display: block;
        width: 8px;
        height: 8px;
        border-bottom: 1.5px solid var(--black-100);
        border-left: 1.5px solid var(--black-100);
    }
    .site-nav-expanded-list-arrow-icon--left {
        transform: rotate(45deg);
    }
    .site-nav-expanded-list-arrow-icon--right {
        transform: rotate(-135deg);
    }
    .site-nav.bg--dark .site-nav-expanded-list-arrow-icon {
        border-color: var(--white);
    }
    .site-nav-expanded-list > .site-nav-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    /* li.site-nav-item (the "NAVIGATION - MOBILE" block further up,
       predating this floating-pill redesign) fixes every .site-nav-item
       at height:40px and forces uppercase !important — built for the
       old flat single-level list, so a parent here with a nested
       sub-menu (e.g. About > Leadership) got clipped to 40px with its
       child overlapping the next item, and the child came out uppercase
       instead of matching the desktop panel's lighter, normal-case
       style. text-transform needs !important to beat that rule's own
       !important; height wins on specificity alone (kept !important
       there too anyway, so it can't regress if that rule ever changes). */
    .site-nav-expanded-list > .site-nav-item {
        height: auto !important;
    }
    /* .site-nav-expanded, not .site-nav-expanded-list: .site-nav-item-
       solo's own sub-menu needs this too once theme.nav.js moves that
       item out of the list (below), so this targets the shared ancestor
       both cases actually sit inside instead of duplicating the rule. */
    .site-nav-expanded .sub-menu {
        margin-top: 0;
    }
    .site-nav-expanded .sub-menu .site-nav-item {
        height: auto !important;
        text-transform: none !important;
        /* The "NAVIGATION - MOBILE" block's legacy li.site-nav-item{
           padding:10px 0px} is what actually spaces stacked sub-menu
           items apart here (the link itself has no padding of its own
           at this width) — tightened for the same reason as desktop's
           .site-nav-link padding above. */
        padding: 2px 0;
    }
    /* One weight lighter than desktop's 500 — has to target .site-nav-
       link itself (both the sitewide unscoped rule and this mobile
       section's own .site-nav-link rule further up set font-weight:700
       directly on the <a>, which wins over the <li>). Not indented (no
       padding-left on .sub-menu, above): at this width the sub-menu
       already reads as its own group under the parent without needing
       an inset too. */
    .site-nav-expanded .sub-menu .site-nav-link {
        font-weight: 400;
    }
    /* .site-nav-link:active/:focus/:hover (the sitewide unscoped rule)
       forces font-weight:700 directly, same issue as the default state
       above — keep it at 400 on tap/focus too instead of jumping bold. */
    .site-nav-expanded .sub-menu .site-nav-link:active,
    .site-nav-expanded .sub-menu .site-nav-link:focus,
    .site-nav-expanded .sub-menu .site-nav-link:hover {
        font-weight: 400;
    }
    .site-nav.bg--dark .site-nav-expanded .site-nav-link {
        color: var(--white);
    }
    /* Social menu under the primary menu, separated by a hairline that
       stops at the same 1.5rem inset as the menu text. Desktop's own
       .site-nav-expanded-divider rule (min-width:933px, further up this
       file) sets its own border-top — that's scoped away at this width,
       so without setting one here too the <hr> was falling back to the
       browser's own default rendering instead of one of our colors.
       margin-top matches .site-nav-item-solo's own padding-top (below):
       when a solo item is present this is the gap from its last line of
       content down to this divider, mirroring the gap from the solo
       item's own divider down to its first line of content — same
       16px on both sides of that content, top and bottom. */
    .site-nav-expanded-divider {
        border: none;
        border-top: 1px solid var(--grey-30);
        margin: 16px 0 20px;
    }
    .site-nav.bg--dark .site-nav-expanded-divider {
        border-top-color: var(--black-50);
    }
    /* The markup also carries .social-list — theme.core.css has a
       sitewide max-width:767px rule that stacks any plain .list-inline
       vertically, with :not(.social-list) as its own built-in exemption
       for exactly this kind of row (the footer's own social icons use
       the same escape hatch). Without it, that rule's higher specificity
       (three :not() classes) would beat display:flex below and stack
       these icons regardless of what's set here. */
    .site-nav-menu-social {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .site-nav.bg--dark .site-nav-menu-social .icon {
        color: var(--white);
    }
    /* Backdrop behind the open pill — duplicated from desktop's own copy
       (min-width:933px) at the same values; blur(12px) rather than
       desktop's 20px, matching what the mobile scrim used before this
       consolidation. */
    .site-nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 890;
        background: rgba(0, 0, 0, .001);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
    }
    .site-nav-backdrop.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.site-nav-more-open {
        overflow: hidden;
    }
    /* Mobile counterpart of the desktop .has-floating-nav rule: keep the
       first section's content clear of the pill (12px + 64px = 76px to
       its bottom edge) on load. Same #wrapper-scoped selector, for the
       same specificity reason. */
    #wrapper .has-floating-nav {
        padding-top: 100px !important;
    }
    /* The old 60px bar reserved its space with #wrapper's margin-top:59px
       (theme.atmos.css, near the top). The pill floats over the page
       instead — as on desktop — with .has-floating-nav keeping the first
       section's content clear, so that margin would only push every
       section, and its background, down under the pill. */
    #wrapper {
        margin-top: 0;
    }
}
/* Open menu: a solid panel instead of the collapsed pill's frosted glass
   (80% alpha + backdrop blur) — light and dark, at every width. After
   both breakpoint blocks so it outranks their .site-nav/.site-nav.bg--
   dark backgrounds. The page behind still blurs via .site-nav-backdrop.
   theme.nav.js can flip .bg--dark while it's open, which the existing
   background transition eases. */
.site-nav.is-menu-open {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.site-nav.bg--dark.is-menu-open {
    background: rgb(18, 18, 18);
}
/* Sub-menu links in the expanded menu, at every width: --black-20 on
   light, --grey-60 on dark (--black-20 is only ~3:1 on the dark panel;
   --grey-60 gives it roughly the same contrast light has). Hover/focus
   goes to full strength so there's still feedback. Specific enough to
   outrank both breakpoint blocks' .site-nav-link colours, including
   mobile's .site-nav.bg--dark .site-nav-expanded .site-nav-link. */
.site-nav-expanded .sub-menu .site-nav-link {
    color: var(--black-20);
}
.site-nav-expanded .sub-menu .site-nav-link:hover,
.site-nav-expanded .sub-menu .site-nav-link:focus-visible {
    color: var(--black-100);
}
.site-nav.bg--dark .site-nav-expanded .sub-menu .site-nav-link {
    color: var(--grey-60);
}
.site-nav.bg--dark .site-nav-expanded .sub-menu .site-nav-link:hover,
.site-nav.bg--dark .site-nav-expanded .sub-menu .site-nav-link:focus-visible {
    color: var(--white);
}
/* Close (X) hover: once the menu is open, the X turns a quarter turn on
   hover — rotating the whole icon, so it doesn't fight the per-line
   hamburger-to-X transforms above. Every width (both .site-nav-more
   copies), but only for real hover, so a tap on a touch screen doesn't
   leave it stuck rotated. */
.site-nav-more svg {
    transition: transform .3s ease-in-out;
}
@media (hover: hover) {
    .site-nav-more.is-active:hover svg {
        transform: rotate(90deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .site-nav-more svg {
        transition: none;
    }
}
/* LIVE badge (.site-nav-live, includes/functions/youtube-live.php): a
   red pill beside the menu button, shown only while the channel set in
   Theme Settings > Navigation is live streaming (theme.nav.js toggles
   [hidden]). Same on light and dark nav. margin-left:auto pushes it
   right next to the menu button on mobile, where the row is just logo,
   badge and button; desktop's menu list already takes that free space,
   so there it just keeps the button's own 12px gap. */
.site-nav-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    height: 36px;
    margin-left: auto;
    margin-right: 8px;
    padding: 0 16px 0 12px;
    border-radius: 50px;
    background: #C8413A;
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s ease-in-out;
}
.site-nav-live[hidden] {
    display: none !important;
}
.site-nav-live:hover,
.site-nav-live:focus-visible {
    background: #B0362F;
    color: var(--white);
    text-decoration: none;
}
.site-nav-live:focus-visible {
    outline: 2px solid #C8413A;
    outline-offset: 2px;
}
@media only screen and (min-width: 933px) {
    .site-nav-live {
        margin-left: 12px;
        margin-right: 0;
    }
}
/* Narrow phones: the logo, badge and menu button share the pill's one
   row. Under 400px the logo gives up half of its right padding
   (Bootstrap's pe-4, !important) while the badge is showing and the
   badge itself tightens up a little; under 375px
   even that isn't enough, so the badge drops to a round icon-only button
   (the link's aria-label and the visually-hidden label still say
   "Live"). */
@media only screen and (max-width: 399px) {
    .site-nav:has(.site-nav-live:not([hidden])) .site-nav-logo {
        padding-right: 12px !important;
    }
    .site-nav-live {
        gap: 6px;
        margin-right: 6px;
        padding: 0 12px 0 10px;
    }
}
@media only screen and (max-width: 374px) {
    .site-nav-live {
        width: 36px;
        margin-right: 6px;
        padding: 0;
        justify-content: center;
    }
    .site-nav-live-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}
.site-nav-live-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    overflow: visible;
}
.site-nav-live-dot {
    fill: currentColor;
}
.site-nav-live-wave {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    animation: site-nav-live-wave 2s ease-in-out infinite;
}
.site-nav-live-wave--outer {
    animation-delay: .3s;
}
@keyframes site-nav-live-wave {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
    .site-nav-live-wave {
        animation: none;
    }
}
/* .......... PINNED MENU ITEM ..........
   Opt-in class for a single top-level item in the primary menu. Add it
   via that menu item's "CSS Classes" field in Appearance > Menus
   (WordPress admin). theme.nav.js moves the flagged <li> at runtime out
   of .site-nav-expanded-list and into .site-nav-menu-social (an actual
   DOM move, not a CSS position:absolute overlay), so it renders as part
   of that row — e.g. a "Staff Login" link that shouldn't compete with
   the main nav items. */
.site-nav-item.site-nav-item-special {
    /* .site-nav-menu-social is a flex row (above); auto-margin pushes
       this item alone to its far end, past the icons. */
    margin-left: auto;
    /* Resets two mobile-only rules that otherwise still apply once this
       item is no longer a descendant of .site-nav-expanded-list (their
       own overrides for that context, further up this file, are scoped
       to that parent and stop matching after the move): the
       "NAVIGATION - MOBILE" block's legacy li.site-nav-item{height:40px;
       padding:10px 0} — sized for a plain uppercase text row, not this
       item's own padded pill button — beats a plain .site-nav-item-
       special selector on specificity (element+class > class+class), so
       this is written as a compound .site-nav-item.site-nav-item-special
       selector to outrank it. */
    height: auto;
    padding: 0;
}
/* Solid pill button, matching the site's .btn pill radius — built
   standalone rather than reusing .btn itself, since .btn expects its
   own nested <span class="btn__text"> markup that the default
   wp_nav_menu() walker used here doesn't produce. Inverts with the pill
   the same way .site-nav-more does: dark button on the light nav,
   light button on .bg--dark. background is redeclared on :hover/etc
   (not just relied on from the base rule) because .site-nav-expanded-
   list .site-nav-link:hover further up this file sets background:none
   at equal or higher specificity — without restating it here, hovering
   this button would flash its background away. */
.site-nav-item-special .site-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: 50px;
    background: var(--black-100);
    color: var(--white);
    transition: opacity .2s ease-in-out;
}
.site-nav-item-special .site-nav-link:active,
.site-nav-item-special .site-nav-link:focus,
.site-nav-item-special .site-nav-link:hover {
    background: var(--black-100);
    color: var(--white);
    opacity: .8;
}
.site-nav.bg--dark .site-nav-item-special .site-nav-link {
    background: var(--white);
    color: var(--black-100);
}
.site-nav.bg--dark .site-nav-item-special .site-nav-link:active,
.site-nav.bg--dark .site-nav-item-special .site-nav-link:focus,
.site-nav.bg--dark .site-nav-item-special .site-nav-link:hover {
    background: var(--white);
    color: var(--black-100);
    opacity: .8;
}
/* .......... SOLO MENU ITEM ..........
   Another opt-in class for a single top-level item in the primary menu
   (add it via that menu item's "CSS Classes" field in Appearance >
   Menus), isolating it — and its own sub-menu — from the rest with a
   dividing line.
   Desktop is pure CSS placement (grid-column), not a JS DOM move like
   .site-nav-item-special: unlike that class's absolute-positioned
   overlay, explicit grid placement is a standard layout mechanism that
   doesn't need the element to physically move in the DOM to land in a
   specific spot, and the other items' auto-placement already flows
   around whichever cell an explicitly-placed item claims regardless of
   DOM order.
   Mobile DOES need a DOM move (theme.nav.js): it stacks the item as its
   own full-width row below the horizontally-scrolling primary list
   (see "NAVIGATION - MOBILE: FLOATING PILL" further up) rather than
   keeping it as a card within that scroll, and there's no equivalent of
   grid's explicit placement for pulling one item out of a scrolling
   flex row onto its own line without also affecting the items around
   it — flex-wrap would let it wrap, but so would any other overflowing
   item, breaking the single-row swipe for everything else. */
@media only screen and (min-width: 933px) {
    /* grid-row:1/-1 below only spans to the true last row if the grid
       has that many rows in its EXPLICIT template — negative line
       numbers count from the end of the explicit grid, not whatever
       implicit rows auto-placement ends up generating for the other
       items. .site-nav-expanded-list never sets grid-template-rows (it
       doesn't know in advance how many rows a given page's menu will
       wrap to), so without this, -1 resolved to the end of an explicit
       grid that was only ever 1 row tall, and a second row of items
       auto-placed right back into column 1 as if the solo item weren't
       there at all. 10 rows is a generous ceiling no realistic menu
       should reach; unused ones are auto-sized with no content, so they
       contribute 0 height rather than stretching the panel. */
    .site-nav-expanded-list:has(> .site-nav-item-solo) {
        grid-template-rows: repeat(10, auto);
    }
    .site-nav-item-solo {
        /* Columns 1-2 (span 2) regardless of where this item actually
           falls in the menu order — auto-placed siblings skip whatever
           cells an explicitly-placed item claims, in every row, so this
           reads as "pinned far left, twice as wide" without needing to
           be first in the menu, and without a dedicated leading column
           of its own: it's just a wider cell in .site-nav-expanded-
           list's existing auto-fit grid, so the regular items keep the
           same column sizing they'd otherwise have and simply start
           from column 3 instead of column 1. */
        grid-column: 1 / span 2;
        grid-row: 1 / -1;
        padding-right: 24px;
        border-right: 1px solid var(--grey-30);
    }
    .site-nav.bg--dark .site-nav-item-solo {
        border-right-color: var(--black-50);
    }
    /* Image preview (Appearance > Menus > a menu item's own "Menu Item
       Image" field — see includes/functions/nav-menu-image.php and the
       matching theme.nav.js block): stacked under the title/sub-menu,
       the full width of the column, and half the height left below them
       (flex-grow .5 from a 0 basis: a lone item with a grow factor under
       1 takes just that fraction of the free space). theme.nav.js inserts the image as
       the first child (mobile shows it as a banner above the text), so
       order moves it to the end here. theme.nav.js only ever adds
       .site-nav-item-solo-media when the parent item actually has an
       image, so :has() here means unset items keep the plain text-only
       layout. padding-right is repeated here because the menu's own item
       padding reset outranks .site-nav-item-solo's 24px; without it the
       full-width image would run right into the divider. */
    .site-nav-item-solo:has(.site-nav-item-solo-media) {
        display: flex;
        flex-direction: column;
        padding-right: 24px;
    }
    .site-nav-item-solo-media {
        order: 1;
        flex: 0.5 1 0;
        width: 100%;
        min-height: 90px;
        margin-top: 24px;
    }
    .site-nav-item-solo-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
    }
}
@media only screen and (max-width: 932px) {
    /* theme.nav.js moves this item out of .site-nav-expanded-list
       entirely and inserts it right after that list (still inside
       .site-nav-expanded), so it's now a direct sibling of the list
       rather than one of its cards — full-width block, divider on top,
       instead of desktop's full-height column with the line beside it.
       height/padding reset for the same reason .site-nav-item-special
       needs one: the "NAVIGATION - MOBILE" block's legacy li.site-nav-
       item{height:40px;padding:10px 0} only stops applying via the
       .site-nav-expanded-list > .site-nav-item / .site-nav-expanded-
       list .sub-menu .site-nav-item overrides further up this file,
       both scoped to being inside that list — this item no longer is,
       so it needs its own override (compound .site-nav-item.site-nav-
       item-solo selector to outrank the legacy rule's specificity, same
       fix as .site-nav-item-special uses). */
    .site-nav-item.site-nav-item-solo {
        display: block;
        width: 100%;
        height: auto;
        padding: 0;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--grey-30);
    }
    .site-nav.bg--dark .site-nav-item.site-nav-item-solo {
        border-top-color: var(--black-50);
    }
    /* Image preview: a banner above the title/sub-menu instead of
       desktop's side-by-side layout — there's no spare width to put it
       beside the text at this size. theme.nav.js inserts it as the
       first child specifically so it lands here in normal flow, ahead
       of the title, without needing flex/order to reposition it. */
    .site-nav-item-solo-media {
        display: block;
        width: 100%;
        height: 140px;
        margin-bottom: 12px;
    }
    .site-nav-item-solo-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px;
    }
}
/* No padding on the expanded menu's items or links, at any width: text
   sits flush with its column and the sub-menu stacks on line-height
   alone. Placed after both breakpoint blocks, and specific enough
   (.site-nav-expanded + two classes) to outrank every padding rule
   above: the desktop pill-row link padding and its sub-menu tightening,
   and mobile's legacy li.site-nav-item and :hover padding. Two
   exceptions keep theirs: .site-nav-item-special (the pill button) and
   .site-nav-item-solo's own item, whose padding is the space beside or
   under its divider line. The collapsed pill row outside the panel is
   untouched: its link padding is the hover highlight's shape. */
.site-nav-expanded .site-nav-item:not(.site-nav-item-special):not(.site-nav-item-solo),
.site-nav-expanded .site-nav-item:not(.site-nav-item-special):not(.site-nav-item-solo):hover,
.site-nav-expanded .site-nav-item:not(.site-nav-item-special):not(.site-nav-item-solo):focus,
.site-nav-expanded .site-nav-item:not(.site-nav-item-special):not(.site-nav-item-solo):active,
.site-nav-expanded .site-nav-item:not(.site-nav-item-special) .site-nav-link {
    padding: 0;
}
/* Parent items (those with a sub-menu) get a little room under their
   own heading link before the sub-menu starts. Same specificity as the
   reset above, and after it, so it wins for these links only. */
.site-nav-expanded .site-nav-item:has(> .sub-menu) > .site-nav-link {
    padding-bottom: 0.6em;
}
/* Sub-menu links: vertical padding (not gap) so the whole row is the
   click/tap target, not just the 20px line of text — 26px rows for a
   mouse, 28px on touch (both above WCAG 2.2's 24px minimum, kept compact
   rather than the full 44px). The sub-menu is pulled up by the same
   amount as the link's top padding so that padding tucks into the
   heading's own 0.6em rather than stacking a second gap on it, without
   reaching the heading's text. After the padding reset above, and more
   specific, so it wins. */
.site-nav-expanded .sub-menu .site-nav-item:not(.site-nav-item-special) .site-nav-link {
    padding-top: 3px;
    padding-bottom: 3px;
}
.site-nav-expanded .sub-menu {
    margin-top: -3px;
}
@media only screen and (max-width: 932px) {
    .site-nav-expanded .sub-menu .site-nav-item:not(.site-nav-item-special) .site-nav-link {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .site-nav-expanded .sub-menu {
        margin-top: -4px;
    }
}
/* .......... SECONDARY NAVIGATION .......... */
 .secondary-sub-nav-list {
     height: 0;
     width: 0;
     overflow: hidden;
     padding:0;
     opacity:0;
     visibility: hidden;
     transition: all .4s ease-in-out;
    /*transition: height .4s ease-in-out,opacity .4s ease-in-out,visibility .4s ease-in-out,overflow 1s ease-in-out .4s,padding-top .4s ease-in-out,padding-bottom .4s ease-in-out;
    */
     text-align: left;
}
 .secondary-sub-nav-list-expand {
     border-left: 1px solid var(--grey-30);
     height: auto;
     list-style: none;
     margin: 0 22px;
     opacity: 1;
     overflow: visible;
     padding-left: 22px;
     visibility: visible;
     width: auto;
}
 .secondary-sub-nav-list-expand .sub-nav-item {
     height: 40px;
     opacity: 1;
     visibility: visible;
     overflow: visible;
     padding-bottom: 10px;
     padding-top: 10px;
}
.secondary-sub-nav-list .sub-nav-item {
     padding-left:1.5rem!important;
}
 @media only screen and (max-width:932px) {
     .secondary-sub-nav-list {
        height: 100%;
        width: 87vw;
        padding-top:2rem;
        padding-left:1.5rem;
        padding-right:1.5rem;
        background:var(--white);
        border: none;
        left: 100%;
        margin: 0;
        position: absolute;
        text-transform: uppercase;
        top: 0;
        opacity: 1;
        visibility: visible;
        transition: all .4s ease-in-out;
        z-index: 520;
        /*max-height: calc(100% - 320px);
        */
    }
     .secondary-sub-nav-list-expand {
         left: 0;
         margin: 0;
    }
     .secondary-sub-nav-list .sub-nav-item {
         padding-top: 10px;
         padding-bottom: 10px;
         padding-left:0!important;
         padding-right:0!important;
    }
     .sub-nav-item {
         height: 40px
    }
     .sub-nav-title {
         text-transform:uppercase;
         font-size:15px;
         letter-spacing: .042em;
         color: var(--primary);
    }
}
/* .......... FOOTER .......... */

footer
{
    font-family:var(--fontFamilySystem);
}

 footer .footer-logo {
     margin-bottom: 1em!important;
     padding:0em;
}

/* Sized so the logo's circle is exactly 44px, the same as the site nav's
   logo mark, at every width (7.4em made it ~48px on desktop, ~44px on
   mobile). The circle is 252 of the SVG's 852.24 x 541.21 viewBox units
   (r="126"), so the whole logo is 44px x 852.24 / 252 = ~148.8px wide by
   44px x 541.21 / 252 = ~94.5px tall. Both set explicitly (see the nav
   wordmark's rule for why), which also makes its ATMOSPHERE exactly the
   nav wordmark's size. */
footer .footer-logo svg {
    width: calc(44px * 852.24 / 252);
    height: calc(44px * 541.21 / 252);
    max-width: 100%;
    max-height: none;
    background-repeat: no-repeat;
    background-position: center center;
}

 footer ul li:not(.icon) {
     font-size: 13px;
     font-weight: 500;
     line-height:auto;
     text-transform: uppercase;
     letter-spacing: .05em;
}

/* .................... GRAVITY FORMS .................... */
/*.woocommerce form .gfield_required,*/
 .gform_wrapper form .gfield_required, .gform_wrapper.gform_validation_error form .gfield_required {
     display: none
}
/*.woocommerce form li.hidden_label,*/
 .gform_wrapper form li.hidden_label, .gform_wrapper.gform_validation_error form li.hidden_label {
     display: none
}
/*.woocommerce form li.hidden_label.gfield_contains_required,*/
 .gform_wrapper form li.hidden_label.gfield_contains_required, .gform_wrapper.gform_validation_error form li.hidden_label.gfield_contains_required {
     display: block;
     border: 0
}
/*.woocommerce form li.multi-checkbox>label,*/
 .gform_wrapper form li.multi-checkbox>label, .gform_wrapper.gform_validation_error form li.multi-checkbox>label {
     margin-bottom: .8rem !important
}
/*.woocommerce form li.gfield_toggle_container:after,*/
 .gform_wrapper form li.gfield_toggle_container:after, .gform_wrapper.gform_validation_error form li.gfield_toggle_container:after {
     display: none !important
}
/*.woocommerce form div.ginput_container_radio ul.gfield_radio,*/
 .gform_wrapper form div.ginput_container_radio ul.gfield_radio, .gform_wrapper.gform_validation_error form div.ginput_container_radio ul.gfield_radio {
     margin-bottom: 0
}
/*.woocommerce form div.ginput_container_radio li,*/
 .gform_wrapper form div.ginput_container_radio li, .gform_wrapper.gform_validation_error form div.ginput_container_radio li {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: start;
     -ms-flex-pack: start;
     justify-content: flex-start;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center
}
/*.woocommerce form div.ginput_container_radio li:last-child,*/
 .gform_wrapper form div.ginput_container_radio li:last-child, .gform_wrapper.gform_validation_error form div.ginput_container_radio li:last-child {
     margin-bottom: 0
}
/*.woocommerce form div.ginput_container_radio input[type="radio"],*/
 .gform_wrapper form div.ginput_container_radio input[type="radio"], .gform_wrapper.gform_validation_error form div.ginput_container_radio input[type="radio"] {
     margin-top: .3rem !important
}
/*.woocommerce form div.gfield_description,*/
 .gform_wrapper form div.gfield_description, .gform_wrapper.gform_validation_error form div.gfield_description {
     padding-top: 0 !important;
     padding-left:0rem;
     margin-top: .8rem;
     font-size:14px;
    /*line-height: var(--smallest-line_height)*/
}
/*.woocommerce form div.ginput_container_checkbox ul.gfield_checkbox,*/
 .gform_wrapper form div.ginput_container_checkbox ul.gfield_checkbox, .gform_wrapper.gform_validation_error form div.ginput_container_checkbox ul.gfield_checkbox {
     margin-top: 0
}
/*.woocommerce form div.ginput_container_checkbox ul.gfield_checkbox li,*/
 .gform_wrapper form div.ginput_container_checkbox ul.gfield_checkbox li, .gform_wrapper.gform_validation_error form div.ginput_container_checkbox ul.gfield_checkbox li {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: start;
     -ms-flex-pack: start;
     justify-content: flex-start;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center
}
/*.woocommerce form div.ginput_container_checkbox label, .woocommerce form div.ginput_container_checkbox a,*/
 .gform_wrapper form div.ginput_container_checkbox label, .gform_wrapper form div.ginput_container_checkbox a, .gform_wrapper.gform_validation_error form div.ginput_container_checkbox label, .gform_wrapper.gform_validation_error form div.ginput_container_checkbox a {
     font-weight: 400 !important;
}
/*.woocommerce form div.ginput_container_checkbox a,*/
 .gform_wrapper form div.ginput_container_checkbox a, .gform_wrapper.gform_validation_error form div.ginput_container_checkbox a {
     font-size: inherit
}
/*.woocommerce form div.ginput_container_checkbox input[type="checkbox"],*/
 .gform_wrapper form div.ginput_container_checkbox input[type="checkbox"], .gform_wrapper.gform_validation_error form div.ginput_container_checkbox input[type="checkbox"] {
     margin-top: 0 !important;
     margin-right: .4rem
}
/*.woocommerce form div.ginput_container_checkbox label,*/
 .gform_wrapper form div.ginput_container_checkbox label, .gform_wrapper.gform_validation_error form div.ginput_container_checkbox label {
     padding-left: .4rem !important
}
/*.woocommerce form div.ginput_container_checkbox+div.gfield_description.validation_message,*/
 .gform_wrapper form div.ginput_container_checkbox+div.gfield_description.validation_message, .gform_wrapper.gform_validation_error form div.ginput_container_checkbox+div.gfield_description.validation_message {
     display: none
}
/*.woocommerce form .form-row input, .woocommerce form .gfield input, .woocommerce form input,.woocommerce form label.gfield_label, .woocommerce form label,.woocommerce form div.validation_message, .woocommerce form textarea,.gform_wrapper form .form-row input,*/
 .gform_wrapper form .gfield input, .gform_wrapper form input, .gform_wrapper form label.gfield_label, .gform_wrapper form label, .gform_wrapper form:not(.form-subscription) div.validation_message, .gform_wrapper form textarea, .gform_wrapper.gform_validation_error form .form-row input, .gform_wrapper.gform_validation_error form .gfield input, .gform_wrapper.gform_validation_error form input, .gform_wrapper.gform_validation_error form label.gfield_label, .gform_wrapper.gform_validation_error form label, .gform_wrapper.gform_validation_error form:not(.form-subscription) div.validation_message, .gform_wrapper.gform_validation_error form textarea {
     padding-right: 1.6rem !important;
     padding-left: 1.6rem !important
}
/*.woocommerce form .form-row input, .woocommerce form .gfield input, .woocommerce form input, .woocommerce form label.gfield_label, .woocommerce form label, .woocommerce form div.validation_message, .woocommerce form textarea, .woocommerce form .optional, .woocommerce form .woocommerce-form__label span, .woocommerce form select, .woocommerce form .ginput_address_country select, .woocommerce form .select2-selection__placeholder,*/
 .gform_wrapper form .form-row input, .gform_wrapper form .gfield input, .gform_wrapper form input, .gform_wrapper form label.gfield_label, .gform_wrapper form label, .gform_wrapper form div.validation_message, .gform_wrapper form textarea, .gform_wrapper form .optional, .gform_wrapper form .woocommerce-form__label span, .gform_wrapper form select, .gform_wrapper form .ginput_address_country select, .gform_wrapper form .select2-selection__placeholder, .gform_wrapper.gform_validation_error form .form-row input, .gform_wrapper.gform_validation_error form .gfield input, .gform_wrapper.gform_validation_error form input, .gform_wrapper.gform_validation_error form label.gfield_label, .gform_wrapper.gform_validation_error form label, .gform_wrapper.gform_validation_error form div.validation_message, .gform_wrapper.gform_validation_error form textarea, .gform_wrapper.gform_validation_error form .optional, .gform_wrapper.gform_validation_error form .woocommerce-form__label span, .gform_wrapper.gform_validation_error form select, .gform_wrapper.gform_validation_error form .ginput_address_country select, .gform_wrapper.gform_validation_error form .select2-selection__placeholder {
     font-size:14px!important;
     line-height: var(--body_x_small-line_height) !important
}
/*.woocommerce form .gfield input, .woocommerce form input,*/
 .gform_wrapper form .gfield input, .gform_wrapper form input, .gform_wrapper.gform_validation_error form .gfield input, .gform_wrapper.gform_validation_error form input {
     border: 0;
     padding-top: 0 !important;
     padding-bottom: 0 !important;
     margin-bottom: 0 !important;
     background-color: transparent;
}
 .woocommerce form .gfield input:focus, .woocommerce form .gfield input:active, .woocommerce form input:focus, .woocommerce form input:active, .gform_wrapper form .gfield input:focus, .gform_wrapper form .gfield input:active, .gform_wrapper form input:focus, .gform_wrapper form input:active, .gform_wrapper.gform_validation_error form .gfield input:focus, .gform_wrapper.gform_validation_error form .gfield input:active, .gform_wrapper.gform_validation_error form input:focus, .gform_wrapper.gform_validation_error form input:active {
     outline: none;
}
/*.woocommerce form .gfield input:-webkit-autofill, .woocommerce form .gfield input:-webkit-autofill:hover, .woocommerce form .gfield input:-webkit-autofill:focus, .woocommerce form .gfield input:-webkit-autofill:active, .woocommerce form input:-webkit-autofill, .woocommerce form input:-webkit-autofill:hover, .woocommerce form input:-webkit-autofill:focus, .woocommerce form input:-webkit-autofill:active,*/
 .gform_wrapper form .gfield input:-webkit-autofill, .gform_wrapper form .gfield input:-webkit-autofill:hover, .gform_wrapper form .gfield input:-webkit-autofill:focus, .gform_wrapper form .gfield input:-webkit-autofill:active, .gform_wrapper form input:-webkit-autofill, .gform_wrapper form input:-webkit-autofill:hover, .gform_wrapper form input:-webkit-autofill:focus, .gform_wrapper form input:-webkit-autofill:active, .gform_wrapper.gform_validation_error form .gfield input:-webkit-autofill, .gform_wrapper.gform_validation_error form .gfield input:-webkit-autofill:hover, .gform_wrapper.gform_validation_error form .gfield input:-webkit-autofill:focus, .gform_wrapper.gform_validation_error form .gfield input:-webkit-autofill:active, .gform_wrapper.gform_validation_error form input:-webkit-autofill, .gform_wrapper.gform_validation_error form input:-webkit-autofill:hover, .gform_wrapper.gform_validation_error form input:-webkit-autofill:focus, .gform_wrapper.gform_validation_error form input:-webkit-autofill:active {
     padding-top: .4rem !important;
     padding-bottom: .4rem !important;
}
 .gform_wrapper.gform_validation_error div.gfield_description {
     padding-right:0!important;
}
/*.woocommerce form .input-text.qty.text,*/
 .gform_wrapper form .input-text.qty.text, .gform_wrapper.gform_validation_error form .input-text.qty.text {
     padding-left: 0 !important
}
 .woocommerce form .ginput_address_country select,.woocommerce form select,.woocommerce form input[type="text"],.woocommerce form .gfield_select,.gform_wrapper form .ginput_address_country select,.gform_wrapper form select,.gform_wrapper form input[type="text"],.gform_wrapper form .gfield_select,.gform_wrapper.gform_validation_error form .ginput_address_country select,.gform_wrapper.gform_validation_error form select,.gform_wrapper.gform_validation_error form input[type="text"],.gform_wrapper.gform_validation_error form .gfield_select {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none
}
/*.woocommerce form input[type="radio"]+label,*/
 .gform_wrapper form input[type="radio"]+label, .gform_wrapper.gform_validation_error form input[type="radio"]+label {
     padding-left: 0 !important;
     margin-left: .8rem;
     font-weight: 400
}
/*.woocommerce form label.gfield_label, .woocommerce form label,*/
 .gform_wrapper form label.gfield_label, .gform_wrapper form label,.gform_wrapper.gform_validation_error form label.gfield_label, .gform_wrapper.gform_validation_error form label {
     margin-bottom: 0 !important;
     color: var(--black-80);
     font-weight: 700;
}
 .woocommerce form label.gfield_label::-webkit-input-placeholder, .woocommerce form label::-webkit-input-placeholder, .gform_wrapper form label.gfield_label::-webkit-input-placeholder, .gform_wrapper form label::-webkit-input-placeholder, .gform_wrapper.gform_validation_error form label.gfield_label::-webkit-input-placeholder, .gform_wrapper.gform_validation_error form label::-webkit-input-placeholder {
     color: var(--grey-30)
}
 .woocommerce form label.gfield_label::-moz-placeholder, .woocommerce form label::-moz-placeholder, .gform_wrapper form label.gfield_label::-moz-placeholder, .gform_wrapper form label::-moz-placeholder, .gform_wrapper.gform_validation_error form label.gfield_label::-moz-placeholder, .gform_wrapper.gform_validation_error form label::-moz-placeholder {
     color: var(--grey-30)
}
 .woocommerce form label.gfield_label:-ms-input-placeholder, .woocommerce form label:-ms-input-placeholder, .gform_wrapper form label.gfield_label:-ms-input-placeholder, .gform_wrapper form label:-ms-input-placeholder, .gform_wrapper.gform_validation_error form label.gfield_label:-ms-input-placeholder, .gform_wrapper.gform_validation_error form label:-ms-input-placeholder {
     color: var(--grey-30)
}
 .woocommerce form label.gfield_label::-ms-input-placeholder, .woocommerce form label::-ms-input-placeholder, .gform_wrapper form label.gfield_label::-ms-input-placeholder, .gform_wrapper form label::-ms-input-placeholder, .gform_wrapper.gform_validation_error form label.gfield_label::-ms-input-placeholder, .gform_wrapper.gform_validation_error form label::-ms-input-placeholder {
     color: var(--grey-30)
}
 .woocommerce form label.gfield_label::placeholder,.woocommerce form label::placeholder,.gform_wrapper form label.gfield_label::placeholder,.gform_wrapper form label::placeholder,.gform_wrapper.gform_validation_error form label.gfield_label::placeholder,.gform_wrapper.gform_validation_error form label::placeholder {
     color: var(--grey-30)
}
 .woocommerce form textarea,.woocommerce form select,.woocommerce form option,.gform_wrapper form textarea,.gform_wrapper form select,.gform_wrapper form option,.gform_wrapper.gform_validation_error form textarea,.gform_wrapper.gform_validation_error form select,.gform_wrapper.gform_validation_error form option {
     color: var(--grey-60)
}
/*.woocommerce form select, .woocommerce form .gfield_radio, .woocommerce form .gfield_checkbox,*/
 .gform_wrapper form select, .gform_wrapper form .gfield_radio, .gform_wrapper form:not(.form-subscription) .gfield_checkbox, .gform_wrapper.gform_validation_error form select, .gform_wrapper.gform_validation_error form .gfield_radio, .gform_wrapper.gform_validation_error form:not(.form-subscription) .gfield_checkbox {
     margin-left: 1.4rem !important
}
 .woocommerce form input[type="radio"],.gform_wrapper form input[type="radio"],.gform_wrapper.gform_validation_error form input[type="radio"] {
     width: 20px !important;
     height: 20px !important
}
 .woocommerce form .ginput_container,.gform_wrapper form .ginput_container,.gform_wrapper.gform_validation_error form .ginput_container {
     margin-top: 0 !important
}
 .woocommerce form .ginput_container span,.gform_wrapper form .ginput_container span,.gform_wrapper.gform_validation_error form .ginput_container span {
     padding-top: 0 !important
}
 .woocommerce form .gf_left_half,.gform_wrapper form .gf_left_half,.gform_wrapper.gform_validation_error form .gf_left_half {
     margin-right: 0
}
 .woocommerce form .gf_left_half,.woocommerce form .gf_right_half,.gform_wrapper form .gf_left_half,.gform_wrapper form .gf_right_half,.gform_wrapper.gform_validation_error form .gf_left_half,.gform_wrapper.gform_validation_error form .gf_right_half {
     width: 100% !important
}
/*.woocommerce form input[type="submit"],*/
 .gform_wrapper form input[type="submit"], .gform_wrapper.gform_validation_error form input[type="submit"] {
     position: relative;
     display: block;
     border-radius:50px;
     border: none;
     padding: 1rem 2rem;
     margin-right: 0;
     margin-left: auto;
     font-size: 1.1em;
     font-weight: 500;
     color: #fff;
     font-family: var(--fontFamilySystem);
     background-color: var(--primary)
}
 .woocommerce form input[type="submit"]:hover,.woocommerce form input[type="submit"]:active,.gform_wrapper form input[type="submit"]:hover,.gform_wrapper form input[type="submit"]:active,.gform_wrapper.gform_validation_error form input[type="submit"]:hover,.gform_wrapper.gform_validation_error form input[type="submit"]:active {
     outline: none;
     -webkit-box-shadow: none;
     box-shadow: none
}
 .woocommerce form input[type="submit"]:hover,.gform_wrapper form input[type="submit"]:hover,.gform_wrapper.gform_validation_error form input[type="submit"]:hover {
     background-color: var(--primary)
}
 .woocommerce form input[type="submit"]:not(:disabled):not(.disabled):active,.gform_wrapper form input[type="submit"]:not(:disabled):not(.disabled):active,.gform_wrapper.gform_validation_error form input[type="submit"]:not(:disabled):not(.disabled):active {
     background-color: var(--primary)
}
 .woocommerce form input[type="submit"]:focus,.woocommerce form input[type="submit"]:not(:disabled):not(.disabled):active:focus,.gform_wrapper form input[type="submit"]:focus,.gform_wrapper form input[type="submit"]:not(:disabled):not(.disabled):active:focus,.gform_wrapper.gform_validation_error form input[type="submit"]:focus,.gform_wrapper.gform_validation_error form input[type="submit"]:not(:disabled):not(.disabled):active:focus {
     outline: none;
     text-decoration: none;
     -webkit-box-shadow: 0 0 0 0.2rem #455efa;
     box-shadow: 0 0 0 0.2rem #455efa
}
 .woocommerce form .woocommerce-input-wrapper,.gform_wrapper form .woocommerce-input-wrapper,.gform_wrapper.gform_validation_error form .woocommerce-input-wrapper {
     position: relative;
     display: block;
     width: 100%
}
 .woocommerce form .woocommerce-input-wrapper .select2-container,.woocommerce form .woocommerce-input-wrapper textarea,.gform_wrapper form .woocommerce-input-wrapper .select2-container,.gform_wrapper form .woocommerce-input-wrapper textarea,.gform_wrapper.gform_validation_error form .woocommerce-input-wrapper .select2-container,.gform_wrapper.gform_validation_error form .woocommerce-input-wrapper textarea {
     display: block;
     width: 96.5% !important;
     margin: 0;
     border: 0
}
 .woocommerce form .woocommerce-input-wrapper .select2-container .select2-selection--single .select2-selection__rendered,.woocommerce form .woocommerce-input-wrapper textarea,.gform_wrapper form .woocommerce-input-wrapper .select2-container .select2-selection--single .select2-selection__rendered,.gform_wrapper form .woocommerce-input-wrapper textarea,.gform_wrapper.gform_validation_error form .woocommerce-input-wrapper .select2-container .select2-selection--single .select2-selection__rendered,.gform_wrapper.gform_validation_error form .woocommerce-input-wrapper textarea {
     padding-left: 1.6rem !important
}
 .woocommerce form .password-input,.gform_wrapper form .password-input,.gform_wrapper.gform_validation_error form .password-input {
     position: relative;
     width: 100%
}
 .woocommerce form .password-input .show-password-input,.gform_wrapper form .password-input .show-password-input,.gform_wrapper.gform_validation_error form .password-input .show-password-input {
     top: 0
}
 .woocommerce form .select2-container--default .select2-selection--single,.gform_wrapper form .select2-container--default .select2-selection--single,.gform_wrapper.gform_validation_error form .select2-container--default .select2-selection--single {
     border: 0
}
 .woocommerce form .select2-container .select2-selection--single .select2-selection__rendered,.gform_wrapper form .select2-container .select2-selection--single .select2-selection__rendered,.gform_wrapper.gform_validation_error form .select2-container .select2-selection--single .select2-selection__rendered {
     color: var(--grey-50);
     font-size: 14px !important;
     line-height: var(--body_x_small-line_height) !important;
     outline: none !important
}
 @media only screen and (min-width: 992px) {
     .woocommerce form .select2-container .select2-selection--single .select2-selection__rendered,.gform_wrapper form .select2-container .select2-selection--single .select2-selection__rendered,.gform_wrapper.gform_validation_error form .select2-container .select2-selection--single .select2-selection__rendered {
         font-size:var(--body_x_small-desktop_font_size) !important;
         line-height: var(--body_x_small-desktop_line_height) !important
    }
}
 @media only screen and (min-width: 641px) {
     .gform_wrapper form .gform_fields {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex!important;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
         -ms-flex-direction: row;
         flex-direction: row;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
         -webkit-box-pack: justify;
         -ms-flex-pack: justify;
         justify-content: space-between;
    }
}
 .woocommerce form .gform_footer, .gform_wrapper form .gform_footer, .gform_wrapper.gform_validation_error form .gform_footer {
     position: relative;
     padding-top: 0;
     padding-bottom: 0;
     margin-top: 0
}
 .woocommerce form .gform_footer .gform_ajax_spinner, .gform_wrapper form .gform_footer .gform_ajax_spinner, .gform_wrapper.gform_validation_error form .gform_footer .gform_ajax_spinner {
     position: absolute;
     top: -3.6rem;
     right: -2.8rem
}
/*.woocommerce form .form-row, .woocommerce form li.gfield,*/
 .gform_wrapper form .form-row, .gform_wrapper form li.gfield, .gform_wrapper.gform_validation_error form .form-row, .gform_wrapper.gform_validation_error form li.gfield {
     width: 100%;
     border: 0.1rem solid var(--grey-30);
     border-radius: .4rem;
     padding: .8rem 0 !important;
     margin-top: 0 !important;
     margin-bottom: 2rem !important;
}
 .woocommerce form .form-row.rma-address label.gfield_label_before_complex,.woocommerce form li.gfield.rma-address label.gfield_label_before_complex,.gform_wrapper form .form-row.rma-address label.gfield_label_before_complex,.gform_wrapper form li.gfield.rma-address label.gfield_label_before_complex,.gform_wrapper.gform_validation_error form .form-row.rma-address label.gfield_label_before_complex,.gform_wrapper.gform_validation_error form li.gfield.rma-address label.gfield_label_before_complex {
     display: none
}
/*.woocommerce form .form-row.wcfield--active, .woocommerce form .form-row.gfield--active, .woocommerce form li.gfield.wcfield--active, .woocommerce form li.gfield.gfield--active,*/
 .gform_wrapper form .form-row.wcfield--active, .gform_wrapper form .form-row.gfield--active, .gform_wrapper form li.gfield.wcfield--active, .gform_wrapper form li.gfield.gfield--active, .gform_wrapper.gform_validation_error form .form-row.wcfield--active, .gform_wrapper.gform_validation_error form .form-row.gfield--active, .gform_wrapper.gform_validation_error form li.gfield.wcfield--active, .gform_wrapper.gform_validation_error form li.gfield.gfield--active {
     border-color:var(--primary);
}
/*.woocommerce form .form-row.wcfield--active label, .woocommerce form .form-row.gfield--active label, .woocommerce form .form-row.gfield--has-value label, .woocommerce form li.gfield.wcfield--active label, .woocommerce form li.gfield.gfield--active label, .woocommerce form li.gfield.gfield--has-value label,*/
 .gform_wrapper form .form-row.wcfield--active label, .gform_wrapper form .form-row.gfield--active label, .gform_wrapper form .form-row.gfield--has-value label, .gform_wrapper form li.gfield.wcfield--active label, .gform_wrapper form li.gfield.gfield--active label, .gform_wrapper form li.gfield.gfield--has-value label, .gform_wrapper.gform_validation_error form .form-row.wcfield--active label, .gform_wrapper.gform_validation_error form .form-row.gfield--active label, .gform_wrapper.gform_validation_error form .form-row.gfield--has-value label, .gform_wrapper.gform_validation_error form li.gfield.wcfield--active label, .gform_wrapper.gform_validation_error form li.gfield.gfield--active label, .gform_wrapper.gform_validation_error form li.gfield.gfield--has-value label {
     color:var(--primary);
}
 .woocommerce form .form-row.woocommerce-invalid, .woocommerce form .form-row.gfield_error, .woocommerce form li.gfield.woocommerce-invalid, .woocommerce form li.gfield.gfield_error, .gform_wrapper form .form-row.woocommerce-invalid, .gform_wrapper form .form-row.gfield_error, .gform_wrapper form li.gfield.woocommerce-invalid, .gform_wrapper form li.gfield.gfield_error, .gform_wrapper.gform_validation_error form .form-row.woocommerce-invalid, .gform_wrapper.gform_validation_error form .form-row.gfield_error, .gform_wrapper.gform_validation_error form li.gfield.woocommerce-invalid, .gform_wrapper.gform_validation_error form li.gfield.gfield_error {
     position: relative;
     margin:0;
     border-color: var(--errorColor);
     background-color: transparent
}
/*.woocommerce form .form-row.woocommerce-invalid label, .woocommerce form .form-row.gfield_error label, .woocommerce form li.gfield.woocommerce-invalid label, .woocommerce form li.gfield.gfield_error label,*/
 .gform_wrapper form .form-row.woocommerce-invalid label, .gform_wrapper form .form-row.gfield_error label, .gform_wrapper form li.gfield.woocommerce-invalid label, .gform_wrapper form li.gfield.gfield_error label, .gform_wrapper.gform_validation_error form .form-row.woocommerce-invalid label, .gform_wrapper.gform_validation_error form .form-row.gfield_error label, .gform_wrapper.gform_validation_error form li.gfield.woocommerce-invalid label, .gform_wrapper.gform_validation_error form li.gfield.gfield_error label {
     margin-top: 0 !important;
     color: var(--errorColor) !important
}
 .gform_wrapper form .gfield_checkbox li, .gform_wrapper form .gfield_radio li {
     line-height: 1.2;
     margin: 0 0 4px;
}
/*.woocommerce form .form-row.woocommerce-invalid .gfield input, .woocommerce form .form-row.woocommerce-invalid input, .woocommerce form .form-row.gfield_error .gfield input, .woocommerce form .form-row.gfield_error input, .woocommerce form li.gfield.woocommerce-invalid .gfield input, .woocommerce form li.gfield.woocommerce-invalid input, .woocommerce form li.gfield.gfield_error .gfield input, .woocommerce form li.gfield.gfield_error input,*/
 .gform_wrapper form .form-row.woocommerce-invalid .gfield input, .gform_wrapper form .form-row.woocommerce-invalid input, .gform_wrapper form .form-row.gfield_error .gfield input, .gform_wrapper form .form-row.gfield_error input, .gform_wrapper form li.gfield.woocommerce-invalid .gfield input, .gform_wrapper form li.gfield.woocommerce-invalid input, .gform_wrapper form li.gfield.gfield_error .gfield input, .gform_wrapper form li.gfield.gfield_error input, .gform_wrapper.gform_validation_error form .form-row.woocommerce-invalid .gfield input, .gform_wrapper.gform_validation_error form .form-row.woocommerce-invalid input, .gform_wrapper.gform_validation_error form .form-row.gfield_error .gfield input, .gform_wrapper.gform_validation_error form .form-row.gfield_error input, .gform_wrapper.gform_validation_error form li.gfield.woocommerce-invalid .gfield input, .gform_wrapper.gform_validation_error form li.gfield.woocommerce-invalid input, .gform_wrapper.gform_validation_error form li.gfield.gfield_error .gfield input, .gform_wrapper.gform_validation_error form li.gfield.gfield_error input {
     border: 0 !important
}
/*.woocommerce form .form-row.woocommerce-invalid:after, .woocommerce form .form-row.gfield_error:after, .woocommerce form li.gfield.woocommerce-invalid:after, .woocommerce form li.gfield.gfield_error:after, .gform_wrapper form .form-row.woocommerce-invalid:after, .gform_wrapper form li.gfield.woocommerce-invalid:after, .gform_wrapper.gform_validation_error form li.gfield.woocommerce-invalid:after, .gform_wrapper.gform_validation_error form .form-row.woocommerce-invalid:after,*/
 .gform_wrapper form .form-row.gfield_error:after, .gform_wrapper form li.gfield.gfield_error:after, .gform_wrapper.gform_validation_error form .form-row.gfield_error:after, .gform_wrapper.gform_validation_error form li.gfield.gfield_error:after {
     position: absolute;
     top:0.5rem;
     right:0.7rem;
     display: block;
     width: 1.3rem;
     height: 1.3rem;
     color: var(--errorColor);
     font-family: var(--fontAwesome);
     font-weight: 600;
     content: '\f06a';
    /*background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-image: url();
    */
}
/*.gform_wrapper form.form-subscription .form-row.woocommerce-invalid:after, .gform_wrapper form.form-subscription li.gfield.woocommerce-invalid:after, .gform_wrapper.gform_validation_error form.form-subscription li.gfield.woocommerce-invalid:after, .gform_wrapper.gform_validation_error form.form-subscription .form-row.woocommerce-invalid:after,*/
 .gform_wrapper form.form-subscription .form-row.gfield_error:not(.gfield--type-choice):after, .gform_wrapper form.form-subscription li.gfield.gfield_error:not(.gfield--type-choice):after, .gform_wrapper.gform_validation_error form.form-subscription .form-row.gfield_error:not(.gfield--type-choice):after, .gform_wrapper.gform_validation_error form.form-subscription li.gfield.gfield_error:not(.gfield--type-choice):after {
     top: 1.2rem;
}
/*.woocommerce form .form-row span, .woocommerce form li.gfield span,*/
 .gform_wrapper form .form-row span, .gform_wrapper form li.gfield span, .gform_wrapper.gform_validation_error form .form-row span, .gform_wrapper.gform_validation_error form li.gfield span {
     padding-left: 1.6rem;
}
 .woocommerce form li.gfield::before,.gform_wrapper form li.gfield::before,.gform_wrapper.gform_validation_error form li.gfield::before {
     display: none
}
 .woocommerce form.gfield_error,.gform_wrapper form.gfield_error,.gform_wrapper.gform_validation_error form.gfield_error {
     margin-bottom: 0
}
 .woocommerce form li.gfield_toggle_container,.gform_wrapper form li.gfield_toggle_container,.gform_wrapper.gform_validation_error form li.gfield_toggle_container {
     border: 0;
     padding-left: 0 !important;
     margin-top: -.8rem !important;
     margin-bottom: -1.6rem !important
}
 .woocommerce form li.gfield_toggle_container ul,.gform_wrapper form li.gfield_toggle_container ul,.gform_wrapper.gform_validation_error form li.gfield_toggle_container ul {
     margin-top: 0;
     margin-bottom: 0;
     margin-left: 0 !important
}
 .woocommerce form li.gfield_toggle_container input,.gform_wrapper form li.gfield_toggle_container input,.gform_wrapper.gform_validation_error form li.gfield_toggle_container input {
     margin-top: 0 !important
}
 .woocommerce form li.gfield_toggle_container.gfield_toggle_container--has-description,.gform_wrapper form li.gfield_toggle_container.gfield_toggle_container--has-description,.gform_wrapper.gform_validation_error form li.gfield_toggle_container.gfield_toggle_container--has-description {
     margin-bottom: 1rem !important
}
 .woocommerce form li.gfield_toggle_container.gfield_toggle_container--has-description div.gfield_description,.gform_wrapper form li.gfield_toggle_container.gfield_toggle_container--has-description div.gfield_description,.gform_wrapper.gform_validation_error form li.gfield_toggle_container.gfield_toggle_container--has-description div.gfield_description {
     padding-left: 0;
     margin-left: 0 !important
}
 .woocommerce form li.gfield_toggle_container.gfield_toggle_container--has-description div.ginput_container,.gform_wrapper form li.gfield_toggle_container.gfield_toggle_container--has-description div.ginput_container,.gform_wrapper.gform_validation_error form li.gfield_toggle_container.gfield_toggle_container--has-description div.ginput_container {
     margin-top: .4rem !important
}
 .woocommerce form p.form-row.create-account,.woocommerce form #ship-to-different-address,.gform_wrapper form p.form-row.create-account,.gform_wrapper form #ship-to-different-address,.gform_wrapper.gform_validation_error form p.form-row.create-account,.gform_wrapper.gform_validation_error form #ship-to-different-address {
     border: 0
}
 .woocommerce form p.form-row.create-account .woocommerce-form__label,.woocommerce form #ship-to-different-address .woocommerce-form__label,.gform_wrapper form p.form-row.create-account .woocommerce-form__label,.gform_wrapper form #ship-to-different-address .woocommerce-form__label,.gform_wrapper.gform_validation_error form p.form-row.create-account .woocommerce-form__label,.gform_wrapper.gform_validation_error form #ship-to-different-address .woocommerce-form__label {
     padding-left: 0 !important
}
 .woocommerce form p.form-row.create-account .input-checkbox,.woocommerce form #ship-to-different-address .input-checkbox,.gform_wrapper form p.form-row.create-account .input-checkbox,.gform_wrapper form #ship-to-different-address .input-checkbox,.gform_wrapper.gform_validation_error form p.form-row.create-account .input-checkbox,.gform_wrapper.gform_validation_error form #ship-to-different-address .input-checkbox {
     margin-right: .2rem
}
 .woocommerce form #ship-to-different-address,.gform_wrapper form #ship-to-different-address,.gform_wrapper.gform_validation_error form #ship-to-different-address {
     padding-top: 0 !important
}
 .woocommerce form .gform_body ul li.gfield.gfield_error:not(.gf_left_half):not(.gf_right_half),.gform_wrapper form .gform_body ul li.gfield.gfield_error:not(.gf_left_half):not(.gf_right_half),.gform_wrapper.gform_validation_error form .gform_body ul li.gfield.gfield_error:not(.gf_left_half):not(.gf_right_half) {
     max-width: none !important
}
/*.woocommerce form div.validation_message,*/
 .gform_wrapper form div.validation_message, .gform_wrapper.gform_validation_error form div.validation_message {
    /*padding: 0 1.6rem 0 1.6rem !important;
    */
     margin-top: .4rem;
     color: var(--errorColor);
     font-weight: 400
}
 .woocommerce form div.validation_error,.gform_wrapper form div.validation_error,.gform_wrapper.gform_validation_error form div.validation_error {
     display: none
}
 .woocommerce form .ginput_address_country select,.woocommerce form .address_country select,.woocommerce form .ginput_container_select select,.gform_wrapper form .ginput_address_country select,.gform_wrapper form .address_country select,.gform_wrapper form .ginput_container_select select,.gform_wrapper.gform_validation_error form .ginput_address_country select,.gform_wrapper.gform_validation_error form .address_country select,.gform_wrapper.gform_validation_error form .ginput_container_select select {
     border: none
}
 .woocommerce form li.gfield_error textarea,.woocommerce form textarea,.gform_wrapper form li.gfield_error textarea,.gform_wrapper form textarea,.gform_wrapper.gform_validation_error form li.gfield_error textarea,.gform_wrapper.gform_validation_error form textarea {
     border: 0
}
/*.woocommerce form .ginput_address_country select, .woocommerce form select.gfield_select,*/
 .gform_wrapper form .ginput_address_country select, .gform_wrapper form select.gfield_select, .gform_wrapper.gform_validation_error form .ginput_address_country select, .gform_wrapper.gform_validation_error form select.gfield_select {
     position: relative;
     z-index: 1;
     padding-left: 1.7rem;
     padding-right: 0 !important;
     margin-left: 0 !important;
     background-color: transparent
}
/*.woocommerce form .ginput_address_country, .woocommerce form .address_country, .woocommerce form .ginput_container.ginput_container_select,*/
 .gform_wrapper form .ginput_address_country, .gform_wrapper form .address_country, .gform_wrapper form .ginput_container.ginput_container_select, .gform_wrapper.gform_validation_error form .ginput_address_country, .gform_wrapper.gform_validation_error form .address_country, .gform_wrapper.gform_validation_error form .ginput_container.ginput_container_select {
     position: relative
}
/*.woocommerce form .ginput_address_country:after, .woocommerce form .address_country:after, .woocommerce form .ginput_container.ginput_container_select:after,*/
 .gform_wrapper form .ginput_address_country:after, .gform_wrapper form .address_country:after, .gform_wrapper form .ginput_container.ginput_container_select:after, .gform_wrapper.gform_validation_error form .ginput_address_country:after, .gform_wrapper.gform_validation_error form .address_country:after, .gform_wrapper.gform_validation_error form .ginput_container.ginput_container_select:after {
     position: absolute;
     z-index: 0;
     top: .3rem;
     right: 1.2rem;
     display: block;
     width: 1.4rem;
     height: 1.4rem;
     font-family: var(--fontAwesome);
     font-weight: 600;
     content: '\f078';
    /* background-size: cover;
     background-repeat: no-repeat;
     background-image: url();
    */
}
 .woocommerce form .address_country select,.gform_wrapper form .address_country select,.gform_wrapper.gform_validation_error form .address_country select {
     position: relative;
     z-index: 1;
     background-color: transparent
}
 .woocommerce form .address_country:after,.gform_wrapper form .address_country:after,.gform_wrapper.gform_validation_error form .address_country:after {
     top: 2rem;
     right: 2.6rem;
     z-index: 0
}
 .woocommerce form div.ginput_complex select,.gform_wrapper form div.ginput_complex select,.gform_wrapper.gform_validation_error form div.ginput_complex select {
     max-width: 90%
}
/*.woocommerce form div.ginput_container.ginput_container_date,*/
 .gform_wrapper form div.ginput_container.ginput_container_date, .gform_wrapper.gform_validation_error form div.ginput_container.ginput_container_date {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: start;
     -ms-flex-pack: start;
     justify-content: space-between;
     padding-right: 1.6rem;
     padding-left: 1.6rem
}
 .woocommerce form div.ginput_container.ginput_container_date img, .gform_wrapper form div.ginput_container.ginput_container_date img, .gform_wrapper.gform_validation_error form div.ginput_container.ginput_container_date img {
     display: block;
     margin-top: 0;
     margin-bottom: 0
}
/*.woocommerce form div.ginput_container.ginput_container_date input.datepicker,*/
 .gform_wrapper form div.ginput_container.ginput_container_date input.datepicker, .gform_wrapper.gform_validation_error form div.ginput_container.ginput_container_date input.datepicker {
     width: 90%;
    /*border-bottom: 0.1rem solid var(--grey-30);
    */
     padding-right: 0 !important;
     padding-left: 0 !important;
    /*margin-left: .4rem*/
}
/*.woocommerce form .ginput_address_country,*/
 .gform_wrapper form .ginput_address_country, .gform_wrapper.gform_validation_error form .ginput_address_country {
     display: block !important;
     min-height: 0 !important;
     width: 100% !important;
     margin-bottom: 0 !important
}
/*.woocommerce form .ginput_address_country select,*/
 .gform_wrapper form .ginput_address_country select, .gform_wrapper.gform_validation_error form .ginput_address_country select {
     max-width: none !important;
     margin-bottom: 0 !important
}
 @media screen and (min-width: 638px) {
     .woocommerce form .address_country:after,.gform_wrapper form .address_country:after,.gform_wrapper.gform_validation_error form .address_country:after {
         top:3rem;
         right: 2.4rem
    }
}
 @media screen and (min-width: 641px) {
     .woocommerce form li.gfield.gf_left_half,.gform_wrapper form li.gfield.gf_left_half,.gform_wrapper.gform_validation_error form li.gfield.gf_left_half {
         margin-right:4% !important
    }
     .woocommerce form li.gfield.gf_left_half,.woocommerce form li.gfield.gf_right_half,.gform_wrapper form li.gfield.gf_left_half,.gform_wrapper form li.gfield.gf_right_half,.gform_wrapper.gform_validation_error form li.gfield.gf_left_half,.gform_wrapper.gform_validation_error form li.gfield.gf_right_half {
         width: 48% !important
    }
     .woocommerce form li.gfield.gfield_error.gf_left_half,.gform_wrapper form li.gfield.gfield_error.gf_left_half,.gform_wrapper.gform_validation_error form li.gfield.gfield_error.gf_left_half {
         margin-right: 3% !important
    }
    
    /*.woocommerce form li.gfield.gfield_error.gf_right_half,*/
     .gform_wrapper form li.gfield.gfield_error.gf_right_half, .gform_wrapper.gform_validation_error form li.gfield.gfield_error.gf_right_half {
         max-width: calc(50% - 12px) !important;
         margin-left:0!important;
    }
}
 @media screen and (min-width: 992px) {
    /*.woocommerce form .form-row input, .woocommerce form .gfield input, .woocommerce form input,.woocommerce form label.gfield_label, .woocommerce form label,.woocommerce form div.validation_message, .woocommerce form textarea,.woocommerce form .optional, .woocommerce form .woocommerce-form__label span, .woocommerce form select,.woocommerce form .ginput_address_country select, .woocommerce form .select2-selection__placeholder,*/
     .gform_wrapper form .form-row input,.gform_wrapper form .gfield input, .gform_wrapper form input,.gform_wrapper form label.gfield_label, .gform_wrapper form label,.gform_wrapper form div.validation_message, .gform_wrapper form textarea,.gform_wrapper form .optional, .gform_wrapper form .woocommerce-form__label span, .gform_wrapper form select,.gform_wrapper form .ginput_address_country select, .gform_wrapper form .select2-selection__placeholder, .gform_wrapper.gform_validation_error form .form-row input, .gform_wrapper.gform_validation_error form .gfield input, .gform_wrapper.gform_validation_error form input, .gform_wrapper.gform_validation_error form label.gfield_label, .gform_wrapper.gform_validation_error form label, .gform_wrapper.gform_validation_error form div.validation_message, .gform_wrapper.gform_validation_error form textarea, .gform_wrapper.gform_validation_error form .optional, .gform_wrapper.gform_validation_error form .woocommerce-form__label span, .gform_wrapper.gform_validation_error form select, .gform_wrapper.gform_validation_error form .ginput_address_country select, .gform_wrapper.gform_validation_error form .select2-selection__placeholder {
         font-size:var(--body_x_small-desktop_font_size) !important;
         line-height: var(--body_x_small-desktop_line_height) !important
    }
    /*.woocommerce form div.gfield_description,*/
     .gform_wrapper form div.gfield_description, .gform_wrapper.gform_validation_error form div.gfield_description {
         font-size:var(--smallest-desktop_font_size);
         line-height: var(--smallest-desktop_line_height)
    }
     .woocommerce form .address_country:after, .gform_wrapper form .address_country:after, .gform_wrapper.gform_validation_error form .address_country:after {
         top:3.4rem
    }
     .woocommerce form div.validation_message, .gform_wrapper form div.validation_message, .gform_wrapper.gform_validation_error form div.validation_message {
         top: 7.4rem;
         font-size:14px!important;
         line-height: var(--smallest-desktop_line_height) !important
    }
    /*.woocommerce form .gform_fields,*/
     .gform_wrapper form .gform_fields, .gform_wrapper.gform_validation_error form .gform_fields {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
         -ms-flex-direction: row;
         flex-direction: row;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap;
         -webkit-box-pack: justify;
         -ms-flex-pack: justify;
         justify-content: space-between
    }
     .woocommerce form .gfield span.name_first,.woocommerce form .gfield span.name_last,.gform_wrapper form .gfield span.name_first,.gform_wrapper form .gfield span.name_last,.gform_wrapper.gform_validation_error form .gfield span.name_first,.gform_wrapper.gform_validation_error form .gfield span.name_last {
         width: 48% !important
    }
     .woocommerce form .gfield span.name_first,.gform_wrapper form .gfield span.name_first,.gform_wrapper.gform_validation_error form .gfield span.name_first {
         margin-right: 0
    }
}
 @media screen and (min-width: 1400px) {
     .woocommerce form .woocommerce-input-wrapper textarea,.gform_wrapper form .woocommerce-input-wrapper textarea,.gform_wrapper.gform_validation_error form .woocommerce-input-wrapper textarea {
         padding-left:.2rem !important
    }
}
 .gform_ajax_spinner {
     border-radius: 50%;
     width: 2.4rem !important;
     height: 2.4rem !important;
     border: 0.4rem solid #fff;
     border-left: 0.4rem solid var(--primary);
     margin-left: 2rem;
     -webkit-animation: spinner 1.1s infinite linear;
     animation: spinner 1.1s infinite linear
}
 @-webkit-keyframes spinner {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg)
    }
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg)
    }
}
 @keyframes spinner {
     0% {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg)
    }
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg)
    }
}
 .gform_legacy_markup_wrapper div.validation_error {
     border-top: 0.1rem solid var(--errorColor) !important;
     border-right-color: var(--errorColor) !important;
     border-bottom: 0.1rem solid var(--errorColor) !important;
     border-left-color: var(--errorColor) !important;
     padding: .8rem .4rem !important;
     color: var(--errorColor) !important
}
 .gform_legacy_markup_wrapper div.validation_error h2 {
     text-align: center;
     font-weight:600!important;
     color: var(--errorColor) !important
}
 .gform_legacy_markup_wrapper div.validation_error h2::before {
     display: none
}
 .form-subscription {
     width: 100%;
}
 .form-subscription .gform_body input {
     border: 0.1rem solid var(--grey-30) !important
}
 .form-subscription .gform_body .gfield--active input {
     border-color: var(--primary) !important
}
 .form-subscription ul.gform_fields li.gfield.gfield_error div.ginput_container input {
     border: 1px solid var(--errorColor) !important
}
/*.woocommerce form.form-subscription div.validation_message,*/
/*.gform_wrapper form.form-subscription div.validation_message,*/
 .gform_wrapper.gform_validation_error form:not(.form-subscription) div.validation_message {
     padding:0 1.6rem 0!important;
}
 .form-subscription.form-light .gform_body input {
     border-color: rgba(255, 255, 255,.9);
}
 .form-subscription.form-light .gform_body input {
     color: var(--white)!important;
}
 .form-subscription.form-light .gform_body input::-webkit-input-placeholder {
     color: var(--grey-40)!important;
}
 .form-subscription.form-light .gform_body input::-moz-placeholder {
     color: var(--grey-40)!important;
}
 .form-subscription.form-light .gform_body input:-ms-input-placeholder {
     color: var(--grey-40)!important;
}
 .form-subscription.form-light .gform_body input::-ms-input-placeholder {
     color: var(--grey-40)!important;
}
 .form-subscription.form-light .gform_body input::placeholder {
     color: var(--grey-40)!important;
}
 .form-subscription.form-light .gfield_checkbox label, .form-subscription.form-light .gfield_checkbox a, .form-subscription.form-light .gfield_checkbox a:hover, .form-subscription.form-light .gform_confirmation_message {
     color: var(--white)!important;
}
 .form-subscription .gform_fields .gfield:first-child {
     padding: 0px !important
}
 .form-subscription .gform_fields .gfield:first-child input {
     padding: 12px 16px !important;
     border-radius: 0.4rem
}
 .form-subscription .gform_footer {
     width: 100% !important;
     margin: 20px 0 0 0 !important
}
 .form-subscription .gform_footer .gform_button {
    /*padding: 10px 24px !important;
    */
    /*width: 100% !important*/
}
 @media only screen and (min-width:768px) {
     :not(.gform_confirmation_wrapper).form-subscription {
         position:relative;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
    }
    
     .form-subscription .gform_footer {
         width: 140px !important;
         margin: 12px 0 0 10px !important
    }
}

 .ginput_container_list {
     padding-left:1.6rem;
     padding-right:1.6rem;
}
 .gform_legacy_markup_wrapper table.gfield_list, .gform_legacy_markup_wrapper table.gfield_list caption, .gform_legacy_markup_wrapper table.gfield_list tbody, .gform_legacy_markup_wrapper table.gfield_list td, .gform_legacy_markup_wrapper table.gfield_list tfoot, .gform_legacy_markup_wrapper table.gfield_list th, .gform_legacy_markup_wrapper table.gfield_list thead, .gform_legacy_markup_wrapper table.gfield_list tr {
     border-bottom:solid 0.1rem var(--grey-30)!important;
}