/* Minification failed. Returning unminified contents.
(1572,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1573,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1574,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1575,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1576,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1577,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1578,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1579,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1580,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1581,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1582,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1583,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1584,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1585,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1586,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1587,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1588,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1589,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1590,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1591,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1592,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1593,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1594,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1595,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1596,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1597,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1598,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2200,17): run-time error CSS1039: Token not allowed after unary operator: '-bright-blue'
*/
/**
* Swiper 4.2.6
* Most modern mobile touch slider and framework with hardware accelerated transitions
* http://www.idangero.us/swiper/
*
* Copyright 2014-2018 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: May 1, 2018
*/
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
.swiper-invisible-blank-slide {
visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: height, -webkit-transform;
transition-property: height, -webkit-transform;
-o-transition-property: transform, height;
transition-property: transform, height;
transition-property: transform, height, -webkit-transform;
}
/* 3D Effects */
.swiper-container-3d {
-webkit-perspective: 1200px;
perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal,
.swiper-container-wp8-horizontal > .swiper-wrapper {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.swiper-container-wp8-vertical,
.swiper-container-wp8-vertical > .swiper-wrapper {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto;
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-lock {
display: none;
}
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: 300ms opacity;
-o-transition: 300ms opacity;
transition: 300ms opacity;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 10px;
left: 0;
width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
-webkit-transform: scale(0.66);
-ms-transform: scale(0.66);
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
-webkit-transform: scale(0.66);
-ms-transform: scale(0.66);
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33);
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #007aff;
}
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 6px 0;
display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
-webkit-transition: 200ms top, 200ms -webkit-transform;
transition: 200ms top, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms top;
transition: 200ms transform, 200ms top;
transition: 200ms transform, 200ms top, 200ms -webkit-transform;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms left, 200ms -webkit-transform;
transition: 200ms left, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms left;
transition: 200ms transform, 200ms left;
transition: 200ms transform, 200ms left, 200ms -webkit-transform;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms right, 200ms -webkit-transform;
transition: 200ms right, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms right;
transition: 200ms transform, 200ms right;
transition: 200ms transform, 200ms right, 200ms -webkit-transform;
}
/* Progress */
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25);
position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #007aff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #ffffff;
}
.swiper-pagination-progressbar.swiper-pagination-white {
background: rgba(255, 255, 255, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
background: #ffffff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000000;
}
.swiper-pagination-progressbar.swiper-pagination-black {
background: rgba(0, 0, 0, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
background: #000000;
}
.swiper-pagination-lock {
display: none;
}
/* Scrollbar */
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
.swiper-scrollbar-lock {
display: none;
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.swiper-slide-zoomed {
cursor: move;
}
/* Preloader */
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
display: block;
content: '';
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-cube {
overflow: visible;
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.swiper-container-cube .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0;
}
.swiper-container-flip {
overflow: visible;
}
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-container-coverflow .swiper-wrapper {
/* Windows 8 IE 10 fix */
-ms-perspective: 1200px;
}
/* Minification failed. Returning unminified contents.
(620,48): run-time error CSS1019: Unexpected token, found '@charset'
(620,57): run-time error CSS1019: Unexpected token, found '"UTF-8"'
(620,64): run-time error CSS1019: Unexpected token, found ';'
(805,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(806,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(807,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(808,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(809,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(810,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(811,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(812,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(813,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(814,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(815,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(816,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(817,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(818,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(819,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(820,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(821,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(822,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(823,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(824,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(825,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(826,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(827,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(828,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(829,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(830,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(831,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1373,15): run-time error CSS1039: Token not allowed after unary operator: '-bright-blue'
(2959,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2960,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(5602,5): run-time error CSS1019: Unexpected token, found '@keyframes'
(5603,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '100%'
*/
/**
* Swiper 4.2.6
* Most modern mobile touch slider and framework with hardware accelerated transitions
* http://www.idangero.us/swiper/
*
* Copyright 2014-2018 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: May 1, 2018
*/
@font-face {
font-family: "Helvetica Now";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/fonts/HelveticaNowText.otf") format("opentype");
}
@font-face {
font-family: "Helvetica Now";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/fonts/HelveticaNowTextBold.otf") format("opentype");
}
@font-face {
font-family: "Helvetica Now";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/fonts/HelveticaNowTextBold.otf") format("opentype");
}
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
}
.swiper-invisible-blank-slide {
visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: height, -webkit-transform;
transition-property: height, -webkit-transform;
-o-transition-property: transform, height;
transition-property: transform, height;
transition-property: transform, height, -webkit-transform;
}
/* 3D Effects */
.swiper-container-3d {
-webkit-perspective: 1200px;
perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal,
.swiper-container-wp8-horizontal > .swiper-wrapper {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.swiper-container-wp8-vertical,
.swiper-container-wp8-vertical > .swiper-wrapper {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto;
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto;
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-lock {
display: none;
}
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: 300ms opacity;
-o-transition: 300ms opacity;
transition: 300ms opacity;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 10px;
left: 0;
width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
-webkit-transform: scale(0.66);
-ms-transform: scale(0.66);
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
-webkit-transform: scale(0.66);
-ms-transform: scale(0.66);
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33);
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #007aff;
}
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 6px 0;
display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
-webkit-transition: 200ms top, 200ms -webkit-transform;
transition: 200ms top, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms top;
transition: 200ms transform, 200ms top;
transition: 200ms transform, 200ms top, 200ms -webkit-transform;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms left, 200ms -webkit-transform;
transition: 200ms left, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms left;
transition: 200ms transform, 200ms left;
transition: 200ms transform, 200ms left, 200ms -webkit-transform;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms right, 200ms -webkit-transform;
transition: 200ms right, 200ms -webkit-transform;
-o-transition: 200ms transform, 200ms right;
transition: 200ms transform, 200ms right;
transition: 200ms transform, 200ms right, 200ms -webkit-transform;
}
/* Progress */
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25);
position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #007aff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #ffffff;
}
.swiper-pagination-progressbar.swiper-pagination-white {
background: rgba(255, 255, 255, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
background: #ffffff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000000;
}
.swiper-pagination-progressbar.swiper-pagination-black {
background: rgba(0, 0, 0, 0.25);
}
.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
background: #000000;
}
.swiper-pagination-lock {
display: none;
}
/* Scrollbar */
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
.swiper-scrollbar-lock {
display: none;
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.swiper-slide-zoomed {
cursor: move;
}
/* Preloader */
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
display: block;
content: '';
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-cube {
overflow: visible;
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.swiper-container-cube .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0;
}
.swiper-container-flip {
overflow: visible;
}
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-container-coverflow .swiper-wrapper {
/* Windows 8 IE 10 fix */
-ms-perspective: 1200px;
}
/*! Cresa - cresa.com styles @version v1.1.3 */ @charset "UTF-8";
/* ==========================================================================
CRESA
========================================================================== */
/**
* Using the following framework:
* inuitcss, by @csswizardry
*
* github.com/inuitcss | inuitcss.com
*/
/**
* CONTENTS
*
* SETTINGS
* Config...............Project-level configuration and feature switches.
* Core.................inuitcss' core and setup settings.
* Global...............Project-wide variables and settings.
* Colours..............Colours used throughout the site
* Typography...........Where the type stuff is defined
* YIQ..................Contrast stuff, very nice addition
* Root.................CSS Variables, for when you really need to access
* that information from the browser
*
*
* TOOLS
* Font-size............A mixin which guarantees baseline-friendly line-heights.
* Clearfix.............Micro clearfix mixin.
* Hidden...............Mixin for hiding elements.
* Sass MQ..............inuitcss' default media query manager.
* Sass YIQ.............A nice way handle the contrast
* Flex.................Flex some of the things
* Buttons..............Button mixins // Did not get time to finish this
* Unit.................Foundation helper to strip units and add rem-calc
* Chevrons.............Tools helper to prevent the need to embed SVG every time we need a new chevron in the CSS
*
*
* GENERIC
* Box-sizing...........Better default 'box-sizing'.
* Normalize.css........A level playing field using @necolas' Normalize.css.
* Reset................A tiny reset to complement Normalize.css.
* Shared...............Sensibly and tersely share some global commonalities
* (particularly useful when managing vertical rhythm).
*
*
* ELEMENTS
* Page.................Set up our document's default 'font-size' and
* 'line-height'.
* Page.................Add some additional page styles
* Headings.............Very minimal (i.e. only font-size information) for
* headings 1 through 6.
* Images...............Base image styles.
* Tables...............Simple table styles.
* Headings.............Default styling for the headers
*
*
* OBJECTS
* Layout...............Generic layout module.
* Layout...............Layout overrides.
* Media................Image- and text-like content side by side. The
* poster-child of OOCSS.
* Flag.................Table-layout-based advancement on the Media object.
* List-bare............Lists with no bullets or indents.
* List-inline..........A list whose items all site in a line.
* Box..................Simple boxing abstraction - extended.
* Bar..................Used to display titles on a page
* Block................Image-on-top-of-text object.
* Card.................More opinionated version of a block
* Google Map Static....Used on the sublease detail page to show an image
* Ratio................A container for maintaining aspect ratio of content.
* Crop.................Provide a cropping context for media (images, etc.).
* Table................Classes for manipulating 'table's.
* Pack.................Pack items into available horizontal space. //not used
* Tiles................Add some tiles into the mix.
* Tiles Card...........For when your tiles can't just be 'tiles'.
* Section..............Ensure the page does not exceed the defined width
* Form.................Form core styling
* Accordion............Click to open, click to close, styling for just the accordion
* Image-hover..........Image hover class to toggle two images on hover
* Alert................Alert messages for success, info, error and warning
* Modal................Simple Modal window for displaying lightbox content
* Flex-list............Displays a list of items that have flex enabled on them
* Tabs.................Tabbed styling used in the search results
* Loader...............Animated spinner for showing before content has loaded
*
*
* COMPONENTS
* Overlay..............Lightbox pattern
* Buttons..............Button variations
* Header...............Various header variations for the top of each page
* Logo.................The logo for the header footer and inverse version
* Primary-nav..........The main navigation for Cresa.com
* Dropdown-menu........Basic dropdown menu 1 level deep
* Office-selector......Took far too long but we got it done, requires JS
* Language-selector....Like the dropdown menu but centered
* Icon-base............Base styles for icons
* Icon-symbol..........Generated Icon sprite run from gulp 'gulp imagemin'
* Page-header..........The header on each page includes image and title with description
* Grid-hero............The hero, consists of an image with centered text
* and maybe some descriptive text.
* Grid-hero-local......Used on the local homepages
* Bio-header...........The bio header is different to the other headers
* Bio-details..........Used for information about a person at Cresa
* Icon-tile............Styled square tiles used for links on the homepage
* Image-tile...........Styled square tiles used for images on the insights page
* Typeahead............The global search bar and dropdown that appears when you type
* Icon-card............Used to display an icon and additional title
* Card-flex-list.......A wrapper class for displaying flexible spacings between cards
* Card.................A component version of a media object in vertical form
* Person Card..........Found on the person search page it displays a person image, title and job title
* Author...............Used on the blog pages to display an author image and basic details
* Carousel.............Using swiper
* Form.................Basic form styling
* Tag..................Tags used on the search results page and bio pages
* Border-tile..........Because who only wants one tile patten?!
* Section-title........The yellow overhanging title on the home pages
* Footer...............Generic Footer stykes
* Footer-nav...........WIP: Exactly what it says on the tin
* Horizontal-serarator.A fancy version of a hr
* Blockquote...........Styling for a quite
* Tooltips.............Styling and positioning for the tooltips
* Stat.................Statistic tiles
* Pagination...........The numbers at the bottom of a results list
* Article..............Used on the blog pages
* Calculator-office....Calculators to work out office space
* Calculator-storage...Calculator to work out storage space
*
*
* UTILITIES
* Clearfix.............Bind our clearfix onto a utility class.
* Widths...............Simple width helper classes.
* Headings.............Reassigning our heading styles to helper classes.
* Spacings.............Nudge bits of the DOM around with these spacing
* classes.
* Responsive-Spacings..Enhances the function of normal spacings for
* responsive usage.
* Print................Reset-like styles taken from the HTML5 Boilerplate.
//* Hide.................Removed
* Visibility...........Helper classes to hide content
* headings.............Allows for heading sizes to be applied to other elements
* colours..............Set various colour options
* text.................Text alignment
* Overflow.............Overflow
* Overlap..............Overlap content
*/
/* ========================================================================
#CONFIG
======================================================================== */
/* ========================================================================
#GLOBAL
======================================================================== */
/* ========================================================================
#COLOURS
======================================================================== */
/**
* CONTENTS
*
* COLOURS
* Brand........Brand colours used to define colours only
* Highlights...Colours mainly used for backgrounds and accents
* Neutral......Numbered system to define brightness of colour $color-gray-10" means "10% gray".
* Utility......Colours to provide feedback.
* Text.........Anything that's not a link mainly the body copy.
* Heading......Default header colours.
* Link.........Header colours the do not have a link applied to them.
* Border.......Accent colours used for separation.
* Core.........inuitcss’ core and setup settings.
* Global.......Project-wide variables and settings.
*/
/*
* Assign, the grays to a neutral colour, these are the colour names defined within the Zeplin file
*/
/*
* Colours below use the colours defined above to remove the association between colour names and elements/components
*/
/* ==========================================================================
#TYPOGRAPHY
========================================================================== */
/* ==========================================================================
#YIQ
========================================================================== */
/* ==========================================================================
#ROOT
========================================================================== */
:root {
--midnight-blue: #001e5a;
--stadium-blue: #243e8c;
--bright-blue: #0056da;
--goldenrod: #ffb600;
--white: #fff;
--dark-gray: #595959;
--light-gray: #e6e6e6;
--lighter-gray: #f2f4f7;
--primary: #001e5a;
--secondary: #0056da;
--secondary-light: #243e8c;
--secondary-lighter: #f0f6ff;
--tertiary: #ffb600;
--success: green;
--info: #0192d0;
--danger: #ff0000;
--light: #e6e6e6;
--pale: #f2f4f7;
--dark: #595959;
--breakpoint-tiny: 0px;
--breakpoint-mobile: 321px;
--breakpoint-tablet: 740px;
--breakpoint-desktop: 980px;
--breakpoint-wide: 1440px;
--font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-family-headings: "Helvetica Now", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--animation-speed: 200ms;
}
/* ==========================================================================
#VISIBILITY
========================================================================== */
/* ==========================================================================
#FLEX
========================================================================== */
/* ==========================================================================
#BUTTONS
========================================================================== */
/* ==========================================================================
#UNITS
========================================================================== */
/* ==========================================================================
#BOX-SIZING
========================================================================== */
/**
* More sensible default box-sizing:
* css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main {
/* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */
}
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details,
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
/* ==========================================================================
#RESET
========================================================================== */
/**
* A very simple reset that sits on top of Normalize.css.
*/
body,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend {
margin: 0;
padding: 0;
}
/**
* Remove trailing margins from nested lists.
*/
li > ol,
li > ul {
margin-bottom: 0;
}
/**
* Remove default table spacing.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/**
* 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
* on fieldsets.
*/
fieldset {
min-width: 0;
/* [1] */
border: 0;
}
/* ==========================================================================
#SHARED
========================================================================== */
/**
* Shared declarations for certain elements.
*/
/**
* Always declare margins in the same direction:
* csswizardry.com/2012/06/single-direction-margin-declarations
*/
address,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, ol, ul,
figure,
hr,
table,
fieldset {
margin-bottom: 20px;
}
/**
* Consistent indentation for lists.
*/
dd, ol, ul {
margin-left: 20px;
}
/* ==========================================================================
#PAGE
========================================================================== */
/**
* Simple page-level setup.
*
* 1. Set the default `font-size` and `line-height` for the entire project,
* sourced from our default variables. The `font-size` is calculated to exist
* in ems, the `line-height` is calculated to exist unitlessly.
* 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
* navigating between pages that do/do not have enough content to produce
* scrollbars naturally.
* 3. Ensure the page always fills at least the entire height of the viewport.
*/
html {
font-size: 1em;
/* [1] */
line-height: 1.5;
/* [1] */
overflow-y: scroll;
/* [2] */
min-height: 100%;
/* [3] */
}
/* ==========================================================================
#PAGE from Desktop
========================================================================== */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
/**
* Define some additional base styles
*/
body {
background: #fff;
color: #001e5a;
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
min-height: 100vh;
min-width: 320px;
display: flex;
flex-direction: column;
padding: 0;
}
@media (min-width: 61.25em) {
body {
font-size: 1.3em;
}
}
[tabindex="-1"]:focus {
outline: 0 !important;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
a {
text-decoration: none;
color: var(--bright-blue);
}
address {
font-style: normal;
}
:focus {
outline: 2px dotted;
outline-color: black !important;
}
/* ==========================================================================
#IMAGES
========================================================================== */
/**
* 1. Fluid images for responsive purposes.
* 2. Offset `alt` text from surrounding copy.
* 3. Setting `vertical-align` removes the whitespace that appears under `img`
* elements when they are dropped into a page as-is. Safer alternative to
* using `display: block;`.
*/
img {
max-width: 100%;
/* [1] */
font-style: italic;
/* [2] */
vertical-align: middle;
/* [3] */
}
/*------------------------------------*\
IMAGES
\*------------------------------------*/
/**
Styling for the base img tag
*/
img {
height: auto;
}
/* ==========================================================================
#TABLES
========================================================================== */
/**
* 1. Ensure tables fill up as much space as possible.
*/
table {
width: 100%;
/* [1] */
}
/* ==========================================================================
#HEADINGS
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Helvetica Now", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
h1,
h2,
h3 {
font-weight: 500;
}
h4,
h5,
h6 {
font-weight: 500;
}
@media all {
heading--404 {
font-size: 3rem;
line-height: 1.2;
margin-top: 0.625rem;
margin-bottom: 0.625rem;
}
h1 {
font-size: 2rem;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0.3125rem;
}
h2 {
font-size: 1.5rem;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0.3125rem;
}
h3 {
font-size: 1.3125rem;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0.3125rem;
}
h4 {
font-size: 1.125rem;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0.3125rem;
}
h5 {
font-size: 1.0625rem;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0.3125rem;
}
h6 {
font-size: 1rem;
line-height: 1.2;
margin-top: 0;
margin-bottom: 0.3125rem;
}
}
@media (min-width: 61.25em) {
heading--404 {
font-size: 5.3125rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 2rem;
}
h4 {
font-size: 1.5rem;
}
h5 {
font-size: 1.25rem;
}
h6 {
font-size: 1rem;
}
}
/* ==========================================================================
#SVG
========================================================================== */
svg {
fill: currentColor;
max-width: 100%;
}
/* ==========================================================================
#LAYOUT
========================================================================== */
/**
* Grid-like layout system.
*
* The layout object provides us with a column-style layout system. This file
* contains the basic structural elements, but classes should be complemented
* with width utilities, for example:
*
* <div class="o-layout">
* <div class="o-layout__item u-1/2">
* </div>
* <div class="o-layout__item u-1/2">
* </div>
* </div>
*
* The above will create a two-column structure in which each column will
* fluidly fill half of the width of the parent. We can have more complex
* systems:
*
* <div class="o-layout">
* <div class="o-layout__item u-1/1 u-1/3@medium">
* </div>
* <div class="o-layout__item u-1/2 u-1/3@medium">
* </div>
* <div class="o-layout__item u-1/2 u-1/3@medium">
* </div>
* </div>
*
* The above will create a system in which the first item will be 100% width
* until we enter our medium breakpoint, when it will become 33.333% width. The
* second and third items will be 50% of their parent, until they also become
* 33.333% width at the medium breakpoint.
*
* We can also manipulate entire layout systems by adding a series of modifiers
* to the `.o-layout` block. For example:
*
* <div class="o-layout o-layout--reverse">
*
* This will reverse the displayed order of the system so that it runs in the
* opposite order to our source, effectively flipping the system over.
*
* <div class="o-layout o-layout--[right|center]">
*
* This will cause the system to fill up from either the centre or the right
* hand side. Default behaviour is to fill up the layout system from the left.
*
* There are plenty more options available to us: explore them below.
*/
/* Default/mandatory classes
========================================================================== */
/**
* 1. Allows us to use the layout object on any type of element.
* 2. We need to defensively reset any box-model properties.
* 3. Use the negative margin trick for multi-row grids:
* http://csswizardry.com/2011/08/building-better-grid-systems/
*/
.o-layout {
display: block;
/* [1] */
margin: 0;
/* [2] */
padding: 0;
/* [2] */
list-style: none;
/* [1] */
margin-left: -20px;
/* [3] */
font-size: 0;
}
/**
* 1. Required in order to combine fluid widths with fixed gutters.
* 2. Allows us to manipulate grids vertically, with text-level properties,
* etc.
* 3. Default item alignment is with the tops of each other, like most
* traditional grid/layout systems.
* 4. By default, all layout items are full-width (mobile first).
* 5. Gutters provided by left padding:
* http://csswizardry.com/2011/08/building-better-grid-systems/
* 6. Fallback for old IEs not supporting `rem` values.
*/
.o-layout__item {
box-sizing: border-box;
/* [1] */
display: inline-block;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */
padding-left: 20px;
/* [5] */
font-size: 16px;
/* [6] */
font-size: 1rem;
}
/* Gutter size modifiers
========================================================================== */
.o-layout--flush {
margin-left: 0;
}
.o-layout-color-blue {
background-color: #001e5a;
padding-top: 50px;
padding-bottom: 50px;
}
.o-layout--flush > .o-layout__item {
padding-left: 0;
}
.o-layout--tiny {
margin-left: -5px;
}
.o-layout--tiny > .o-layout__item {
padding-left: 5px;
}
.o-layout--small {
margin-left: -10px;
}
.o-layout--small > .o-layout__item {
padding-left: 10px;
}
.o-layout--large {
margin-left: -40px;
}
.o-layout--large > .o-layout__item {
padding-left: 40px;
}
.o-layout--huge {
margin-left: -60px;
}
.o-layout--huge > .o-layout__item {
padding-left: 60px;
}
/* Vertical alignment modifiers
========================================================================== */
/**
* Align all grid items to the middles of each other.
*/
.o-layout--middle > .o-layout__item {
vertical-align: middle;
}
/**
* Align all grid items to the bottoms of each other.
*/
.o-layout--bottom > .o-layout__item {
vertical-align: bottom;
}
/**
* Stretch all grid items of each row to have an equal-height.
* Please be aware that this modifier class doesn’t take any effect in IE9 and
* below and other older browsers due to the lack of `display: flex` support.
*/
.o-layout--stretch {
display: flex;
flex-wrap: wrap;
}
.o-layout--stretch > .o-layout__item {
display: flex;
}
.o-layout--stretch.o-layout--center {
justify-content: center;
}
.o-layout--stretch.o-layout--right {
justify-content: flex-end;
}
.o-layout--stretch.o-layout--left {
justify-content: flex-start;
}
/* Fill order modifiers
========================================================================== */
/**
* Fill up the layout system from the centre.
*/
.o-layout--center {
text-align: center;
}
.o-layout--center > .o-layout__item {
text-align: left;
}
/**
* Fill up the layout system from the right-hand side.
*/
.o-layout--right {
text-align: right;
}
.o-layout--right > .o-layout__item {
text-align: left;
}
/**
* Fill up the layout system from the left-hand side. This will likely only be
* needed when using in conjunction with `.o-layout--reverse`.
*/
.o-layout--left {
text-align: left;
}
.o-layout--left > .o-layout__item {
text-align: left;
}
/**
* Reverse the rendered order of the grid system.
*/
.o-layout--reverse {
direction: rtl;
}
.o-layout--reverse > .o-layout__item {
direction: ltr;
}
/* Auto-widths modifier
========================================================================== */
/**
* Cause layout items to take up a non-explicit amount of width.
*/
.o-layout--auto > .o-layout__item {
width: auto;
}
/* ==========================================================================
#Layout--override
========================================================================== */
.o-layout__item > iframe {
max-width: 100%;
}
.o-layout--flex-auto > .o-layout__item {
flex: auto;
}
.o-layout--stretch .o-layout {
flex-basis: 100%;
}
.o-layout--flex-spaced {
display: flex;
justify-content: space-between;
align-items: center;
}
.o-layout--flex-spaced > .o-layout__item {
display: flex;
flex: 0 0 auto;
width: auto;
}
.o-layout--flex-spaced > .o-layout__item:first-of-type, .o-layout--flex-spaced > .o-layout__item:first-of-type {
flex-grow: 0;
}
/* ==========================================================================
#MEDIA
========================================================================== */
/**
* Place any image- and text-like content side-by-side, as per:
* http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
*/
.o-media {
display: block;
}
.o-media:after {
content: "" !important;
display: block !important;
clear: both !important;
}
.o-media__img {
text-align: center;
margin-bottom: 20px;
}
@media (min-width: 46.25em) {
.o-media__img {
float: left;
margin-right: 20px;
margin-bottom: 0;
}
}
.o-media__img > img {
display: block;
object-fit: cover;
max-width: 100%;
height: 100%;
}
.o-media__body {
overflow: hidden;
display: block;
}
.o-media__body,
.o-media__body > :last-child {
margin-bottom: 0;
}
.o-media__body .c-card {
max-width: none;
}
/* Reversed media objects
========================================================================== */
.o-media--reverse > .o-media__img {
float: right;
margin-right: 0;
margin-left: 20px;
}
/* Size variants
========================================================================== */
/**
* Modify the amount of space between our image and our text. We also have
* reversible options for all available sizes.
*/
.o-media--flush > .o-media__img {
margin-right: 0;
margin-left: 0;
}
/* stylelint-disable */
.o-media--tiny > .o-media__img {
margin-bottom: 5px;
}
@media (min-width: 46.25em) {
.o-media--tiny > .o-media__img {
margin-right: 5px;
}
}
@media (min-width: 46.25em) {
.o-media--tiny.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 5px;
}
}
.o-media--small > .o-media__img {
margin-bottom: 10px;
}
@media (min-width: 46.25em) {
.o-media--small > .o-media__img {
margin-right: 10px;
}
}
@media (min-width: 46.25em) {
.o-media--small.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 10px;
}
}
.o-media--large > .o-media__img {
margin-bottom: 40px;
}
@media (min-width: 46.25em) {
.o-media--large > .o-media__img {
margin-right: 40px;
}
}
@media (min-width: 46.25em) {
.o-media--large.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 40px;
}
}
.o-media--huge > .o-media__img {
margin-bottom: 60px;
}
@media (min-width: 46.25em) {
.o-media--huge > .o-media__img {
margin-right: 60px;
}
}
@media (min-width: 46.25em) {
.o-media--huge.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 60px;
}
}
.o-media--mobile .o-media__img {
float: left;
margin-right: 20px;
margin-bottom: 0;
max-width: 75px;
}
@media (min-width: 46.25em) {
.o-media--mobile .o-media__img {
max-width: 100%;
min-width: 200px;
}
}
.o-media--mobile .o-media__img img {
margin-left: auto;
}
/* stylelint-enable */
/* ==========================================================================
#FLAG
========================================================================== */
/**
* The flag object is a design pattern similar to the media object, however it
* utilises `display: table[-cell];` to give us control over the vertical
* alignments of the text and image.
*
* http://csswizardry.com/2013/05/the-flag-object/
*
* 1. Allows us to control vertical alignments.
* 2. Force the object to be the full width of its parent. Combined with [1],
* this makes the object behave in a quasi-`display: block;` manner.
* 3. Reset inherited `border-spacing` declarations.
*/
.o-flag {
display: table;
/* [1] */
width: 100%;
/* [2] */
border-spacing: 0;
/* [3] */
}
/**
* Items within a flag object. There should only ever be one of each.
*
* 1. Default to aligning content to their middles.
*/
.o-flag__img,
.o-flag__body {
display: table-cell;
vertical-align: middle;
/* [1] */
}
/**
* Flag images have a space between them and the body of the object.
*
* 1. Force `.flag__img` to take up as little space as possible:
* https://pixelsvsbytes.com/2012/02/this-css-layout-grid-is-no-holy-grail/
*/
.o-flag__img {
width: 1px;
/* [1] */
padding-right: 20px;
/**
* 1. Fixes problem with images disappearing.
*
* The direct child selector '>' needs to remain in order for nested flag
* objects to not inherit their parent’s formatting. In case the image tag
* is wrapped into another tag, e.g. an anchor for linking reasons, it will
* disappear. In that case try wrapping the whole o-flag__img object into
* an anchor tag.
*
* E.g.:
*
* <a href="/">
* <div class="o-flag__img">
* <img src="./link/to/image.jpg" alt="image alt text">
* </div>
* </a>
*/
}
.o-flag__img > img {
max-width: none;
/* [1] */
}
/**
* The container for the main content of the flag object.
*
* 1. Forces the `.flag__body` to take up all remaining space.
*/
.o-flag__body {
width: auto;
/* [1] */
}
.o-flag__body,
.o-flag__body > :last-child {
margin-bottom: 0;
}
/* Size variants
========================================================================== */
.o-flag--flush > .o-flag__img {
padding-right: 0;
padding-left: 0;
}
.o-flag--tiny > .o-flag__img {
padding-right: 5px;
}
.o-flag--tiny.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 5px;
}
.o-flag--small > .o-flag__img {
padding-right: 10px;
}
.o-flag--small.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 10px;
}
.o-flag--large > .o-flag__img {
padding-right: 40px;
}
.o-flag--large.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 40px;
}
.o-flag--huge > .o-flag__img {
padding-right: 60px;
}
.o-flag--huge.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 60px;
}
/* Reversed flag
========================================================================== */
/**
* 1. Swap the rendered direction of the object…
* 2. …and reset it.
* 3. Reassign margins to the correct sides.
*/
.o-flag--reverse {
direction: rtl;
/* [1] */
}
.o-flag--reverse > .o-flag__img,
.o-flag--reverse > .o-flag__body {
direction: ltr;
/* [2] */
}
.o-flag--reverse > .o-flag__img {
padding-right: 0;
/* [3] */
padding-left: 20px;
/* [3] */
}
/* Alignment variants
========================================================================== */
/**
* Vertically align the image- and body-content differently. Defaults to middle.
*/
.o-flag--top > .o-flag__img,
.o-flag--top > .o-flag__body {
vertical-align: top;
}
.o-flag--bottom > .o-flag__img,
.o-flag--bottom > .o-flag__body {
vertical-align: bottom;
}
.o-flag--mobile-stack {
display: flex;
flex-direction: column;
}
@media (min-width: 46.25em) {
.o-flag--mobile-stack {
display: table;
}
}
.o-flag--mobile .o-flag__img img {
max-width: 75px;
}
@media (min-width: 46.25em) {
.o-flag--mobile .o-flag__img img {
max-width: 100%;
}
}
/* ==========================================================================
#LIST-BARE
========================================================================== */
/**
* Strip list-like appearance from lists by removing their bullets and any
* indentation.
*
* Note: Declaring the item class might not be necessary everywhere,
* but is for example in <dl> lists for the <dd> children.
*/
.o-list-bare {
list-style: none;
margin-left: 0;
}
.o-list-bare__item {
margin-left: 0;
}
/* ==========================================================================
#LIST-INLINE
========================================================================== */
/**
* The list-inline object simply displays a list of items in one line.
*/
.o-list-inline {
margin-left: 0;
list-style: none;
}
.o-list-inline__item {
display: inline-block;
}
/* ==========================================================================
#BOX
========================================================================== */
.o-box {
display: block;
width: 100%;
position: relative;
padding: 60px 40px 40px;
}
@media (min-width: 61.25em) {
.o-box {
padding: 60px;
}
}
/* Size variants
========================================================================== */
.o-box--flush {
padding: 0;
}
.o-box--tiny {
padding: 5px;
}
.o-box--small {
padding: 5px;
}
@media (min-width: 46.25em) {
.o-box--small {
padding: 10px;
}
}
.o-box--large {
padding: 10px;
}
@media (min-width: 46.25em) {
.o-box--large {
padding: 20px;
}
}
@media (min-width: 61.25em) {
.o-box--large {
padding: 40px;
}
}
.o-box--huge {
padding: 20px;
}
.o-box--mobile{
padding: 20px;
}
@media (min-width: 46.25em) {
.o-box--huge {
padding: 20px;
}
.o-box--mobile{
padding: 0;
}
}
@media (min-width: 61.25em) {
.o-box--huge {
padding: 70px;
}
}
@media (min-width: 90em) {
.o-box--huge {
padding: 90px;
}
}
.o-box--xhuge {
padding: 20px;
}
@media (min-width: 46.25em) {
.o-box--xhuge {
padding: 40px;
}
}
@media (min-width: 61.25em) {
.o-box--xhuge {
padding: 60px;
}
}
@media (min-width: 90em) {
.o-box--xhuge {
padding: 140px;
padding-left: 190px;
}
}
.o-box--bar {
padding: 20px 20px 0;
}
@media (min-width: 46.25em) {
.o-box--bar {
padding-left: 40px;
padding-right: 40px;
}
}
@media (min-width: 61.25em) {
.o-box--bar {
padding-top: 40px;
}
}
@media (min-width: 90em) {
.o-box--bar {
padding-left: 110px;
padding-right: 110px;
}
}
.o-section .o-box--bar {
margin-top: -20px;
z-index: 100;
}
@media (min-width: 61.25em) {
.o-section .o-box--bar {
margin-top: -60px;
}
}
.o-box--horizontal-padding {
padding-left: 110px !important;
padding-right: 110px !important;
}
@media (min-width: 46.25em) {
.o-box--horizontal {
padding-left: 40px;
padding-right: 40px;
}
}
@media (min-width: 90em) {
.o-box--horizontal {
padding-left: 0px;
padding-right: 0px;
}
}
.o-search-box-horizontal {
max-width: 1440px;
margin: auto;
margin-top: 40px;
}
.o-search-box-horizontal .o-box {
margin-left: 0px !Important;
margin-right: 0px !Important;
}
.o-box--scroll {
overflow: hidden;
height: 6rem;
padding: 0 20px;
}
@media (min-width: 46.25em) {
.o-box--scroll {
padding-left: 40px;
padding-right: 40px;
}
}
@media (min-width: 90em) {
.o-box--scroll {
padding-left: 110px;
padding-right: 110px;
}
}
.o-box--scroll .o-section {
padding-bottom: 2.5rem;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.o-box--scroll .o-layout--flex-spaced {
height: 6rem;
}
.o-box--scroll .o-layout--flex-spaced .o-layout__item {
height: 100%;
align-items: center;
}
#results .o-box--scroll {
padding: 0;
}
.o-bar {
display: flex;
align-items: center;
flex-direction: row;
flex: 1 1 auto;
flex-wrap: wrap;
}
.o-bar--left {
justify-content: flex-start;
}
.o-bar--right {
justify-content: flex-end;
}
.o-bar--center {
justify-content: center;
}
.o-bar--justify {
justify-content: space-between;
}
.o-bar--overflow-scroll {
flex-wrap: nowrap;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
/* ==========================================================================
#BLOCK
========================================================================== */
/**
* Stacked image-with-text object. A simple abstraction to cover a very commonly
* occurring design pattern.
*/
.o-block {
display: block;
text-align: center;
}
.o-block__img {
margin-bottom: 20px;
/* Size variants
====================================================================== */
}
.o-block--flush > .o-block__img {
margin-bottom: 0;
}
.o-block--tiny > .o-block__img {
margin-bottom: 5px;
}
.o-block--small > .o-block__img {
margin-bottom: 10px;
}
.o-block--large > .o-block__img {
margin-bottom: 40px;
}
.o-block--huge > .o-block__img {
margin-bottom: 60px;
}
.o-block__body {
display: block;
}
/* Alignment variants
========================================================================== */
.o-block--right {
text-align: right;
}
.o-block--left {
text-align: left;
}
/* ==========================================================================
#CARD
========================================================================== */
/**
* Base card object for Cresa, Stacked image then content (potentially overlapping)
*
* Default
* ______
* | |
* |______|
* - -
* ------
* Overlapped - WIP
* ______
* |____ |
* |----|_|
* |____|
*
*/
.o-card {
display: block;
}
.o-card__img-wrapper {
margin-bottom: 10px;
overflow: hidden;
}
.o-card__img {
background-color: #e6e6e6;
transition: 400ms transform;
}
@supports (object-fit: cover) {
.o-card__img {
object-fit: cover;
width: 100%;
height: 100%;
}
.o-card__img:hover {
transform: scale(1.05);
}
}
.o-card__meta {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #001e5a;
}
.o-card--overlap .o-card__meta {
position: relative;
border-bottom: 0;
margin-bottom: 0;
}
.o-card__meta-title {
margin-bottom: 10px;
}
.o-card__meta-title:empty {
visibility: hidden;
}
.o-card--overlap .o-card__meta-title {
position: absolute;
bottom: 20px;
left: -20px;
margin-bottom: 0;
background-color: #0056da;
padding: 5px 20px;
}
.o-card--overlap .o-card__meta-title,
.o-card--overlap .o-card__meta-title > a {
color: #fff;
}
.o-card__tag {
position: relative;
margin-bottom: 10px;
}
.o-card--overlap .o-card__body {
background: #fff;
position: absolute;
top: 100%;
max-width: 340px;
padding: 20px;
}
@media (min-width: 46.25em) {
.o-card--overlap .o-card__body {
top: auto;
bottom: 0;
}
}
@media (min-width: 46.25em) {
.o-card--overhang .o-card__body {
margin-bottom: -60px;
}
}
.o-card--overlap {
position: relative;
max-width: none;
}
/* Size variants
========================================================================= */
.o-card--small {
max-width: 340px;
}
.o-card--large {
max-width: none;
}
.o-google-map-static {
position: relative;
overflow: hidden;
}
@media (min-width: 61.25em) {
.o-google-map-static img {
display:none;
}
}
.o-google-map-directions-btn {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 46.25em) {
.o-google-map-directions-btn {
left: 40px;
transform: initial;
}
}
#map {
min-height: 435px;
}
/* ==========================================================================
#RATIO
========================================================================== */
/**
* Create ratio-bound content blocks, to keep media (e.g. images, videos) in
* their correct aspect ratios.
*
* http://alistapart.com/article/creating-intrinsic-ratios-for-video
*
* 1. Default is a 1:1 ratio (i.e. a perfect square).
*/
.o-ratio {
position: relative;
display: block;
}
.o-ratio:before {
content: "";
display: block;
width: 100%;
padding-bottom: 100%;
/* [1] */
}
.o-ratio__content,
.o-ratio > iframe,
.o-ratio > embed,
.o-ratio > object {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
/* Ratio variants.
========================================================================== */
/**
* Generate a series of ratio classes to be used like so:
*
* <div class="o-ratio o-ratio--golden-ratio">
*
*/
.o-ratio--2\:1:before {
padding-bottom: 50%;
}
.o-ratio--4\:5:before {
padding-bottom: 125%;
}
.o-ratio--16\:9:before {
padding-bottom: 56.25%;
}
/* Contain modifier.
========================================================================== */
/**
* Only works with image content.
* Contains the image to the boundaries, without cropping or stretching it.
*/
.o-ratio--img-contain > .o-ratio__content:before {
height: auto;
margin: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
/* ==========================================================================
#CROP
========================================================================== */
/**
* Provide a cropping container in order to display media (usually images)
* cropped to certain ratios.
*
* 1. Set up a positioning context in which the image can sit.
* 2. This is the crucial part: where the cropping happens.
*/
.o-crop {
position: relative;
/* [1] */
display: block;
overflow: hidden;
/* [2] */
}
/**
* Apply this class to the content (usually `img`) that needs cropping.
*
* 1. Image’s default positioning is top-left in the cropping box.
* 2. Make sure the media doesn’t stop itself too soon.
*/
.o-crop__content {
position: absolute;
top: 0;
/* [1] */
left: 0;
/* [1] */
max-width: none;
/* [2] */
}
/**
* We can position the media in different locations within the cropping area.
*/
.o-crop__content--left-top {
left: 0;
}
.o-crop__content--left-center {
top: 50%;
transform: translateY(-50%);
}
.o-crop__content--left-bottom {
top: auto;
bottom: 0;
}
.o-crop__content--right-top {
right: 0;
left: auto;
}
.o-crop__content--right-center {
top: 50%;
right: 0;
left: auto;
transform: translateY(-50%);
}
.o-crop__content--right-bottom {
top: auto;
right: 0;
bottom: 0;
left: auto;
}
.o-crop__content--center-top {
left: 50%;
transform: translateX(-50%);
}
.o-crop__content--center,
.o-crop__content--center-center {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.o-crop__content--center-bottom {
top: auto;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
/* Crop-ratio variants
========================================================================== */
/**
* Generate a series of crop classes to be used like so:
*
* <div class="o-crop o-crop--golden-ratio">
*
*/
.o-crop--2\:1 {
padding-bottom: 50%;
}
.o-crop--4\:3 {
padding-bottom: 75%;
}
.o-crop--16\:9 {
padding-bottom: 56.25%;
}
/* Fill modifier
========================================================================== */
/**
* Content stretches to fill it's container while maintaining aspect-ratio.
*/
.o-crop--fill > .o-crop__content {
min-height: 100%;
min-width: 100%;
}
/* ==========================================================================
#TILES
========================================================================== */
.o-tiles-wrapper {
overflow: hidden;
}
.o-tiles {
display: block;
}
@media (min-width: 46.25em) {
.o-tiles {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin-left: -20px;
}
}
.o-tiles__item {
border: 2px solid #0056da;
display: block;
position: relative;
text-align: center;
justify-content: center;
padding: 40px;
margin: 0 auto 20px;
width: calc(100% - 80px);
word-break: break-word;
transition: color 200ms ease-in-out, background 200ms ease-in-out, border 200ms ease-in-out;
/* Style modifiers
========================================================================== */
}
@media (min-width: 46.25em) {
.o-tiles__item {
padding: 40px;
margin-left: 20px;
margin-right: 0;
margin-bottom: 0;
flex-basis: auto;
}
@supports (--custom: property) {
[style*="--flex-basis"] .o-tiles__item {
flex-basis: var(--flex-basis);
}
}
}
.o-tiles__item:before {
content: "";
display: block;
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-bottom: 100%;
/* Ratio variants.
========================================================================== */
/**
* Generate a series of ratio classes to be used like so:
*
* <div class="o-tiles o-tiles--1/1">
*
*/
}
.o-tiles-ratio--2\:1 .o-tiles__item:before {
padding-bottom: 50%;
}
.o-tiles-ratio--4\:5 .o-tiles__item:before {
padding-bottom: 125%;
}
.o-tiles-ratio--16\:9 .o-tiles__item:before {
padding-bottom: 56.25%;
}
@supports (--custom: property) {
[style*="--tile-ratio"] .o-tiles__item:before {
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
}
.o-tiles--reversed .o-tiles__item {
color: #fff;
}
.o-tiles--middle .o-tiles__item {
align-items: center;
}
.o-tiles--large .o-tiles__item {
padding: 40px;
}
.o-tiles__item:after {
content: "";
display: table;
clear: both;
}
.o-tiles--wrap {
flex-wrap: wrap;
}
/* Size variants
========================================================================== */
.o-tiles--flush {
padding: 0;
}
/* ==========================================================================
#TILE CARD
========================================================================== */
.o-tile-cards {
display: block;
}
@media (min-width: 46.25em) {
.o-tile-cards {
display: flex;
justify-content: space-evenly;
margin-left: -20px;
margin-right: -20px;
flex-wrap: wrap;
}
}
.o-tile-card__title {
color: #0056da;
}
.o-tile-card__description {
color: #222222;
text-align: left;
}
.o-tile-card {
background: #e6e6e6;
max-width: 340px;
margin: 0 auto 60px;
display: block;
transition: color 200ms ease-in-out, background 200ms ease-in-out;
}
@media (min-width: 46.25em) {
.o-tile-card {
margin-left: 20px;
margin-right: 20px;
}
}
.o-tile-card__img {
height: 100px;
width: 100px;
object-fit: contain;
margin-bottom: 20px;
}
.o-tile-card__content {
align-items: center;
display: flex;
flex-direction: column;
padding: 40px;
}
/* ==========================================================================
#SECTION
========================================================================== */
.o-section {
width: 100%;
padding-right: 20px;
padding-left: 20px;
margin-right: auto;
margin-left: auto;
position: relative;
}
.o-section:after {
content: "" !important;
display: block !important;
clear: both !important;
}
.o-section > :last-child {
margin-bottom: 0;
}
@media (min-width: 46.25em) {
.o-section {
padding-right: 40px;
padding-left: 40px;
}
}
@media (min-width: 61.25em) {
.o-section {
padding-right: 90px;
padding-left: 90px;
}
}
.o-section:not(.o-section--full) > .o-section {
padding-left: 0;
padding-right: 0;
}
.o-section--full {
padding-left: 0;
padding-right: 0;
}
.o-section--top {
padding-top: 50px;
}
.o-section--bottom {
padding-bottom: 110px;
}
.o-section--spacer {
padding-top: 110px;
padding-bottom: 110px;
}
/* ==========================================================================
#FORM
========================================================================== */
.o-form-element {
position: relative;
padding: 10px 0;
}
.o-form-element--flush .c-field,
.o-form-element--flush .c-label {
padding-left: 0;
padding-right: 0;
left: 0;
}
.o-field {
position: relative;
}
.o-accordion {
color: #001e5a;
}
.o-accordion__panel {
padding: 20px;
background-color: #f2f4f7;
overflow: hidden;
opacity: 1;
visibility: visible;
}
@media (min-width: 46.25em) {
.o-accordion__panel {
padding: 40px;
}
}
@media (min-width: 61.25em) {
.o-accordion__panel {
padding: 190px;
}
}
.o-accordion__panel[aria-hidden="true"] {
display: none;
opacity: 0;
visibility: hidden;
}
.o-accordion__header {
display: block;
width: 100%;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
border: 0;
font-family: "Helvetica Now", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1.25rem;
color: #001e5a;
text-align: left;
padding: 40px 20px;
background-color: #fff;
/* title opened */
/* title closed */
/* title selected */
}
@media (min-width: 46.25em) {
.o-accordion__header {
padding-left: 40px;
padding-right: 40px;
}
}
@media (min-width: 61.25em) {
.o-accordion__header {
padding-left: 190px;
padding-right: 110px;
}
}
.o-accordion__header[aria-expanded="true"] {
color: #ffb600;
}
.o-accordion__header[aria-expanded="true"]:after {
content: " -";
}
.o-accordion__header[aria-expanded="false"]:after {
content: " +";
}
.o-accordion__title {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/*
* Abstracted class class to hide and show an image on hover
*
* Add the o-image-hover class to a link/div that will be hovered, then within that add the two images
* The o-image-hover has no styles applied it's used to inherit other styles.
* <a href="#" class="o-image-hover">
* <span class="o-image-hover__img">
* <img src='img.jpg'>
* </span>
* <span class="o-image-hover__hide">
* <img src='img.jpg'>
* </span>
* </a>
*
*
*/
.o-image-hover__img {
display: block;
}
.o-image-hover:hover .o-image-hover__img,
.o-image-hover:focus .o-image-hover__img {
display: none;
}
.o-image-hover__hide {
display: none;
}
.o-image-hover:hover .o-image-hover__hide,
.o-image-hover:focus .o-image-hover__hide {
display: block;
}
/*------------------------------------*\
#MESSAGING
\*------------------------------------*/
/**
* Alert
*/
.o-alert {
text-align: center;
padding: 10px 20px;
background: #f2f4f7;
overflow: hidden;
font-size: 1rem;
animation: slideDown 2s forwards;
}
.o-alert a {
color: inherit;
text-decoration: underline;
}
/**
* Error alert
*/
.o-alert--error {
color: #ff0000;
background: #ffe6e6;
}
/**
* Success alert
*/
.o-alert--success {
color: green;
background: #d9ffd9;
}
/**
* Warning alert
*/
.o-alert--warning {
color: #ff8200;
background: #fff3e6;
}
/**
* Info alert
*/
.o-alert--info {
color: #0192d0;
background: #e1f6ff;
}
/**
* Modal
*/
.o-modal {
background: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 500;
margin: auto;
}
.o-modal__header {
align-self: flex-end;
}
.o-modal__body {
padding: 0 20px 40px;
}
@media (min-width: 90em) {
.o-modal__body {
padding: 40px 110px 110px;
}
}
.o-modal__body .o-modal--flush {
padding: 0;
}
.o-flex-header {
display: flex;
list-style: none;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
padding: 10px 0 20px 0;
}
.o-flex-header__item {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #001e5a;
}
.o-flex-header__item.sort::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%23001e5a' d='M14.894 22.956L1.044 9.157a.148.148 0 0 1 0-.21l1.91-1.904a.15.15 0 0 1 .211 0L15 18.835 26.835 7.043a.15.15 0 0 1 .211 0l1.91 1.903a.148.148 0 0 1 0 .211l-13.85 13.8a.15.15 0 0 1-.212 0'/%3e%3c/g%3e%3c/svg%3e");
background-size: 100%;
background-repeat: no-repeat;
color: inherit;
display: inline-block;
font-size: 14px;
line-height: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
overflow: visible;
height: 12px;
width: 12px;
transition: transform 200ms ease-in-out;
position: relative;
margin-left: 5px;
}
.o-flex-header__item.sort[data-sort-direction="asc"]::after,
.o-flex-header__item.sort[data-sort-direction="default"]::after {
content: "";
}
.o-flex-header__item.sort[data-sort-direction="desc"]::after {
content: "";
transform: rotate(180deg);
}
.o-flex-list {
display: flex;
list-style: none;
width: 100%;
padding: 0;
flex-wrap: wrap;
margin: 0;
}
.o-flex-list__row {
display: flex;
width: 100%;
justify-content: space-between;
flex: 1 0 100%;
padding: 10px 0 12px 0;
border-bottom: 1px solid #f0f6ff;
}
.o-flex-list__row:last-child{
border-bottom:none;
}
.o-list-flex-table__item {
margin: 0;
}
.o-tabs .o-tab {
padding: 34px 20px;
border-top: solid 4px transparent;
}
.o-tabs .o-tab--active {
border-top: solid 4px blue;
}
/**
Simple Ring Loader for Cresa
*/
/** Loader background **/
.o-loader-background {
position: relative;
}
.o-loader-background:after {
content: "";
position: absolute;
background-color: rgba(255, 255, 255, 0.7);
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.o-loader-ring {
display: inline-block;
position: relative;
width: 36px;
height: 36px;
}
.o-loader-ring--centered {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
margin-top: -18px;
margin-left: -18px;
}
.o-loader-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 36px;
height: 36px;
margin: 0;
border: 4px solid #022058;
border-radius: 50%;
animation: o-loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #022058 transparent transparent transparent;
}
.o-loader-ring__white div {
border: 4px solid #fff;
border-color: #fff transparent transparent transparent;
}
.o-loader-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.o-loader-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.o-loader-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes o-loader-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/**
* Overlay
*/
.c-overlay {
display: none;
padding: 1em;
background: rgba(0, 0, 0, 0.7);
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
text-align: center;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 400;
}
.c-overlay--is-visible {
display: flex;
}
/**
* Overlay Modal
*/
.c-overlay__content {
display: flex;
}
/* ==========================================================================
#BUTTONS
========================================================================== */
/**
* 1. Allow us to style box model properties.
* 2. Line different sized buttons up a little nicer.
* 3. Make buttons inherit font styles (often necessary when styling `input`s as
* buttons).
* 4. Reset/normalize some styles.
* 5. Force all button-styled elements to appear clickable.
* 6. Add spacing to buttons that sit next to other buttons
*/
.c-btn {
display: inline-block;
/* [1] */
vertical-align: middle;
/* [2] */
font: inherit;
/* [3] */
text-align: center;
/* [4] */
margin: 0;
/* [4] */
cursor: pointer;
/* [5] */
padding: 10px 20px;
transition: all 200ms ease-in-out;
background: transparent;
border: none;
color: #222222;
font-size: 1rem;
}
.c-btn, .c-btn:hover, .c-btn:active, .c-btn:focus {
text-decoration: none;
/* [4] */
}
.c-btn + .c-btn {
margin-left: 10px;
/* [6] */
}
.c-btn-group .c-btn {
margin-bottom: 5px;
}
.c-btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.c-btn__icon {
display: inline-block;
font-size: inherit;
text-rendering: auto;
vertical-align: middle;
}
svg.c-btn__icon,
> svg {
width: 16px;
height: 16px;
}
.c-btn__icon--left {
padding-right: 5px;
}
/* Style variants
========================================================================== */
.c-btn--primary {
border: transparent;
background-color: #ffb600;
color: #222222;
}
.c-btn--primary.c-btn--active {
background-color: #cc9200;
}
.c-btn--primary, .c-btn--primary:hover, .c-btn--primary:active, .c-btn--primary:focus {
color: #222222;
}
.c-btn--primary:not(:disabled):hover {
background-color: #d99b00;
border-color: transparent;
}
.c-btn--primary:not(:disabled):focus {
border-color: transparent;
}
.c-btn--primary:not(:disabled):active {
background-color: #cc9200;
border-color: transparent;
}
.c-btn--blue {
background-color: #0056da;
color: white;
}
/* Outlined buttons
========================================================================== */
/**
* Outline buttons have see-through backgrounds and are bordered.
* Then we colour them in on hover - not in the design
*/
.c-btn--outline {
border: 2px solid currentColor;
background-color: transparent;
padding: 8px 18px;
color: #001e5a;
/* Size variants
===================================== */
/* Colour variants
===================================== */
}
.c-btn--outline, .c-btn--outline:hover, .c-btn--outline:active, .c-btn--outline:focus {
text-decoration: none;
}
.c-btn--outline.c-btn--active {
border-color: currentColor;
}
.c-btn--outline.c-btn--small {
padding: 5px-2px solid currentColor 20px-2px solid currentColor;
}
.c-btn--outline.c-btn--large {
padding: 10px-2px solid currentColor 40px-2px solid currentColor;
}
.c-btn--outline.c-btn--primary {
color: #ffb600;
}
.c-btn--outline.c-btn--primary:not(:disabled).c-btn--active, .c-btn--outline.c-btn--primary:not(:disabled):hover, .c-btn--outline.c-btn--primary:not(:disabled):active, .c-btn--outline.c-btn--primary:not(:disabled):focus {
color: #222222;
background-color: #ffb600;
border-color: #ffb600;
}
.c-btn--outline.c-btn--secondary {
color: #0056da;
}
.c-btn--outline.c-btn--secondary:not(:disabled).c-btn--active, .c-btn--outline.c-btn--secondary:not(:disabled):hover, .c-btn--outline.c-btn--secondary:not(:disabled):active, .c-btn--outline.c-btn--secondary:not(:disabled):focus {
color: #fff;
background-color: #0056da;
border-color: #0056da;
}
.c-btn--outline.c-btn--tertiary {
color: #fff;
}
.c-btn--outline.c-btn--tertiary:not(:disabled).c-btn--active, .c-btn--outline.c-btn--tertiary:not(:disabled):hover, .c-btn--outline.c-btn--tertiary:not(:disabled):active, .c-btn--outline.c-btn--tertiary:not(:disabled):focus {
color: #222222;
background-color: #fff;
border-color: #fff;
}
/**
* Button modifiers, Places arrows into the buttons
* 1. Forward
* 2. and backwards
*/
.c-btn--arrow:after {
content: " ›";
/* [1] */
}
.c-btn--back-arrow:hover {
background-color: #ffb600;
color: #001e5a;
}
.c-btn--back-arrow:before {
content: "";
padding: 0 18px;
margin-right: 8px;
background-image: url(/images/arrow-back-white.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.c-btn--back-arrow:hover:before {
background-image: url('/images/arrow-back-dark.png');
}
.c-btn--link:before, .c-btn--link:after {
content: "";
/* [3] */
}
/**
* This particular class probably belongs with the article class
* It positions the back button in the top left of the article and then overhangs the edge
*
* -------------
* === |
* ___| |_____
* | |
*/
.c-btn--box-back {
position: absolute;
top: -34px;
left: -20px;
z-index: 300;
padding: 5px 20px 5px 25px;
}
.bioheader .c-btn--box-back {
margin: 1.6875rem 1rem 1.6875rem 0;
}
.c-page-header__wrapper .c-btn--box-back {
position: relative;
}
@media (min-width: 61.25em) {
.c-btn--box-back {
left: -10px;
top: 20px;
}
.c-page-header__wrapper .c-btn--box-back {
top: -32px;
}
}
/* Size variants
========================================================================== */
.c-btn--small {
padding: 5px 10px;
}
.c-btn--large {
padding: 10px 40px;
}
.c-btn--wide {
padding: 10px 60px;
}
.c-btn--full {
width: 100%;
width: 100%;
text-transform: uppercase;
font-weight: bold;
margin-top: 40px;
font-size:14px;
}
.c-btn--overlap {
margin-left: -20px;
}
.c-btn--overflow {
margin-bottom: -20px;
}
/* Position
========================================================================== */
.c-btn--abs-bottom {
position: relative;
bottom: 0;
margin-top: 8px;
}
@media (min-width: 46.25em) {
.c-btn--abs-bottom {
position: absolute;
}
}
/* ==========================================================================
#HEADER
This section covers the navigation bar at the top of the page
========================================================================== */
.c-header {
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
z-index: 300;
min-height: 60px;
padding: 10px 20px;
}
@media (min-width: 46.25em) {
.c-header {
flex-flow: row nowrap;
align-items: center;
min-height: 100px;
padding: 0 40px 10px;
}
}
.c-header .c-icon__logos--logo-reversed {
display: none;
}
.c-header__logo {
margin-top: 5px;
margin-right: 20px;
margin-left: 25px;
}
@media (min-width: 46.25em) {
.c-header__logo {
align-self: center;
}
}
.c-header__controls {
flex: 1 1 0;
display: flex;
justify-content: flex-end;
flex-flow: row nowrap;
}
.c-header__controls > .o-list-inline {
margin-left: auto;
width: auto;
padding-left: 10px;
}
.c-header__nav-primary {
position: relative;
}
.c-header__nav-primary ul {
list-style: none;
margin: 0;
}
.c-header__nav-primary--search {
order: -1;
}
@media (min-width: 61.25em) {
.c-header__nav-primary--search {
order: 0;
flex-grow: 0;
max-width: max-content;
margin-right: 0;
}
}
.c-header__extra,
.c-header__locale-picker {
margin-left: auto;
}
.c-header--primary {
color: #001e5a;
}
@media (min-width: 46.25em) {
.c-header--primary {
background-color: transparent;
}
}
.c-header--inverted {
color: #001e5a;
}
.c-header--fixed {
left: 0;
right: 0;
top: 0;
position: absolute;
}
.c-header--sticky .c-logo__link {
color: #0056da;
}
/* ==========================================================================
#LOGO LINK
========================================================================== */
.c-logo__link {
transition: color 200ms ease-in-out;
color: inherit;
}
/* ==========================================================================
#PRIMARY NAVIGATION
========================================================================== */
/**
* Navigation tag
*/
.c-primary-nav {
font-size: 1.125rem;
}
@media (min-width: 61.25em) {
.c-primary-nav {
position: relative;
top: auto;
left: auto;
right: auto;
flex-grow: 1;
flex-basis: auto;
font-size: .9375rem;
display: block;
width: 100%;
}
}
.c-primary-nav-toggle:focus + .c-primary-nav {
display: flex;
}
.c-primary-nav a {
color: inherit;
}
.c-primary-nav a.is-active, .c-primary-nav a:hover,
.c-primary-nav .c-primary-nav__link.is-active, .c-primary-nav .c-primary-nav__link:hover {
color: #ffb600;
}
.c-sub-primary-nav a.is-active, .c-sub-primary-nav a:hover,
.c-sub-primary-nav .c-primary-nav__link.is-active, .c-sub-primary-nav .c-primary-nav__link:hover {
color: #0056da;
}
.c-lower-primary-nav a.is-active, .c-lower-primary-nav a:hover {
color: #ffb600;
}
.c-sub-primary-nav {
padding: 0 !important;
padding-top: 5px !important;
}
.c-primary-nav__item--dropdown {
position: relative;
}
.c-primary-nav__item:focus {
outline: none;
}
/**
* Nav List
*/
.c-primary-nav__list {
list-style: none;
/**
* Nav List items
*/
}
@media (min-width: 61.25em) {
.c-primary-nav__list {
display: flex;
}
}
.c-primary-nav__list > .c-primary-nav__item {
margin: 10px 0;
}
@media (min-width: 61.25em) {
.c-primary-nav__list > .c-primary-nav__item {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
display: flex;
align-items: center;
margin: 0 2px;
}
.c-primary-nav__list > .c-primary-nav__item.dropdown-is-active, .c-primary-nav__list > .c-primary-nav__item:hover, .c-primary-nav__list > .c-primary-nav__item:focus {
border-top: 5px solid #ffb600;
}
}
@media (min-width: 61.25em) {
.c-primary-nav__list > .c-primary-nav__item--dropdown.dropdown-is-active {
border-bottom: 5px solid #f9f9f9;
}
}
@media (min-width: 61.25em) {
.c-primary-nav__list--office {
margin-right: 40px;
}
}
.c-primary-nav__list--main {
flex-grow: 1;
}
/**
* Nav Links
*/
.c-primary-nav__link {
font-weight: normal;
display: block;
color: inherit;
padding: 5px;
}
.c-primary-nav__link:focus {
outline: none;
}
@media (min-width: 61.25em) {
.c-primary-nav__link {
padding: 40px 15px;
text-align: center;
}
}
.c-primary-nav__link .c-primary-nav__item--is-active {
font-weight: bold;
}
.c-primary-nav__item--dropdown .c-primary-nav__link {
padding-right: 20px;
}
.c-primary-nav__icon--search {
width: 24px;
height: 24px;
}
@media (min-width: 61.25em) {
.c-primary-nav__list > .c-primary-nav__item--office-selector:hover, .c-primary-nav__list > .c-primary-nav__item--office-selector:focus {
border-bottom: 5px solid #f0f6ff;
}
.c-primary-nav__list > .c-primary-nav__item--office-selector .c-primary-nav__link {
padding-right: 20px;
}
.c-primary-nav__list > .c-primary-nav__item--office-selector.c-primary-nav__item--dropdown {
position: static;
}
.c-header--inverted .c-primary-nav__list > .c-primary-nav:hover, .c-header--inverted .c-primary-nav__list > .c-primary-nav:focus {
border-bottom: 5px solid #f9f9f9;
}
.c-header--inverted .c-primary-nav__list > .c-primary-nav__item--office-selector:hover, .c-header--inverted .c-primary-nav__list > .c-primary-nav__item--office-selector:focus {
border-bottom: 5px solid #f0f6ff;
}
}
.c-primary-nav__item--enhance > .c-primary-nav__link {
font-weight: bold;
text-transform: uppercase;
font-size: 1rem;
}
.c-primary-nav__link--dropdown-icon {
position: relative;
/**
* Dropdown caret after accordion handle
*/
}
.c-primary-nav__link--dropdown-icon::after {
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%23FFFFFF' d='M14.894 22.956L1.044 9.157a.148.148 0 0 1 0-.21l1.91-1.904a.15.15 0 0 1 .211 0L15 18.835 26.835 7.043a.15.15 0 0 1 .211 0l1.91 1.903a.148.148 0 0 1 0 .211l-13.85 13.8a.15.15 0 0 1-.212 0'/%3e%3c/g%3e%3c/svg%3e");
}
.c-primary-nav__link--dropdown-icon:after {
content: "";
background-size: 100%;
background-repeat: no-repeat;
color: inherit;
display: inline-block;
font-size: 14px;
line-height: 0;
transform: rotate(270deg);
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
overflow: visible;
height: 12px;
width: 12px;
transition: transform 200ms ease-in-out;
position: relative;
margin-left: 5px;
top: 50%;
}
@media (min-width: 61.25em) {
.c-primary-nav__link--dropdown-icon:after {
position: absolute;
right: 5px;
transform: rotate(0deg);
height: 12px;
width: 12px;
margin-top: -5px;
margin-left: auto;
}
}
@media (min-width: 61.25em) {
.c-header--inverted .c-primary-nav__link--dropdown-icon::after {
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%23000000' d='M14.894 22.956L1.044 9.157a.148.148 0 0 1 0-.21l1.91-1.904a.15.15 0 0 1 .211 0L15 18.835 26.835 7.043a.15.15 0 0 1 .211 0l1.91 1.903a.148.148 0 0 1 0 .211l-13.85 13.8a.15.15 0 0 1-.212 0'/%3e%3c/g%3e%3c/svg%3e");
}
}
@media (min-width: 61.25em) {
.c-primary-nav__link--dropdown-icon.c-office-selector__link::after {
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%23001E5A' d='M14.894 22.956L1.044 9.157a.148.148 0 0 1 0-.21l1.91-1.904a.15.15 0 0 1 .211 0L15 18.835 26.835 7.043a.15.15 0 0 1 .211 0l1.91 1.903a.148.148 0 0 1 0 .211l-13.85 13.8a.15.15 0 0 1-.212 0'/%3e%3c/g%3e%3c/svg%3e");
transform: rotate(-90deg);
transform-origin: center 40%;
}
.c-primary-nav__link--dropdown-icon.c-office-selector__link::after {
right: 20px;
}
}
@media (min-width: 61.25em) {
.c-primary-nav__link--dropdown-icon.c-office-selector__link:hover::after, .c-primary-nav__link--dropdown-icon.c-office-selector__link:focus::after {
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%230056DA' d='M14.894 22.956L1.044 9.157a.148.148 0 0 1 0-.21l1.91-1.904a.15.15 0 0 1 .211 0L15 18.835 26.835 7.043a.15.15 0 0 1 .211 0l1.91 1.903a.148.148 0 0 1 0 .211l-13.85 13.8a.15.15 0 0 1-.212 0'/%3e%3c/g%3e%3c/svg%3e");
}
}
.c-primary-nav__link--dropdown-icon.c-office-selector__link:hover::after, .c-primary-nav__link--dropdown-icon.c-office-selector__link:focus::after {
text-decoration: none !important;
}
@media (min-width: 61.25em) {
.c-primary-nav__link--dropdown-icon.c-dropdown-menu__link::after {
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%23001E5A' d='M14.894 22.956L1.044 9.157a.148.148 0 0 1 0-.21l1.91-1.904a.15.15 0 0 1 .211 0L15 18.835 26.835 7.043a.15.15 0 0 1 .211 0l1.91 1.903a.148.148 0 0 1 0 .211l-13.85 13.8a.15.15 0 0 1-.212 0'/%3e%3c/g%3e%3c/svg%3e");
transform: rotate(-90deg);
transform-origin: center 40%;
}
.c-primary-nav__link--dropdown-icon.c-dropdown-menu__link::after {
right: 20px;
}
.c-primary-nav__link--dropdown-icon.c-sub-menu-selector__link::after {
right: 10px !important;
}
}
@media (min-width: 61.25em) {
.c-primary-nav__link--dropdown-icon.c-dropdown-menu__link:hover::after, .c-primary-nav__link--dropdown-icon.c-dropdown-menu__link:focus::after {
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%230056DA' d='M14.894 22.956L1.044 9.157a.148.148 0 0 1 0-.21l1.91-1.904a.15.15 0 0 1 .211 0L15 18.835 26.835 7.043a.15.15 0 0 1 .211 0l1.91 1.903a.148.148 0 0 1 0 .211l-13.85 13.8a.15.15 0 0 1-.212 0'/%3e%3c/g%3e%3c/svg%3e");
}
}
.c-primary-nav__link--dropdown-icon.c-dropdown-menu__link:hover::after, .c-primary-nav__link--dropdown-icon.c-dropdown-menu__link:focus::after {
text-decoration: none !important;
}
@media (min-width: 61.25em) {
[data-area="tier2"] .submenu-visible .c-primary-nav__link--dropdown-icon::after,
[data-area="tier2"] .is-visible .c-primary-nav__link--dropdown-icon::after {
content: "";
transform: rotate(0deg);
transform-origin: center 40%;
}
}
.c-primary-nav__link--dropdown-icon:hover::after, .c-primary-nav__link--dropdown-icon:focus::after {
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%23FFB600' d='M14.894 22.956L1.044 9.157a.148.148 0 0 1 0-.21l1.91-1.904a.15.15 0 0 1 .211 0L15 18.835 26.835 7.043a.15.15 0 0 1 .211 0l1.91 1.903a.148.148 0 0 1 0 .211l-13.85 13.8a.15.15 0 0 1-.212 0'/%3e%3c/g%3e%3c/svg%3e");
}
.c-primary-nav__link--dropdown-icon:hover::after, .c-primary-nav__link--dropdown-icon:focus::after {
text-decoration: none !important;
}
.c-primary-nav__collapse {
background-color: #0056da;
visibility: visible;
opacity: 1;
transform: translateX(100%);
flex-basis: 100%;
flex-grow: 1;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
@media (min-width: 61.25em) {
.c-primary-nav__collapse {
display: flex;
background-color: transparent;
justify-content: flex-end;
flex-grow: 1;
flex-basis: auto;
align-items: stretch;
flex-direction: row;
visibility: visible;
transform: none;
opacity: 1;
position: static;
top: auto;
left: auto;
right: auto;
transition: none;
margin-left: 80px;
}
}
.c-primary-nav__collapse.is-mobile-menu {
transition: transform 200ms ease-in-out;
}
.c-primary-nav__collapse.is-visible-menu {
display: flex;
visibility: visible;
color: #fff;
background-color: #0056da;
padding: 10px 20px;
opacity: 1;
transform: translateX(0%);
transition: transform 200ms ease-in-out;
}
@media (min-width: 46.25em) {
.c-primary-nav__collapse.is-visible-menu {
padding: 20px 40px;
}
}
@media (min-width: 61.25em) {
.c-primary-nav__collapse.is-visible-menu {
background-color: transparent;
padding: 0;
overflow: initial;
color: inherit;
}
}
.c-primary-nav__collapse.is-active {
overflow-y: scroll;
}
.c-primary-nav__collapse > ul {
margin-bottom: 0;
}
.c-primary-nav--default {
color: #fff;
}
/**
* Primary navigation toggle
*/
.c-primary-nav-toggle {
padding: 5px;
color: inherit;
line-height: 1;
float: right;
}
@media (min-width: 61.25em) {
.c-primary-nav-toggle {
display: none;
}
}
/* ==========================================================================
#DROPDOWN MENU
========================================================================== */
.c-dropdown-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #0056da;
transition: all 200ms ease-in-out;
transform: translateX(100%);
opacity: 0;
padding: 5px 20px;
margin: 0;
visibility: hidden;
}
@media (min-width: 61.25em) {
.c-dropdown-menu {
position: absolute;
top: auto;
left: 0;
right: auto;
transform: translateX(0);
background-color: transparent;
padding: 0;
width: 100%;
display: none;
}
.dropdown-is-active > .c-dropdown-menu,
.c-primary-nav__item:focus > .c-dropdown-menu {
display: block;
opacity: 1;
}
}
.c-dropdown-menu.is-visible {
display: block;
opacity: 1;
transform: translateX(0);
z-index: 20;
visibility: visible;
}
@media (min-width: 61.25em) {
.c-dropdown-menu.is-visible {
overflow: initial;
}
}
.c-dropdown-menu.is-active {
overflow-y: scroll;
}
@media (min-width: 61.25em) {
.c-dropdown-menu.is-active {
overflow: initial;
}
}
.c-dropdown-menu .c-primary-nav__item {
margin: 10px 20px;
}
/*.c-dropdown-menu .c-primary-nav__item:first-of-type {
margin-top: auto; }*/
.c-dropdown-menu .c-primary-nav__item:last-of-type {
margin-bottom: auto;
padding-bottom: 10px;
}
.c-dropdown-menu .c-primary-nav__item.c-primary-nav__item--last {
margin-top: auto;
margin-bottom: 20px;
}
@media (min-width: 61.25em) {
.c-dropdown-menu .c-primary-nav__item {
margin: 5px 0;
}
}
@media (min-width: 61.25em) {
.c-dropdown-menu .c-primary-nav__link {
text-align: left;
color: #595959;
}
}
@media (max-width: 61.25em) {
.c-sub-primary-nav a.is-active, .c-sub-primary-nav a:hover,
.c-sub-primary-nav .c-primary-nav__link .is-active, .c-sub-primary-nav .c-primary-nav__link:hover {
color: #ffb600;
}
.c-dropdown-menu .c-primary-nav__item {
margin-left: 0;
}
}
@media (max-width: 61.25em) {
.c-dropdown-menu {
top: 110px;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
}
.c-dropdown-menu-list {
list-style: none;
display: flex;
flex-direction: column;
height: calc(100% - 60px);
}
@media (min-width: 61.25em) {
.c-dropdown-menu-list {
display: block;
height: auto;
position: absolute;
top: calc(100% + 5px);
left: -20px;
right: auto;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
padding: 0;
margin: 0;
z-index: 1;
visibility: visible;
transform: translateX(0);
font-size: .9375rem;
}
}
@media (min-width: 61.25em) {
.c-dropdown-menu--right .c-dropdown-menu-list {
left: auto;
right: -20px;
}
}
.c-dropdown-bar {
order: -1;
margin-top: 0;
}
.c-dropdown-bar:after {
content: "" !important;
display: block !important;
clear: both !important;
}
@media (min-width: 61.25em) {
.c-dropdown-bar {
display: none;
}
}
.c-dropdown-bar__back {
float: left;
}
.c-dropdown-bar__close {
float: right;
}
.c-dropdown-bar__back,
.c-dropdown-bar__close {
font-weight: bold;
color: #fff;
text-decoration: none;
font-size: 35px;
}
.c-dropdown-bar__back:hover, .c-dropdown-bar__back:focus,
.c-dropdown-bar__close:hover,
.c-dropdown-bar__close:focus {
color: #ffb600;
text-decoration: none;
cursor: pointer;
}
@media (min-width: 61.25em) {
.c-dropdown-menu__item {
margin-left: 0;
margin-bottom: 20px;
}
.c-dropdown-menu__item:last-of-type {
margin-bottom: 0;
}
.c-dropdown-menu__link {
color: #595959;
}
}
.js-parent-item > a {
font-weight: bold;
}
.c-meganav {
width: 100%;
height: 575px;
display: flex;
}
@media (min-width: 61.25em) {
.c-office-selector {
position: absolute;
height: 578px;
top: 100%;
left: -20px;
right: auto;
visibility: visible;
opacity: 1;
color: #001e5a;
width: auto;
}
.c-office-selector .c-office-selector__link {
color: #001e5a;
padding: 10px 40px;
font-weight: 600;
}
.c-office-selector .c-office-selector__link:hover {
color: #0056da;
text-decoration: none;
}
}
.c-office-selector__item-list {
list-style: none;
display: flex;
flex-direction: column;
/* height: calc(100% - 40px);*/
}
@media (min-width: 61.25em) {
.c-office-selector__item-list {
background-color: #f0f6ff;
width: 275px;
/* height: 100%;*/
}
}
.c-office-selector__item {
margin: 10px 20px;
}
/* .c-office-selector__item:first-of-type {
margin-top: auto; }*/
.c-office-selector__item:last-of-type {
margin-bottom: auto;
}
.c-office-selector__item.c-primary-nav__item--last {
margin-top: auto;
margin-bottom: 20px;
}
@media (min-width: 61.25em) {
.c-office-selector__item {
margin-left: 0 !important;
margin-right: 0 !important;
position: static;
}
}
@media (min-width: 61.25em) {
.c-office-selector__dropdown-menu-wrapper {
height: 100%;
transition: none;
}
}
.c-office-selector__dropdown-menu {
list-style: none;
display: flex;
flex-direction: column;
height: calc(100% - 60px);
}
@media (min-width: 61.25em) {
.c-office-selector__dropdown-menu {
display: list-item;
height: auto;
}
.c-office-selector__dropdown-menu:first-of-type {
margin-top: auto;
}
.c-office-selector__dropdown-menu:last-of-type {
margin-top: auto;
}
.c-office-selector__dropdown-menu .c-office-selector__item {
margin-top: 0;
margin-bottom: 0;
}
}
.c-office-selector__dropdown-menu {
list-style: none;
display: flex;
flex-direction: column;
height: calc(100% - 60px);
}
@media (min-width: 61.25em) {
.c-sub-menu-list {
display: list-item;
height: auto;
background-color: #f9f9f9;
padding-left: 0px;
}
.c-sub-menu-list:first-of-type {
margin-top: auto;
}
.c-sub-menu-list:last-of-type {
margin-top: 5px;
}
.c-sub-menu-list .c-office-selector__item {
margin-top: 0;
margin-bottom: 0;
}
}
@media (min-width: 61.25em) {
[data-area="tier1"] .submenu-visible > .c-office-selector__link {
color: #0056da;
text-decoration: none;
}
[data-area="tier1"] > .c-office-selector__item-list .c-office-selector__link:hover {
color: #0056da;
text-decoration: none;
}
}
@media (min-width: 61.25em) {
[data-area="tier2"] {
background-color: #fff;
left: 274px;
visibility: visible;
position: absolute;
padding-top: 0;
left: 0;
top: auto;
width: 400px;
}
[data-area="tier2"]:after {
position: absolute;
bottom: 20px;
left: 50%;
width: 30px;
height: 30px;
transform: translateX(-50%);
z-index: 200;
}
[data-area="tier2"] > .c-office-selector__dropdown-menu {
display: flex;
height: 100%;
overflow-y: scroll;
padding-bottom: 60px;
}
[data-area="tier2"] > .c-office-selector__dropdown-menu:after {
content: "";
height: 60px;
position: absolute;
bottom: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0), #fff);
top: auto;
left: auto;
right: auto;
width: 100%;
pointer-events: none;
z-index: 100;
}
[data-area="tier2"] .c-office-selector__link:hover, [data-area="tier2"] .c-office-selector__link:focus {
background-color: #f0f6ff;
}
[data-area="tier2"] .submenu-visible > .c-office-selector__link {
background-color: #f0f6ff;
}
[data-area="tier2"] .c-sub-menu-selector__link:hover, [data-area="tier2"] .c-sub-menu-selector__link:focus {
background-color: #f0f6ff;
}
[data-area="tier2"] .submenu-visible > .c-sub-menu-selector__link {
background-color: #f0f6ff;
color: #0056da;
}
.c-sub-menu-selector__link {
padding: 0;
padding-left: 20px;
}
.submenu-visible [data-area="tier2"] {
display: block;
opacity: 1;
transform: translateX(0);
z-index: 99;
}
.submenu-visible [data-area="tier2"] > .c-primary-nav__link--dropdown-icon, .submenu-visible [data-area="tier2"]:focus-within > .c-primary-nav__link--dropdown-icon {
background-color: #f0f6ff;
}
}
@media (min-width: 61.25em) {
[data-area="tier3"] {
top: 0;
left: 0;
visibility: visible;
position: relative;
height: auto;
background-color: #fff;
}
@media (min-width: 61.25em) {
.c-sub-menu-selector__item [data-area="tier3"] {
top: -10px;
left: 100%;
visibility: visible;
height: auto;
background-color: #f9f9f9;
position: absolute;
}
}
.c-office-selector__item > [data-area="tier3"],
.c-office-selector__item:active > [data-area="tier3"] {
display: none !important;
}
.c-office-selector__item:focus > [data-area="tier3"] {
display: none !important;
}
.c-office-selector__item.submenu-visible > [data-area="tier3"],
.c-office-selector__item.submenu-visible:focus > [data-area="tier3"] {
display: block !important;
opacity: 1;
}
[data-area="tier3"] .c-office-selector__item {
margin: 5px 20px;
}
.c-sub-menu-selector__item > [data-area="tier3"],
.c-sub-menu-selector__item:active > [data-area="tier3"] {
display: block !important;
}
.c-sub-menu-selector__item:focus > [data-area="tier3"] {
display: none !important;
}
.c-sub-menu-selector__item.submenu-visible > [data-area="tier3"],
.c-sub-menu-selector__item.submenu-visible:focus > [data-area="tier3"] {
display: block;
opacity: 1;
transform: translateX(0);
z-index: 99;
left: 100%;
padding-top: 5px;
padding-bottom: 5px;
width: max-content;
}
[data-area="tier3"] .c-sub-menu-selector__item {
margin: 5px 5px !important;
}
.c-sub-menu-selector__item {
margin: 5px 5px;
}
[data-area="tier3"] .c-office-selector__link {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 60px;
font-weight: normal;
}
}
.c-menu-color-blue {
color: #595959;
}
@media (min-width: 61.25em) {
[data-area="tier4"] {
top: 0;
left: 0;
visibility: visible;
position: relative;
height: auto;
background-color: #fff;
}
.c-office-selector__item > [data-area="tier4"],
.c-office-selector__item:active > [data-area="tier4"] {
display: none !important;
}
.c-office-selector__item:focus > [data-area="tier4"] {
display: none !important;
}
.c-office-selector__item.submenu-visible > [data-area="tier4"],
.c-office-selector__item.submenu-visible:focus > [data-area="tier4"] {
display: block !important;
opacity: 1;
}
[data-area="tier4"] .c-office-selector__item {
margin: 5px 20px;
}
[data-area="tier4"] .c-office-selector__link {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 60px;
font-weight: normal;
}
}
.c-office-selector-scrollable {
display: none;
}
.c-language-selector {
margin-top: auto;
text-align: center;
}
@media (min-width: 61.25em) {
.c-language-selector {
max-width: max-content;
margin-top: 0;
}
}
.c-language-selector .c-primary-nav__link {
text-align: center;
padding: 8px 25px;
}
.c-language-selector__list {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
width: 50%;
}
@media (min-width: 61.25em) {
.c-language-selector__list {
top: 5px;
transform: none;
}
.c-language-selector__list .c-dropdown-menu__item:hover {
background: #eee;
}
}
/* ==========================================================================
#ICON BASE
========================================================================== */
.c-icon {
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
display: inline-block;
}
.c-icon__contact--email-dims {
width: 27px;
height: 27px;
}
.c-icon__contact--email-keyline-dims {
width: 25px;
height: 25px;
}
.c-icon__contact--fax-dims {
width: 27px;
height: 27px;
}
.c-icon__contact--location-dims {
width: 27px;
height: 27px;
}
.c-icon__contact--phone-dims {
width: 27px;
height: 27px;
}
.c-icon__general--download-keyline-dims {
width: 25px;
height: 25px;
}
.c-icon__general--download-pdf-dims {
width: 16px;
height: 16px;
}
.c-icon__general--download-v-card-dims {
width: 16px;
height: 16px;
}
.c-icon__general--drag-drop-keyline-dims {
width: 27px;
height: 27px;
}
.c-icon__general--play-dims {
width: 60px;
height: 60px;
}
.c-icon__general--print-keyline-dims {
width: 25px;
height: 25px;
}
.c-icon__general--quote-marks-dims {
width: 278px;
height: 212px;
}
.c-icon__general--upload-dims {
width: 30px;
height: 30px;
}
.c-icon__logos--logo-dims {
width: 118px;
height: 21px;
}
.c-icon__logos--logo--footer-dims {
width: 155px;
height: 27px;
}
.c-icon__logos--logo-reversed-dims {
width: 118px;
height: 21px;
}
.c-icon__nav--arrow-down-dims {
width: 30px;
height: 30px;
}
.c-icon__nav--arrow-left-dims {
width: 30px;
height: 30px;
}
.c-icon__nav--arrow-right-dims {
width: 30px;
height: 30px;
}
.c-icon__nav--arrow-up-dims {
width: 30px;
height: 30px;
}
.c-icon__nav--close-thick-dims {
width: 30px;
height: 30px;
}
.c-icon__nav--close-thin-dims {
width: 16px;
height: 16px;
}
.c-icon__nav--gallery-dims {
width: 30px;
height: 30px;
}
.c-icon__nav--minus-dims {
width: 30px;
height: 30px;
}
.c-icon__nav--play-dims {
width: 30px;
height: 30px;
}
.c-icon__nav--plus-dims {
width: 30px;
height: 30px;
}
.c-icon__nav--search-dims {
width: 30px;
height: 30px;
}
.c-icon__nav--tick-dims {
width: 30px;
height: 30px;
}
.c-icon__navigation--menu-dims {
width: 30px;
height: 30px;
}
.c-icon__pins--pin-black-dims {
width: 30px;
height: 46px;
}
.c-icon__pins--pin-bright-blue-dims {
width: 30px;
height: 46px;
}
.c-icon__pins--pin-goldenrod-dims {
width: 30px;
height: 46px;
}
.c-icon__pins--pin-goldenron-blank-dims {
width: 30px;
height: 46px;
}
.c-icon__pins--pin-goldenron-number-dims {
width: 30px;
height: 46px;
}
.c-icon__pins--pin-midnight-dims {
width: 30px;
height: 46px;
}
.c-icon__pins--pin-midnight-blank-dims {
width: 30px;
height: 46px;
}
.c-icon__pins--pin-midnight-number-dims {
width: 30px;
height: 46px;
}
.c-icon__social--facebook-dims {
width: 27px;
height: 27px;
}
.c-icon__social--google-dims {
width: 27px;
height: 27px;
}
.c-icon__social--instagram-dims {
width: 27px;
height: 27px;
}
.c-icon__social--linked-in-dims {
width: 27px;
height: 27px;
}
.c-icon__social--rss-dims {
width: 27px;
height: 27px;
}
.c-icon__social--twitter-dims {
width: 27px;
height: 27px;
}
.c-icon__social--you-tube-dims {
width: 27px;
height: 27px;
}
.c-icon__topics--blog-dims {
width: 12px;
height: 12px;
}
.c-icon__topics--market-research-dims {
width: 12px;
height: 12px;
}
.c-icon__topics--whitepaper-dims {
width: 12px;
height: 12px;
}
.c-icon-link {
display: flex;
align-items: center;
}
.c-icon-link > svg {
margin-right: 5px;
}
/* ==========================================================================
#BLOCK HERO
========================================================================== */
.c-page-header {
background: #001e5a no-repeat center;
background-size: cover;
color: #fff;
z-index: 10;
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
padding-top: 60px;
min-height: 120px;
}
@media (min-width: 46.25em) {
.c-page-header {
padding-top: 100px;
min-height: 300px;
padding-bottom: 34px;
}
}
@media (min-width: 61.25em) {
.c-page-header {
padding-top: 130px;
}
}
.c-page-header:before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 1;
height: 100%;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent);
}
.c-page-header:after {
display: none;
content: none !important;
min-height: inherit;
font-size: 0;
}
.c-page-header__wrapper {
flex: 0 0 100%;
z-index: 400;
}
.c-page-header__title {
font-size: 24px;
line-height:1.2;
flex: 0 0 100%;
}
@media (min-width: 46.25em) {
.c-page-header__title {
font-size: 48px;
}
}
@media (min-width: 61.25em) {
.c-page-header__title {
flex-basis: 70%;
}
}
.c-page-header__title--large {
font-size: 48px;
line-height:1.2;
}
.c-page-header__title--medium {
font-size: 48px;
line-height:1.2;
}
/* RTE overrides to enforce mobile */
.hero-slide .c-page-header__title--large span{
display:inline-block;
}
@media (max-width: 61.25em) {
.hero-slide .c-page-header__title--large span {
font-size: 44px !important;
}
.hero-slide .c-page-header__title--large{
font-size:44px;
}
}
.article-header .c-page-header__wrapper {
min-height: 213px;
}
.o-section {
background-repeat: no-repeat;
background-size: cover;
background-position: top;
}
@media (min-width: 46.25em) {
.c-page-header__title--large {
font-size: 72px;
}
.c-page-header__title--medium {
font-size: 50px;
}
.article-header .c-page-header__wrapper {
min-height:260px;
}
.article-header .c-page-header__wrapper {
min-height:320px;
}
}
.c-page-header__description {
flex: 1 1 auto;
}
@media (min-width: 46.25em) {
.c-page-header__description {
font-size: 24px;
}
}
@media (min-width: 61.25em) {
.c-page-header__description {
flex-basis: 60%;
}
}
.c-page-header--inverse .c-page-header__description {
color: #222222;
}
.modal-gate {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 999;
display: none;
}
.modal-inner {
background: white;
max-width: 600px;
margin: 0 auto;
top: 100px;
position: relative;
padding: 40px;
}
.modal-gate h2 {
font-size: 22px;
line-height:1.2;
}
.modal-overlay {
position: fixed;
width: 100%;
height: 100%;
background: black;
opacity: .2;
}
.modal-gate a.close-btn {
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
}
.c-page-header--bottom {
align-items: flex-end;
padding-bottom: 0;
}
.c-page-header--middle {
align-items: center;
}
.c-page-header--middle > :first-child {
margin-top: auto;
}
.c-page-header--middle > :last-child {
margin-bottom: auto;
}
.c-page-header--inverse {
background-color: #fff;
color: #001e5a;
}
@media (min-width: 46.25em) {
.c-page-header--inverse {
min-height: 280px;
}
}
.c-page-header--inverse:before {
display: none;
}
.c-page-header--min {
min-height: auto;
padding-bottom: 0;
}
.c-page-header--min:before {
display: none;
}
.c-page-header--short-column .c-page-header__description {
max-width: 100%;
}
@media (min-width: 46.25em) {
.c-page-header--short-column .c-page-header__description {
max-width: 55%;
}
}
@media (min-width: 61.25em) {
.c-page-header--short-column .c-page-header__description {
max-width: 50%;
}
}
.c-page-header--overlay:after {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.1);
}
/* ==========================================================================
#HERO BLOCK
========================================================================== */
.c-grid-hero {
display: block;
display: grid;
position: relative;
background-position: center top;
background-color: #f5f1e1;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
grid-template-columns: 20px minmax(min-content,15ch) 65px 65px minmax(20px,110px);
grid-template-rows: 100px 65px auto minmax(80px,max-content) 85px;
transition: width 200ms ease-in-out;
font-size: 44px;
font-size-adjust: 0.6;
line-height: 65px;
padding: 60px 20px;
background-blend-mode: overlay, normal;
max-height: 920px;
align-items: self-end;
}
@supports (-webkit-overflow-scrolling: touch) {
.c-grid-hero {
/* CSS specific to iOS devices */
font-size: 52px;
}
}
@supports (display: grid) {
.c-grid-hero {
padding: 0;
}
}
@media (min-width: 46.25em) {
.c-grid-hero {
grid-template-columns: 20px minmax(min-content,23ch) 87px 87px minmax(20px,110px);
}
@supports (-webkit-overflow-scrolling: touch) {
.c-grid-hero {
/* CSS specific to iOS devices */
font-size: 52px;
}
}
}
@media (min-width: 61.25em) {
.c-grid-hero {
font-size: 62px;
line-height: 87px;
grid-template-columns: 170px minmax(min-content,23ch) 87px 87px minmax(20px,110px);
grid-template-rows: 230px 87px auto minmax(80px,max-content) 87px 56px;
}
@supports (-webkit-overflow-scrolling: touch) {
.c-grid-hero {
/* CSS specific to iOS devices */
font-size: 76px;
}
}
}
@media (min-width: 76.25em) {
.c-grid-hero {
font-size: 85px;
line-height: 114px;
grid-template-columns: 170px minmax(min-content, 900px) 154px 114px minmax(20px, 110px);
grid-template-rows: 230px 114px auto minmax(80px, max-content) 114px 100px;
}
@supports (-webkit-overflow-scrolling: touch) {
.c-grid-hero {
/* CSS specific to iOS devices */
font-size: 101px;
}
}
}
.c-grid-hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
height: 132px;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
}
.c-grid-hero::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 132px;
background-image: linear-gradient(to bottom, rgba(0, 30, 90, 0) 25%, #001e5a);
z-index: 1;
}
/**
* Hero Image
* 1) This is the primary hero image that runs full-bleed across the layout
*/
.c-grid-hero__img {
grid-column: 1 / span 5;
grid-row: 1 / span 5;
}
.c-grid-hero__img > img {
height: 100%;
display: block;
width: 100%;
object-fit: cover;
}
/**
* Hero Headline
* 1) This sits overtop of the hero image when space permits
*/
.c-grid-hero__headline {
margin: 1px 10px 0;
grid-column: 2 / span 2;
grid-row: 2 / span 2;
font-size: inherit;
line-height: inherit;
color: #fff;
padding: 0;
z-index: 10;
text-rendering: optimizeLegibility;
}
@supports (box-decoration-break: clone) {
.c-grid-hero__headline {
margin-left: 0;
margin-right: 20px;
}
}
.c-grid-hero__headline > span {
padding: 6px 0;
background: rgba(255, 182, 0, 0.9);
border: 0;
outline: 0;
display: inline;
line-height: inherit;
box-shadow: 10px 0 0 0 rgba(255, 182, 0, 0.9), -10px 0 0 0 rgba(255, 182, 0, 0.9);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
@media screen and (min-width: 61.25em) {
.c-grid-hero__headline > span {
padding: 6px 22px;
}
.c-grid-hero__description {
padding-left: 20px;
}
}
@supports (box-decoration-break: clone) {
.c-grid-hero__headline > span {
margin-left: 0;
box-shadow: none;
box-decoration-break: clone;
padding: 6px 20px;
}
}
.c-grid-hero__description {
line-height: 28px;
font-size: 26.5px;
grid-column: 2/span 3;
grid-row: 4/span 1;
margin-left: 14px;
color: white;
font-weight: 600;
padding-top: 20px;
}
.c-grid-hero__icon {
display: inline-block;
font-size: 0;
z-index: 9;
}
@supports (display: grid) {
.c-grid-hero__icon {
width: auto;
height: auto;
}
}
.c-grid-hero__icon svg {
max-width: 100%;
}
.c-grid-hero__icon img {
max-width: 65px;
max-height: 65px;
}
@media (min-width: 46.25em) {
.c-grid-hero__icon img {
max-width: 87px;
max-height: 87px;
}
}
@media (min-width: 61.25em) {
.c-grid-hero__icon img {
max-width: 114px;
max-height: 114px;
}
}
.c-grid-hero__icon--1 {
grid-column: 4 / span 1;
grid-row: 2 / span 1;
float: right;
position: relative;
top: 1px;
left: 10px;
}
.c-grid-hero__icon--2 {
grid-column: 3 / span 1;
grid-row: 5 / span 1;
z-index: 9;
margin-top: 20px;
}
@supports (display: grid) {
.c-grid-hero__icon--2 {
margin-top: 0;
}
}
/* ==========================================================================
#LOCAL-HERO-BLOCK
========================================================================== */
.c-grid-hero-local {
position: relative;
display: grid;
grid-template-columns: 20px 30px 1fr 1fr 20px;
grid-template-rows: 110px auto 40px auto auto 40px;
grid-gap: 0;
line-height: 1.35;
}
@supports (display: -ms-grid) {
.c-grid-hero-local {
padding: 0;
}
}
@supports (display: grid) {
.c-grid-hero-local {
padding: 0;
}
}
@media (min-width: 46.25em) {
.c-grid-hero-local {
grid-template-columns: 40px 1fr 1fr 1fr 40px;
}
}
@media (min-width: 61.25em) {
.c-grid-hero-local {
grid-template-columns: 110px 220px 1fr 1fr;
grid-template-rows: minmax(119px, 140px) auto 100px auto 60px;
}
}
/**
* Hero Headline
* 1) This sits overtop of the hero image when space permits
*/
.c-grid-hero-local__headline {
margin: -1px 0 40px 0px;
font-size: calc(2rem + 3.5vw);
line-height: 1.2;
color: #fff;
padding: 0;
z-index: 10;
}
@media (min-width: 46.25em) {
.c-grid-hero-local__headline {
margin-left: 0;
max-width:220px;
}
}
@supports (display: grid) {
.c-grid-hero-local__headline {
margin-bottom: 0;
}
}
.c-grid-hero-local__headline > span {
text-transform:uppercase;
}
@supports (box-decoration-break: clone) {
.c-grid-hero-local__headline > span {
box-decoration-break: clone;
padding-left: 5px;
padding-right: 5px;
}
}
[data-area="image"] {
position: relative;
grid-column: 1 / span 5;
grid-row: 1 / span 7;
background-position: top;
background-repeat: repeat, no-repeat;
background-blend-mode: overlay, normal;
background-size: auto, cover;
z-index: -1;
}
@media (min-width: 61.25em) {
[data-area="image"] {
grid-column: 1 / span 5;
grid-row: 1 / span 7;
}
}
[data-area="image"]:after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
height: 100%;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent);
}
[data-area="background"] {
grid-column: 1 / span 4;
grid-row: 7 / span 3;
background-color: white;
z-index: 200;
}
.c-grid-hero-local [data-area="background"] {
grid-column: 1 / span 5;
grid-row: 6 / span 3;
}
.c-page-header-offset-background [data-area="background"] {
background-color: white;
height: 100%;
grid-row: 7 / span 1;
grid-column: span 2;
}
.c-page-header-offset-background.offset-top [data-area="background"]{
grid-row: 4;
}
@media (min-width: 61.25em) {
.c-page-header-offset-background [data-area="background"].dynamic,
.successstoriespage .c-page-header-offset-background [data-area="background"] {
grid-column: span 6;
background-color: transparent;
padding-left: 20px;
padding-right: 20px;
}
.c-page-header-offset-background [data-area="background"].dynamic .background-left,
.successstoriespage .c-page-header-offset-background [data-area="background"] .background-left{
height: 100%;
background: white;
padding-left: 20px;
margin-left: -20px;
box-sizing: content-box;
}
}
@media (min-width: 61.25em){
.c-page-header-offset-background [data-area="background"].dynamic,
.successstoriespage .c-page-header-offset-background [data-area="background"] {
padding-left: 90px;
padding-right: 90px;
}
.c-page-header-offset-background [data-area="background"].dynamic .background-left,
.successstoriespage .c-page-header-offset-background [data-area="background"] .background-left{
padding-left: 130px;
margin-left: -90px;
}
.c-article{
padding-left: 40px;
}
.c-page-header-offset-background.property-header [data-area="background"].dynamic {
padding: 0;
}
.property-header.c-page-header-offset-background [data-area="background"].dynamic .background-left {
padding: 0;
margin-left: -70px;
}
.successstoriespage .c-page-header-offset-background [data-area="background"] .background-left {
padding: 0;
padding-left: 20px;
margin-left: -90px;
}
}
@media (min-width: 90em){
.property-header.c-page-header-offset-background [data-area="background"].dynamic .background-left,
.successstoriespage .c-page-header-offset-background [data-area="background"] .background-left{
margin-left: -90px;
}
.property-header.c-page-header-offset-background [data-area="background"].dynamic .background-left{
max-width: 760px;
}
}
@media (min-width: 61.25em) {
[data-area="background"] {
grid-column: 1 / span 2;
grid-row: 6 / span 2;
}
.c-grid-hero-local [data-area="background"] {
grid-column: 1 / span 2;
grid-row: 5 / span 2;
}
}
[data-area="headline"] {
grid-column: 2 / span 2;
grid-row: 2 / span 1;
z-index: 200;
}
[data-area="intro"],
[data-area="extra"] {
background: #001e5a;
color: #fff;
z-index: 200;
grid-column: 3 / span 3;
padding: 30px;
font-size:18px;
}
[data-area="intro"] > *,
[data-area="extra"] > *{
color: white;
}
[data-area="intro"] {
padding-bottom: 0;
grid-row: 4 / span 1;
}
[data-area="extra"] {
grid-row: 5 / span 2;
}
@media (min-width: 61.25em) {
[data-area="intro"] {
grid-column: 3 / span 1;
grid-row: 4 / span 2;
padding: 40px;
}
[data-area="extra"] {
grid-column: 4 / span 1;
grid-row: 4 / span 2;
padding: 40px;
}
}
[data-area="extra"] > :last-child {
margin-bottom: 0;
}
.c-bio-header {
position: relative;
width: 100%;
margin-bottom: 20px;
z-index: 100;
}
@media (min-width: 61.25em) {
.c-bio-header .o-flag__body {
vertical-align: top;
}
}
.c-bio-header__img img {
margin-bottom: -40px;
width: 152px;
}
@media (min-width: 46.25em) {
.c-bio-header__img img {
width: 220px;
}
}
@media (min-width: 61.25em) {
.c-bio-header__content {
padding-bottom: 50px;
}
}
.c-bio-header__buttons {
font-size: 100%;
z-index: 100;
}
@media (min-width: 61.25em) {
.c-bio-header__buttons {
position: absolute;
bottom: 0;
right: -20px;
}
}
@media (min-width: 90em) {
.c-bio-header__buttons {
right: 20px;
}
}
@media (min-width: 61.25em) {
.c-bio-details__column\@desktop {
margin-top: 55px;
}
}
/* ==========================================================================
#ICON TILE
========================================================================== */
.c-icon-tile {
display: block;
text-align: center;
max-width: 170px;
margin: 40px auto;
padding: 5px;
border: 1px solid transparent;
transition: border 200ms ease-in-out;
}
.c-icon-tile:hover, .c-icon-tile:focus, .c-icon-tile:active {
border-color: #fff;
}
.c-icon-tile__icon {
display: block;
margin-bottom: 5px;
}
/* ==========================================================================
#IMAGE TILE
========================================================================== */
.c-image-tile-wrapper {
display: flex;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
}
@media (min-width: 46.25em) {
.c-image-tile-wrapper {
flex-direction: row;
justify-content: center;
flex-wrap: nowrap;
}
}
.c-image-tile__content {
display: flex;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
}
.c-image-tile {
background-color: #001e5a;
color: #fff;
margin-bottom: 40px;
max-width: 220px;
overflow: hidden;
width: 100%;
}
.c-image-tile-wrapper .c-image-tile {
flex: 1 0 auto;
}
@media (min-width: 46.25em) {
.c-image-tile {
margin-left: 10px;
margin-right: 10px;
}
}
.c-image-tile:hover .c-image-tile__content {
transition: background 200ms ease-in-out;
background-color: #ffb600;
color: #001e5a;
}
.c-image-tile:after {
content: "";
display: table;
clear: both;
}
.c-image-tile__image {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
display: inline-block;
}
.c-image-tile__icon {
margin-bottom: 5px;
max-height: 100px;
}
.c-image-tile__icon--tiny svg {
height: 12px;
width: 12px;
}
.c-image-tile__title {
color: inherit;
}
.c-typeahead {
position: relative;
}
.c-typeahead__input {
font-size: 21px;
color: #595959;
border: 0;
border-left: solid 1px #808080;
padding: 10px;
width: 100%;
}
.c-typeahead__input::placeholder {
color: #e6e6e6;
}
.c-typeahead__input:focus {
outline: 0;
}
.c-typeahead__relative {
position: relative;
}
.c-typeahead__results {
position: absolute;
top: 100%;
left: 0;
margin-top: 0;
margin-bottom: 0;
background: #fff;
z-index: 200;
width: 100%;
}
.c-typeahead__results > li > a {
display: block;
padding: 0 10px;
}
.c-typeahead__results > li > a:hover {
background-color: #f2f4f7;
}
.c-typeahead__close-btn {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
padding: 20px;
cursor: pointer;
}
.c-typeahead li {
padding: 2px 0;
}
.c-logo__img--typeahead {
position: absolute;
max-width: 200px;
left: 20px;
top: 50%;
transform: translateY(-50%);
}
.c-logo__img {
width: 144px;
max-width: none;
}
.c-typeahead--fixed {
position: fixed;
padding: 20px 90px 20px 200px;
}
.c-typeahead--results-input {
min-height: 65px;
background-color: #f2f4f7;
border: solid 1px #e6e6e6;
}
.c-typeahead--results-input .c-typeahead__relative {
flex: 1;
}
.c-typeahead--results-input .c-typeahead__input {
background-color: transparent;
border: 0;
}
.c-typeahead--results-input .c-typeahead__input:focus {
border-color: transparent;
background-color: transparent;
}
.c-typeahead--results-input .c-typeahead__results {
border: solid 1px #e6e6e6;
border-top: 0;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 1px 0 1px rgba(0, 0, 0, 0.08);
transition: box-shadow 200ms;
}
:hover .c-typeahead--results-input .c-typeahead__results {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.18), 0 1px 0 1px rgba(0, 0, 0, 0.08);
}
.c-typeahead--results-input .c-typeahead__results:hover {
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 1px 0 1px rgba(0, 0, 0, 0.08);
}
/* ==========================================================================
#ICON CARD
========================================================================== */
.c-icon-card {
background-color: #f2f4f7;
color: #222222;
margin-bottom: 40px;
font-size: 1rem;
text-align: center;
border-color: #e6e6e6;
max-width: 340px;
border: solid 1px #e6e6e6;
}
.c-icon-card:hover {
background-color: #0056da;
border-color: #0056da;
color: #fff;
text-decoration: none;
text-rendering: geometricPrecision;
}
.c-icon-card:before {
padding-bottom: 100%;
}
.c-icon-card ul {
text-align: left;
}
.c-icon-card__img {
flex: 1 0 100%;
margin-bottom: 20px;
}
.c-icon-card__title {
color: #0056da;
}
.c-icon-card:hover .c-icon-card__title {
color: #fff;
}
@media (min-width: 46.25em) {
.c-card-flex-row {
margin-left: -20px;
}
.c-card-flex-row .c-card {
margin-left: 20px;
margin-right: 0;
}
}
/* ==========================================================================
#CARD
========================================================================== */
/**
* Base card object for Cresa, Stacked image then content
*
* Default
* .c-card
* ______
* | |
* |______|
* - -
* ------
* .c-card--overhang (used with smaller images on listing pages)
* ______
* |____ |
* | |_|
* '----'
*
* .c-card--overlay (used with the c-card--large class)
* ______
* | |
* |____ |
* |____|_|
*
*/
.c-card {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
position: relative;
}
@media (min-width: 46.25em) {
.c-card {
max-width: 310px;
width: 100%;
padding-left: 0px;
}
}
.c-card__img-wrapper {
overflow: hidden;
z-index: 100;
margin-bottom:12px;
}
.c-card-subservice {
padding-top: 40px;
margin-right: 5px;
}
.c-card--large .c-card__img-wrapper {
margin-bottom: 0;
}
.c-card--large .c-card__img-wrapper {
margin-bottom: 0;
}
.c-card__img {
background-color: #e6e6e6;
transition: 400ms transform;
}
@supports (object-fit: cover) {
.c-card__img {
object-fit: cover;
aspect-ratio: 1 / 1;
width: 100%;
height: 100%;
}
.c-card__img:hover {
transform: scale(1.05);
}
}
.c-card__content {
width: 100%;
padding: 10px;
background: #fff;
z-index: 100;
}
@media (min-width: 61.25em) {
.c-card__content {
padding: 20px;
}
}
.c-card__link {
display: block;
}
a.lnk-arrow {
display: block;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
padding: 10px 0 4px;
}
a.lnk-arrow:after {
content: "";
padding: 0px 16px;
margin-left: 8px;
background-image: url('/images/arrow-blue.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.c-card__details {
font-size: 20px;
color: #222222;
margin-bottom: 5px;
}
.c-card__details:last-of-type {
margin-bottom: 0;
}
.c-card__meta {
min-height: 2.375rem;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #001e5a;
padding-top: 10px;
}
.c-card--overhang .c-card__meta,
.c-card--overlay .c-card__meta {
position: relative;
border-bottom: 0;
margin-bottom: 0;
margin-top: -2.375rem;
}
@media (min-width: 61.25em) {
.c-card--overhang .c-card__meta,
.c-card--overlay .c-card__meta {
margin-top: 0;
}
}
.c-card__meta-title {
margin-bottom: 10px;
color: #595959;
font-weight: normal;
}
.c-card--overhang .c-card__meta-title,
.c-card--overlay .c-card__meta-title {
position: relative;
margin-bottom: 0;
background-color: #0056da;
padding: 1px 10px;
line-height: 1.625rem;
font-size: 0.9375rem;
}
@media (min-width: 61.25em) {
.c-card--overhang .c-card__meta-title,
.c-card--overlay .c-card__meta-title {
padding: 5px 20px;
}
}
.c-card--overhang .c-card__meta-title,
.c-card--overhang .c-card__meta-title > a,
.c-card--overlay .c-card__meta-title,
.c-card--overlay .c-card__meta-title > a {
color: #fff;
}
.c-card__tag {
position: relative;
margin-bottom: 10px;
}
@media (min-width: 46.25em) {
.c-card--overhang .c-card__body {
margin-top: -3.9vw;
max-width: 80%;
position: relative;
}
}
.c-card--overlay .c-card__body {
display: flex;
flex-direction: column;
width: 100%;
}
@media (min-width: 46.25em) {
.c-card--overlay .c-card__body {
left: 0;
bottom: 0;
max-width: 80%;
position: absolute;
}
}
.c-card__link:hover {
text-decoration: none;
}
/* Size variants
========================================================================= */
.c-card--small {
max-width: 340px;
}
.c-card--large {
position: relative;
max-width: 580px;
}
.c-card--full {
max-width: none;
}
.c-card--flush {
margin-left: 0;
margin-right: 0;
}
.c-h3{
font-size:36px;
}
.c-person-card {
text-align: center;
margin: 0 auto 40px;
max-width:471px;
}
.c-person-card__img {
z-index: 1;
object-fit: contain;
text-align:left;
}
.c-person-card__img img {
width:100%;
max-width: 350px;
}
.c-person-card--alt .c-person-card__img {
max-width: 100%;
height: auto;
}
.c-person-card__title {
text-transform: uppercase;
font-size: 14px;
margin-bottom:12px;
}
.c-person-card__extra {
font-size: 1rem;
margin-bottom: 5px;
}
.c-person-card__body {
margin-bottom: 20px;
position: relative;
text-align:left;
color:white;
}
.property-contact .c-person-card__body {
color: #001e5a;
}
@media (min-width: 46.25em) {
.c-person-card__body {
min-height: 50px;
}
}
.c-person-card__body a {
color: #001e5a;
}
.c-person-card--alt .c-person-card__body {
color: #001e5a;
padding-left: 0;
padding-right: 10px;
margin: 0;
display: flex;
flex: 1 1 auto;
line-height:1.3;
}
@media (min-width: 46.25em){
.c-person-card--alt .c-person-card__body {
padding-top: 30px;
}
}
p.c-person-card__bio {
margin-top: 22px;
}
.c-person-card__footer svg {
color: #001e5a;
}
/* in case of inline styles in rich text */
p.c-person-card__bio,
.c-person-card__bio span {
color: #001e5a !important;
font-size: 16px !important;
}
.u-background--secondary p.c-person-card__bio,
.u-background--secondary-light p.c-person-card__bio,
.u-background--secondary p.c-person-card__bio span,
.u-background--secondary-light p.c-person-card__bio span {
color: white !important;
}
/*.bio-card-list{
max-width: 1600px;
}*/
.bio-card-list__header p {
font-size: 16px;
}
.bio-card-list__header h6, .bio-card-list__header h2 {
text-transform: uppercase;
}
/*@media (min-width: 90em) {
.c-person-card--alt .c-person-card__body {
padding-left: 40px;
}
}*/
.c-person-card__name {
font-size: 1.25rem;
}
@media (min-width: 61.25em) {
.c-person-card--alt .c-person-card__name {
font-size: 1.5rem;
}
}
.uppercase{
text-transform:uppercase;
}
.c-person-card__details {
padding: 20px 0px;
}
.c-person-card__footer {
display: flex;
}
.c-person-card__link {
display: flex;
justify-content: center;
padding: 10px;
background: #FFB600;
margin-right:10px;
}
@media (min-width: 61.25em) {
.c-person-card__link .c-icon__contact--email-dims {
width: 20px;
height: 20px;
}
}
.c-person-card__link:last-of-type {
border-right: 0;
}
.c-person-card--alt {
display: flex;
text-align: left;
text-rendering: geometricPrecision;
flex-direction: column;
margin-bottom:0;
}
@media (min-width: 46.25em) {
.c-person-card--alt {
max-width: none;
margin: 0;
min-height: 218px;
}
}
.c-author h5 {
position: relative;
border-bottom: 2px solid #0156DA;
padding-bottom: 12px;
}
.c-author__name {
margin-bottom: 20px;
color: #001e5a;
}
.c-author img {
margin-bottom: 20px;
}
@media (min-width: 46.25em){
.c-author img {
max-width: 120px;
}
}
.c-author__bio {
border-bottom: 1px solid #e6e6e6;
font-size:14px;
padding-bottom:20px;
}
c-author__bio a.lnk-arrow{
padding-right:20px;
}
@media (min-width: 61.25em) {
.c-author__bio {
margin-top: 10px;
padding-top: 10px;
}
}
.c-author__link {
font-size: 0.9375rem;
}
.carousel {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
}
.carousel__wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.carousel__slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
}
.carousel--no-flexbox .carousel__slide {
float: left;
}
.carousel--android .carousel__slide,
.carousel__wrapper {
transform: translate3d(0px, 0, 0);
}
.carousel--vertical > .carousel__wrapper {
flex-direction: column;
}
.carousel--multirow > .carousel__wrapper {
flex-wrap: wrap;
}
.carousel--free-mode > .carousel__wrapper {
transition-timing-function: ease-out;
margin: 0 auto;
}
.carousel-invisible-blank-slide {
visibility: hidden;
}
/* Auto Height */
.carousel--autoheight,
.carousel--autoheight .carousel__slide {
height: auto;
}
.carousel--autoheight .carousel__wrapper {
align-items: flex-start;
transition-property: transform, height;
}
/* 3D Effects */
.carousel--3d {
perspective: 1200px;
}
.carousel--3d .carousel__wrapper,
.carousel--3d .carousel__slide,
.carousel--3d .carousel__slide--shadow-left,
.carousel--3d .carousel__slide--shadow-right,
.carousel--3d .carousel__slide--shadow-top,
.carousel--3d .carousel__slide--shadow-bottom,
.carousel--3d .carousel-cube--shadow {
transform-style: preserve-3d;
}
.carousel--3d .carousel__slide--shadow-left,
.carousel--3d .carousel__slide--shadow-right,
.carousel--3d .carousel__slide--shadow-top,
.carousel--3d .carousel__slide--shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.carousel--3d .carousel__slide--shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
}
.carousel--3d .carousel__slide--shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
}
.carousel--3d .carousel__slide--shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}
.carousel--3d .carousel__slide--shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
}
/* IE10 Windows Phone 8 Fixes */
.carousel--wp8-horizontal,
.carousel--wp8-horizontal > .carousel__wrapper {
touch-action: pan-y;
}
.carousel--wp8-vertical,
.carousel--wp8-vertical > .carousel__wrapper {
touch-action: pan-x;
}
/* Preloader */
.carousel__lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: -1;
transform-origin: 50%;
animation: carousel-preloader-spin 1s steps(12, end) infinite;
}
.carousel__lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
background-size: 100%;
background-repeat: no-repeat;
}
.carousel__lazy-preloader--white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@keyframes carousel-preloader-spin {
100% {
transform: rotate(360deg);
}
}
/* a11y */
.carousel .carousel-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
.carousel__pagination {
position: absolute;
text-align: center;
transition: 300ms opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
}
.carousel__pagination.carousel__pagination--hidden {
opacity: 0;
}
/* Common Styles */
.carousel__pagination--fraction,
.carousel__pagination--custom,
.carousel--horizontal > .carousel__pagination-bullets {
bottom: 40px;
left: 0;
width: 100%;
}
/* Bullets */
.carousel__pagination-bullet {
width: 10px;
height: 10px;
display: inline-block;
border-radius: 100%;
background: transparent;
border: 2px solid currentColor;
}
button.carousel__pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
appearance: none;
}
.carousel__pagination--clickable .carousel__pagination-bullet {
cursor: pointer;
}
.carousel__pagination-bullet--active {
opacity: 1;
background: #001e5a;
}
.carousel__pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.carousel__pagination-bullets-dynamic .carousel__pagination-bullet {
transform: scale(0.33);
position: relative;
}
.carousel__pagination-bullets-dynamic .carousel__pagination-bullet--active {
transform: scale(1);
}
.carousel__pagination-bullets-dynamic .carousel__pagination-bullet--active-main {
transform: scale(1);
}
.carousel__pagination-bullets-dynamic .carousel__pagination-bullet--active-prev {
transform: scale(0.66);
}
.carousel__pagination-bullets-dynamic .carousel__pagination-bullet--active-prev-prev {
transform: scale(0.33);
}
.carousel__pagination-bullets-dynamic .carousel__pagination-bullet--active-next {
transform: scale(0.66);
}
.carousel__pagination-bullets-dynamic .carousel__pagination-bullet--active-next-next {
transform: scale(0.33);
}
.carousel--horizontal > .carousel__pagination-bullets .carousel__pagination-bullet {
margin: 0 4px;
}
.carousel--horizontal > .carousel__pagination-bullets.carousel__pagination-bullets--dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.carousel--horizontal > .carousel__pagination-bullets.carousel__pagination-bullets--dynamic .carousel__pagination-bullet {
transition: 200ms transform, 200ms left;
}
.carousel--horizontal.carousel-rtl > .carousel__pagination-bullets--dynamic .carousel__pagination-bullet {
transition: 200ms transform, 200ms right;
}
/* Progress */
.carousel__pagination-progressbar {
background: rgba(255, 255, 255, 0.25);
position: absolute;
}
.carousel__pagination-progressbar .carousel__pagination-progressbar--fill {
background: #001e5a;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: left top;
}
.carousel--rtl .carousel__pagination-progressbar .carousel__pagination-progressbar--fill {
transform-origin: right top;
}
.carousel--horizontal > .carousel__pagination-progressbar,
.carousel--vertical > .carousel__pagination-progressbar.carousel__pagination-progressbar--opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.carousel--vertical > .carousel__pagination-progressbar,
.carousel--horizontal > .carousel__pagination-progressbar.carousel__pagination-progressbar--opposite {
width: 4px;
height: 100%;
left: 0;
top: 0;
}
.carousel__pagination--primary .carousel__pagination-bullet--active {
background: #001e5a;
}
.carousel__pagination-progressbar.carousel__pagination--primary {
background: rgba(0, 30, 90, 0.25);
}
.carousel__pagination-progressbar.carousel__pagination--primary .carousel__pagination-progressbar--fill {
background: #001e5a;
}
.carousel__pagination--secondary .carousel__pagination-bullet--active {
background: #0056da;
}
.carousel__pagination-progressbar.carousel__pagination--secondary {
background: rgba(0, 86, 218, 0.25);
}
.carousel__pagination-progressbar.carousel__pagination--secondary .carousel__pagination-progressbar--fill {
background: #0056da;
}
.carousel__pagination--secondary-light .carousel__pagination-bullet--active {
background: #243e8c;
}
.carousel__pagination-progressbar.carousel__pagination--secondary-light {
background: rgba(36, 62, 140, 0.25);
}
.carousel__pagination-progressbar.carousel__pagination--secondary-light .carousel__pagination-progressbar--fill {
background: #243e8c;
}
.carousel__pagination--secondary-lighter .carousel__pagination-bullet--active {
background: #f0f6ff;
}
.carousel__pagination-progressbar.carousel__pagination--secondary-lighter {
background: rgba(240, 246, 255, 0.25);
}
.carousel__pagination-progressbar.carousel__pagination--secondary-lighter .carousel__pagination-progressbar--fill {
background: #f0f6ff;
}
.carousel__pagination--tertiary .carousel__pagination-bullet--active {
background: #ffb600;
}
.carousel__pagination-progressbar.carousel__pagination--tertiary {
background: rgba(255, 182, 0, 0.25);
}
.carousel__pagination-progressbar.carousel__pagination--tertiary .carousel__pagination-progressbar--fill {
background: #ffb600;
}
.carousel__pagination--success .carousel__pagination-bullet--active {
background: green;
}
.carousel__pagination-progressbar.carousel__pagination--success {
background: rgba(0, 128, 0, 0.25);
}
.carousel__pagination-progressbar.carousel__pagination--success .carousel__pagination-progressbar--fill {
background: green;
}
.carousel__pagination--info .carousel__pagination-bullet--active {
background: #0192d0;
}
.carousel__pagination-progressbar.carousel__pagination--info {
background: rgba(1, 146, 208, 0.25);
}
.carousel__pagination-progressbar.carousel__pagination--info .carousel__pagination-progressbar--fill {
background: #0192d0;
}
.carousel__pagination--danger .carousel__pagination-bullet--active {
background: #ff0000;
}
.carousel__pagination-progressbar.carousel__pagination--danger {
background: rgba(255, 0, 0, 0.25);
}
.carousel__pagination-progressbar.carousel__pagination--danger .carousel__pagination-progressbar--fill {
background: #ff0000;
}
.carousel__pagination--light .carousel__pagination-bullet--active {
background: #e6e6e6;
}
.carousel__pagination-progressbar.carousel__pagination--light {
background: rgba(230, 230, 230, 0.25);
}
.carousel__pagination-progressbar.carousel__pagination--light .carousel__pagination-progressbar--fill {
background: #e6e6e6;
}
.carousel__pagination--pale .carousel__pagination-bullet--active {
background: #f2f4f7;
}
.carousel__pagination-progressbar.carousel__pagination--pale {
background: rgba(242, 244, 247, 0.25);
}
.carousel__pagination-progressbar.carousel__pagination--pale .carousel__pagination-progressbar--fill {
background: #f2f4f7;
}
.carousel__pagination--dark .carousel__pagination-bullet--active {
background: #595959;
}
.carousel__pagination-progressbar.carousel__pagination--dark {
background: rgba(89, 89, 89, 0.25);
}
.carousel__pagination-progressbar.carousel__pagination--dark .carousel__pagination-progressbar--fill {
background: #595959;
}
.carousel__pagination--white .carousel__pagination-bullet--active {
background: #fff;
}
.carousel__pagination-progressbar.carousel__pagination--white {
background: rgba(255, 255, 255, 0.25);
}
.carousel__pagination-progressbar.carousel__pagination--white .carousel__pagination-progressbar--fill {
background: #fff;
}
.carousel__pagination-lock {
display: none;
}
.carousel__button-prev,
.carousel__button-next {
position: absolute;
top: 50%;
width: 42px;
height: 85px;
margin-top: -42px;
z-index: 10;
cursor: pointer;
background-size: 27px 44px;
background-repeat: no-repeat;
background-color: #fff;
}
.carousel__button-prev.carousel__button-disabled,
.carousel__button-next.carousel__button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.carousel__button-next {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23222' d='M22.956 15.106L9.158 28.956a.148.148 0 0 1-.211 0l-1.903-1.909a.15.15 0 0 1 0-.212L18.834 15 7.043 3.165a.15.15 0 0 1 0-.21l1.904-1.91a.148.148 0 0 1 .21 0l13.8 13.85a.15.15 0 0 1 0 .211'/%3E%3C/g%3E%3C/svg%3E%0A");
right: 0;
border-radius: 100px 0 0 100px;
left: auto;
background-position: right;
}
.carousel__button-prev {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23222' d='M7.044 14.894l13.8-13.85a.148.148 0 0 1 .21 0l1.903 1.91a.15.15 0 0 1 0 .211L11.165 15l11.792 11.835a.15.15 0 0 1 0 .211l-1.903 1.91a.148.148 0 0 1-.21 0l-13.8-13.85a.15.15 0 0 1 0-.212'/%3E%3C/g%3E%3C/svg%3E");
left: 0;
border-radius: 0 100px 100px 0;
background-position: left;
}
/* ------------------------------------*\
#Carousel default template
\*------------------------------------ */
.carousel--default {
width: 100%;
background-color: #001e5a;
color: #fff;
}
.carousel--default .carousel__slide {
text-align: center;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 550px;
}
.carousel--default img {
max-width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
}
@supports (object-fit: cover) {
.carousel--default img {
object-fit: cover;
height: 100%;
width: 100%;
opacity: 0.7;
top: auto;
right: auto;
left: auto;
}
}
.carousel--two-pane {
width: 100%;
max-width: 1440px;
background-color: #fff;
}
.carousel--two-pane .carousel__slide {
text-align: center;
}
.carousel--three-pane {
width: 100%;
background-color: #fff;
margin-bottom:50px;
}
@media (min-width: 61.25em){
.carousel--three-pane {
max-width: 580px;
margin-left: 0;
margin-bottom:0;
}
}
.carousel--three-pane .carousel__slide {
text-align: center;
}
.carousel__slide-content {
padding: 0 20px 40px;
}
.carousel__slide-title {
max-width: 75ch;
margin: auto;
}
.carousel__slide-title a {
color: white;
}
.swiper-button-disabled {
display: none;
}
/* ==========================================================================
#FORM INPUTS
========================================================================== */
/*------------------------------------*\
#FORM-LEGEND
\*------------------------------------*/
form,
.c-legend {
color: white;
font-weight: bold;
font-size:14px;
}
/*------------------------------------*\
#FORM-LABELS
\*------------------------------------*/
.c-label {
padding: 5px 10px;
display: block;
width: 100%;
cursor: pointer;
}
.c-field-group:after {
content: "" !important;
display: block !important;
clear: both !important;
}
.c-field-group label {
margin-right: 10px;
min-width: 250px;
float: left;
}
.c-field-group input[type="radio"],
.c-field-group input[type="checkbox"] {
margin-right: 5px;
}
/*------------------------------------*\
#FORM-FIELD
\*------------------------------------*/
.c-field {
display: block;
width: 100%;
margin: 0;
margin-top:26px;
padding: 8px 10px 8px 0;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
border: none;
resize: vertical;
border-bottom: solid 1px #e6e6e6;
color: white;
border-radius: 0;
background-color: transparent;
background-clip: padding-box;
transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out;
border-bottom: 1px solid white;
}
.c-field::placeholder {
color: white !important;
}
.c-field:focus::placeholder {
color: #001e5a !important;
}
textarea.c-field,
textarea.c-field::placeholder {
color: #001e5a !important;
}
.c-field:focus {
border-color: none;
background-color: white;
color: #001e5a;
padding-left: 8px;
margin-left: -8px;
}
textarea.c-field:focus {
margin-left: 0;
padding-left: 16px;
}
.c-field::placeholder {
color: #808080;
}
@media screen {
.c-field--choice input {
position: absolute;
opacity: 0;
}
}
.c-field input {
margin-right: 5px;
outline: 0;
font-size: 100%;
}
.c-field input:disabled {
color: white;
cursor: not-allowed;
}
/*------------------------------------*\
#SELECTS, CHECKBOXES AND RADIOS
\*------------------------------------*/
select.c-field {
appearance: none;
cursor: pointer;
}
select.c-field::-ms-expand {
display: none;
}
select.c-field:not([multiple]) {
padding-right: 1em;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 30 30'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%23FFB600' d='M14.894 22.956L1.044 9.157a.148.148 0 0 1 0-.21l1.91-1.904a.15.15 0 0 1 .211 0L15 18.835 26.835 7.043a.15.15 0 0 1 .211 0l1.91 1.903a.148.148 0 0 1 0 .211l-13.85 13.8a.15.15 0 0 1-.212 0'/%3e%3c/g%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: 96% 50%;
background-size:18px;
}
select.c-field:not([multiple]):focus {
border-bottom: 1px solid #001e5a;
font-weight: bold;
}
select.c-field:not([multiple]).c-field--dark {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 30 30'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%23fff' d='M14.894 22.956L1.044 9.157a.148.148 0 0 1 0-.21l1.91-1.904a.15.15 0 0 1 .211 0L15 18.835 26.835 7.043a.15.15 0 0 1 .211 0l1.91 1.903a.148.148 0 0 1 0 .211l-13.85 13.8a.15.15 0 0 1-.212 0'/%3e%3c/g%3e%3c/svg%3e");
color: #fff;
border-bottom: 1px solid white;
-webkit-appearance: none;
-moz-appearance: none;
}
select[multiple].c-field {
background-color: #e6e6e6;
padding: 20px;
}
select[multiple].c-field option {
margin-bottom: 5px;
}
@media screen {
.c-field__checkbox {
background-color: #e6e6e6;
position: relative;
top: 0;
left: 0;
height: 25px;
min-width: 25px;
margin-right: 10px;
border-radius: 3px;
}
input:focus ~ .c-field__checkbox {
outline: 1px dotted;
}
input:focus ~ .c-field__checkbox::after {
content: "";
}
input:checked ~ .c-field__checkbox::after {
content: "";
display: inline-block;
position: absolute;
top: 0;
left: 7px;
width: 10px;
height: 20px;
border: solid #0056da;
border-width: 0 5px 5px 0;
transform: rotate(45deg);
}
}
@media screen {
.c-field__radio {
position: relative;
top: 0;
left: 0;
min-width: 26px;
height: 26px;
background-color: #f0f6ff;
border: solid 1px #e6e6e6;
margin-right: 10px;
border-radius: 50%;
}
input:focus ~ .c-field__radio {
outline: 1px dotted;
}
input:focus ~ .c-field__radio::after {
content: "";
}
input:checked ~ .c-field__radio::after {
content: "";
display: inline-block;
position: absolute;
top: 4px;
left: 4px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #0056da;
}
}
textarea.c-field {
padding: 20px;
background-color: #f0f6ff;
border: solid 1px #e6e6e6;
}
.c-field-note {
display: block;
font-size: 0.875rem;
padding: 5px 10px;
}
/*------------------------------------*\
Style Modifiers
\*------------------------------------*/
.c-field--label {
margin-top: 5px;
}
.c-field--dark {
color: #fff;
border-color: #001e5a;
}
.c-field--dark:focus {
border-color: #001e5a;
background-color: transparent;
outline: 1px rgba(255, 255, 255, 0.2);
}
.c-field--dark::placeholder {
color: white;
}
.c-field--choice {
border: 0;
border-radius: 0;
background-color: transparent;
position: relative;
display: flex;
align-items: center;
font-size: 80%;
}
.c-field--auto {
width: auto;
}
/* Sublease and Sales multiple drop downs */
.multi-select-title {
padding-right: 1em;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 30 30'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%23001e5a' d='M14.894 22.956L1.044 9.157a.148.148 0 0 1 0-.21l1.91-1.904a.15.15 0 0 1 .211 0L15 18.835 26.835 7.043a.15.15 0 0 1 .211 0l1.91 1.903a.148.148 0 0 1 0 .211l-13.85 13.8a.15.15 0 0 1-.212 0'/%3e%3c/g%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: 96% 50%;
-webkit-appearance: none;
-moz-appearance: none;
border-bottom: 0;
cursor: pointer;
text-align: left;
line-height: 24px;
}
.multi-select-title.active {
background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23222' d='M15.106 7.044l13.85 13.8a.148.148 0 0 1 0 .21l-1.909 1.903a.15.15 0 0 1-.212 0L15 11.165 3.165 22.957a.15.15 0 0 1-.21 0l-1.91-1.903a.148.148 0 0 1 0-.21l13.85-13.8a.15.15 0 0 1 .211 0' fill-rule='evenodd'/%3E%3C/svg%3E");
}
/** Validation **/
.o-form-element .c-field.error,
.o-form-element .c-field.input-validation-error,
.o-form-element .c-field:invalid {
border-bottom: 2px solid #ff0000;
}
.error-message,
.field-validation-error {
color: #ff0000;
font-size: 75%;
margin-top: 4px;
padding: 0;
}
.u-background--midnight .field-validation-error,
.u-background--midnight .error-message {
color: #ffb600;
}
.error-message:empty,
.field-validation-error:empty {
display: none;
}
input[readonly="true"]:focus {
outline: none;
}
#search-input {
width: 100%;
height: 65px;
background-color: #f2f4f7;
border: solid 1px #e6e6e6;
}
/** Contact Form **/
select#markets {
overflow-y: auto;
height: 270px;
}
.c-tag {
background-color: #0056da;
border-radius: 100px;
display: inline-block;
padding: 3px 15px 5px;
color: #fff;
text-align: center;
text-decoration: none;
margin: 0;
}
li > .c-tag {
margin-right: 5px;
margin-bottom: 10px;
}
/**
* Footer Nav List
*/
.c-social {
display: flex;
flex-direction: row;
list-style: none;
margin-left: 0;
font-size: 0.9375rem;
justify-content: space-evenly;
margin-top: 20px;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
}
@media (min-width: 61.25em) {
.c-social {
margin-top: 0;
flex-direction: column;
border: none;
}
}
.c-social--inline {
margin-top: 0;
flex-direction: row;
border: none;
justify-content: flex-start;
}
.c-social__item {
margin-top: 20px;
margin-bottom: 20px;
}
.c-social--inline .c-social__item {
margin-right: 20px;
}
.c-social__link {
color: #222222;
display: inline-flex;
align-items: center;
}
/* ==========================================================================
#BORDER TILE
========================================================================== */
.c-tile {
display: block;
display: flex;
text-align: center;
border: 2px solid #0056da;
background-color: transparent;
padding: 40px;
margin: 0 auto 10px;
transition: color 200ms ease-in-out, background 200ms ease-in-out, border 200ms ease-in-out;
hyphens: auto;
justify-content: center;
align-items: center;
}
.c-tile:hover {
background-color: #0056da;
border-color: #0056da;
color: #fff;
text-decoration: none;
}
@media (min-width: 46.25em) {
.c-tile {
padding: 20px;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
flex-basis: auto;
}
@supports (--custom: property) {
[style*="--flex-basis"] .c-tile {
flex-basis: var(--flex-basis);
}
}
}
.c-tile:before {
content: "";
display: block;
width: 1px;
margin-left: -1px;
float: left;
height: 0;
}
@media (min-width: 46.25em) {
.c-tile:before {
padding-bottom: 100%;
/* Ratio variants.
========================================================================== */
/**
* Generate a series of ratio classes to be used like so:
*
* <div class="c-tile c-tile-ratio--1/1">
*
*/
}
.c-tile-ratio--2\:1 .c-tile:before {
padding-bottom: 50%;
}
.c-tile-ratio--4\:5 .c-tile:before {
padding-bottom: 125%;
}
.c-tile-ratio--16\:9 .c-tile:before {
padding-bottom: 56.25%;
}
@supports (--custom: property) {
[style*="--tile-ratio"] .c-tile:before {
padding-bottom: calc(100% / (var(--tile-ratio)));
}
}
}
.c-tile:after {
content: "";
display: table;
clear: both;
}
.c-tile__content {
margin: auto;
flex: 0 1 100%;
}
/* Modifiers
========================================================================== */
.c-tile--full {
width: 100%;
}
.c-tile--reversed {
color: #fff;
}
.c-tile--small {
padding: 10px;
}
.c-tile--large {
padding: 40px;
}
/* ==========================================================================
#SECTION TITLE
========================================================================== */
.c-section-title {
font-size: 1.5rem;
font-weight: 500;
}
.c-section-title-wrapper {
position: relative;
z-index: 10;
}
.c-section-title-wrapper > .c-section-title {
position: absolute;
bottom: 0;
left: 0;
margin-bottom: 0;
transform: translateY(36px);
text-rendering: geometricPrecision;
}
@media (min-width: 46.25em) {
.c-section-title-wrapper > .c-section-title {
left: -20px;
}
}
.o-section--full .c-section-title-wrapper {
margin-right: 20px;
margin-left: 20px;
}
@media (min-width: 46.25em) {
.o-section--full .c-section-title-wrapper {
margin-right: 40px;
margin-left: 40px;
}
}
@media (min-width: 61.25em) {
.o-section--full .c-section-title-wrapper {
margin-right: 110px;
margin-left: 110px;
}
}
.c-section-title__top,
.c-section-title__bottom {
color: #fff;
background-color: #ffb600;
display: table;
padding: 4px 20px;
min-height: 36px;
}
.c-section-title__top {
margin-bottom: 0;
}
/* ==========================================================================
#FOOTER
========================================================================== */
.c-footer {
color: #fff;
text-rendering: geometricPrecision;
}
.c-footer__item {
display: block;
border-bottom: solid 1px rgba(34, 34, 34, 0.3);
padding-left: 10px;
padding-right: 10px;
}
@media screen {
.c-footer__item {
flex: 0 1 100%;
margin: auto;
text-align: center;
}
}
.o-layout__item:last-of-type .c-footer__item {
border-bottom: 0;
}
@media (min-width: 46.25em) {
.c-footer__item {
padding: 5px 20px;
border-left: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 0;
margin: 0;
text-align: left;
}
}
@media (min-width: 90em) {
.c-footer__item {
padding-left: 40px;
padding-right: 40px;
}
}
/* ==========================================================================
#FOOTER NAVIGATION
========================================================================== */
/**
* Footer Nav
*/
.c-footer-nav {
display: block;
font-size: 0.9375rem;
}
/**
* Footer Nav List
*/
.c-footer-nav__list {
list-style: none;
margin-left: 0;
font-size: 0.9375rem;
justify-content: space-evenly;
}
@media screen {
.c-footer-nav__list {
display: flex;
flex-direction: row;
margin-top: 20px;
}
}
@media (min-width: 46.25em) {
.c-footer-nav__list {
margin-top: 0;
flex-direction: column;
}
}
.c-footer-nav__item {
margin-right: 10px;
text-align: center;
}
@media (min-width: 46.25em) {
.c-footer-nav__item {
margin-bottom: 10px;
margin-right: 0;
text-align: left;
}
}
.c-footer-nav__title {
margin-top: 20px;
}
/**
* Footer Nav Links
*/
.c-footer-nav__link {
color: #fff;
display: flex;
align-items: center;
}
.c-footer-nav__link:hover, .c-footer-nav__link:focus {
color: #ffb600;
}
.c-footer-nav__icon {
max-width: 20px;
margin-right: 10px;
}
.c-horizontal-separator {
border: 1px solid #243e8c;
}
.c-quote {
color: #001e5a;
}
.c-quote__text {
display: inline;
}
.c-quote__text:before {
content: open-quote;
font-size: 2rem;
}
.c-quote__text:after {
font-size: 2rem;
content: close-quote;
}
.c-quote__cite {
display: block;
font-style: normal;
margin-top: 20px;
}
.c-quote--with-icons {
margin-bottom: 40px;
}
@media (min-width: 46.25em) {
.c-quote--with-icons {
margin-bottom: 0;
}
}
.c-quote--with-icons .c-quote__inner {
display: flex;
flex-direction: column;
position: relative;
color: #fff;
padding-left: 0;
}
@media (min-width: 46.25em) {
.c-quote--with-icons .c-quote__inner {
padding-left: 10px;
}
}
@media (min-width: 61.25em) {
.c-quote--with-icons .c-quote__inner {
padding-left: 60px;
}
}
.u-background--primary .c-quote--with-icons .c-quote__inner,
.u-background--secondary .c-quote--with-icons .c-quote__inner {
color: #001e5a;
}
.u-background--primary .c-quote--with-icons .c-quote__inner .c-quote__text,
.u-background--secondary .c-quote--with-icons .c-quote__inner .c-quote__text {
color: #fff;
z-index: 1;
}
.u-background--primary .c-quote--with-icons .c-quote__inner .c-quote__cite,
.u-background--secondary .c-quote--with-icons .c-quote__inner .c-quote__cite {
color: #fff;
z-index: 1;
}
.u-background--secondary .virtual-tour {
color: #fff
}
.virtual-tour {
padding: 20px 0px;
}
.c-quote--with-icons .c-quote__inner .c-icon:first-of-type {
position: absolute;
top: -100px;
left: -25px;
width: 100px;
}
@media (min-width: 61.25em) {
.c-quote--with-icons .c-quote__inner .c-icon:first-of-type {
top: -170px;
left: -50px;
width: 280px;
}
}
.c-quote--with-icons .c-quote__inner .c-icon:last-of-type {
position: absolute;
bottom: -10px;
right: -40px;
width: 100px;
transform: rotate(180deg);
}
@media (min-width: 46.25em) {
.c-quote--with-icons .c-quote__inner .c-icon:last-of-type {
bottom: -70px;
right: 30px;
width: 100px;
}
}
@media (min-width: 61.25em) {
.c-quote--with-icons .c-quote__inner .c-icon:last-of-type {
bottom: -170px;
right: 30px;
width: 280px;
}
}
.c-icon--small {
width: 16px;
height: 16px;
}
/* ==========================================================================
#TOOLTIPS
==========================================================================
// Simple CSS only tooltip, for placement this will require JavaScript
*/
.c-tooltip {
position: relative;
overflow: visible;
display: inline-block;
}
.c-tooltip:before, .c-tooltip:after {
visibility: hidden;
z-index: 300;
}
.c-tooltip:before {
position: absolute;
border: 5px solid transparent;
content: "";
}
.c-tooltip:after {
position: absolute;
padding: 5px 10px;
border: 1px solid #000;
border-radius: 3px;
background-color: #000;
color: #fff;
line-height: 24px;
white-space: nowrap;
content: attr(aria-label);
visibility: hidden;
font-size: 0.9375rem;
}
.c-tooltip:hover:before, .c-tooltip:hover:after {
visibility: visible;
}
.c-tooltip--top:before {
top: -5px;
left: 50%;
transform: translate(-50%, -5px);
border-top-color: #000;
}
.c-tooltip--top:after {
top: -5px;
left: 50%;
transform: translate(-50%, -41px);
}
.c-tooltip--right:before {
top: 50%;
left: 100%;
transform: translate(0, -50%);
border-right-color: #000;
}
.c-tooltip--right:after {
top: 50%;
left: 100%;
transform: translate(10px, -50%);
}
.c-tooltip--bottom:before {
bottom: 0;
left: 50%;
transform: translate(-50%, 5px);
border-bottom-color: #000;
}
.c-tooltip--bottom:after {
bottom: 0;
left: 50%;
transform: translate(-50%, 41px);
}
.c-tooltip--left:before {
top: 50%;
right: 100%;
transform: translate(0, -50%);
border-left-color: #000;
}
.c-tooltip--left:after {
top: 50%;
right: 100%;
transform: translate(-10px, -50%);
}
/* ==========================================================================
#STAT
==========================================================================
*/
.c-stat__number,
.c-stat__detail {
text-rendering: geometricPrecision;
}
.c-stat__link {
font-weight: 600;
font-size: 0.9375rem;
}
/* ==========================================================================
#PAGINATION
========================================================================== */
.pagination--current-page-indicator {
font-size: 17px;
padding-left: 0;
}
.c-pagination-container {
display: flex;
flex: 0 1 auto;
align-items: center;
justify-content: space-between;
padding-bottom: 20px;
}
.c-pagination-container .pagination--current-page-indicator {
text-align:right;
width:50%;
}
.c-pagination-container #c-pagination {
align-items: center;
}
ol.pagination {
text-align: center;
padding: 0;
margin: 0;
list-style-type: none;
}
ol.pagination li {
display: inline-block;
margin-bottom: 4px;
}
ol.pagination a {
color: #595959;
padding: 5px 5px;
font-size: 17px;
font-weight: normal;
transition: background-color 200ms;
}
ol.pagination a.active {
color: #0056da;
font-weight: bold;
text-decoration: none;
cursor: default;
}
ol.pagination a:hover:not(.active) {
text-decoration: none;
color: #fff;
background-color: #0056da;
}
.c-article-wrapper {
position: relative;
padding: 20px 20px;
}
@media (min-width: 46.25em){
.c-article-wrapper {
padding: 20px 40px;
}
}
@media (min-width: 61.25em) {
.c-article-wrapper {
padding: 70px 90px;
}
}
@media (min-width: 90em) {
.c-article-wrapper {
padding: 90px;
}
}
.c-article h2,
.c-article h3,
.c-article h4,
.c-article h6,
.c-article p,
.c-article li,
.c-article ol {
max-width: 100ch;
}
.c-article h5 {
max-width: 50ch;
}
.c-article h2,
.c-article h3,
.c-article h4,
.c-article h5,
.c-article h6 {
color: #001e5a;
}
.c-article h3,
.c-article h4 {
font-size: 1.125rem;
}
@media (min-width: 61.25em) {
.c-article h3,
.c-article h4 {
font-size: 1.5rem;
}
}
.c-article__img {
margin-bottom: 40px;
}
.c-article__img--full-width {
max-width: calc(100% + 80px);
margin-left: -40px;
}
@media (min-width: 61.25em) {
.c-article__img--full-width {
max-width: calc(100% + 130px);
margin-left: 0;
}
}
@media (min-width: 90em) {
.c-article__img--full-width {
max-width: calc(100% + 200px);
}
}
.c-article-sidebar {
margin: 20px 0;
}
@media (min-width: 61.25em) {
.c-article-sidebar {
margin: 0;
flex-direction: column;
padding-right:80px;
}
}
.calcgroup .o-bar {
padding-top: 5px;
}
@media (min-width: 46.25em) {
.calcgroup .o-bar {
padding-top: 0;
}
}
.calcgroupitem {
margin-bottom: 20px;
}
@media (min-width: 46.25em) {
.calcgroupitem {
margin-bottom: 40px;
}
}
.calcgroupitem-title {
font-weight: 800;
}
.calcgrouptotal {
font-size: 16px;
}
.calcgrouptotal .ut-label {
font-size: 0.9375rem;
}
.calcgrouptotal input {
border: 0;
padding-left: 20px;
/* stylelint-disable */
tab-index: 0;
/* stylelint-enable */
}
.calcgrouptotal input:focus {
outline: none;
}
.calcgroupsubtotals ul {
list-style: none;
}
.calcgroupsubtotals span {
vertical-align: bottom;
}
.calcgroupitem-size {
font-weight: bold;
}
.calcgroupitem-sub {
font-size: 1.3125rem;
font-weight: bold;
}
.calcgroupitem-sub-wrapper {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-overflow-scrolling: touch;
}
.calcgroupitem-sub-wrapper:hover, .calcgroupitem-sub-wrapper:focus {
overflow: visible;
}
.calcgrouptotallabel {
font-size: 2.5rem;
display: inline-block;
}
.calctotalsfbox {
font-size: 1.5rem;
}
@media screen {
.calcgroup-stickybar {
position: sticky;
top: 10px;
z-index: 100;
}
}
.calcgroupitem-image img {
margin: auto;
}
@media (min-width: 61.25em) {
.calctotal-output {
position: sticky;
bottom: 0;
z-index: 400;
}
}
.storagegroupitem-title {
min-width: 300px;
font-weight: bold;
color: #001e5a;
}
.storagegroupitem-value {
max-width: 75px;
width: auto;
text-align: center;
}
.storagetable-wrapper {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
}
.storagetable {
font-size: 1rem;
text-align: center;
position: relative;
font-weight: 600;
width: 100%;
}
.storagetable input {
text-align: center;
}
@media (min-width: 61.25em) {
.storagetable {
width: 80%;
}
}
.storagelabel,
.storagelabel > input {
color: #001e5a;
font-weight: bold;
text-align: left;
}
.storageheader td,
.storageheader > span {
font-weight: bold;
padding: 20px;
vertical-align: middle;
}
.u-text--left > input {
text-align: left;
}
.storagecell {
padding: 20px;
min-width: 150px;
}
.storagecell input {
border: none !important;
width: 100%;
}
.storagecell input:focus {
outline: none;
}
.storagerow {
vertical-align: top;
}
.storagerow > .storagecell {
border-bottom: 1px solid #e6e6e6;
}
.middle-cell {
vertical-align: middle;
}
.first {
min-width: 200px;
}
.c-office-list {
list-style: none;
}
@media (min-width: 61.25em) {
.c-office-list {
margin-right: 60px;
}
}
.c-office-list__item {
background-color: #fff;
border-bottom: solid 1px #e6e6e6;
position: relative;
}
.c-office-list__item > a {
color: #001e5a;
display: block;
padding: 10px 20px;
}
.c-office-list__item > a::after {
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%23001E5A' d='M14.894 22.956L1.044 9.157a.148.148 0 0 1 0-.21l1.91-1.904a.15.15 0 0 1 .211 0L15 18.835 26.835 7.043a.15.15 0 0 1 .211 0l1.91 1.903a.148.148 0 0 1 0 .211l-13.85 13.8a.15.15 0 0 1-.212 0'/%3e%3c/g%3e%3c/svg%3e");
transform: rotate(-90deg);
transform-origin: center 40%;
}
.c-office-list__item > a:after {
content: "";
background-size: 100%;
background-repeat: no-repeat;
color: inherit;
display: inline-block;
font-size: 14px;
line-height: 0;
overflow: visible;
height: 12px;
width: 12px;
transition: transform 0.2s ease-in-out;
position: absolute;
margin-left: 5px;
top: 50%;
margin-top: -6px;
right: 20px;
}
.c-office-list__item > a:hover {
background-color: #e6e6e6;
}
.c-office-list__item > a:active, .c-office-list__item > a.is-active {
background-color: #0056da;
color: #fff;
}
.c-office-list__item > a:active::after, .c-office-list__item > a.is-active::after {
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cg fill='none' fill-rule='evenodd'%3e%3cpath fill='%23FFFFFF' d='M14.894 22.956L1.044 9.157a.148.148 0 0 1 0-.21l1.91-1.904a.15.15 0 0 1 .211 0L15 18.835 26.835 7.043a.15.15 0 0 1 .211 0l1.91 1.903a.148.148 0 0 1 0 .211l-13.85 13.8a.15.15 0 0 1-.212 0'/%3e%3c/g%3e%3c/svg%3e");
}
/*------------------------------------*\
SIMPLEBAR
\*------------------------------------*/
/**
Custom Styling for the scrollbar
*/
.simplebar-scroll-content {
overflow-x: hidden !important;
min-width: 100% !important;
max-height: inherit !important;
box-sizing: content-box !important;
}
.simplebar-content {
overflow-y: hidden !important;
box-sizing: border-box !important;
min-height: 100% !important;
}
[data-simplebar] {
position: relative;
z-index: 0;
overflow: hidden !important;
max-height: inherit;
-webkit-overflow-scrolling: touch;
/* Trigger native scrolling for mobile, if not supported, plugin is used. */
}
[data-simplebar="init"] {
display: flex;
}
[data-simplebar] .simplebar-scroll-content,
[data-simplebar] .simplebar-content {
overflow: hidden;
}
[data-simplebar="init"] .simplebar-scroll-content,
[data-simplebar="init"] .simplebar-content {
overflow: scroll;
}
.simplebar-track {
z-index: 100;
position: absolute;
right: 0;
bottom: 0;
width: 11px;
pointer-events: none;
}
.simplebar-scrollbar {
position: absolute;
right: 2px;
width: 7px;
min-height: 10px;
}
.simplebar-scrollbar:before {
position: absolute;
content: "";
background: #001e5a;
border-radius: 7px;
left: 0;
right: 0;
opacity: 0;
transition: opacity 0.2s linear;
}
.simplebar-track .simplebar-scrollbar.visible:before {
/* When hovered, remove all transitions from drag handle */
opacity: 0.8;
transition: opacity 0s linear;
}
.simplebar-track.vertical {
top: 0;
}
.simplebar-track.vertical .simplebar-scrollbar:before {
top: 2px;
bottom: 2px;
}
.simplebar-track.horizontal {
left: 0;
width: auto;
height: 11px;
}
.simplebar-track.horizontal .simplebar-scrollbar:before {
height: 100%;
left: 2px;
right: 2px;
}
.horizontal.simplebar-track .simplebar-scrollbar {
right: auto;
left: 0;
top: 2px;
height: 7px;
min-height: 0;
min-width: 10px;
width: auto;
}
/* Rtl support */
[data-simplebar-direction="rtl"] .simplebar-track {
right: auto;
left: 0;
}
[data-simplebar-direction="rtl"] .simplebar-track.horizontal {
right: 0;
}
.timeline-wrapper {
height:auto;
}
@media (min-width: 46.25em) and (max-width: 61.24em) {
.timeline-wrapper {
padding: 0;
}
}
@media (min-width: 61.25em) {
.timeline-wrapper {
overflow-x: visible;
padding-left: 0;
padding-right: 0;
}
}
.timeline {
display: inline-flex;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
position: relative;
height: auto;
overflow-x: auto;
margin-top: 40px;
}
@media (min-width: 46.25em) and (max-width: 61.24em) {
.timeline {
display: flex;
justify-content: stretch;
}
}
@media (min-width: 61.25em) {
.timeline {
overflow-x: visible;
}
}
@media (min-width: 90em) {
.timeline {
margin-left: 0;
}
}
.timeline__inner {
display: inline-flex;
position: relative;
list-style: none;
justify-content: space-between;
width: 100%;
max-width: calc(100% - 45px);
margin: 100px 40px 0;
min-width: 1100px;
white-space: nowrap;
min-height: 50px;
}
.timeline__inner:after {
content: "";
position: absolute;
top: 16px;
background: #f2f4f7;
height: 6px;
width: 100%;
z-index: -1;
}
@media (min-width: 46.25em) {
.timeline__inner {
min-width: 800px;
margin-left: 50px;
margin-right: 50px;
display: flex;
}
.timeline__inner:after {
height: 10px;
}
}
@media (min-width: 61.25em) {
.timeline__inner {
margin-left: 120px;
margin-right: 120px;
}
}
.timeline__item {
position: absolute;
height: 40px;
top: 1px;
z-index: 1;
cursor: pointer;
flex: 1 0 auto;
width: auto;
min-width: 40px;
transform: translateX(-50%);
}
.timeline__item .timeline__year {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
color: #001e5a;
font-size: 11px;
font-weight: 600;
}
@media (min-width: 46.25em) {
.timeline__item .timeline__year {
font-size: 12px;
}
}
@media (min-width: 61.25em) {
.timeline__item .timeline__year {
top: -25px;
font-size: 14px;
}
}
@media (min-width: 90em) {
.timeline__item .timeline__year {
font-size: 15px;
}
}
.timeline__point {
content: "";
top: 12px;
left: 50%;
transform: translateX(-50%);
display: block;
border-radius: 10px;
background: #ffb600;
position: absolute;
transition: background 0.3s;
width: 16px;
height: 16px;
box-shadow: 0 0 3px 0 rgba(0, 30, 90, 0.5);
}
@media (min-width: 61.25em) {
.timeline__point {
top: 12px;
width: 20px;
height: 20px;
box-shadow: 0 0 5px 0 rgba(0, 30, 90, 0.5);
}
}
.timeline__item.active .timeline__point {
background: #0056da;
box-shadow: 0 0 5px 0 #001e5a;
}
.timeline__item:hover .timeline__point {
background: #0056da;
box-shadow: 0 0 5px 0 #001e5a;
}
.timeline-info-box {
padding: 40px;
margin-left: 40px;
margin-right: 80px;
margin-top: -90px;
background: white;
display: block;
position: relative;
height:170px;
padding-bottom:0;
}
.timeline-image {
position: relative;
}
.timeline-info-box .year {
display: block;
font-size: 36px;
}
.timeline-info-box .data {
font-size: 18px;
}
@media (max-width:767px) {
.timeline-image {
padding-left: 0;
margin-left: -20px;
margin-right: -20px;
}
.history-timeline .o-layout__item {
padding-left: 0;
}
.timeline-info-box {
margin-right: 0;
}
}
@media (max-width: 1124px){
.timeline-info-box {
margin-right: 20px;
margin-left: 20px;
padding: 20px;
}
}
.tippy-tooltip {
font-weight: 200;
text-align: left;
background-color: #222222;
}
.tippy-tooltip[data-size="large"] {
padding: 25px 25px;
border-radius: 5px;
}
.tippy-roundarrow svg {
fill: #222222;
}
/* ==========================================================================
#CLEARFIX
========================================================================== */
/**
* Attach our clearfix mixin to a utility class.
*/
.u-clearfix:after {
content: "" !important;
display: block !important;
clear: both !important;
}
/* ==========================================================================
#WIDTHS
========================================================================== */
/**
* inuitcss generates a series of utility classes that give a fluid width to
* whichever element they’re applied, e.g.:
*
* <img src="" alt="" class="u-1/2" />
*
* These classes are most commonly used in conjunction with our layout system,
* e.g.:
*
* <div class="o-layout__item u-1/2">
*
* By default, inuitcss will also generate responsive variants of each of these
* classes by using your Sass MQ configuration, e.g.:
*
* <div class="o-layout__item u-1/1 u-1/2@tablet u-1/3@desktop">
*
* Optionally, inuitcss can generate offset classes which can push and pull
* elements left and right by a specified amount, e.g.:
*
* <div class="o-layout__item u-2/3 u-pull-1/3">
*
* This is useful for making very granular changes to the rendered order of
* items in a layout.
*
* N.B. This option is turned off by default.
*/
/**
* A series of width helper classes that you can use to size things like grid
* systems. Classes take a fraction-like format (e.g. `.u-2/3`). Use these in
* your markup:
*
* <div class="u-7/12">
*
* The following will generate widths helper classes based on the fractions
* defined in the `$inuit-fractions` list.
*/
.u-1\/1 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-1\/1 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/2 {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2 {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-1\/2 {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-2\/2 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-2\/2 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/3 {
width: 33.33333% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3 {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important;
}
.u-pull-1\/3 {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */
}
.u-2\/3 {
width: 66.66667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3 {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important;
}
.u-pull-2\/3 {
position: relative !important;
right: 66.66667% !important;
left: auto !important;
/* [1] */
}
.u-3\/3 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-3\/3 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/4 {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4 {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important;
}
.u-pull-1\/4 {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */
}
.u-2\/4 {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4 {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-2\/4 {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-3\/4 {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4 {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important;
}
.u-pull-3\/4 {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */
}
.u-4\/4 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-4\/4 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/5 {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important;
}
.u-pull-1\/5 {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */
}
.u-2\/5 {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important;
}
.u-pull-2\/5 {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */
}
.u-3\/5 {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important;
}
.u-pull-3\/5 {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */
}
.u-4\/5 {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important;
}
.u-pull-4\/5 {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */
}
.u-5\/5 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-5\/5 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
/**
* If we’re using Sass-MQ, automatically generate grid system(s) for each of our
* defined breakpoints, and give them a Responsive Suffix, e.g.:
*
* <div class="u-3/12@mobile">
*/
@media all {
.u-1\/1\@tiny {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-1\/1\@tiny {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/2\@tiny {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-1\/2\@tiny {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-2\/2\@tiny {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-2\/2\@tiny {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/3\@tiny {
width: 33.33333% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important;
}
.u-pull-1\/3\@tiny {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */
}
.u-2\/3\@tiny {
width: 66.66667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important;
}
.u-pull-2\/3\@tiny {
position: relative !important;
right: 66.66667% !important;
left: auto !important;
/* [1] */
}
.u-3\/3\@tiny {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-3\/3\@tiny {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/4\@tiny {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important;
}
.u-pull-1\/4\@tiny {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */
}
.u-2\/4\@tiny {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-2\/4\@tiny {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-3\/4\@tiny {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important;
}
.u-pull-3\/4\@tiny {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */
}
.u-4\/4\@tiny {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-4\/4\@tiny {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/5\@tiny {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important;
}
.u-pull-1\/5\@tiny {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */
}
.u-2\/5\@tiny {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important;
}
.u-pull-2\/5\@tiny {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */
}
.u-3\/5\@tiny {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important;
}
.u-pull-3\/5\@tiny {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */
}
.u-4\/5\@tiny {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important;
}
.u-pull-4\/5\@tiny {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */
}
.u-5\/5\@tiny {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-5\/5\@tiny {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-push-none\@tiny {
left: auto !important;
}
.u-pull-none\@tiny {
right: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-1\/1\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-1\/1\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/2\@mobile {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-1\/2\@mobile {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-2\/2\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-2\/2\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/3\@mobile {
width: 33.33333% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important;
}
.u-pull-1\/3\@mobile {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */
}
.u-2\/3\@mobile {
width: 66.66667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important;
}
.u-pull-2\/3\@mobile {
position: relative !important;
right: 66.66667% !important;
left: auto !important;
/* [1] */
}
.u-3\/3\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-3\/3\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/4\@mobile {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important;
}
.u-pull-1\/4\@mobile {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */
}
.u-2\/4\@mobile {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-2\/4\@mobile {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-3\/4\@mobile {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important;
}
.u-pull-3\/4\@mobile {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */
}
.u-4\/4\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-4\/4\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/5\@mobile {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important;
}
.u-pull-1\/5\@mobile {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */
}
.u-2\/5\@mobile {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important;
}
.u-pull-2\/5\@mobile {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */
}
.u-3\/5\@mobile {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important;
}
.u-pull-3\/5\@mobile {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */
}
.u-4\/5\@mobile {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important;
}
.u-pull-4\/5\@mobile {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */
}
.u-5\/5\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-5\/5\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-push-none\@mobile {
left: auto !important;
}
.u-pull-none\@mobile {
right: auto !important;
}
}
@media (max-width: 46.25em){
.o-layout__item.u-1\/3\@tablet{
padding-left:0;
}
}
@media (max-width: 739px){
.o-layout__item.u-2\/3\@tablet {
padding-left: 0;
}
}
@media (min-width: 46.25em) {
.u-1\/1\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-1\/1\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/2\@tablet {
width: 50% !important;
}
.u-1\/2\@tablet > iframe {
padding-left: 80px;
}
.u-margin-top-huge\@tablet > iframe {
padding-left: 80px;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-1\/2\@tablet {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-2\/2\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-2\/2\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/3\@tablet {
width: 33.33333% !important;
}
.u-1\/4\@tablet {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important;
}
.u-pull-1\/3\@tablet {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */
}
.u-2\/3\@tablet {
width: 66.66667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important;
}
.u-pull-2\/3\@tablet {
position: relative !important;
right: 66.66667% !important;
left: auto !important;
/* [1] */
}
.u-3\/3\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-3\/3\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/4\@tablet {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important;
}
.u-pull-1\/4\@tablet {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */
}
.u-2\/4\@tablet {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-2\/4\@tablet {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-3\/4\@tablet {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important;
}
.u-pull-3\/4\@tablet {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */
}
.u-4\/4\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-4\/4\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/5\@tablet {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important;
}
.u-pull-1\/5\@tablet {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */
}
.u-2\/5\@tablet {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important;
}
.u-pull-2\/5\@tablet {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */
}
.u-3\/5\@tablet {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important;
}
.u-pull-3\/5\@tablet {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */
}
.u-4\/5\@tablet {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important;
}
.u-pull-4\/5\@tablet {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */
}
.u-5\/5\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-5\/5\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-push-none\@tablet {
left: auto !important;
}
.u-pull-none\@tablet {
right: auto !important;
}
}
@media (min-width: 61.25em) {
.u-1\/1\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-1\/1\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/2\@desktop {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-1\/2\@desktop {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-2\/2\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-2\/2\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/3\@desktop {
width: 33.33333% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important;
}
.u-pull-1\/3\@desktop {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */
}
.u-2\/3\@desktop {
width: 66.66667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important;
}
.u-pull-2\/3\@desktop {
position: relative !important;
right: 66.66667% !important;
left: auto !important;
/* [1] */
}
.u-3\/3\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-3\/3\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/4\@desktop {
width: 25% !important;
}
.u-1\/5\@desktop {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important;
}
.u-pull-1\/4\@desktop {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */
}
.u-2\/4\@desktop {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-2\/4\@desktop {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-3\/4\@desktop {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important;
}
.u-pull-3\/4\@desktop {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */
}
.u-4\/4\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-4\/4\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/5\@desktop {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important;
}
.u-pull-1\/5\@desktop {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */
}
.u-2\/5\@desktop {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important;
}
.u-pull-2\/5\@desktop {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */
}
.u-3\/5\@desktop {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important;
}
.u-pull-3\/5\@desktop {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */
}
.u-4\/5\@desktop {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important;
}
.u-pull-4\/5\@desktop {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */
}
.u-5\/5\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-5\/5\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-push-none\@desktop {
left: auto !important;
}
.u-pull-none\@desktop {
right: auto !important;
}
}
@media (min-width: 90em) {
.u-1\/1\@wide {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-1\/1\@wide {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/2\@wide {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-1\/2\@wide {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-2\/2\@wide {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-2\/2\@wide {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/3\@wide {
width: 33.33333% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important;
}
.u-pull-1\/3\@wide {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */
}
.u-2\/3\@wide {
width: 66.66667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important;
}
.u-pull-2\/3\@wide {
position: relative !important;
right: 66.66667% !important;
left: auto !important;
/* [1] */
}
.u-3\/3\@wide {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-3\/3\@wide {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/4\@wide {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important;
}
.u-pull-1\/4\@wide {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */
}
.u-2\/4\@wide {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-2\/4\@wide {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-3\/4\@wide {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important;
}
.u-pull-3\/4\@wide {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */
}
.u-4\/4\@wide {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-4\/4\@wide {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/5\@wide {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important;
}
.u-pull-1\/5\@wide {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */
}
.u-2\/5\@wide {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important;
}
.u-pull-2\/5\@wide {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */
}
.u-3\/5\@wide {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important;
}
.u-pull-3\/5\@wide {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */
}
.u-4\/5\@wide {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important;
}
.u-pull-4\/5\@wide {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */
}
.u-5\/5\@wide {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-5\/5\@wide {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-push-none\@wide {
left: auto !important;
}
.u-pull-none\@wide {
right: auto !important;
}
}
/* ==========================================================================
#SPACINGS
========================================================================== */
/**
* Utility classes to put specific spacing values onto elements. The below loop
* will generate us a suite of classes like:
*
* .u-margin-top {}
* .u-padding-left-large {}
* .u-margin-right-small {}
* .u-padding {}
* .u-padding-right-none {}
* .u-padding-horizontal {}
* .u-padding-vertical-small {}
*/
.u-padding {
padding: 20px !important;
}
.u-padding-auto {
padding: auto !important;
}
.u-padding-tiny {
padding: 5px !important;
}
.u-padding-small {
padding: 10px !important;
}
.u-padding-large {
padding: 40px !important;
}
.u-padding-huge {
padding: 60px !important;
}
.u-padding-spacer {
padding: 110px !important;
}
.u-padding-none {
padding: 0 !important;
}
.u-padding-top {
padding-top: 20px !important;
}
.u-padding-left-right {
padding-left: 60px;
padding-right: 40px;
}
.u-padding-top-auto {
padding-top: auto !important;
}
.u-padding-top-tiny {
padding-top: 5px !important;
}
.u-padding-top-small {
padding-top: 10px !important;
}
.u-padding-top-large {
padding-top: 40px !important;
}
.u-padding-top-huge {
padding-top: 60px !important;
}
.u-padding-top-spacer {
padding-top: 110px !important;
}
.u-padding-top-none {
padding-top: 0 !important;
}
.u-padding-right {
padding-right: 20px !important;
}
.u-padding-right-auto {
padding-right: auto !important;
}
.u-padding-right-tiny {
padding-right: 5px !important;
}
.u-padding-right-small {
padding-right: 10px !important;
}
.u-padding-right-large {
padding-right: 40px !important;
}
.u-padding-right-huge {
padding-right: 60px !important;
}
.u-padding-right-spacer {
padding-right: 110px !important;
}
.u-padding-right-none {
padding-right: 0 !important;
}
.u-padding-bottom {
padding-bottom: 20px !important;
}
.u-padding-bottom-auto {
padding-bottom: auto !important;
}
.u-padding-bottom-tiny {
padding-bottom: 5px !important;
}
.u-padding-bottom-small {
padding-bottom: 10px !important;
}
.u-padding-bottom-large {
padding-bottom: 40px !important;
}
.u-padding-bottom-huge {
padding-bottom: 60px !important;
}
.u-padding-bottom-spacer {
padding-bottom: 110px !important;
}
.u-padding-bottom-none {
padding-bottom: 0 !important;
}
.u-padding-left {
padding-left: 20px !important;
}
.u-padding-left-auto {
padding-left: auto !important;
}
.u-padding-left-tiny {
padding-left: 5px !important;
}
.u-padding-left-small {
padding-left: 10px !important;
}
.u-padding-left-large {
padding-left: 40px !important;
}
.u-padding-left-huge {
padding-left: 60px !important;
}
.u-padding-left-spacer {
padding-left: 110px !important;
}
.u-padding-left-none {
padding-left: 0 !important;
}
.u-padding-horizontal {
padding-left: 20px !important;
padding-right: 20px !important;
}
.u-padding-horizontal-auto {
padding-left: auto !important;
padding-right: auto !important;
}
.u-padding-horizontal-tiny {
padding-left: 5px !important;
padding-right: 5px !important;
}
.u-padding-horizontal-small {
padding-left: 10px !important;
padding-right: 10px !important;
}
.u-padding-horizontal-large {
padding-left: 40px !important;
padding-right: 40px !important;
}
.u-padding-horizontal-huge {
padding-left: 60px !important;
padding-right: 60px !important;
}
.u-padding-horizontal-spacer {
padding-left: 110px !important;
padding-right: 110px !important;
}
.u-padding-horizontal-none {
padding-left: 0 !important;
padding-right: 0 !important;
}
.u-padding-vertical {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.u-padding-vertical-auto {
padding-top: auto !important;
padding-bottom: auto !important;
}
.u-padding-vertical-tiny {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.u-padding-vertical-small {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.u-padding-vertical-large {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
.u-padding-vertical-huge {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.u-padding-vertical-spacer {
padding-top: 110px !important;
padding-bottom: 110px !important;
}
.u-padding-vertical-none {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.u-margin {
margin: 20px !important;
}
.u-margin-auto {
margin: auto !important;
}
.u-margin-tiny {
margin: 5px !important;
}
.u-margin-small {
margin: 10px !important;
}
.u-margin-large {
margin: 40px !important;
}
.u-margin-huge {
margin: 60px !important;
}
.u-margin-spacer {
margin: 110px !important;
}
.u-margin-none {
margin: 0 !important;
}
.u-margin-top {
margin-top: 20px !important;
}
.u-margin-top-auto {
margin-top: auto !important;
}
.u-margin-top-tiny {
margin-top: 5px !important;
}
.u-margin-top-small {
margin-top: 10px !important;
}
.u-margin-top-large {
margin-top: 40px !important;
}
.u-margin-top-huge {
margin-top: 60px !important;
}
.u-margin-top-spacer {
margin-top: 110px !important;
}
.u-margin-top-none {
margin-top: 0 !important;
}
.u-margin-right {
margin-right: 20px !important;
}
.u-margin-right-auto {
margin-right: auto !important;
}
.u-margin-right-tiny {
margin-right: 5px !important;
}
.u-margin-right-small {
margin-right: 10px !important;
}
.u-margin-right-large {
margin-right: 40px !important;
}
.u-margin-right-huge {
margin-right: 60px !important;
}
.u-margin-right-spacer {
margin-right: 110px !important;
}
.u-margin-right-none {
margin-right: 0 !important;
}
.u-margin-bottom {
margin-bottom: 20px !important;
}
.u-margin-bottom-auto {
margin-bottom: auto !important;
}
.u-margin-bottom-tiny {
margin-bottom: 5px !important;
}
.u-margin-bottom-small {
margin-bottom: 10px !important;
}
.u-margin-bottom-large {
margin-bottom: 40px !important;
}
.u-margin-bottom-huge {
margin-bottom: 60px !important;
}
.u-margin-bottom-spacer {
margin-bottom: 110px !important;
}
.u-margin-bottom-none {
margin-bottom: 0 !important;
}
.u-margin-left {
margin-left: 20px !important;
}
.u-margin-left-auto {
margin-left: auto !important;
}
.u-margin-left-tiny {
margin-left: 5px !important;
}
.u-margin-left-small {
margin-left: 10px !important;
}
.u-margin-left-large {
margin-left: 40px !important;
}
.u-margin-left-huge {
margin-left: 60px !important;
}
.u-margin-left-spacer {
margin-left: 110px !important;
}
.u-margin-left-none {
margin-left: 0 !important;
}
.u-margin-horizontal {
margin-left: 20px !important;
margin-right: 20px !important;
}
.u-margin-horizontal-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.u-margin-horizontal-tiny {
margin-left: 5px !important;
margin-right: 5px !important;
}
.u-margin-horizontal-small {
margin-left: 10px !important;
margin-right: 10px !important;
}
.u-margin-horizontal-large {
margin-left: 40px !important;
margin-right: 40px !important;
}
.u-margin-horizontal-huge {
margin-left: 60px !important;
margin-right: 60px !important;
}
.u-margin-horizontal-spacer {
margin-left: 110px !important;
margin-right: 110px !important;
}
.u-margin-horizontal-none {
margin-left: 0 !important;
margin-right: 0 !important;
}
.u-margin-vertical {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
.u-margin-vertical-auto {
margin-top: auto !important;
margin-bottom: auto !important;
}
.u-margin-vertical-tiny {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
.u-margin-vertical-small {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.u-margin-vertical-large {
margin-top: 40px !important;
margin-bottom: 40px !important;
}
.u-margin-vertical-huge {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
.u-margin-vertical-spacer {
margin-top: 110px !important;
margin-bottom: 110px !important;
}
.u-margin-vertical-none {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ==========================================================================
#RESPONSIVE-SPACINGS
========================================================================== */
/**
* Utility classes enhancing the normal spacing classes by adding responsiveness
* to them. By default, there are not responsive spacings defined. You can
* generate responsive spacings by adding entries to the following three Sass
* maps, e.g.:
*
* $inuit-responsive-spacing-directions: (
* null: null,
* bottom: bottom,
* );
*
* $inuit-responsive-spacing-properties: (
* "margin": "margin",
* );
*
* $inuit-responsive-spacing-sizes: (
* "-small": $inuit-global-spacing-unit-small,
* );
*
* This would bring us the following classes:
*
* .u-margin-small@mobile {}
* .u-margin-small@tablet {}
* .u-margin-small@desktop {}
* .u-margin-small@wide {}
* .u-margin-bottom-small@mobile {}
* .u-margin-bottom-small@tablet {}
* .u-margin-bottom-small@desktop {}
* .u-margin-bottom-small@wide {}
*
* You can change the generated CSS classes by further extending the Sass maps.
* If you want every ‘normal’ spacing (those from `utilities.spacings`) also as
* a responsive version, you can just mirror the ‘normal’ spacings:
*
* $inuit-responsive-spacing-directions: $inuit-spacing-directions !default;
*
* $inuit-responsive-spacing-properties: $inuit-spacing-properties !default;
*
* $inuit-responsive-spacing-sizes: $inuit-spacing-sizes !default;
*
* BUT BE AWARE: This can generate a huge chunk of extra CSS, depending on the
* amount of breakpoints you defined. So please check your CSS’ output and
* filesize!
*/
/* stylelint-disable max-nesting-depth */
@media all {
.u-padding\@tiny {
padding: 20px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding\@mobile {
padding: 20px !important;
}
}
@media (min-width: 46.25em) {
.u-padding\@tablet {
padding: 20px !important;
}
}
@media (min-width: 61.25em) {
.u-padding\@desktop {
padding: 20px !important;
}
}
@media (min-width: 90em) {
.u-padding\@wide {
padding: 20px !important;
}
}
@media all {
.u-padding-auto\@tiny {
padding: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-auto\@mobile {
padding: auto !important;
}
}
@media (min-width: 46.25em) {
.u-padding-auto\@tablet {
padding: auto !important;
}
}
@media (min-width: 61.25em) {
.u-padding-auto\@desktop {
padding: auto !important;
}
}
@media (min-width: 90em) {
.u-padding-auto\@wide {
padding: auto !important;
}
}
@media all {
.u-padding-large\@tiny {
padding: 40px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-large\@mobile {
padding: 40px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-large\@tablet {
padding: 40px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-large\@desktop {
padding: 40px !important;
}
}
@media (min-width: 90em) {
.u-padding-large\@wide {
padding: 40px !important;
}
}
@media all {
.u-padding-huge\@tiny {
padding: 60px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-huge\@mobile {
padding: 60px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-huge\@tablet {
padding: 60px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-huge\@desktop {
padding: 60px !important;
}
}
@media (min-width: 90em) {
.u-padding-huge\@wide {
padding: 60px !important;
}
}
@media all {
.u-padding-spacer\@tiny {
padding: 110px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-spacer\@mobile {
padding: 110px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-spacer\@tablet {
padding: 110px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-spacer\@desktop {
padding: 110px !important;
}
}
@media (min-width: 90em) {
.u-padding-spacer\@wide {
padding: 110px !important;
}
}
@media all {
.u-padding-none\@tiny {
padding: 0 !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-none\@mobile {
padding: 0 !important;
}
}
@media (min-width: 46.25em) {
.u-padding-none\@tablet {
padding: 0 !important;
}
}
@media (min-width: 61.25em) {
.u-padding-none\@desktop {
padding: 0 !important;
}
}
@media (min-width: 90em) {
.u-padding-none\@wide {
padding: 0 !important;
}
}
@media all {
.u-padding-top\@tiny {
padding-top: 20px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-top\@mobile {
padding-top: 20px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-top\@tablet {
padding-top: 20px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-top\@desktop {
padding-top: 20px !important;
}
}
@media (min-width: 90em) {
.u-padding-top\@wide {
padding-top: 20px !important;
}
}
@media all {
.u-padding-top-auto\@tiny {
padding-top: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-top-auto\@mobile {
padding-top: auto !important;
}
}
@media (min-width: 46.25em) {
.u-padding-top-auto\@tablet {
padding-top: auto !important;
}
}
@media (min-width: 61.25em) {
.u-padding-top-auto\@desktop {
padding-top: auto !important;
}
}
@media (min-width: 90em) {
.u-padding-top-auto\@wide {
padding-top: auto !important;
}
}
@media all {
.u-padding-top-large\@tiny {
padding-top: 40px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-top-large\@mobile {
padding-top: 40px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-top-large\@tablet {
padding-top: 40px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-top-large\@desktop {
padding-top: 40px !important;
}
}
@media (min-width: 90em) {
.u-padding-top-large\@wide {
padding-top: 40px !important;
}
}
@media all {
.u-padding-top-huge\@tiny {
padding-top: 60px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-top-huge\@mobile {
padding-top: 60px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-top-huge\@tablet {
padding-top: 60px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-top-huge\@desktop {
padding-top: 60px !important;
}
}
@media (min-width: 90em) {
.u-padding-top-huge\@wide {
padding-top: 60px !important;
}
}
@media all {
.u-padding-top-spacer\@tiny {
padding-top: 110px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-top-spacer\@mobile {
padding-top: 110px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-top-spacer\@tablet {
padding-top: 110px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-top-spacer\@desktop {
padding-top: 110px !important;
}
}
@media (min-width: 90em) {
.u-padding-top-spacer\@wide {
padding-top: 110px !important;
}
}
@media all {
.u-padding-top-none\@tiny {
padding-top: 0 !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-top-none\@mobile {
padding-top: 0 !important;
}
}
@media (min-width: 46.25em) {
.u-padding-top-none\@tablet {
padding-top: 0 !important;
}
}
@media (min-width: 61.25em) {
.u-padding-top-none\@desktop {
padding-top: 0 !important;
}
}
@media (min-width: 90em) {
.u-padding-top-none\@wide {
padding-top: 0 !important;
}
}
@media all {
.u-padding-right\@tiny {
padding-right: 20px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-right\@mobile {
padding-right: 20px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-right\@tablet {
padding-right: 20px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-right\@desktop {
padding-right: 20px !important;
}
}
@media (min-width: 90em) {
.u-padding-right\@wide {
padding-right: 20px !important;
}
}
@media all {
.u-padding-right-auto\@tiny {
padding-right: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-right-auto\@mobile {
padding-right: auto !important;
}
}
@media (min-width: 46.25em) {
.u-padding-right-auto\@tablet {
padding-right: auto !important;
}
}
@media (min-width: 61.25em) {
.u-padding-right-auto\@desktop {
padding-right: auto !important;
}
}
@media (min-width: 90em) {
.u-padding-right-auto\@wide {
padding-right: auto !important;
}
}
@media all {
.u-padding-right-large\@tiny {
padding-right: 40px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-right-large\@mobile {
padding-right: 40px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-right-large\@tablet {
padding-right: 40px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-right-large\@desktop {
padding-right: 40px !important;
}
}
@media (min-width: 90em) {
.u-padding-right-large\@wide {
padding-right: 40px !important;
}
}
@media all {
.u-padding-right-huge\@tiny {
padding-right: 60px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-right-huge\@mobile {
padding-right: 60px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-right-huge\@tablet {
padding-right: 60px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-right-huge\@desktop {
padding-right: 60px !important;
}
}
@media (min-width: 90em) {
.u-padding-right-huge\@wide {
padding-right: 60px !important;
}
}
@media all {
.u-padding-right-spacer\@tiny {
padding-right: 110px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-right-spacer\@mobile {
padding-right: 110px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-right-spacer\@tablet {
padding-right: 110px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-right-spacer\@desktop {
padding-right: 110px !important;
}
}
@media (min-width: 90em) {
.u-padding-right-spacer\@wide {
padding-right: 110px !important;
}
}
@media all {
.u-padding-right-none\@tiny {
padding-right: 0 !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-right-none\@mobile {
padding-right: 0 !important;
}
}
@media (min-width: 46.25em) {
.u-padding-right-none\@tablet {
padding-right: 0 !important;
}
}
@media (min-width: 61.25em) {
.u-padding-right-none\@desktop {
padding-right: 0 !important;
}
}
@media (min-width: 90em) {
.u-padding-right-none\@wide {
padding-right: 0 !important;
}
}
@media all {
.u-padding-bottom\@tiny {
padding-bottom: 20px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-bottom\@mobile {
padding-bottom: 20px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-bottom\@tablet {
padding-bottom: 20px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-bottom\@desktop {
padding-bottom: 20px !important;
}
}
@media (min-width: 90em) {
.u-padding-bottom\@wide {
padding-bottom: 20px !important;
}
}
@media all {
.u-padding-bottom-auto\@tiny {
padding-bottom: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-bottom-auto\@mobile {
padding-bottom: auto !important;
}
}
@media (min-width: 46.25em) {
.u-padding-bottom-auto\@tablet {
padding-bottom: auto !important;
}
}
@media (min-width: 61.25em) {
.u-padding-bottom-auto\@desktop {
padding-bottom: auto !important;
}
}
@media (min-width: 90em) {
.u-padding-bottom-auto\@wide {
padding-bottom: auto !important;
}
}
@media all {
.u-padding-bottom-large\@tiny {
padding-bottom: 40px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-bottom-large\@mobile {
padding-bottom: 40px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-bottom-large\@tablet {
padding-bottom: 40px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-bottom-large\@desktop {
padding-bottom: 40px !important;
}
}
@media (min-width: 90em) {
.u-padding-bottom-large\@wide {
padding-bottom: 40px !important;
}
}
@media all {
.u-padding-bottom-huge\@tiny {
padding-bottom: 60px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-bottom-huge\@mobile {
padding-bottom: 60px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-bottom-huge\@tablet {
padding-bottom: 60px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-bottom-huge\@desktop {
padding-bottom: 60px !important;
}
}
@media (min-width: 90em) {
.u-padding-bottom-huge\@wide {
padding-bottom: 60px !important;
}
}
@media all {
.u-padding-bottom-spacer\@tiny {
padding-bottom: 110px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-bottom-spacer\@mobile {
padding-bottom: 110px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-bottom-spacer\@tablet {
padding-bottom: 110px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-bottom-spacer\@desktop {
padding-bottom: 110px !important;
}
}
@media (min-width: 90em) {
.u-padding-bottom-spacer\@wide {
padding-bottom: 110px !important;
}
}
@media all {
.u-padding-bottom-none\@tiny {
padding-bottom: 0 !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-bottom-none\@mobile {
padding-bottom: 0 !important;
}
}
@media (min-width: 46.25em) {
.u-padding-bottom-none\@tablet {
padding-bottom: 0 !important;
}
}
@media (min-width: 61.25em) {
.u-padding-bottom-none\@desktop {
padding-bottom: 0 !important;
}
}
@media (min-width: 90em) {
.u-padding-bottom-none\@wide {
padding-bottom: 0 !important;
}
}
@media all {
.u-padding-left\@tiny {
padding-left: 20px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-left\@mobile {
padding-left: 20px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-left\@tablet {
padding-left: 20px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-left\@desktop {
padding-left: 20px !important;
}
}
@media (min-width: 90em) {
.u-padding-left\@wide {
padding-left: 20px !important;
}
}
@media all {
.u-padding-left-auto\@tiny {
padding-left: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-left-auto\@mobile {
padding-left: auto !important;
}
}
@media (min-width: 46.25em) {
.u-padding-left-auto\@tablet {
padding-left: auto !important;
}
}
@media (min-width: 61.25em) {
.u-padding-left-auto\@desktop {
padding-left: auto !important;
}
}
@media (min-width: 90em) {
.u-padding-left-auto\@wide {
padding-left: auto !important;
}
}
@media all {
.u-padding-left-large\@tiny {
padding-left: 40px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-left-large\@mobile {
padding-left: 40px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-left-large\@tablet {
padding-left: 40px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-left-large\@desktop {
padding-left: 40px !important;
}
}
@media (min-width: 90em) {
.u-padding-left-large\@wide {
padding-left: 40px !important;
}
}
@media all {
.u-padding-left-huge\@tiny {
padding-left: 60px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-left-huge\@mobile {
padding-left: 60px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-left-huge\@tablet {
padding-left: 60px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-left-huge\@desktop {
padding-left: 60px !important;
}
}
@media (min-width: 90em) {
.u-padding-left-huge\@wide {
padding-left: 60px !important;
}
}
@media all {
.u-padding-left-spacer\@tiny {
padding-left: 110px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-left-spacer\@mobile {
padding-left: 110px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-left-spacer\@tablet {
padding-left: 110px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-left-spacer\@desktop {
padding-left: 110px !important;
}
}
@media (min-width: 90em) {
.u-padding-left-spacer\@wide {
padding-left: 110px !important;
}
}
@media all {
.u-padding-left-none\@tiny {
padding-left: 0 !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-left-none\@mobile {
padding-left: 0 !important;
}
}
@media (min-width: 46.25em) {
.u-padding-left-none\@tablet {
padding-left: 0 !important;
}
}
@media (min-width: 61.25em) {
.u-padding-left-none\@desktop {
padding-left: 0 !important;
}
}
@media (min-width: 90em) {
.u-padding-left-none\@wide {
padding-left: 0 !important;
}
}
@media all {
.u-padding-horizontal\@tiny {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-horizontal\@mobile {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-horizontal\@tablet {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-horizontal\@desktop {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
@media (min-width: 90em) {
.u-padding-horizontal\@wide {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
@media all {
.u-padding-horizontal-auto\@tiny {
padding-left: auto !important;
padding-right: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-horizontal-auto\@mobile {
padding-left: auto !important;
padding-right: auto !important;
}
}
@media (min-width: 46.25em) {
.u-padding-horizontal-auto\@tablet {
padding-left: auto !important;
padding-right: auto !important;
}
}
@media (min-width: 61.25em) {
.u-padding-horizontal-auto\@desktop {
padding-left: auto !important;
padding-right: auto !important;
}
}
@media (min-width: 90em) {
.u-padding-horizontal-auto\@wide {
padding-left: auto !important;
padding-right: auto !important;
}
}
@media all {
.u-padding-horizontal-large\@tiny {
padding-left: 40px !important;
padding-right: 40px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-horizontal-large\@mobile {
padding-left: 40px !important;
padding-right: 40px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-horizontal-large\@tablet {
padding-left: 40px !important;
padding-right: 40px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-horizontal-large\@desktop {
padding-left: 40px !important;
padding-right: 40px !important;
}
}
@media (min-width: 90em) {
.u-padding-horizontal-large\@wide {
padding-left: 40px !important;
padding-right: 40px !important;
}
}
@media all {
.u-padding-horizontal-huge\@tiny {
padding-left: 60px !important;
padding-right: 60px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-horizontal-huge\@mobile {
padding-left: 60px !important;
padding-right: 60px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-horizontal-huge\@tablet {
padding-left: 60px !important;
padding-right: 60px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-horizontal-huge\@desktop {
padding-left: 60px !important;
padding-right: 60px !important;
}
}
@media (min-width: 90em) {
.u-padding-horizontal-huge\@wide {
padding-left: 60px !important;
padding-right: 60px !important;
}
}
@media all {
.u-padding-horizontal-spacer\@tiny {
padding-left: 110px !important;
padding-right: 110px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-horizontal-spacer\@mobile {
padding-left: 110px !important;
padding-right: 110px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-horizontal-spacer\@tablet {
padding-left: 110px !important;
padding-right: 110px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-horizontal-spacer\@desktop {
padding-left: 110px !important;
padding-right: 110px !important;
}
}
@media (min-width: 90em) {
.u-padding-horizontal-spacer\@wide {
padding-left: 110px !important;
padding-right: 110px !important;
}
}
@media all {
.u-padding-horizontal-none\@tiny {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-horizontal-none\@mobile {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (min-width: 46.25em) {
.u-padding-horizontal-none\@tablet {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (min-width: 61.25em) {
.u-padding-horizontal-none\@desktop {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (min-width: 90em) {
.u-padding-horizontal-none\@wide {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media all {
.u-padding-vertical\@tiny {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-vertical\@mobile {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-vertical\@tablet {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-vertical\@desktop {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
}
@media (min-width: 90em) {
.u-padding-vertical\@wide {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
}
@media all {
.u-padding-vertical-auto\@tiny {
padding-top: auto !important;
padding-bottom: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-vertical-auto\@mobile {
padding-top: auto !important;
padding-bottom: auto !important;
}
}
@media (min-width: 46.25em) {
.u-padding-vertical-auto\@tablet {
padding-top: auto !important;
padding-bottom: auto !important;
}
}
@media (min-width: 61.25em) {
.u-padding-vertical-auto\@desktop {
padding-top: auto !important;
padding-bottom: auto !important;
}
}
@media (min-width: 90em) {
.u-padding-vertical-auto\@wide {
padding-top: auto !important;
padding-bottom: auto !important;
}
}
@media all {
.u-padding-vertical-large\@tiny {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-vertical-large\@mobile {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-vertical-large\@tablet {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-vertical-large\@desktop {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
@media (min-width: 90em) {
.u-padding-vertical-large\@wide {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
}
@media all {
.u-padding-vertical-huge\@tiny {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-vertical-huge\@mobile {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-vertical-huge\@tablet {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-vertical-huge\@desktop {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
}
@media (min-width: 90em) {
.u-padding-vertical-huge\@wide {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
}
@media all {
.u-padding-vertical-spacer\@tiny {
padding-top: 110px !important;
padding-bottom: 110px !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-vertical-spacer\@mobile {
padding-top: 110px !important;
padding-bottom: 110px !important;
}
}
@media (min-width: 46.25em) {
.u-padding-vertical-spacer\@tablet {
padding-top: 110px !important;
padding-bottom: 110px !important;
}
}
@media (min-width: 61.25em) {
.u-padding-vertical-spacer\@desktop {
padding-top: 110px !important;
padding-bottom: 110px !important;
}
}
@media (min-width: 90em) {
.u-padding-vertical-spacer\@wide {
padding-top: 110px !important;
padding-bottom: 110px !important;
}
}
@media all {
.u-padding-vertical-none\@tiny {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
@media (min-width: 20.0625em) {
.u-padding-vertical-none\@mobile {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
@media (min-width: 46.25em) {
.u-padding-vertical-none\@tablet {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
@media (min-width: 61.25em) {
.u-padding-vertical-none\@desktop {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
@media (min-width: 90em) {
.u-padding-vertical-none\@wide {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
@media all {
.u-margin\@tiny {
margin: 20px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin\@mobile {
margin: 20px !important;
}
}
@media (min-width: 46.25em) {
.u-margin\@tablet {
margin: 20px !important;
}
}
@media (min-width: 61.25em) {
.u-margin\@desktop {
margin: 20px !important;
}
}
@media (min-width: 90em) {
.u-margin\@wide {
margin: 20px !important;
}
}
@media all {
.u-margin-auto\@tiny {
margin: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-auto\@mobile {
margin: auto !important;
}
}
@media (min-width: 46.25em) {
.u-margin-auto\@tablet {
margin: auto !important;
}
}
@media (min-width: 61.25em) {
.u-margin-auto\@desktop {
margin: auto !important;
}
}
@media (min-width: 90em) {
.u-margin-auto\@wide {
margin: auto !important;
}
}
@media all {
.u-margin-large\@tiny {
margin: 40px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-large\@mobile {
margin: 40px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-large\@tablet {
margin: 40px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-large\@desktop {
margin: 40px !important;
}
}
@media (min-width: 90em) {
.u-margin-large\@wide {
margin: 40px !important;
}
}
@media all {
.u-margin-huge\@tiny {
margin: 60px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-huge\@mobile {
margin: 60px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-huge\@tablet {
margin: 60px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-huge\@desktop {
margin: 60px !important;
}
}
@media (min-width: 90em) {
.u-margin-huge\@wide {
margin: 60px !important;
}
}
@media all {
.u-margin-spacer\@tiny {
margin: 110px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-spacer\@mobile {
margin: 110px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-spacer\@tablet {
margin: 110px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-spacer\@desktop {
margin: 110px !important;
}
}
@media (min-width: 90em) {
.u-margin-spacer\@wide {
margin: 110px !important;
}
}
@media all {
.u-margin-none\@tiny {
margin: 0 !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-none\@mobile {
margin: 0 !important;
}
}
@media (min-width: 46.25em) {
.u-margin-none\@tablet {
margin: 0 !important;
}
}
@media (min-width: 61.25em) {
.u-margin-none\@desktop {
margin: 0 !important;
}
}
@media (min-width: 90em) {
.u-margin-none\@wide {
margin: 0 !important;
}
}
@media all {
.u-margin-top\@tiny {
margin-top: 20px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-top\@mobile {
margin-top: 20px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-top\@tablet {
margin-top: 20px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-top\@desktop {
margin-top: 20px !important;
}
}
@media (min-width: 90em) {
.u-margin-top\@wide {
margin-top: 20px !important;
}
}
@media all {
.u-margin-top-auto\@tiny {
margin-top: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-top-auto\@mobile {
margin-top: auto !important;
}
}
@media (min-width: 46.25em) {
.u-margin-top-auto\@tablet {
margin-top: auto !important;
}
}
@media (min-width: 61.25em) {
.u-margin-top-auto\@desktop {
margin-top: auto !important;
}
}
@media (min-width: 90em) {
.u-margin-top-auto\@wide {
margin-top: auto !important;
}
}
@media all {
.u-margin-top-large\@tiny {
margin-top: 40px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-top-large\@mobile {
margin-top: 40px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-top-large\@tablet {
margin-top: 40px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-top-large\@desktop {
margin-top: 40px !important;
}
}
@media (min-width: 90em) {
.u-margin-top-large\@wide {
margin-top: 40px !important;
}
}
@media all {
.u-margin-top-huge\@tiny {
margin-top: 60px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-top-huge\@mobile {
margin-top: 60px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-top-huge\@tablet {
margin-top: 60px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-top-huge\@desktop {
margin-top: 60px !important;
}
}
@media (min-width: 90em) {
.u-margin-top-huge\@wide {
margin-top: 60px !important;
}
}
@media all {
.u-margin-top-spacer\@tiny {
margin-top: 110px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-top-spacer\@mobile {
margin-top: 110px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-top-spacer\@tablet {
margin-top: 110px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-top-spacer\@desktop {
margin-top: 110px !important;
}
}
@media (min-width: 90em) {
.u-margin-top-spacer\@wide {
margin-top: 110px !important;
}
}
@media all {
.u-margin-top-none\@tiny {
margin-top: 0 !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-top-none\@mobile {
margin-top: 0 !important;
}
}
@media (min-width: 46.25em) {
.u-margin-top-none\@tablet {
margin-top: 0 !important;
}
}
@media (min-width: 61.25em) {
.u-margin-top-none\@desktop {
margin-top: 0 !important;
}
}
@media (min-width: 90em) {
.u-margin-top-none\@wide {
margin-top: 0 !important;
}
}
@media all {
.u-margin-right\@tiny {
margin-right: 20px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-right\@mobile {
margin-right: 20px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-right\@tablet {
margin-right: 20px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-right\@desktop {
margin-right: 20px !important;
}
}
@media (min-width: 90em) {
.u-margin-right\@wide {
margin-right: 20px !important;
}
}
@media all {
.u-margin-right-auto\@tiny {
margin-right: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-right-auto\@mobile {
margin-right: auto !important;
}
}
@media (min-width: 46.25em) {
.u-margin-right-auto\@tablet {
margin-right: auto !important;
}
}
@media (min-width: 61.25em) {
.u-margin-right-auto\@desktop {
margin-right: auto !important;
}
}
@media (min-width: 90em) {
.u-margin-right-auto\@wide {
margin-right: auto !important;
}
}
@media all {
.u-margin-right-large\@tiny {
margin-right: 40px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-right-large\@mobile {
margin-right: 40px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-right-large\@tablet {
margin-right: 40px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-right-large\@desktop {
margin-right: 40px !important;
}
}
@media (min-width: 90em) {
.u-margin-right-large\@wide {
margin-right: 40px !important;
}
}
@media all {
.u-margin-right-huge\@tiny {
margin-right: 60px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-right-huge\@mobile {
margin-right: 60px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-right-huge\@tablet {
margin-right: 60px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-right-huge\@desktop {
margin-right: 60px !important;
}
}
@media (min-width: 90em) {
.u-margin-right-huge\@wide {
margin-right: 60px !important;
}
}
@media all {
.u-margin-right-spacer\@tiny {
margin-right: 110px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-right-spacer\@mobile {
margin-right: 110px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-right-spacer\@tablet {
margin-right: 110px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-right-spacer\@desktop {
margin-right: 110px !important;
}
}
@media (min-width: 90em) {
.u-margin-right-spacer\@wide {
margin-right: 110px !important;
}
}
@media all {
.u-margin-right-none\@tiny {
margin-right: 0 !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-right-none\@mobile {
margin-right: 0 !important;
}
}
@media (min-width: 46.25em) {
.u-margin-right-none\@tablet {
margin-right: 0 !important;
}
}
@media (min-width: 61.25em) {
.u-margin-right-none\@desktop {
margin-right: 0 !important;
}
}
@media (min-width: 90em) {
.u-margin-right-none\@wide {
margin-right: 0 !important;
}
}
@media all {
.u-margin-bottom\@tiny {
margin-bottom: 20px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-bottom\@mobile {
margin-bottom: 20px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-bottom\@tablet {
margin-bottom: 20px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-bottom\@desktop {
margin-bottom: 20px !important;
}
}
@media (min-width: 90em) {
.u-margin-bottom\@wide {
margin-bottom: 20px !important;
}
}
@media all {
.u-margin-bottom-auto\@tiny {
margin-bottom: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-bottom-auto\@mobile {
margin-bottom: auto !important;
}
}
@media (min-width: 46.25em) {
.u-margin-bottom-auto\@tablet {
margin-bottom: auto !important;
}
}
@media (min-width: 61.25em) {
.u-margin-bottom-auto\@desktop {
margin-bottom: auto !important;
}
}
@media (min-width: 90em) {
.u-margin-bottom-auto\@wide {
margin-bottom: auto !important;
}
}
@media all {
.u-margin-bottom-large\@tiny {
margin-bottom: 40px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-bottom-large\@mobile {
margin-bottom: 40px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-bottom-large\@tablet {
margin-bottom: 40px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-bottom-large\@desktop {
margin-bottom: 40px !important;
}
}
@media (min-width: 90em) {
.u-margin-bottom-large\@wide {
margin-bottom: 40px !important;
}
}
@media all {
.u-margin-bottom-huge\@tiny {
margin-bottom: 60px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-bottom-huge\@mobile {
margin-bottom: 60px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-bottom-huge\@tablet {
margin-bottom: 60px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-bottom-huge\@desktop {
margin-bottom: 60px !important;
}
}
@media (min-width: 90em) {
.u-margin-bottom-huge\@wide {
margin-bottom: 60px !important;
}
}
@media all {
.u-margin-bottom-spacer\@tiny {
margin-bottom: 110px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-bottom-spacer\@mobile {
margin-bottom: 110px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-bottom-spacer\@tablet {
margin-bottom: 110px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-bottom-spacer\@desktop {
margin-bottom: 110px !important;
}
}
@media (min-width: 90em) {
.u-margin-bottom-spacer\@wide {
margin-bottom: 110px !important;
}
}
@media all {
.u-margin-bottom-none\@tiny {
margin-bottom: 0 !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-bottom-none\@mobile {
margin-bottom: 0 !important;
}
}
@media (min-width: 46.25em) {
.u-margin-bottom-none\@tablet {
margin-bottom: 0 !important;
}
}
@media (min-width: 61.25em) {
.u-margin-bottom-none\@desktop {
margin-bottom: 0 !important;
}
}
@media (min-width: 90em) {
.u-margin-bottom-none\@wide {
margin-bottom: 0 !important;
}
}
@media all {
.u-margin-left\@tiny {
margin-left: 20px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-left\@mobile {
margin-left: 20px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-left\@tablet {
margin-left: 20px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-left\@desktop {
margin-left: 20px !important;
}
}
@media (min-width: 90em) {
.u-margin-left\@wide {
margin-left: 20px !important;
}
}
@media all {
.u-margin-left-auto\@tiny {
margin-left: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-left-auto\@mobile {
margin-left: auto !important;
}
}
@media (min-width: 46.25em) {
.u-margin-left-auto\@tablet {
margin-left: auto !important;
}
}
@media (min-width: 61.25em) {
.u-margin-left-auto\@desktop {
margin-left: auto !important;
}
}
@media (min-width: 90em) {
.u-margin-left-auto\@wide {
margin-left: auto !important;
}
}
@media all {
.u-margin-left-large\@tiny {
margin-left: 40px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-left-large\@mobile {
margin-left: 40px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-left-large\@tablet {
margin-left: 40px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-left-large\@desktop {
margin-left: 0px !important;
}
}
@media (min-width: 90em) {
.u-margin-left-large\@wide {
margin-left: 40px !important;
}
}
@media all {
.u-margin-left-huge\@tiny {
margin-left: 60px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-left-huge\@mobile {
margin-left: 60px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-left-huge\@tablet {
margin-left: 60px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-left-huge\@desktop {
margin-left: 60px !important;
}
}
@media (min-width: 90em) {
.u-margin-left-huge\@wide {
margin-left: 60px !important;
}
}
@media all {
.u-margin-left-spacer\@tiny {
margin-left: 110px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-left-spacer\@mobile {
margin-left: 110px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-left-spacer\@tablet {
margin-left: 110px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-left-spacer\@desktop {
margin-left: 110px !important;
}
}
@media (min-width: 90em) {
.u-margin-left-spacer\@wide {
margin-left: 110px !important;
}
}
@media all {
.u-margin-left-none\@tiny {
margin-left: 0 !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-left-none\@mobile {
margin-left: 0 !important;
}
}
@media (min-width: 46.25em) {
.u-margin-left-none\@tablet {
margin-left: 0 !important;
}
}
@media (min-width: 61.25em) {
.u-margin-left-none\@desktop {
margin-left: 0 !important;
}
}
@media (min-width: 90em) {
.u-margin-left-none\@wide {
margin-left: 0 !important;
}
}
@media all {
.u-margin-horizontal\@tiny {
margin-left: 20px !important;
margin-right: 20px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-horizontal\@mobile {
margin-left: 20px !important;
margin-right: 20px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-horizontal\@tablet {
margin-left: 20px !important;
margin-right: 20px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-horizontal\@desktop {
margin-left: 20px !important;
margin-right: 20px !important;
}
}
@media (min-width: 90em) {
.u-margin-horizontal\@wide {
margin-left: 20px !important;
margin-right: 20px !important;
}
}
@media all {
.u-margin-horizontal-auto\@tiny {
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-horizontal-auto\@mobile {
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (min-width: 46.25em) {
.u-margin-horizontal-auto\@tablet {
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (min-width: 61.25em) {
.u-margin-horizontal-auto\@desktop {
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (min-width: 90em) {
.u-margin-horizontal-auto\@wide {
margin-left: auto !important;
margin-right: auto !important;
}
}
@media all {
.u-margin-horizontal-large\@tiny {
margin-left: 40px !important;
margin-right: 40px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-horizontal-large\@mobile {
margin-left: 40px !important;
margin-right: 40px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-horizontal-large\@tablet {
margin-left: 40px !important;
margin-right: 40px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-horizontal-large\@desktop {
margin-left: 40px !important;
margin-right: 40px !important;
}
}
@media (min-width: 90em) {
.u-margin-horizontal-large\@wide {
margin-left: 40px !important;
margin-right: 40px !important;
}
}
@media all {
.u-margin-horizontal-huge\@tiny {
margin-left: 60px !important;
margin-right: 60px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-horizontal-huge\@mobile {
margin-left: 60px !important;
margin-right: 60px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-horizontal-huge\@tablet {
margin-left: 60px !important;
margin-right: 60px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-horizontal-huge\@desktop {
margin-left: 60px !important;
margin-right: 60px !important;
}
}
@media (min-width: 90em) {
.u-margin-horizontal-huge\@wide {
margin-left: 60px !important;
margin-right: 60px !important;
}
}
@media all {
.u-margin-horizontal-spacer\@tiny {
margin-left: 110px !important;
margin-right: 110px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-horizontal-spacer\@mobile {
margin-left: 110px !important;
margin-right: 110px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-horizontal-spacer\@tablet {
margin-left: 110px !important;
margin-right: 110px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-horizontal-spacer\@desktop {
margin-left: 110px !important;
margin-right: 110px !important;
}
}
@media (min-width: 90em) {
.u-margin-horizontal-spacer\@wide {
margin-left: 110px !important;
margin-right: 110px !important;
}
}
@media all {
.u-margin-horizontal-none\@tiny {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-horizontal-none\@mobile {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (min-width: 46.25em) {
.u-margin-horizontal-none\@tablet {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (min-width: 61.25em) {
.u-margin-horizontal-none\@desktop {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (min-width: 90em) {
.u-margin-horizontal-none\@wide {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media all {
.u-margin-vertical\@tiny {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-vertical\@mobile {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-vertical\@tablet {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-vertical\@desktop {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
}
@media (min-width: 90em) {
.u-margin-vertical\@wide {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
}
@media all {
.u-margin-vertical-auto\@tiny {
margin-top: auto !important;
margin-bottom: auto !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-vertical-auto\@mobile {
margin-top: auto !important;
margin-bottom: auto !important;
}
}
@media (min-width: 46.25em) {
.u-margin-vertical-auto\@tablet {
margin-top: auto !important;
margin-bottom: auto !important;
}
}
@media (min-width: 61.25em) {
.u-margin-vertical-auto\@desktop {
margin-top: auto !important;
margin-bottom: auto !important;
}
}
@media (min-width: 90em) {
.u-margin-vertical-auto\@wide {
margin-top: auto !important;
margin-bottom: auto !important;
}
}
@media all {
.u-margin-vertical-large\@tiny {
margin-top: 40px !important;
margin-bottom: 40px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-vertical-large\@mobile {
margin-top: 40px !important;
margin-bottom: 40px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-vertical-large\@tablet {
margin-top: 40px !important;
margin-bottom: 40px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-vertical-large\@desktop {
margin-top: 40px !important;
margin-bottom: 40px !important;
}
}
@media (min-width: 90em) {
.u-margin-vertical-large\@wide {
margin-top: 40px !important;
margin-bottom: 40px !important;
}
}
@media all {
.u-margin-vertical-huge\@tiny {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-vertical-huge\@mobile {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-vertical-huge\@tablet {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-vertical-huge\@desktop {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
}
@media (min-width: 90em) {
.u-margin-vertical-huge\@wide {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
}
@media all {
.u-margin-vertical-spacer\@tiny {
margin-top: 110px !important;
margin-bottom: 110px !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-vertical-spacer\@mobile {
margin-top: 110px !important;
margin-bottom: 110px !important;
}
}
@media (min-width: 46.25em) {
.u-margin-vertical-spacer\@tablet {
margin-top: 110px !important;
margin-bottom: 110px !important;
}
}
@media (min-width: 61.25em) {
.u-margin-vertical-spacer\@desktop {
margin-top: 110px !important;
margin-bottom: 110px !important;
}
}
@media (min-width: 90em) {
.u-margin-vertical-spacer\@wide {
margin-top: 110px !important;
margin-bottom: 110px !important;
}
}
@media all {
.u-margin-vertical-none\@tiny {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
@media (min-width: 20.0625em) {
.u-margin-vertical-none\@mobile {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
@media (min-width: 46.25em) {
.u-margin-vertical-none\@tablet {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
@media (min-width: 61.25em) {
.u-margin-vertical-none\@desktop {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
@media (min-width: 90em) {
.u-margin-vertical-none\@wide {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/* stylelint-enable max-nesting-depth */
/* ==========================================================================
#VISIBILITY
========================================================================== */
.u-block {
display: block;
}
.u-inline-block {
display: inline-block;
}
.u-hidden-visually {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.u-hidden {
display: none;
}
@media all {
.u-block\@tiny {
display: block;
}
.u-inline-block\@tiny {
display: inline-block;
}
.u-flex\@tiny {
display: flex;
}
.u-hidden\@tiny {
display: none;
}
.u-hidden-visually\@tiny {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.u-visible\@tiny {
display: initial;
}
}
@media (min-width: 46.25em) {
.u-block\@tablet {
display: block;
}
.u-inline-block\@tablet {
display: inline-block;
}
.u-flex\@tablet {
display: flex;
}
.u-hidden\@tablet {
display: none;
}
.u-hidden-visually\@tablet {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.u-visible\@tablet {
display: initial;
}
}
@media (min-width: 61.25em) {
.u-block\@desktop {
display: block;
}
.u-inline-block\@desktop {
display: inline-block;
}
.u-flex\@desktop {
display: flex;
}
.u-hidden\@desktop {
display: none;
}
.u-hidden-visually\@desktop {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.u-visible\@desktop {
display: initial;
}
}
@media screen {
.u-hidden-visually\@mobile {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
@media (min-width: 46.25em) {
.u-hidden-visually\@mobile {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
}
}
.u-hidden\@mobile {
display: none;
}
@media (min-width: 46.25em) {
.u-hidden\@mobile {
display: initial;
}
}
/* ==========================================================================
#FLEX
========================================================================== */
.u-flex {
display: flex;
}
@media (min-width: 46.25em) {
.u-flex\@tablet {
display: flex;
}
}
.u-flex--mobile-stack {
flex-direction: column;
}
@media (min-width: 46.25em) {
.u-flex--mobile-stack {
flex-direction: row;
}
}
.u-align--top {
align-items: flex-start;
}
.u-align--right {
justify-content: flex-end;
}
.u-align--bottom {
align-items: flex-end;
}
.u-align--left {
justify-content: flex-start;
}
.u-align--justify {
justify-content: space-between;
}
.u-align--spaced {
justify-content: space-around;
}
.u-align--center {
justify-content: center;
align-items: center;
}
.u-align--middle {
align-items: center;
}
.u-align--self-top {
align-self: flex-start;
}
.u-align--self-middle {
align-self: center;
}
.u-align--self-bottom {
align-self: flex-end;
}
.u-flex--grow {
flex-grow: 1 !important;
}
.u-flex--nogrow {
flex-grow: 0 !important;
}
.u-flex--shrink {
flex-shrink: 1 !important;
}
.u-flex--noshrink {
flex-shrink: 0 !important;
}
/* ==========================================================================
#HEADINGS
========================================================================== */
.u-h1,
.u-h2,
.u-h3,
.u-h4,
.u-h5,
.u-h6 {
font-family: "Helvetica Now", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 500;
}
@media all {
.u-heading--404 {
font-size: 3rem !important;
line-height: 1.2 !important;
margin-top: 0.625rem !important;
margin-bottom: 0.625rem !important;
}
.u-h1 {
font-size: 2rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: 0.3125rem !important;
}
.u-h2 {
font-size: 1.5rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: 0.3125rem !important;
}
.u-h3 {
font-size: 1.3125rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: 0.3125rem !important;
}
.u-h4 {
font-size: 1.125rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: 0.3125rem !important;
}
.u-h5 {
font-size: 1.0625rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: 0.3125rem !important;
}
.u-h6 {
font-size: 1rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: 0.3125rem !important;
}
}
@media (min-width: 61.25em) {
.u-heading--404 {
font-size: 5.3125rem !important;
margin-top: 1.25rem !important;
margin-bottom: 1.25rem !important;
}
.u-h1 {
font-size: 3rem !important;
}
.u-h2 {
font-size: 2rem !important;
}
.u-h3 {
font-size: 1.5rem !important;
}
.u-h4 {
font-size: 1.3rem !important;
}
.u-h5 {
font-size: 1.25rem !important;
}
.u-h6 {
font-size: 1rem !important;
}
}
.u-heading--large {
font-size: 85px;
}
.u-border {
border: 2px;
}
.u-border--top {
border-top: 2px solid;
}
@media (min-width: 20.0625em) {
.u-border--top\@mobile {
border-top: 2px solid;
}
}
.u-border--bottom {
border-bottom: 2px solid;
}
@media (min-width: 20.0625em) {
.u-border--bottom\@mobile {
border-bottom: 2px solid;
}
}
.u-border--horizontal {
border-left: 2px solid;
border-right: 2px solid;
}
@media (min-width: 20.0625em) {
.u-border--horizontal\@mobile {
border-left: 2px solid;
border-right: 2px solid;
}
}
.u-border--vertical {
border-top: 2px solid;
border-bottom: 2px solid;
}
@media (min-width: 20.0625em) {
.u-border--vertical\@mobile {
border-top: 2px solid;
border-bottom: 2px solid;
}
}
.u-border--none {
border: none;
}
@media (min-width: 20.0625em) {
.u-border--none\@mobile {
border: none;
}
}
/* ==========================================================================
#COLORS
========================================================================== */
/* ========================================================================
#COLOURS
======================================================================== */
/**
* CONTENTS
*
* COLOURS
* Brand........Brand colours used to define colours only
* Highlights...Colours mainly used for backgrounds and accents
* Neutral......Numbered system to define brightness of colour $color-gray-10" means "10% gray".
* Utility......Colours to provide feedback.
* Text.........Anything that's not a link mainly the body copy.
* Heading......Default header colours.
* Link.........Header colours the do not have a link applied to them.
* Border.......Accent colours used for separation.
* Core.........inuitcss’ core and setup settings.
* Global.......Project-wide variables and settings.
*/
/*
* Assign, the grays to a neutral colour, these are the colour names defined within the Zeplin file
*/
/*
* Colours below use the colours defined above to remove the association between colour names and elements/components
*/
.u-color--primary {
color: #001e5a;
}
.u-color--blue {
color: #0056da;
margin-bottom: 10px;
}
.u-color--white {
color: #fff;
}
/* change the primary background to white, to globally fix all page container backgrounds */
.u-background--primary {
background-color: white;
}
.u-border--primary {
border-color: #001e5a;
}
.u-fill--primary {
fill: #001e5a;
}
.u-stroke--primary {
stroke: #001e5a;
}
.u-color--secondary {
color: #0056da;
}
.u-background--secondary {
background-color: #0056da;
}
.u-border--secondary {
border-color: #0056da;
}
.u-fill--secondary {
fill: #0056da;
}
.u-stroke--secondary {
stroke: #0056da;
}
.u-color--secondary-light {
color: #243e8c;
}
.u-background--secondary-light {
background-color: #243e8c;
}
.u-border--secondary-light {
border-color: #243e8c;
}
.u-fill--secondary-light {
fill: #243e8c;
}
.u-stroke--secondary-light {
stroke: #243e8c;
}
.u-color--secondary-lighter {
color: #f0f6ff;
}
.u-background--secondary-lighter {
background-color: #f0f6ff;
}
.u-border--secondary-lighter {
border-color: #f0f6ff;
}
.u-fill--secondary-lighter {
fill: #f0f6ff;
}
.u-stroke--secondary-lighter {
stroke: #f0f6ff;
}
.u-color--tertiary {
color: #ffb600;
}
.u-background--tertiary {
background-color: #ffb600;
}
.u-border--tertiary {
border-color: #ffb600;
}
.u-fill--tertiary {
fill: #ffb600;
}
.u-stroke--tertiary {
stroke: #ffb600;
}
.u-color--success {
color: green;
}
.u-background--success {
background-color: green;
}
.u-border--success {
border-color: green;
}
.u-fill--success {
fill: green;
}
.u-stroke--success {
stroke: green;
}
.u-color--info {
color: #0192d0;
}
.u-background--info {
background-color: #0192d0;
}
.u-border--info {
border-color: #0192d0;
}
.u-fill--info {
fill: #0192d0;
}
.u-stroke--info {
stroke: #0192d0;
}
.u-color--danger {
color: #ff0000;
}
.u-background--danger {
background-color: #ff0000;
}
.u-border--danger {
border-color: #ff0000;
}
.u-fill--danger {
fill: #ff0000;
}
.u-stroke--danger {
stroke: #ff0000;
}
.u-color--light {
color: #e6e6e6;
}
.u-background--light {
background-color: #e6e6e6;
}
.u-border--light {
border-color: #e6e6e6;
}
.u-fill--light {
fill: #e6e6e6;
}
.u-stroke--light {
stroke: #e6e6e6;
}
.u-color--pale {
color: #f2f4f7;
}
.u-background--pale {
background-color: #f2f4f7;
}
.u-background--blue {
background-color: #243e8c;
}
.u-border--pale {
border-color: #f2f4f7;
}
.u-fill--pale {
fill: #f2f4f7;
}
.u-stroke--pale {
stroke: #f2f4f7;
}
.u-color--dark {
color: #595959;
}
.u-background--dark {
background-color: #595959;
}
.u-border--dark {
border-color: #595959;
}
.u-fill--dark {
fill: #595959;
}
.u-stroke--dark {
stroke: #595959;
}
.u-color--white {
color: #fff;
}
.u-background--white {
background-color: #fff;
}
.u-border--white {
border-color: #fff;
}
.u-fill--white {
fill: #fff;
}
.u-stroke--white {
stroke: #fff;
}
.u-background--midnight {
background-color: #001e5a;
}
.u-color--white {
text-rendering: geometricPrecision;
}
.u-background--primary .u-color--white {
text-rendering: geometricPrecision;
}
.u-background--primary .u-color--tertiary {
text-rendering: geometricPrecision;
}
.u-background--secondary .u-color--white {
text-rendering: geometricPrecision;
}
.u-background--secondary .u-color--tertiary {
text-rendering: geometricPrecision;
}
.u-stroke-none {
stroke: none;
}
.u-fill-none {
fill: none;
}
/* ==========================================================================
#TEXT
========================================================================== */
.u-h1,
.u-h2,
.u-h3,
.u-h4,
.u-h5,
.u-h6 {
font-family: "Helvetica Now", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 500;
}
@media all {
.u-heading--404 {
font-size: 3rem !important;
line-height: 1.2 !important;
margin-top: 0.625rem !important;
margin-bottom: 0.625rem !important;
}
.u-h1 {
font-size: 2rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: 0.3125rem !important;
}
.u-h2 {
font-size: 1.5rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: 0.3125rem !important;
}
.u-h3 {
font-size: 1.3125rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: 0.3125rem !important;
}
.u-h4 {
font-size: 1.125rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: 0.3125rem !important;
}
.u-h5 {
font-size: 1.0625rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: 0.3125rem !important;
}
.u-h6 {
font-size: 1rem !important;
line-height: 1.2 !important;
margin-top: 0 !important;
margin-bottom: 0.3125rem !important;
}
}
@media (min-width: 61.25em) {
.u-heading--404 {
font-size: 5.3125rem !important;
margin-top: 1.25rem !important;
margin-bottom: 1.25rem !important;
}
.u-h1 {
font-size: 3rem !important;
}
.u-h2 {
font-size: 2.5rem !important;
}
.u-h3 {
font-size: 2rem !important;
}
.u-h4 {
font-size: 1.5rem !important;
}
.u-h5 {
font-size: 1.25rem !important;
}
.u-h6 {
font-size: 1rem !important;
}
}
.u-font-weight--thin {
font-weight: 200;
}
.u-text--small {
font-size: 0.9375rem;
}
.u-text--large {
font-size: 1.125rem;
}
.u-text--xlarge {
font-size: 1.3125rem;
}
.u-text--left {
text-align: left;
}
.u-text--right {
text-align: right;
}
.u-text--center {
text-align: center;
}
.u-text--uppercase {
text-transform: uppercase;
}
.u-2-columns {
column-count: 2;
column-gap: 10px;
}
@media (min-width: 20.0625em) {
.u-2-columns\@mobile {
column-count: 2;
column-gap: 10px;
}
}
.u-text--arrow:not(:empty):after {
content: " ›";
}
.u-text--back-arrow:not(:empty):before {
content: "‹ ";
}
.u-scroll-none {
overflow: hidden;
height: 100vh;
}
@media (min-width: 61.25em) {
.u-scroll-none {
overflow: initial;
height: auto;
}
}
.u-scroll-x {
overflow-x: scroll;
}
.u-scroll-y {
overflow-y: scroll;
}
.u-overflow-hidden {
overflow: hidden;
}
.u-overlap-top {
margin-top: -20px;
z-index: 100;
}
@media (min-width: 61.25em) {
.u-overlap-top {
margin-top: -60px;
}
}
.u-overlap-header-top {
margin-top: 0;
z-index: 100;
}
@media (min-width: 61.25em) {
.u-overlap-header-top {
margin-top: -70px;
}
}
.u-pull-left {
float: left !important;
}
.u-pull-right {
float: right !important;
}
/* ==========================================================================
#LIST
========================================================================== */
.u-list-style-none {
display: block;
list-style: none;
padding-left: 0;
margin: 0 0 20px 0;
}
/* ==========================================================================
#PRINT
========================================================================== */
/**
* Very crude, reset-like styles taken from the HTML5 Boilerplate:
* https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles
* https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282
*/
@media print {
/**
* 1. Black prints faster: http://www.sanbeiji.com/archives/953
*/
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
/* [1] */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/**
* Don’t show links that are fragment identifiers, or use the `javascript:`
* pseudo protocol.
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/**
* Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
@media print {
*,
*:before,
*:after {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.no-print,
.no-print * {
display: none !important;
}
.c-page-header {
min-height: 0;
}
.c-footer.u-padding-vertical-spacer {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.c-footer .o-layout--middle > .o-layout__item {
vertical-align: top;
}
/* ==========================================================================
#WIDTHS
========================================================================== */
/**
* inuitcss generates a series of utility classes that give a fluid width to
* whichever element they’re applied, e.g.:
*
* <img src="" alt="" class="u-1/2" />
*
* These classes are most commonly used in conjunction with our layout system,
* e.g.:
*
* <div class="o-layout__item u-1/2">
*
* By default, inuitcss will also generate responsive variants of each of these
* classes by using your Sass MQ configuration, e.g.:
*
* <div class="o-layout__item u-1/1 u-1/2@tablet u-1/3@desktop">
*
* Optionally, inuitcss can generate offset classes which can push and pull
* elements left and right by a specified amount, e.g.:
*
* <div class="o-layout__item u-2/3 u-pull-1/3">
*
* This is useful for making very granular changes to the rendered order of
* items in a layout.
*
* N.B. This option is turned off by default.
*/
/**
* A series of width helper classes that you can use to size things like grid
* systems. Classes take a fraction-like format (e.g. `.u-2/3`). Use these in
* your markup:
*
* <div class="u-7/12">
*
* The following will generate widths helper classes based on the fractions
* defined in the `$inuit-fractions` list.
*/
.u-1\/1 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-1\/1 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/2 {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2 {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-1\/2 {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-2\/2 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-2\/2 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/3 {
width: 33.33333% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3 {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important;
}
.u-pull-1\/3 {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */
}
.u-2\/3 {
width: 66.66667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3 {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important;
}
.u-pull-2\/3 {
position: relative !important;
right: 66.66667% !important;
left: auto !important;
/* [1] */
}
.u-3\/3 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-3\/3 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/4 {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4 {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important;
}
.u-pull-1\/4 {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */
}
.u-2\/4 {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4 {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-2\/4 {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-3\/4 {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4 {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important;
}
.u-pull-3\/4 {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */
}
.u-4\/4 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-4\/4 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/5 {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important;
}
.u-pull-1\/5 {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */
}
.u-2\/5 {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important;
}
.u-pull-2\/5 {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */
}
.u-3\/5 {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important;
}
.u-pull-3\/5 {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */
}
.u-4\/5 {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important;
}
.u-pull-4\/5 {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */
}
.u-5\/5 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-5\/5 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
/**
* If we’re using Sass-MQ, automatically generate grid system(s) for each of our
* defined breakpoints, and give them a Responsive Suffix, e.g.:
*
* <div class="u-3/12@mobile">
*/
.u-1\/1\@tiny {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-1\/1\@tiny {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/2\@tiny {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-1\/2\@tiny {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-2\/2\@tiny {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-2\/2\@tiny {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/3\@tiny {
width: 33.33333% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important;
}
.u-pull-1\/3\@tiny {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */
}
.u-2\/3\@tiny {
width: 66.66667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important;
}
.u-pull-2\/3\@tiny {
position: relative !important;
right: 66.66667% !important;
left: auto !important;
/* [1] */
}
.u-3\/3\@tiny {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-3\/3\@tiny {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/4\@tiny {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important;
}
.u-pull-1\/4\@tiny {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */
}
.u-2\/4\@tiny {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-2\/4\@tiny {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-3\/4\@tiny {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important;
}
.u-pull-3\/4\@tiny {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */
}
.u-4\/4\@tiny {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-4\/4\@tiny {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/5\@tiny {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important;
}
.u-pull-1\/5\@tiny {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */
}
.u-2\/5\@tiny {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important;
}
.u-pull-2\/5\@tiny {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */
}
.u-3\/5\@tiny {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important;
}
.u-pull-3\/5\@tiny {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */
}
.u-4\/5\@tiny {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important;
}
.u-pull-4\/5\@tiny {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */
}
.u-5\/5\@tiny {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5\@tiny {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-5\/5\@tiny {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-push-none\@tiny {
left: auto !important;
}
.u-pull-none\@tiny {
right: auto !important;
}
.u-1\/1\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-1\/1\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/2\@mobile {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-1\/2\@mobile {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-2\/2\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-2\/2\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/3\@mobile {
width: 33.33333% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important;
}
.u-pull-1\/3\@mobile {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */
}
.u-2\/3\@mobile {
width: 66.66667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important;
}
.u-pull-2\/3\@mobile {
position: relative !important;
right: 66.66667% !important;
left: auto !important;
/* [1] */
}
.u-3\/3\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-3\/3\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/4\@mobile {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important;
}
.u-pull-1\/4\@mobile {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */
}
.u-2\/4\@mobile {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-2\/4\@mobile {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-3\/4\@mobile {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important;
}
.u-pull-3\/4\@mobile {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */
}
.u-4\/4\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-4\/4\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/5\@mobile {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important;
}
.u-pull-1\/5\@mobile {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */
}
.u-2\/5\@mobile {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important;
}
.u-pull-2\/5\@mobile {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */
}
.u-3\/5\@mobile {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important;
}
.u-pull-3\/5\@mobile {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */
}
.u-4\/5\@mobile {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important;
}
.u-pull-4\/5\@mobile {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */
}
.u-5\/5\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-5\/5\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-push-none\@mobile {
left: auto !important;
}
.u-pull-none\@mobile {
right: auto !important;
}
.u-1\/1\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-1\/1\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/2\@tablet {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-1\/2\@tablet {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-2\/2\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-2\/2\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/3\@tablet {
width: 33.33333% !important;
}
.u-1\/4\@tablet {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important;
}
.u-pull-1\/3\@tablet {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */
}
.u-2\/3\@tablet {
width: 66.66667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important;
}
.u-pull-2\/3\@tablet {
position: relative !important;
right: 66.66667% !important;
left: auto !important;
/* [1] */
}
.u-3\/3\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-3\/3\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/4\@tablet {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important;
}
.u-pull-1\/4\@tablet {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */
}
.u-2\/4\@tablet {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-2\/4\@tablet {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-3\/4\@tablet {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important;
}
.u-pull-3\/4\@tablet {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */
}
.u-4\/4\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-4\/4\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/5\@tablet {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important;
}
.u-pull-1\/5\@tablet {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */
}
.u-2\/5\@tablet {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important;
}
.u-pull-2\/5\@tablet {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */
}
.u-3\/5\@tablet {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important;
}
.u-pull-3\/5\@tablet {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */
}
.u-4\/5\@tablet {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important;
}
.u-pull-4\/5\@tablet {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */
}
.u-5\/5\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-5\/5\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-push-none\@tablet {
left: auto !important;
}
.u-pull-none\@tablet {
right: auto !important;
}
.u-1\/1\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-1\/1\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/2\@desktop {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-1\/2\@desktop {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-2\/2\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-2\/2\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/3\@desktop {
width: 33.33333% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important;
}
.u-pull-1\/3\@desktop {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */
}
.u-2\/3\@desktop {
width: 66.66667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important;
}
.u-pull-2\/3\@desktop {
position: relative !important;
right: 66.66667% !important;
left: auto !important;
/* [1] */
}
.u-3\/3\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-3\/3\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/4\@desktop {
width: 25% !important;
}
.u-1\/5\@desktop {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important;
}
.u-pull-1\/4\@desktop {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */
}
.u-2\/4\@desktop {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important;
}
.u-pull-2\/4\@desktop {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */
}
.u-3\/4\@desktop {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important;
}
.u-pull-3\/4\@desktop {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */
}
.u-4\/4\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-4\/4\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-1\/5\@desktop {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important;
}
.u-pull-1\/5\@desktop {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */
}
.u-2\/5\@desktop {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important;
}
.u-pull-2\/5\@desktop {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */
}
.u-3\/5\@desktop {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important;
}
.u-pull-3\/5\@desktop {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */
}
.u-4\/5\@desktop {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important;
}
.u-pull-4\/5\@desktop {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */
}
.u-5\/5\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important;
}
.u-pull-5\/5\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */
}
.u-push-none\@desktop {
left: auto !important;
}
.u-pull-none\@desktop {
right: auto !important;
}
}
/*Custom styles*/
.c-success-story__download-button {
position: absolute;
top: -44px;
right: 130px;
z-index: 500;
width: auto;
}
/* erica work */
.client-objectives-and-results h2 {
color: #FFB600;
text-transform: uppercase;
font-size: 14px;
margin-bottom: 40px;
}
.client-objectives-and-results span,
.client-objectives-and-results p,
.client-objectives-and-results li {
color: white !important;
}
.client-objectives-and-results .objectives
.client-objectives-and-results .objectives {
margin-bottom: 70px;
}
.client-objectives-and-results .o-layout {
font-size: 1rem;
}
.blue-gold-list{
font-size:18px;
color:white;
max-width: 800px;
}
.blue-gold-list .objectives {
margin-bottom: 60px;
}
@media (min-width: 46.25em){
.blue-gold-list {
padding: 40px;
}
}
@media (min-width: 61.25em) {
.blue-gold-list {
padding: 70px;
}
}
.blue-gold-list li {
position: relative;
cursor: initial;
padding-bottom: 12px;
margin-left: 22px;
color:white;
}
.blue-gold-list span,
.blue-gold-list p{
color:white !important;
}
.blue-gold-list li:before {
color: #FFB600;
content: "\2022";
position: absolute;
font-size: 20px;
top: -4px;
left: -20px;
}
.blue-gold-list ul {
list-style: none !important;
}
/* override inline styles added by content authors */
.blue-gold-list span,
.blue-gold-list p,
.blue-gold-list div {
color: white !important;
background: none !important;
font-size: 18px !important;
}
.features-and-map {
background: #001E5A;
}
@media (min-width: 61.25em){
.features-and-map .o-layout {
display: table;
width:100%;
}
.features-and-map .o-layout .o-layout__item {
display: table-cell;
}
.features-and-map .map-contact {
background-position: center;
background-size: cover;
}
}
.features-and-map h3 {
padding-bottom: 20px;
}
.client-objectives-and-results {
background: #001e5a;
background-image: url(/images/SuccessDetailsBackground.png);
background-blend-mode: darken;
background-position: top;
}
.detail-row {
font-size: 1rem;
width: 50%;
padding-right: 20px;
padding-bottom: 60px;
}
.details-two-col-flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.detail-row li,
.detail-row p,
.detail-row li a{
color: #0056DA;
font-size: 18px;
margin-bottom: 0;
}
.detail-row span,
detail-row h4{
padding-bottom: 20px;
display: block;
font-size: 14px;
}
.feature-img-header {
color: #001E5A;
text-transform: uppercase;
font-weight: normal;
font-family: helvetica;
font-size: 56px;
line-height:1.2;
font-weight: bold;
position: relative;
margin-top: 40px;
}
@media (min-width: 46.25em){
.feature-img-header {
font-size: 60px;
margin-top: -40px;
}
.success-story-details{
padding-top: 60px;
}
}
@media (min-width: 61.25em) {
.feature-img-header {
margin-bottom: -120px;
}
}
.client-objectives-and-results h2.heading {
font-size: 50px;
margin-bottom:40px;
}
@media (min-width: 46.25em) {
.client-objectives-and-results h2.heading {
font-size: 72px;
line-height: 1.2;
}
.client-objectives-and-results h2.heading span.outline {
color: transparent !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}
}
.client-objectives-and-results h2.heading span.solid {
color: white;
display: block;
}
/* related success stories */
.successstoriespage .u-background--pale {
background-color: white;
}
.related-articles h3 {
font-size: 56px;
line-height:1.2;
text-transform: uppercase;
max-width: 500px;
margin-bottom: 100px;
}
.related-articles h3 span.small {
font-size: 20px;
display: block;
}
@media (min-width: 46.25em){
.related-articles h3{
font-size:72px;
margin-bottom:40px;
}
.related-articles h3 span.small {
font-size: 14px;
}
}
.related-articles .c-card {
width: 100%;
max-width: none;
}
.o-layout__item.article-card {
width: 50%;
}
.success-stories-3 .o-layout__item.article-card:first-child {
width: 44%;
}
.success-stories-3 .o-layout__item.article-card:nth-child(2) {
width: 22%;
}
.success-stories-3 .o-layout__item.article-card:nth-child(3) {
width: 34%;
}
.related-articles .c-card__content h3 {
color: #001E5A;
font-size: 24px;
text-transform: none;
}
.related-articles .c-card__content {
padding-top: 20px;
padding: 30px 0 0 0;
}
.related-articles p.c-card__details
{
color: #243E8C;
}
.related-articles .c-card__date {
font-size:14px;
color:#243E8c;
margin-top:10px;
display:block;
}
.related-articles .size,
.related-articles .type{
color: white !important;
background-color: #243E8C;
width: auto;
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 13px;
}
.related-articles .size {
margin-top: 20px;
}
.related-articles .type {
text-transform: uppercase;
margin-bottom: 12px;
padding: 4px 24px;
}
.related-articles .type.article-type-blog {
background-color: #0056DA;
}
.see-all-articles {
font-size: 14px;
text-transform: uppercase;
position: absolute;
top: -60px;
right: 0;
font-weight: bold;
}
@media (max-width: 46.25em) {
.see-all-articles {
left:20px;
top:-90px;
}
}
.success-cards {
position: relative;
}
.see-all-articles a img {
max-width: 30px;
margin-left: 10px;
vertical-align: middle;
}
.see-all-articles a {
color: #0056DA;
}
/* Properties List */
.properties-list .c-card__content {
background: none;
padding: 20px 0;
}
.properties-list .c-btn-yellow {
min-width: 230px;
}
.properties-list .u-h5 {
color: white;
text-decoration: none !important;
}
.properties-list .c-card__details {
color: #7E93D3;
}
.properties-list article.c-card.c-card--large {
max-width: 460px;
}
.properties-list .c-card__img-wrapper {
width: 100%;
padding-top: 100%;
background-size: cover !important;
}
.properties-container-inner {
display: block;
font-size: 0;
}
.properties-list .carousel-wrapper {
width: 70%;
position: relative;
display: inline-block;
}
.o-section:not(.o-section--full) .breakout {
z-index: 10;
position: relative;
overflow:hidden;
margin-left: -20px;
margin-right: -20px;
padding: 40px 20px;
}
.o-section.o-section--bottom .breakout {
margin-bottom: -160px;
}
.o-section:not(.o-section--full) .breakout.map-contact {
padding:0;
}
.o-section:not(.o-section--full) .u-padding-left-large .full-width {
margin-left: -40px;
width: calc(100% + 80px);
}
.o-section:not(.o-section--full) .full-width {
margin-left: -20px;
width: calc(100% + 40px);
}
@media (min-width: 46.25em){
.o-section:not(.o-section--full) .breakout {
margin-left: -40px;
padding: 0 40px;
width: calc(100% + 80px);
padding: 50px 40px 110px;
}
.o-section.o-section--top .breakout {
margin-top: -50px;
}
.o-section.o-section--bottom .breakout {
margin-bottom: -110px;
}
.o-section:not(.o-section--full) .full-width {
width: calc(100% + 80px);
margin-left: -40px;
}
.o-section:not(.o-section--full) .u-padding-left-large .full-width {
margin-left: -80px;
width: calc(100% + 160px);
}
}
@media (min-width: 61.25em) {
.o-section:not(.o-section--full) .breakout {
width: calc(100% + 180px);
margin-left: -90px;
padding: 50px 190px 110px;
}
.o-section:not(.o-section--full) .full-width {
width: calc(100% + 180px);
margin-left: -90px;
}
.o-section:not(.o-section--full) .u-padding-left-large .full-width {
margin-left: -130px;
width: calc(100% + 260px);
}
}
.properties-list {
background: #01236b;
background-image: url(/images/properties-list-background.png);
background-size: cover;
background-blend-mode: color-burn;
}
.c-section-title-wrapper + div > .breakout {
top: -40px;
}
.properties-list .see-all-properties {
vertical-align: top;
}
.properties-list .swiper-container-properties {
vertical-align: top;
position:relative;
overflow:visible;
}
.properties-list .swiper-button-prev,
.properties-list .swiper-button-next {
background-image: url('/images/arrow-white.png');
background-size: contain;
position: relative;
display: inline-block;
left: 0;
top: 0;
right: 0;
}
.properties-list .swiper-btns {
position: absolute;
right: 80px;
top: -60px;
}
.properties-list .swiper-button-prev {
transform: rotate(180deg);
top: 1px;
margin-right: 20px;
}
.properties-list .properties-container-inner {
display: block;
font-size: 0;
width:100%;
}
.properties-list h2.properties-list-header {
max-width: 360px;
text-transform: uppercase;
color: white;
font-size:56px;
margin-bottom: 40px;
}
@media (min-width: 46.25em) {
.properties-list h2.properties-list-header {
font-size: 72px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}
.properties-list h2.properties-list-header::first-line {
color: transparent;
}
}
.c-btn.c-btn-yellow {
background: #FFB600;
text-transform: uppercase;
font-weight: bold;
color: #001e5a;
font-size: 14px;
text-align:left;
}
.c-btn-yellow.c-btn--arrow:after {
content: "";
padding: 0 20px;
background: url(/images/arrow-dark.png);
background-size: contain;
background-repeat: no-repeat;
margin-left: 10px;
}
.c-btn-yellow.c-btn--arrow img {
width: auto;
max-width: 40px;
margin-left: 10px;
}
.job-details-page .share-section {
vertical-align: middle;
align-items: center;
}
.job-details-page .share-section h4 {
margin-right: 40px;
margin-bottom: 20px;
}
@media (min-width: 46.25em) {
.job-details-page .share-section {
display: flex;
}
.job-details-page .share-section h4 {
margin-bottom: 0;
}
.job-details-page h3 {
padding-right: 12px;
}
}
/* Map Contact */
.map-contact {
background-color: #001e5a;
background-repeat: no-repeat;
background-position-y: center;
background-position-x: 100%;
background-size: 130%;
}
.map-contact-details {
background: #FFB600;
margin-top:40px;
margin-bottom:40px;
}
.map-contact-details {
background: #FFB600;
margin: 40px 0;
}
.map-contact-details address {
padding-left: 30px;
position: relative;
margin-top: 20px;
font-weight:bold;
}
.map-contact-details address:before {
content: "";
padding: 10px;
position: absolute;
left: 0;
background-image: url('/images/icons/map-pin-blue2.png');
background-size: contain;
top: 5px;
}
@media (max-width: 46.25em) {
.map-contact {
background: #001e5a;
background-image: none !important;
}
.map-contact-details {
margin: 0;
}
.map-contact-details .o-box {
padding: 80px 20px;
}
}
@media (min-width:46.25em){
.properties-list .swiper-container-properties {
margin: 0 -40px;
}
.properties-list .see-all-properties {
padding-left: 40px;
}
}
@media (min-width: 61.25em) {
.properties-list .swiper-container-properties {
margin: 0 -90px;
}
.properties-list .see-all-properties {
padding-left: 90px;
}
}
@media (min-width: 767px) {
.hide-desktop{
display:none;
}
.properties-list .swiper-container-properties .carousel-wrapper {
width: 70%;
position: relative;
overflow: hidden;
left: 160px;
}
.properties-list .swiper-container-properties .carousel-wrapper .swiper-wrapper {
position: relative;
}
.properties-list .see-all-properties {
width: 30%;
display: inline-block;
}
section.o-layout.o-box.properties-list {
width: calc(100% + 180px);
margin: 0 -90px;
padding: 0;
}
}
@media (max-width: 767px){
.job-details-page .share-section {
margin-top: 40px;
}
.last-slide-spacer{
display:none;
}
.properties-list .carousel-wrapper {
width: 100%;
overflow: hidden;
margin: 40px -20px 0;
padding-bottom:20px;
}
.properties-container-inner {
margin: 0;
width: 100%;
}
.properties-list .swiper-btns {
left: 0;
bottom: 0;
top: calc(100% - 20px);
}
}
.related-articles .c-card__content {
padding: 0;
}
@media (max-width: 46.25em) {
.detail-row {
width: 100%;
padding-left: 20px;
padding-bottom: 20px;
}
.details-two-col-flex {
margin-top: 0;
}
.client-objectives-and-results .objectives,
.client-objectives-and-results .results {
padding: 0 20px;
}
.client-objectives-and-results h2 {
margin-top: 40px;
margin-bottom: 40px;
}
.o-layout__item.article-card {
width: 100% !important;
}
.related-success-stories .c-card__content {
padding: 20px 0 0;
}
}
.c-page-header-offset-background {
background: #001e5a;
color: white;
padding: 0;
background-size: cover;
display: grid;
grid-template-columns: 20px 1fr 1fr 1fr 20px;
grid-template-rows: 60px auto auto 40px auto 33px 40px;
display: grid;
}
.c-page-header-offset-background.has-image {
background-color: rgba(0,0,0,.65);
background-blend-mode: darken;
}
.c-page-header-offset-background .c-page-header__wrapper {
grid-column: 2 / span 3;
grid-row: 2 / span 2;
}
.outline-first-line::first-line {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: white;
}
.job-details-page li:before {
color: #FFB600;
content: "\2022";
position: absolute;
left: -20px;
font-size: 20px;
top: -4px;
}
.job-details-page ul {
list-style: none;
position: relative;
margin-left: 20px;
}
.job-details-page li {
position: relative;
}
.job-details-header-info > span {
color: #FFB600;
}
.job-details-header-info {
grid-row: 5;
font-size: 18px;
}
.job-details-header-info p {
color: white;
}
/* custom mobile css for job header */
@media (max-width: 46.25em) {
.c-page-header-offset-background.job-details-header {
grid-template-columns: 20px 1fr 1fr 1fr 1fr 20px;
}
.job-details-header-info.date {
grid-column: 2 / span 2;
}
.job-details-header-info.location {
grid-column: 4 / span 2;
}
.c-page-header-offset-background.job-details-header [data-area="background"] {
grid-column: span 2;
}
}
/* custom desktop css for job header */
@media (min-width: 46.25em) {
.c-page-header-offset-background.job-details-header [data-area="background"] {
grid-column: span 3;
}
.job-details-header-info.date {
grid-column: 2 / span 1;
}
.job-details-header-info.location {
grid-column: 3 / span 1;
}
}
.job-details-page .details-section {
padding-bottom: 40px;
}
.job-details-page .details-section-wide{
background: rgba(255, 255, 255, .6);
background-image: url(/images/job-details-background.png);
background-repeat: no-repeat;
background-blend-mode: lighten;
background-size: cover;
background-position: top;
}
.related-articles .c-card__content{
background:none;
}
.job-details-grid.description .col-1 {
font-size: 40px;
}
@media (min-width: 46.25em) {
.job-details-grid .col-1 {
padding-right: 80px;
}
.c-page-header-offset-background {
grid-template-columns: 110px 150px 150px auto 200px;
grid-template-rows: 80px minmax(119px, 140px) auto 60px auto 60px 60px;
}
.c-page-header-offset-background.c-page-header-wide {
grid-template-columns: 40px 150px 150px 200px auto
}
.c-page-header-offset-background.c-page-header-wide .c-page-header__wrapper {
grid-column: 2 / span 4;
margin-top: 20px;
}
.job-details-grid {
font-size: 1rem;
display: grid;
grid-template-columns: 300px auto;
color: #001e5a;
}
.job-details-page .details-section-wide .o-section {
padding-left: 110px;
padding-right: 110px;
}
}
@media (min-width: 61.25em){
.c-page-header-offset-background.c-page-header-wide {
grid-template-columns: 90px 150px 150px 200px 400px 1fr
}
.c-page-header-offset-background.job-details-header {
grid-template-columns: 110px 180px 180px auto 200px;
}
.job-details-grid {
grid-template-columns: 360px auto;
}
}
/*@media (){
.c-page-header-offset-background {
grid-template-columns: 110px 200px 200px 200px 1fr;
}
.c-page-header-offset-background.c-page-header-wide {
grid-template-columns: 110px 200px 200px 200px 400px 1fr;
}
}*/
@media (min-width: 46.25em) {
.outline-first-line {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}
.outline-first-line::first-line {
color: transparent !important;
}
}
/* property page */
/*.propertypage .carousel{
margin-bottom:80px;
}*/
.propertypage .carousel-btns,
.successstoriespage .carousel-btns {
position: absolute;
bottom: 0;
left:20px;
}
.property-type-label {
background: #FFB600;
display: inline-block;
padding: 12px 20px;
font-size: 16px;
color: #001E5A;
font-weight: bold;
text-transform:uppercase;
margin-bottom:12px;
}
.c-page-header .c-icons {
margin-bottom: 0;
margin-top: 20px;
}
.c-page-header img.c-icon {
max-width: 32px;
}
@media (min-width: 61.25em){
.propertypage .carousel-btns,
.successstoriespage .carousel-btns {
left: 70px;
}
}
@media (min-width: 90em) {
.propertypage .carousel-btns,
.successstoriespage .carousel-btns{
left: 90px;
}
}
.propertypage .carousel__button-prev,
.propertypage .carousel__button-next,
.successstoriespage .carousel__button-prev,
.successstoriespage .carousel__button-next {
position: relative;
display: inline-block;
background-color: #FFB600;
border-radius: 0;
background-image: url('/images/arrow-dark.png');
height: 40px;
width: 60px;
background-size: 44%;
padding: 10px;
background-position: center;
margin-right: -6px;
}
.propertypage .carousel__button-prev,
.successstoriespage .carousel__button-prev{
transform: rotate(180deg);
}
.property-contact h3 {
margin-bottom: 20px;
}
.property-contact .contact-header{
margin-bottom:40px;
padding-left:0;
}
.property-header .c-btn--box-back {
position: relative;
grid-row: 1;
}
@media (min-width: 46.25em) {
.property-header + .o-section, .property-header + .o-section + .o-section {
width: 49.5%;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
}
}
/* jobs */
.heading-big {
margin-bottom: 40px;
max-width: 600px;
padding-bottom: 40px;
}
/* News Detail */
.c-page-header .c-btn--box-back {
grid-column: 2;
grid-row: 2;
left: 0;
font-size:14px;
}
@media (min-width: 61.25em) {
.c-page-header .c-btn--box-back {
top: 0;
position: relative;
margin-bottom: 20px;
}
}
.offset-top .c-page-header__wrapper {
grid-row: 3;
}
.c-page-header-offset-background.c-page-header-wide.offset-top {
grid-template-rows: 60px 60px auto 60px auto;
}
.c-page-header-offset-background.c-page-header-wide.offset-top.dynamic-background {
grid-template-rows: 60px 60px auto 48px;
}
/* news */
.c-article-sidebar .at-share-btn-elements {
margin-left: -12px;
text-align: center;
margin-top: 8px;
}
.c-article img {
height: auto !important;
}
.c-brief {
border-bottom: 1px solid #D2D4DA;
padding-bottom: 8px;
margin-bottom: 4px;
}
.a2a_kit {
display: flex;
justify-content: center;
margin-top: 12px;
}
.a2a_kit a {
margin: 0 1rem 1.6875rem 0;
}
.a2a_svg svg {
width: 26px !important;
}
/* dev fixes */
.c-page-header h1 {
color: white;
}
/* People search */
.form-header [data-area="background"] {
display: none;
}
.search-options {
margin: 0 -20px;
width: calc(100% + 40px);
position: relative;
padding-top: 60px;
padding-bottom: 80px;
z-index:101;
}
.search-page-descipription {
width: 100%;
display: inline-block;
font-size: 16px;
vertical-align: top;
}
.search-options #clear-all-btn {
font-size: 14px;
float:right;
}
@media (max-width: 46.25em){
.search-header {
display: flex;
flex-direction: column;
}
.search-page-descipription {
order: 2;
}
.search-options {
order: 1;
}
}
@media (min-width: 46.25em){
.search-options {
width: 75%;
top: -140px;
margin-bottom: -100px !important;
position: relative;
z-index: 99;
border: 16px solid white;
padding-top: 100px;
display: inline-block;
}
.search-page-descipription {
width: 25%;
display: inline-block;
padding: 40px 40px 0 0;
font-size: 16px;
}
.search-options #clear-all-btn {
float: none;
}
}
form label {
opacity: 0;
position: absolute;
left: 10px;
font-size: 12px;
transition: opacity .3s, font-size .2s, top .2s;
}
form .form-select label {
display: block;
position: absolute;
font-weight: normal;
top: 28px;
font-size: 16px;
pointer-events: none;
opacity: 1;
}
form .active label {
display: block;
top: 0;
opacity: 1;
font-size:12px;
}
.c-article-sidebar label {
top: -16px !important;
left: 0;
}
.form-select,
form .o-layout__item,
form div{
position: relative;
}
@media (max-width: 46.25em) {
ol.pagination li:first-child, ol.pagination li:last-child,
.pagination--current-page-indicator {
display: none !important;
}
.c-pagination-container #c-pagination {
width: 100%;
}
}
.contact-us-form .search-options {
padding-top: 60px;
}
.contact-us-form .c-field {
margin-bottom: 8px;
}
.contact-us-form input[type="submit"] {
margin-top: 40px;
}
input[type="submit"].disabled {
pointer-events: none;
opacity: .4;
}
.employee-spotlight-title {
padding: 2px 4px;
font-weight: bold;
font-size: 16px;
margin-bottom: 8px;
display: inline-block;
}
.employee-spotlight-role {
font-size: 20px;
margin-bottom: 8px;
}
.employee-spotlight-img {
margin: 20px 0;
}
@media (min-width: 46.25em){
.vertical-center-tablet {
display: flex;
align-items: center;
}
}
/* fix form in article sidebar */
.c-article-sidebar .c-field,
.c-article-sidebar .c-field::placeholder ,
.c-article-sidebar label {
color: #001e5a !important;
}
.c-article-sidebar .c-field {
border-bottom: 1px solid #eee;
}
.c-article-sidebar .c-field:focus {
border-bottom: 1px solid #0056da;
}
.c-article-sidebar .c-field:focus,
.c-article-sidebar .c-field:focus::placeholder {
background: none;
color: #0056da !important;
}
@media (min-width: 46.25em){
.mobile {
display: none !important;
}
}
@media (max-width: 46.25em) {
.desktop {
display: none !important;
}
}
@media (min-width: 61.25em) {
.tablet {
display: none !important;
}
}
@media (max-width: 61.25em) {
.desktop-tablet {
display: none;
}
}
.outline-white{
}
.c-page-header-offset-background.home-hero {
grid-template-rows: 80px minmax(119px, 140px) auto 60px auto 40px 60px;
grid-template-columns: 20px 150px 150px 200px 1fr 60px 60px;
}
@media (min-width: 46.25em){
.c-page-header-offset-background.home-hero {
grid-template-rows: 80px minmax(119px, 140px) auto 60px auto 40px 60px;
grid-template-columns: 40px 150px 150px 200px 1fr 60px 60px;
}
}
@media (min-width: 61.25em) {
.c-page-header-offset-background.home-hero {
grid-template-rows: 80px minmax(119px, 140px) auto 60px auto 40px 60px;
grid-template-columns: 90px 150px 150px 200px 1fr 60px 60px;
}
}
.home-hero .subtitle {
grid-column: span 4;
grid-row: 6;
height: 100%;
background: #FFB600;
color: #001e5a;
text-transform: uppercase;
font-weight: bold;
padding-left: 20px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
display: inline-flex;
position:relative;
z-index:9;
}
@media (min-width: 46.25em){
.home-hero .subtitle{
padding-left: 40px;
}
}
@media (min-width: 61.25em) {
.home-hero .subtitle {
padding-left: 90px;
}
}
.home-hero .subtitle span {
display: inline-flex;
align-items: center;
}
.background-video.vimeo {
width: 100%;
height: 100%;
grid-row: 1 / -1;
grid-column: 1 / -1;
position: absolute;
z-index: -1;
}
.video-overlay {
grid-column: 1 / -1;
grid-row: 1 / -1;
width: 100%;
height: 100%;
position: absolute;
background: rgba(0,0,0,.5);
z-index: -1;
}
@media (max-width: 46.25em){
.home-hero .subtitle {
padding-left: 20px;
padding-top: 12px;
padding-bottom: 12px;
padding-right: 12px;
}
.c-page-header-offset-background.home-hero {
grid-template-rows: 80px minmax(119px, 140px) auto 60px auto auto 60px;
grid-template-columns: 20px 1fr 1fr 1fr 1fr 20px;
}
.c-page-header-offset-background.home-hero .c-page-header__wrapper {
grid-column: 2/ span 4;
}
}
.background-video.vimeo {
width: 100%;
height: 100%;
grid-row: 1 / -1;
grid-column: 1 / -1;
position: absolute;
z-index: -1;
padding-top:60%;
}
.background-video iframe {
position: absolute;
top: 0;
}
.home-hero.c-page-header.c-page-header--middle.o-section.c-page-header-offset-background.c-page-header-wide.has-image {
position: relative;
overflow: hidden;
}
.home-hero .c-page-header__wrapper{
overflow:hidden;
}
.hero-slide.swiper-slide:not(.swiper-slide-active) {
opacity: 0 !important;
}
.video-pause {
grid-column: -3;
grid-row: -3;
position: relative;
z-index: 9;
}
.video-pause-btn:focus {
outline-color: white !important;
}
.video-pause-btn:not(.paused) .play-btn{
display:none;
}
.video-pause-btn.paused .pause-btn {
display: none;
}
@media (max-width: 1028px){
.background-video.vimeo,
.video-overlay,
.video-pause:not(.slide-pause) {
display:none;
}
.video-pause.slide-pause {
max-width: 40px;
margin-left: 40px;
}
}
/* rich text styles */
@media (min-width: 61.25em) {
.white-outline {
color: transparent !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}
.gold-outline {
color: transparent !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FFB600;
}
.xs-text {
font-size: 92px;
}
.small-text{
font-size: 136px;
}
.medium-text{
font-size: 170px;
}
.large-text {
font-size:209px;
}
/* rich text editor styles */
.white-outline-92px {
color: transparent !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
font-size: 92px;
}
.white-outline-136px {
color: transparent !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
font-size: 136px;
}
.white-outline-170px {
color: transparent !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
font-size: 170px;
}
.white-outline-209px {
color: transparent !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
font-size: 209px;
}
.gold-outline-92px {
color: transparent !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FFB600;
font-size: 92px;
}
.gold-outline-136px {
color: transparent !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FFB600;
font-size: 136px;
}
.gold-outline-170px {
color: transparent !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FFB600;
font-size: 170px;
}
.gold-outline-209px {
color: transparent !important;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FFB600;
font-size: 209px;
}
}
/* property search */
@media (min-width: 46.25em) {
.search-options.js-search-options {
margin-left: 20%;
}
}
.js-search-field {
display: inline-block;
margin-bottom: 20px;
}
.js-search-options .o-form-element > div > div {
background-color: transparent;
border: none;
border-bottom: 1px solid white;
border-radius: 0;
color: white;
}
.js-search-options .o-form-element > div > div div {
font-size: initial;
font-weight: normal;
}
.js-search-options .o-form-element > div > div span {
display: none;
}
.js-search-options .o-form-element > div > div div[role=option],
.js-search-options .o-form-element div[role="option"] {
background-color: white;
color: #001e5a;
}
.js-search-options .o-form-element > div > div div[role=option]:hover,
.js-search-options .o-form-element div[role="option"]:hover {
background-color: #0056da;
color: white;
}
@media (max-width: 46.25em){
.search-options.js-search-options {
width: 100%;
margin: 0;
}
.search-options.js-search-options .form-group {
margin-left: 0;
}
.search-options.js-search-options .o-form-element {
width: 100% !important;
}
}
.max-width{
max-width: 1440px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 1440px){
}
.property-explorer-container {
max-width: 1620px;
margin: 0 auto;
}
.negate-padding{
margin-left: -20px;
margin-right: -20px;
}
.one-col .two-col.o-section {
padding-left: 0;
padding-right: 0;
}
.property-explorer-container .o-form-element div:hover,
.property-explorer-container .o-form-element div:focus,
.property-explorer-container .o-form-element div:hover div:not(.dropdown-indicator),
.property-explorer-container .o-form-element div:focus div:not(.dropdown-indicator) {
background: white;
color: #001e5a;
}
.property-explorer-container #clear-all-btn {
cursor: pointer;
}
.clear-indicator {
color: red !important;
}
.clear-indicator:hover,
.clear-indicator:focus {
background: #FFBDAD !important;
border-radius: 4px;
}
@media (max-width: 767px) {
#jobs li p {
width: 30%;
text-align: right
}
#jobs li .job-title {
width: 70%;
padding-right: 20px;
}
#jobs {
margin-left: 0;
}
}