/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Global styles
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0;
font-size: 100%;
font: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* HTML5 tag updates
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
audio, canvas, video {
display: inline-block;
*display: inline;
zoom: 1;
}
audio:not([controls]) {
display: none;
}
[hidden] {
display: none;
}
/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@font-face {
font-family: "96 Sans";
font-display: swap;
font-weight: 300;
src: url("/content/fonts/96sans/96Sans-Light.woff2") format("woff2"), url("/content/fonts/96sans/96Sans-Light.woff") format("woff");
}
@font-face {
font-family: "96 Sans Icons";
src: url("/content/fonts/96sans/96Sans.woff2") format("woff2"), url("/content/fonts/96sans/96Sans.woff") format("woff");
}
@font-face {
font-family: "96 Sans";
font-display: swap;
font-weight: 400;
src: url("/content/fonts/96sans/96Sans.woff2") format("woff2"), url("/content/fonts/96sans/96Sans.woff") format("woff");
}
@font-face {
font-family: "96 Sans";
font-display: swap;
font-weight: 600;
src: url("/content/fonts/96sans/96Sans-Medium.woff2") format("woff2"), url("/content/fonts/96sans/96Sans-Medium.woff") format("woff");
}
@font-face {
font-family: "96 Sans";
font-display: swap;
font-weight: 700;
src: url("/content/fonts/96sans/96Sans-Bold.woff2") format("woff2"), url("/content/fonts/96sans/96Sans-Bold.woff") format("woff");
}
@font-face {
font-family: "96 Sans Condensed";
font-display: swap;
font-weight: 700;
src: url("/content/fonts/96sans/96Sans-BoldCondensed.woff2") format("woff2"), url("/content/fonts/96sans/96Sans-BoldCondensed.woff") format("woff");
}
@font-face {
font-family: "96 Sans Monospaced";
font-display: swap;
font-weight: 400;
src: url("/content/fonts/96sans/96Sans-Monospaced.woff2") format("woff2"), url("/content/fonts/96sans/96Sans-Monospaced.woff") format("woff");
}
/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Global Styles
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
html {
font-size: 62.5%;
height: 100%;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html.no-smooth-scroll {
scroll-behavior: auto;
}
body {
box-sizing: border-box;
font-family: "96 Sans", Arial, sans-serif;
min-height: 100%;
line-height: 1.75;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/*&.no-scroll {
overflow: hidden;
}*/
}
body.header-only #main {
padding-bottom: 8em;
}
#site {
box-shadow: 0 0 40px 10px rgba(204, 204, 204, 0.4);
margin-left: auto;
margin-right: auto;
max-width: 1700px;
position: relative;
z-index: 99;
}
img {
max-width: 100%;
}
picture {
display: block;
}
a,
button {
outline: 0;
}
hr {
background: #d1e2e5;
border: none;
height: 1px;
width: 100%;
}
.bb {
transition: opacity 0.3s ease-in-out;
background: #f3f9fc;
left: 0;
right: 0;
pointer-events: none;
position: absolute;
z-index: -2;
}
/* Misc
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.button .spinner {
display: none;
}
.shadow-box {
background: #fff;
border: 1px solid #d1e2e5;
border-radius: 5px;
box-shadow: 0 4px 0px 0px rgba(209, 226, 229, 0.35);
box-sizing: border-box;
}
.shadow-box-animation {
transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.no-touch .shadow-box-animation:focus, .no-touch .shadow-box-animation:hover {
background-color: #f3f9fc;
box-shadow: none;
}
body:not(.disable-focus-state) #site .shadow-box-animation:focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed #0077B3;
outline-offset: -3px;
}
*::-ms-clear {
display: none;
}
.notransitions * {
transition: none !important;
}
::selection {
background: #0077B3;
color: white;
}
::-moz-selection {
background: #0077B3;
color: white;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
@keyframes side-bounce {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(8px);
}
}
@keyframes side-bounce-reduced {
0% {
transform: translateX(0);
}
100% {
transform: translateX(8px);
}
}
@keyframes side-bounce-centered {
0%, 100% {
transform: translate(0, -50%);
}
50% {
transform: translate(0.5em, -50%);
}
}
@keyframes top-bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px) translateZ(0);
}
}
.scroll-arrow-area {
display: none;
opacity: 0;
width: 15px;
}
.scroll-arrow-area svg {
display: block;
height: 100%;
width: 100%;
}
.scroll-arrow-area .scroll-arrow-icon .dot {
-webkit-animation: arrow-dot-animation 1.4s 2 forwards;
-moz-animation: arrow-dot-animation 1.4s 2 forwards;
-o-animation: arrow-dot-animation 1.4s 2 forwards;
animation: arrow-dot-animation 1.4s 2 forwards;
opacity: 0;
}
.scroll-arrow-area .scroll-arrow-icon .dot:nth-child(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.scroll-arrow-area .scroll-arrow-icon .dot:nth-child(3) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@media only screen and (max-width: 750px) {
body[data-device=mobile] .qs-overlay.show-product:not(.show-quote) .scroll-arrow-area.active,
body[data-device=mobile] .header-flyout.show .scroll-arrow-area.active {
display: block;
opacity: 1;
}
}
@keyframes arrow-dot-animation {
0% {
opacity: 1;
}
80% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
.qs-overlay {
display: none;
}
body[data-device=desktop] .mobile-view {
display: none !important;
}
body[data-device=mobile] .desktop-view {
display: none !important;
}
/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
box-sizing: border-box;
margin-right: -8px;
margin-left: -8px;
}
.grid .inner {
box-sizing: border-box;
}
.grid .collapse-left {
padding-left: 0;
}
.grid .collapse-right {
padding-right: 0;
}
.grid .grid-element {
padding-bottom: 0;
}
[class*=grid-] {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
box-sizing: border-box;
-webkit-box-flex: 0;
padding-bottom: 16px;
padding-left: 8px;
padding-right: 8px;
}
[class*=grid-]:empty {
padding-bottom: 0;
padding-top: 0;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.grid-l1 {
-ms-flex: 0 0 8.3333333333%;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.grid-l1.pl .inner {
padding-left: calc(100% + 16px);
}
.grid-l1.pr .inner {
padding-right: calc(100% + 16px);
}
.l-l0 {
margin-left: 0%;
}
.r-l0 {
margin-right: 0%;
}
.grid-l2 {
-ms-flex: 0 0 16.6666666667%;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.grid-l2.pl .inner {
padding-left: calc(50% + 8px);
}
.grid-l2.pr .inner {
padding-right: calc(50% + 8px);
}
.l-l1 {
margin-left: 8.3333333333%;
}
.r-l1 {
margin-right: 8.3333333333%;
}
.grid-l3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.grid-l3.pl .inner {
padding-left: calc(33.3333333333% + 5.3333333333px);
}
.grid-l3.pr .inner {
padding-right: calc(33.3333333333% + 5.3333333333px);
}
.l-l2 {
margin-left: 16.6666666667%;
}
.r-l2 {
margin-right: 16.6666666667%;
}
.grid-l4 {
-ms-flex: 0 0 33.3333333333%;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.grid-l4.pl .inner {
padding-left: calc(25% + 4px);
}
.grid-l4.pr .inner {
padding-right: calc(25% + 4px);
}
.l-l3 {
margin-left: 25%;
}
.r-l3 {
margin-right: 25%;
}
.grid-l5 {
-ms-flex: 0 0 41.6666666667%;
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.grid-l5.pl .inner {
padding-left: calc(20% + 3.2px);
}
.grid-l5.pr .inner {
padding-right: calc(20% + 3.2px);
}
.l-l4 {
margin-left: 33.3333333333%;
}
.r-l4 {
margin-right: 33.3333333333%;
}
.grid-l6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.grid-l6.pl .inner {
padding-left: calc(16.6666666667% + 2.6666666667px);
}
.grid-l6.pr .inner {
padding-right: calc(16.6666666667% + 2.6666666667px);
}
.l-l5 {
margin-left: 41.6666666667%;
}
.r-l5 {
margin-right: 41.6666666667%;
}
.grid-l7 {
-ms-flex: 0 0 58.3333333333%;
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.grid-l7.pl .inner {
padding-left: calc(14.2857142857% + 2.2857142857px);
}
.grid-l7.pr .inner {
padding-right: calc(14.2857142857% + 2.2857142857px);
}
.l-l6 {
margin-left: 50%;
}
.r-l6 {
margin-right: 50%;
}
.grid-l8 {
-ms-flex: 0 0 66.6666666667%;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.grid-l8.pl .inner {
padding-left: calc(12.5% + 2px);
}
.grid-l8.pr .inner {
padding-right: calc(12.5% + 2px);
}
.l-l7 {
margin-left: 58.3333333333%;
}
.r-l7 {
margin-right: 58.3333333333%;
}
.grid-l9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.grid-l9.pl .inner {
padding-left: calc(11.1111111111% + 1.7777777778px);
}
.grid-l9.pr .inner {
padding-right: calc(11.1111111111% + 1.7777777778px);
}
.l-l8 {
margin-left: 66.6666666667%;
}
.r-l8 {
margin-right: 66.6666666667%;
}
.grid-l10 {
-ms-flex: 0 0 83.3333333333%;
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.grid-l10.pl .inner {
padding-left: calc(10% + 1.6px);
}
.grid-l10.pr .inner {
padding-right: calc(10% + 1.6px);
}
.l-l9 {
margin-left: 75%;
}
.r-l9 {
margin-right: 75%;
}
.grid-l11 {
-ms-flex: 0 0 91.6666666667%;
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.grid-l11.pl .inner {
padding-left: calc(9.0909090909% + 1.4545454545px);
}
.grid-l11.pr .inner {
padding-right: calc(9.0909090909% + 1.4545454545px);
}
.l-l10 {
margin-left: 83.3333333333%;
}
.r-l10 {
margin-right: 83.3333333333%;
}
.grid-l12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.grid-l12.pl .inner {
padding-left: calc(8.3333333333% + 1.3333333333px);
}
.grid-l12.pr .inner {
padding-right: calc(8.3333333333% + 1.3333333333px);
}
.l-l11 {
margin-left: 91.6666666667%;
}
.r-l11 {
margin-right: 91.6666666667%;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 970px) {
[class*=grid-] {
padding-bottom: 14px;
padding-left: 7px;
padding-right: 7px;
}
.grid-m1 {
-ms-flex: 0 0 8.3333333333%;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.grid-m1.pl .inner {
padding-left: calc(100% + 14px);
}
.grid-m1.pr .inner {
padding-right: calc(100% + 14px);
}
.l-m0 {
margin-left: 0%;
}
.r-m0 {
margin-right: 0%;
}
.grid-m2 {
-ms-flex: 0 0 16.6666666667%;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.grid-m2.pl .inner {
padding-left: calc(50% + 7px);
}
.grid-m2.pr .inner {
padding-right: calc(50% + 7px);
}
.l-m1 {
margin-left: 8.3333333333%;
}
.r-m1 {
margin-right: 8.3333333333%;
}
.grid-m3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.grid-m3.pl .inner {
padding-left: calc(33.3333333333% + 4.6666666667px);
}
.grid-m3.pr .inner {
padding-right: calc(33.3333333333% + 4.6666666667px);
}
.l-m2 {
margin-left: 16.6666666667%;
}
.r-m2 {
margin-right: 16.6666666667%;
}
.grid-m4 {
-ms-flex: 0 0 33.3333333333%;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.grid-m4.pl .inner {
padding-left: calc(25% + 3.5px);
}
.grid-m4.pr .inner {
padding-right: calc(25% + 3.5px);
}
.l-m3 {
margin-left: 25%;
}
.r-m3 {
margin-right: 25%;
}
.grid-m5 {
-ms-flex: 0 0 41.6666666667%;
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.grid-m5.pl .inner {
padding-left: calc(20% + 2.8px);
}
.grid-m5.pr .inner {
padding-right: calc(20% + 2.8px);
}
.l-m4 {
margin-left: 33.3333333333%;
}
.r-m4 {
margin-right: 33.3333333333%;
}
.grid-m6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.grid-m6.pl .inner {
padding-left: calc(16.6666666667% + 2.3333333333px);
}
.grid-m6.pr .inner {
padding-right: calc(16.6666666667% + 2.3333333333px);
}
.l-m5 {
margin-left: 41.6666666667%;
}
.r-m5 {
margin-right: 41.6666666667%;
}
.grid-m7 {
-ms-flex: 0 0 58.3333333333%;
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.grid-m7.pl .inner {
padding-left: calc(14.2857142857% + 2px);
}
.grid-m7.pr .inner {
padding-right: calc(14.2857142857% + 2px);
}
.l-m6 {
margin-left: 50%;
}
.r-m6 {
margin-right: 50%;
}
.grid-m8 {
-ms-flex: 0 0 66.6666666667%;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.grid-m8.pl .inner {
padding-left: calc(12.5% + 1.75px);
}
.grid-m8.pr .inner {
padding-right: calc(12.5% + 1.75px);
}
.l-m7 {
margin-left: 58.3333333333%;
}
.r-m7 {
margin-right: 58.3333333333%;
}
.grid-m9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.grid-m9.pl .inner {
padding-left: calc(11.1111111111% + 1.5555555556px);
}
.grid-m9.pr .inner {
padding-right: calc(11.1111111111% + 1.5555555556px);
}
.l-m8 {
margin-left: 66.6666666667%;
}
.r-m8 {
margin-right: 66.6666666667%;
}
.grid-m10 {
-ms-flex: 0 0 83.3333333333%;
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.grid-m10.pl .inner {
padding-left: calc(10% + 1.4px);
}
.grid-m10.pr .inner {
padding-right: calc(10% + 1.4px);
}
.l-m9 {
margin-left: 75%;
}
.r-m9 {
margin-right: 75%;
}
.grid-m11 {
-ms-flex: 0 0 91.6666666667%;
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.grid-m11.pl .inner {
padding-left: calc(9.0909090909% + 1.2727272727px);
}
.grid-m11.pr .inner {
padding-right: calc(9.0909090909% + 1.2727272727px);
}
.l-m10 {
margin-left: 83.3333333333%;
}
.r-m10 {
margin-right: 83.3333333333%;
}
.grid-m12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.grid-m12.pl .inner {
padding-left: calc(8.3333333333% + 1.1666666667px);
}
.grid-m12.pr .inner {
padding-right: calc(8.3333333333% + 1.1666666667px);
}
.l-m11 {
margin-left: 91.6666666667%;
}
.r-m11 {
margin-right: 91.6666666667%;
}
.grid {
margin-right: -7px;
margin-left: -7px;
}
.grid .pl-m-reset .inner {
padding-left: 0;
}
.grid .pr-m-reset .inner {
padding-right: 0;
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 780px) {
[class*=grid-] {
padding-bottom: 12px;
padding-left: 6px;
padding-right: 6px;
}
.grid-s1 {
-ms-flex: 0 0 8.3333333333%;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.grid-s1.pl .inner {
padding-left: calc(100% + 12px);
}
.grid-s1.pr .inner {
padding-right: calc(100% + 12px);
}
.l-s0 {
margin-left: 0%;
}
.r-s0 {
margin-right: 0%;
}
.grid-s2 {
-ms-flex: 0 0 16.6666666667%;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.grid-s2.pl .inner {
padding-left: calc(50% + 6px);
}
.grid-s2.pr .inner {
padding-right: calc(50% + 6px);
}
.l-s1 {
margin-left: 8.3333333333%;
}
.r-s1 {
margin-right: 8.3333333333%;
}
.grid-s3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.grid-s3.pl .inner {
padding-left: calc(33.3333333333% + 4px);
}
.grid-s3.pr .inner {
padding-right: calc(33.3333333333% + 4px);
}
.l-s2 {
margin-left: 16.6666666667%;
}
.r-s2 {
margin-right: 16.6666666667%;
}
.grid-s4 {
-ms-flex: 0 0 33.3333333333%;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.grid-s4.pl .inner {
padding-left: calc(25% + 3px);
}
.grid-s4.pr .inner {
padding-right: calc(25% + 3px);
}
.l-s3 {
margin-left: 25%;
}
.r-s3 {
margin-right: 25%;
}
.grid-s5 {
-ms-flex: 0 0 41.6666666667%;
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.grid-s5.pl .inner {
padding-left: calc(20% + 2.4px);
}
.grid-s5.pr .inner {
padding-right: calc(20% + 2.4px);
}
.l-s4 {
margin-left: 33.3333333333%;
}
.r-s4 {
margin-right: 33.3333333333%;
}
.grid-s6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.grid-s6.pl .inner {
padding-left: calc(16.6666666667% + 2px);
}
.grid-s6.pr .inner {
padding-right: calc(16.6666666667% + 2px);
}
.l-s5 {
margin-left: 41.6666666667%;
}
.r-s5 {
margin-right: 41.6666666667%;
}
.grid-s7 {
-ms-flex: 0 0 58.3333333333%;
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.grid-s7.pl .inner {
padding-left: calc(14.2857142857% + 1.7142857143px);
}
.grid-s7.pr .inner {
padding-right: calc(14.2857142857% + 1.7142857143px);
}
.l-s6 {
margin-left: 50%;
}
.r-s6 {
margin-right: 50%;
}
.grid-s8 {
-ms-flex: 0 0 66.6666666667%;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.grid-s8.pl .inner {
padding-left: calc(12.5% + 1.5px);
}
.grid-s8.pr .inner {
padding-right: calc(12.5% + 1.5px);
}
.l-s7 {
margin-left: 58.3333333333%;
}
.r-s7 {
margin-right: 58.3333333333%;
}
.grid-s9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.grid-s9.pl .inner {
padding-left: calc(11.1111111111% + 1.3333333333px);
}
.grid-s9.pr .inner {
padding-right: calc(11.1111111111% + 1.3333333333px);
}
.l-s8 {
margin-left: 66.6666666667%;
}
.r-s8 {
margin-right: 66.6666666667%;
}
.grid-s10 {
-ms-flex: 0 0 83.3333333333%;
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.grid-s10.pl .inner {
padding-left: calc(10% + 1.2px);
}
.grid-s10.pr .inner {
padding-right: calc(10% + 1.2px);
}
.l-s9 {
margin-left: 75%;
}
.r-s9 {
margin-right: 75%;
}
.grid-s11 {
-ms-flex: 0 0 91.6666666667%;
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.grid-s11.pl .inner {
padding-left: calc(9.0909090909% + 1.0909090909px);
}
.grid-s11.pr .inner {
padding-right: calc(9.0909090909% + 1.0909090909px);
}
.l-s10 {
margin-left: 83.3333333333%;
}
.r-s10 {
margin-right: 83.3333333333%;
}
.grid-s12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.grid-s12.pl .inner {
padding-left: calc(8.3333333333% + 1px);
}
.grid-s12.pr .inner {
padding-right: calc(8.3333333333% + 1px);
}
.l-s11 {
margin-left: 91.6666666667%;
}
.r-s11 {
margin-right: 91.6666666667%;
}
.grid {
margin-right: -6px;
margin-left: -6px;
}
.grid .pl-s-reset .inner {
padding-left: 0;
}
.grid .pr-s-reset .inner {
padding-right: 0;
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 670px) {
[class*=grid-] {
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}
.grid-t1 {
-ms-flex: 0 0 8.3333333333%;
flex: 0 0 8.3333333333%;
max-width: 8.3333333333%;
}
.grid-t1.pl .inner {
padding-left: calc(100% + 10px);
}
.grid-t1.pr .inner {
padding-right: calc(100% + 10px);
}
.l-t0 {
margin-left: 0%;
}
.r-t0 {
margin-right: 0%;
}
.grid-t2 {
-ms-flex: 0 0 16.6666666667%;
flex: 0 0 16.6666666667%;
max-width: 16.6666666667%;
}
.grid-t2.pl .inner {
padding-left: calc(50% + 5px);
}
.grid-t2.pr .inner {
padding-right: calc(50% + 5px);
}
.l-t1 {
margin-left: 8.3333333333%;
}
.r-t1 {
margin-right: 8.3333333333%;
}
.grid-t3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.grid-t3.pl .inner {
padding-left: calc(33.3333333333% + 3.3333333333px);
}
.grid-t3.pr .inner {
padding-right: calc(33.3333333333% + 3.3333333333px);
}
.l-t2 {
margin-left: 16.6666666667%;
}
.r-t2 {
margin-right: 16.6666666667%;
}
.grid-t4 {
-ms-flex: 0 0 33.3333333333%;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.grid-t4.pl .inner {
padding-left: calc(25% + 2.5px);
}
.grid-t4.pr .inner {
padding-right: calc(25% + 2.5px);
}
.l-t3 {
margin-left: 25%;
}
.r-t3 {
margin-right: 25%;
}
.grid-t5 {
-ms-flex: 0 0 41.6666666667%;
flex: 0 0 41.6666666667%;
max-width: 41.6666666667%;
}
.grid-t5.pl .inner {
padding-left: calc(20% + 2px);
}
.grid-t5.pr .inner {
padding-right: calc(20% + 2px);
}
.l-t4 {
margin-left: 33.3333333333%;
}
.r-t4 {
margin-right: 33.3333333333%;
}
.grid-t6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.grid-t6.pl .inner {
padding-left: calc(16.6666666667% + 1.6666666667px);
}
.grid-t6.pr .inner {
padding-right: calc(16.6666666667% + 1.6666666667px);
}
.l-t5 {
margin-left: 41.6666666667%;
}
.r-t5 {
margin-right: 41.6666666667%;
}
.grid-t7 {
-ms-flex: 0 0 58.3333333333%;
flex: 0 0 58.3333333333%;
max-width: 58.3333333333%;
}
.grid-t7.pl .inner {
padding-left: calc(14.2857142857% + 1.4285714286px);
}
.grid-t7.pr .inner {
padding-right: calc(14.2857142857% + 1.4285714286px);
}
.l-t6 {
margin-left: 50%;
}
.r-t6 {
margin-right: 50%;
}
.grid-t8 {
-ms-flex: 0 0 66.6666666667%;
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%;
}
.grid-t8.pl .inner {
padding-left: calc(12.5% + 1.25px);
}
.grid-t8.pr .inner {
padding-right: calc(12.5% + 1.25px);
}
.l-t7 {
margin-left: 58.3333333333%;
}
.r-t7 {
margin-right: 58.3333333333%;
}
.grid-t9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.grid-t9.pl .inner {
padding-left: calc(11.1111111111% + 1.1111111111px);
}
.grid-t9.pr .inner {
padding-right: calc(11.1111111111% + 1.1111111111px);
}
.l-t8 {
margin-left: 66.6666666667%;
}
.r-t8 {
margin-right: 66.6666666667%;
}
.grid-t10 {
-ms-flex: 0 0 83.3333333333%;
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%;
}
.grid-t10.pl .inner {
padding-left: calc(10% + 1px);
}
.grid-t10.pr .inner {
padding-right: calc(10% + 1px);
}
.l-t9 {
margin-left: 75%;
}
.r-t9 {
margin-right: 75%;
}
.grid-t11 {
-ms-flex: 0 0 91.6666666667%;
flex: 0 0 91.6666666667%;
max-width: 91.6666666667%;
}
.grid-t11.pl .inner {
padding-left: calc(9.0909090909% + 0.9090909091px);
}
.grid-t11.pr .inner {
padding-right: calc(9.0909090909% + 0.9090909091px);
}
.l-t10 {
margin-left: 83.3333333333%;
}
.r-t10 {
margin-right: 83.3333333333%;
}
.grid-t12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.grid-t12.pl .inner {
padding-left: calc(8.3333333333% + 0.8333333333px);
}
.grid-t12.pr .inner {
padding-right: calc(8.3333333333% + 0.8333333333px);
}
.l-t11 {
margin-left: 91.6666666667%;
}
.r-t11 {
margin-right: 91.6666666667%;
}
.grid {
margin-right: -5px;
margin-left: -5px;
}
.grid .pl-t-reset .inner {
padding-left: 0;
}
.grid .pr-t-reset .inner {
padding-right: 0;
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#lockedgrid {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
pointer-events: none;
z-index: 100;
}
#lockedgrid .wrap {
height: 100%;
}
#lockedgrid .grid {
height: 100%;
margin-top: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
#lockedgrid .grid [class*=grid-] {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#lockedgrid .grid .inner {
background: rgba(112, 112, 112, 0.1) !important;
height: 100%;
}
/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.content,
.wrap,
.wide-wrap {
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
padding-left: 75px;
padding-right: 75px;
}
.x-wide-wrap {
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
}
.content {
--max-width: 1058.3333333333px;
max-width: var(--max-width);
padding-left: 64px;
padding-right: 64px;
width: 83.3333333333%;
}
#site .content.standard-links a, #site .content .standard-links a {
background: none;
border: none;
text-decoration: underline;
}
#site .content.standard-links a:hover, #site .content .standard-links a:hover {
color: #0077B3;
text-decoration: none;
}
.content.is-homepage {
width: auto;
}
.content:not(.is-homepage) a:not(.learn-link):not(.block-link):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.disclosure-anchor):not(.tooltip-close):not(.list-link):not(.app-link):not(.event-link) {
transition: border 0.2s ease-in, background-size 0.2s ease-in;
background: linear-gradient(120deg, rgba(0, 119, 179, 0.1) 0%, rgba(0, 119, 179, 0.1) 100%) no-repeat;
background-position: 0 100%;
background-size: 100% 0;
border-bottom: 1px solid #0077B3;
color: #0077B3;
padding-bottom: 0.1em;
text-decoration: none;
}
.content:not(.is-homepage) a:not(.learn-link):not(.block-link):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.disclosure-anchor):not(.tooltip-close):not(.list-link):not(.app-link):not(.event-link):hover, .content:not(.is-homepage) a:not(.learn-link):not(.block-link):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.disclosure-anchor):not(.tooltip-close):not(.list-link):not(.app-link):not(.event-link):focus {
background-size: 100% 100%;
border-bottom: 0 solid rgba(0, 119, 179, 0.1);
color: #2d2d2d;
}
body:not(.disable-focus-state) #site .content:not(.is-homepage) a:not(.learn-link):not(.block-link):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.disclosure-anchor):not(.tooltip-close):not(.list-link):not(.app-link):not(.event-link):focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed #0077B3;
outline-offset: -3px;
}
body:not(.disable-focus-state) #site .content:not(.is-homepage):focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed #0077B3;
outline-offset: -3px;
}
#main > .content:first-child {
margin-top: 5rem;
}
.wrap {
max-width: 1270px;
}
.wide-wrap {
max-width: 1500px;
}
.x-wide-wrap {
max-width: 128rem;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (min-width: 780px) {
.content.is-homepage {
max-width: none;
padding-left: 0;
}
.x-wide-wrap {
padding-left: 50px;
padding-right: 50px;
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 970px) {
.content,
.wrap,
.wide-wrap {
padding-left: 50px;
padding-right: 50px;
}
.content {
max-width: 100%;
width: 100%;
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 780px) {
.content,
.wrap,
.wide-wrap {
padding-left: 40px;
padding-right: 40px;
}
.content,
.wrap {
max-width: 600px;
}
#main > .content:first-child {
margin-top: 4rem;
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 670px) {
.content,
.wrap,
.wide-wrap {
padding-left: 30px;
padding-right: 30px;
}
.content,
.wrap {
max-width: 420px;
}
#main > .content:first-child {
margin-top: 3rem;
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 400px) {
.content,
.wrap,
.wide-wrap {
padding-left: 25px;
padding-right: 25px;
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 350px) {
.content,
.wrap,
.wide-wrap {
padding-left: 20px;
padding-right: 20px;
}
}
/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
em {
font-style: italic;
}
strong {
font-weight: 600;
}
.centered,
.centered-desktop {
text-align: center;
}
.nowrap {
white-space: nowrap;
}
sub,
sup {
font-family: "96 Sans", Arial, sans-serif;
font-size: 0.75em;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.25em;
}
h1,
.h1-style {
color: #2d2d2d;
font-family: "96 Sans", Arial, sans-serif;
font-size: 5.4rem;
font-weight: 700;
letter-spacing: normal;
line-height: 1.15;
text-transform: none;
}
.h1-subhead {
color: #707070;
font-size: 2.4rem;
font-weight: 300;
letter-spacing: normal;
line-height: 1.3333;
text-transform: none;
}
h2,
.h2-style {
color: #2d2d2d;
font-family: "96 Sans", Arial, sans-serif;
font-size: 3.6rem;
font-weight: 300;
letter-spacing: normal;
line-height: 1.33333;
text-transform: none;
}
h3,
.h3-style {
color: #2d2d2d;
font-family: "96 Sans", Arial, sans-serif;
font-size: 2.4rem;
font-weight: 700;
letter-spacing: normal;
line-height: 1.33333;
text-transform: none;
}
.h3-subhead {
color: #2d2d2d;
font-size: 1.8rem;
font-weight: 300;
line-height: 1.33333;
letter-spacing: normal;
text-transform: none;
}
h4,
.h4-style {
color: #2d2d2d;
font-family: "96 Sans Condensed", "96 Sans", Arial, sans-serif;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: normal;
text-transform: none;
}
h5,
.h5-style {
color: #2d2d2d;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 1.25px;
text-transform: uppercase;
}
h5.sub-line,
.h5-style.sub-line {
overflow: hidden;
padding-bottom: 1.25em;
position: relative;
}
h5.sub-line:after,
.h5-style.sub-line:after {
background: #707070;
bottom: 0;
display: block;
content: "";
height: 1px;
position: absolute;
width: 32px;
}
.centered h5.sub-line:after,
.centered .h5-style.sub-line:after {
left: 50%;
transform: translateX(-50%);
}
.h5-subhead {
color: #707070;
font-size: 1.3rem;
font-weight: 400;
}
p,
.p-style {
color: #707070;
font-size: 1.6rem;
font-weight: 400;
}
p.small-text,
.p-style.small-text {
font-size: 1.4rem;
}
p.smaller-text,
.p-style.smaller-text {
font-size: 1.2rem;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 970px) {
h1,
.h1-style {
font-size: 4.7rem;
}
.h1-subhead {
font-size: 2.2rem;
}
h2,
.h2-style {
font-size: 3.1rem;
}
h3,
.h3-style {
font-size: 2.2rem;
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 780px) {
.centered-desktop {
text-align: left;
}
h1,
.h1-style {
font-size: 3.9rem;
}
.h1-subhead {
font-size: 2rem;
}
h2,
.h2-style {
font-size: 2.7rem;
}
h3,
.h3-style {
font-size: 2rem;
}
.h3-subhead {
font-size: 1.7rem;
}
h4,
.h4-style {
font-size: 1.7rem;
}
p,
.p-style {
font-size: 1.5rem;
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 670px) {
.centered-desktop {
text-align: left;
}
h1,
.h1-style {
font-size: 3.2rem;
}
.h1-subhead {
font-size: 1.8rem;
}
h2,
.h2-style {
font-size: 2.2rem;
}
h3,
.h3-style {
font-size: 1.8rem;
}
.h3-subhead {
font-size: 1.6rem;
}
h4,
.h4-style {
font-size: 1.6rem;
}
p,
.p-style {
font-size: 1.4rem;
}
}
/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.disable-focus-state .flyout-content [class*=-list] ul li a:focus,
.disable-focus-state #header #menu-trigger:focus {
text-decoration: none;
}
.disable-focus-state .flyout-content [class*=-list] ul li a:hover,
.disable-focus-state #header #menu-trigger:hover {
text-decoration: underline;
}
.disable-focus-state [disclosuretip-trigger] .disclosure-anchor:focus span {
color: var(--color, #2d2d2d) !important;
border-bottom: 1px solid var(--color, #2d2d2d) !important;
}
.disable-focus-state [disclosuretip-trigger] .disclosure-anchor:hover span {
color: var(--color, #0077B3) !important;
border-bottom: none !important;
}
.disable-focus-state .content:not(.is-homepage) a:not(.learn-link):not(.block-link):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.disclosure-anchor):not(.tooltip-close):not(.list-link):not(.app-link):not(.event-link):focus {
background-size: 100% 0;
border-bottom: 1px solid var(--color, #0077B3);
color: var(--color, #0077B3);
}
.disable-focus-state .content:not(.is-homepage) a:not(.learn-link):not(.block-link):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.disclosure-anchor):not(.tooltip-close):not(.list-link):not(.app-link):not(.event-link):hover {
background-size: 100% 100%;
border-bottom: 0 solid rgba(0, 119, 179, 0.1);
color: var(--color, #2d2d2d);
}
body:not(.disable-focus-state) #site a:focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed #0077B3;
outline-offset: -3px;
}
body:not(.disable-focus-state) #site a.focus-white:focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed white;
outline-offset: -3px;
}
a:hover .block-link.bounce .last-word .arrow, a:focus .block-link.bounce .last-word .arrow {
-webkit-animation: side-bounce 0.5s;
-moz-animation: side-bounce 0.5s;
-o-animation: side-bounce 0.5s;
animation: side-bounce 0.5s;
}
@media (prefers-reduced-motion) {
a:hover .block-link.bounce .last-word .arrow, a:focus .block-link.bounce .last-word .arrow {
-webkit-animation: side-bounce-reduced 0s forwards;
-moz-animation: side-bounce-reduced 0s forwards;
-o-animation: side-bounce-reduced 0s forwards;
animation: side-bounce-reduced 0s forwards;
}
}
a[href^="tel:"] {
white-space: nowrap;
}
.text-links a:not(.learn-link):not(.block-link):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.disclosure-anchor):not(.tooltip-close):not(.list-link):not(.app-link):not(.event-link) {
transition: border 0.2s ease-in, background-size 0.2s ease-in;
background: linear-gradient(120deg, rgba(0, 119, 179, 0.1) 0%, rgba(0, 119, 179, 0.1) 100%) no-repeat;
background-position: 0 100%;
background-size: 100% 0;
border-bottom: 1px solid #0077B3;
color: #0077B3;
padding-bottom: 0.1em;
text-decoration: none;
}
.text-links a:not(.learn-link):not(.block-link):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.disclosure-anchor):not(.tooltip-close):not(.list-link):not(.app-link):not(.event-link):hover, .text-links a:not(.learn-link):not(.block-link):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.disclosure-anchor):not(.tooltip-close):not(.list-link):not(.app-link):not(.event-link):focus {
background-size: 100% 100%;
border-bottom: 0 solid rgba(0, 119, 179, 0.1);
color: #2d2d2d;
}
body:not(.disable-focus-state) #site .text-links a:not(.learn-link):not(.block-link):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.disclosure-anchor):not(.tooltip-close):not(.list-link):not(.app-link):not(.event-link):focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed #0077B3;
outline-offset: -3px;
}
body:not(.disable-focus-state) #site .text-links:focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed #0077B3;
outline-offset: -3px;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
body:not(.disable-focus-state) #site .block-link:focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed #0077B3;
outline-offset: -3px;
}
.block-link:not(.title):not(.text) {
background: none;
border: none;
display: inline-block;
color: #0077B3;
cursor: pointer;
font-size: 1.6em;
font-weight: 600;
line-height: 1.3;
overflow: visible;
padding-bottom: 0;
position: relative;
text-decoration: none;
transition: color 0.3s ease-in-out;
z-index: 1;
}
.block-link:not(.title):not(.text):hover, .block-link:not(.title):not(.text):focus {
color: #2862a4;
}
.block-link:not(.title):not(.text):hover::before, .block-link:not(.title):not(.text):focus::before {
background: rgba(143, 216, 242, 0.4);
width: 100%;
}
.block-link:not(.is-simple) {
padding-left: 1em;
padding-right: 1em;
}
.block-link:not(.is-simple)::before {
background: #8fd8f2;
content: "";
display: block;
outline: 1px solid transparent;
position: absolute;
top: 1px;
left: 0;
bottom: -1px;
width: 2px;
transform: skewX(-25deg);
transition: background 0.3s ease-in-out, width 0.3s ease-in-out;
z-index: -1;
}
.block-link .last-word {
white-space: nowrap;
}
.block-link .arrow {
display: inline-block;
font-size: 1.2em;
padding-left: 0.5em;
position: relative;
}
.bounce {
text-decoration: none;
}
.bounce:hover .last-word .arrow, .bounce:focus .last-word .arrow {
-webkit-animation: side-bounce 0.5s;
-moz-animation: side-bounce 0.5s;
-o-animation: side-bounce 0.5s;
animation: side-bounce 0.5s;
}
@media (prefers-reduced-motion) {
.bounce:hover .last-word .arrow, .bounce:focus .last-word .arrow {
-webkit-animation: side-bounce-reduced 0s forwards;
-moz-animation: side-bounce-reduced 0s forwards;
-o-animation: side-bounce-reduced 0s forwards;
animation: side-bounce-reduced 0s forwards;
}
}
.list-link {
color: #0077B3;
text-decoration: underline;
}
.list-link:hover {
text-decoration: none;
}
.app-link-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -0.9em;
margin-right: -0.9em;
}
* + .app-link-list {
margin-top: 0.9em;
}
.app-link-list li {
margin: 0.9em;
}
.app-link-list a {
transition: transform 0.2s;
display: block;
}
.app-link-list a:hover {
transform: scale(0.9);
}
.app-link-list img {
width: 140px;
}
.boat-app-link {
background-size: 0 !important;
border-bottom: none !important;
display: inline-block;
margin-bottom: 5em;
margin-top: 2em;
}
.boat-app-link img {
height: 40px;
}
/* Anchor link destination - prevent from head butting against top of browser window
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.anchor-destination::before {
display: block;
content: " ";
margin-top: -1em;
height: 1em;
visibility: hidden;
pointer-events: none;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 900px) {
.qs-featured .app-link-list {
-ms-flex-pack: center;
justify-content: center;
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 780px) {
.block-link {
padding-left: 0 !important;
}
.block-link:not(.title):not(.text) {
font-size: 1.4rem;
}
.block-link::before {
display: none !important;
}
a.block-link:hover .last-word .arrow, a.block-link:focus .last-word .arrow {
-webkit-animation: side-bounce 0.5s;
-moz-animation: side-bounce 0.5s;
-o-animation: side-bounce 0.5s;
animation: side-bounce 0.5s;
}
}
@media only screen and (max-width: 780px) and (prefers-reduced-motion) {
a.block-link:hover .last-word .arrow, a.block-link:focus .last-word .arrow {
-webkit-animation: side-bounce-reduced 0s forwards;
-moz-animation: side-bounce-reduced 0s forwards;
-o-animation: side-bounce-reduced 0s forwards;
animation: side-bounce-reduced 0s forwards;
}
}
@media only screen and (max-width: 780px) {
a.block-link.bounce-mobile:hover {
text-decoration: none !important;
}
}
/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
div.primary-button,
span.primary-button,
div.button {
display: inline-block;
}
div.primary-button a,
div.primary-button button,
div.primary-button input,
span.primary-button a,
span.primary-button button,
span.primary-button input,
div.button a,
div.button button,
div.button input {
display: block;
transition: background 0.3s ease-in-out;
border: 1px solid var(--button-border, #0077B3);
border-radius: 5px;
box-sizing: border-box;
cursor: pointer;
font-family: "96 Sans", Arial, sans-serif;
font-size: 2.4rem;
font-weight: 700;
line-height: 1;
padding: var(--button-padding, 1.125em 1.333em 1.375em 1.4em);
text-align: center;
text-decoration: none;
white-space: nowrap;
background-color: var(--button-bg, #0077B3);
color: var(--button-color, white);
}
@media only screen and (max-width: 970px) {
div.primary-button a,
div.primary-button button,
div.primary-button input,
span.primary-button a,
span.primary-button button,
span.primary-button input,
div.button a,
div.button button,
div.button input {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 780px) {
div.primary-button a,
div.primary-button button,
div.primary-button input,
span.primary-button a,
span.primary-button button,
span.primary-button input,
div.button a,
div.button button,
div.button input {
font-size: 2rem;
}
}
@media only screen and (max-width: 670px) {
div.primary-button a,
div.primary-button button,
div.primary-button input,
span.primary-button a,
span.primary-button button,
span.primary-button input,
div.button a,
div.button button,
div.button input {
font-size: 1.8rem;
}
}
div.primary-button a:hover, div.primary-button a:focus,
div.primary-button button:hover,
div.primary-button button:focus,
div.primary-button input:hover,
div.primary-button input:focus,
span.primary-button a:hover,
span.primary-button a:focus,
span.primary-button button:hover,
span.primary-button button:focus,
span.primary-button input:hover,
span.primary-button input:focus,
div.button a:hover,
div.button a:focus,
div.button button:hover,
div.button button:focus,
div.button input:hover,
div.button input:focus {
background-color: var(--button-hover-bg, #2862a4);
color: var(--button-hover-color, white);
}
body:not(.disable-focus-state) div.primary-button a:focus,
body:not(.disable-focus-state) div.primary-button button:focus,
body:not(.disable-focus-state) div.primary-button input:focus,
body:not(.disable-focus-state) span.primary-button a:focus,
body:not(.disable-focus-state) span.primary-button button:focus,
body:not(.disable-focus-state) span.primary-button input:focus,
body:not(.disable-focus-state) div.button a:focus,
body:not(.disable-focus-state) div.button button:focus,
body:not(.disable-focus-state) div.button input:focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed white !important;
}
.is-microsoft:not(.disable-focus-state) div.primary-button a:focus,
.is-microsoft:not(.disable-focus-state) div.primary-button button:focus,
.is-microsoft:not(.disable-focus-state) div.primary-button input:focus,
.is-microsoft:not(.disable-focus-state) span.primary-button a:focus,
.is-microsoft:not(.disable-focus-state) span.primary-button button:focus,
.is-microsoft:not(.disable-focus-state) span.primary-button input:focus,
.is-microsoft:not(.disable-focus-state) div.button a:focus,
.is-microsoft:not(.disable-focus-state) div.button button:focus,
.is-microsoft:not(.disable-focus-state) div.button input:focus {
outline: 3px dashed #2862a4 !important;
outline-offset: 0 !important;
}
div.button a,
div.button button,
div.button input {
padding: 0.9em 1.333em 1.1em;
}
a.primary-button,
button.primary-button {
transition: background 0.3s ease-in-out;
border: 1px solid var(--button-border, #0077B3);
border-radius: 5px;
box-sizing: border-box;
cursor: pointer;
font-family: "96 Sans", Arial, sans-serif;
font-size: 2.4rem;
font-weight: 700;
line-height: 1;
padding: var(--button-padding, 1.125em 1.333em 1.375em 1.4em);
text-align: center;
text-decoration: none;
white-space: nowrap;
background-color: var(--button-bg, #0077B3);
color: var(--button-color, white);
display: inline-block;
}
@media only screen and (max-width: 970px) {
a.primary-button,
button.primary-button {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 780px) {
a.primary-button,
button.primary-button {
font-size: 2rem;
}
}
@media only screen and (max-width: 670px) {
a.primary-button,
button.primary-button {
font-size: 1.8rem;
}
}
a.primary-button:hover, a.primary-button:focus,
button.primary-button:hover,
button.primary-button:focus {
background-color: var(--button-hover-bg, #2862a4);
color: var(--button-hover-color, white);
}
body:not(.disable-focus-state) a.primary-button:focus,
body:not(.disable-focus-state) button.primary-button:focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed white !important;
}
.is-microsoft:not(.disable-focus-state) a.primary-button:focus,
.is-microsoft:not(.disable-focus-state) button.primary-button:focus {
outline: 3px dashed #2862a4 !important;
outline-offset: 0 !important;
}
div.secondary-button.block,
span.secondary-button.block {
display: block;
text-align: center;
width: 33%;
}
div.secondary-button a,
div.secondary-button button,
div.secondary-button input,
span.secondary-button a,
span.secondary-button button,
span.secondary-button input {
box-shadow: 8px -8px 0 0 #4ebee5;
transition: box-shadow 0.3s ease-in-out;
background-color: white;
border: 1px solid #2d2d2d;
box-sizing: border-box;
color: #2d2d2d;
cursor: pointer;
display: inline-block;
font-family: "96 Sans", Arial, sans-serif;
font-size: 2rem;
font-weight: 700;
line-height: 1;
min-width: 340px;
padding: 1.12em 3.6em 1.35em;
position: relative;
text-align: center;
text-decoration: none;
z-index: 1;
}
.theme-green div.secondary-button a,
.theme-green div.secondary-button button,
.theme-green div.secondary-button input,
.theme-green span.secondary-button a,
.theme-green span.secondary-button button,
.theme-green span.secondary-button input {
box-shadow: 8px -8px 0 0 #7ee0ca;
}
.theme-orange div.secondary-button a,
.theme-orange div.secondary-button button,
.theme-orange div.secondary-button input,
.theme-orange span.secondary-button a,
.theme-orange span.secondary-button button,
.theme-orange span.secondary-button input {
box-shadow: 8px -8px 0 0 #ffa452;
}
.theme-purple div.secondary-button a,
.theme-purple div.secondary-button button,
.theme-purple div.secondary-button input,
.theme-purple span.secondary-button a,
.theme-purple span.secondary-button button,
.theme-purple span.secondary-button input {
box-shadow: 8px -8px 0 0 #c973c9;
}
.theme-red div.secondary-button a,
.theme-red div.secondary-button button,
.theme-red div.secondary-button input,
.theme-red span.secondary-button a,
.theme-red span.secondary-button button,
.theme-red span.secondary-button input {
box-shadow: 8px -8px 0 0 #ff527b;
}
.theme-yellow div.secondary-button a,
.theme-yellow div.secondary-button button,
.theme-yellow div.secondary-button input,
.theme-yellow span.secondary-button a,
.theme-yellow span.secondary-button button,
.theme-yellow span.secondary-button input {
box-shadow: 8px -8px 0 0 #ffd039;
}
.theme-gray div.secondary-button a,
.theme-gray div.secondary-button button,
.theme-gray div.secondary-button input,
.theme-gray span.secondary-button a,
.theme-gray span.secondary-button button,
.theme-gray span.secondary-button input {
box-shadow: 8px -8px 0 0 #a6a6a6;
}
@media only screen and (max-width: 970px) {
div.secondary-button a,
div.secondary-button button,
div.secondary-button input,
span.secondary-button a,
span.secondary-button button,
span.secondary-button input {
font-size: 1.8rem;
min-width: 0;
}
}
@media only screen and (max-width: 780px) {
div.secondary-button a,
div.secondary-button button,
div.secondary-button input,
span.secondary-button a,
span.secondary-button button,
span.secondary-button input {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 670px) {
div.secondary-button a,
div.secondary-button button,
div.secondary-button input,
span.secondary-button a,
span.secondary-button button,
span.secondary-button input {
font-size: 1.5rem;
min-width: 100%;
}
}
@media only screen and (max-width: 400px) {
div.secondary-button a,
div.secondary-button button,
div.secondary-button input,
span.secondary-button a,
span.secondary-button button,
span.secondary-button input {
padding-left: 0;
padding-right: 0;
text-align: center;
width: 100%;
}
}
div.secondary-button a::after,
div.secondary-button button::after,
div.secondary-button input::after,
span.secondary-button a::after,
span.secondary-button button::after,
span.secondary-button input::after {
background-color: #8fd8f2;
transition: opacity 0.3s ease-in-out;
bottom: 0;
content: "";
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.theme-green div.secondary-button a::after,
.theme-green div.secondary-button button::after,
.theme-green div.secondary-button input::after,
.theme-green span.secondary-button a::after,
.theme-green span.secondary-button button::after,
.theme-green span.secondary-button input::after {
background: #bdefe6;
}
.theme-orange div.secondary-button a::after,
.theme-orange div.secondary-button button::after,
.theme-orange div.secondary-button input::after,
.theme-orange span.secondary-button a::after,
.theme-orange span.secondary-button button::after,
.theme-orange span.secondary-button input::after {
background: #ffcc8f;
}
.theme-purple div.secondary-button a::after,
.theme-purple div.secondary-button button::after,
.theme-purple div.secondary-button input::after,
.theme-purple span.secondary-button a::after,
.theme-purple span.secondary-button button::after,
.theme-purple span.secondary-button input::after {
background: #e4b9e4;
}
.theme-red div.secondary-button a::after,
.theme-red div.secondary-button button::after,
.theme-red div.secondary-button input::after,
.theme-red span.secondary-button a::after,
.theme-red span.secondary-button button::after,
.theme-red span.secondary-button input::after {
background: #ffcfde;
}
.theme-yellow div.secondary-button a::after,
.theme-yellow div.secondary-button button::after,
.theme-yellow div.secondary-button input::after,
.theme-yellow span.secondary-button a::after,
.theme-yellow span.secondary-button button::after,
.theme-yellow span.secondary-button input::after {
background: #ffe694;
}
.theme-gray div.secondary-button a::after,
.theme-gray div.secondary-button button::after,
.theme-gray div.secondary-button input::after,
.theme-gray span.secondary-button a::after,
.theme-gray span.secondary-button button::after,
.theme-gray span.secondary-button input::after {
background: #ccc;
}
div.secondary-button a:hover, div.secondary-button a:focus,
div.secondary-button button:hover,
div.secondary-button button:focus,
div.secondary-button input:hover,
div.secondary-button input:focus,
span.secondary-button a:hover,
span.secondary-button a:focus,
span.secondary-button button:hover,
span.secondary-button button:focus,
span.secondary-button input:hover,
span.secondary-button input:focus {
box-shadow: 0 0 0 0 #8fd8f2;
background-color: white;
cursor: pointer;
}
.theme-green div.secondary-button a:hover, .theme-green div.secondary-button a:focus,
.theme-green div.secondary-button button:hover,
.theme-green div.secondary-button button:focus,
.theme-green div.secondary-button input:hover,
.theme-green div.secondary-button input:focus,
.theme-green span.secondary-button a:hover,
.theme-green span.secondary-button a:focus,
.theme-green span.secondary-button button:hover,
.theme-green span.secondary-button button:focus,
.theme-green span.secondary-button input:hover,
.theme-green span.secondary-button input:focus {
box-shadow: 0 0 0 0 #bdefe6;
}
.theme-orange div.secondary-button a:hover, .theme-orange div.secondary-button a:focus,
.theme-orange div.secondary-button button:hover,
.theme-orange div.secondary-button button:focus,
.theme-orange div.secondary-button input:hover,
.theme-orange div.secondary-button input:focus,
.theme-orange span.secondary-button a:hover,
.theme-orange span.secondary-button a:focus,
.theme-orange span.secondary-button button:hover,
.theme-orange span.secondary-button button:focus,
.theme-orange span.secondary-button input:hover,
.theme-orange span.secondary-button input:focus {
box-shadow: 0 0 0 0 #ffcc8f;
}
.theme-purple div.secondary-button a:hover, .theme-purple div.secondary-button a:focus,
.theme-purple div.secondary-button button:hover,
.theme-purple div.secondary-button button:focus,
.theme-purple div.secondary-button input:hover,
.theme-purple div.secondary-button input:focus,
.theme-purple span.secondary-button a:hover,
.theme-purple span.secondary-button a:focus,
.theme-purple span.secondary-button button:hover,
.theme-purple span.secondary-button button:focus,
.theme-purple span.secondary-button input:hover,
.theme-purple span.secondary-button input:focus {
box-shadow: 0 0 0 0 #e4b9e4;
}
.theme-red div.secondary-button a:hover, .theme-red div.secondary-button a:focus,
.theme-red div.secondary-button button:hover,
.theme-red div.secondary-button button:focus,
.theme-red div.secondary-button input:hover,
.theme-red div.secondary-button input:focus,
.theme-red span.secondary-button a:hover,
.theme-red span.secondary-button a:focus,
.theme-red span.secondary-button button:hover,
.theme-red span.secondary-button button:focus,
.theme-red span.secondary-button input:hover,
.theme-red span.secondary-button input:focus {
box-shadow: 0 0 0 0 #ffcfde;
}
.theme-yellow div.secondary-button a:hover, .theme-yellow div.secondary-button a:focus,
.theme-yellow div.secondary-button button:hover,
.theme-yellow div.secondary-button button:focus,
.theme-yellow div.secondary-button input:hover,
.theme-yellow div.secondary-button input:focus,
.theme-yellow span.secondary-button a:hover,
.theme-yellow span.secondary-button a:focus,
.theme-yellow span.secondary-button button:hover,
.theme-yellow span.secondary-button button:focus,
.theme-yellow span.secondary-button input:hover,
.theme-yellow span.secondary-button input:focus {
box-shadow: 0 0 0 0 #ffe694;
}
.theme-gray div.secondary-button a:hover, .theme-gray div.secondary-button a:focus,
.theme-gray div.secondary-button button:hover,
.theme-gray div.secondary-button button:focus,
.theme-gray div.secondary-button input:hover,
.theme-gray div.secondary-button input:focus,
.theme-gray span.secondary-button a:hover,
.theme-gray span.secondary-button a:focus,
.theme-gray span.secondary-button button:hover,
.theme-gray span.secondary-button button:focus,
.theme-gray span.secondary-button input:hover,
.theme-gray span.secondary-button input:focus {
box-shadow: 0 0 0 0 #ccc;
}
div.secondary-button a:hover::after, div.secondary-button a:focus::after,
div.secondary-button button:hover::after,
div.secondary-button button:focus::after,
div.secondary-button input:hover::after,
div.secondary-button input:focus::after,
span.secondary-button a:hover::after,
span.secondary-button a:focus::after,
span.secondary-button button:hover::after,
span.secondary-button button:focus::after,
span.secondary-button input:hover::after,
span.secondary-button input:focus::after {
opacity: 0.5;
transition: opacity 0.3s;
}
body:not(.disable-focus-state) #site div.secondary-button a:focus,
body:not(.disable-focus-state) #site div.secondary-button button:focus,
body:not(.disable-focus-state) #site div.secondary-button input:focus,
body:not(.disable-focus-state) #site span.secondary-button a:focus,
body:not(.disable-focus-state) #site span.secondary-button button:focus,
body:not(.disable-focus-state) #site span.secondary-button input:focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed #0077B3;
outline-offset: -3px;
}
a.secondary-button,
button.secondary-button,
input.secondary-button {
box-shadow: 8px -8px 0 0 #4ebee5;
transition: box-shadow 0.3s ease-in-out;
background-color: white;
border: 1px solid #2d2d2d;
box-sizing: border-box;
color: #2d2d2d;
cursor: pointer;
display: inline-block;
font-family: "96 Sans", Arial, sans-serif;
font-size: 2rem;
font-weight: 700;
line-height: 1;
min-width: 340px;
padding: 1.12em 3.6em 1.35em;
position: relative;
text-align: center;
text-decoration: none;
z-index: 1;
}
.theme-green a.secondary-button,
.theme-green button.secondary-button,
.theme-green input.secondary-button {
box-shadow: 8px -8px 0 0 #7ee0ca;
}
.theme-orange a.secondary-button,
.theme-orange button.secondary-button,
.theme-orange input.secondary-button {
box-shadow: 8px -8px 0 0 #ffa452;
}
.theme-purple a.secondary-button,
.theme-purple button.secondary-button,
.theme-purple input.secondary-button {
box-shadow: 8px -8px 0 0 #c973c9;
}
.theme-red a.secondary-button,
.theme-red button.secondary-button,
.theme-red input.secondary-button {
box-shadow: 8px -8px 0 0 #ff527b;
}
.theme-yellow a.secondary-button,
.theme-yellow button.secondary-button,
.theme-yellow input.secondary-button {
box-shadow: 8px -8px 0 0 #ffd039;
}
.theme-gray a.secondary-button,
.theme-gray button.secondary-button,
.theme-gray input.secondary-button {
box-shadow: 8px -8px 0 0 #a6a6a6;
}
@media only screen and (max-width: 970px) {
a.secondary-button,
button.secondary-button,
input.secondary-button {
font-size: 1.8rem;
min-width: 0;
}
}
@media only screen and (max-width: 780px) {
a.secondary-button,
button.secondary-button,
input.secondary-button {
font-size: 1.6rem;
}
}
@media only screen and (max-width: 670px) {
a.secondary-button,
button.secondary-button,
input.secondary-button {
font-size: 1.5rem;
min-width: 100%;
}
}
@media only screen and (max-width: 400px) {
a.secondary-button,
button.secondary-button,
input.secondary-button {
padding-left: 0;
padding-right: 0;
text-align: center;
width: 100%;
}
}
a.secondary-button::after,
button.secondary-button::after,
input.secondary-button::after {
background-color: #8fd8f2;
transition: opacity 0.3s ease-in-out;
bottom: 0;
content: "";
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.theme-green a.secondary-button::after,
.theme-green button.secondary-button::after,
.theme-green input.secondary-button::after {
background: #bdefe6;
}
.theme-orange a.secondary-button::after,
.theme-orange button.secondary-button::after,
.theme-orange input.secondary-button::after {
background: #ffcc8f;
}
.theme-purple a.secondary-button::after,
.theme-purple button.secondary-button::after,
.theme-purple input.secondary-button::after {
background: #e4b9e4;
}
.theme-red a.secondary-button::after,
.theme-red button.secondary-button::after,
.theme-red input.secondary-button::after {
background: #ffcfde;
}
.theme-yellow a.secondary-button::after,
.theme-yellow button.secondary-button::after,
.theme-yellow input.secondary-button::after {
background: #ffe694;
}
.theme-gray a.secondary-button::after,
.theme-gray button.secondary-button::after,
.theme-gray input.secondary-button::after {
background: #ccc;
}
a.secondary-button:hover, a.secondary-button:focus,
button.secondary-button:hover,
button.secondary-button:focus,
input.secondary-button:hover,
input.secondary-button:focus {
box-shadow: 0 0 0 0 #8fd8f2;
background-color: white;
cursor: pointer;
}
.theme-green a.secondary-button:hover, .theme-green a.secondary-button:focus,
.theme-green button.secondary-button:hover,
.theme-green button.secondary-button:focus,
.theme-green input.secondary-button:hover,
.theme-green input.secondary-button:focus {
box-shadow: 0 0 0 0 #bdefe6;
}
.theme-orange a.secondary-button:hover, .theme-orange a.secondary-button:focus,
.theme-orange button.secondary-button:hover,
.theme-orange button.secondary-button:focus,
.theme-orange input.secondary-button:hover,
.theme-orange input.secondary-button:focus {
box-shadow: 0 0 0 0 #ffcc8f;
}
.theme-purple a.secondary-button:hover, .theme-purple a.secondary-button:focus,
.theme-purple button.secondary-button:hover,
.theme-purple button.secondary-button:focus,
.theme-purple input.secondary-button:hover,
.theme-purple input.secondary-button:focus {
box-shadow: 0 0 0 0 #e4b9e4;
}
.theme-red a.secondary-button:hover, .theme-red a.secondary-button:focus,
.theme-red button.secondary-button:hover,
.theme-red button.secondary-button:focus,
.theme-red input.secondary-button:hover,
.theme-red input.secondary-button:focus {
box-shadow: 0 0 0 0 #ffcfde;
}
.theme-yellow a.secondary-button:hover, .theme-yellow a.secondary-button:focus,
.theme-yellow button.secondary-button:hover,
.theme-yellow button.secondary-button:focus,
.theme-yellow input.secondary-button:hover,
.theme-yellow input.secondary-button:focus {
box-shadow: 0 0 0 0 #ffe694;
}
.theme-gray a.secondary-button:hover, .theme-gray a.secondary-button:focus,
.theme-gray button.secondary-button:hover,
.theme-gray button.secondary-button:focus,
.theme-gray input.secondary-button:hover,
.theme-gray input.secondary-button:focus {
box-shadow: 0 0 0 0 #ccc;
}
a.secondary-button:hover::after, a.secondary-button:focus::after,
button.secondary-button:hover::after,
button.secondary-button:focus::after,
input.secondary-button:hover::after,
input.secondary-button:focus::after {
opacity: 0.5;
transition: opacity 0.3s;
}
body:not(.disable-focus-state) #site a.secondary-button:focus,
body:not(.disable-focus-state) #site button.secondary-button:focus,
body:not(.disable-focus-state) #site input.secondary-button:focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed #0077B3;
outline-offset: -3px;
}
div.tertiary-button,
span.tertiary-button {
display: inline-block;
}
div.tertiary-button a,
div.tertiary-button button,
div.tertiary-button input,
span.tertiary-button a,
span.tertiary-button button,
span.tertiary-button input {
transition: background 0.3s ease-in-out;
border: 1px solid var(--button-border, #0077B3);
border-radius: 5px;
box-sizing: border-box;
cursor: pointer;
font-family: "96 Sans", Arial, sans-serif;
font-size: 2.4rem;
font-weight: 700;
line-height: 1;
padding: var(--button-padding, 1.125em 1.333em 1.375em 1.4em);
text-align: center;
text-decoration: none;
white-space: nowrap;
background: white;
color: #0077B3;
text-decoration: none;
display: block;
}
div.tertiary-button a:hover, div.tertiary-button a:focus,
div.tertiary-button button:hover,
div.tertiary-button button:focus,
div.tertiary-button input:hover,
div.tertiary-button input:focus,
span.tertiary-button a:hover,
span.tertiary-button a:focus,
span.tertiary-button button:hover,
span.tertiary-button button:focus,
span.tertiary-button input:hover,
span.tertiary-button input:focus {
background: #f3f9fc;
}
body:not(.disable-focus-state) #site div.tertiary-button a:focus,
body:not(.disable-focus-state) #site div.tertiary-button button:focus,
body:not(.disable-focus-state) #site div.tertiary-button input:focus,
body:not(.disable-focus-state) #site span.tertiary-button a:focus,
body:not(.disable-focus-state) #site span.tertiary-button button:focus,
body:not(.disable-focus-state) #site span.tertiary-button input:focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed #0077B3;
outline-offset: -3px;
}
a.tertiary-button,
button.tertiary-button,
input.tertiary-button {
transition: background 0.3s ease-in-out;
border: 1px solid var(--button-border, #0077B3);
border-radius: 5px;
box-sizing: border-box;
cursor: pointer;
font-family: "96 Sans", Arial, sans-serif;
font-size: 2.4rem;
font-weight: 700;
line-height: 1;
padding: var(--button-padding, 1.125em 1.333em 1.375em 1.4em);
text-align: center;
text-decoration: none;
white-space: nowrap;
background: white;
color: #0077B3;
text-decoration: none;
display: inline-block;
}
a.tertiary-button:hover, a.tertiary-button:focus,
button.tertiary-button:hover,
button.tertiary-button:focus,
input.tertiary-button:hover,
input.tertiary-button:focus {
background: #f3f9fc;
}
body:not(.disable-focus-state) #site a.tertiary-button:focus,
body:not(.disable-focus-state) #site button.tertiary-button:focus,
body:not(.disable-focus-state) #site input.tertiary-button:focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed #0077B3;
outline-offset: -3px;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
input:not([type=checkbox]),
input:not([type=radio]) {
-webkit-appearance: none;
border-radius: 0;
}
form span.error,
form label.notification {
background: #d41659;
border: none !important;
border-radius: 5px;
bottom: 100%;
color: #fff !important;
display: block;
font-size: 16px;
height: auto !important;
left: 0;
line-height: 1.2;
margin-bottom: 10px;
overflow: visible;
padding: 15px 30px 15px 15px;
position: absolute !important;
text-indent: 0 !important;
top: auto;
width: auto !important;
z-index: 7;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*&:before {
content: url(/Content/images/domainProgressive/wh3/base/icons/alert.svg);
display: inline-block;
vertical-align: middle;
color: white;
width: 2.25rem;
height: 2.25rem;
margin-right: .5rem;
top: .25rem;
position: relative;
z-index: 1;
}*/
}
form span.error::after,
form label.notification::after {
left: 30px;
border: solid transparent;
border-color: transparent;
border-top-color: #d41659;
border-width: 10px;
content: " ";
height: 0;
margin-left: -10px;
margin-top: -1px;
top: 100%;
width: 0;
position: absolute;
pointer-events: none;
}
img.image-error {
margin-right: 1.25rem;
}
form div.inactive span.error,
form .inactive.group span.error {
display: none !important;
}
form.quoteStartForm span.error,
form.quoteStartForm label.notification {
white-space: nowrap;
}
.form-styles [class*=grid-] {
-ms-flex-item-align: flex-end;
align-self: flex-end;
position: relative;
}
.form-styles [class*=grid-] > * {
display: block;
position: relative;
width: 100%;
}
.form-styles input,
.form-styles .dropdown .display,
.form-styles textarea {
border: 1px solid #2d2d2d;
border-radius: 5px;
box-sizing: border-box;
}
.form-styles inputinput, .form-styles input.dropdown .display,
.form-styles .dropdown .displayinput,
.form-styles .dropdown .display.dropdown .display,
.form-styles textareainput,
.form-styles textarea.dropdown .display {
height: 4.5rem;
}
.form-styles inputtextarea,
.form-styles .dropdown .displaytextarea,
.form-styles textareatextarea {
height: 20rem;
}
.form-styles input,
.form-styles .dropdown label,
.form-styles textarea {
display: block;
font-size: 1.6rem;
font-family: "96 Sans", Arial, sans-serif;
line-height: 1;
padding: 0.75em 1em;
}
.form-styles input:hover,
.form-styles textarea:hover {
border: 1px solid #0077B3;
}
.form-styles input:focus,
.form-styles textarea:focus {
border: 1px solid #0077B3;
box-shadow: 0px 0px 8px #8fd8f2, inset 0 0 0 1px #0077B3;
outline: 0 !important;
}
.form-styles input.error,
.form-styles textarea.error {
border: 1px solid #d41659;
box-shadow: 0px 0px 8px #ff527b, inset 0 0 0 1px #ff527b;
outline: 0 !important;
}
.form-styles .dropdown .display.hover {
border: 1px solid #0077B3;
}
.form-styles .dropdown .display.hover .arrow-background {
border: 1px solid #0077B3;
}
.form-styles .dropdown .display.focus {
border: 1px solid #0077B3;
box-shadow: 0px 0px 8px #8fd8f2, inset 0 0 0 1px #0077B3;
}
.form-styles .dropdown .display.focus .arrow-background {
border: 1px solid #0077B3;
box-shadow: inset 0 0 0 1px #0077B3;
}
.form-styles .dropdown .display.error {
border: 1px solid #d41659;
box-shadow: 0px 0px 8px #ff527b, inset 0 0 0 1px #d41659;
}
.form-styles .dropdown .display.error .arrow-background {
border: 1px solid #d41659;
box-shadow: inset 0 0 0 1px #d41659;
background: #fceff2;
}
.form-styles .dropdown .display.error .arrow-background::before {
color: #d41659;
}
.form-styles .dropdown label {
border: 2px solid transparent;
padding-right: 4em;
}
.form-styles form {
margin-top: 2rem;
}
.form-styles form > div > label {
display: block;
font-size: 1.6rem;
font-family: "96 Sans", Arial, sans-serif;
font-weight: 700;
line-height: 1;
margin-bottom: 1rem;
}
.form-styles legend {
font-size: 1.6rem;
font-family: "96 Sans", Arial, sans-serif;
font-weight: 700;
line-height: 1;
margin-bottom: 1rem;
}
.form-styles select {
cursor: pointer;
left: 0;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-appearance: none;
}
.form-styles .arrow-background {
background: #f3f9fc;
border: 1px solid #2d2d2d;
border-radius: 0 4px 4px 0;
bottom: 0;
box-sizing: border-box;
color: transparent;
font-family: "96 Sans Icons";
font-size: 27px;
font-weight: 400;
line-height: 1;
margin: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 1.85em;
height: 100%;
}
.form-styles .arrow-background::before {
color: #0077B3;
content: "\e019";
font-family: "96 Sans Icons";
font-size: 27px;
font-weight: 400;
display: block;
bottom: 0;
position: absolute;
height: 27px;
left: 0;
right: 0;
top: 9px;
}
.form-styles .checkbox input[type=checkbox] {
line-height: normal;
opacity: 0;
padding: 0;
height: 0;
width: 0;
}
.form-styles .checkbox input[type=checkbox].error ~ label .check:before {
border: 2px solid #d41659 !important;
box-shadow: 0px 0px 8px #ff527b !important;
}
.form-styles .checkbox input[type=checkbox] ~ label {
cursor: pointer;
}
.form-styles .checkbox input[type=checkbox] ~ label:hover .check:before {
border: 1px solid #0077B3;
}
.form-styles .checkbox input[type=checkbox] ~ label.focus .check:before {
border: 2px solid #0077B3;
box-shadow: 0px 0px 8px #8fd8f2;
}
.form-styles .checkbox input[type=checkbox] ~ label .check {
display: inline-block;
position: relative;
padding-right: 1rem;
}
.form-styles .checkbox input[type=checkbox] ~ label .check:before {
transition: background-color 0.25s ease-in-out;
content: "";
width: 2.5rem;
height: 2.5rem;
display: block;
background: white;
border: 1px solid #2d2d2d;
border-radius: 5px;
box-sizing: border-box;
background-color: white;
}
.form-styles .checkbox input[type=checkbox] ~ label .check:after {
transition: opacity 0.25s ease-in-out;
content: "\e026";
color: white;
font-family: "96 Sans Icons";
font-size: 2.25rem;
font-weight: 700;
display: block;
left: 0.5rem;
line-height: normal;
opacity: 0;
position: absolute;
top: -0.1rem;
}
.form-styles .checkbox input[type=checkbox] ~ label .checkbox-text {
display: inline-block;
font-size: 1.6rem;
font-family: "96 Sans", Arial, sans-serif;
font-weight: 400;
line-height: 1;
line-height: 1.2em;
width: calc(100% - 4.5rem);
vertical-align: top;
}
.form-styles .checkbox input[type=checkbox]:checked ~ label .check:before {
background-color: #0077B3;
border: 2px solid #0077B3;
}
.form-styles .checkbox input[type=checkbox]:checked ~ label .check:after {
opacity: 1;
}
.form-styles .radio {
cursor: pointer;
display: block;
margin-bottom: 1.6em;
padding-left: 3.5rem;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Custom radio button */
/* Hide the browser's default radio button */
}
.form-styles .radio.active .circle {
border: 2px solid #0077B3;
box-shadow: 0px 0px 8px #8fd8f2;
}
.form-styles .radio .circle {
border: 1px solid #2d2d2d;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
height: 2.5rem;
width: 2.5rem;
/* The indicator (the dot - hidden when not checked) */
}
.form-styles .radio .circle::after {
transform: translate(-50%, -50%);
content: "";
position: absolute;
display: none;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
border-radius: 50%;
background: white;
}
.form-styles .radio input {
cursor: pointer;
height: 0;
line-height: normal;
padding: 0;
position: absolute;
opacity: 0;
width: 0;
/* When the radio button is checked, add a blue background */
}
.form-styles .radio input:checked ~ label .circle {
background-color: #0077B3;
border: 2px solid #0077B3;
/* Show the indicator (dot) when checked */
}
.form-styles .radio input:checked ~ label .circle::after {
display: block;
}
.form-styles .radio input.error ~ label .circle {
border: 2px solid #d41659 !important;
box-shadow: 0px 0px 8px #ff527b !important;
}
.form-styles .radio label {
font-family: "96 Sans", Arial, sans-serif;
font-size: 1.6rem;
}
.form-styles .submit-button-wrap {
margin-top: 2rem;
}
/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Standard module spacing
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
[data-module] + .content.lead-in,
[data-module] + [data-module]:not([data-ignore-spacing]) {
margin-top: 60px;
padding-top: 60px;
}
@media only screen and (max-width: 970px) {
[data-module] + .content.lead-in,
[data-module] + [data-module]:not([data-ignore-spacing]) {
margin-top: 50px;
padding-top: 50px;
}
}
@media only screen and (max-width: 400px) {
[data-module] + .content.lead-in,
[data-module] + [data-module]:not([data-ignore-spacing]) {
margin-top: 40px;
padding-top: 40px;
}
}
.content + .content,
[data-module] + .content:not([data-ignore-spacing]),
.content + [data-module]:not([data-ignore-spacing]) {
margin-top: 40px;
padding-top: 40px;
}
@media only screen and (max-width: 970px) {
.content + .content,
[data-module] + .content:not([data-ignore-spacing]),
.content + [data-module]:not([data-ignore-spacing]) {
margin-top: 33px;
padding-top: 33px;
}
}
@media only screen and (max-width: 400px) {
.content + .content,
[data-module] + .content:not([data-ignore-spacing]),
.content + [data-module]:not([data-ignore-spacing]) {
margin-top: 27px;
padding-top: 27px;
}
}
* + .content-image,
.small-spacing {
margin-top: 24px !important;
padding-top: 24px !important;
}
@media only screen and (max-width: 970px) {
* + .content-image,
.small-spacing {
margin-top: 13px !important;
padding-top: 13px !important;
}
}
@media only screen and (max-width: 400px) {
* + .content-image,
.small-spacing {
margin-top: 11px !important;
padding-top: 11px !important;
}
}
/* Padding / Margin helpers
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.pt0 {
padding-top: 0em !important;
}
.pb0 {
padding-bottom: 0em !important;
}
.mt0 {
margin-top: 0em !important;
}
.mb0 {
margin-bottom: 0em !important;
}
.pt1 {
padding-top: 1em !important;
}
.pb1 {
padding-bottom: 1em !important;
}
.mt1 {
margin-top: 1em !important;
}
.mb1 {
margin-bottom: 1em !important;
}
.pt2 {
padding-top: 2em !important;
}
.pb2 {
padding-bottom: 2em !important;
}
.mt2 {
margin-top: 2em !important;
}
.mb2 {
margin-bottom: 2em !important;
}
.pt3 {
padding-top: 3em !important;
}
.pb3 {
padding-bottom: 3em !important;
}
.mt3 {
margin-top: 3em !important;
}
.mb3 {
margin-bottom: 3em !important;
}
.pt4 {
padding-top: 4em !important;
}
.pb4 {
padding-bottom: 4em !important;
}
.mt4 {
margin-top: 4em !important;
}
.mb4 {
margin-bottom: 4em !important;
}
.pt5 {
padding-top: 5em !important;
}
.pb5 {
padding-bottom: 5em !important;
}
.mt5 {
margin-top: 5em !important;
}
.mb5 {
margin-bottom: 5em !important;
}
.pt6 {
padding-top: 6em !important;
}
.pb6 {
padding-bottom: 6em !important;
}
.mt6 {
margin-top: 6em !important;
}
.mb6 {
margin-bottom: 6em !important;
}
.pt7 {
padding-top: 7em !important;
}
.pb7 {
padding-bottom: 7em !important;
}
.mt7 {
margin-top: 7em !important;
}
.mb7 {
margin-bottom: 7em !important;
}
.pt8 {
padding-top: 8em !important;
}
.pb8 {
padding-bottom: 8em !important;
}
.mt8 {
margin-top: 8em !important;
}
.mb8 {
margin-bottom: 8em !important;
}
.pt9 {
padding-top: 9em !important;
}
.pb9 {
padding-bottom: 9em !important;
}
.mt9 {
margin-top: 9em !important;
}
.mb9 {
margin-bottom: 9em !important;
}
.pt10 {
padding-top: 10em !important;
}
.pb10 {
padding-bottom: 10em !important;
}
.mt10 {
margin-top: 10em !important;
}
.mb10 {
margin-bottom: 10em !important;
}
@media only screen and (max-width: 970px) {
.pt0 {
padding-top: 0em !important;
}
.pb0 {
padding-bottom: 0em !important;
}
.mt0 {
margin-top: 0em !important;
}
.mb0 {
margin-bottom: 0em !important;
}
.pt1 {
padding-top: 0.8em !important;
}
.pb1 {
padding-bottom: 0.8em !important;
}
.mt1 {
margin-top: 0.8em !important;
}
.mb1 {
margin-bottom: 0.8em !important;
}
.pt2 {
padding-top: 1.6em !important;
}
.pb2 {
padding-bottom: 1.6em !important;
}
.mt2 {
margin-top: 1.6em !important;
}
.mb2 {
margin-bottom: 1.6em !important;
}
.pt3 {
padding-top: 2.4em !important;
}
.pb3 {
padding-bottom: 2.4em !important;
}
.mt3 {
margin-top: 2.4em !important;
}
.mb3 {
margin-bottom: 2.4em !important;
}
.pt4 {
padding-top: 3.2em !important;
}
.pb4 {
padding-bottom: 3.2em !important;
}
.mt4 {
margin-top: 3.2em !important;
}
.mb4 {
margin-bottom: 3.2em !important;
}
.pt5 {
padding-top: 4em !important;
}
.pb5 {
padding-bottom: 4em !important;
}
.mt5 {
margin-top: 4em !important;
}
.mb5 {
margin-bottom: 4em !important;
}
.pt6 {
padding-top: 4.8em !important;
}
.pb6 {
padding-bottom: 4.8em !important;
}
.mt6 {
margin-top: 4.8em !important;
}
.mb6 {
margin-bottom: 4.8em !important;
}
.pt7 {
padding-top: 5.6em !important;
}
.pb7 {
padding-bottom: 5.6em !important;
}
.mt7 {
margin-top: 5.6em !important;
}
.mb7 {
margin-bottom: 5.6em !important;
}
.pt8 {
padding-top: 6.4em !important;
}
.pb8 {
padding-bottom: 6.4em !important;
}
.mt8 {
margin-top: 6.4em !important;
}
.mb8 {
margin-bottom: 6.4em !important;
}
.pt9 {
padding-top: 7.2em !important;
}
.pb9 {
padding-bottom: 7.2em !important;
}
.mt9 {
margin-top: 7.2em !important;
}
.mb9 {
margin-bottom: 7.2em !important;
}
.pt10 {
padding-top: 8em !important;
}
.pb10 {
padding-bottom: 8em !important;
}
.mt10 {
margin-top: 8em !important;
}
.mb10 {
margin-bottom: 8em !important;
}
}
@media only screen and (max-width: 670px) {
.pt0 {
padding-top: 0em !important;
}
.pb0 {
padding-bottom: 0em !important;
}
.mt0 {
margin-top: 0em !important;
}
.mb0 {
margin-bottom: 0em !important;
}
.pt1 {
padding-top: 0.6em !important;
}
.pb1 {
padding-bottom: 0.6em !important;
}
.mt1 {
margin-top: 0.6em !important;
}
.mb1 {
margin-bottom: 0.6em !important;
}
.pt2 {
padding-top: 1.2em !important;
}
.pb2 {
padding-bottom: 1.2em !important;
}
.mt2 {
margin-top: 1.2em !important;
}
.mb2 {
margin-bottom: 1.2em !important;
}
.pt3 {
padding-top: 1.8em !important;
}
.pb3 {
padding-bottom: 1.8em !important;
}
.mt3 {
margin-top: 1.8em !important;
}
.mb3 {
margin-bottom: 1.8em !important;
}
.pt4 {
padding-top: 2.4em !important;
}
.pb4 {
padding-bottom: 2.4em !important;
}
.mt4 {
margin-top: 2.4em !important;
}
.mb4 {
margin-bottom: 2.4em !important;
}
.pt5 {
padding-top: 3em !important;
}
.pb5 {
padding-bottom: 3em !important;
}
.mt5 {
margin-top: 3em !important;
}
.mb5 {
margin-bottom: 3em !important;
}
.pt6 {
padding-top: 3.6em !important;
}
.pb6 {
padding-bottom: 3.6em !important;
}
.mt6 {
margin-top: 3.6em !important;
}
.mb6 {
margin-bottom: 3.6em !important;
}
.pt7 {
padding-top: 4.2em !important;
}
.pb7 {
padding-bottom: 4.2em !important;
}
.mt7 {
margin-top: 4.2em !important;
}
.mb7 {
margin-bottom: 4.2em !important;
}
.pt8 {
padding-top: 4.8em !important;
}
.pb8 {
padding-bottom: 4.8em !important;
}
.mt8 {
margin-top: 4.8em !important;
}
.mb8 {
margin-bottom: 4.8em !important;
}
.pt9 {
padding-top: 5.4em !important;
}
.pb9 {
padding-bottom: 5.4em !important;
}
.mt9 {
margin-top: 5.4em !important;
}
.mb9 {
margin-bottom: 5.4em !important;
}
.pt10 {
padding-top: 6em !important;
}
.pb10 {
padding-bottom: 6em !important;
}
.mt10 {
margin-top: 6em !important;
}
.mb10 {
margin-bottom: 6em !important;
}
}
/* H1 + immediate sibling
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
h1 + p, h1 + .p-style, .h1-style + p, .h1-style + .p-style {
margin-top: 2em;
}
h1 + .h1-subhead, .h1-style + .h1-subhead {
margin-top: 0.5em;
}
h1 + h2, h1 + .h2-style, .h1-style + h2, .h1-style + .h2-style {
margin-top: 1.333333em;
}
h1 + h3, h1 + .h3-style, .h1-style + h3, .h1-style + .h3-style {
margin-top: 1.333333em;
}
h1 + h3, h1 + .h3-style, .h1-style + h3, .h1-style + .h3-style {
margin-top: 2em;
}
h1 + h4, h1 + .h4-style, .h1-style + h4, .h1-style + .h4-style {
margin-top: 2.6666667em;
}
h1 + h5, h1 + .h5-style, .h1-style + h5, .h1-style + .h5-style {
margin-top: 4em;
}
h1 + dl, .h1-style + dl {
margin-top: 4.8em;
}
h1 + ul, .h1-style + ul {
margin-top: 4.8em;
}
h1 + ol, .h1-style + ol {
margin-top: 4.8em;
}
h1 + button, .h1-style + button {
margin-top: 2em;
}
/* H2 + immediate sibling
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
h2 + p, h2 + .p-style, .h2-style + p, .h2-style + .p-style {
margin-top: 1em;
}
h2.h1-subhead + p, h2.h1-subhead + .p-style {
margin-top: 1.5em;
}
h2 + h3, h2 + .h3-style, .h2-style + h3, .h2-style + .h3-style {
margin-top: 1.25em;
}
h2 + h4, h2 + .h4-style, .h2-style + h4, .h2-style + .h4-style {
margin-top: 2.66667em;
}
h2 + dl, .h2-style + dl {
margin-top: 3.2em;
}
h2 + ul, .h2-style + ul {
margin-top: 3.2em;
}
h2 + ol, .h2-style + ol {
margin-top: 3.2em;
}
h2 + button, .h2-style + button {
margin-top: 2em;
}
/* H3 + immediate sibling
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
h3 + p, h3 + .p-style, .h3-style + p, .h3-style + .p-style {
margin-top: 1em;
}
h3 + .h3-subhead, .h3-style + .h3-subhead {
margin-top: 0.25em;
}
h3 + h4, h3 + .h4-style, .h3-style + h4, .h3-style + .h4-style {
margin-top: 1.7777em;
}
h3 + dl, .h3-style + dl {
margin-top: 1.15em;
}
h3 + ol, .h3-style + ol {
margin-top: 3.2em;
}
h3 + button, .h3-style + button {
margin-top: 2em;
}
/* H4 + immediate sibling
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
h4 + p, h4 + .p-style, .h4-style + p, .h4-style + .p-style {
margin-top: 0.875em;
}
h4 + dl, .h4-style + dl {
margin-top: 1.5em;
}
h4 + button, .h4-style + button {
margin-top: 2em;
}
/* p + immediate sibling
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
p + p, p + .p-style, .p-style + p, .p-style + .p-style {
margin-top: 1.5em;
}
p + h2, p + .h2-style, .p-style + h2, .p-style + .h2-style {
margin-top: 1.6667em;
}
p + h3, p + .h3-style, .p-style + h3, .p-style + .h3-style {
margin-top: 2em;
}
p + h4, p + .h4-style, .p-style + h4, .p-style + .h4-style {
margin-top: 1.7778em;
}
p + h5, p + .h5-style, .p-style + h5, .p-style + .h5-style {
margin-top: 4.8em;
}
p + dl, .p-style + dl {
margin-top: 1.15em;
}
p + .block-link, .p-style + .block-link {
margin-top: 2em;
}
@media only screen and (max-width: 780px) {
p + .block-link, .p-style + .block-link {
margin-top: 1.5em;
}
}
p + .secondary-button, .p-style + .secondary-button {
margin-top: 3em;
}
/* h5 + immediate sibling
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
h5.sub-line + h2, h5.sub-line + .h2-style {
margin-top: 0.8888888em;
}
.h5-style.sub-line + h2, .h5-style.sub-line + .h2-style {
margin-top: 0.8888888em;
}
h5.sub-line + h3, h5.sub-line + .h3-style {
margin-top: 1.3333em;
}
.h5-style.sub-line + h3, .h5-style.sub-line + .h3-style {
margin-top: 1.3333em;
}
p.sub-line + h2, p.sub-line + .h2-style {
margin-top: 0.8888888em;
}
/* Lists
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.bullets + p, .bullets + .p-style {
margin-top: 2em;
}
.bullets + h2, .bullets + .h2-style {
margin-top: 1.6667em;
}
.bullets + h3, .bullets + .h3-style {
margin-top: 2em;
}
.bullets + h4, .bullets + .h4-style {
margin-top: 1.7778em;
}
dl + p, dl + .p-style {
margin-top: 2em;
}
dl + h2, dl + .h2-style {
margin-top: 1.6667em;
}
dl + h3, dl + .h3-style {
margin-top: 2em;
}
dl + h4, dl + .h4-style {
margin-top: 1.7778em;
}
.numbers + p, .numbers + .p-style {
margin-top: 2em;
}
.numbers + h2, .numbers + .h2-style {
margin-top: 1.6667em;
}
.numbers + h3, .numbers + .h3-style {
margin-top: 2em;
}
.numbers + h4, .numbers + .h4-style {
margin-top: 1.7778em;
}
/* .block-link + immediate sibling
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.block-link + h3, .block-link + .h3-style {
margin-top: 2em;
}
/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Lists
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.bullets li, .numbers li {
box-sizing: border-box;
break-inside: avoid;
color: #707070;
display: inline-block;
font-size: 1.6rem;
font-weight: 400;
margin-top: 1.5em;
padding-left: 3.25em;
position: relative;
width: 100%;
}
.bullets li::before, .numbers li::before {
left: 1.5em;
position: absolute;
}
.bullets li::before {
background: white;
border: 2px solid #8fd8f2;
border-radius: 100%;
content: "";
height: 2px;
top: 0.7em;
width: 2px;
}
.bullets li li::before {
background: #8fd8f2;
border: none;
border-radius: 0;
height: 5px;
top: 0.7em;
width: 5px;
}
dl dd {
font-size: 1.6rem;
}
dl dt {
font-size: 1.6rem;
font-weight: 700;
margin-top: 1.5em;
}
dl dt:first-child {
margin-top: 0;
}
main:has(.numbers[data-split-list]) {
counter-reset: split-counter;
}
.numbers {
counter-reset: counter;
}
.numbers[data-split-list] {
counter-increment: split-counter;
}
.numbers[data-split-list] li::before {
content: counter(split-counter) ". ";
}
.numbers li {
counter-increment: counter;
}
.numbers li > ol {
counter-reset: inner-counter;
}
.numbers li > ol > li {
counter-increment: inner-counter;
}
.numbers li > ol > li::before {
content: counter(inner-counter) ". ";
}
.numbers li::before {
color: #2d2d2d;
content: counter(counter) ". ";
font-weight: 700;
}
.numbers li > ul {
counter-reset: counter;
}
.numbers li > ul > li::before {
background: #8fd8f2;
border: none;
border-radius: 0;
content: "" !important;
height: 5px;
top: 0.7em;
width: 5px;
}
ul.narrow-width,
ol.narrow-width {
max-width: 750px;
}
ul.tighten li,
ol.tighten li {
margin-top: 0.5em;
}
ul.tighten li:first-of-type,
ol.tighten li:first-of-type {
margin-top: 1em;
}
ul.two-col,
ol.two-col {
column-count: 2;
column-gap: 16px;
}
ul.three-col,
ol.three-col {
column-count: 3;
column-gap: 16px;
}
ul.four-col,
ol.four-col {
column-count: 4;
column-gap: 16px;
}
.mini-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
column-count: initial !important;
column-gap: initial !important;
}
.mini-nav li {
-ms-flex: 1 0 auto;
flex: 1 0 auto;
box-sizing: border-box;
padding: 12px 15px 0 0;
}
.mini-nav.two-col li {
width: 50%;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 780px) {
dl dd, dl dt {
font-size: 1.5rem;
}
ul.two-col, ul.three-col, ul.four-col, ol.two-col, ol.three-col, ol.four-col {
column-count: 1;
}
.mini-nav li {
padding-top: 12px;
width: 100% !important;
}
.bullets li {
font-size: 1.5rem;
}
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media only screen and (max-width: 670px) {
.bullets li, .numbers li {
font-size: 1.4rem;
padding-left: 2em;
}
.bullets li::before, .numbers li::before {
left: 0.8em;
}
dl dd, dl dt {
font-size: 1.4rem;
}
}
/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Global Table Styles
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
table.is-standard {
width: 100%;
margin-bottom: 40px;
padding-bottom: 40px;
}
* + table.is-standard {
margin-top: 40px;
padding-top: 40px;
}
@media only screen and (max-width: 970px) {
* + table.is-standard {
margin-top: 33px;
padding-top: 33px;
}
}
@media only screen and (max-width: 400px) {
* + table.is-standard {
margin-top: 27px;
padding-top: 27px;
}
}
@media only screen and (max-width: 970px) {
table.is-standard {
margin-bottom: 33px;
padding-bottom: 33px;
}
}
@media only screen and (max-width: 400px) {
table.is-standard {
margin-bottom: 27px;
padding-bottom: 27px;
}
}
table.is-standard thead tr th {
color: #2d2d2d;
font-family: "96 Sans Condensed", "96 Sans", Arial, sans-serif;
font-size: 1.8rem;
font-weight: 700;
height: 5.5em;
line-height: 1.4;
padding: 0.25em 2em;
position: relative;
text-align: left;
vertical-align: middle;
}
table.is-standard thead tr th + th {
border-left: solid 1px #d1e2e5;
}
table.is-standard tbody tr {
border-top: solid 1px #d1e2e5;
font-family: "96 Sans", Arial, sans-serif;
font-size: 1.2rem;
font-weight: 700;
}
table.is-standard tbody tr td {
font-size: 1.6rem;
font-weight: 400;
height: 5.5em;
padding: 0.25em 2em;
position: relative;
text-align: left;
vertical-align: middle;
}
table.is-standard tbody tr td + td {
border-left: solid 1px #d1e2e5;
}
table.is-standard tbody tr td > .is-duplicate-heading {
display: none;
}
table.is-standard.collapse-borders th + th,
table.is-standard.collapse-borders td + td {
border-left: none;
}
@media only screen and (max-width: 780px) {
table.is-standard tbody tr td {
text-align: center;
}
table.is-standard.collapse-borders th + th,
table.is-standard.collapse-borders td + td {
border-left: solid 1px #d1e2e5;
}
table.is-standard.collapse-borders td {
padding-bottom: 0;
}
table.is-standard.collapse-borders td + td {
border-top: none;
margin-top: 0;
padding-top: 1em;
padding-bottom: 2em;
}
}
@media only screen and (max-width: 780px) {
table.is-standard thead {
display: none;
}
table.is-standard tbody tr {
border: none;
border-bottom: solid 1px #d1e2e5;
display: block;
}
table.is-standard tbody tr + tr {
margin-top: 2.4rem;
}
table.is-standard tbody tr td {
border-left: solid 1px #d1e2e5;
border-right: solid 1px #d1e2e5;
border-top: solid 1px #d1e2e5;
box-sizing: border-box;
display: block;
font-size: 1.4rem;
height: auto;
padding: 2em;
width: 100%;
}
table.is-standard tbody tr td > .is-duplicate-heading {
color: #2d2d2d;
display: block;
font-family: "96 Sans Condensed", "96 Sans", Arial, sans-serif;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.4;
margin-bottom: 0.5rem;
position: relative;
text-align: center;
}
table.is-standard.three-col tr td:first-child span.is-duplicate-heading {
display: none;
}
}
/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
body.disable-focus-state *:focus {
outline: 0 !important;
}
.focused,
*:focus {
outline: -webkit-focus-ring-color none 0 !important;
outline: 3px dashed #0077B3 !important;
outline-offset: -3px !important;
}
#area-bltda8ce5ad1b37d593 a:focus {
outline: -webkit-focus-ring-color none 0 !important;
outline: 5px dashed #0077b3 !important;
outline-offset: -3px !important;
}
.sr-only {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.display-none {
display: none !important;
}
.display-block {
display: block !important;
}
.word-break {
word-break: break-all;
}
.visibility-hidden {
visibility: hidden !important;
}
.visibility-visible {
visibility: visible !important;
}
/* Targets displays using any of Windows' High Contrast Mode themes: */
@media screen and (-ms-high-contrast: active) {
img[src*=".svg"] {
filter: invert(100%);
}
}
/* Targets displays using the Windows' "High Contrast Black" theme: */
@media screen and (-ms-high-contrast: white-on-black) {
img[src*=".svg"] {
filter: invert(100%);
}
}
/* Targets displays using the Windows' "High Contrast White" theme: */
@media screen and (-ms-high-contrast: black-on-white) {
img[src*=".svg"] {
filter: invert(0%);
}
}
/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
[disclosuretip-trigger] {
unicode-bidi: embed;
white-space: nowrap;
}
[disclosuretip-trigger] .disclosure-anchor {
display: inline-block;
padding: 0 0.15em;
}
[disclosuretip-trigger] .disclosure-anchor span {
border-bottom: 1px solid var(--color, #2d2d2d);
color: var(--color, #2d2d2d);
display: inline-block;
line-height: 0.7;
text-decoration: none;
}
[disclosuretip-trigger] .disclosure-anchor:hover span, [disclosuretip-trigger] .disclosure-anchor:focus span {
border-bottom: none !important;
color: var(--color, #0077B3) !important;
}
[disclosuretip-trigger] .disclosure-anchor.asteriskSymbol span {
font-size: 1.2em;
line-height: 0.2;
}
[disclosuretip-trigger] .disclosure-anchor.textSymbol span, [disclosuretip-trigger] .disclosure-anchor.sectionSymbol span {
font-size: 0.5em;
padding-bottom: 0.4em;
position: relative;
top: -0.6em;
}
[disclosuretip-trigger] .disclosure-anchor.deltaSymbol, [disclosuretip-trigger] .disclosure-anchor.plusSymbol {
font-size: 1em;
}
[disclosuretip-trigger] .disclosure-anchor.deltaSymbol span, [disclosuretip-trigger] .disclosure-anchor.plusSymbol span {
font-size: 0.6em;
padding-bottom: 0.2em;
position: relative;
top: -0.4em;
}
[disclosuretip-trigger] .disclosure-anchor .tool-tip {
unicode-bidi: normal;
white-space: normal;
}
body:not(.disable-focus-state) #site [disclosuretip-trigger] .disclosure-anchor:focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed #0077B3;
outline-offset: -3px;
}
[disclosuretip-trigger][tooltip-open] .disclosure-anchor span {
border-bottom: none;
}
[disclosuretip-trigger].link-adjacent .disclosure-anchor span, .bullets li [disclosuretip-trigger].link-adjacent .disclosure-anchor span {
--color: #0077B3;
}
[disclosuretip-trigger].wj-adjacent {
margin-left: -0.25em;
}
.products-bundle-title [disclosuretip-trigger] .disclosure-anchor {
display: inline-block;
}
[data-disclosure-area] {
/* Global disclosure styles for MMA modules
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
}
[data-disclosure-area] .disclosure p {
color: var(--color, #707070);
font-size: 1.3rem;
margin-top: 16px;
}
[data-disclosure-area] .disclosure .disclosure-prompt {
color: var(--color, #707070);
white-space: nowrap;
}
[data-disclosure-area] .disclosure .disclosure-prompt:hover {
text-decoration: none;
}
body[data-version="msie 11"] .deltaSymbol span, body[data-version="msie 11"] .plusSymbol span {
font-size: 1.1rem !important;
}
body[data-version="msie 11"] .textSymbol span,
body[data-version="msie 11"] .sectionSymbol span {
font-size: 0.73em !important;
}
.brackets [disclosuretip-trigger] .disclosure-anchor.asteriskSymbol span {
font-size: 0.75em;
}
/* Disclosure tooltip size adjustments
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
h1 [disclosuretip-trigger],
.h1-style [disclosuretip-trigger] {
font-size: 0.4em;
top: -0.5em;
}
.h1-subhead [disclosuretip-trigger] {
font-size: 0.9em;
top: -0.1em;
--color: #707070;
}
h2 [disclosuretip-trigger],
.h2-style [disclosuretip-trigger] {
top: -0.3em;
}
h3 [disclosuretip-trigger],
.h3-style [disclosuretip-trigger] {
font-size: 0.8em;
top: -0.1em;
}
.h3-subhead [disclosuretip-trigger] {
font-size: 1em;
top: -0.2em;
}
h4 [disclosuretip-trigger],
.h4-style [disclosuretip-trigger] {
font-size: 0.9em;
top: -0.1em;
}
h5 [disclosuretip-trigger],
.h5-style [disclosuretip-trigger] {
font-size: 1.2em;
top: -0.1em;
}
.h5-subhead [disclosuretip-trigger] {
font-size: 1.1em;
top: -0.15em;
--color: #707070;
}
p [disclosuretip-trigger],
.p-style [disclosuretip-trigger],
.bullets li [disclosuretip-trigger],
.numbers li [disclosuretip-trigger] {
font-size: 1.1em;
top: -0.1em;
--color: #2d2d2d;
}
.mobile-homepage .products-wrap .heading [disclosuretip-trigger] {
--color: #2d2d2d;
}
.qs-overlay .bundle .copy [disclosuretip-trigger] {
--color: #2d2d2d;
}
/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.notification {
border-radius: 5px;
margin-bottom: 1.5rem;
margin-top: 1.5rem;
padding: 1.4rem;
/* Notification Types
/* - - - - - - - - - - - - - - - - - - - - - - - */
}
.notification .notification-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
}
.notification .notification-inner p {
color: #2d2d2d;
display: inline-block;
}
.notification[data-type=error] {
background-color: #fceff2;
border: 2px solid #d41659;
}
.notification[data-type=error] .icon-anchor::before {
background-image: url("/Content/images/DomainProgressive/wh3/notifications/error.svg");
}
.notification[data-type=info] {
background-color: #f5f1f9;
border: 2px solid #c973c9;
}
.notification[data-type=info] .icon-anchor::before {
background-image: url("/Content/images/DomainProgressive/wh3/notifications/info.svg");
}
.notification[data-type=success] {
background-color: #effbf7;
border: 2px solid #08caa9;
}
.notification[data-type=success] .icon-anchor::before {
background-image: url("/Content/images/DomainProgressive/wh3/notifications/success.svg");
}
.notification[data-type=warn] {
background-color: #fff8e5;
border: 2px solid #efab00;
}
.notification[data-type=warn] .icon-anchor::before {
background-image: url("/Content/images/DomainProgressive/wh3/notifications/warning.svg");
}
.notification .icon-anchor {
margin-right: 1rem;
}
.notification .icon-anchor::before {
background-repeat: no-repeat;
background-size: contain;
content: "";
display: inline-block;
height: 18px;
position: relative;
top: 7px;
width: 18px;
}
/* MEDIA QUERIES */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - small */
@media only screen and (max-width: 970px) {
.notification .icon-anchor::before {
top: 5px;
}
}
#main {
background-color: #f3f9fc;
}
#header .header-inner {
height: 60px;
}
#searchContent {
background-color: #fff;
border-radius: 8px;
padding: 4em 5em;
}
#searchContent h3 a {
color: #2d2d2d;
}
#searchContent h3 a:hover {
text-decoration: none;
}
.result-listing:not(:last-child) {
margin-bottom: 4em;
padding-bottom: 4em;
}
.result-listing:not(:last-child), .category {
border-bottom: 1px solid #d1e2e5;
}
.breadcrumb-inner {
margin-left: 0;
}
.pagination-wrapper {
width: 100%;
}
.pagination {
text-align: right;
}
.pagination a {
color: #2d2d2d;
font-size: 1.5rem;
font-weight: 700;
margin: 0 0.5em;
}
.pagination a:hover {
text-decoration: none;
}
.pagination a.disabled {
font-weight: 400;
pointer-events: none;
text-decoration: none;
}
.pagination a.nextBtn {
border-left: 1px solid #2d2d2d;
padding-left: 0.8em;
text-transform: uppercase;
}
.pagination a.prevBtn {
display: none;
border-right: 1px solid #2d2d2d;
padding-right: 0.8em;
text-transform: uppercase;
}
.returnedResults {
display: block;
font-size: 3.6rem;
margin-top: 2rem;
font-weight: 300;
}
.filter-button {
transition: background 0.25s;
display: none;
background: white;
border: 1px solid #d1e2e5;
border-radius: 8px;
align-items: center;
margin: 2.5rem 0;
padding: 1.25rem 1.375rem;
cursor: pointer;
color: #2d2d2d;
}
.filter-button:hover, .filter-button:focus {
background: #f8f8f8;
}
body:not(.disable-focus-state) #site .filter-button:focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed #0077B3;
outline-offset: -3px;
}
.filter-button .svg-wrap {
display: block;
height: 100%;
flex: 0 0 1.6em;
color: #2d2d2d;
}
.filter-button .svg-wrap svg {
display: block;
height: 100%;
width: 100%;
fill: #2d2d2d;
}
.filter-button span {
display: block;
flex: 0 1 auto;
width: 100%;
font-size: 1.2rem;
text-transform: uppercase;
font-family: "96 Sans", Arial, sans-serif;
font-weight: 700;
letter-spacing: 1.2px;
margin-left: 1rem;
}
.filter-wrapper {
padding-right: 4em;
}
.filter-wrapper .heading {
display: block;
}
.filter-wrapper .category {
margin-bottom: 1em;
padding-bottom: 0.5em;
font-size: 1.6rem;
display: block;
font-family: "96 Sans";
color: #2d2d2d;
font-weight: 600;
}
.filter-wrapper ul {
margin-bottom: 1em;
}
.filter-wrapper button {
background: none;
border: none;
color: #2d2d2d;
cursor: pointer;
font-family: "96 Sans", Arial, sans-serif;
margin: 0 0 1.5rem 1.5rem;
text-align: left;
font-size: 1.6rem;
padding: 0;
}
.filter-wrapper button:hover {
text-decoration: underline;
}
.search-area {
padding: 3em 0;
background: transparent linear-gradient(222deg, #36639F 0%, #0A3360 46%, #7C3A88 100%) 0% 0% no-repeat padding-box;
}
.search-wrap {
max-width: 60%;
margin: 0 auto;
}
.search-wrap > h1 {
color: white;
}
.search-box {
position: relative;
background: white;
border-radius: 5px;
padding: 1em;
margin-top: 2em;
display: flex;
height: 4em;
align-items: center;
}
.search-label {
display: block;
height: 100%;
padding: 0 1rem;
flex: 0 0 2.2em;
cursor: pointer;
color: #2d2d2d;
}
.search-label svg {
display: block;
height: 100%;
width: 100%;
fill: #2d2d2d;
}
.search-input {
flex: 0 1 auto;
width: 100%;
margin: 0 1rem 0 0;
padding: 0 1rem;
height: 100%;
box-sizing: border-box;
border: none;
background: white;
}
.search-input.focus-style-disabled {
outline: none !important;
outline-offset: 0 !important;
}
.search-button {
transition: background 0.3s ease-in-out;
border: 1px solid var(--button-border, #0077B3);
border-radius: 5px;
box-sizing: border-box;
cursor: pointer;
font-family: "96 Sans", Arial, sans-serif;
font-size: 2.4rem;
font-weight: 700;
line-height: 1;
padding: var(--button-padding, 1.125em 1.333em 1.375em 1.4em);
text-align: center;
text-decoration: none;
white-space: nowrap;
background-color: var(--button-bg, #0077B3);
color: var(--button-color, white);
flex: 0 0 5rem;
height: 100%;
padding: 1rem 3.25rem;
font-size: 1.8rem !important;
margin: 0 !important;
}
@media only screen and (max-width: 970px) {
.search-button {
font-size: 2.2rem;
}
}
@media only screen and (max-width: 780px) {
.search-button {
font-size: 2rem;
}
}
@media only screen and (max-width: 670px) {
.search-button {
font-size: 1.8rem;
}
}
.search-button:hover, .search-button:focus {
background-color: var(--button-hover-bg, #2862a4);
color: var(--button-hover-color, white);
}
body:not(.disable-focus-state) .search-button:focus {
outline: -webkit-focus-ring-color none 0;
outline: 3px dashed white !important;
}
.is-microsoft:not(.disable-focus-state) .search-button:focus {
outline: 3px dashed #2862a4 !important;
outline-offset: 0 !important;
}
.autocomplete-area {
transition: opacity 0.25s;
overflow: hidden;
position: absolute;
display: block;
box-sizing: border-box;
top: calc(100% - 5px);
padding-top: 5px;
left: 0;
right: 0;
width: 100%;
background: white;
border-radius: 0 0 8px 8px;
box-shadow: 0px 30px 30px -10px rgba(21, 52, 93, 0.15);
display: none;
visibility: hidden;
opacity: 0;
z-index: 1000;
}
.autocomplete-area.is-visible {
opacity: 1;
}
.autocomplete-area.has-results {
display: block;
visibility: visible;
}
.autocomplete-area:before {
content: "";
display: block;
width: calc(100% - 2rem);
height: 1px;
background-color: #D2E2E5;
margin: 0 1rem;
box-sizing: border-box;
}
.no-results-message {
display: none;
color: #2d2d2d;
font-family: "96 Sans", Arial, sans-serif;
font-weight: 700;
font-size: 1.25rem;
text-align: center;
width: 100%;
margin: 1rem 0;
}
.results-span {
display: none;
color: #2d2d2d;
font-family: "96 Sans", Arial, sans-serif;
font-weight: 700;
font-size: 1.5rem;
text-align: center;
width: 100%;
margin: 1rem 0;
}
.autocomplete-list {
padding: 1rem 0;
}
.footer .search-social .social li {
margin-left: 0;
margin: 0 1.2em;
}
.autocomplete-button {
transition: background 0.25s;
display: block;
padding: 1rem 1rem 1rem 6.2rem;
width: 100%;
height: 100%;
text-align: left;
cursor: pointer;
background: white;
font-family: "96 Sans", Arial, sans-serif;
border: none;
}
.autocomplete-button:hover, .autocomplete-button:focus {
background: #F4F7FC;
}
.autocomplete-button.has-visual-focus {
background: #F4F7FC;
outline: 3px dashed #0077B3 !important;
outline-offset: -3px !important;
}
.skip-content-area {
left: 0;
position: absolute;
top: 65px;
}
.skip-content-area a {
background: white;
color: #2d2d2d;
font-size: 1.2rem;
left: -10000px;
min-width: 12em;
padding: 1.5em 1em;
position: absolute;
text-align: center;
top: 0;
}
.skip-content-area a:focus {
left: 0;
z-index: 10000;
}
.skip-content-area a:hover {
text-decoration: none;
}
@media only screen and (max-width: 970px) {
.search-wrap {
max-width: 75%;
}
}
@media only screen and (max-width: 780px) {
.search-wrap {
max-width: 80%;
}
.returnedResults {
font-size: 2.2rem;
margin-top: 3.2rem;
}
.filter-wrapper {
display: none;
}
.filter-wrapper.is-visible {
display: block;
}
.filter-wrapper .heading {
display: none;
}
.filter-button {
display: flex;
}
}
@media only screen and (max-width: 670px) {
.search-area {
padding: 3em 2.5em;
}
.search-wrap {
max-width: 100%;
}
.search-button {
padding: 1rem 2rem;
}
}
@media only screen and (max-width: 400px) {
.search-box {
height: auto;
padding: 0.5em 0.5em 1em 0.5em;
flex-wrap: wrap;
}
.search-input {
width: calc(100% - 4.2rem);
margin-right: 0;
height: 4rem;
}
.search-button {
position: relative;
display: block;
flex: 0 1 auto;
width: 100%;
padding: 1rem;
margin-top: 2rem !important;
}
.search-button:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -1rem;
display: block;
width: 100%;
height: 1px;
background-color: #D2E2E5;
box-sizing: border-box;
}
.autocomplete-area {
box-shadow: 0px 30px 30px -5px rgba(21, 52, 93, 0.15);
}
.autocomplete-button {
padding: 1rem 1rem 1rem 3rem;
}
}