Create a parent flex element by applying the class `.flex`, and add flex items with the class `.flex__col`. You can also use the grid system's column classes, i.e. `grid__lg-half`.
Add gutters to the columns by adding the class `.flex__gutters` to the parent flex container:
.m-flex__element()
--------------------
This mixin will set the display to flex, and also set the flex-direction and flex-wrap to their default values (row and nowrap, respectively). If you are using the standard motif column classes (i.e. grid__sm-half), you must set the gutters to true.
You can set new values with the variables `@direction` and `@wrap`, like so:
.m-flex__element(@direction: column, @wrap: wrap);
.m-flex__order(@number)
-------------------------
Use this mixin to set the order of each flex item within a parent flex element. Accepts a unitless value only.
.m-flex(@grow, @shrink, @basis)
--------------------------------
This mixin sets the shorthand `flex` property, which combines flex-grow, flex-shrink and flex-basis.
@grow: specifies how much a flex item will grow relative to the rest of the flexible items inside the same container. Accepts a unitless value only. Negative values are invalid.
@shrink: specifies how much a flex item will shrink relative to the rest of the flexible items inside the same container. Accepts a unitless value only. Negative values are invalid.
@basis: specifies the initial length of a flexible item. Accepts a length (20%, 5rem, etc) or a keyword.
Note: IE 9 and earlier do not support the flex property.
*/
.flex {
flex-direction: row;
flex-wrap: nowrap;
display: flex;
}
.flex--inline {
flex-direction: row;
flex-wrap: nowrap;
display: inline-flex;
}
.flex__full,
.flex__col {
width: 100%;
}
.flex__gutters {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
.flex__gutters:before,
.flex__gutters:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.flex__gutters:after {
clear: both;
}
@media all and (min-width: 48em) and (max-width: 59.9375em) {
.flex__gutters {
margin-left: -1rem;
margin-right: -1rem;
}
.flex__gutters:before,
.flex__gutters:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.flex__gutters:after {
clear: both;
}
}
@media all and (min-width: 60em) {
.flex__gutters {
margin-left: -1.125rem;
margin-right: -1.125rem;
}
.flex__gutters:before,
.flex__gutters:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.flex__gutters:after {
clear: both;
}
}
.flex__gutters .flex__col {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
@media all and (min-width: 48em) and (max-width: 59.9375em) {
.flex__gutters .flex__col {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media all and (min-width: 60em) {
.flex__gutters .flex__col {
padding-left: 1.125rem;
padding-right: 1.125rem;
}
}
/* The `flex-direction` helper classes are:
.flex__dir--row
.flex__dir--row-reverse
.flex__dir--column
.flex__dir--column-reverse
*/
.flex__dir--row {
flex-direction: row;
}
.flex__dir--row-reverse {
flex-direction: row-reverse;
}
.flex__dir--column {
flex-direction: column;
}
.flex__dir--column-reverse {
flex-direction: column-reverse;
}
/* The `flex-wrap` helper classes are:
.flex__wrp--nowrap
.flex__wrp--wrap
.flex__wrp--wrap-reverse
*/
.flex__wrp--nowrap {
flex-wrap: nowrap;
}
.flex__wrp--wrap {
flex-wrap: wrap;
}
.flex__wrp--wrap-reverse {
flex-wrap: wrap-reverse;
}
/* The `justify-content` helper classes are:
.flex__jc--flex-start
.flex__jc--flex-end
.flex__jc--center
.flex__jc--space-between
.flex__jc--space-around
.flex__jc--space-evenly
*/
.flex__jc--flex-start {
justify-content: flex-start;
}
.flex__jc--flex-end {
justify-content: flex-end;
}
.flex__jc--center {
justify-content: center;
}
.flex__jc--space-between {
justify-content: space-between;
}
.flex__jc--space-around {
justify-content: space-around;
}
.flex__jc--space-evenly {
justify-content: space-evenly;
}
/* The `align-items` helper classes are:
.flex__ai--flex-start
.flex__ai--flex-end
.flex__ai--center
.flex__ai--stretch
.flex__ai--baseline
*/
.flex__ai--flex-start {
align-items: flex-start;
}
.flex__ai--flex-end {
align-items: flex-end;
}
.flex__ai--center {
align-items: center;
}
.flex__ai--stretch {
align-items: stretch;
}
.flex__ai--baseline {
align-items: baseline;
}
/* The `align-content` helper classes are:
.flex__ac--normal
.flex__ac--flex-start
.flex__ac--flex-end
.flex__ac--center
.flex__ac--space-between
.flex__ac--space-around
.flex__ac--space-evenly
.flex__ac--stretch
NOTE: These properties ONLY take effect on multi-line flexible containers, where flex-flow is set to either wrap or wrap-reverse
*/
.flex__ac--normal {
align-content: normal;
}
.flex__ac--flex-start {
align-content: flex-start;
}
.flex__ac--flex-end {
align-content: flex-end;
}
.flex__ac--center {
align-content: center;
}
.flex__ac--space-between {
align-content: space-between;
}
.flex__ac--space-around {
align-content: space-around;
}
.flex__ac--space-evenly {
align-content: space-evenly;
}
.flex__ac--stretch {
align-content: stretch;
}
/* The `align-self` helper classes are:
.flex__as--auto
.flex__as--flex-start
.flex__as--flex-end
.flex__as--center
.flex__as--baseline
.flex__as--stretch
*/
.flex__as--auto {
align-self: auto;
}
.flex__as--flex-start {
align-self: flex-start;
}
.flex__as--flex-end {
align-self: flex-end;
}
.flex__as--center {
align-self: center;
}
.flex__as--baseline {
align-self: baseline;
}
.flex__as--stretch {
align-self: stretch;
}
.flex__js--auto {
justify-self: auto;
}
.flex__js--flex-start {
justify-self: flex-start;
}
.flex__js--flex-end {
justify-self: flex-end;
}
.flex__js--center {
justify-self: center;
}
.flex__js--baseline {
justify-self: baseline;
}
.flex__js--stretch {
justify-self: stretch;
}
@media all and (max-width: 47.9375em) {
.flex__stack--sm {
flex-direction: column;
}
}
@media all and (max-width: 47.9375em) {
.flex__stack--sm-reverse {
flex-direction: column-reverse;
}
}
@media all and (max-width: 59.9375em) {
.flex__stack--med {
flex-direction: column;
}
}
@media all and (max-width: 59.9375em) {
.flex__stack--med-reverse {
flex-direction: column-reverse;
}
}
@media all and (max-width: 77.4375em) {
.flex__stack--lg {
flex-direction: column;
}
}
@media all and (max-width: 77.4375em) {
.flex__stack--lg-reverse {
flex-direction: column-reverse;
}
}
.flex__gap--s {
gap: 0.625rem;
}
.flex__gap--m {
gap: 1.25rem;
}
.flex__gap--l {
gap: 2.5rem;
}
.flex__row--s {
row-gap: 0.625rem;
}
.flex__row--m {
row-gap: 1.25rem;
}
.flex__row--l {
row-gap: 2.5rem;
}
.flex__push--left {
margin-right: auto;
}
.flex__push--right {
margin-left: auto;
}
.flex__push--top {
margin-bottom: auto;
}
.flex__push--bottom {
margin-top: auto;
}
.flex__all {
flex: 1 1 auto;
}
.flex__grow {
flex: 1 0 auto;
}
.flex__shrink {
flex: 0 1 auto;
}
.flex__none {
flex: 0 0 auto;
}
@media all and (min-width: 48em) {
.flex__gap--column {
gap: calc(((100% + 2.25rem) / 9) * 1);
}
}
@media all and (min-width: 60em) {
.flex__gap--column {
gap: calc(((100% + 2.25rem) / 12) * 1);
}
}
.flex__gap--gutter {
gap: 2.25rem;
}
.flex__gap--normal {
gap: normal;
}
/*
Tables
*/
/*
Default Tables
Simple, clean default styles. Just mark it up like a normal table.
Undoes table to more of a definition list on smaller viewports.
See: http://codepen.io/aarongustafson/pen/ucJGv
````tables
#
First Name
Last Name
Language
1
Some
One
English
2
Joe
Sixpack
English
3
Stu
Dent
Code
````
*/
table {
width: 100%;
max-width: 100%;
border-spacing: 0;
}
th,
td {
padding: 0.625rem 0.5625rem;
text-align: left;
}
th {
padding-top: 0.625rem;
}
@media all and (max-width: 47.9375em) {
table {
display: block;
width: 100%;
}
tbody,
tr,
th,
td {
border: 0;
display: block;
padding: 0;
text-align: left;
white-space: normal;
}
thead {
display: none;
visibility: hidden;
}
tr {
margin-top: 1.25em;
}
td[data-th]:before {
content: attr(data-th) ":\00A0";
display: inline-block;
font-weight: bold;
}
td:empty {
display: none;
}
}
@media all and (min-width: 48em) {
th,
td {
padding: 0.625rem 1.125rem;
}
}
/*
panel
Used to provide messaging to the user, whether it be direct or through calls to
action. The panel typically indicates a visual separation and implied
sub-grouping of its content.
```panel
This is a feedback panel with no heading.
````
*/
.panel,
[class*="panel"],
[class*="panel__"] {
margin-top: 1.25em;
padding: 1.25rem;
background-color: #f2f1f1;
}
.panel > :first-child,
[class*="panel"] > :first-child,
[class*="panel__"] > :first-child {
margin-top: 0;
}
.panel h1,
[class*="panel"] h1,
[class*="panel__"] h1,
.panel h2,
[class*="panel"] h2,
[class*="panel__"] h2,
.panel h3,
[class*="panel"] h3,
[class*="panel__"] h3,
.panel h4,
[class*="panel"] h4,
[class*="panel__"] h4,
.panel h5,
[class*="panel"] h5,
[class*="panel__"] h5,
.panel h6,
[class*="panel"] h6,
[class*="panel__"] h6 {
color: inherit;
}
[class*="panel--thin"] {
padding: 0.625rem;
}
/*
Alert Panel
This variation of the standard `.panel` is used specifically for delivering
direct messages to the user, whether they be informative, complimentary,
or preventative.
````info-alert-panel
This is an alert panel with no heading.
````
*/
/*
````error-alert-panel
This is an alert panel with no heading.
````
*/
/*
````success-alert-panel
This is an alert panel with no heading.
````
*/
[class*="panel__alert"] {
color: #fff;
}
.panel__alert {
background: #012642;
}
.panel__alert--error {
background: #CC3D3D;
}
.panel__alert--success {
background: #61A03E;
}
/*
WYSIWYG
Though we keep our styles as flexible and modular as possible, there may be
times, as when using a WYSIWYG editor, when some styles need to be baked in.
Here, we specify a `.wysiwyg` class that wraps around that content, and
hardcode some of those styles
[WYSIWYG Content]
*/
.wysiwygBlock {
max-width: 900px;
margin: 0 auto;
}
.wysiwyg h1 {
margin-top: 0;
}
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
margin-top: 1.5em;
}
.wysiwyg h2:first-of-type,
.wysiwyg h3:first-of-type,
.wysiwyg h4:first-of-type,
.wysiwyg h5:first-of-type,
.wysiwyg h6:first-of-type {
margin-top: 0;
}
.wysiwyg img {
border-radius: 16px;
height: auto;
margin-top: 1.25rem;
max-width: -moz-max-content;
max-width: max-content;
}
@media (max-width: 1023px) {
.wysiwyg img {
width: 100%;
}
}
.wysiwyg img.aligncenter {
display: block;
margin: 0 auto;
}
@media (min-width: 1024px) {
.wysiwyg img.alignleft {
float: left;
max-width: 60%;
margin: 0.5em 1.5em 1em 0;
}
.wysiwyg img.alignright {
float: right;
max-width: 60%;
margin: 0.5em 0 1em 1.5em;
}
}
.wysiwyg a {
font-weight: bold;
}
.wysiwyg iframe {
max-width: 100%;
}
/*
Animated Revealing/Hiding Block Modules
When JavaScript is enabled, these blocks are used (most easily in conjunction
with Motif jQuery plugins) to reveal and hide blocks of content, sometimes
accompanied by CSS3 animations.
Reveal Target
`.reveal__target` is a simple class that is accessibly hidden by default.
Add the `.is-revealed` class to show it.
I am hidden.
I am no longer hidden.
*/
.js .reveal__target.is-revealed {
overflow: visible;
}
/*
Animated Revealing/Hiding Block Modules
When JavaScript is enabled, these blocks are used (most easily in conjunction
with Motif jQuery plugins) to reveal and hide blocks of content, sometimes
accompanied by CSS3 animations.
Expand Target
`.expand__target` has a maximum height of `0` by default, and once it
receives the `.is-expanded` class, animates in height to its maximum value.
This is the cheap CSS way of expanding animation, as in collapsible
accordions. More precise timing most likely requires JS enhancement.
I am hidden from view.
I have expanded into view.
*/
.js .expand__target {
max-height: 0;
overflow: hidden;
}
.js .expand__target.is-expanded {
max-height: 999px;
}
.js .expand__target.is-expanded,
.js .expand__target.was-expanded {
transition: all 0.65s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/*
Animated Revealing/Hiding Block Modules
When JavaScript is enabled, these blocks are used (most easily in conjunction
with Motif jQuery plugins) to reveal and hide blocks of content, sometimes
accompanied by CSS3 animations.
Fade Target
`.fade__target` is the same as `.expand__target` (in that it grows in
height), but it adds opacity fading to the mix.
I am hidden.
I have faded and expanded into view.
*/
.js .fade__target {
opacity: 0;
max-height: 0;
overflow: hidden;
}
.js .fade__target.is-faded {
opacity: 1;
max-height: 999px;
}
.js .fade__target.is-faded,
.js .fade__target.was-faded {
transition: all 0.65s cubic-bezier(0.645, 0.045, 0.355, 1);
}
/*
Main Nav Module
A minor enhancement to the Reveal or Expand Target modules if added to the
main navigation bar. This snippet, on Medium screens and larger, makes sure
the expandable Nav (on smaller screens) is no longer hidden, and that the
Menu Title (be it "Main Menu", the hamburger icon, etc.) is hidden from view.
*/
@media all and (min-width: 48em) {
.js .menu__list {
max-height: 999px;
}
}
@media all and (min-width: 48em) {
.menu__title {
display: none;
}
}
/*
Tabs
The tabs module (and accompanying plugin) creates a very basic widget that
allows embedding and basic styling.
````tabs
First Tab
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Second Tab
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
````
*/
.js .tabs > nav + *,
.js .tabs__section {
position: relative;
overflow: hidden;
}
.js .tabs > nav + * > *,
.js .tabs .tab {
display: none;
}
.js .tabs > nav + * > *.is-current,
.js .tabs .tab.is-current {
display: block;
}
.carousel {
position: relative;
overflow: hidden;
height: 100%;
}
.carousel__slides {
--slidesOffset: 0px;
height: 100%;
list-style: none outside none;
margin: 0;
padding: 0;
display: flex;
will-change: transform;
transform: translate3d(var(--slidesOffset), 0, 0);
transition: transform 0.35s ease-out;
}
.carousel__slides.is-dragging {
transition-duration: 0.05s;
transition-easing: linear;
}
.carousel__slide {
display: flex;
flex-direction: column;
flex: 0 0 auto;
width: 100%;
top: 0;
left: 0;
}
/**
* Shared
*/
.hero {
position: relative;
overflow: hidden;
background-color: #012642;
}
.hero:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(to top, rgba(13, 16, 29, 0.55) 0%, rgba(13, 16, 29, 0.55) 36%, rgba(255, 255, 255, 0) 86%, rgba(0, 0, 0, 0) 100%);
z-index: 1;
}
@media all and (min-width: 48em) {
.hero:before {
width: 100vw;
height: 100%;
right: auto;
background: linear-gradient(to top, rgba(13, 16, 29, 0.55) 0%, rgba(13, 16, 29, 0.55) 36%, rgba(255, 255, 255, 0) 86%, rgba(0, 0, 0, 0) 100%);
}
}
.hero__flex {
display: flex;
flex-direction: column;
justify-content: flex-end;
z-index: 2;
position: relative;
}
.has-image .hero__flex {
padding: 100px 0 40px;
min-height: 300px;
}
@media all and (min-width: 48em) {
.hero__flex {
width: 70%;
}
.has-image .hero__flex {
padding: 72px 0;
min-height: 600px;
}
}
.hero__ctas {
display: flex;
align-items: baseline;
}
.hero__backgroundImage {
margin-top: 0;
position: absolute;
inset: 0;
}
.hero__backgroundImage-caption {
display: none;
position: absolute;
bottom: 10px;
left: 20px;
right: unset;
font-size: 11px;
line-height: 14px;
color: #fff;
max-width: 300px;
z-index: 3;
}
@media all and (min-width: 48em) {
.hero__backgroundImage-caption {
display: block;
bottom: 40px;
left: unset;
right: 40px;
font-size: 12px;
}
}
.carousel__block {
padding-top: 96px;
padding-bottom: 72px;
}
.carousel__figure img {
border-radius: 24px;
}
.carousel__nav-wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
}
.carousel__progress {
display: flex;
justify-content: flex-start;
margin-top: 0.390625rem;
}
.carousel__progress-dot {
background: none;
position: relative;
padding: 0.625rem 24px;
margin-right: 8px;
}
.carousel__progress-dot:before {
content: '';
position: absolute;
width: 48px;
height: 3px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #9797A0;
}
.is-current .carousel__progress-dot:before {
background-color: #BF581B;
}
.carousel__progress-dot:hover,
.carousel__progress-dot:focus {
background-color: transparent;
}
.carousel__progress-dot:focus-visible {
outline: 1px solid #013E64;
}
.carousel__description {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.58333333;
max-width: 430px;
}
.cta {
display: flex;
flex-direction: column;
}
.cta[data-orientation="left"] {
flex-direction: column-reverse;
}
@media all and (min-width: 48em) {
.cta {
flex-direction: row;
}
.cta[data-orientation="left"] {
flex-direction: row;
}
.cta[data-orientation="right"] {
flex-direction: row-reverse;
}
}
.cta[data-orientation="center"]:not(.cta__no-image) {
background-color: rgba(10, 12, 55, 0.6);
}
.cta__textLockup {
padding-left: 4%;
padding-right: 1.125rem;
padding-top: 80px;
padding-bottom: 80px;
width: 100%;
max-width: 870px;
text-align: center;
color: #fff;
margin: 0 auto;
}
@media all and (min-width: 48em) {
.cta__textLockup {
width: 50%;
padding-top: 185px;
padding-bottom: 96px;
text-align: left;
}
[data-orientation="center"] .cta__textLockup {
text-align: center;
}
}
[data-orientation="right"] .cta__textLockup {
padding-right: 4%;
padding-left: 1.125rem;
}
[data-orientation="center"] .cta__textLockup {
padding-right: 4%;
padding-left: 4%;
width: 100%;
}
.cta__heading {
line-height: 60px;
}
@media all and (min-width: 48em) {
.cta__heading {
line-height: 70px;
}
}
.cta__links {
align-items: center;
flex-direction: column;
}
[data-orientation="center"] .cta__links {
justify-content: center;
align-items: center;
}
@media all and (min-width: 48em) {
.cta__links {
flex-direction: row;
align-items: baseline;
}
[data-orientation="center"] .cta__links {
align-items: baseline;
}
}
.cta__links--row {
margin-left: 1.25rem !important;
}
@media all and (max-width: 59.9375em) {
.cta__links--row {
margin-top: 0.625rem !important;
margin-left: 0 !important;
}
}
.cta__figure {
position: relative;
width: 100%;
margin: 0;
}
.cta__figure:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 30%;
z-index: 1;
height: 100%;
top: -1px;
bottom: auto;
left: 0;
right: 0;
width: 100%;
height: 30%;
background: linear-gradient(to bottom, #012642 10%, rgba(1, 38, 66, 0.006) 90%, rgba(1, 38, 66, 0));
}
[data-orientation="left"] .cta__figure:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 30%;
z-index: 1;
height: 100%;
top: auto;
bottom: -1px;
left: 0;
right: 0;
width: 100%;
height: 30%;
background: linear-gradient(to top, #012642 10%, rgba(1, 38, 66, 0.006) 90%, rgba(1, 38, 66, 0));
}
@media all and (min-width: 48em) {
[data-orientation="left"] .cta__figure:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 20%;
z-index: 1;
height: 100%;
left: -1px;
background: linear-gradient(to right, #012642 10%, rgba(1, 38, 66, 0.006) 90%, rgba(1, 38, 66, 0));
}
}
@media all and (min-width: 48em) {
[data-orientation="right"] .cta__figure:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 20%;
z-index: 1;
height: 100%;
right: -1px;
left: unset;
background: linear-gradient(to left, #012642 10%, rgba(1, 38, 66, 0.006) 90%, rgba(1, 38, 66, 0));
}
}
[data-orientation="center"] .cta__figure {
width: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}
[data-orientation="center"] .cta__figure:before {
content: none;
}
@media all and (min-width: 48em) {
.cta__figure {
width: 50%;
padding-top: 0;
}
}
.cta__figure img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center center;
object-position: center center;
position: absolute;
top: 0;
left: 0;
}
.no-objectfit .cta__figure img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.accordion {
background-color: var(--background-color);
}
.accordion__container {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding-top: 116px;
padding-bottom: 132px;
}
.accordion__subheading {
text-align: center;
}
.accordion__heading {
text-align: center;
margin-bottom: 2.5rem;
}
.accordion__group {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid #fff;
border-bottom: 1px solid #212121;
}
[data-background="white"] .accordion__group {
border-bottom: 1px solid #212121;
}
[data-background="blue"] .accordion__group {
border-bottom: 1px solid #212121;
}
@media all and (min-width: 60em) {
.accordion__group {
padding-top: 12px;
padding-bottom: 12px;
}
}
.accordion__link {
position: absolute;
}
.accordion__link:hover .accordion__button svg,
.accordion__link:focus .accordion__button svg {
color: #fff;
}
.accordion__icon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
padding-left: 10px;
transition: transform 0.35s ease-in-out;
}
.is-expanded .accordion__icon {
transform: rotate(180deg);
}
.accordion__button {
transition: all 0.5s ease-in-out;
padding: 20px;
}
.accordion__button:hover,
.accordion__button:focus {
background-color: transparent;
}
.accordion__question {
width: 100%;
align-items: center;
position: relative;
cursor: pointer;
padding-left: 20px;
padding-right: 50px;
text-align: left;
color: #013E64;
}
.accordion__question:after {
content: '';
width: 30px;
height: 100%;
}
.accordion__question.is-expanded {
font-weight: 900;
}
.accordion__question.is-expanded .accordion__icon {
transform: rotate(180deg);
}
.accordion__answer {
max-width: 706px;
padding-left: 20px;
padding-right: 1.125rem;
}
@media all and (min-width: 48em) {
.accordion__answer {
padding-right: 2.25rem;
}
}
.accordion__answer:not(.is-expanded) {
display: none;
}
.accordion__answer .wysiwyg p:first-of-type {
margin-top: 0;
}
.header__container {
background: #012642;
color: #fff;
padding: 4rem 0;
}
@media all and (min-width: 60em) {
.header__container {
padding: 6rem 0;
}
}
.header[data-alignment=center] .header__textLockup {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
@media all and (max-width: 59.9375em) {
.header[data-alignment=left] .header__textLockup {
margin-top: 1.25rem;
}
}
.header__row .header__col {
padding: 0;
}
@media all and (min-width: 60em) {
.header[data-alignment=left] .header__col-text {
padding-right: 1.75rem;
}
.header[data-alignment=right] .header__col-text {
padding-left: 1.75rem;
}
}
.header__heading {
color: #fff;
}
.header__subheading {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.5;
color: #A5DFF0;
}
.header__copy {
margin-top: 1.5rem;
}
@media all and (min-width: 48em) {
.header__copy {
margin-top: 2rem;
}
}
.header__cta-wrapper {
display: flex;
align-items: flex-start;
margin-top: 2rem;
margin-bottom: 1rem;
}
@media all and (max-width: 59.9375em) {
.header__cta-wrapper {
flex-direction: column;
}
}
@media all and (min-width: 60em) {
.header__cta-wrapper {
margin-top: 3rem;
align-items: center;
}
}
@media all and (max-width: 59.9375em) {
.header__secondaryCTA {
margin-top: 1.25rem;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
}
}
@media all and (min-width: 60em) {
.header__secondaryCTA {
margin-left: 1.125rem;
}
}
@media all and (max-width: 59.9375em) {
.header__col-figure {
width: 100%;
}
}
@media all and (min-width: 60em) {
.header[data-alignment=left] .header__col-figure {
padding-left: 1.75rem;
}
.header[data-alignment=right] .header__col-figure {
padding-right: 1.75rem;
}
}
.header__figure {
border-radius: 16px;
/* order matters below */
}
.header__figure:before {
padding-top: 60%;
}
@media all and (min-width: 48em) {
.header__figure:before {
padding-top: 42.85714286%;
}
}
@media all and (min-width: 60em) {
.header__figure:before {
padding-top: 75%;
}
}
.header__figure img {
border-radius: 16px;
}
.header[data-alignment=center] .header__figure {
margin-top: 2.5rem;
}
@media all and (max-width: 59.9375em) {
.header__figure {
margin-top: 1.25rem;
}
}
.header[data-alignment=left] .header__figure {
margin-top: 0;
}
.header__primaryCTA {
color: #fff;
margin-left: -2px;
}
@media all and (min-width: 48em) {
.header__primaryCTA {
margin-left: 0;
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
padding: 17px 42px;
}
}
.header__caption {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.16666667;
opacity: 0.5;
}
[data-alignment="left"] .header__caption {
text-align: right;
}
.simpleHeader__wrapper {
position: relative;
padding: 64px 0 48px 0;
overflow: hidden;
}
@media all and (min-width: 48em) {
.simpleHeader__wrapper {
padding: 120px 0 72px 0;
}
}
.simpleHeader__bg-icon {
position: absolute;
right: 0;
z-index: 0;
}
.simpleHeader__bg-icon--building {
right: 50px;
bottom: -10px;
font-size: 190px;
}
@media all and (min-width: 48em) {
.simpleHeader__bg-icon--building {
font-size: 290px;
bottom: -60px;
}
}
@media all and (min-width: 60em) {
.simpleHeader__bg-icon--building {
font-size: 390px;
bottom: -110px;
}
}
.simpleHeader__bg-icon--pattern {
bottom: -50px;
font-size: 230px;
height: auto;
}
@media all and (min-width: 48em) {
.simpleHeader__bg-icon--pattern {
bottom: -30px;
font-size: 320px;
}
}
@media all and (min-width: 60em) {
.simpleHeader__bg-icon--pattern {
font-size: 448px;
}
}
.simpleHeader__content {
position: relative;
z-index: 1;
}
@media all and (min-width: 60em) {
.simpleHeader__content {
width: 44%;
}
}
.logoGrid {
background-color: var(--background-color);
}
.logoGrid_flex {
flex-wrap: wrap;
}
.logoGrid__ticker-container {
overflow: hidden;
height: 145px;
width: 100%;
}
@media all and (min-width: 48em) {
.logoGrid__ticker-container {
width: 75%;
}
}
.logoGrid__ticker-tape {
display: grid;
grid-template-columns: repeat(auto-fill, 145px);
grid-auto-flow: column;
grid-gap: 50px;
width: -moz-fit-content;
width: fit-content;
}
.logoGrid__ticker-tape.animate {
animation: ticker-kf 40s linear infinite;
}
.logoGrid__col {
width: 145px;
}
.logoGrid__image {
width: 145px;
}
@keyframes ticker-kf {
to {
transform: translate3d(calc(-50% - 25px), 0, 0);
}
}
.quickLinks {
padding-top: 40px;
padding-bottom: 40px;
}
@media all and (min-width: 48em) {
.quickLinks {
padding-top: 96px;
padding-bottom: 96px;
}
}
.quickLinks__row {
display: grid;
grid-template-columns: 1fr;
row-gap: 2.5rem;
}
@media all and (min-width: 48em) {
.quickLinks__row {
grid-template-columns: repeat(2, 1fr);
}
}
@media all and (min-width: 60em) {
.quickLinks__row {
grid-template-columns: repeat(4, 1fr);
}
.quickLinks__row[data-ql-count="3"] {
grid-template-columns: repeat(3, 1fr);
}
.quickLinks__row[data-ql-count="2"] {
grid-template-columns: repeat(2, 1fr);
}
}
.quickLinks__row[data-ql-count="1"] {
grid-template-columns: 1fr;
}
.quickLinks__col {
position: relative;
padding-right: 2.5rem;
padding-left: 2.5rem;
padding-bottom: 1.25rem;
}
.quickLinks__col:not(:last-of-type):after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: unset;
background-color: #012642;
width: 2px;
height: 94px;
}
@media all and (min-width: 48em) {
.quickLinks__col:not(:last-of-type):after {
right: 0;
left: unset;
}
}
@media all and (max-width: 59.9375em) {
.quickLinks__col:last-of-type:after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
left: unset;
background-color: #012642;
width: 2px;
height: 94px;
}
}
@media all and (max-width: 47.9375em) {
.quickLinks__col:last-of-type:after {
left: 0;
right: unset;
}
}
@media all and (min-width: 48em) {
.quickLinks__col {
padding-bottom: 0;
}
}
.quickLinks__headline-wrap {
max-width: 636px;
}
.quote__wrap {
padding-top: 80px;
padding-bottom: 80px;
}
@media all and (min-width: 48em) {
.quote__wrap {
padding-top: 104px;
padding-bottom: 104px;
}
}
.quote__col-1 {
position: relative;
padding-left: 40px;
border-left: 3px dotted var(--quote-theme-color);
}
.quote__flower {
position: absolute;
top: 0;
left: -13px;
font-size: 23px;
background-color: #fff;
outline: 5px solid #fff;
}
.quote__text {
font-family: "Graphik Web", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 300;
font-style: normal;
font-size: 20px;
font-size: 1.25rem;
line-height: 1.5;
padding: 0;
margin: 0;
}
@media all and (min-width: 48em) {
.quote__text {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.35714286;
}
}
.quote__figure {
display: none;
}
@media all and (min-width: 48em) {
.quote__figure {
display: block;
}
}
.quote__caption {
display: none;
}
@media all and (min-width: 48em) {
.quote__caption {
display: block;
}
}
.quote__footer-figure {
position: relative;
width: 100%;
height: 88px;
margin-top: 0;
}
@media all and (min-width: 48em) {
.quote__footer-figure {
height: 136px;
}
}
.textMedia {
background-color: var(--background-color);
color: var(--body-color);
padding: 96px 0;
}
.textMedia__figure {
width: 100%;
margin-bottom: 2.5rem;
}
.textMedia__figure.has-caption {
margin-bottom: 100px;
}
@media all and (min-width: 48em) {
.textMedia__figure {
width: 50%;
margin-bottom: 0;
}
}
.textMedia__figure img {
border-radius: 16px;
}
.textMedia__caption {
position: absolute;
max-width: 80%;
opacity: 0.6;
}
.heroEvent {
background-color: var(--show-theme-color);
padding-top: 56px;
}
.heroEvent__textLockup {
color: var(--show-text-color);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.25rem 0;
padding-top: 56px;
}
.heroEvent__textLockup .heroEvent__subheading,
.heroEvent__textLockup .heroEvent__heading,
.heroEvent__textLockup .heroEvent__tagline,
.heroEvent__textLockup .heroEvent__copy {
color: var(--show-text-color);
}
.headerEvent__figure img {
border-radius: 24px 24px 0 0;
}
.heroEvent_inline-items {
display: flex;
align-items: center;
}
.heroEvent__divider {
background-color: var(--show-text-color);
width: 1px;
height: 18px;
}
.scrollQuote {
padding-top: 42px;
padding-bottom: 42px;
}
@media all and (min-width: 48em) {
.scrollQuote {
padding-top: 42px;
padding-bottom: 96px;
}
}
.scrollQuote__container {
overflow: hidden;
}
.scrollQuote__text {
/* animation properties */
transform: translateX(100%);
animation: scroll-quote 15s linear infinite;
font-size: 72px;
font-size: 4.5rem;
line-height: 1.13888889;
line-height: 82px;
color: var(--show-theme-color);
font-family: "Graphik Web", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
font-style: normal;
width: -moz-max-content;
width: max-content;
text-wrap: nowrap;
}
.scrollQuote__attribute {
display: flex;
justify-content: flex-end;
font-family: "Graphik Web", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 14px;
font-size: 0.875rem;
line-height: 3.14285714;
}
.scrollQuote__attribute:before {
content: '';
position: absolute;
right: 100%;
top: 50%;
height: 2px;
width: 94px;
background-color: #012642;
}
/* for Firefox */
/* for Chrome */
@keyframes scroll-quote {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
.mission {
position: relative;
background-color: #012642;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
}
@media all and (min-width: 48em) {
.mission {
padding-top: 96px;
padding-bottom: 96px;
}
}
.mission__text {
position: relative;
font-size: 20px;
font-size: 1.25rem;
line-height: 1.6;
font-family: "Graphik Web", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
font-style: normal;
color: #fff;
text-align: center;
letter-spacing: 0.88px;
}
@media all and (min-width: 48em) {
.mission__text {
font-size: 44px;
font-size: 2.75rem;
line-height: 1.45454545;
}
}
.cardSlider {
background-image: linear-gradient(180deg, #013E64 0%, #013E64 50%, #012642 50%, #012642 100%);
}
@media all and (min-width: 48em) {
.cardSlider {
background-image: linear-gradient(90deg, #013E64 0%, #013E64 50%, #012642 50%, #012642 100%);
}
}
.cardSlider__row {
display: flex;
flex-direction: column;
padding-top: 40px;
padding-bottom: 40px;
}
@media all and (min-width: 48em) {
.cardSlider__row {
flex-direction: row;
padding-top: 96px;
padding-bottom: 96px;
}
}
.cardSlider__col-1 {
width: 100%;
}
@media all and (min-width: 48em) {
.cardSlider__col-1 {
width: 50%;
}
}
.cardSlider__col-2 {
width: 100%;
padding: 1.25rem 1.125rem;
}
@media all and (min-width: 48em) {
.cardSlider__col-2 {
width: 50%;
padding: 60px;
}
}
.cardSlider__slide-window {
align-items: center;
}
.cardSlider__slide {
width: 332px;
}
.cardSlider__subtitle {
font-family: "le-monde-livre-std", "Times New Roman", Times, Georgia, serif, "Times New Roman", Times, Georgia, serif;
font-weight: 600;
font-style: italic;
color: var(--subheading-color);
color: #A5DFF0;
}
.social {
padding-top: 40px;
padding-bottom: 40px;
}
@media all and (min-width: 48em) {
.social {
padding-top: 96px;
padding-bottom: 96px;
}
}
.social__subtitle {
font-family: "le-monde-livre-std", "Times New Roman", Times, Georgia, serif, "Times New Roman", Times, Georgia, serif;
font-weight: 600;
font-style: italic;
color: var(--subheading-color);
color: #4399B3;
}
.gravityForm__form {
max-width: 900px;
margin: 0 auto;
}
.gform_wrapper {
background-color: #fff;
}
.gform_title {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.25;
font-family: "Graphik Web", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 400;
font-style: normal;
font-weight: 700;
}
@media all and (min-width: 48em) {
.gform_title {
font-size: 28px;
font-size: 1.75rem;
line-height: 1;
}
}
.gform_heading {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.27777778;
font-family: "Graphik Web", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 400;
font-style: normal;
font-weight: 700;
}
.gsection_title {
font-family: "le-monde-livre-std", "Times New Roman", Times, Georgia, serif, "Times New Roman", Times, Georgia, serif;
font-weight: 600;
font-style: italic;
color: var(--subheading-color);
font-size: 24px;
font-size: 1.5rem;
line-height: 1.58333333;
}
.gform_submission_error {
background: #CC3D3D;
padding: 0.625rem;
color: #CECED2;
}
.gform_fields,
.gfield_checkbox,
.gfield_radio {
margin: 0;
padding: 0;
list-style: none outside none;
}
.gfield,
.ginput_complex span {
display: block;
position: relative;
}
.gfield.gfield--type-section,
.ginput_complex span.gfield--type-section {
margin-top: 2.5rem;
}
.gfield.field_description_above.gfield--has-description,
.ginput_complex span.field_description_above.gfield--has-description {
display: flex;
flex-direction: column;
}
.gfield .gfield_label,
.ginput_complex span .gfield_label,
.gfield .gform-field-label,
.ginput_complex span .gform-field-label {
font-size: 12px;
font-size: 0.75rem;
line-height: 1;
margin-bottom: 8px;
}
.gfield_description,
.ginput_complex span_description {
font-size: 10px;
font-size: 0.625rem;
line-height: 1.5;
margin-top: 8px;
}
.gfield .validation_message,
.ginput_complex span .validation_message {
position: absolute;
bottom: 0;
left: 14px;
transform: translateY(50%);
background: var(--background-color);
padding: 0 2px;
}
.gfield input:is([type="checkbox"], [type="radio"]),
.ginput_complex span input:is([type="checkbox"], [type="radio"]) {
width: auto;
}
.gfield input:is([type="checkbox"], [type="radio"]) + input[type="text"],
.ginput_complex span input:is([type="checkbox"], [type="radio"]) + input[type="text"] {
padding: 8px;
width: auto;
}
:is(input, textarea, select),
input:not([type="submit"]),
.gfield--type-checkbox,
.gfield--type-radio,
.gfield--input-type-checkbox,
.gfield--input-type-radio {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.41666667;
padding: 16px;
border-radius: 8px;
border: 1px solid #012642;
width: 100%;
background-color: transparent;
}
:is(input, textarea, select).gfield_error,
input:not([type="submit"]).gfield_error,
.gfield--type-checkbox.gfield_error,
.gfield--type-radio.gfield_error,
.gfield--input-type-checkbox.gfield_error,
.gfield--input-type-radio.gfield_error,
.gfield_error :is(input, textarea, select),
.gfield_error input:not([type="submit"]),
.gfield_error .gfield--type-checkbox,
.gfield_error .gfield--type-radio,
.gfield_error .gfield--input-type-checkbox,
.gfield_error .gfield--input-type-radio {
border-color: #CC3D3D;
}
.gfield_error :is(.gfield_label, .gform-field-label, .gfield_description) {
color: #CC3D3D;
}
.gfield_error + .gfield,
.gfield_error + .gfield[data-conditional-logic="hidden"] + .gfield {
margin-top: 2.5rem;
}
.gfield:not(.gfield--type-name):not(.gfield--input-type-checkbox):not(.gfield--input-type-radio):not(.gfield--type-checkbox):not(.gfield--type-radio):not(.gfield--type-fileupload):not(.gfield--type-choice):not(.gfield--type-captcha) :is(.gfield_label, .gform-field-label):not(.gfield_label_before_complex),
.ginput_complex span :is(.gfield_label, .gform-field-label):not(.gfield_label_before_complex) {
font-size: 12px;
font-size: 0.75rem;
line-height: 1;
background: var(--background-color);
padding: 0 2px;
}
.gfield:not(.gfield--type-name):not(.gfield--input-type-checkbox):not(.gfield--input-type-radio):not(.gfield--type-checkbox):not(.gfield--type-radio):not(.gfield--type-fileupload):not(.gfield--type-choice):not(.gfield--type-captcha):focus-within select,
.ginput_complex span:focus-within select {
color: var(--body-color);
}
.ginput_container_consent {
display: flex;
gap: 10px;
}
.gfield_label_before_complex,
.gfield_label_after_complex {
font-weight: 800;
}
.gform_wrapper.gravity-theme .gform_fields {
grid-row-gap: 35px;
}
.gform_wrapper.gravity-theme .ginput_container.ginput_container_date {
display: block;
}
.ginput_complex {
margin-top: 0.625rem;
}
@media all and (min-width: 48em) {
.ginput_complex {
display: flex;
gap: 8px;
}
.ginput_complex span {
flex: 0 0 auto;
width: 50%;
}
.ginput_complex span:not(:first-of-type) {
margin-top: 0;
}
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: inherit;
transition: color 0ms linear;
transition-delay: 50ms;
background-image: var(--select-arrow);
background-repeat: no-repeat;
background-position-y: 50%;
background-position-x: calc(100% - 16px);
background-size: 12px;
}
:is(.ginput_container_checkbox, .ginput_container_radio) {
margin-top: 0.625rem;
}
.gchoice {
display: flex;
gap: 0.5625rem;
padding: 5px 0px;
}
.gfield_description {
color: #012642;
}
[data-theme="dark"] .gfield .gfield_description {
color: #CECED2;
}
input.gform_button[type="submit"] {
margin-top: 2.5rem;
padding-right: 32px;
}
.ginput_container_address {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
-moz-column-gap: 1.9608%;
column-gap: 1.9608%;
margin-left: 0 !important;
margin-right: 0 !important;
}
@media (max-width: 767px) {
.ginput_container_address {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
.ginput_container_address span {
width: 100% !important;
margin-bottom: 8px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.ginput_container_address span.ginput_full {
grid-column: 1 / span 2;
}
.ginput_container_address span.ginput_left {
grid-column: 1 / span 1;
}
.ginput_container_address span.ginput_right {
grid-column: 2 / span 1;
}
@media (max-width: 767px) {
.ginput_container_address span.ginput_right {
grid-column-start: 1;
}
}
@media (max-width: 641px) {
.ginput_container_address select {
line-height: 2;
min-height: 32px;
}
}
/**
* NEW FONT UPDATES 07/24/2024
*/
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields {
grid-row-gap: 32px;
}
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields div.gfield.gfield--type-name .ginput_complex.ginput_container .gform-field-label,
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields fieldset.gfield.gfield--type-name .ginput_complex.ginput_container .gform-field-label {
font-size: 12px;
font-weight: 700;
padding-top: 0;
}
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields div.gfield.gfield--type-email .ginput_complex.ginput_container .gform-field-label,
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields fieldset.gfield.gfield--type-email .ginput_complex.ginput_container .gform-field-label {
font-size: 12px;
font-weight: 700;
padding-top: 0;
}
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields div.gfield.gfield--type-phone label.gfield_label.gform-field-label,
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields fieldset.gfield.gfield--type-phone label.gfield_label.gform-field-label {
font-size: 16px;
}
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields div.gfield.gfield--type-select label.gfield_label.gform-field-label,
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields fieldset.gfield.gfield--type-select label.gfield_label.gform-field-label {
font-size: 16px;
}
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields div.gfield.gfield--type-text label.gfield_label.gform-field-label,
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields fieldset.gfield.gfield--type-text label.gfield_label.gform-field-label {
font-size: 16px;
}
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields div.gfield.gfield--type-number label.gfield_label.gform-field-label,
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields fieldset.gfield.gfield--type-number label.gfield_label.gform-field-label {
font-size: 16px;
}
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields div.gfield.gfield--type-address .ginput_complex.ginput_container .gform-field-label,
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields fieldset.gfield.gfield--type-address .ginput_complex.ginput_container .gform-field-label {
font-size: 12px;
font-weight: 700;
}
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields div.gfield.gfield--type-product label.gfield_label.gform-field-label,
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields fieldset.gfield.gfield--type-product label.gfield_label.gform-field-label {
font-size: 16px;
}
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields div.gfield.gfield--type-product.gfield--input-type-singleproduct label.gfield_label.gform-field-label span.gform-field-label.gfield_label_product,
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields fieldset.gfield.gfield--type-product.gfield--input-type-singleproduct label.gfield_label.gform-field-label span.gform-field-label.gfield_label_product {
font-size: 16px;
}
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields div.gfield.gfield--type-total label.gfield_label.gform-field-label,
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields fieldset.gfield.gfield--type-total label.gfield_label.gform-field-label {
font-size: 16px;
}
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields div.gfield.gfield--type-textarea label.gfield_label.gform-field-label,
[data-template="gravityForm"] .gravityForm .gravityForm__form .gform_wrapper form .gform-body.gform_body .gform_fields fieldset.gfield.gfield--type-textarea label.gfield_label.gform-field-label {
font-size: 16px;
}
.cardGrid {
background-color: var(--background-color);
padding-bottom: 96px;
padding-top: 96px;
}
.cardGrid__block-heading {
position: relative;
}
.cardGrid__block-heading:after {
content: '';
position: absolute;
top: 100%;
left: 0;
height: 2px;
width: 107px;
background-color: #012642;
}
.cardGrid__col {
min-width: 270px;
}
@media screen and (max-width: 630px) {
.cardGrid__col {
width: 100%;
}
}
.cardGrid__col-1 {
max-width: 380px;
}
.cardGrid__col-2 {
max-width: 500px;
}
@media all and (max-width: 47.9375em) {
.showCardGrid__wrapper {
margin: 0;
width: 100%;
}
}
.showCardGrid__grid {
gap: 0;
}
@media all and (min-width: 48em) {
.showCardGrid__grid {
gap: 2.5rem;
}
}
@media all and (max-width: 47.9375em) {
.showCardGrid__grid .cardShow {
border-radius: 0;
}
}
@media all and (max-width: 47.9375em) {
.showCardGrid__grid .cardShow__first .cardShow {
border-radius: 0;
}
}
@media all and (max-width: 47.9375em) {
.showCardGrid__grid .cardShow__front {
grid-template-rows: auto;
}
}
@media all and (max-width: 47.9375em) {
.showCardGrid__grid .showCardGrid__col {
width: 100%;
}
}
.showCardGrid__scroll {
overflow: scroll;
scrollbar-width: thin;
scroll-behavior: smooth;
}
@media all and (max-width: 47.9375em) {
.showCardGrid__scroll {
padding-left: 20px;
padding-right: 20px;
}
}
.showCardGrid__scroll::-webkit-scrollbar {
width: 3px !important;
}
.showCardGrid__scroll::-webkit-scrollbar-thumb {
background-color: #8daac0;
border-radius: 7px;
border: 5px solid white;
}
@media all and (max-width: 47.9375em) {
.showCardGrid__controls {
padding-left: 20px;
padding-right: 20px;
}
}
.showCardGrid__col {
width: 332px;
}
.showCardGrid__past-show {
position: relative;
}
.showCardGrid__past-show::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 24px;
z-index: 1;
pointer-events: none;
}
@media all and (max-width: 47.9375em) {
.showCardGrid__past-show::after {
border-radius: 0;
}
}
.showCardGrid__past-show::before {
font-family: "≈", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.625rem;
line-height: 1.2;
content: 'PAST SHOW';
position: absolute;
top: 15px;
left: 15px;
padding: 7px 9px 5px;
border-radius: 13px;
background-color: #66666E;
border-radius: 24px;
color: #fff;
z-index: 2;
font-weight: 700;
letter-spacing: 0.5px;
font-size: 10px;
}
@media all and (min-width: 48em) {
.showCardGrid__past-show::before {
top: 20px;
left: 20px;
}
}
.card {
-o-box-shadow: 0px 15px 30px #00000029;
box-shadow: 0px 15px 30px #00000029;
overflow: hidden;
border-radius: 16px;
height: 100%;
}
.card.cardBasic {
background-color: #fff;
width: 337px;
}
.card.cardInfo {
position: relative;
box-shadow: none;
overflow: visible;
max-width: 270px;
}
@media screen and (max-width: 630px) {
.card.cardInfo {
max-width: 100%;
}
}
.card.cardInfo .card__flip {
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
}
.card.cardInfo .card__back {
-o-box-shadow: 0px 15px 30px #00000029;
box-shadow: 0px 15px 30px #00000029;
height: 100%;
border-radius: 16px;
transform: rotateY(180deg);
backface-visibility: hidden;
background-color: #fff;
}
.card.cardInfo .card__front {
-o-box-shadow: 0px 15px 30px #00000029;
box-shadow: 0px 15px 30px #00000029;
backface-visibility: hidden;
}
.card.cardInfo:hover .card__flip {
transform: rotateY(180deg);
transition: transform 0.5s;
}
.card__figure-img {
border-radius: 16px;
}
.card__front {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.card__front-figure {
position: relative;
height: 100%;
margin-top: 0;
}
.card__front-figure-img {
border-radius: 16px;
}
.card__front-figure:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--card-front-background-color);
opacity: 0.8;
border-radius: 16px;
}
.card__front-headline {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
text-align: center;
text-transform: initial;
}
.cardList {
border-bottom: 1px solid #212121;
}
.cardList.is-hidden-event {
display: none;
}
.cardList__col-1 {
display: none;
width: 224px;
}
@media all and (min-width: 48em) {
.cardList__col-1 {
display: block;
}
}
.cardList__figure {
max-width: 224px;
width: 224px;
}
.cardList__figure img {
border-radius: 16px;
}
.cardList__heading {
text-transform: uppercase;
}
.cardList__load-more {
margin: 0 auto;
}
.cardShow {
position: relative;
background-color: var(--show-theme-color);
min-width: 315px;
text-align: center;
border-radius: 24px;
}
.cardShow__link {
text-decoration: none;
height: 100%;
}
.cardShow__flip {
height: 100%;
}
.cardShow__front {
display: grid;
grid-template-rows: 262px 1fr;
height: 100%;
}
.cardShow__back {
height: 100%;
border-radius: 24px;
background-color: #fff;
color: var(--show-theme-color);
}
.cardShow__figure {
display: none;
height: 262px;
margin-top: 0;
border-radius: 24px;
}
@media all and (min-width: 48em) {
.cardShow__figure {
display: block;
}
}
.cardShow__figure img {
border-radius: 24px;
}
.showCardGrid__scroll .cardShow__figure {
display: block;
}
.showCardGrid__grid .cardShow__first .cardShow__figure {
display: block;
}
@media all and (max-width: 47.9375em) {
.showCardGrid__grid .cardShow__first .cardShow__figure {
border-radius: 0px 24px 0px 0px;
}
}
@media all and (max-width: 47.9375em) {
.showCardGrid__grid .cardShow__first .cardShow__figure img {
border-radius: 0px 24px 0px 0px;
}
}
.cardShow__content {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 32px;
text-decoration: none;
}
.showCardGrid__past-show .cardShow__content {
padding-top: 50px;
}
.cardShow__sponsor {
color: var(--show-text-color);
}
.cardShow__headline {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.08333333;
color: var(--show-text-color);
letter-spacing: 0.72px;
text-transform: uppercase;
}
.cardShow__tagline {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.44444444;
color: var(--show-text-color);
letter-spacing: 0.8px;
text-transform: uppercase;
margin-top: 0;
}
.cardShow__subtitle {
font-family: "≈", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.85714286;
color: var(--show-text-color);
letter-spacing: 0.42px;
margin-top: 0;
}
.cardShow__location {
font-family: "≈", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 900;
font-style: normal;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.71428571;
color: var(--show-text-color);
letter-spacing: 0;
text-transform: uppercase;
margin-top: 0;
}
.cardShow__date-range {
font-family: "≈", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 900;
font-style: normal;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.33333333;
color: var(--show-text-color);
letter-spacing: 0;
margin-top: 0;
}
.cardNav {
border-radius: 0;
display: flex;
flex-direction: column;
margin-right: 1.5rem;
margin-left: calc((100vh * 0.04) * -1);
}
@media all and (min-width: 86.27717391304347em) {
.cardNav {
margin-left: calc(calc((100vw - 1270px) * 0.5) * -1);
}
}
.cardNav .card__figure {
flex: 1;
}
.cardNav .card__figure-img {
border-radius: 0;
border-top-right-radius: 16px;
}
.cardNav .cardNav__content {
background-color: var(--show-theme-color);
height: 100%;
display: flex;
flex: 0;
flex-wrap: wrap;
align-items: center;
color: #fff;
padding: 1.5rem 0;
padding-left: calc((100vh * 0.04) + 24px);
}
@media all and (min-width: 86.27717391304347em) {
.cardNav .cardNav__content {
padding-left: calc(calc((100vw - 1270px) * 0.5) + 24px);
}
}
.cardNav .cardNav__tagline {
line-height: 1rem;
}
.cardNavSimple {
box-shadow: none;
}
@media all and (max-width: 59.9375em) {
.cardNavSimple {
margin-bottom: 0.5rem;
}
.cardNavSimple a {
text-decoration: none;
}
}
.cardNavSimple .card__figure {
display: none;
}
@media all and (min-width: 60em) {
.cardNavSimple .card__figure {
display: block;
}
}
@media all and (min-width: 60em) {
.cardNavSimple__link {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.9;
}
}
.gridlines {
position: fixed;
z-index: 99;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
display: flex;
align-items: stretch;
pointer-events: none;
}
.gridlines:not(.is-revealed) {
display: none;
}
.gridlines__line {
display: block;
width: 100%;
position: relative;
background: rgba(222, 143, 64, 0.25);
border: 0.0625rem solid #013E64;
border-width: 0px 0.0625rem;
pointer-events: none;
}
.gridlines__line:before {
content: attr(data-count);
display: block;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0.625rem);
color: #013E64;
}
.gridlines__row {
display: flex;
align-items: stretch;
height: 100%;
pointer-events: none;
}
@media all and (max-width: 59.9375em) {
.gridlines__lg {
display: none;
}
}
@media all and (max-width: 47.9375em) {
.gridlines__med {
display: none;
}
}
@media all and (min-width: 60em) {
.gridlines__med {
display: none;
}
}
@media all and (min-width: 48em) {
.gridlines__sm {
display: none;
}
}
.gridlines__col {
display: flex !important;
align-items: stretch;
pointer-events: none;
}
.navigation {
background-color: #012642;
position: relative;
}
@media all and (max-width: 59.9375em) {
.navigation.is-revealed {
background-color: #FFFFFF;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
overflow: scroll;
}
}
@media all and (min-width: 60em) {
.navigation.is-revealed {
background-color: #010F1A;
}
}
.navigation__flex {
color: #fff;
padding: 1rem 0;
}
.is-revealed .navigation__flex {
color: #012642;
}
@media all and (min-width: 60em) {
.is-revealed .navigation__flex {
color: #fff;
}
}
.navigation__logo img {
width: 110px;
height: 44px;
}
@media all and (min-width: 60em) {
.navigation__logo img {
width: 175px;
height: auto;
}
}
.navigation__link-wrapper {
position: relative;
margin-right: 30px;
padding: 22px 0;
}
@media all and (max-width: 59.9375em) {
.navigation__link-wrapper {
width: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
}
@media all and (min-width: 60em) {
.navigation__link--underline {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
background-color: #fff;
transition: height ease-in-out 0.25s;
}
}
.navigation__link {
position: relative;
color: #fff;
}
.navigation__link:hover,
.navigation__link.is-parent,
.navigation__link.is-active-page {
color: #fff;
}
.navigation__link:hover ~ .navigation__link--underline,
.navigation__link.is-parent ~ .navigation__link--underline,
.navigation__link.is-active-page ~ .navigation__link--underline {
height: 6px;
}
@media all and (max-width: 59.9375em) {
.navigation__link.is-active-page {
text-decoration: underline;
text-decoration-color: #fff;
text-underline-offset: 5px;
text-decoration-thickness: 3px;
}
}
.navigation__link--arrow {
transition: transform 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.navigation__link--arrow.is-revealed {
transform: rotate(180deg);
}
@media all and (min-width: 60em) {
.navigation__link--arrow {
display: none;
}
}
@media all and (max-width: 59.9375em) {
.navigation__flex {
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
}
/* Mobile controls */
@media all and (max-width: 59.9375em) {
.navigation__controls {
width: 100%;
}
}
@media all and (min-width: 60em) {
.navigation__mobile-icons {
display: none;
}
}
.navigation__mobile-icons.is-revealed .navigation__hamburger-icon {
display: none;
}
.navigation__mobile-icons:not(.is-revealed) .navigation__close-icon {
display: none;
}
@media all and (min-width: 60em) {
.was-revealed .navigation__list-wrapper {
display: flex;
}
}
@media all and (max-width: 59.9375em) {
.navigation__list-wrapper {
display: none;
}
}
.is-revealed .navigation__list-wrapper {
display: flex;
}
@media all and (max-width: 59.9375em) {
.is-revealed .navigation__list-wrapper {
width: 100%;
flex-direction: column;
}
}
@media all and (max-width: 59.9375em) {
.navigation__list {
flex-direction: column;
width: 100%;
text-align: left;
align-items: flex-start;
padding: 1.5rem 0;
}
}
.navigation__list-item {
position: static;
}
@media all and (max-width: 59.9375em) {
.navigation__list-item {
width: 100%;
border-bottom: 0.125rem solid #012642;
padding: 1.5rem 0;
}
.navigation__list-item:last-of-type {
margin-bottom: 30px;
border-bottom: none;
}
}
@media all and (max-width: 59.9375em) {
.navigation__cta-container {
width: 100%;
}
}
.navigation__cta-link {
width: 100%;
margin: 15px 0;
}
/* Secondary navigation large screens */
.secondaryNavigation {
border-bottom: 2px solid #CECED2;
}
@media all and (max-width: 59.9375em) {
.secondaryNavigation {
display: none;
}
}
.secondaryNavigation__link {
color: #DE8F40;
}
.secondaryNavigation__link:hover,
.secondaryNavigation__link:active {
color: #013E64;
}
/* Secondary navigation mobile and tablet */
.navigation__secondary-list--mobile:not(.is-revealed) {
display: none;
}
@media all and (min-width: 60em) {
.navigation__secondary-list--mobile {
display: none;
}
}
.navigation__secondary-list-item {
padding: 1.25rem 0;
}
.navigation__secondary-list-item:first-of-type {
padding-top: 0;
}
.navigation__secondary-list-item:not(:last-of-type) {
border-bottom: 0.0625rem solid #fff;
}
.navigation__secondary-link {
font-weight: 400;
}
@media all and (max-width: 59.9375em) {
.navigation__secondary-link.is-active-page {
text-decoration: underline;
text-decoration-color: #fff;
text-underline-offset: 5px;
text-decoration-thickness: 3px;
}
}
.navigation__dropdown {
display: none;
}
.navigation__dropdown a {
color: #012642;
font-weight: 700;
}
.navigation__dropdown.is-revealed {
display: block;
}
@media all and (min-width: 60em) {
.navigation__dropdown {
position: absolute;
top: 82px;
left: 0;
right: 0;
z-index: 100;
display: none;
color: #010F1A;
border-bottom: 1px solid #010F1A;
}
.js-hoverintent + .navigation__dropdown:hover,
.navigation__dropdown:focus-within,
.navigation__dropdown.is-revealed,
.is-hovering + .navigation__dropdown {
display: block;
}
}
@media all and (min-width: 60em) {
.navigation__tickets-button-mobile {
display: none;
}
}
.navigation__list-button {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.25;
font-weight: 700;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.navigation__list-button.is-revealed,
.navigation__list-button:hover {
color: #CE7C15;
text-underline-offset: 0.3em;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-decoration-line: underline;
text-decoration-color: #CE7C15;
text-decoration-style: dotted;
}
.navigation__list-button.is-revealed svg {
transform: rotate(180deg);
}
@media all and (min-width: 60em) {
.navigation__list-button {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.42857143;
}
.navigation__list-button .navigation__list-arrow {
display: none;
}
}
@media all and (min-width: 77.5em) {
.navigation__list-button {
padding: 1.25rem 0.9375rem;
}
}
.navigation__list-button a {
text-decoration: none;
color: #012642;
}
@media all and (min-width: 60em) {
.navigation__list-button a {
color: #fff;
}
}
.navigation__ctas {
display: none;
}
@media all and (min-width: 60em) {
.navigation__ctas {
display: flex;
}
}
.navigation__donate {
display: none;
}
@media all and (min-width: 77.5em) {
.navigation__donate {
display: block;
}
}
.navigation__donate a {
color: #fff;
text-decoration: none;
}
.navigation__donate svg {
width: 18px;
height: 18px;
margin-right: 0.5rem;
}
.navigation__tickets-button {
text-wrap: nowrap;
font-size: 12;
border-radius: 8px;
}
.navigation__tickets-button svg {
width: 0.9375rem;
margin-bottom: 0.125rem;
margin-left: 0.1875rem;
fill: #012642;
display: none;
}
@media all and (min-width: 77.5em) {
.navigation__tickets-button svg {
display: inline;
}
}
.navigation__tickets-button:hover:before {
border-radius: 0;
}
.navigation__tickets-button:hover svg {
fill: #fff;
}
.navigation__mobile-footer {
display: none;
}
.is-revealed .navigation__mobile-footer {
display: block;
}
@media all and (min-width: 60em) {
.is-revealed .navigation__mobile-footer {
display: none;
}
}
.navigation__mobile-sticky-btn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
}
.navigation__mobile-sticky-btn a {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
width: 100%;
}
.navigation__mobile-sticky-btn svg {
transform: rotate(310deg);
}
.navigation__search-icon svg {
fill: #fff;
font-size: 1.125rem;
margin-left: 0.5rem;
}
.navigation__search-icon:hover svg {
fill: #CE7C15;
}
.navigation__search-mobile {
display: none;
}
.is-revealed .navigation__search-mobile {
display: block;
width: 100%;
padding-top: 2rem;
}
@media all and (min-width: 60em) {
.navigation__search-mobile {
display: none;
}
.is-revealed .navigation__search-mobile {
display: none;
}
}
@media all and (max-width: 59.9375em) {
.navigation__search-desktop {
display: none;
}
}
@media all and (max-width: 59.9375em) {
.is-revealed .navigation__logo-main {
display: none;
}
}
.navigation__logo-mobile {
display: none;
height: 44px;
width: 110px;
fill: #012642;
}
.is-revealed .navigation__logo-mobile {
display: block;
}
@media all and (min-width: 60em) {
.navigation__logo-mobile {
display: none;
}
.is-revealed .navigation__logo-mobile {
display: none;
}
}
.navigation__plain-link:hover {
color: #CE7C15;
}
.navigation__list-caret {
display: none;
fill: #CE7C15;
width: 8px;
margin-left: 8px;
margin-top: 4px;
}
@media all and (min-width: 60em) {
.navigation__list-caret {
display: block;
}
}
.navigationSimple__container {
background: #012642;
color: #fff;
padding: 1rem 0;
}
.navigationSimple__donate {
display: flex;
border-radius: 8px;
padding-top: 11px;
padding-bottom: 11px;
}
.navigationSimple__donate::before {
border-radius: 4px;
}
.navigationSimple__donate svg {
stroke: #012642;
}
.navigationSimple__donate:hover svg {
fill: #fff;
stroke: #fff;
}
.desktopSearch__container {
border-top: 1px solid #fff;
padding: 1.875rem 0;
}
.desktopSearch__form {
position: relative;
align-items: end;
}
.desktopSearch__content {
position: relative;
}
.desktopSearch__input {
border: none;
border-bottom: 1px solid #4399B3;
background: transparent;
padding-right: 1.875rem;
color: #fff;
font-family: "Graphik Web", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
padding-bottom: 0.625rem;
min-width: 300px;
}
.desktopSearch__input::-moz-placeholder {
color: #fff;
font-weight: 100;
}
.desktopSearch__input::placeholder {
color: #fff;
font-weight: 100;
}
.desktopSearch__clear {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-60%);
}
.desktopSearch__clear svg {
fill: #fff;
border: 1px solid #fff;
border-radius: 50%;
height: 20px;
width: 20px;
padding: 4px;
}
.desktopSearch__clear:hover svg {
fill: #013E64;
background: #fff;
}
.desktopSearch__button {
border-radius: 8px;
padding: 12px 15px;
margin-left: 2.5rem;
margin-top: 0;
}
.desktopSearch__button:hover {
background: #fff;
}
.desktopSearch__button svg {
stroke: currentColor;
}
.mobileNavFooter__container {
text-align: center;
margin-bottom: 100px;
}
.mobileNavFooter__social-icon-list li:not(:last-of-type) {
margin-right: 16px;
}
.mobileNavFooter__social-icon-list svg {
background-color: #4399B3;
color: #012642;
border-radius: 50%;
font-size: 44px;
padding: 6px;
}
.mobileSearch__form {
position: relative;
}
.mobileSearch__input {
border: none;
border-bottom: 1px solid #013E64;
padding-right: 1.875rem;
color: #013E64;
font-family: "Graphik Web", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
.mobileSearch__input::-moz-placeholder {
color: #013E64;
}
.mobileSearch__input::placeholder {
color: #013E64;
}
.mobileSearch__button {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
.dropdown__row {
margin-top: 2rem;
padding-left: 2rem;
border-left: 2px solid #4399B3;
}
@media all and (min-width: 60em) {
.dropdown__row {
display: flex;
justify-content: space-between;
margin-left: calc(1.5rem * -1);
margin-right: calc(1.5rem * -1);
margin-top: 0;
padding-left: 0;
border-left: none;
}
}
@media all and (min-width: 60em) {
.dropdown__col {
width: 33%;
padding: 0 1.5rem;
}
}
@media all and (min-width: 60em) {
.dropdown__cell {
padding: 1.875rem 0;
}
}
.dropdown__featured-event {
padding: 0 !important;
display: none;
}
@media all and (min-width: 60em) {
.dropdown__featured-event {
display: block;
}
}
.dropdown__content {
color: #012642;
}
.dropdown__operations-info {
display: none;
}
@media all and (min-width: 60em) {
.dropdown__operations-info {
display: block;
}
}
.dropdown__list {
padding-left: 0;
list-style-type: none;
margin: 0;
}
@media all and (min-width: 60em) {
.dropdown__list {
padding-left: 2rem;
margin-top: 1.75rem;
position: relative;
border-left: 0.125rem solid #012642;
}
}
.dropdown__list-item {
margin-bottom: 0.5rem;
}
.dropdown__list-item:first-child {
margin-top: 0;
}
.dropdown__list-item a {
text-decoration: none;
}
@media all and (min-width: 60em) {
.dropdown__list-item {
margin-bottom: 0;
}
}
.dropdown__featured-link {
margin-bottom: 0.5rem;
}
@media all and (max-width: 59.9375em) {
.dropdown__featured-link a {
text-decoration: none;
}
}
@media all and (min-width: 60em) {
.dropdown__featured-link {
margin-bottom: 0;
}
.dropdown__featured-link a {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.9;
}
}
.dropdown__main-list {
margin-right: calc(((100vh * 0.04) + 24px) * -1);
}
@media all and (min-width: 60em) {
.dropdown__main-list {
background: #F6F6F6;
height: 100%;
padding: 1.875rem 3rem;
border-top-left-radius: 24px;
}
}
@media all and (min-width: 86.27717391304347em) {
.dropdown__main-list {
margin-right: calc(calc((100vw - 1270px) * 0.5) * -1);
}
}
@media all and (min-width: 60em) {
.dropdown__accent {
font-family: "le-monde-livre-std", "Times New Roman", Times, Georgia, serif, "Times New Roman", Times, Georgia, serif;
font-style: italic;
text-transform: initial;
text-transform: lowercase;
font-weight: 600;
font-size: 23px;
}
}
.dropdownOperations__container {
margin-left: calc(22px * -1);
}
.dropdownOperations__list {
padding-left: 0;
list-style: none;
max-width: 350px;
}
.dropdownOperations__list-item {
color: #012642;
margin-bottom: 1.5rem;
margin-top: 0;
}
.dropdownOperations__list-item a {
color: #CE7C15;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.14285714;
}
.dropdownOperations__icon {
font-size: 32px;
width: 32px;
height: 32px;
}
.footer {
color: #fff;
padding-top: 96px;
padding-bottom: 40px;
}
.footer a {
color: #fff;
}
.footer__logo img {
width: 226px;
height: 84px;
}
@media all and (max-width: 47.9375em) {
.footer__flex {
flex-direction: column;
}
.footer__flex.flex__gutters {
margin: 0;
}
}
.footer__middle-row {
display: flex;
flex-direction: column;
flex-wrap: wrap;
line-height: 25px;
}
@media all and (min-width: 48em) {
.footer__middle-row {
flex-direction: row;
}
}
.footer__middle-col:not(:last-child) {
margin-right: 1.125rem;
margin-bottom: 1.25rem;
}
.footer__middle-col svg {
color: #DE8F40;
margin-top: 8px;
margin-right: 5px;
}
a:hover .footer__middle-col svg {
border: 2px solid #DE8F40;
border-radius: 50%;
}
.footer__list {
margin-top: 50px;
}
@media all and (min-width: 48em) {
.footer__list {
-moz-column-count: 2;
column-count: 2;
}
}
@media all and (min-width: 60em) {
.footer__list {
-moz-column-count: 2;
column-count: 2;
width: 66%;
}
}
.footer__list li {
white-space: nowrap;
}
@media all and (min-width: 48em) {
.footer__list li {
margin-left: 21px;
}
}
.footer__social-icon-list li:not(:last-of-type) {
margin-right: 16px;
}
.footer__social-icon-list svg {
background-color: #fff;
color: #012642;
border-radius: 50%;
font-size: 41px;
padding: 6px;
}
@media all and (max-width: 47.9375em) {
.footer__bottom-row {
align-items: flex-start;
}
}
.footer__sponsor img {
height: 40px;
width: auto;
}
.footer__policy {
color: #7D8E9B;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.66666667;
}
.footerSimple__container {
background: #012642;
color: #7D8E9B;
padding: 2.25rem 0;
}
.footerSimple__container p {
text-align: center;
}
@media all and (min-width: 48em) {
.footerSimple__container p {
text-align: right;
}
}
.globalAlert {
position: relative;
}
.globalAlert__row {
display: flex;
flex-direction: column;
}
@media all and (min-width: 48em) {
.globalAlert__row {
flex-direction: row;
align-items: center;
justify-content: center;
}
}
.globalAlert__row svg {
margin-top: 13px;
align-self: flex-start;
}
.globalAlert__message-wrap {
max-width: 1080px;
margin-right: 1.125rem;
}
.globalAlert__btn {
padding: 10px;
}
.globalAlert__close {
position: absolute;
top: 22px;
right: 20px;
}
.search__container {
min-height: calc(100vh - 500px);
padding: 4.5rem 0;
color: #012642;
}
.search__container article:first-of-type {
border-top: 1px solid #012642;
}
@media all and (min-width: 60em) {
.search__main {
width: 66%;
}
}
.search__result {
border-bottom: 1px solid #012642;
padding: 2rem 0;
}
.search__input {
margin-bottom: 2.5rem;
}
.search__highlight {
color: #4399B3;
}
.search__result-header {
text-transform: capitalize;
line-height: 34px;
}
.search__result-desc,
.entry-header p {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.71428571;
margin-top: 0.75rem;
margin-bottom: 1rem;
}
.search__load {
display: block;
margin-left: auto;
margin-right: auto;
}
.searchBar__form {
position: relative;
}
.searchBar__input {
border-radius: 8px;
border: 2px solid #012642;
color: #012642;
font-family: "Graphik Web", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 600;
padding: 16px;
padding-right: 40px;
}
.searchBar__button {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.searchBar__button svg {
fill: #012642;
width: 20px;
height: 20px;
}
.searchBar__button:hover svg {
fill: #CE7C15;
}
/**
* Pages
*/
.styleguide__section {
margin-top: 2.5rem;
}
.styleguide__section:first-of-type {
margin-top: 0;
}
.styleguide__heading {
border-bottom: 1px solid #b3b3ba;
padding-bottom: 1.25rem;
}
.styleguide__subsection {
padding: 1.25rem 0;
}
.styleguide__swatch {
position: relative;
border: 1px solid #767681;
}
.styleguide__swatch:before {
content: '';
position: relative;
top: 0;
left: 0;
right: 0;
padding-top: 66%;
display: block;
}
.styleguide__swatch figcaption {
border-top: 1px solid #767681;
padding: 0.625rem 0.5625rem;
text-align: center;
background: #fff;
}
.styleguide__swatch--sm {
width: 50px;
height: 50px;
}
.styleguide__flex {
display: flex;
}
.styleguide__grid-row {
border: 2px solid #4399B3;
}
.styleguide__grid-col {
border: 2px solid #DE8F40;
}
@media all and (max-width: 59.9375em) {
.styleguide__grid--lg {
display: none;
}
}
@media all and (max-width: 47.9375em) {
.styleguide__grid--med {
display: none;
}
}
@media all and (min-width: 60em) {
.styleguide__grid--med {
display: none;
}
}
@media all and (min-width: 48em) {
.styleguide__grid--sm {
display: none;
}
}
.eventsLanding__all-header {
text-align: left;
}
@media all and (min-width: 48em) {
.eventsLanding__all-header {
text-align: center;
}
}
.eventsLanding__card-wrapper {
max-width: 745px;
margin: 0 auto 36px;
}
.eventDetail__main-content {
margin-top: 64px;
margin-bottom: 64px;
}
@media all and (min-width: 48em) {
.eventDetail__main-content {
margin-top: 96px;
margin-bottom: 96px;
}
}
.eventDetail__main-content .wysiwygBlock {
margin: 0 !important;
}
.eventDetail__know-list-item {
position: relative;
padding-left: 60px;
min-height: 44px;
margin-bottom: 16px;
}
.eventDetail__know-icon {
position: absolute;
top: 0;
left: 0;
font-size: 44px;
}
.eventDetail__all-shows--wrap {
max-width: 896px;
margin: 0 auto;
padding-top: 96px;
padding-bottom: 96px;
}
.eventDetail__all-shows--card {
display: flex;
flex-direction: column;
border-bottom: 1px solid #012642;
padding-top: 32px;
padding-bottom: 32px;
text-align: center;
align-items: center;
}
@media all and (min-width: 48em) {
.eventDetail__all-shows--card {
flex-direction: row;
text-align: left;
align-items: flex-start;
}
}
.eventDetail__all-shows--card-col {
width: 100%;
justify-content: center;
}
@media all and (min-width: 48em) {
.eventDetail__all-shows--card-col-1 {
width: 40%;
justify-content: flex-start;
}
}
.eventDetail__all-shows--card-col-2 {
align-items: center;
}
@media all and (min-width: 48em) {
.eventDetail__all-shows--card-col-2 {
width: 20%;
align-items: flex-end;
}
}
@media all and (min-width: 48em) {
.eventDetail__all-shows--card-col-3 {
width: 40%;
justify-content: flex-end;
}
}
.eventDetail__load {
display: block;
margin-left: auto;
margin-right: auto;
}
.a11y-icon {
padding: 10px 15px 8px;
border-radius: 25px;
background-color: #212121;
}
.a11y-icon .tooltip {
position: absolute;
top: 0;
left: 0;
transform: translateY(calc(-100% - 5px));
width: -moz-max-content;
width: max-content;
max-width: 200px;
font-family: Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 12px;
line-height: 1.5;
font-weight: normal;
background: #212121;
color: #fff;
padding: 10px;
border-radius: 5px;
z-index: 1;
opacity: 0;
visibility: hidden;
}
.a11y-icon .tooltip:before {
content: "";
position: absolute;
top: 100%;
left: 20px;
width: 0;
border-top: 5px solid #212121;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.a11y-icon .tooltip.tooltip-center {
left: 50%;
transform: translate(-50%, calc(-100% - 5px));
}
.a11y-icon .tooltip.tooltip-center:before {
left: 50%;
transform: translateX(-50%);
}
.a11y-icon:hover .tooltip {
opacity: 1;
visibility: visible;
transition: all 0.3s;
}
.eventListBar {
display: flex;
background-color: #012642;
color: #fff;
font-family: "Graphik Web", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
font-style: normal;
}
.eventListBar a {
color: #fff;
}
.eventListBar__showbox {
width: 100%;
padding: 24px;
border-right: 1px dashed #4399B3;
display: none;
}
@media all and (min-width: 48em) {
.eventListBar__showbox {
width: 20%;
display: block;
}
}
.eventListBar__showbox--first {
background-color: #013E64;
display: block;
}
.eventListBar__content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.eventListBar__time {
border-radius: 8px;
}
.eventListBar__time:before {
border-radius: 5px;
}
.eventListBar__time:hover,
.eventListBar__time:focus {
border-radius: 8px;
}
.eventListBar__time:hover::before,
.eventListBar__time:focus::before {
border-radius: 5px;
}
.eventListBar__allshows-link {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
padding: 24px;
}
@media all and (min-width: 48em) {
.eventListBar__allshows-link {
width: 20%;
}
}
.bioGrid {
padding-top: 96px;
padding-bottom: 96px;
}
.bioGrid__grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 30px 15px;
}
@media all and (min-width: 48em) {
.bioGrid__grid {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media all and (min-width: 60em) {
.bioGrid__grid {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
}
@media (max-width: 480px) {
.bioGrid__grid {
grid-template-columns: 1fr;
}
}
.bioGrid__figure {
max-width: 190px;
}
.bioGrid__figure img {
border-radius: 50%;
}
.bioGrid__card {
width: 190px;
min-width: 190px;
text-align: center;
margin: 0 auto;
}
.bioGrid__name {
text-transform: uppercase;
}
.bioGrid__role {
color: #4399B3;
}
.bioGrid__figure-wrap {
position: relative;
}
.bioGrid__open {
position: absolute;
right: 0;
bottom: 0;
background-color: #4399B3;
border-radius: 50%;
outline: 1px solid #4399B3;
outline-offset: -1px;
width: 40px;
height: 40px;
transition: all 0.3s ease-in-out;
}
.bioGrid__open:hover {
background-color: #BF581B;
outline: 1px solid #BF581B;
color: #fff;
}
.bioGrid__open:focus {
background-color: #4399B3;
outline: 3px solid #4399B3;
outline-offset: 3px;
}
.bioGrid__open svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bioGrid__modal {
width: 92%;
height: 92%;
max-width: 1088px;
max-height: 600px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 0px 15px 30px #0000004D;
border-radius: 24px;
padding: 30px 0 30px 20px;
}
@media all and (min-width: 48em) {
.bioGrid__modal {
padding: 70px 0 70px 70px;
}
}
.bioGrid__modal-container {
width: 100%;
height: 100%;
padding-right: 20px;
overflow-y: scroll;
}
@media all and (min-width: 48em) {
.bioGrid__modal-container {
padding-right: 70px;
}
}
.bioGrid__modal-backdrop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #010f1a;
display: none;
z-index: 9999;
}
.bioGrid__modal-backdrop.is-revealed {
display: block;
}
.bioGrid__close {
position: absolute;
right: 24px;
top: 24px;
text-align: right;
background-color: #4399B3;
border-radius: 50%;
padding: 15px 17px;
width: 50px;
height: 50px;
z-index: 1;
}
.bioGrid__close:hover {
background-color: #BF581B;
color: #fff;
}
/* CALENDAR */
@media (min-width: 60em) {
#calendar .wysiwygBlock,
#calendar .wrappers__wrapper {
max-width: 1270px;
width: 100%;
}
}
.calendar-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.calendar-grid .calendar-month {
flex: 0 1 50%;
padding: 20px;
/* Add media queries for smaller screens */
}
@media (max-width: 782px) {
.calendar-grid .calendar-month {
flex: 0 1 100%;
}
}
.calendar-grid .calendar-month .weekdays {
margin: 0;
padding: 10px 0;
}
.calendar-grid .calendar-month .weekdays li {
display: inline-block;
width: 13.6%;
color: #bfdc9a;
text-align: center;
font-weight: bold;
}
.calendar-grid .calendar-month .days {
padding: 10px 0;
margin: 0;
}
.calendar-grid .calendar-month .days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size: 12px;
color: #bfdc9a;
vertical-align: top;
font-weight: bold;
padding-bottom: 30px;
}
.calendar-grid .calendar-month .code {
font-weight: normal;
color: #666;
}
@media screen and (max-width: 720px) {
.calendar-grid .calendar-month .weekdays li,
.calendar-grid .calendar-month .days li {
width: 13.1%;
}
}
@media screen and (max-width: 420px) {
.calendar-grid .calendar-month .weekdays li,
.calendar-grid .calendar-month .days li {
width: 12.5%;
}
.calendar-grid .calendar-month .days li .active {
padding: 2px;
}
}
@media screen and (max-width: 290px) {
.calendar-grid .calendar-month .weekdays li,
.calendar-grid .calendar-month .days li {
width: 12.2%;
}
}
.supportCardGrid {
padding-top: 40px;
padding-bottom: 40px;
background-color: var(--background-color);
}
@media all and (min-width: 48em) {
.supportCardGrid {
padding-top: 96px;
}
}
@media all and (min-width: 48em) {
.supportCardGrid__block-headline {
text-align: center;
}
}
.supportCardGrid__grid {
display: grid;
grid-template-columns: 100%;
}
@media all and (min-width: 48em) {
.supportCardGrid__grid {
grid-gap: 58px;
grid-template-columns: 1fr 1fr;
}
}
.supportCardGrid__card {
margin-bottom: 70px;
}
.supportCardGrid__card-subtitle {
color: #4399B3;
}
.supportCardGrid__header {
display: flex;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #012642;
}
.supportCardGrid__icon {
width: 55px;
height: 55px;
margin-right: 16px;
}
.supportCardGrid__list {
list-style-image: url(/wp-content/themes/lbcore/resources/icons/support-check.svg);
padding-left: 20px;
}
.supportCardGrid__card-item {
padding-left: 10px;
margin-bottom: 10px;
}
.supportCardGrid__col {
width: 100%;
}
.support__contact {
padding-top: 40px;
padding-bottom: 40px;
}
@media all and (min-width: 48em) {
.support__contact {
padding-top: 96px;
padding-bottom: 96px;
}
}
.support__contact-info {
max-width: 636px;
}
.support__link {
color: #CE7C15;
}
/*
* SINGLE PRESS RELEASE COMPONENT
*/
.press-feed .press-release {
padding: 40px 0;
border-bottom: 1px solid #012642;
}
.press-feed .press-release:first-child {
border-top: 1px solid #012642;
}
.single-pr-latest-container .press-feed .press-release:first-child {
border-top: none;
}
.press-release-container {
display: grid;
grid-template-columns: auto;
gap: 32px;
}
@media all and (min-width: 60em) {
.press-release-container {
grid-template-columns: 1fr 2fr;
gap: 48px;
}
}
@media all and (min-width: 60em) {
.press-featured .press-release-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.press-release-picture img {
width: 100%;
height: auto;
border-radius: 25px;
aspect-ratio: 1.77777778;
-o-object-fit: cover;
object-fit: cover;
}
.press-release-content {
gap: 24px;
}
.press-release-copy {
gap: 16px;
}
.press-release-title {
line-height: 1.25;
}
.press-release-title a {
transition: all 0.3s;
}
.press-release-title a:hover {
transition: all 0.3s;
}
.press-release-cta a {
color: #013E64;
text-decoration-color: #CE7C15;
transition: all 0.3s;
}
.press-release-cta a:hover {
color: #CE7C15;
text-decoration-color: #013E64;
transition: all 0.3s;
}
/*
* PRESS RELEASES LANDING PAGE
*/
/* Page Header */
.press-header {
overflow: hidden;
}
.press-header .press-header-title {
line-height: 1.25;
}
.press-header .press-header-icon {
right: 15px;
bottom: -15px;
font-size: 125px;
}
@media all and (min-width: 48em) {
.press-header .press-header-icon {
right: 50px;
bottom: -60px;
font-size: 290px;
}
}
@media all and (min-width: 60em) {
.press-header .press-header-icon {
bottom: -110px;
font-size: 390px;
}
}
@media (min-width: 1800px) {
.press-header .press-header-icon {
right: 20%;
}
}
/* Main Section */
.press-main-container {
display: grid;
grid-template-columns: auto;
gap: 80px;
}
@media all and (min-width: 60em) {
.press-main-container {
grid-template-columns: 3fr 1fr;
}
}
/* Press Contact Aside */
.press-contact-role {
font-family: "le-monde-livre-std", "Times New Roman", Times, Georgia, serif, "Times New Roman", Times, Georgia, serif;
font-style: italic;
color: #4399B3;
}
/*
* SINGLE PRESS RELEASES PAGE (PERMA)
*/
.single-pr-header-container {
display: grid;
grid-template-columns: auto;
gap: 2.5rem;
}
@media all and (min-width: 60em) {
.single-pr-header-container {
grid-template-columns: 1fr 2fr;
gap: 3.75rem;
}
}
.single-pr-header-picture img {
width: 100%;
height: auto;
border-radius: 25px;
aspect-ratio: 1.77777778;
-o-object-fit: cover;
object-fit: cover;
}
.single-pr-header-content {
gap: 24px;
}
.single-pr-header-subtitle {
font-family: "le-monde-livre-std", "Times New Roman", Times, Georgia, serif, "Times New Roman", Times, Georgia, serif;
font-style: italic;
color: #A5DFF0;
}
.single-pr-main-container {
display: grid;
grid-template-columns: auto;
gap: 40px;
}
@media all and (min-width: 60em) {
.single-pr-main-container {
grid-template-columns: 1fr 3fr 1fr;
}
}
.single-pr-main-social {
flex-direction: row;
gap: 12px;
}
@media all and (min-width: 60em) {
.single-pr-main-social {
flex-direction: column;
gap: 20px;
}
}
.pr-social-share {
width: 44px;
height: 44px;
}
.pr-social-share svg {
width: 44px;
height: 44px;
}
.single-pr-main-content p:first-child {
margin-top: 0;
}
/* Latest News Section */
.single-pr-latest-header hr {
width: 120px;
border: 1px solid #012642;
}
.single-pr-latest-container {
width: 100%;
margin: auto;
}
@media all and (min-width: 60em) {
.single-pr-latest-container {
width: 75%;
}
}
/*
* GLOBAL PRESS CTA
*/
.packageAddons select {
color: #012642;
font-weight: 700;
font-size: 18px;
width: 80px;
padding-right: 30px;
}
.packageAddons select:after {
content: 'V';
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
}
.packageAddons__section {
border-bottom: 1px solid #012642;
}
.packageAddons__ticket-select {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 40px;
}
.blogPerma__back-link svg {
transform: rotate(180deg);
}
/**
* Print
*/
@media print {
* {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
}
html {
font: 12pt/1.5em Georgia, "Times New Roman", Times, serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
line-height: 1.1em;
margin-bottom: 0.5em;
margin-top: 1em;
page-break-after: avoid;
orphans: 3;
widows: 3;
}
li h1,
li h2,
li h3,
li h4,
li h5,
li h6 {
margin-top: 0;
}
h1 {
font-size: 24pt;
}
h2 {
font-size: 21pt;
}
h3 {
font-size: 18pt;
}
h4 {
font-size: 16pt;
}
h5 {
font-size: 14pt;
}
h6 {
font-size: 12pt;
}
blockquote,
p,
ul,
ol,
dl,
figure,
img {
margin-bottom: 1em;
}
figure img {
margin-bottom: 0;
}
ul,
ol,
dd {
margin-left: 3em;
}
pre,
blockquote {
border-left: 0.5em solid #999;
padding-left: 1.5em;
page-break-inside: avoid;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
figcaption {
text-transform: uppercase;
font-size: 10pt;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
form,
video,
nav {
display: none !important;
}
@page {
margin: 2cm;
}
}
/**
* Prototype Styles
* REMOVE WHEN BEGINNING PRODUCTION
*/