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.5rem;
margin-right: -0.5rem;
}
.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: 61.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: 62em) {
.flex__gutters {
margin-left: -0.5625rem;
margin-right: -0.5625rem;
}
.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.5rem;
padding-right: 0.5rem;
}
@media all and (min-width: 48em) and (max-width: 61.9375em) {
.flex__gutters .flex__col {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media all and (min-width: 62em) {
.flex__gutters .flex__col {
padding-left: 0.5625rem;
padding-right: 0.5625rem;
}
}
/* 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: 61.9375em) {
.flex__stack--med {
flex-direction: column;
}
}
@media all and (max-width: 61.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% + 1.125rem) / 9) * 1);
}
}
@media all and (min-width: 62em) {
.flex__gap--column {
gap: calc(((100% + 1.125rem) / 12) * 1);
}
}
.flex__gap--gutter {
gap: 1.125rem;
}
.flex__gap--normal {
gap: normal;
}
@media all and (min-width: 30em) {
.flex__col-width-sm--100 {
width: 100%;
}
.flex__col-width-sm--50 {
width: 50%;
}
.flex__col-width-sm--25 {
width: 25%;
}
}
@media all and (min-width: 48em) {
.flex__col-width-md--100 {
width: 100%;
}
.flex__col-width-md--50 {
width: 50%;
}
.flex__col-width-md--25 {
width: 25%;
}
.flex__col-width-md--33 {
width: 33%;
}
}
@media all and (min-width: 62em) {
.flex__col-width-lg--100 {
width: 100%;
}
.flex__col-width-lg--50 {
width: 50%;
}
.flex__col-width-lg--25 {
width: 25%;
}
.flex__col-width-lg--33 {
width: 33%;
}
}
/*
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.28125rem;
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.1111111111111112em;
}
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 0.5625rem;
}
}
/*
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.1111111111111112em;
padding: 1.25rem;
background-color: #ffffff;
}
.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: #0a4370;
}
.panel__alert--error {
background: #A8192E;
}
.panel__alert--success {
background: #72bc44;
}
/*
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]
*/
.wysiwyg h1 {
margin-top: 0;
}
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
margin-top: 1.5em;
}
.wysiwyg .alignleft {
float: left;
margin-right: 0.5625rem;
}
.wysiwyg .alignright {
float: right;
margin-left: 0.5625rem;
}
.wysiwyg .aligncenter {
display: block;
margin: 0 auto 1.2rem;
}
/*
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;
}
/**
* Foundation
*/
.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(17, 109, 182, 0.25);
pointer-events: none;
}
.gridlines__line:before,
.gridlines__line:after {
content: "";
display: block;
width: 1px;
height: 100vh;
position: absolute;
top: 0;
background: #116DB6;
}
.gridlines__line:before {
left: 0;
}
.gridlines__line:after {
right: 0;
}
.gridlines__row {
display: flex;
align-items: stretch;
height: 100%;
pointer-events: none;
}
@media all and (max-width: 61.9375em) {
.gridlines__lg {
display: none;
}
}
@media all and (max-width: 47.9375em) {
.gridlines__med {
display: none;
}
}
@media all and (min-width: 62em) {
.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;
}
.gridlines__button {
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.globalHeader {
border-bottom: 1px solid #116DB6;
}
.globalHeader__flex {
position: relative;
padding-left: 6.25%;
}
@media all and (min-width: 48em) {
.globalHeader__flex {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0;
margin-left: auto;
margin-right: auto;
width: 87.5%;
}
}
@media all and (min-width: 77.5em) {
.globalHeader__flex {
max-width: 1024px;
}
}
.globalHeader__branding {
display: flex;
justify-content: space-between;
}
@media all and (min-width: 48em) {
.globalHeader__branding {
display: block;
width: 25%;
}
}
.globalHeader__nav-control {
background: transparent;
color: inherit;
border: 0;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
background-image: radial-gradient(0% 100%, #6499AF 0%, #317E9F 49%, #155672 100%);
}
.globalHeader__nav-control:hover,
.globalHeader__nav-control:focus,
.globalHeader__nav-control.is-current {
background: transparent;
color: inherit;
}
.globalHeader__nav-control:hover,
.globalHeader__nav-control:focus {
background-image: radial-gradient(0% 100%, #6499AF 0%, #317E9F 49%, #317E9F 100%);
}
@media all and (min-width: 48em) {
.globalHeader__nav-control {
display: none;
}
}
.globalHeader__nav-control svg {
color: #fff;
width: 24px;
height: 24px;
}
.globalHeader__nav-control[data-type="close"] {
background-image: radial-gradient(0% 100%, #6499AF 0%, #317E9F 49%, #317E9F 100%);
}
.globalHeader__nav-control[data-type="close"]:not(.is-revealed) {
display: none;
}
.globalHeader__nav-control[data-type="open"].is-revealed {
display: none;
}
.globalHeader__logo {
padding: 10px 0;
}
@media all and (max-width: 47.9375em) {
.globalHeader__logo {
width: calc(( ( 87.5% + 1.125rem ) / 4 ) * 3);
flex: 0 1 auto;
}
.globalHeader__logo img {
width: 160px;
}
}
@media all and (max-width: 47.9375em) {
.globalHeader__nav {
background-image: radial-gradient(circle, #6499AF 0%, #317E9F 48.99%, #155672 100%);
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0 6.25% 20px;
transform: translateY(100%);
z-index: 100;
box-shadow: 0 5px 10px 0 rgba(28, 43, 57, 0.3);
}
.globalHeader__nav:not(.is-revealed) {
display: none;
}
}
@media all and (min-width: 48em) {
.globalHeader__nav {
width: 74%;
}
}
@media all and (min-width: 62em) {
.globalHeader__nav {
width: 70%;
}
}
.globalHeader__nav-list {
padding-left: 0;
list-style: none outside none;
margin-top: 1.25rem;
}
@media all and (min-width: 48em) {
.globalHeader__nav-list {
margin-top: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
}
@media all and (max-width: 47.9375em) {
.globalHeader__nav-item {
padding: 10px 0;
}
}
@media all and (max-width: 47.9375em) {
.globalHeader__nav-link {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
color: #fff;
text-decoration: none;
}
.globalHeader__nav-link:hover,
.globalHeader__nav-link:focus {
color: #fff;
border-bottom: 1px solid;
}
}
@media all and (min-width: 48em) {
.globalHeader__nav-link {
color: #155672;
text-decoration: none;
}
.globalHeader__nav-link:hover,
.globalHeader__nav-link:focus {
color: #317E9F;
border-bottom: 1px solid;
padding-bottom: 5px;
}
.globalHeader__nav-link.is-current {
border-bottom: 2px solid #A8192E;
padding-bottom: 5px;
}
}
.globalHeader__nav-cta {
position: relative;
}
@media all and (max-width: 47.9375em) {
.globalHeader__nav-cta-btn[data-type="my-account"] {
display: none !important;
}
.globalHeader__nav-cta-btn[data-type="login"].is-revealed {
display: none;
}
}
.globalHeader__nav-dropdown:not(.is-revealed) {
display: none;
}
@media all and (max-width: 47.9375em) {
.globalHeader__nav-dropdown[data-type="my-account"] {
display: block !important;
}
}
@media all and (min-width: 48em) {
.globalHeader__nav-dropdown {
position: absolute;
bottom: 0;
right: 0;
width: 320px;
padding: 20px;
transform: translateY(100%);
background: #F7F7F7;
z-index: 1;
box-shadow: 0 5px 10px 0 rgba(28, 43, 57, 0.3);
}
.globalHeader__nav-dropdown[data-type="my-account"] {
padding: 0;
}
}
.globalHeader__login-link {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 900;
position: relative;
text-decoration: none;
display: inline-block;
color: #fff;
padding: 0 1px;
transition: color ease 0.3s;
}
.globalHeader__login-link::before,
.globalHeader__login-link::after {
content: '';
position: absolute;
background-color: #FFD435;
z-index: -1;
height: 5%;
}
.globalHeader__login-link::before {
width: 0%;
left: 0;
bottom: 0;
transition: width ease 0.4s;
}
.globalHeader__login-link::after {
width: 100%;
left: 0;
bottom: 0;
transition: all ease 0.6s;
}
.globalHeader__login-link:hover::before {
width: 100%;
}
.globalHeader__login-link:hover::after {
left: 100%;
width: 0%;
transition: all ease 0.2s;
}
.globalHeader__login-link--large {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.8;
}
.globalHeader__login-link--small {
font-size: 16px;
font-size: 1rem;
line-height: 1.625;
}
.globalHeader__login-link--tiny {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.83333333;
}
@media all and (min-width: 48em) {
.globalHeader__login-link {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.44444444;
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 900;
position: relative;
color: #116DB6;
text-decoration: none;
display: inline-block;
}
.globalHeader__login-link:after {
content: '';
position: absolute;
background: #116DB6;
height: 1px;
bottom: 0;
left: 0;
right: 0;
}
.globalHeader__login-link:hover,
.globalHeader__login-link:focus,
.globalHeader__login-link.is-current {
color: #0a4370;
}
.globalHeader__login-link--large {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.8;
}
.globalHeader__login-link--small {
font-size: 16px;
font-size: 1rem;
line-height: 1.625;
}
.globalHeader__login-link--tiny {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.83333333;
}
}
.globalHeader__nav-secondary-list {
padding-left: 0;
list-style: none outside none;
margin-top: 2.5rem;
}
@media all and (min-width: 48em) {
.globalHeader__nav-secondary-list {
margin-top: 0;
}
}
.globalHeader__nav-secondary-item {
padding: 10px 0;
}
[data-type="my-account"] .globalHeader__nav-secondary-item {
padding: 0;
}
.globalHeader__nav-secondary-link {
font-size: 16px;
font-size: 1rem;
line-height: 1.625;
color: #116DB6;
text-decoration: none;
}
.globalHeader__nav-secondary-link:focus,
.globalHeader__nav-secondary-link:hover {
color: #0a4370;
}
@media all and (max-width: 47.9375em) {
.globalHeader__nav-secondary-link {
display: inline-block;
color: #fff;
}
.globalHeader__nav-secondary-link:focus,
.globalHeader__nav-secondary-link:hover {
color: #fff;
}
}
@media all and (min-width: 48em) {
.globalHeader__nav-secondary-link {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.44444444;
}
[data-type="my-account"] .globalHeader__nav-secondary-link {
display: block;
padding: 20px;
}
[data-type="my-account"] .globalHeader__nav-secondary-link:hover,
[data-type="my-account"] .globalHeader__nav-secondary-link:focus {
background: #fff;
color: #1C2B39;
}
[data-type="my-account"] .globalHeader__nav-secondary-link:focus {
border-right: 4px solid #A8192E;
}
.globalHeader__nav-secondary-link svg {
width: 24px;
height: 24px;
}
}
.globalHeader__nav-secondary-link.globalHeader__nav-logout {
font-size: 16px;
font-size: 1rem;
line-height: 1.625;
}
.globalHeader__nav-secondary-link.globalHeader__nav-logout svg {
width: 18px;
height: 18px;
}
@media all and (max-width: 47.9375em) {
.globalHeader__nav-logout {
margin-top: 2.5rem;
}
}
.globalFooter {
background: #317E9F;
}
@media all and (min-width: 48em) {
.globalFooter {
background: #1C2B39;
}
}
.globalFooter__wrapper {
position: relative;
}
.globalFooter__logo {
width: 75%;
padding: 20px 20px 20px 6.25%;
box-shadow: 0 5px 10px 0 rgba(28, 43, 57, 0.3);
background: #fff;
}
@media all and (min-width: 48em) {
.globalFooter__logo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin-left: 6.25%;
padding: 20px;
width: calc(( ( 87.5% + 1.125rem ) / 12 ) * 3);
display: flex;
align-items: center;
box-shadow: none;
}
}
@media all and (min-width: 73.14285714285714em) {
.globalFooter__logo {
width: calc(( ( ( 1024px + 1.125rem ) / 12 ) * 3 ) - 1.125rem);
margin-left: calc((100vw - 1024px) * 0.5);
}
}
.globalFooter__nav-primary-item {
padding: 10px 0px;
}
.globalFooter__nav-primary-item:first-of-type {
padding-top: 0;
}
.globalFooter__nav-primary-item:last-of-type {
padding-bottom: 0;
}
@media all and (min-width: 48em) {
.globalFooter__nav-primary-item {
padding: 20px 10px;
}
.globalFooter__nav-primary-item:first-of-type {
padding-top: 20px;
padding-left: 0;
}
.globalFooter__nav-primary-item:last-of-type {
padding-bottom: 20px;
padding-right: 0;
}
}
.globalFooter__nav-secondary-item {
padding: 20px 10px;
}
.globalFooter__nav-secondary-item:first-of-type {
padding-left: 0;
}
.globalFooter__nav-secondary-item:last-of-type {
padding-right: 0;
}
.globalFooter__nav-primary {
background: transparent;
}
@media all and (min-width: 48em) {
.globalFooter__nav-primary {
background: #317E9F;
}
}
.globalFooter__nav-primary-list {
padding-left: 0;
list-style: none outside none;
}
@media all and (min-width: 48em) {
.globalFooter__nav-primary-list {
margin-top: 0;
margin-left: calc(((100% + 1.125rem) / 12) * 4);
color: #fff;
}
}
@media all and (min-width: 48em) {
.globalFooter__nav-primary-list {
display: flex;
align-items: center;
}
}
.globalFooter__nav-primary-link {
display: inline-block;
width: 100%;
color: #fff;
text-decoration: none;
font-size: 18px;
font-size: 1.125rem;
line-height: 1;
display: flex;
align-items: center;
margin-top: 0;
}
.globalFooter__nav-primary-link:focus,
.globalFooter__nav-primary-link:hover {
text-decoration: underline;
}
.globalFooter__nav-primary-link:first-of-type {
padding-left: 0;
}
.globalFooter__nav-primary-link:last-of-type {
padding-right: 0;
}
.globalFooter__nav-secondary {
background: #1C2B39;
}
.globalFooter__nav-secondary-list {
padding-left: 0;
list-style: none outside none;
display: flex;
align-items: center;
}
@media all and (min-width: 48em) {
.globalFooter__nav-secondary-list {
margin-top: 0;
margin-left: calc(((100% + 1.125rem) / 12) * 4);
color: #fff;
}
}
.globalFooter__nav-secondary-link {
display: inline-block;
width: 100%;
color: #fff;
text-decoration: none;
font-size: 12px;
font-size: 0.75rem;
line-height: 0.08333333;
}
.globalFooter__nav-secondary-link:focus,
.globalFooter__nav-secondary-link:hover {
text-decoration: underline;
}
.globalFooter__nav-secondary-link:first-of-type {
padding-left: 0;
}
.globalFooter__nav-secondary-link:last-of-type {
padding-right: 0;
}
.globalFooter__disclaimer {
color: #fff;
}
.globalFooter__footer {
background: #1C2B39;
padding-top: 1.25rem;
padding-bottom: 50px;
}
@media all and (min-width: 48em) {
.layout__row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.layout__col-1 {
padding: 2.5rem 6.25% 3.75rem 6.25%;
background-color: #F7F7F7;
}
@media all and (min-width: 48em) {
.layout__col-1 {
padding-top: 3.75rem;
padding-right: 1.125rem;
width: calc((((( 87.5% + 1.125rem) / 12) * 3) + ((100% - 87.5% ) / 2)));
flex: 0 1 auto;
}
}
@media all and (min-width: 73.14285714285714em) {
.layout__col-1 {
width: calc((((1024px + 1.125rem) / 12) * 3) + ((100vw - 1024px) / 2));
padding-left: calc((100vw - 1024px) * 0.5);
}
}
.layout__col-2 {
padding-top: 2.5rem;
padding-right: 6.25%;
padding-left: 6.25%;
}
@media all and (min-width: 48em) {
.layout__col-2 {
padding-top: 3.75rem;
width: calc((((( 87.5% + 1.125rem) / 12) * 8) + ((100% - 87.5% ) / 2)) - 1.125rem);
padding-left: 0;
flex: 0 1 auto;
}
}
@media all and (min-width: 73.14285714285714em) {
.layout__col-2 {
padding-right: calc((100vw - 1024px) * 0.5);
width: calc((((1024px + 1.125rem) / 12) * 8) + ((100vw - 1024px) / 2) - 1.125rem);
}
}
/**
* Shared
*/
.simpleHeader {
background-image: radial-gradient(circle, #6499AF 0%, #317E9F 48.99%, #155672 100%);
padding-top: 3.75rem;
padding-bottom: 3.75rem;
}
@media all and (min-width: 48em) {
.simpleHeader {
padding-top: 5rem;
padding-bottom: 5rem;
}
}
@media all and (min-width: 62em) {
.simpleHeader__content {
width: calc(((100% + 1.125rem) / 12) * 7);
}
}
.simpleHeader__title {
color: #fff;
margin-top: 0;
}
.simpleHeader__desc {
max-width: 595px;
color: #fff;
}
.simpleHeader__desc > * {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 400;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
color: #fff;
}
@media all and (min-width: 62em) {
.simpleHeader__desc > * {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.8;
}
}
.simpleHeader__desc a {
color: #fff;
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
}
.simpleHeader__tag {
color: #FFD435;
text-transform: uppercase;
}
.jobHeader {
padding-top: 2.5rem;
padding-bottom: 3.75rem;
}
@media all and (max-width: 61.9375em) {
.jobHeader {
position: relative;
}
.jobHeader:before {
content: '';
background-image: radial-gradient(circle, #6499AF 0%, #317E9F 48.99%, #155672 100%);
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60%;
z-index: -1;
}
}
@media all and (min-width: 48em) {
.jobHeader {
padding-top: 5rem;
padding-bottom: 5rem;
}
}
@media all and (min-width: 62em) {
.jobHeader {
background-image: radial-gradient(circle, #6499AF 0%, #317E9F 48.99%, #155672 100%);
}
}
.jobHeader__row {
display: flex;
flex-direction: column;
}
@media all and (min-width: 62em) {
.jobHeader__row {
flex-direction: row;
justify-content: space-between;
}
}
.jobHeader__back {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.25;
color: #fff;
transition: all 0.5s ease-in-out;
}
.jobHeader__back svg {
font-size: 20px;
top: 3px;
position: relative;
}
.jobHeader__back:hover,
.jobHeader__back:focus {
color: #6499AF;
}
.jobHeader__title {
color: #fff;
margin-top: 1.875rem;
}
.jobHeader__region {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.8;
color: #fff;
margin-top: 0.625rem;
}
@media all and (min-width: 62em) {
.jobHeader__region {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.5;
}
}
@media all and (min-width: 62em) {
.jobHeader__col-1 {
margin-right: calc(100% / 12);
}
}
.jobHeader__col-2 {
margin-bottom: -6.75rem;
}
@media all and (max-width: 61.9375em) {
.jobHeader__col-2 {
margin-top: 2.1875rem;
}
}
@media all and (min-width: 48em) and (max-width: 61.9375em) {
.jobHeader__col-2 {
margin-left: calc(100% / 12);
margin-right: calc(100% / 12);
}
}
@media all and (min-width: 62em) {
.jobHeader__col-2 {
width: 41.66666667%;
display: flex;
flex: 1 0 auto;
}
}
@media all and (min-width: 77.5em) {
.jobHeader__col-2 {
flex: 0 0 auto;
}
}
@media all and (max-width: 61.9375em) {
.jobHeader__actions {
display: flex;
flex-direction: column;
}
}
.jobHeader__highlights {
background-color: #fff;
box-shadow: 0 5px 10px 0 rgba(28, 43, 57, 0.3);
padding: 1.25rem 1.125rem;
}
@media all and (min-width: 62em) {
.jobHeader__highlights {
width: 100%;
padding: 1.875rem 1.125rem 2.5rem;
}
}
.jobHeader__highlights ul {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
list-style: none;
padding-left: 0;
margin-top: 0;
}
@media all and (min-width: 62em) {
.jobHeader__highlights ul {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.8;
}
}
.jobHeader__highlights li {
padding-top: 5px;
padding-bottom: 5px;
}
@media all and (min-width: 48em) {
.jobHeader__highlights li {
padding-top: 10px;
padding-bottom: 10px;
}
.jobHeader__highlights li:first-child {
padding-top: 0;
}
}
.jobHeader__highlights li::before {
content: "\25CF";
color: #A8192E;
padding-right: 10px;
}
.quote {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.8;
display: flex;
align-items: center;
flex-direction: column;
padding-left: 6.25%;
padding-right: 6.25%;
padding-top: 55px;
padding-bottom: 72px;
color: #1C2B39;
background-color: #FFD435;
margin-bottom: 3.75rem;
}
@media all and (min-width: 62em) {
.quote {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.5;
}
}
@media all and (min-width: 48em) {
.quote {
flex-direction: row;
}
}
@media all and (min-width: 73.14285714285714em) {
.quote {
padding-left: calc((100vw - 1024px) * 0.5);
padding-right: calc((100vw - 1024px) * 0.5);
}
}
.quote__icon {
display: flex;
align-items: center;
justify-content: center;
min-width: 134px;
min-height: 134px;
background-color: #fff;
padding: 20px;
border-radius: 50%;
box-shadow: 0 5px 20px 0 rgba(28, 43, 57, 0.3);
}
.quote__icon svg {
font-size: 68px;
}
.quote__person {
display: flex;
align-items: center;
justify-content: center;
min-width: 134px;
min-height: 134px;
background-color: #fff;
padding: 0;
border-radius: 50%;
box-shadow: 0 5px 20px 0 rgba(28, 43, 57, 0.3);
overflow: hidden;
position: relative;
}
.quote__person .quote__figure {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
}
.quote__connector {
width: 253px;
height: 70px;
}
.quote__connector svg {
transform: rotate(90deg) scale(4);
width: 253px;
height: 70px;
}
@media all and (min-width: 48em) {
.quote__connector {
height: 253px;
width: 70px;
}
.quote__connector svg {
transform: none;
height: 253px;
width: 70px;
}
}
.quote__content {
position: relative;
padding-left: 10px;
text-align: center;
}
@media all and (min-width: 48em) {
.quote__content {
text-align: left;
}
}
.quote__text {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 300;
font-size: 30px;
font-size: 1.875rem;
line-height: 1;
line-height: 50px;
}
@media all and (min-width: 48em) {
.quote__text {
font-size: 36px;
font-size: 2.25rem;
line-height: 1.16666667;
}
}
.quote__author {
font-family: "Faustina", "Times New Roman", Times, Georgia, serif;
color: #317E9F;
}
.largeHero {
position: relative;
background: radial-gradient(circle, #155672 0%, #317E9F 51.01%, #6499AF 100%);
padding-top: 3.75rem;
padding-bottom: 330px;
}
@media all and (min-width: 48em) {
.largeHero {
padding-top: 180px;
padding-bottom: 180px;
}
}
.largeHero__figure {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: hidden;
margin: 0;
display: none;
z-index: 0;
}
.largeHero__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 .largeHero__figure img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
@media all and (min-width: 48em) {
.largeHero__figure {
display: block;
}
}
.largeHero__figure-mobile {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: hidden;
margin: 0;
z-index: 0;
}
.largeHero__figure-mobile 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 .largeHero__figure-mobile img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
@media all and (min-width: 48em) {
.largeHero__figure-mobile {
display: none;
}
}
.largeHero__content {
position: relative;
text-align: center;
z-index: 1;
}
@media all and (min-width: 48em) {
.largeHero__content {
margin-right: 50%;
text-align: left;
}
}
.largeHero__tagline {
font-family: "Faustina", "Times New Roman", Times, Georgia, serif;
color: #fff;
letter-spacing: 1px;
}
.largeHero__headline {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 300;
font-size: 36px;
font-size: 2.25rem;
line-height: 1.16666667;
color: #fff;
}
@media all and (min-width: 62em) {
.largeHero__headline {
font-size: 48px;
font-size: 3rem;
line-height: 1.125;
}
}
.largeHero__cta {
background: #fff;
color: #317E9F;
border: 2px solid #317E9F;
box-shadow: 4px 4px 0 0 rgba(28, 43, 57, 0.2);
transition: all 0.25s ease;
margin-bottom: 10px;
background-color: #fff;
margin-bottom: 1.25rem;
}
.largeHero__cta:hover,
.largeHero__cta:focus,
.largeHero__cta.is-current {
color: #155672;
box-shadow: 8px 8px 0 0 rgba(28, 43, 57, 0.2);
}
.largeHero__cta.is-disabled {
background: rgba(28, 43, 57, 0.4);
border-color: transparent;
box-shadow: none;
}
.largeHero__cta.on-dark {
background: #317E9F;
color: #fff;
border-color: #fff;
}
.largeHero__cta.on-dark:hover,
.largeHero__cta.on-dark:focus,
.largeHero__cta.on-dark.is-current {
background-color: #155672;
border-color: #fff;
color: #fff;
}
.largeHero__cta.with-icon {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.78125rem 1.6875rem;
}
.largeHero__cta.with-icon .icons__icon {
width: 1.25em;
height: 1.25em;
}
.largeHero__cta.with-icon span {
padding: 0.3125rem 0 0.3125rem 0.28125rem;
}
.largeHero__cta-link {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 900;
position: relative;
text-decoration: none;
display: inline-block;
color: #fff;
padding: 0 1px;
transition: color ease 0.3s;
}
.largeHero__cta-link::before,
.largeHero__cta-link::after {
content: '';
position: absolute;
background-color: #FFD435;
z-index: -1;
height: 5%;
}
.largeHero__cta-link::before {
width: 0%;
left: 0;
bottom: 0;
transition: width ease 0.4s;
}
.largeHero__cta-link::after {
width: 100%;
left: 0;
bottom: 0;
transition: all ease 0.6s;
}
.largeHero__cta-link:hover::before {
width: 100%;
}
.largeHero__cta-link:hover::after {
left: 100%;
width: 0%;
transition: all ease 0.2s;
}
.largeHero__cta-link--large {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.8;
}
.largeHero__cta-link--small {
font-size: 16px;
font-size: 1rem;
line-height: 1.625;
}
.largeHero__cta-link--tiny {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.83333333;
}
.featuredResource {
padding-top: 3.75rem;
padding-bottom: 3.75rem;
}
.featuredResource__row {
display: flex;
flex-direction: column;
}
@media all and (min-width: 48em) {
.featuredResource__row {
flex-direction: row;
}
.featuredResource__row[data-orientation="right"] {
flex-direction: row-reverse;
}
.featuredResource__row[data-orientation="right"] .featuredResource__col-2 {
padding-right: calc(100% / 8);
}
.featuredResource__row[data-orientation="left"] .featuredResource__col-2 {
padding-left: calc(100% / 8);
}
}
.featuredResource__col-1,
.featuredResource__col-2 {
width: 100%;
}
@media all and (min-width: 48em) {
.featuredResource__col-1,
.featuredResource__col-2 {
width: 50%;
}
}
.featuredResource__card {
position: relative;
}
.featuredResource__figure-container {
position: relative;
overflow: hidden;
}
.featuredResource__figure {
padding-top: 360px;
}
.featuredResource__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 .featuredResource__figure img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.simpleCard {
box-shadow: 0 5px 10px 0 rgba(28, 43, 57, 0.3);
height: 100%;
display: flex;
flex: 1;
flex-direction: column;
}
.simpleCard__figure {
margin-top: 0;
width: 100%;
}
.simpleCard__figure:before {
padding-top: 66.56346749%;
}
.simpleCard__content {
padding: 30px;
}
.secondaryCard {
position: relative;
box-shadow: 0 5px 20px 0 rgba(28, 43, 57, 0.3);
}
@media all and (max-width: 47.9375em) {
.secondaryCard {
display: flex;
}
.secondaryCard[data-orientation="right"] {
flex-direction: row-reverse;
}
}
.secondaryCard__content {
background: linear-gradient(135deg, #DA2F48, #A8192E);
color: #fff;
padding: 40px;
position: relative;
}
.secondaryCard[data-orientation="right"] .secondaryCard__content {
background: linear-gradient(135deg, #DA2F48, #A8192E);
}
.secondaryCard__content:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../../../../lbcore/resources/images/lineDesign.png');
background-repeat: no-repeat;
background-size: contain;
}
.secondaryCard[data-orientation="right"] .secondaryCard__content:after {
transform: scaleX(-1);
}
@media all and (max-width: 47.9375em) {
.secondaryCard__content {
width: 45%;
padding: 15px;
}
}
.secondaryCard__heading {
color: #fff;
font-size: 30px;
font-size: 1.875rem;
line-height: 1;
text-transform: uppercase;
letter-spacing: 1px;
}
@media all and (min-width: 48em) {
.secondaryCard__heading {
font-size: 36px;
font-size: 2.25rem;
line-height: 1.16666667;
}
}
@media all and (max-width: 47.9375em) {
.secondaryCard__heading {
font-size: 18px;
}
}
.secondaryCard__description {
color: #fff;
}
.secondaryCard__figure:before {
padding-top: 84.38133874%;
}
@media all and (max-width: 47.9375em) {
.secondaryCard__figure {
width: 55%;
margin-top: 0;
}
}
.secondaryCard__cta {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.contactBlock {
padding: 80px 0;
}
.contactBlock .contactForm {
margin-top: 2.5rem;
}
@media all and (min-width: 48em) {
.contactBlock .contactForm {
margin-top: 0;
}
}
.contactBlock [data-size="small"] .contactForm {
margin-top: 2.5rem;
}
.contactBlock__heading,
.register__heading {
font-size: 36px;
font-size: 2.25rem;
line-height: 1;
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 300;
margin-top: 0;
text-transform: none;
color: #1C2B39;
}
.contactBlock__copy,
.register__content--wysiwyg > p,
.register__copy {
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
margin-top: 2.5rem;
}
@media all and (min-width: 48em) {
.contactBlock__copy,
.register__content--wysiwyg > p,
.register__copy {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
.cardText__bio {
display: flex;
flex-wrap: wrap;
padding-top: 2.5rem;
}
.cardText__bio--reverse {
flex-direction: row-reverse;
}
@media all and (min-width: 48em) {
.cardText__bio {
padding-top: 80px;
padding-bottom: 45px;
}
}
.cardText__desc {
color: #1C2B39;
}
@media all and (min-width: 48em) {
.cardText__desc {
padding-left: calc(((100% + 1.125rem) / 6) * 1);
padding-top: 97px;
}
.cardText__bio--reverse .cardText__desc {
padding-left: 0;
padding-right: calc(((100% + 1.125rem) / 6) * 1);
}
}
.cardText__details {
border-bottom: 3px solid #A8192E;
padding-bottom: 30px;
}
.cardText__icons {
display: flex;
padding-top: 30px;
}
.cardText__icon {
width: 50px;
height: 50px;
background: #317E9F;
border-radius: 50%;
position: relative;
box-shadow: 4px 4px 0 0 rgba(28, 43, 57, 0.2);
}
.cardText__icon:hover {
background: #155672;
}
.cardText__svg {
fill: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.cardGrid {
background: #F7F7F7;
padding: 60px 0;
}
.cardGrid__flex-row {
display: flex;
flex-wrap: wrap;
}
.cardGrid__flex-col {
margin-bottom: 2.5rem;
}
@media all and (min-width: 48em) {
.cardGrid__flex-col {
flex: 1;
margin-bottom: 0;
}
}
.cardGrid__title {
padding-bottom: 60px;
text-align: center;
position: relative;
}
.cardGrid__title:after {
content: '';
position: absolute;
height: 3px;
width: 110px;
background-color: #A8192E;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
}
.cardGrid__cta {
display: flex;
justify-content: center;
}
@media all and (min-width: 48em) {
.cardGrid__cta {
padding-top: 60px;
}
}
.modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(35, 31, 32, 0.75);
z-index: 500;
}
.modal--fixed {
position: fixed;
}
.modal__close {
border: 0;
background: transparent;
padding: 0;
display: block;
margin-left: auto;
}
.modal__close svg {
color: #1C2B39;
}
.modal__fixed-header .modal__close {
position: absolute;
right: 0;
z-index: 100;
}
.modal__content {
position: absolute;
padding: 1.25rem 1.125rem;
top: 2.5rem;
left: 50%;
background: #fff;
transform: translateX(-50%);
width: 100%;
}
@media all and (min-width: 48em) {
.modal__content {
width: 50%;
}
}
.modal--fixed .modal__content {
max-height: 80vh;
overflow: auto;
padding-top: 0;
}
.modal__fixed-header {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 1.25rem 50px 1.25rem 0;
background: #fff;
z-index: 20;
}
/**
* Pages
*/
.profile__user-name {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.25;
color: #1C2B39;
}
@media all and (min-width: 48em) {
.profile__user-name {
font-size: clamp(1rem, 1vw + .5rem, 1.875rem);
}
}
@media all and (min-width: 73.14285714285714em) {
.profile__user-name {
font-size: 30px;
font-size: 1.875rem;
line-height: 1.2;
}
}
@media all and (min-width: 48em) {
.profile__row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
@media all and (min-width: 48em) {
.profile__row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.profile__col-1 {
padding: 2.5rem 6.25% 3.75rem 6.25%;
background-color: #F7F7F7;
padding-top: 2.5rem;
}
@media all and (min-width: 48em) {
.profile__col-1 {
padding-top: 3.75rem;
padding-right: 1.125rem;
width: calc((((( 87.5% + 1.125rem) / 12) * 3) + ((100% - 87.5% ) / 2)));
flex: 0 1 auto;
}
}
@media all and (min-width: 73.14285714285714em) {
.profile__col-1 {
width: calc((((1024px + 1.125rem) / 12) * 3) + ((100vw - 1024px) / 2));
padding-left: calc((100vw - 1024px) * 0.5);
}
}
@media all and (min-width: 48em) {
.profile__col-1 {
padding-top: 3.75rem;
padding-right: 1.125rem;
width: calc((((( 87.5% + 1.125rem) / 12) * 3) + ((100% - 87.5% ) / 2)));
flex: 0 1 auto;
}
}
@media all and (min-width: 73.14285714285714em) {
.profile__col-1 {
width: calc((((1024px + 1.125rem) / 12) * 3) + ((100vw - 1024px) / 2));
padding-left: calc((100vw - 1024px) * 0.5);
}
}
@media all and (min-width: 48em) {
.profile__col-1 {
padding-top: 3.75rem;
}
}
.profile__col-2 {
padding-top: 2.5rem;
padding-right: 6.25%;
padding-left: 6.25%;
}
@media all and (min-width: 48em) {
.profile__col-2 {
padding-top: 3.75rem;
width: calc((((( 87.5% + 1.125rem) / 12) * 8) + ((100% - 87.5% ) / 2)) - 1.125rem);
padding-left: 0;
flex: 0 1 auto;
}
}
@media all and (min-width: 73.14285714285714em) {
.profile__col-2 {
padding-right: calc((100vw - 1024px) * 0.5);
width: calc((((1024px + 1.125rem) / 12) * 8) + ((100vw - 1024px) / 2) - 1.125rem);
}
}
@media all and (min-width: 48em) {
.profile__col-2 {
padding-top: 3.75rem;
width: calc((((( 87.5% + 1.125rem) / 12) * 8) + ((100% - 87.5% ) / 2)) - 1.125rem);
padding-left: 0;
flex: 0 1 auto;
}
}
@media all and (min-width: 73.14285714285714em) {
.profile__col-2 {
padding-right: calc((100vw - 1024px) * 0.5);
width: calc((((1024px + 1.125rem) / 12) * 8) + ((100vw - 1024px) / 2) - 1.125rem);
}
}
.profile__welcome {
font-size: 16px;
font-size: 1rem;
line-height: 1.25;
font-family: "Faustina", "Times New Roman", Times, Georgia, serif;
color: #A8192E;
}
@media all and (min-width: 48em) {
.profile__welcome {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.22222222;
}
}
.profile__email {
text-decoration: none;
display: block;
color: #1C2B39;
margin-top: 0.625rem;
}
@media all and (max-width: 47.9375em) {
.profile__nav {
text-align: center;
}
}
@media all and (max-width: 47.9375em) {
.profile__nav-list {
display: flex;
justify-content: center;
}
}
.profile__nav-list-item {
position: relative;
}
.profile__nav-list-item.is-active {
background: #fff;
border-bottom: 4px solid #A8192E;
}
@media all and (min-width: 48em) {
.profile__nav-list-item.is-active {
border-bottom: none;
}
.profile__nav-list-item.is-active:before,
.profile__nav-list-item.is-active:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
}
.profile__nav-list-item.is-active:before {
left: 0;
background: #fff;
transform: translateX(-0.5625rem);
width: 0.5625rem;
}
.profile__nav-list-item.is-active:after {
right: 0;
background: #fff;
border-right: 4px solid #A8192E;
transform: translateX(1.125rem);
width: 1.125rem;
}
}
.profile__nav-list-item svg {
display: block;
font-size: 24px;
margin-bottom: 0.3125rem;
}
@media all and (min-width: 48em) {
.profile__nav-list-item svg {
display: inline-block;
margin-right: 0.5625rem;
margin-bottom: 0;
}
}
.profile__nav-link {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 10px;
color: #317E9F;
text-decoration: none;
text-align: center;
}
@media all and (min-width: 48em) {
.profile__nav-link {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.5;
display: block;
padding: 18px 10px 18px 0;
text-align: left;
}
}
.is-active .profile__nav-link {
color: #1C2B39;
}
.profile__form > .acf-notice.-error.-dismiss {
display: none;
}
.profile__edit {
background: transparent;
color: inherit;
border: 0;
margin: 0;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.44444444;
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 900;
position: relative;
color: #116DB6;
text-decoration: none;
display: inline-block;
display: inline-flex;
height: 100%;
justify-content: flex-end;
padding: 0;
}
.profile__edit:hover,
.profile__edit:focus,
.profile__edit.is-current {
background: transparent;
color: inherit;
}
.profile__edit:after {
content: '';
position: absolute;
background: #116DB6;
height: 1px;
bottom: 0;
left: 0;
right: 0;
}
.profile__edit:hover,
.profile__edit:focus,
.profile__edit.is-current {
color: #0a4370;
}
.profile__edit--large {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.8;
}
.profile__edit--small {
font-size: 16px;
font-size: 1rem;
line-height: 1.625;
}
.profile__edit--tiny {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.83333333;
}
.profile__edit[hidden] {
display: none;
}
.profile__logout-link {
font-size: 16px;
font-size: 1rem;
line-height: 1;
display: flex;
align-items: center;
color: #116DB6;
text-decoration: none;
margin-top: 3.75rem;
}
@media all and (max-width: 47.9375em) {
.profile__logout-link {
display: none;
}
}
.profile__logout-link svg {
margin-right: 10px;
}
.profile__field-instructions {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.42857143;
margin-top: 0.625rem;
}
.profile__field-instructions ul {
margin-top: 0.625rem;
}
.profile__form {
margin-top: 35px;
padding-bottom: 3.75rem;
}
.profile__form .acf-field label {
transition: all 200ms ease;
}
.profile__form .acf-field.js-profile-editable {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 50px 12px 15px 12px !important;
transition: padding 200ms ease;
}
.profile__form .acf-field.js-profile-editable .acf-input {
width: 100%;
}
.profile__form .acf-field.js-profile-editable .acf-label {
position: absolute;
top: 25px;
opacity: 1;
transition: opacity 200ms ease 200ms;
}
.profile__form .acf-field.js-profile-editable .acf-label label {
font-size: 14px !important;
font-size: 0.875rem !important;
line-height: 1.07142857 !important;
}
.profile__form .acf-field.js-profile-editable .acf-input-wrap {
display: inline-block;
width: 100%;
transition: width 200ms ease;
}
.profile__form .acf-field.js-profile-editable .acf-input-wrap input {
padding-left: 10px !important;
padding-right: 10px !important;
transition: padding 200ms ease;
}
.profile__form .acf-field.js-profile-editable:not(.is-revealed) {
padding-top: 15px !important;
}
.profile__form .acf-field.js-profile-editable:not(.is-revealed) .acf-label {
opacity: 0;
}
.profile__form .acf-field.js-profile-editable:not(.is-revealed) .acf-input-wrap {
width: 90%;
}
.profile__form .acf-field.js-profile-editable:not(.is-revealed) .acf-input-wrap input {
padding-left: 0px !important;
padding-right: 0px !important;
}
.profile__form .acf-field.profile__label-show:not(.is-revealed) {
padding-top: 50px !important;
}
.profile__form .acf-field.profile__label-show:not(.is-revealed) .acf-label {
opacity: 1;
}
.profile__form .acf-field.profile__label-show:not(.is-revealed) .acf-label label {
font-size: 20px !important;
font-size: 1.25rem !important;
line-height: 1 !important;
}
.profile__form .acf-field .acf-checkbox-list {
display: flex;
align-items: center;
margin-top: -20px;
flex-wrap: wrap;
}
.profile__form .acf-field .acf-checkbox-list li {
margin-right: 10px;
margin-top: 30px;
}
.profile__form .acf-field .acf-checkbox-list li:last-of-type {
margin-right: 0;
}
.profile__form .acf-input-wrap input:disabled {
border-color: transparent !important;
background: transparent !important;
}
.profile__sendInBlue iframe {
margin-left: -33px;
margin-bottom: -80px;
margin-top: -40px;
}
@media all and (min-width: 30em) {
.profile__sendInBlue iframe {
margin-left: -45px;
}
}
.patterns {
padding: 2.5rem 0;
}
.patterns__section {
margin: 2.5rem 0;
}
.patterns__subsection {
margin: 1.25rem 0;
}
.patterns__colors {
margin-bottom: 2.5rem;
}
.patterns__colors-flex {
display: flex;
flex-wrap: wrap;
margin: -0.625rem -0.5625rem;
}
.patterns__color {
width: 250px;
padding: 0.625rem 0.5625rem;
}
.patterns__color-swatch {
width: 100%;
padding-top: 50%;
}
.patterns__color-name {
padding: 0.625rem 0.28125rem;
}
.register {
padding: 3.75rem 0;
}
.register__form > .acf-notice.-error.-dismiss {
display: none;
}
.register__form .acf-field {
padding-left: 0 !important;
}
.register__form .acf-field--custom {
margin: 0;
border-top: #EEEEEE solid 1px;
}
@media all and (min-width: 48em) {
.register__content {
margin-right: calc(((100% + 1.125rem) / 6) * 1);
}
}
.register__content--wysiwyg > p {
margin-top: 25px;
}
.register__heading {
text-align: center;
margin-bottom: 30px;
font-weight: 700;
}
.register__copy {
margin-top: 25px;
}
.register__positions--desktop {
display: none;
}
@media all and (min-width: 48em) {
.register__positions--desktop {
display: block;
}
}
.register__positions--mobile {
display: block;
}
@media all and (min-width: 48em) {
.register__positions--mobile {
display: none;
}
}
.register__positions--header {
padding-bottom: 33px;
margin-bottom: 0.625rem;
border-bottom: 3px solid #A8192E;
text-align: center;
font-weight: 200;
}
@media all and (min-width: 48em) {
.register__positions--header {
text-align: left;
}
}
.positions p {
color: #1C2B39;
}
.positions__count {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.07142857;
}
@media all and (min-width: 48em) {
.positions__count {
font-size: 16px;
font-size: 1rem;
line-height: 1.25;
}
}
.positions__position {
display: flex;
padding-top: 1.25rem;
}
.positions__position--title {
color: #1C2B39;
color: #116DB6;
text-decoration: none;
}
.positions__position hr {
border-top: 1px solid #1C2B39;
}
.positions__position--info-container {
padding-bottom: 1.25rem;
}
.positions__position--details-wrap {
margin-top: 14px;
}
.positions__position--details-wrap p {
margin-top: 0;
display: inline;
}
.positions__position--details {
margin-right: 10px;
margin-top: 10px;
display: inline;
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
}
@media all and (min-width: 48em) {
.positions__position--details {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (min-width: 48em) {
.positions__position--details {
display: block;
}
}
.positions__position--details:not(:last-child) {
border-right: 2px solid #A8192E;
padding-right: 10px;
}
.positions__position--desc {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.07142857;
}
@media all and (min-width: 48em) {
.positions__position--desc {
font-size: 16px;
font-size: 1rem;
line-height: 1.25;
}
}
.positions__divider {
background-color: #1C2B39;
height: 2px;
opacity: 0.2;
border: none;
}
.positions__pagination {
padding-top: 30px;
padding-bottom: 60px;
display: flex;
align-items: center;
}
.positions__pagination .page-numbers {
color: #1C2B39;
text-decoration: none;
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
margin-right: 1.125rem;
}
.positions__pagination .page-numbers.current {
color: #fff;
width: 26px;
height: 26px;
background: #317E9F;
display: flex;
align-items: center;
justify-content: center;
}
.positions__pagination .prev,
.positions__pagination .next {
position: relative;
color: transparent;
}
.positions__pagination .prev:after,
.positions__pagination .next:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
border: solid #317E9F;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
}
.positions__pagination .prev:after {
transform: translate(-50%, -50%) rotate(135deg);
}
.positions__pagination .next:after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.positionsLanding__filter {
padding: 2.5rem 6.25% 3.75rem 6.25%;
background-color: #F7F7F7;
}
@media all and (min-width: 48em) {
.positionsLanding__filter {
padding-top: 3.75rem;
padding-right: 1.125rem;
width: calc((((( 87.5% + 1.125rem) / 12) * 4) + ((100% - 87.5% ) / 2)));
flex: 0 1 auto;
}
}
@media all and (min-width: 73.14285714285714em) {
.positionsLanding__filter {
width: calc((((1024px + 1.125rem) / 12) * 4) + ((100vw - 1024px) / 2));
padding-left: calc((100vw - 1024px) * 0.5);
}
}
@media all and (max-width: 47.9375em) {
.positionsLanding__filter {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
}
.positionsLanding__filter-checkbox-wrapper {
margin: 0.625rem 0;
}
.positions__position-image {
width: 150px;
flex-shrink: 0;
margin-right: 2.25rem;
display: none;
padding-bottom: 1.25rem;
}
@media all and (min-width: 48em) {
.positions__position-image {
display: block;
}
}
.positions__figure {
margin-top: 0;
}
.positions__figure:before {
padding-top: 100%;
}
.positionsLanding__reveal,
.resources__reveal {
display: flex;
align-items: center;
justify-content: space-between;
}
@media all and (min-width: 48em) {
.positionsLanding__reveal,
.resources__reveal {
display: none;
}
}
.positionsLanding__reveal svg,
.resources__reveal svg {
width: 24px;
height: 24px;
color: #116DB6;
}
.positionsLanding__reveal-btn {
display: none;
}
#positionsMap {
position: relative;
padding: 0 0 1.25rem;
}
#positionsMap:before {
content: '';
display: block;
position: relative;
top: 0;
left: 0;
right: 0;
padding-top: 61.3982%;
border: 1px solid #6499AF;
}
#positionsMap:after {
content: 'Loading Map...';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(0, 0, 0, 0.75);
}
#positionsMap.map-ready:after,
#positionsMap.map-ready:before {
display: none;
}
#positionsMap.map-ready #positionsMap_holder {
display: block;
}
@media all and (max-width: 47.9375em) {
#positionsMap {
display: none;
}
}
#positionsMap_holder {
display: none;
}
@media all and (max-width: 47.9375em) {
#positionsLanding-filter,
#resources__filter {
padding-top: 2.5rem;
}
#positionsLanding-filter:not(.is-revealed),
#resources__filter:not(.is-revealed) {
display: none;
}
}
@media all and (max-width: 47.9375em) {
.positionsLanding__progress {
display: none;
}
}
#positionsMap_outer {
left: 100% !important;
}
.positionsLanding__results {
padding-top: 2.5rem;
padding-right: 6.25%;
padding-left: 6.25%;
}
@media all and (min-width: 48em) {
.positionsLanding__results {
padding-top: 3.75rem;
width: calc((((( 87.5% + 1.125rem) / 12) * 7) + ((100% - 87.5% ) / 2)) - 1.125rem);
padding-left: 0;
flex: 0 1 auto;
}
}
@media all and (min-width: 73.14285714285714em) {
.positionsLanding__results {
padding-right: calc((100vw - 1024px) * 0.5);
width: calc((((1024px + 1.125rem) / 12) * 7) + ((100vw - 1024px) / 2) - 1.125rem);
}
}
.positionsPerma {
padding-bottom: 3.75rem;
padding-top: 80px;
}
@media all and (min-width: 62em) {
.positionsPerma {
padding-top: 110px;
}
}
.positionsPerma__row {
padding-top: 1.25rem;
padding-bottom: 0;
}
@media all and (min-width: 48em) {
.positionsPerma__row {
padding-top: 3.75rem;
}
}
.positionsPerma__title {
color: #1C2B39;
margin-top: 0;
color: #317E9F;
}
.positionsPerma__sidebar-title {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
}
.positionsPerma__sidebar-text {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.07142857;
margin-top: 5px;
}
@media all and (min-width: 48em) {
.positionsPerma__sidebar-text {
font-size: 16px;
font-size: 1rem;
line-height: 1.25;
}
}
.positionsPerma__benefits {
display: flex;
flex-wrap: wrap;
margin-left: -0.5625rem;
margin-right: -0.5625rem;
}
@media all and (min-width: 30em) {
.positionsPerma__benefits:before,
.positionsPerma__benefits:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.positionsPerma__benefits:after {
clear: both;
}
}
.positionsPerma__benefits li {
display: block;
}
@media all and (min-width: 30em) {
.positionsPerma__benefits li {
float: left;
}
}
.positionsPerma__benefits a {
display: block;
}
.positionsPerma__benefits:before,
.positionsPerma__benefits:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.positionsPerma__benefits:after {
clear: both;
}
.positionsPerma__benefits--benefit {
display: flex !important;
flex-direction: column;
align-items: center;
padding-bottom: 1.25rem;
flex: 0 0 auto;
width: calc((100% / 12) * 4);
padding-left: 0.5625rem;
padding-right: 0.5625rem;
}
@media all and (min-width: 48em) {
.positionsPerma__benefits--benefit {
width: 25%;
}
}
@media all and (min-width: 62em) {
.positionsPerma__benefits--benefit {
width: 15%;
}
}
.positionsPerma__benefits--benefit svg {
font-size: 70px;
margin-bottom: 10px;
margin-top: 20px;
}
.positionsPerma__benefits--benefit span {
font-size: 16px;
font-size: 1rem;
line-height: 1.25;
text-align: center;
}
.positionsPerma__info {
margin: 0;
padding: 0;
}
@media all and (max-width: 47.9375em) {
.positionsPerma__info {
display: flex;
flex-wrap: wrap;
margin-top: 1.25rem;
}
}
@media all and (min-width: 48em) {
.positionsPerma__info {
margin: 0;
}
}
.positionsPerma__info-group {
padding: 0.625rem 0;
}
@media all and (max-width: 47.9375em) {
.positionsPerma__info-group {
width: 50%;
flex: 1 0 auto;
}
}
.positionPerma__info-term {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.22222222;
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 900;
padding: 0;
margin: 0;
color: #841324;
}
.positionPerma__info-def {
font-size: 16px;
font-size: 1rem;
line-height: 1.625;
padding: 0;
margin: 0;
}
.positionsPerma__apply {
padding-bottom: 3.75rem;
}
@media all and (max-width: 47.9375em) {
.positionsPerma__apply {
display: flex;
flex-direction: column;
}
}
.positionsPerma__figure {
width: 100%;
margin-top: 0;
margin-bottom: 1.25rem;
padding-top: 100%;
position: relative;
}
.positionsPerma__figure img {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: hidden;
margin: 0;
}
.positionsPerma__figure img 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 .positionsPerma__figure img img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.positionsPerma__h3 {
margin-top: 0;
}
.positionsPerma__lists {
list-style: none;
padding-left: 0;
margin-top: 0;
margin-top: 0.625rem;
}
.positionsPerma__lists li {
padding-top: 5px;
padding-bottom: 5px;
}
@media all and (min-width: 48em) {
.positionsPerma__lists li {
padding-top: 10px;
padding-bottom: 10px;
}
}
.positionsPerma__lists li:before {
content: "\25CF";
color: #A8192E;
padding-right: 10px;
}
.resourcesPerma {
padding-top: 1.25rem;
padding-bottom: 3.75rem;
}
@media all and (min-width: 48em) {
.resourcesPerma {
padding-top: 0;
}
}
@media all and (min-width: 48em) {
.resourcesPerma .quote {
margin-bottom: 0;
}
}
@media all and (min-width: 48em) {
.resourcesPerma > .resourcesPerma__wrapper .resourcesPerma__row:first-child,
.quote ~ .resourcesPerma__wrapper .resourcesPerma__row:first-child {
padding-top: 0;
}
.resourcesPerma > .resourcesPerma__wrapper .resourcesPerma__row:first-child .resourcesPerma__bullet,
.quote ~ .resourcesPerma__wrapper .resourcesPerma__row:first-child .resourcesPerma__bullet {
margin-top: 63px;
}
.resourcesPerma > .resourcesPerma__wrapper .resourcesPerma__row:first-child .resourcesPerma__col--heading,
.quote ~ .resourcesPerma__wrapper .resourcesPerma__row:first-child .resourcesPerma__col--heading {
margin-top: 3.75rem;
}
}
.resourcesPerma__nav {
position: relative;
z-index: 10;
min-height: var(--nav-height);
display: none;
}
@media all and (min-width: 48em) {
.resourcesPerma__nav {
display: block;
}
}
.resourcesPerma__nav-sticky {
background-color: #FFFFFF;
box-shadow: 0 5px 10px 0 rgba(28, 43, 57, 0.3);
z-index: 10;
}
.sticky-on .resourcesPerma__nav-sticky {
position: fixed;
top: 0;
right: 0;
left: 0;
}
.resourcesPerma__nav--wrapper {
overflow: hidden;
}
.resourcesPerma__nav--list {
overflow-x: auto;
margin: 0 -0.5625rem;
padding: 0;
text-align: center;
white-space: nowrap;
}
@media all and (min-width: 48em) {
.resourcesPerma__nav--list {
margin: 0;
}
}
.resourcesPerma__nav--item {
display: inline-block;
flex: 0 0 auto;
padding: 0 0.5625rem;
width: 49.5%;
white-space: normal;
}
@media all and (min-width: 48em) {
.resourcesPerma__nav--item {
width: 19.5%;
padding: 0;
}
.resourcesPerma__nav--item:first-child {
text-align: left;
}
}
@media all and (max-width: 47.9375em) {
.resourcesPerma__nav--item:first-child {
display: none;
}
}
.resourcesPerma__nav--link {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.25;
display: block;
width: 100%;
height: 100%;
padding: 1.25rem 0;
color: #116DB6;
text-decoration: none;
}
@media all and (min-width: 48em) {
.resourcesPerma__nav--link {
font-size: 16px;
font-size: 1rem;
line-height: 1.125;
}
}
.resourcesPerma__nav--link:hover,
.resourcesPerma__nav--link:focus {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
color: #1C2B39;
}
.resourcesPerma__nav--link span {
position: relative;
display: inline-block;
}
@media all and (min-width: 48em) {
.resourcesPerma__nav--link span {
padding: 0 0.5625rem;
}
}
.resourcesPerma__nav--link span:after {
content: '';
position: absolute;
bottom: 0;
left: 0.5625rem;
right: 0.5625rem;
height: 0px;
background: #A8192E;
transform: translateY(1.25rem);
transition: height 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.resourcesPerma__nav--link.is-active span:after {
height: 4px;
}
@media all and (min-width: 48em) {
overflow-x: auto;
}
.resourcesPerma__row {
display: flex;
align-items: stretch;
flex-direction: column;
padding-bottom: 1.25rem;
}
@media all and (min-width: 48em) {
.resourcesPerma__row {
flex-direction: row;
}
}
@media all and (min-width: 62em) {
.resourcesPerma__row {
padding-bottom: 3.75rem;
}
}
.resourcesPerma__row--anchor {
position: relative;
top: -5.625rem;
}
.resourcesPerma__col-1 {
display: none;
position: relative;
}
@media all and (min-width: 48em) {
.resourcesPerma__col-1 {
flex: 0 0 auto;
display: block;
width: calc(((100% + 1.125rem) / 9) * 1);
}
.resourcesPerma__col-1:before {
content: '';
position: absolute;
height: calc(100% + 1.25rem);
background-color: #A8192E;
width: 4px;
left: 34px;
z-index: 0;
}
}
@media all and (min-width: 62em) {
.resourcesPerma__col-1 {
width: calc(((100% + 1.125rem) / 12) * 2);
}
.resourcesPerma__col-1:before {
height: calc(100% + 3.75rem);
}
}
.resourcesPerma__bullet {
position: relative;
z-index: 1;
height: 26px;
width: 26px;
margin-left: 23px;
margin-top: 25px;
}
.resourcesPerma__col-2 {
width: 100%;
}
@media all and (min-width: 48em) {
.resourcesPerma__col-2 {
padding-right: calc(((100% + 1.125rem) / 9) * 1);
}
}
@media all and (min-width: 62em) {
.resourcesPerma__col-2 {
padding-right: calc(((100% + 1.125rem) / 12) * 2);
}
}
.resourcesPerma__col--heading {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.25;
color: #1C2B39;
text-transform: none;
}
@media all and (min-width: 48em) {
.resourcesPerma__col--heading {
font-size: 30px;
font-size: 1.875rem;
line-height: 1.2;
}
}
.resourcesPerma__sidebar-nav {
position: relative;
max-width: 255px;
background-color: #fff;
box-shadow: 0 5px 10px 0 rgba(28, 43, 57, 0.3);
padding: 0.5625rem;
z-index: 1;
}
.resourcesPerma__sidebar-text {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
font-size: 20px;
font-size: 1.25rem;
line-height: 1.8;
color: #A8192E;
}
@media all and (min-width: 62em) {
.resourcesPerma__sidebar-text {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.5;
}
}
.resourcesPerma__related {
background-color: #F7F7F7;
padding-top: 3.75rem;
padding-bottom: 5.625rem;
}
@media all and (min-width: 48em) {
.resourcesPerma__related-col {
padding-left: calc(((100% + 1.125rem) / 6) * 1);
}
}
@media all and (max-width: 47.9375em) {
.resourcesPerma__related-col .button__secondary {
display: block;
margin-left: auto;
margin-right: auto;
}
}
.resourcesPerma__related-header {
padding-bottom: 33px;
margin-bottom: 0.625rem;
border-bottom: 3px solid #A8192E;
text-align: center;
}
@media all and (min-width: 48em) {
.resourcesPerma__related-header {
text-align: left;
}
}
.resourcesPerma__related-jobs {
padding-bottom: 1.25rem;
border-bottom: 1px solid #1C2B39;
text-align: center;
}
.resourcesPerma__related-jobs a {
text-decoration: none;
}
.resourcesPerma__related-jobs h3 {
color: #116DB6;
padding-top: 1.25rem;
margin-top: 0;
}
.resourcesPerma__related-jobs h3:hover,
.resourcesPerma__related-jobs h3focus {
color: #1C2B39;
}
@media all and (min-width: 48em) {
.resourcesPerma__related-jobs {
text-align: left;
}
}
.resourcesPerma__related-resources {
display: flex;
align-items: center;
}
.resourcesPerma__related-resources-figure {
width: 150px;
height: 150px;
flex-basis: 150px;
}
.resourcesPerma__related-resources-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 .resourcesPerma__related-resources-figure-img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
@media all and (max-width: 47.9375em) {
.resourcesPerma__related-resources {
flex-direction: column;
text-align: center;
margin-bottom: 40px;
}
}
.resourcesPerma__related-resources-figure {
min-width: 150px;
}
.resourcesPerma__related-resources-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 .resourcesPerma__related-resources-figure-img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
@media all and (min-width: 48em) {
.resourcesPerma__related-resources-figure {
margin-right: 1.125rem;
}
}
.resourceTable {
width: 100%;
margin-top: 2.5rem;
margin-bottom: 3.75rem;
}
.resourceTable__leadin {
max-width: 665px;
}
.resourceTable__row {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.07142857;
display: flex;
flex-wrap: wrap;
padding: 0 0 5px 0;
flex-direction: column;
margin-bottom: 2.5rem;
box-shadow: 0 5px 10px 0 rgba(28, 43, 57, 0.3);
}
@media all and (min-width: 48em) {
.resourceTable__row {
flex-direction: row;
margin-bottom: 0;
border-bottom: 1px solid #1C2B39;
box-shadow: none;
}
}
.resourceTable__row--header {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
display: none;
text-transform: uppercase;
border-bottom: 3px solid #A8192E;
color: #A8192E;
}
@media all and (min-width: 48em) {
.resourceTable__row--header {
display: flex;
}
}
.resourceTable__cell {
padding: 15px 10px;
text-align: left;
flex-basis: 20%;
overflow: hidden;
max-width: 100%;
}
.resourceTable__cell--state {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
background-color: #A8192E;
color: #fff;
}
@media all and (min-width: 48em) {
.resourceTable__cell--state {
background-color: transparent;
color: #1C2B39;
}
}
.resourceTable__mobile-label {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
}
@media all and (min-width: 48em) {
.resourceTable__mobile-label {
display: none;
}
}
.resources__count {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.07142857;
}
@media all and (min-width: 48em) {
.resources__count {
font-size: 16px;
font-size: 1rem;
line-height: 1.25;
}
}
.resources__resource--row {
display: block;
}
@media all and (min-width: 48em) {
.resources__resource--row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}
}
.resources__resource {
box-sizing: border-box;
margin-top: 1.25rem;
box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.2);
width: 100%;
}
@media all and (min-width: 48em) {
.resources__resource {
width: 32%;
}
}
.resources__resource--title {
color: #1C2B39;
margin-top: 0;
}
.resources__resource--image {
width: 100%;
height: 20vh;
min-height: 150px;
overflow: hidden;
position: relative;
}
.resources__resource--info-container {
padding: 40px 20px 30px;
}
.resources__resource--filler {
visibility: hidden;
}
.resources__resource--details-wrap {
display: flex;
}
.resources__resource--details {
margin-right: 10px;
}
.resources__resource--details:not(:last-child) {
border-right: 2px solid #A8192E;
padding-right: 10px;
}
.resources__resource--desc {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.07142857;
}
@media all and (min-width: 48em) {
.resources__resource--desc {
font-size: 16px;
font-size: 1rem;
line-height: 1.25;
}
}
.resources__categories {
padding-left: 0;
list-style: none outside none;
margin: 0 0 -0.625rem 0;
}
.resources__categories-item {
padding: 0;
margin: 0.625rem 0;
display: inline-block;
}
.resources__categories-link {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.14285714;
letter-spacing: 0.07142857em;
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 900;
position: relative;
min-width: 80px;
height: 100%;
text-transform: uppercase;
text-align: center;
cursor: pointer;
display: inline-block;
height: auto;
text-decoration: none;
}
.resources__categories-link span {
position: relative;
display: block;
background-color: #fff;
border: 2px solid #116DB6;
border-radius: 20px;
padding: 10px 20px !important;
width: 100%;
color: #116DB6;
transition: padding 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.resources__categories-link span:before {
content: '';
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
background: url('../../../../lbcore/resources/icons/check-circle-white.svg') no-repeat;
width: 20px;
height: 20px;
opacity: 0;
}
.resources__categories-link.is-active span,
.resources__categories-link input:checked ~ span {
background: #116DB6;
color: #fff;
padding-left: 40px !important;
}
.resources__categories-link.is-active span:before,
.resources__categories-link input:checked ~ span:before {
-webkit-animation-name: fade-in;
animation-name: fade-in;
-webkit-animation-duration: 200ms;
animation-duration: 200ms;
-webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.resources__categories-link:focus span,
.resources__categories-link:hover span {
border-color: #0a4370;
background: #0a4370;
color: #fff;
}
.resources__categories-link input[type="checkbox"],
.resources__categories-link input[type="radio"] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
opacity: 0;
}
.resources__reveal {
padding-top: 1.25rem;
}
#resources__filter {
display: block;
}
@media all and (max-width: 47.9375em) {
.resources__filter-copy {
display: none;
}
}
@media all and (max-width: 47.9375em) {
.resources__results {
display: none;
}
}
@media all and (max-width: 47.9375em) {
.resources__col-1 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
}
.communication__forms iframe {
margin-left: -33px;
margin-bottom: -80px;
margin-top: -40px;
}
@media all and (min-width: 30em) {
.communication__forms iframe {
margin-left: -45px;
}
}
.history__position {
display: flex;
padding-top: 1.25rem;
}
.history__position--title {
color: #1C2B39;
color: #116DB6;
text-decoration: none;
}
.history__position hr {
border-top: 1px solid #1C2B39;
}
.history__position-title {
color: #1C2B39;
color: #116DB6;
text-decoration: none;
}
.history__position--details-wrap {
margin-top: 14px;
}
.history__position--details-wrap p {
margin-top: 0;
display: inline;
}
.history__position--details {
margin-right: 10px;
margin-top: 10px;
display: inline;
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
}
@media all and (min-width: 48em) {
.history__position--details {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (min-width: 48em) {
.history__position--details {
display: block;
}
}
.history__position--details:not(:last-child) {
border-right: 2px solid #A8192E;
padding-right: 10px;
}
.history__position--info-container {
padding-bottom: 1.25rem;
}
.history__position-image {
width: 150px;
flex-shrink: 0;
margin-right: 2.25rem;
display: none;
padding-bottom: 1.25rem;
}
@media all and (min-width: 48em) {
.history__position-image {
display: block;
}
}
.history__figure {
margin-top: 0;
}
.history__figure:before {
padding-top: 100%;
}
.history__divider {
background-color: #1C2B39;
height: 2px;
opacity: 0.2;
border: none;
}
.error {
position: relative;
background: radial-gradient(circle, #155672 0%, #317E9F 51.01%, #6499AF 100%);
padding-top: 3.75rem;
padding-bottom: 3.75rem;
}
@media all and (min-width: 48em) {
.error {
padding-top: 186px;
padding-bottom: 186px;
}
}
.error__figure {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: hidden;
margin: 0;
z-index: 0;
}
.error__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 .error__figure img {
height: auto;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.error__content {
position: relative;
text-align: center;
z-index: 1;
}
@media all and (min-width: 48em) {
.error__content {
margin-right: 33.3333%;
text-align: left;
}
}
.error__tagline {
font-family: "Faustina", "Times New Roman", Times, Georgia, serif;
color: #fff;
letter-spacing: 1px;
}
.error__headline {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 300;
font-size: 36px;
font-size: 2.25rem;
line-height: 1.16666667;
color: #fff;
text-transform: none;
}
@media all and (min-width: 62em) {
.error__headline {
font-size: 48px;
font-size: 3rem;
line-height: 1.125;
}
}
.tribe-events p,
.tribe-events div {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif !important;
font-weight: 400 !important;
}
.tribe-events a,
.tribe-events h1,
.tribe-events h2,
.tribe-events h3,
.tribe-events h4,
.tribe-events h5 {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif !important;
font-weight: 700 !important;
}
.tribe-events .tribe-common {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif !important;
font-weight: 400 !important;
}
.tribe-events .tribe-common.tribe-common-h1,
.tribe-events .tribe-common.tribe-common-h2,
.tribe-events .tribe-common.tribe-common-h3,
.tribe-events .tribe-common.tribe-common-h4,
.tribe-events .tribe-common.tribe-common-h5,
.tribe-events .tribe-common.tribe-common-h6,
.tribe-events .tribe-common.tribe-common-h7,
.tribe-events .tribe-common.tribe-common-h8 {
font-family: "Roboto", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif !important;
font-weight: 700 !important;
}
.site .site-content .tribe-events .tribe-events-l-container {
padding-bottom: 40px;
}
.events-form .nf-form-content {
max-width: 999999px;
margin: 0;
padding: 20px 0 80px 0;
}
.single-tribe_events .tribe-events-single-section {
order: 1 !important;
}
.single-tribe_events.tribe-events-event-url {
margin-left: 0;
}
.single-tribe_events .tribe-events-event-meta:before {
border: none;
}
.single-tribe_events .tribe-events-single-event-description,
.single-tribe_events .tribe-events-cal-links {
border: none !important;
}
.single-tribe_events .tribe-events-abbr {
text-decoration: none;
font-weight: 600;
font-size: 15px;
}
.single-tribe_events .tribe-events-button {
font-size: 12px;
}
.single-tribe_events .tribe-events-button:first-of-type {
padding-left: 0;
}
@media all and (min-width: 48em) {
.events__figure {
margin-left: 40px;
}
}
body.login {
background-color: white;
}
body.login div#login h1 a {
background-image: url(https://usrl.imgix.net/wp-content/uploads/2020/10/12155055/USRenaLink-logo.png);
padding-bottom: 30px;
background-position: 50% 50%;
background-size: contain;
width: 100%;
}
body.login p.message {
border-left-color: transparent;
}
/**
* 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
*/
/*# sourceMappingURL=../../build/css/maps/motif.css.map */