@charset "UTF-8";
/* ==========================================================================
Bourbon
========================================================================== */
/* ==========================================================================
#Grid Settings
========================================================================== */
/* Grid variables
========================================================================== */
/* Media Queries
========================================================================== */
@import url("//hello.myfonts.net/count/3367cf");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");
@import '../../bower_components/parsleyjs/src/parsley.css';
@import '../../bower_components/slick-carousel/slick/slick.css';
@import '../../bower_components/slick-carousel/slick/slick-theme.css';
@import '../../bower_components/magnific-popup/dist/magnific-popup.css';
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *::after, *::before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
/* ==========================================================================
#Global variables
========================================================================== */
@font-face {
font-family: "OldStyleMT-Regular";
src: url("../../fonts/3367CF_0_0.eot");
src: url("../../fonts/3367CF_0_0.eot?#iefix") format("embedded-opentype"), url("../../fonts/3367CF_0_0.woff2") format("woff2"), url("../../fonts/3367CF_0_0.woff") format("woff"), url("../../fonts/3367CF_0_0.ttf") format("truetype");
}
/*@import url('https://fonts.googleapis.com/css?family=Besley:400,500,600,700');*/
@font-face {
font-family: "FontAwesome";
src: url("../../fonts/fontawesome-webfont.eot?v=4.7.0");
src: url("../../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../../fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
font-weight: normal;
font-style: normal;
}
/* ==========================================================================
Fonts
========================================================================== */
/*$f-serif2: 'Besley', serif;*/
/* ==========================================================================
Misc
========================================================================== */
/* ==========================================================================
Spacing
========================================================================== */
/* ==========================================================================
Anchor offset for fixed headers
========================================================================== */
/* ==========================================================================
Custon xsmall-only sizes
========================================================================== */
/* ==========================================================================
Colors
========================================================================== */
/*doc
---
title: Colors
name: colors
category: Base - Colors
---
t-bg-black
t-bg-white
t-bg-primary
t-bg-secondary
t-bg-dusty-gray
t-bg-light-gray
t-bg-accent-green
t-bg-accent-yellow
t-bg-accent-blue
*/
.c-color-swatch {
border: 1px solid #ccc;
display: inline-block;
width: 300px;
height: 200px;
margin: 1.5rem;
padding: 1.5rem;
}
/* ==========================================================================
#Mixins
========================================================================== */
/* Grid class generator
========================================================================== */
@media screen and (min-width: 0) {
.sm-1 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 4.9010941203%;
}
.sm-1:last-child {
margin-right: 0;
}
.sm-2 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 13.5464492002%;
}
.sm-2:last-child {
margin-right: 0;
}
.sm-3 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 22.1918042802%;
}
.sm-3:last-child {
margin-right: 0;
}
.sm-4 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 30.8371593602%;
}
.sm-4:last-child {
margin-right: 0;
}
.sm-5 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 39.4825144402%;
}
.sm-5:last-child {
margin-right: 0;
}
.sm-6 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 48.1278695201%;
}
.sm-6:last-child {
margin-right: 0;
}
.sm-7 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 56.7732246001%;
}
.sm-7:last-child {
margin-right: 0;
}
.sm-8 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 65.4185796801%;
}
.sm-8:last-child {
margin-right: 0;
}
.sm-9 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 74.0639347601%;
}
.sm-9:last-child {
margin-right: 0;
}
.sm-10 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 82.70928984%;
}
.sm-10:last-child {
margin-right: 0;
}
.sm-11 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 91.35464492%;
}
.sm-11:last-child {
margin-right: 0;
}
.sm-12 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 100%;
}
.sm-12:last-child {
margin-right: 0;
}
}
@media screen and (min-width: 640px) {
.md-1 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 4.9010941203%;
}
.md-1:last-child {
margin-right: 0;
}
.md-2 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 13.5464492002%;
}
.md-2:last-child {
margin-right: 0;
}
.md-3 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 22.1918042802%;
}
.md-3:last-child {
margin-right: 0;
}
.md-4 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 30.8371593602%;
}
.md-4:last-child {
margin-right: 0;
}
.md-5 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 39.4825144402%;
}
.md-5:last-child {
margin-right: 0;
}
.md-6 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 48.1278695201%;
}
.md-6:last-child {
margin-right: 0;
}
.md-7 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 56.7732246001%;
}
.md-7:last-child {
margin-right: 0;
}
.md-8 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 65.4185796801%;
}
.md-8:last-child {
margin-right: 0;
}
.md-9 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 74.0639347601%;
}
.md-9:last-child {
margin-right: 0;
}
.md-10 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 82.70928984%;
}
.md-10:last-child {
margin-right: 0;
}
.md-11 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 91.35464492%;
}
.md-11:last-child {
margin-right: 0;
}
.md-12 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 100%;
}
.md-12:last-child {
margin-right: 0;
}
}
@media screen and (min-width: 1024px) {
.lg-1 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 4.9010941203%;
}
.lg-1:last-child {
margin-right: 0;
}
.lg-2 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 13.5464492002%;
}
.lg-2:last-child {
margin-right: 0;
}
.lg-3 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 22.1918042802%;
}
.lg-3:last-child {
margin-right: 0;
}
.lg-4 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 30.8371593602%;
}
.lg-4:last-child {
margin-right: 0;
}
.lg-5 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 39.4825144402%;
}
.lg-5:last-child {
margin-right: 0;
}
.lg-6 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 48.1278695201%;
}
.lg-6:last-child {
margin-right: 0;
}
.lg-7 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 56.7732246001%;
}
.lg-7:last-child {
margin-right: 0;
}
.lg-8 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 65.4185796801%;
}
.lg-8:last-child {
margin-right: 0;
}
.lg-9 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 74.0639347601%;
}
.lg-9:last-child {
margin-right: 0;
}
.lg-10 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 82.70928984%;
}
.lg-10:last-child {
margin-right: 0;
}
.lg-11 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 91.35464492%;
}
.lg-11:last-child {
margin-right: 0;
}
.lg-12 {
float: left;
display: block;
margin-right: 3.7442609597%;
width: 100%;
}
.lg-12:last-child {
margin-right: 0;
}
}
@media screen and (min-width: 0) {
.sm-shift-1 {
margin-left: 8.64535508%;
}
.sm-shift-2 {
margin-left: 17.29071016%;
}
.sm-shift-3 {
margin-left: 25.9360652399%;
}
.sm-shift-4 {
margin-left: 34.5814203199%;
}
.sm-shift-5 {
margin-left: 43.2267753999%;
}
.sm-shift-6 {
margin-left: 51.8721304799%;
}
.sm-shift-7 {
margin-left: 60.5174855598%;
}
.sm-shift-8 {
margin-left: 69.1628406398%;
}
.sm-shift-9 {
margin-left: 77.8081957198%;
}
.sm-shift-10 {
margin-left: 86.4535507998%;
}
.sm-shift-11 {
margin-left: 95.0989058797%;
}
.sm-shift-12 {
margin-left: 103.7442609597%;
}
}
@media screen and (min-width: 640px) {
.md-shift-1 {
margin-left: 8.64535508%;
}
.md-shift-2 {
margin-left: 17.29071016%;
}
.md-shift-3 {
margin-left: 25.9360652399%;
}
.md-shift-4 {
margin-left: 34.5814203199%;
}
.md-shift-5 {
margin-left: 43.2267753999%;
}
.md-shift-6 {
margin-left: 51.8721304799%;
}
.md-shift-7 {
margin-left: 60.5174855598%;
}
.md-shift-8 {
margin-left: 69.1628406398%;
}
.md-shift-9 {
margin-left: 77.8081957198%;
}
.md-shift-10 {
margin-left: 86.4535507998%;
}
.md-shift-11 {
margin-left: 95.0989058797%;
}
.md-shift-12 {
margin-left: 103.7442609597%;
}
}
@media screen and (min-width: 1024px) {
.lg-shift-1 {
margin-left: 8.64535508%;
}
.lg-shift-2 {
margin-left: 17.29071016%;
}
.lg-shift-3 {
margin-left: 25.9360652399%;
}
.lg-shift-4 {
margin-left: 34.5814203199%;
}
.lg-shift-5 {
margin-left: 43.2267753999%;
}
.lg-shift-6 {
margin-left: 51.8721304799%;
}
.lg-shift-7 {
margin-left: 60.5174855598%;
}
.lg-shift-8 {
margin-left: 69.1628406398%;
}
.lg-shift-9 {
margin-left: 77.8081957198%;
}
.lg-shift-10 {
margin-left: 86.4535507998%;
}
.lg-shift-11 {
margin-left: 95.0989058797%;
}
.lg-shift-12 {
margin-left: 103.7442609597%;
}
}
/* Palette mixin
========================================================================== */
/* Font size mixin
========================================================================== */
/* Other mixins
========================================================================== */
@keyframes fadeInOverlay {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
@-webkit-keyframes fadeInOverlay {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
@media screen and (min-width: 1024px) {
.t-width__large--1 {
min-width: calc(1 / 100 * 100%);
max-width: calc(1 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--2 {
min-width: calc(2 / 100 * 100%);
max-width: calc(2 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--3 {
min-width: calc(3 / 100 * 100%);
max-width: calc(3 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--4 {
min-width: calc(4 / 100 * 100%);
max-width: calc(4 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--5 {
min-width: calc(5 / 100 * 100%);
max-width: calc(5 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--6 {
min-width: calc(6 / 100 * 100%);
max-width: calc(6 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--7 {
min-width: calc(7 / 100 * 100%);
max-width: calc(7 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--8 {
min-width: calc(8 / 100 * 100%);
max-width: calc(8 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--9 {
min-width: calc(9 / 100 * 100%);
max-width: calc(9 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--10 {
min-width: calc(10 / 100 * 100%);
max-width: calc(10 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--11 {
min-width: calc(11 / 100 * 100%);
max-width: calc(11 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--12 {
min-width: calc(12 / 100 * 100%);
max-width: calc(12 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--13 {
min-width: calc(13 / 100 * 100%);
max-width: calc(13 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--14 {
min-width: calc(14 / 100 * 100%);
max-width: calc(14 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--15 {
min-width: calc(15 / 100 * 100%);
max-width: calc(15 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--16 {
min-width: calc(16 / 100 * 100%);
max-width: calc(16 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--17 {
min-width: calc(17 / 100 * 100%);
max-width: calc(17 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--18 {
min-width: calc(18 / 100 * 100%);
max-width: calc(18 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--19 {
min-width: calc(19 / 100 * 100%);
max-width: calc(19 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--20 {
min-width: calc(20 / 100 * 100%);
max-width: calc(20 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--21 {
min-width: calc(21 / 100 * 100%);
max-width: calc(21 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--22 {
min-width: calc(22 / 100 * 100%);
max-width: calc(22 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--23 {
min-width: calc(23 / 100 * 100%);
max-width: calc(23 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--24 {
min-width: calc(24 / 100 * 100%);
max-width: calc(24 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--25 {
min-width: calc(25 / 100 * 100%);
max-width: calc(25 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--26 {
min-width: calc(26 / 100 * 100%);
max-width: calc(26 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--27 {
min-width: calc(27 / 100 * 100%);
max-width: calc(27 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--28 {
min-width: calc(28 / 100 * 100%);
max-width: calc(28 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--29 {
min-width: calc(29 / 100 * 100%);
max-width: calc(29 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--30 {
min-width: calc(30 / 100 * 100%);
max-width: calc(30 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--31 {
min-width: calc(31 / 100 * 100%);
max-width: calc(31 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--32 {
min-width: calc(32 / 100 * 100%);
max-width: calc(32 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--33 {
min-width: calc(33 / 100 * 100%);
max-width: calc(33 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--34 {
min-width: calc(34 / 100 * 100%);
max-width: calc(34 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--35 {
min-width: calc(35 / 100 * 100%);
max-width: calc(35 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--36 {
min-width: calc(36 / 100 * 100%);
max-width: calc(36 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--37 {
min-width: calc(37 / 100 * 100%);
max-width: calc(37 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--38 {
min-width: calc(38 / 100 * 100%);
max-width: calc(38 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--39 {
min-width: calc(39 / 100 * 100%);
max-width: calc(39 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--40 {
min-width: calc(40 / 100 * 100%);
max-width: calc(40 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--41 {
min-width: calc(41 / 100 * 100%);
max-width: calc(41 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--42 {
min-width: calc(42 / 100 * 100%);
max-width: calc(42 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--43 {
min-width: calc(43 / 100 * 100%);
max-width: calc(43 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--44 {
min-width: calc(44 / 100 * 100%);
max-width: calc(44 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--45 {
min-width: calc(45 / 100 * 100%);
max-width: calc(45 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--46 {
min-width: calc(46 / 100 * 100%);
max-width: calc(46 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--47 {
min-width: calc(47 / 100 * 100%);
max-width: calc(47 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--48 {
min-width: calc(48 / 100 * 100%);
max-width: calc(48 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--49 {
min-width: calc(49 / 100 * 100%);
max-width: calc(49 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--50 {
min-width: calc(50 / 100 * 100%);
max-width: calc(50 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--51 {
min-width: calc(51 / 100 * 100%);
max-width: calc(51 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--52 {
min-width: calc(52 / 100 * 100%);
max-width: calc(52 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--53 {
min-width: calc(53 / 100 * 100%);
max-width: calc(53 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--54 {
min-width: calc(54 / 100 * 100%);
max-width: calc(54 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--55 {
min-width: calc(55 / 100 * 100%);
max-width: calc(55 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--56 {
min-width: calc(56 / 100 * 100%);
max-width: calc(56 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--57 {
min-width: calc(57 / 100 * 100%);
max-width: calc(57 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--58 {
min-width: calc(58 / 100 * 100%);
max-width: calc(58 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--59 {
min-width: calc(59 / 100 * 100%);
max-width: calc(59 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--60 {
min-width: calc(60 / 100 * 100%);
max-width: calc(60 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--61 {
min-width: calc(61 / 100 * 100%);
max-width: calc(61 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--62 {
min-width: calc(62 / 100 * 100%);
max-width: calc(62 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--63 {
min-width: calc(63 / 100 * 100%);
max-width: calc(63 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--64 {
min-width: calc(64 / 100 * 100%);
max-width: calc(64 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--65 {
min-width: calc(65 / 100 * 100%);
max-width: calc(65 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--66 {
min-width: calc(66 / 100 * 100%);
max-width: calc(66 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--67 {
min-width: calc(67 / 100 * 100%);
max-width: calc(67 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--68 {
min-width: calc(68 / 100 * 100%);
max-width: calc(68 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--69 {
min-width: calc(69 / 100 * 100%);
max-width: calc(69 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--70 {
min-width: calc(70 / 100 * 100%);
max-width: calc(70 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--71 {
min-width: calc(71 / 100 * 100%);
max-width: calc(71 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--72 {
min-width: calc(72 / 100 * 100%);
max-width: calc(72 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--73 {
min-width: calc(73 / 100 * 100%);
max-width: calc(73 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--74 {
min-width: calc(74 / 100 * 100%);
max-width: calc(74 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--75 {
min-width: calc(75 / 100 * 100%);
max-width: calc(75 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--76 {
min-width: calc(76 / 100 * 100%);
max-width: calc(76 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--77 {
min-width: calc(77 / 100 * 100%);
max-width: calc(77 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--78 {
min-width: calc(78 / 100 * 100%);
max-width: calc(78 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--79 {
min-width: calc(79 / 100 * 100%);
max-width: calc(79 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--80 {
min-width: calc(80 / 100 * 100%);
max-width: calc(80 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--81 {
min-width: calc(81 / 100 * 100%);
max-width: calc(81 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--82 {
min-width: calc(82 / 100 * 100%);
max-width: calc(82 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--83 {
min-width: calc(83 / 100 * 100%);
max-width: calc(83 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--84 {
min-width: calc(84 / 100 * 100%);
max-width: calc(84 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--85 {
min-width: calc(85 / 100 * 100%);
max-width: calc(85 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--86 {
min-width: calc(86 / 100 * 100%);
max-width: calc(86 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--87 {
min-width: calc(87 / 100 * 100%);
max-width: calc(87 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--88 {
min-width: calc(88 / 100 * 100%);
max-width: calc(88 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--89 {
min-width: calc(89 / 100 * 100%);
max-width: calc(89 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--90 {
min-width: calc(90 / 100 * 100%);
max-width: calc(90 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--91 {
min-width: calc(91 / 100 * 100%);
max-width: calc(91 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--92 {
min-width: calc(92 / 100 * 100%);
max-width: calc(92 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--93 {
min-width: calc(93 / 100 * 100%);
max-width: calc(93 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--94 {
min-width: calc(94 / 100 * 100%);
max-width: calc(94 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--95 {
min-width: calc(95 / 100 * 100%);
max-width: calc(95 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--96 {
min-width: calc(96 / 100 * 100%);
max-width: calc(96 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--97 {
min-width: calc(97 / 100 * 100%);
max-width: calc(97 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--98 {
min-width: calc(98 / 100 * 100%);
max-width: calc(98 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--99 {
min-width: calc(99 / 100 * 100%);
max-width: calc(99 / 100 * 100%);
}
}
@media screen and (min-width: 1024px) {
.t-width__large--100 {
min-width: calc(100 / 100 * 100%);
max-width: calc(100 / 100 * 100%);
}
}
.h__widget--white-sand-default,
.h__widget--white-sand-default.t-bg-blue,
.h__widget--white-sand-default.t-bg-sand {
background-color: #fff;
}
.h__widget--white-sand-default .c-widget__main,
.h__widget--white-sand-default.t-bg-blue .c-widget__main,
.h__widget--white-sand-default.t-bg-sand .c-widget__main {
background-color: #e8e8de;
border-radius: 5px;
color: #0c0c0c;
padding: 40px;
}
.h__widget--white-sand-default .c-widget__main .c-default-text__subheadline,
.h__widget--white-sand-default.t-bg-blue .c-widget__main .c-default-text__subheadline,
.h__widget--white-sand-default.t-bg-sand .c-widget__main .c-default-text__subheadline {
border-color: #0c0c0c;
color: #0c0c0c;
font-family: "Roboto", sans-serif;
}
.h__widget--white-sand-default .c-widget__main ul li,
.h__widget--white-sand-default.t-bg-blue .c-widget__main ul li,
.h__widget--white-sand-default.t-bg-sand .c-widget__main ul li {
margin-bottom: 0.65rem;
}
.h__widget--sand-white-default,
.h__widget--sand-white-default.t-bg-white,
.h__widget--sand-white-default.t-bg-blue {
background-color: #e8e8de;
}
.h__widget--sand-white-default .c-widget__main,
.h__widget--sand-white-default.t-bg-white .c-widget__main,
.h__widget--sand-white-default.t-bg-blue .c-widget__main {
background-color: #fff;
border-radius: 5px;
color: #0c0c0c;
padding: 40px;
}
.h__widget--sand-white-default .c-widget__main .c-default-text__subheadline,
.h__widget--sand-white-default.t-bg-white .c-widget__main .c-default-text__subheadline,
.h__widget--sand-white-default.t-bg-blue .c-widget__main .c-default-text__subheadline {
border-color: #0c0c0c;
color: #0c0c0c;
font-family: "Roboto", sans-serif;
}
.h__widget--sand-white-default .c-widget__main ul li,
.h__widget--sand-white-default.t-bg-white .c-widget__main ul li,
.h__widget--sand-white-default.t-bg-blue .c-widget__main ul li {
margin-bottom: 0.65rem;
}
.h__widget--white-blue-white,
.h__widget--white-blue-white.t-bg-blue,
.h__widget--white-blue-white.t-bg-sand {
background-color: #fff;
}
.h__widget--white-blue-white .c-widget__main,
.h__widget--white-blue-white.t-bg-blue .c-widget__main,
.h__widget--white-blue-white.t-bg-sand .c-widget__main {
background-color: #0f324e;
border-radius: 5px;
color: #fff;
padding: 40px;
}
.h__widget--white-blue-white .c-widget__main .c-default-text__subheadline,
.h__widget--white-blue-white.t-bg-blue .c-widget__main .c-default-text__subheadline,
.h__widget--white-blue-white.t-bg-sand .c-widget__main .c-default-text__subheadline {
border-color: #fff;
color: #fff;
font-family: "Roboto", sans-serif;
}
.h__widget--white-blue-white .c-widget__main ul li,
.h__widget--white-blue-white.t-bg-blue .c-widget__main ul li,
.h__widget--white-blue-white.t-bg-sand .c-widget__main ul li {
margin-bottom: 0.65rem;
}
.h__widget--blue-white--default,
.h__widget--blue-white--default.t-bg-white,
.h__widget--blue-white--default.t-bg-sand {
background-color: #0f324e;
}
.h__widget--blue-white--default .c-widget__main,
.h__widget--blue-white--default.t-bg-white .c-widget__main,
.h__widget--blue-white--default.t-bg-sand .c-widget__main {
background-color: #fff;
border-radius: 5px;
color: #0c0c0c;
padding: 40px;
}
.h__widget--blue-white--default .c-widget__main .c-default-text__subheadline,
.h__widget--blue-white--default.t-bg-white .c-widget__main .c-default-text__subheadline,
.h__widget--blue-white--default.t-bg-sand .c-widget__main .c-default-text__subheadline {
border-color: #0c0c0c;
color: #0c0c0c;
font-family: "Roboto", sans-serif;
}
.h__widget--blue-white--default .c-widget__main ul li,
.h__widget--blue-white--default.t-bg-white .c-widget__main ul li,
.h__widget--blue-white--default.t-bg-sand .c-widget__main ul li {
margin-bottom: 0.65rem;
}
/* ==========================================================================
#Admin bar overrides
========================================================================== */
.toolbar-bar {
display: none;
}
@media screen and (min-width: 1024px) {
.toolbar-bar {
display: block;
}
}
.toolbar-fixed,
.toolbar-horizontal,
.toolbar-vertical {
padding-top: 0 !important;
}
@media screen and (min-width: 1024px) {
.toolbar-fixed,
.toolbar-horizontal,
.toolbar-vertical {
padding-top: 39px !important;
}
}
.toolbar-tray-open.toolbar-horizontal .c-page-head {
top: 78px;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
margin-left: 0;
}
}
body.toolbar-tray-open.toolbar-vertical.toolbar-fixed .toolbar-tray-open.toolbar-horizontal .c-page-head {
top: 0;
}
@media screen and (min-width: 1024px) {
.toolbar-tray-open {
padding-top: 79px !important;
}
}
/**
* DRUPAL: Begin system.base.css.
*/
/**
* @file
* Generic theme-independent base styles.
*/
.js .form-autocomplete {
background-image: url("/misc/throbber.gif");
background-position: 100% 2px; /* LTR */
background-repeat: no-repeat;
}
.js .throbbing {
background-position: 100% -18px; /* LTR */
}
.js .collapsed {
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
height: 1em;
}
.js .collapsed .fieldset-wrapper {
display: none;
}
.collapsible {
position: relative;
}
.collapsible .fieldset-legend {
display: block;
}
.container-inline div,
.container-inline label {
display: inline;
}
.container-inline .fieldset-wrapper {
display: block;
}
.nowrap {
white-space: nowrap;
}
.js .js-hide {
display: none;
}
.element-hidden {
display: none;
}
.element-invisible {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
margin-bottom: 0;
}
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
position: static !important;
clip: auto;
overflow: visible;
height: auto;
}
.clearfix::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .clearfix {
height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
min-height: 1%;
}
/* Throbber */
.ajax-progress {
display: inline-block;
}
.ajax-progress .throbber {
background: transparent url("../../img/throbber-active.gif") no-repeat 0 center;
float: left; /* LTR */
height: 15px;
margin: 2px;
width: 15px;
}
.ajax-progress .message {
padding-left: 20px;
}
tr .ajax-progress .throbber {
margin: 0 2px;
}
.ajax-progress-bar {
width: 16em;
}
/**
* DRUPAL: End system.base.css.
*/
/**
* DRUPAL: contextual.css
*/
/**
* Contextual links regions.
*/
.contextual-region::after {
content: "";
display: table;
clear: both;
}
.contextual-region {
outline: none;
position: relative;
}
.contextual-links-region-active {
outline: #999 dashed 1px;
}
/**
* Contextual links.
*/
.contextual-links-wrapper {
display: none;
font-size: 90%;
position: absolute;
right: 5px; /* LTR */
top: 2px;
z-index: 999;
}
.contextual-links-wrapper a {
text-decoration: none;
}
.js .contextual-links-wrapper {
display: block;
}
.contextual-links-trigger {
background: transparent url("../../img/gear-select.png") no-repeat 2px 0;
border: 1px solid transparent;
display: none;
height: 18px;
margin: 0;
padding: 0 2px;
outline: none;
text-indent: 34px; /* LTR */
width: 28px;
overflow: hidden;
border-radius: 4px;
}
.contextual-links-trigger .contextual-links {
background-color: #fff;
border: 1px solid #ccc;
display: none;
margin: 0;
padding: 0.25em 0;
position: absolute;
right: 0;
text-align: left;
top: 18px;
white-space: nowrap;
border-radius: 4px 0 4px 4px; /* LTR */
}
.contextual-links-trigger:hover,
.contextual-links-active .contextual-links-trigger {
background-position: 2px -18px;
}
.contextual-links-active .contextual-links-trigger {
background-color: #fff;
border-color: #ccc;
border-bottom: 0;
position: relative;
z-index: 1;
border-radius: 4px 4px 0 0;
}
.contextual-links-region:hover .contextual-links-trigger,
.contextual-links-active .contextual-links-trigger,
.contextual-links-active .contextual-links {
display: block;
}
.contextual-links li {
line-height: 100%;
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
.contextual-links li a {
color: #333 !important;
display: block;
margin: 0.25em 0;
padding: 0.25em 1em 0.25em 0.5em;
}
.contextual-links li a:hover {
background-color: #bfdcee;
}
/**
* DRUPAL: End contextual.css
*/
/* DRUPAL: Fixes */
.boxes-box-controls,
.context-block-region {
display: none;
}
/* Fix padding error message issue with certain form types. */
.form-type-checkbox.error small,
.form-type-checkboxes.error small,
.form-item-radio.error small {
margin-top: 0;
}
/* Make FB Comments Responsive */
.fb-comments,
.fb-comments span,
.fb-comments.fb_iframe_widget span iframe {
width: 100% !important;
}
/* front end widget editing*/
.ui-widget-content #edit-widget-dialog .chosen-container.form-select {
display: none !important;
}
/* ==========================================================================
#Reset
========================================================================== */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dd,
ol,
ul,
form,
fieldset,
legend,
figure,
table,
th,
td,
caption,
hr {
margin: 0;
padding: 0;
}
abbr[title],
dfn[title] {
cursor: help;
}
u,
ins {
text-decoration: none;
}
ins {
border-bottom: 1px solid;
}
/* ==========================================================================
#Shared styles - Mainly for setting bottom margin
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
blockquote,
p,
address,
hr,
table,
fieldset,
figure,
pre,
input,
button,
.c-btn,
.c-cta-widget--embed .js-cm-submit-button,
.c-cta-widget--embed button[type=submit],
textarea {
margin: 0 0 1.3rem;
padding: 0;
}
/* ==========================================================================
#Page
- High level page styling, HTML tag only.
========================================================================== */
/*doc
---
title: Page
name: page
category: Base - Page
---
This file contains settings for the entire site with font-family, line-height,
and font size values. These should only be adjusted at the very beginning
of a project.
Variables can be found in `settings/_global.scss`.
```
html {
font-family: $f-sans;
line-height: $base-line-height; // usually 24px
font-size: $base-font-size-px; // usually 16px
overflow-y: scroll;
min-height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
```
*/
html,
body {
font-family: "Roboto", sans-serif;
line-height: 24px;
font-size: 17px;
overflow-y: visible;
min-height: 100%;
color: #373737;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
overflow-wrap: break-word;
}
@media screen and (min-width: 640px) {
html,
body {
line-height: 1.3;
font-size: 20px;
}
}
.has-background-gray {
background-color: #EEEEEE;
}
/* ==========================================================================
Form elements
========================================================================== */
/*doc
---
title: Forms
name: a_forms
category: Base - Forms
---
Default styling for form elements. All of the elements should be used within
a `
```
*/
[type=color], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], input:not([type]), textarea,
.chosen-container.chosen-container-single {
background-color: #FFFFFF;
border: 1px solid #BBBBBB;
padding: 0.85rem 0.7rem;
border-radius: 8px;
font-size: 0.85rem;
width: 100%;
max-width: 100%;
margin: 0 0 0.5rem;
}
[type=color]:focus, [type=date]:focus, [type=datetime]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, input:not([type]):focus, textarea:focus,
.chosen-container.chosen-container-single:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: 0;
}
.chosen-container.chosen-container-single {
padding: 0.375rem 0.7rem;
}
textarea {
min-height: 4.6875rem;
overflow: auto;
resize: vertical;
width: 100%;
}
/*doc
---
title: Fieldsets
name: d-fieldsets
category: Base - Forms
---
```html_example
```
*/
fieldset {
border: 1px solid #ddd;
margin: 0 0 0.65rem;
padding: 1.3rem;
}
[type=search] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/*doc
---
title: Checkbox/Radios
name: c-checkbox
category: Base - Forms
---
```html_example
Checkboxes:
Radio Buttons:
```
*/
[type=checkbox],
[type=radio] {
display: inline;
margin-right: 0.325rem;
}
[type=checkbox] + label,
[type=radio] + label {
display: inline-block;
}
[type=file] {
margin-bottom: 0.65rem;
width: 100%;
}
.form-checkboxes .form-item,
.form-radios .form-item {
margin-top: 0;
margin-bottom: 0;
}
.form-checkboxes .form-item:last-child,
.form-radios .form-item:last-child {
margin-bottom: 0.5rem;
}
/*doc
---
title: Select list
name: b-select-list
category: Base - Forms
---
```html_example
Select Element:
Option 1
Option 2
Option 3
Option 1
Option 2
Option 3
```
*/
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin-bottom: 1.3rem;
width: 100%;
max-width: 100%;
background-color: #FFFFFF;
border: 1px solid #BBBBBB;
padding: 0.85rem 0.7rem;
border-radius: 8px;
font-size: 0.85rem;
max-width: 100%;
margin: 0 0 0.5rem;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.7rem center;
background-size: 1.5em;
padding-right: 2.5rem;
}
select:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: 0;
}
.search-form input[type=search] {
font-size: 1.2rem;
font-weight: 300;
padding: 15px 20px;
background-position-y: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/** WEBFORM **/
.webform-flexbox {
margin-block: 0;
}
.webform-flexbox .webform-flexbox {
margin-block: 0;
}
.form-item {
margin-top: 0;
margin-bottom: 0;
}
/** FORM Action ***/
form.webform-submission-form .form-actions {
margin-bottom: 0;
}
form.webform-submission-form .form-actions .form-submit:last-child {
margin-bottom: 0;
}
/**** Floating Labels **** /
/* Autofill detection keyframes * /
@keyframes onAutoFillStart {
from {
opacity: 0.99;
}
to {
opacity: 1;
}
}
/* Floating Label Styles Main * /
.webform-submission-form {
/* Floating Label Styles * /
.form-item {
position: relative;
textarea,
input[type=text],
input[type=email],
input[type=password] {
padding: 1.45rem 0.9rem 0.5rem;
// border: 1px solid #D9D9D9;
transition: border-color 0.25s ease-in-out;
/* Trigger animation on autofill * /
animation-name: onAutoFillStart;
animation-duration: 0.001s;
animation-fill-mode: both;
}
}
/* Enhanced autofill detection * /
.form-item {
input,
textarea {
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
animation-name: onAutoFillStart;
animation-duration: 0.001s;
animation-fill-mode: both;
}
}
}
.form-item {
textarea,
input[type=text],
input[type=email],
input[type=password] {
&:focus {
outline: none;
border-color: #292929;
}
}
}
label {
position: absolute;
left: 0.9rem;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
line-height: 140%;
color: #303030;
pointer-events: none;
transition: all 0.2s ease;
z-index: 1;
font-weight: 500;
font-family: var(--wp--preset--font-family--primary);
&.active {
top: 0.4rem;
transform: translateY(0);
font-size: 14px;
}
}
}
*/
/* ==========================================================================
#Headings
========================================================================== */
/*doc
---
title: Headings
name: headings
category: Base - Headings
---
Default styling for headings 1-6
```html_example
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
```
*/
h1,
.alpha {
font-size: 5.25rem;
line-height: 1.2380952381;
line-height: 0.9;
font-family: "OldStyleMT-Regular", serif;
font-weight: 300;
color: #0c0c0c;
}
h2,
.beta {
font-size: 3rem;
line-height: 1.3;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #0c0c0c;
}
@media screen and (min-width: 0) and (max-width: 639px) {
h2,
.beta {
font-size: 1.5rem;
line-height: 1.2;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
h2,
.beta {
font-size: 2.2rem;
line-height: 1.2;
}
}
h3,
.gamma {
font-size: 2.25rem;
line-height: 1.1555555556;
font-family: "OldStyleMT-Regular", serif;
color: #0c0c0c;
}
h4,
.delta {
font-size: 2.25rem;
line-height: 1.1555555556;
font-family: "Roboto", sans-serif;
color: #0c0c0c;
}
h5,
.epsilon {
font-size: 1.88rem;
line-height: 1.3829787234;
font-family: "OldStyleMT-Regular", serif;
color: #0c0c0c;
}
h6,
.zeta,
.c-search-results .c-search-result__title {
font-size: 1.5rem;
line-height: 1.7333333333;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #0c0c0c;
}
.c-grid__main-title, .c-map-widget__headline, .c-faq-widget__title, .c-facts-widget__title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 1.75rem;
line-height: 1.3;
font-weight: 300;
}
@media screen and (min-width: 1024px) {
.c-grid__main-title, .c-map-widget__headline, .c-faq-widget__title, .c-facts-widget__title {
margin-bottom: 3rem;
}
}
/* ==========================================================================
#Images
========================================================================== */
/*doc
---
title: Images
name: images
category: Base - Images
---
Default styling for the image tag. This sets a `max-width` of 100%
to make all images responsive
```html_example
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
ut fermentum massa justo sit amet risus. Cras mattis consectetur purus
sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. By someone special
```
*/
blockquote {
font-family: "OldStyleMT-Regular", serif;
font-size: 1rem;
padding-left: 3rem;
}
blockquote cite {
display: block;
font-weight: 700;
}
/* ==========================================================================
#Links
========================================================================== */
/*doc
---
title: Links
name: links
category: Base - Links
---
Default styling for links.
```html_example
Content
```
*/
a {
color: #30a3f3;
text-decoration: none;
}
a:link,
a:visited {
color: #30a3f3;
}
a:hover {
color: rgb(13.1506849315, 139.1780821918, 226.8493150685);
}
a:active {
-webkit-transition: color 0.3s;
transition: color 0.3s;
color: rgb(13.1506849315, 139.1780821918, 226.8493150685);
}
/* ==========================================================================
#Lists
========================================================================== */
/*doc
---
title: Lists
name: lists
category: Base - Lists
---
Default styling for lists.
*/
ul,
ol {
list-style-type: disc;
padding: 0;
padding-left: 1.3rem;
font-size: 20px;
font-weight: 300;
}
ul.toolbar-menu,
ol.toolbar-menu {
font-size: 13px;
}
.c-list--default li {
margin-bottom: 48px;
}
/*doc
---
title: Unordered List
name: lists-u
category: Base - Lists
---
Unordered list default
```html_example
```
*/
/*doc
---
title: Ordered List
name: lists-o
category: Base - Lists
---
```html_example
List item 1
List item 2
```
*/
ol {
list-style-type: decimal;
padding-left: 1.3rem;
}
/*doc
---
title: Definition list
name: lists-d
category: Base - Lists
---
```html_example
Term
Description
Term
Description
```
*/
dl dt {
font-weight: bold;
}
dl dd {
margin: 0;
}
/*doc
---
title: Default text Lists
name: lists-default-text
category: Base - Lists
---
Unordered list in default text widget. Use this class: c-list--default to get the deep bottom margins when not in a default text widget.
```html_example
```
Ordered list in default text widget
```html_example
List item 1
List item 2
```
*/
.c-list--two-column {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
/* ==========================================================================
#Tables
========================================================================== */
/*doc
---
title: Tables
name: tables
category: Base - Tables
---
Default styling for tables.
```html_example
One column
Two column
Three column
One column
Two column
Three column
One column
Two column
Three column
One column
Two column
Three column
```
*/
table {
border-collapse: collapse;
-webkit-font-feature-settings: "kern", "liga", "tnum";
font-feature-settings: "kern", "liga", "tnum";
margin: 0.65rem 0;
table-layout: fixed;
width: 100%;
}
th {
border-bottom: 1px solid rgb(165.75, 165.75, 165.75);
font-weight: 600;
padding: 0.65rem 0;
text-align: left;
}
td {
border-bottom: 1px solid #ddd;
padding: 0.65rem 0;
}
tr,
td,
th {
vertical-align: middle;
}
/* ==========================================================================
#Type
========================================================================== */
hr {
border-bottom: 1px solid #ddd;
border-left: 0;
border-right: 0;
border-top: 0;
margin: 1.3rem 0;
}
/* ==========================================================================
#o-Bands
========================================================================== */
/*doc
---
title: Default band
name: band
category: Object - Band
---
Bands are full-width sections of layout with padding on the top and bottom that can contain different backgrounds
```html_example
```
*/
.o-band--x2top::after, .o-band--flush::after, .o-band--small::after, .o-band::after {
content: "";
display: table;
clear: both;
}
.o-band--x2top, .o-band--flush, .o-band--small, .o-band {
position: relative;
}
.o-band {
padding: 3rem 0;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.o-band {
padding: 2rem 0;
}
}
/*doc
---
title: Small band
name: small-band
category: Object - Band
---
Small band has decreased top and bottom padding.
```html_example
```
*/
.o-band--small {
padding: 2rem 0;
}
/*doc
---
title: Flush band
name: flush-band
category: Object - Band
---
Flush band removes all padding.
```html_example
```
*/
.o-band--flush {
padding: 0;
}
.o-band--top {
padding-bottom: 0;
}
.o-band--bottom {
padding-top: 0;
}
.o-band--x2top {
padding: 6rem 0 3rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.o-band--x2top {
padding: 2rem 0;
}
}
/* ==========================================================================
Box
========================================================================== */
/*doc
---
title: Box
name: box
category: Object - Box
---
Box should be applied to anything with padding all the way around.
```html_example
Example
```
*/
.o-video {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.o-video embed,
.o-video object,
.o-video iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
/* ==========================================================================
#Wrap
========================================================================== */
.o-wrap,
.widget-wrap {
-webkit-transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
}
.o-wrap__content {
/*background: #f5f5f5; test removal set white bg */
padding-top: 3rem;
padding-bottom: 2.5rem;
}
@media screen and (min-width: 1024px) {
.o-wrap__content {
padding-top: calc(132px + 4rem);
padding-bottom: 4rem;
}
}
/* ==========================================================================
#Alerts
========================================================================== */
/*doc
---
title: Success
name: alert_success
category: Components - Alert
---
Success alert used in drupal. Mainly displayed after saving or
creating content.
```html_example
Congratulations! You successfully saved node
4,153 .
Guess what... you have 4,000
modules out-of-date!
I'm the default Drupal status message, isn't that
cool ?
Proin non arcu lobortis, sagittis lorem et, suscipit mauris. Duis placerat velit libero, et commodo ante rhoncus quis. Sed iaculis nibh ipsum, placerat vestibulum diam ullamcorper a. Quisque finibus, lorem non pellentesque sollicitudin, odio nibh ultrices ipsum, sed tincidunt ligula purus sit amet augue. Vestibulum leo orci, elementum vel auctor id, posuere et felis.
Cras vulputate urna dui, sit amet tempor sapien interdum quis. Maecenas mauris risus, tincidunt at ante sit amet, vehicula maximus nulla.
Nunc a lacus eu diam finibus consectetur ut nec velit. Nunc hendrerit lorem nec dolor pharetra suscipit. Cras accumsan vel felis et maximus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non mollis purus. Integer vitae dui eget ipsum blandit rhoncus. Morbi eu nulla efficitur odio consequat lacinia non in ante.
Aenean eu vehicula ligula. Sed at aliquet magna. Sed eget lacinia sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
```
*/
.c-facts-widget__list {
counter-reset: facts-counter;
list-style: none;
padding: 0;
}
.c-facts-widget__item {
position: relative;
padding: 0 0 0 3.5rem;
margin-bottom: 1.3rem;
}
.c-facts-widget__item p {
font-weight: 300;
}
.c-facts-widget__item p:last-of-type {
margin-bottom: 0;
}
.c-facts-widget__item::before {
background-color: #acaba6;
color: #e8e8de;
content: counter(facts-counter);
counter-increment: facts-counter;
position: absolute;
left: 0;
font-size: 1.6rem;
font-weight: 300;
line-height: 2.1rem;
top: 50%;
margin-top: -1.05rem;
text-align: center;
border-radius: 100%;
width: 2.1rem;
height: 2.1rem;
}
.t-bg-blue .c-facts-widget__item::before {
background-color: rgba(255, 255, 255, 0.3);
color: #fff;
}
/* ==========================================================================
#FAQ widgets component
========================================================================== */
/*doc
---
title: FAQ widgets
name: faq-widgets
category: Components - FAQ widgets
---
This is the FAQ widgets component which has multiple variations. Take a look at the `` section to see a full example.
```html_example
```
*/
@media screen and (min-width: 640px) {
.c-faq-widget__title {
margin-left: -17.2907%/2;
margin-right: -17.2907%/2;
}
}
@media screen and (min-width: 640px) {
.c-faq-widget__title {
margin-left: -17.2907%;
margin-right: -17.2907%;
}
}
.c-faq-widget__term {
background-color: #0f324e;
border-bottom: 1px solid #fff;
color: #fff;
cursor: pointer;
font-weight: 300;
padding: 1rem 1rem 1rem 2rem;
position: relative;
-webkit-transition: background-color 200ms ease-in-out;
transition: background-color 200ms ease-in-out;
font-size: 1rem;
}
@media screen and (min-width: 640px) {
.c-faq-widget__term {
padding: 1.25rem 1rem 1.25rem 3.5rem;
font-size: 1.25rem;
}
}
.c-faq-widget__term::before, .c-faq-widget__term::after {
content: "";
display: block;
position: absolute;
left: 1.25rem;
top: 50%;
width: 0;
height: 0.5rem;
margin-top: -0.25rem;
border-color: #fff;
border-style: solid;
border-width: 0 0 0 2px;
-webkit-transition: -webkit-transform 200ms ease-in-out;
transition: -webkit-transform 200ms ease-in-out;
transition: transform 200ms ease-in-out;
transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}
@media screen and (min-width: 640px) {
.c-faq-widget__term::before, .c-faq-widget__term::after {
left: 2.25rem;
}
}
.c-faq-widget__term::after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.c-faq-widget__term:hover {
background-color: rgb(12.9435483871, 43.1451612903, 67.3064516129);
}
.c-faq-widget__term.open {
background-color: rgb(10.8870967742, 36.2903225806, 56.6129032258);
}
.c-faq-widget__term.open:hover {
background-color: rgb(10.064516129, 33.5483870968, 52.335483871);
}
.c-faq-widget__term.arrow::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.c-faq-widget__term.arrow::after {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.c-faq-widget__def {
color: #0f324e;
padding: 1rem;
}
.c-faq-widget__def p {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.c-faq-widget__def p:last-of-type {
margin-bottom: 0;
}
/* ==========================================================================
Featured Pane
========================================================================== */
/*doc
---
title: Default
name: featured-pane
category: Components - Featured Pane
---
Featured panes inherit the `.box` object which can be found in `objects/_box.scss`
```html_example
Blog Post
How to create an unscripted leadership platform of your own
```
*/
/* Full size featured pane
========================================================================== */
.c-featured-pane {
min-height: 400px;
}
.c-featured-pane__source {
color: #fff;
font-size: 1.1rem;
margin: 0;
}
.c-featured-pane__title {
color: #fff;
font-size: 1.875rem;
margin: 0;
}
/*doc
---
title: Small
name: featured-pane-small
category: Components - Featured Pane
---
Featured panes inherit the `.box` object which can be found in `objects/_box.scss`
```html_example
Blog Post
How to create an unscripted leadership platform of your own
```
*/
.c-featured-pane--small {
background: #666;
border: 1px solid #fff;
}
.c-featured-pane--small .c-featured-pane__source {
font-size: 1rem;
}
.c-featured-pane--small .c-featured-pane__title {
font-size: 1.2rem;
}
/* ==========================================================================
Featured text
========================================================================== */
/*doc
---
title: Featured Text
name: featuredtext
category: Components - Featured Text
---
Featured text widgets
```html_example
```
*/
.c-featured-text__body {
font-size: 1.8rem;
position: relative;
line-height: 1.3;
font-family: "OldStyleMT-Regular", serif;
text-align: center;
}
@media screen and (min-width: 640px) {
.c-featured-text__body {
padding: 2rem 0;
min-height: 130px;
}
}
.c-featured-text__credit {
font-size: 13px;
position: absolute;
bottom: 1rem;
left: 1rem;
color: #fff;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-featured-text__credit {
bottom: 1rem;
}
}
.c-featured-text__credit-top-right {
font-size: 13px;
position: absolute;
top: 1rem;
right: 1rem;
color: #373737;
}
.c-featured-text__person {
font-weight: 300;
text-align: right;
}
.c-featured-text .person__name {
font-size: 0.9rem;
}
.c-featured-text .person__details {
font-size: 0.8rem;
}
.c-featured-text.t-bg-blue {
color: #fff;
}
.c-featured-text--quote .c-featured-text__uploads {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.c-featured-text--quote .c-featured-text__body {
padding: 0;
}
@media screen and (min-width: 640px) {
.c-featured-text--quote .c-featured-text__body {
padding: 2rem 0 0;
}
}
.c-featured-text--quote .c-featured-text__body p::first-letter {
/*padding-left: 2rem;*/
}
@media screen and (min-width: 640px) {
.c-featured-text--quote .c-featured-text__body p::first-letter {
/*padding-left: 4rem;*/
}
}
.c-featured-text--quote .c-featured-text__uploads {
text-align: center;
}
.c-featured-text--quote.c-featured-text--quote__enabled {
position: relative;
}
.c-featured-text--quote.c-featured-text--quote__enabled .c-featured-text__body::before {
content: "";
display: block;
width: 88px;
height: 69px;
position: absolute;
top: 0;
left: -67px;
}
/* ==========================================================================
Footer nav
========================================================================== */
@media screen and (min-width: 0) and (max-width: 639px) {
.c-footer-nav {
text-align: center;
}
}
.c-footer-nav a {
opacity: 1;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.c-footer-nav a:hover {
opacity: 0.7;
}
@media screen and (min-width: 640px) {
.c-footer-nav__list {
width: 15% !important;
}
.c-footer-nav__list:nth-child(2) {
width: 40% !important;
}
.c-footer-nav__list:nth-child(2) .c-footer-nav__drop {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-footer-nav__list {
margin-bottom: 1.5rem;
}
}
.c-footer-nav__list > a {
font-size: 0.9rem;
display: inline-block;
margin-bottom: 0.75rem;
border-bottom: 1px solid;
display: block;
}
.bg-lg-4.c-footer-nav .c-footer-nav__list:nth-child(5) {
clear: none;
margin-top: 0.75rem;
}
.c-footer-nav__link:link, .c-footer-nav__link:visited {
color: #fff;
}
.c-footer-nav__drop {
padding: 0;
margin: 0;
list-style: none;
}
.c-footer-nav__drop-item {
font-size: 0.7rem;
font-weight: 300;
margin-bottom: 0.25rem;
}
.c-footer-nav__drop-item a:link,
.c-footer-nav__drop-item a:visited {
color: #fff;
}
/* ==========================================================================
Icon
========================================================================== */
/*doc
---
title: Icons
name: icons
category: Components - Icons
---
Library of icons for use throughout the site. Some of the icons are related to other partials,
but these classes should always be used when possible.
*/
.c-icon,
.c-icon--search,
.c-featured-text--quote.c-featured-text--quote__enabled .c-featured-text__body::before {
display: inline-block;
}
.c-featured-text--quote.c-featured-text--quote__enabled .c-featured-text__body::before {
background-image: url("../../img/quote.png");
}
.c-icon--search {
background-image: url("../../processed/svg/magnifying_glass_k.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
width: 1em;
height: 1em;
}
.c-page-head--light .c-icon--search {
background-image: url("../../processed/svg/magnifying_glass_white.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
}
@media screen and (min-width: 1024px) {
.c-page-head.is-active .c-icon--search {
background-image: url("../../processed/svg/magnifying_glass_k.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
}
}
.c-icon__social, .c-people__soc--tw, .c-people__soc--li {
display: inline-block;
font-size: 1rem;
border-radius: 1rem;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "FontAwesome";
color: #fff;
background-color: #0f324e;
width: 1.5rem;
height: 1.5rem;
line-height: 1.5;
margin: 1rem 0.5rem;
}
.c-icon__social:link, .c-people__soc--tw:link, .c-people__soc--li:link, .c-icon__social:visited, .c-people__soc--tw:visited, .c-people__soc--li:visited {
color: #fff;
}
.c-icon__social--facebook::before {
content: "\f09a";
}
.c-icon__social--instagram::before {
content: "\f16d";
}
.c-icon__social--twitter::before, .c-people__soc--tw::before {
content: "\f099";
}
.c-icon__social--linkedin::before, .c-people__soc--li::before {
content: "\f0e1";
}
.t-bg-blue .c-icon__social, .t-bg-blue .c-people__soc--tw, .t-bg-blue .c-people__soc--li {
color: #0f324e;
background-color: #fff;
}
.t-bg-blue .c-icon__social:link, .t-bg-blue .c-people__soc--tw:link, .t-bg-blue .c-people__soc--li:link {
color: #0f324e;
}
.c-icon--fb {
background-image: url("../../processed/svg/fb_white.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
width: 1em;
height: 1em;
}
.c-icon--in {
background-image: url("../../processed/svg/instagram_white.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
width: 1em;
height: 1em;
}
.c-icon--tw {
background-image: url("../../processed/svg/tw_white.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
width: 1em;
height: 1em;
}
.c-icon--vi {
background-image: url("../../processed/svg/vimeo_white.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
width: 1em;
height: 1em;
}
/* ==========================================================================
Icon
========================================================================== */
/*doc
---
title: Images
name: Images
category: Components - Images
---
Image rollovers and effects.
```html_example
Article | 24 May 2016
Source: Mongabay
The risk of murder is higher for environmental activists and wildlife officers than for police officers. Protecting the planet is a dangerous job. Schoolyard massacres
```
*/
.c-grid__image a {
display: block;
background-color: #0f324e;
}
.c-grid__image a img {
display: block;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.c-grid__image a:hover img {
-webkit-filter: opacity(0.8);
filter: opacity(0.8);
}
.c-people__card:hover img {
-webkit-filter: opacity(0.8);
filter: opacity(0.8);
}
.c-people__card .field--name-field-teaser-media {
background-color: #0f324e;
}
/* ==========================================================================
List UI
========================================================================== */
/*doc
---
title: Default
name: list-ui
category: Components - List UI
---
Provides default styling for a list with a bottom border. This extends `.o-nav` and `.o-nav--stacked` in order to create stacked list.
```html_example
```
*/
.c-list-ui__item {
border-bottom: 1px solid #ececec;
padding: 0.75rem 0;
}
.c-list-ui__link:hover {
color: #333;
}
/*doc
---
title: Blocky
name: list-ui-blocky
category: Components - List UI
---
This creates a large hit-area for the link and also applies hover styling.
```html_example
```
*/
.c-list-ui--blocky .c-list-ui__item {
padding: 0;
}
.c-list-ui--blocky .c-list-ui__link {
padding: 0.75rem 0;
}
.c-list-ui--blocky .c-list-ui__link:hover {
color: #fff;
background: #666;
}
/*doc
---
title: Extra text
name: list-ui-text
category: Components - List UI
---
Shows default `list-ui` with extra text.
```html_example
```
*/
/* ==========================================================================
Logo component
========================================================================== */
/*doc
---
title: Logo
name: logo
category: Components - Logo
---
Contains all variations of client logos for a given project.
```html_example
Example
```
*/
.mfp-bg {
opacity: 0.9;
}
/* ==========================================================================
Module Heights component
========================================================================== */
.c-module-height--default {
min-height: 400px;
height: 400px;
}
.c-module-height--default.c-cta-widget {
height: auto;
}
.c-module-height--default.c-page-head--single {
height: 100vh;
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-module-height--default.c-page-head--single {
height: 768px;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-module-height--default.c-page-head--single {
height: 1024px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-module-height--default.c-page-head--single {
height: 320px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-module-height--default.c-page-head--single {
height: 568px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-module-height--default.c-page-head--single {
height: 320px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-module-height--default.c-page-head--single {
height: 480px;
}
}
.c-module-height--default.c-page-head--single {
min-height: 450px;
}
@media screen and (min-width: 640px) {
.c-module-height--default.c-page-head--single {
height: 75vh;
}
}
@media screen and (min-width: 640px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-module-height--default.c-page-head--single {
height: 576px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-module-height--default.c-page-head--single {
height: 768px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-module-height--default.c-page-head--single {
height: 240px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-module-height--default.c-page-head--single {
height: 426px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-module-height--default.c-page-head--single {
height: 240px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-module-height--default.c-page-head--single {
height: 360px;
}
}
@media screen and (min-width: 1024px) {
.c-module-height--default.c-page-head--single {
height: 50vh;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-module-height--default.c-page-head--single {
height: 384px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-module-height--default.c-page-head--single {
height: 512px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-module-height--default.c-page-head--single {
height: 160px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-module-height--default.c-page-head--single {
height: 284px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-module-height--default.c-page-head--single {
height: 160px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-module-height--default.c-page-head--single {
height: 240px;
}
}
.c-module-height--quarter {
height: 100vh;
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-module-height--quarter {
height: 768px;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-module-height--quarter {
height: 1024px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-module-height--quarter {
height: 320px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-module-height--quarter {
height: 568px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-module-height--quarter {
height: 320px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-module-height--quarter {
height: 480px;
}
}
.c-module-height--quarter {
min-height: 300px;
}
@media screen and (min-width: 640px) {
.c-module-height--quarter {
height: 50vh;
}
}
@media screen and (min-width: 640px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-module-height--quarter {
height: 384px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-module-height--quarter {
height: 512px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-module-height--quarter {
height: 160px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-module-height--quarter {
height: 284px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-module-height--quarter {
height: 160px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-module-height--quarter {
height: 240px;
}
}
@media screen and (min-width: 1024px) {
.c-module-height--quarter {
height: 25vh;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-module-height--quarter {
height: 192px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-module-height--quarter {
height: 256px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-module-height--quarter {
height: 80px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-module-height--quarter {
height: 142px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-module-height--quarter {
height: 80px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-module-height--quarter {
height: 120px;
}
}
.c-module-height--half {
height: 100vh;
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-module-height--half {
height: 768px;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-module-height--half {
height: 1024px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-module-height--half {
height: 320px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-module-height--half {
height: 568px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-module-height--half {
height: 320px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-module-height--half {
height: 480px;
}
}
.c-module-height--half {
min-height: 450px;
}
@media screen and (min-width: 640px) {
.c-module-height--half {
height: 75vh;
}
}
@media screen and (min-width: 640px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-module-height--half {
height: 576px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-module-height--half {
height: 768px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-module-height--half {
height: 240px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-module-height--half {
height: 426px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-module-height--half {
height: 240px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-module-height--half {
height: 360px;
}
}
@media screen and (min-width: 1024px) {
.c-module-height--half {
height: 50vh;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-module-height--half {
height: 384px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-module-height--half {
height: 512px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-module-height--half {
height: 160px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-module-height--half {
height: 284px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-module-height--half {
height: 160px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-module-height--half {
height: 240px;
}
}
.c-module-height--threequarter {
height: 100vh;
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-module-height--threequarter {
height: 768px;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-module-height--threequarter {
height: 1024px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-module-height--threequarter {
height: 320px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-module-height--threequarter {
height: 568px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-module-height--threequarter {
height: 320px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-module-height--threequarter {
height: 480px;
}
}
.c-module-height--threequarter {
min-height: 450px;
}
@media screen and (min-width: 1024px) {
.c-module-height--threequarter {
height: 75vh;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-module-height--threequarter {
height: 576px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-module-height--threequarter {
height: 768px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-module-height--threequarter {
height: 240px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-module-height--threequarter {
height: 426px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-module-height--threequarter {
height: 240px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-module-height--threequarter {
height: 360px;
}
}
.c-module-height--full {
height: auto;
min-height: 450px;
}
@media screen and (min-width: 1500px) {
.c-module-height--full {
height: 100vh;
}
}
@media screen and (min-width: 1400px) {
.c-module-height--full {
height: 100vh;
}
}
@media screen and (min-width: 1280px) {
.c-module-height--full {
height: 100vh;
}
}
@media screen and (min-width: 1024px) {
.c-module-height--full {
height: 100vh;
}
}
/* ==========================================================================
#Overlay
========================================================================== */
.c-overlay {
-webkit-transform: translateX(70%);
transform: translateX(70%);
background: #000;
height: 100%;
opacity: 0;
position: fixed;
top: 0;
visibility: hidden;
width: 100%;
z-index: 9998;
}
.c-overlay.is-active {
-webkit-animation: fadeInOverlay 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0.2s;
animation: fadeInOverlay 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
visibility: visible;
}
@media screen and (min-width: 1024px) {
.c-overlay.is-active {
visibility: hidden;
}
}
/* ==========================================================================
#Footer component
========================================================================== */
.c-page-foot {
width: 100%;
padding: 46px 0 121px;
background: #0f324e;
}
.c-page-foot .c-logo--large {
max-width: 113px;
max-height: 113px;
background-size: cover;
}
.c-page-foot .search-block-form {
display: none;
}
.c-page-foot .o-grid--wide .sm-12:last-child {
padding-top: 2rem;
margin-top: 2rem;
}
@media screen and (min-width: 1024px) {
.c-page-foot .o-grid--wide .sm-12:last-child {
border-top: 0;
padding-top: 0;
margin-top: 0;
}
}
/* ==========================================================================
#Header component
========================================================================== */
/*doc
---
title: Page head
name: page-head
category: Components - Page Head
---
Inside the header component lives the `.c-logo` component as well as the `.c-primary-nav`.
```html_example
```
*/
.c-page-head {
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
padding: 0.5rem 0;
width: 100%;
background: #373737;
border-bottom: 1px solid transparent;
}
@media screen and (min-width: 1024px) {
.c-page-head.is-active {
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
background: #fff;
padding: 0.35rem 0;
border-bottom-color: #ddd;
}
}
.c-page-head.is-active .is-french {
display: none;
}
.c-page-head.is-active .c-btn, .c-page-head.is-active .c-cta-widget--embed .js-cm-submit-button, .c-cta-widget--embed .c-page-head.is-active .js-cm-submit-button,
.c-page-head.is-active .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .c-page-head.is-active button[type=submit] {
margin-bottom: 0;
}
.c-page-head.is-active .c-logo--default {
width: 70px;
height: 70px;
background-size: 70px 70px;
}
.c-page-head.is-active .c-page-head__right .c-icon--search {
display: none;
}
.c-page-head.is-active .c-page-head__right .o-nav {
margin-bottom: 0;
margin-top: 0.25rem;
}
.c-page-head.is-active .c-page-head__right .o-nav .c-icon--search {
display: block;
}
.c-page-head.is-active .c-primary-nav {
margin-top: 0.65rem;
}
.c-page-head.only-logo-active {
-webkit-transition: none;
transition: none;
position: static;
}
.c-page-head.only-logo-active * {
-webkit-transition: none;
transition: none;
}
@media screen and (min-width: 1024px) {
.c-page-head.only-logo-active {
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
background: #fff;
padding: 0.35rem 0;
border-bottom-color: #ddd;
}
}
.c-page-head.only-logo-active .c-logo--default {
width: 70px !important;
height: 70px !important;
background-size: 70px 70px !important;
-webkit-transition: none;
transition: none;
}
.c-page-head.only-logo-active .region-primary-nav,
.c-page-head.only-logo-active .c-page-head__right,
.c-page-head.only-logo-active .c-mobile-toggle {
display: none;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-page-head {
height: auto;
width: 100%;
z-index: 15;
}
}
@media screen and (min-width: 1024px) {
.c-page-head {
background: transparent;
padding: 1rem 0 0;
position: fixed;
z-index: 150;
}
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-page-head .o-grid--wide > .sm-12 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
.c-page-head__headline {
font-weight: 500;
margin-bottom: 1rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-page-head__headline {
font-size: 2rem;
line-height: 1.1;
}
}
@media screen and (min-width: 640px) {
.c-page-head__headline {
font-size: 2.75rem;
line-height: 1.1;
}
}
@media screen and (min-width: 768px) {
.c-page-head__headline {
font-size: 3.2rem;
line-height: 1.1;
}
}
@media screen and (min-width: 1280px) {
.c-page-head__headline {
font-size: 4.2rem;
line-height: 1.1;
margin-bottom: 0;
}
}
@media screen and (min-width: 0) and (max-width: 480px) {
.c-page-head__headline {
font-size: 2rem;
}
}
@media screen and (min-width: 1024px) {
.c-page-head__headline--small {
font-size: 2.2rem;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-page-head__headline--medium {
font-size: 2rem;
line-height: 1.1;
}
}
@media screen and (min-width: 640px) {
.c-page-head__headline--medium {
font-size: 2.25rem;
line-height: 1.1;
}
}
@media screen and (min-width: 768px) {
.c-page-head__headline--medium {
font-size: 2.5rem;
line-height: 1.1;
}
}
@media screen and (min-width: 1024px) {
.c-page-head__headline--medium {
font-size: 2.75rem;
line-height: 1.1;
}
}
.c-page-head__body {
font-size: 1.4063rem;
font-family: "Roboto", sans-serif;
font-weight: 700;
margin-top: 0.5rem;
margin-bottom: 2.25rem;
}
@media screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation: portrait) {
.c-page-head__body {
font-size: 1rem;
margin-bottom: 0;
}
}
.c-page-head__body p {
font-weight: 500;
}
@media screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation: portrait) {
.c-page-head__body p {
margin-bottom: 0.75rem;
}
}
.c-page-head--video .c-page-head__headline {
font-size: 2rem;
}
@media screen and (min-width: 1024px) {
.c-page-head--video .c-page-head__headline {
font-size: 3.375rem;
line-height: 1;
}
}
.c-page-head--video .c-page-head__body {
max-width: 38rem;
margin: 25px auto 50px;
line-height: 1.4;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-page-head--video .c-page-head__body {
font-size: 1rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.c-page-head--video .c-page-head__body {
font-size: 1.125rem;
}
}
@media screen and (min-width: 1200px) {
.c-page-head--video .c-page-head__body {
font-size: 1.25rem;
}
}
.c-page-head--video .c-page-head__subheadline .c-btn--primary {
font-size: 1rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-page-head--video .t-alpha-mask-top--dark .o-grid {
padding-top: 15rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.c-page-head--video .t-alpha-mask-top--dark .o-grid {
padding-top: 14rem;
}
}
@media screen and (min-width: 1200px) {
.c-page-head--video .t-alpha-mask-top--dark .o-grid {
padding-top: 10rem;
}
}
.c-page-head--video {
background-color: white;
}
.c-page-head--video div[style*="position: absolute"]:not(.video-bg-overlay) {
background-image: none !important;
}
@media screen and (min-width: 768px) {
.c-page-head--video div[style*="position: absolute"]:not(.video-bg-overlay) {
display: block;
}
}
@media screen and (min-width: 768px) {
.c-page-head--video .video-bg-overlay {
display: none;
}
}
.c-page-head--cta {
z-index: 2;
}
.c-page-head--cta.c-module-height--default {
height: auto;
}
.c-page-head--cta .o-band > .o-grid {
width: 100%;
padding-top: 150px;
}
.c-page-head--cta .c-header-cta-form {
background: #fff;
-webkit-box-shadow: 0px 0px 15.1px 5px rgba(0, 0, 0, 0.04);
box-shadow: 0px 0px 15.1px 5px rgba(0, 0, 0, 0.04);
padding: 2rem;
border-radius: 1rem;
margin-bottom: 1rem;
}
.c-page-head--cta .c-header-cta-form .webform-submission-form {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-page-head--cta .c-header-cta-form .webform-submission-form .c-cta-touchbase-widget__captcha {
width: 100%;
}
.c-page-head--cta .c-header-cta-form .webform-submission-form .c-cta-touchbase-widget__captcha .rc-anchor-normal-footer {
display: none;
}
}
.c-page-head--cta .c-header-cta-form .webform-submission-form .g-recaptcha > div {
margin: 0 auto;
}
.c-page-head--cta .c-header-cta-form .webform-actions {
text-align: center;
}
.c-page-head--cta .c-header-cta-form .c-header-cta-form__intro,
.c-page-head--cta .c-header-cta-form .c-widget__thankyou .c-cta-touchbase-widget__headline,
.c-page-head--cta .c-header-cta-form .c-cta-touchbase-widget__text {
color: #0c0c0c;
}
.c-page-head--cta .c-header-cta-form .c-cta-touchbase-widget__headline {
font-size: 1.3125rem;
}
.c-page-head--cta .c-header-cta-form .c-cta-touchbase-widget__text {
font-size: 1rem;
}
.c-page-head--cta .c-header-cta-form .c-cta-touchbase-widget__input {
color: #0c0c0c;
padding: 0;
width: 100%;
}
.c-page-head--cta .c-header-cta-form .c-cta-touchbase-widget__input input[type=email],
.c-page-head--cta .c-header-cta-form .c-cta-touchbase-widget__input input[type=text] {
color: #0c0c0c;
margin: 0 0 0.75rem;
width: 100%;
}
.c-page-head--cta .c-page-head__headline {
font-size: 2rem;
}
@media screen and (min-width: 1024px) {
.c-page-head--cta .c-page-head__headline {
font-size: 3.375rem;
line-height: 1;
}
}
.c-page-head--cta .c-page-head__body {
max-width: 38rem;
margin: 25px auto 50px;
line-height: 1.4;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-page-head--cta .c-page-head__body {
font-size: 1rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.c-page-head--cta .c-page-head__body {
font-size: 1.125rem;
}
}
@media screen and (min-width: 1200px) {
.c-page-head--cta .c-page-head__body {
font-size: 1.25rem;
}
}
.c-page-head--cta .c-page-head__subheadline .c-btn--primary {
font-size: 1rem;
}
.c-page-head nav {
float: left;
}
.c-page-head__right {
float: right;
text-align: right;
display: none;
}
.c-page-head__right > .c-icon--search {
visibility: hidden; /*used to preserve spacing */
}
@media screen and (min-width: 1024px) {
.c-page-head__right {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c-page-head__right .o-nav {
margin: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 0.5rem;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-top: 0.8rem;
}
}
.c-page-head__right .c-btn--primary {
font-size: 0.9rem;
font-weight: 500;
border: 2px solid #30a3f3;
}
.c-page-head__right .c-btn--primary:hover {
border-color: rgb(13.1506849315, 139.1780821918, 226.8493150685);
}
.c-page-head__right .o-nav .c-btn, .c-page-head__right .o-nav .c-cta-widget--embed .js-cm-submit-button, .c-cta-widget--embed .c-page-head__right .o-nav .js-cm-submit-button,
.c-page-head__right .o-nav .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .c-page-head__right .o-nav button[type=submit] {
margin-bottom: 0;
line-height: normal;
padding: 0.75rem 0.8rem;
}
.is-french {
font-size: 0.65rem;
display: inline-block;
margin-bottom: 0;
position: relative;
top: -5px;
right: 10px;
visibility: hidden;
}
.c-page-head--light {
color: #fff;
}
.c-page-head--light h1,
.c-page-head--light .alpha,
.c-page-head--light h2,
.c-page-head--light .beta,
.c-page-head--light h3,
.c-page-head--light .gamma,
.c-page-head--light h4,
.c-page-head--light .delta,
.c-page-head--light h5,
.c-page-head--light .epsilon,
.c-page-head--light h6,
.c-page-head--light .zeta,
.c-page-head--light .c-search-results .c-search-result__title,
.c-search-results .c-page-head--light .c-search-result__title {
color: #fff;
}
.c-page-head--light .c-primary-nav__link:link, .c-page-head--light .c-primary-nav__link:visited,
.c-page-head--light .c-page-head__right a:link,
.c-page-head--light .c-page-head__right a:visited {
color: #fff;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-page-head--light .c-primary-nav__item.has-dropdown .c-primary-nav__link::after {
background-image: url("../../processed/svg/arrow_white.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
-webkit-transition: -webkit-filter 0.25s ease-in-out;
transition: -webkit-filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out;
-webkit-filter: brightness(100%);
filter: brightness(100%);
font-size: 0.8em;
top: -0.1em;
left: 0.3rem;
vertical-align: middle;
}
}
@media screen and (min-width: 1024px) {
.c-page-head--light .c-primary-nav__item.has-dropdown .c-primary-nav__link::after {
background-image: url("../../processed/svg/arrow_white.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
-webkit-transition: -webkit-filter 0.25s ease-in-out;
transition: -webkit-filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out;
-webkit-filter: brightness(100%);
filter: brightness(100%);
font-size: 0.8em;
top: -0.3em;
left: 0.3rem;
vertical-align: middle;
}
}
.c-page-head--light .has-dropdown:hover .c-primary-nav__link {
background: white;
color: #373737;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-page-head--light .has-dropdown:hover .c-primary-nav__link::after {
background-image: url("../../processed/svg/arrow_black.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
-webkit-transition: -webkit-filter 0.25s ease-in-out;
transition: -webkit-filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out;
-webkit-filter: brightness(100%);
filter: brightness(100%);
font-size: 0.8em;
top: -0.1em;
left: 0.3rem;
vertical-align: middle;
}
}
@media screen and (min-width: 1024px) {
.c-page-head--light .has-dropdown:hover .c-primary-nav__link::after {
background-image: url("../../processed/svg/arrow_black.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
-webkit-transition: -webkit-filter 0.25s ease-in-out;
transition: -webkit-filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out;
-webkit-filter: brightness(100%);
filter: brightness(100%);
font-size: 0.8em;
top: -0.3em;
left: 0.3rem;
vertical-align: middle;
}
}
.c-page-head--light .c-btn, .c-page-head--light .c-cta-widget--embed .js-cm-submit-button, .c-cta-widget--embed .c-page-head--light .js-cm-submit-button,
.c-page-head--light .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .c-page-head--light button[type=submit] {
margin-bottom: 5.5rem;
}
@media screen and (min-width: 1024px) {
.c-page-head--dark .c-page-head .c-page-head,
.c-page-head.is-active .c-page-head {
background-color: #fff;
border-bottom-color: #ddd;
}
}
.c-page-head--dark .c-page-head .c-logo--default,
.c-page-head.is-active .c-logo--default {
width: 70px;
height: 70px;
background-size: 70px 70px;
}
.c-page-head--dark .c-page-head .c-primary-nav,
.c-page-head.is-active .c-primary-nav {
margin-top: 0.65rem;
}
.c-page-head--dark .c-page-head .c-btn, .c-page-head--dark .c-page-head .c-cta-widget--embed .js-cm-submit-button, .c-cta-widget--embed .c-page-head--dark .c-page-head .js-cm-submit-button,
.c-page-head--dark .c-page-head .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .c-page-head--dark .c-page-head button[type=submit],
.c-page-head.is-active .c-btn,
.c-page-head.is-active .c-cta-widget--embed .js-cm-submit-button,
.c-cta-widget--embed .c-page-head.is-active .js-cm-submit-button,
.c-page-head.is-active .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .c-page-head.is-active button[type=submit] {
margin-bottom: 0;
}
.c-page-head--dark .c-page-head .c-primary-nav__link:link, .c-page-head--dark .c-page-head .c-primary-nav__link:visited,
.c-page-head.is-active .c-primary-nav__link:link,
.c-page-head.is-active .c-primary-nav__link:visited {
color: #fff;
}
@media screen and (min-width: 1024px) {
.c-page-head--dark .c-page-head .c-primary-nav__link:link, .c-page-head--dark .c-page-head .c-primary-nav__link:visited,
.c-page-head.is-active .c-primary-nav__link:link,
.c-page-head.is-active .c-primary-nav__link:visited {
color: #373737;
}
}
.c-page-head--dark .c-page-head .c-primary-nav__link:hover,
.c-page-head.is-active .c-primary-nav__link:hover {
color: #373737;
background: white;
}
.c-page-head--dark .c-page-head .is-french:link,
.c-page-head--dark .c-page-head .is-french:visited,
.c-page-head.is-active .is-french:link,
.c-page-head.is-active .is-french:visited {
color: #373737;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-page-head--dark .c-page-head .c-primary-nav__item.has-dropdown .c-primary-nav__link::after,
.c-page-head.is-active .c-primary-nav__item.has-dropdown .c-primary-nav__link::after {
background-image: url("../../processed/svg/arrow_white.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
-webkit-transition: -webkit-filter 0.25s ease-in-out;
transition: -webkit-filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out;
-webkit-filter: brightness(100%);
filter: brightness(100%);
font-size: 0.8em;
top: -0.1em;
left: 0.3rem;
vertical-align: middle;
}
}
@media screen and (min-width: 1024px) {
.c-page-head--dark .c-page-head .c-primary-nav__item.has-dropdown .c-primary-nav__link::after,
.c-page-head.is-active .c-primary-nav__item.has-dropdown .c-primary-nav__link::after {
background-image: url("../../processed/svg/arrow_black.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
-webkit-transition: -webkit-filter 0.25s ease-in-out;
transition: -webkit-filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out;
-webkit-filter: brightness(100%);
filter: brightness(100%);
font-size: 0.8em;
top: -0.3em;
left: 0.3rem;
vertical-align: middle;
}
}
.c-page-head--dark .c-page-head .has-dropdown:hover .c-primary-nav__link,
.c-page-head.is-active .has-dropdown:hover .c-primary-nav__link {
background: white;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-page-head--dark .c-page-head .has-dropdown:hover .c-primary-nav__link::after,
.c-page-head.is-active .has-dropdown:hover .c-primary-nav__link::after {
background-image: url("../../processed/svg/arrow_black.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
-webkit-transition: -webkit-filter 0.25s ease-in-out;
transition: -webkit-filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out;
-webkit-filter: brightness(100%);
filter: brightness(100%);
font-size: 0.8em;
top: -0.1em;
left: 0.3rem;
vertical-align: middle;
}
}
@media screen and (min-width: 1024px) {
.c-page-head--dark .c-page-head .has-dropdown:hover .c-primary-nav__link::after,
.c-page-head.is-active .has-dropdown:hover .c-primary-nav__link::after {
background-image: url("../../processed/svg/arrow_black.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
-webkit-transition: -webkit-filter 0.25s ease-in-out;
transition: -webkit-filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out;
-webkit-filter: brightness(100%);
filter: brightness(100%);
font-size: 0.8em;
top: -0.3em;
left: 0.3rem;
vertical-align: middle;
}
}
.c-page-head--video-dark .c-page-head {
background-color: transparent;
border-bottom-color: transparent;
}
@media screen and (min-width: 1024px) {
.c-page-head--dark .c-page-head:not(.is-active) .c-logo--default {
width: 70px;
height: 70px;
background-size: 70px 70px;
}
}
.c-page-head--dark .c-page-head:not(.is-active) .c-primary-nav {
margin-top: 1.2rem;
}
.c-page-head--dark .c-language {
display: inline-block;
}
.vertical-align {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
}
@media screen and (min-width: 640px) {
.vertical-align--medium-up {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
}
}
.c-page-head__gallery--wrap::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 170px;
z-index: 1;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.7+0,0+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#b3000000", endColorstr="#00000000",GradientType=0 ); /* IE6-9 */
}
.c-page-head__gallery--full-slide {
background-size: cover;
background-repeat: no-repeat;
}
@media screen and (min-width: 1024px) {
.c-page-head__gallery--full-slide {
padding-top: 132px;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-page-head__gallery--wrap {
padding-top: 90px;
}
}
@media screen and (min-width: 1024px) {
.c-page-head--bordered {
padding-top: 132px;
}
}
.c-page-head--bordered .c-page-head__body {
text-align: center;
padding-bottom: 1.3rem;
border-bottom: 1px solid;
max-width: 700px;
margin: 0 auto 1.3rem;
}
.c-page-head--bordered .c-page-head__headline {
text-align: center;
}
.c-page-head--bordered .c-page-head__meta {
text-align: center;
font-size: 0.7rem;
font-weight: 300;
margin-bottom: 10px;
}
.c-language {
display: none;
margin: 0 0 0 0.15em;
padding: 0 0.25em;
font-size: 0.7rem;
font-weight: 300;
border-radius: 25px;
min-width: 25px;
max-height: 25px;
text-align: center;
position: relative;
top: -10px;
}
.c-language.active {
border: 2px solid;
font-weight: 500;
line-height: 22px;
}
.c-page-head--dark {
color: #373737;
}
.c-page-head--dark .c-page-head__right .c-language.active {
color: #373737;
border-color: #373737;
}
.c-page-head--dark .c-primary-nav__link:link, .c-page-head--dark .c-primary-nav__link:visited,
.c-page-head--dark .c-page-head__right a:not(.c-btn):link,
.c-page-head--dark .c-page-head__right a:not(.c-btn):visited {
color: #373737;
}
.c-page-head--light .c-page-head__gallery .c-page-head--dark {
color: #373737;
}
.c-page-head--light .c-page-head__gallery .c-page-head--dark h1,
.c-page-head--light .c-page-head__gallery .c-page-head--dark .alpha,
.c-page-head--light .c-page-head__gallery .c-page-head--dark h2,
.c-page-head--light .c-page-head__gallery .c-page-head--dark .beta,
.c-page-head--light .c-page-head__gallery .c-page-head--dark h3,
.c-page-head--light .c-page-head__gallery .c-page-head--dark .gamma,
.c-page-head--light .c-page-head__gallery .c-page-head--dark h4,
.c-page-head--light .c-page-head__gallery .c-page-head--dark .delta,
.c-page-head--light .c-page-head__gallery .c-page-head--dark h5,
.c-page-head--light .c-page-head__gallery .c-page-head--dark .epsilon,
.c-page-head--light .c-page-head__gallery .c-page-head--dark h6,
.c-page-head--light .c-page-head__gallery .c-page-head--dark .zeta,
.c-page-head--light .c-page-head__gallery .c-page-head--dark .c-search-results .c-search-result__title,
.c-search-results .c-page-head--light .c-page-head__gallery .c-page-head--dark .c-search-result__title {
color: #373737;
}
.c-page-head--light .c-page-head__gallery .c-page-head--dark .c-featured-text__credit {
color: #373737;
}
.c-page-head .o-nav .c-icon--search {
/*display: none;*/
position: relative;
top: 5px;
right: 10px;
}
@media screen and (min-width: 1024px) {
.c-page-head--single .vertical-align .o-grid.t-text-left,
.c-page-head--video .vertical-align .o-grid.t-text-left {
margin-left: 11%;
}
.c-page-head--single .vertical-align .o-grid.t-text-right,
.c-page-head--video .vertical-align .o-grid.t-text-right {
margin-right: 11%;
}
}
.c-page-head--gallery.c-page-head--dark .c-page-head,
.c-page-head--single.c-page-head--dark .c-page-head {
color: #fff;
background: none;
border-bottom: 1px solid rgba(0, 0, 0, 0);
}
.c-page-head--gallery.c-page-head--dark .c-page-head .c-primary-nav__link,
.c-page-head--single.c-page-head--dark .c-page-head .c-primary-nav__link {
color: #fff;
}
.c-page-head--gallery.c-page-head--dark .c-page-head .c-primary-nav__link:hover,
.c-page-head--single.c-page-head--dark .c-page-head .c-primary-nav__link:hover {
color: #373737;
}
.c-page-head--gallery.c-page-head--dark .c-page-head,
.c-page-head--single.c-page-head--dark .c-page-head {
/* hacks for dark text on image backgrounds may need to revisit/ remove */
}
.c-page-head--gallery.c-page-head--dark .c-page-head .c-primary-nav__item.has-dropdown .c-primary-nav__link::after,
.c-page-head--gallery.c-page-head--dark .c-page-head .c-page-head.is-active .c-primary-nav__item.has-dropdown .c-primary-nav__link::after,
.c-page-head--single.c-page-head--dark .c-page-head .c-primary-nav__item.has-dropdown .c-primary-nav__link::after,
.c-page-head--single.c-page-head--dark .c-page-head .c-page-head.is-active .c-primary-nav__item.has-dropdown .c-primary-nav__link::after {
background-image: url("../../processed/svg/arrow_white.svg");
}
.c-page-head__downbutton {
display: none;
height: 1rem;
width: 2rem;
background: url("../../processed/svg/double_chevron_white.svg") center center no-repeat;
background-size: auto 100%;
position: absolute;
bottom: 2rem;
left: calc(50% - 1rem);
}
.c-featured-text__subheader {
background-color: #fff;
padding: 35px 50px 0;
max-width: 38rem;
margin-left: 20px;
margin-right: 20px;
margin-top: auto;
text-align: center;
}
@media screen and (min-width: 1024px) {
.c-featured-text__subheader {
margin-left: auto;
margin-right: auto;
}
}
.c-featured-text__subheader p {
color: #373737;
font-size: 1rem;
margin-bottom: 5px;
}
@media screen and (min-width: 1024px) {
.c-featured-text__subheader p {
font-size: 1.125rem;
}
}
.c-featured-text__subheader p:last-child {
margin-bottom: 0;
}
.c-featured-text__subheader p strong {
font-size: 1.125rem;
}
@media screen and (min-width: 1024px) {
.c-featured-text__subheader p strong {
font-size: 1.25rem;
font-weight: 500 !important;
}
}
.path-frontpage .c-page-head__downbutton {
display: block;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-page-head--single .c-page-head,
.c-page-head--video .c-page-head,
.c-page-head--gallery .c-page-head {
position: fixed;
}
}
.c-page-head--video.c-page-head--park .c-page-head__downbutton,
.c-widget--image-bg.c-page-head--park .c-page-head__downbutton {
display: block;
bottom: 3rem;
}
.c-page-head--light .c-page-head__right .c-language,
.c-page-head--light .c-page-head__right a.c-language:link {
color: rgba(255, 255, 255, 0.75);
}
.c-page-head--light .c-page-head__right .c-language:hover,
.c-page-head--light .c-page-head__right a.c-language:link:hover {
color: white;
}
.c-page-head--light .c-page-head__right .c-language.active,
.c-page-head--light .c-page-head__right a.c-language:link.active {
color: white;
}
@media screen and (min-width: 1024px) {
.c-page-head--light .c-page-head__right .c-language,
.c-page-head--light .c-page-head__right a.c-language:link {
display: inline-block;
}
}
.c-page-head.is-active .c-page-head__right .c-language {
display: none !important;
}
/* ==========================================================================
#Pager
========================================================================== */
/*doc
---
title: Pager
name: pager
category: Components - Pager
---
Default pager styling tailored to the output of a standard drupal pager.
```html_example
```
*/
.c-pager {
clear: both;
display: table;
margin: 0 auto 1.3rem;
padding: 0;
}
.c-pager__item {
display: inline;
text-align: center;
margin-right: 0.125rem;
}
.c-pager__item.is-active a {
background-color: #b5b5b5;
color: #fff;
}
.c-pager__link {
background-color: #fff;
color: #373737;
display: inline-block;
padding: 0.25rem 0.2rem;
font-size: 1rem;
font-weight: 300;
}
.c-pager__link:link, .c-pager__link:visited, .c-pager__link:active {
color: #373737;
}
.c-pager__link:hover {
background-color: #b5b5b5;
color: #fff;
}
.c-pager__next a:hover {
background: 0;
}
.c-pager__next span {
text-indent: -9999rem;
display: block;
line-height: 0;
}
.c-pager__next span::after {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #828282;
content: "";
display: block;
margin-top: -0.3125rem;
}
.c-pager__previous a:hover {
background: 0;
}
.c-pager__previous span {
text-indent: -9999rem;
display: block;
line-height: 0;
}
.c-pager__previous span::after {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #828282;
content: "";
display: block;
margin-top: -0.3125rem;
}
.t-bg-sand .c-pager__link {
background-color: transparent;
}
/* ==========================================================================
#Parks Interactive widgets component
========================================================================== */
/*doc
---
title: Parks Interactive widgets
name: parksi-widgets
category: Components - Parks Interactive widgets
---
This is the Parks Interacite widget component which has multiple variations. Take a look at the `` section to see a full example.
```html_example
```
*/
.c-parksi-widget {
position: relative;
}
.c-parksi-widget .vertical-align {
display: block;
height: auto;
}
@media screen and (min-width: 640px) {
.c-parksi-widget .vertical-align {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-parksi-widget .vertical-align {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.c-parksi-widget__body {
background-color: #0c0d0f;
background-image: url(/themes/bricklett/img/explore_park_map5.webp);
background-position: 20% center;
background-repeat: no-repeat;
background-size: auto 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
justify-items: center;
position: relative;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__body {
background-position: center center;
background-size: auto clamp(600px, 100%, 810px);
max-height: 810px;
}
}
.c-parksi-widget__body .o-grid--wide {
position: relative;
height: 100%;
}
.c-parksi-widget__body .o-grid--wide .vertical-align {
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c-parksi-widget__header {
grid-column: 1/span 4;
grid-row: 1;
width: 100%;
}
.c-parksi-widget__header .c-parksi-widget__fixedtext {
position: relative;
}
.c-parksi-widget__header .c-parksi-widget__mobile-select-container {
position: relative;
z-index: 1;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__header .c-parksi-widget__mobile-select-container {
padding-top: 30px;
width: 50%;
}
}
.c-parksi-widget__item {
height: 90vh;
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-parksi-widget__item {
height: 691.2px;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-parksi-widget__item {
height: 921.6px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-parksi-widget__item {
height: 288px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-parksi-widget__item {
height: 511.2px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-parksi-widget__item {
height: 288px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-parksi-widget__item {
height: 432px;
}
}
.c-parksi-widget__item {
font-size: 30px;
color: #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__item {
padding-bottom: 20vh;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-parksi-widget__item {
padding-bottom: 153.6px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-parksi-widget__item {
padding-bottom: 204.8px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-parksi-widget__item {
padding-bottom: 64px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-parksi-widget__item {
padding-bottom: 113.6px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-parksi-widget__item {
padding-bottom: 64px;
}
}
@media screen and (min-width: 1024px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-parksi-widget__item {
padding-bottom: 96px;
}
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__item {
padding-bottom: 160px;
}
}
.c-parksi-widget__item.slick-active .c-parksi-widget__box,
.c-parksi-widget__item.slick-active .c-parksi-widget__map-continent,
.c-parksi-widget__item.slick-active .c-parksi-widget__map-country {
opacity: 1;
}
.c-parksi-widget__box {
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out 0.5s;
transition: opacity 0.5s ease-in-out 0.5s;
text-align: center;
width: 100%;
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-parksi-widget__box {
-webkit-transform: translateX(0%);
transform: translateX(0%);
margin: 0 auto;
}
}
.c-parksi-widget__box .c-btn, .c-parksi-widget__box .c-cta-widget--embed .js-cm-submit-button, .c-cta-widget--embed .c-parksi-widget__box .js-cm-submit-button,
.c-parksi-widget__box .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .c-parksi-widget__box button[type=submit] {
border-radius: rem-calc(4px);
}
@media screen and (min-width: 640px) {
.c-parksi-widget__title {
font-size: 2rem;
margin-bottom: 0;
color: #fff;
}
}
.c-parksi-widget__country {
font-size: 1.7rem;
font-weight: 300;
font-family: "Roboto", sans-serif;
}
.c-parksi-widget__map {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
align-self: center;
display: none;
grid-column: 1/span 4;
grid-row: 1;
grid-template-areas: "map";
justify-items: center;
position: relative;
width: 100%;
z-index: 1;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__map {
display: grid;
grid-column: 3/span 3;
}
}
.c-parksi-widget__map-continent {
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out 1s;
transition: opacity 0.5s ease-in-out 1s;
display: block;
max-height: 480px;
}
.c-parksi-widget__map-country {
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out 1.75s;
transition: opacity 0.5s ease-in-out 1.75s;
position: absolute;
top: 0;
right: 0;
max-height: 480px;
background: no-repeat center center;
background-size: cover;
}
.c-parksi-widget__map .o-map__svg-wrap--africa {
grid-area: map;
max-width: 640px;
width: 640px;
}
.c-parksi-widget__map .c-parksi-widget__footer {
align-self: start;
grid-area: map;
-webkit-margin-before: 1.5rem;
margin-block-start: 1.5rem;
-webkit-margin-start: 2rem;
margin-inline-start: 2rem;
max-width: 640px;
position: relative;
top: unset;
left: unset;
}
.c-parksi-widget__map .c-parksi-widget__footer .js-parksi-nav {
list-style-type: none;
}
.c-parksi-widget__container {
grid-column: 1/span 4;
grid-row: 1;
}
.c-parksi-widget__container .c-parksi-widget__item {
padding-bottom: 0;
}
.c-parksi-widget__container .c-parksi-widget__item .vertical-align {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__container .c-parksi-widget__item .vertical-align {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
.c-parksi-widget__container .c-parksi-widget__item .c-parksi-widget__box {
position: relative;
top: unset;
-webkit-transform: unset;
transform: unset;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__container .c-parksi-widget__item .c-parksi-widget__box {
margin-top: 2rem;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-parksi-widget__container .c-parksi-widget__item .c-parksi-widget__box {
margin-block: 2.5rem 1rem;
padding-top: 1rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-parksi-widget__container .c-parksi-widget__item .c-parksi-widget__box {
padding-top: 1rem;
}
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-parksi-widget__container .c-parksi-widget__item .c-parksi-widget__box--close {
display: none;
}
}
.c-parksi-widget__footer {
margin-top: -15vh;
height: 15vh;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
position: relative;
z-index: 100px;
display: block;
}
@media screen and (min-width: 640px) {
.c-parksi-widget__footer {
margin-top: -20vh;
height: 20vh;
height: auto;
color: #373737;
background-color: rgba(255, 255, 255, 0.7);
}
}
@media screen and (min-width: 640px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-parksi-widget__footer {
margin-top: -153.6px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-parksi-widget__footer {
margin-top: -204.8px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-parksi-widget__footer {
margin-top: -64px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-parksi-widget__footer {
margin-top: -113.6px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-parksi-widget__footer {
margin-top: -64px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-parksi-widget__footer {
margin-top: -96px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-parksi-widget__footer {
height: 153.6px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-parksi-widget__footer {
height: 204.8px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-parksi-widget__footer {
height: 64px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-parksi-widget__footer {
height: 113.6px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-parksi-widget__footer {
height: 64px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-parksi-widget__footer {
height: 96px;
}
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__footer {
margin-top: -160px;
height: 160px;
}
}
@media screen and (min-width: 640px) {
.c-parksi-widget__footercols {
margin-left: 0;
}
}
.c-parksi-widget__ftitle {
margin-top: 2.5vh;
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-parksi-widget__ftitle {
margin-top: 19.2px;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-parksi-widget__ftitle {
margin-top: 25.6px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-parksi-widget__ftitle {
margin-top: 8px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-parksi-widget__ftitle {
margin-top: 14.2px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-parksi-widget__ftitle {
margin-top: 8px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-parksi-widget__ftitle {
margin-top: 12px;
}
}
.c-parksi-widget__ftitle {
margin-bottom: 5vh;
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-parksi-widget__ftitle {
margin-bottom: 38.4px;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-parksi-widget__ftitle {
margin-bottom: 51.2px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-parksi-widget__ftitle {
margin-bottom: 16px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-parksi-widget__ftitle {
margin-bottom: 28.4px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-parksi-widget__ftitle {
margin-bottom: 16px;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-parksi-widget__ftitle {
margin-bottom: 24px;
}
}
.c-parksi-widget__ftitle {
font-weight: 300;
text-align: center;
font-size: 1.35rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-parksi-widget__ftitle {
font-size: 1.5rem;
margin-top: 2rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-parksi-widget__ftitle {
margin-top: 3rem;
margin-bottom: 1rem;
}
.c-parksi-widget__ftitle span {
display: block;
}
}
@media screen and (min-width: 640px) {
.c-parksi-widget__ftitle span {
display: block;
}
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__ftitle {
margin-top: 0;
margin-bottom: 0;
}
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__ftitle {
font-size: 2.75rem;
text-align: left;
margin-bottom: 0.5rem;
}
}
.c-parksi-widget__snav {
padding: 0 1rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-parksi-widget__snav {
height: 70% !important;
overflow: hidden;
overflow-y: scroll;
margin-top: 1.5rem;
}
}
.c-parksi-widget__stitle {
font-size: 0.9rem;
font-family: "Roboto", sans-serif;
font-weight: 300;
text-align: center;
margin-bottom: 0;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__stitle {
font-size: 1.25rem;
}
}
.c-parksi-widget__scountry {
font-size: 0.5rem;
font-family: "Roboto", sans-serif;
font-weight: 300;
text-align: center;
margin-bottom: 0;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__scountry {
font-size: 0.75rem;
}
}
.c-parksi-widget__logo {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 100%;
text-align: center;
z-index: -1;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__logo {
bottom: 10px;
}
}
.slick-slide img.c-parksi-widget__map-country--regular {
display: block;
}
.slick-slide img.c-parksi-widget__map-country--retina {
display: none;
}
.c-snav {
margin-top: -1.5rem;
padding: 0;
}
.c-snav .slick-list {
padding-top: 0.5rem;
}
@media screen and (min-width: 640px) {
.c-snav .slick-list {
display: block;
}
}
.c-snav .slick-dots li {
width: 11px;
height: 11px;
margin: 0 4px;
}
@media screen and (max-width: 641px) {
.c-snav .slick-dots li {
margin: 0 2px;
}
}
.c-snav .slick-dots li.slick-active button::before {
color: #fff;
}
.c-snav .slick-dots li button::before {
height: 12px;
width: 12px;
line-height: 11px;
border: 1px solid #fff;
color: transparent;
border-radius: 50%;
opacity: 1;
}
.c-snav__item {
margin: 0;
position: relative;
cursor: pointer;
padding-top: 1rem;
outline: none;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: rgba(255, 255, 255, 0);
}
.c-snav__item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1rem;
z-index: -1;
background-color: rgba(255, 255, 255, 0);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.c-snav__item.slick-current {
background-color: rgba(255, 255, 255, 0.3);
}
.c-snav__item.slick-current::before {
background-color: rgba(255, 255, 255, 0.7);
}
@media screen and (min-width: 640px) {
.c-snav__cont {
height: 20vh;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0.5rem 1rem;
background-repeat: no-repeat;
background-size: contain;
background-origin: content-box;
background-position: center bottom;
position: relative;
z-index: 1;
}
}
@media screen and (min-width: 640px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-snav__cont {
height: 153.6px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-snav__cont {
height: 204.8px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-snav__cont {
height: 64px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-snav__cont {
height: 113.6px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-snav__cont {
height: 64px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-snav__cont {
height: 96px;
}
}
@media screen and (min-width: 1024px) {
.c-snav__cont {
height: 160px;
}
}
/* Arrows */
.c-widget .slick-prev,
.c-widget .slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 34px;
height: 11px;
padding: 0;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.c-widget .slick-prev:hover,
.c-widget .slick-prev:focus,
.c-widget .slick-next:hover,
.c-widget .slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}
.c-widget .slick-prev:hover::before,
.c-widget .slick-prev:focus::before,
.c-widget .slick-next:hover::before,
.c-widget .slick-next:focus::before {
opacity: 1;
}
.c-widget .slick-prev.slick-disabled::before,
.c-widget .slick-next.slick-disabled::before {
opacity: 0.25;
}
.c-widget .slick-prev::before,
.c-widget .slick-next::before {
opacity: 0.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "";
display: block;
position: absolute;
width: 35px;
height: 35px;
border: 3px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.c-widget .slick-prev {
left: -34px;
}
.c-widget .slick-prev::before {
top: 10px;
left: 10px;
border-right-width: 0;
border-top-width: 0;
}
.c-widget .slick-next {
right: -34px;
}
.c-widget .slick-next::before {
top: 10px;
right: 10px;
border-left-width: 0;
border-bottom-width: 0;
}
.t-bg-white .slick-prev::before,
.t-bg-white .slick-next::before,
.t-bg-sand .slick-prev::before,
.t-bg-sand .slick-next::before {
border-color: #373737;
}
.c-parksi-widget__item {
height: auto;
}
@media screen and (min-width: 640px) {
.c-parksi-widget__item {
height: 900px;
}
}
.c-parksi-widget__box,
.c-parksi-widget__title {
color: #0c0c0c;
}
.c-parksi-widget__title {
font-size: 1.5rem;
}
.c-parksi-widget__title br {
display: none;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__fixedtext {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row;
-ms-flex-flow: row;
flex-flow: row;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
min-height: 100%;
position: absolute;
max-width: 1305px;
margin: 0 auto;
}
}
.c-parksi-widget__fixedtext h4 {
color: #fff;
text-align: center;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__fixedtext h4 {
margin-top: 2rem;
}
}
.c-parksi-widget__fixedtext p {
font-size: 1.2rem;
font-weight: 400;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-parksi-widget__fixedtext p {
display: none;
}
}
.c-parksi-widget__selectnav {
display: none;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-parksi-widget__selectnav {
display: block;
position: relative;
}
}
.c-parksi-widget__box {
padding: 0 1rem;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 10px;
text-align: center;
z-index: 999;
position: relative;
width: 95%;
-webkit-transform: translateX(-1.5%);
transform: translateX(-1.5%);
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-parksi-widget__box {
position: absolute;
z-index: 99999999;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.75);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.75);
}
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__box {
width: 50%;
padding: 0 40px;
-webkit-transform: translateX(10%) translateY(10%);
transform: translateX(10%) translateY(10%);
-webkit-box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.7);
box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.7);
}
}
.c-parksi-widget__box--close {
text-align: right;
display: block;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__box--close {
line-height: 0.75;
}
}
.c-parksi-widget__box--close span {
color: #0c0c0c;
font-size: 2.5rem;
font-weight: 300;
cursor: pointer;
display: inline-block;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__box--close span {
margin-right: -20px;
line-height: 0.75;
}
}
.c-parksi-widget__box img {
max-height: 100px;
margin: 0 auto 1rem;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__box img {
margin: -1rem auto 1rem;
}
}
.c-parksi-widget__box p {
font-size: 1rem;
}
@media screen and (min-width: 1024px) {
.c-parksi-widget__box p {
margin-bottom: 0.5rem;
}
}
.c-parksi-widget__map {
width: 350px;
max-width: 350px;
margin: 4rem auto;
}
@media screen and (min-width: 640px) {
.c-parksi-widget__map {
width: 640px;
max-width: 640px;
margin: 0;
}
}
.o-map__svg-wrap {
overflow: hidden;
}
.o-map__svg-wrap path {
fill: rgba(255, 255, 255, 0.5);
}
.o-map__svg-wrap path.a-map__region--world--active {
fill: #354351;
}
.c-parksi-widget__footer {
position: absolute;
top: 1rem;
left: 0;
height: auto;
margin: 0;
background: none;
width: 100%;
height: 100%;
}
@media screen and (min-width: 640px) {
.c-snav__cont {
height: 12px;
width: 12px;
padding: 0;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-snav__item {
width: 90vw !important;
height: auto;
padding: 0 0.25rem;
}
}
@media screen and (min-width: 640px) {
.c-snav__item {
width: 16px;
}
}
.c-snav__item {
background: none;
}
.c-snav__item.slick-current {
background: #fff;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-snav__item.slick-current {
width: 90vw !important;
height: 100% !important;
padding: 0.5rem 1.25rem;
border-radius: 0;
max-width: 90vw !important;
max-height: 100% !important;
}
}
.js-parksi-nav .slick-arrow {
display: none;
}
.c-parksi-widget__snav {
height: 100%;
}
.js-parksi-nav {
padding: 0;
margin: 0;
min-width: 100%;
height: 100%;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.js-parksi-nav {
height: 2.5rem;
margin: 0 auto;
min-width: 80vw;
width: 80vw;
z-index: 2000;
background: #fff;
overflow: hidden;
color: #0c0c0c;
}
.js-parksi-nav:hover {
height: auto;
}
.js-parksi-nav li:first-of-type::after {
/* width: 30px; */
/* height: 30px; */
/* background: #f00; */
content: "";
display: inline-block;
position: absolute;
right: 1rem;
top: 0.75rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 15px;
width: 15px;
border-style: solid;
border-color: #333333;
border-width: 0px 2px 2px 0px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: border-width 150ms ease-in-out;
transition: border-width 150ms ease-in-out;
}
.js-parksi-nav .c-snav__item {
padding: 0.65rem 1rem;
width: 100% !important;
min-width: 300px;
}
}
.js-parksi-nav > .slick-list {
height: 100%;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.js-parksi-nav > .slick-list {
padding: 0;
}
}
.js-parksi-nav > .slick-list > .slick-track {
-webkit-transform: none !important;
transform: none !important;
height: 100%;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.js-parksi-nav > .slick-list > .slick-track {
width: 50vw !important;
}
}
.js-parksi-nav .c-snav__item.slick-current {
background: none;
max-width: 20px;
max-height: 20px;
border-radius: 20px;
}
.js-parksi-nav .c-snav__item.slick-current::before {
display: none;
}
@media screen and (min-width: 640px) {
.js-parksi-nav .c-snav__item.slick-current .c-parksi-widget__stitle {
border-width: 5px;
}
}
@media screen and (min-width: 640px) {
.js-parksi-nav .js-parksi__item {
position: absolute;
padding: 2px;
height: 16px;
max-width: 16px;
left: 100%;
top: 0;
}
}
@media screen and (min-width: 640px) {
.js-parksi-nav .js-parksi__item .c-parksi-widget__stitle {
font-weight: 700;
font-size: 2rem;
color: rgba(255, 255, 255, 0);
background-color: #dcb457;
border: 3px solid #fff;
border-radius: 100px;
line-height: 1;
display: block;
height: 12px;
width: 12px;
}
}
@media screen and (min-width: 640px) {
.js-parksi-nav .js-parksi__item:hover .c-parksi-widget__stitle {
border-width: 5px;
height: 16px;
width: 16px;
}
}
@media screen and (min-width: 640px) {
.js-parksi-nav .js-parksi__item--angola {
top: 440px;
left: 250px;
}
.js-parksi-nav .js-parksi__item--benin {
top: 225px;
left: 160px;
}
.js-parksi-nav .js-parksi__item--chad {
top: 190px;
left: 300px;
}
.js-parksi-nav .js-parksi__item--centralafricanrepublic {
top: 250px;
left: 320px;
}
.js-parksi-nav .js-parksi__item--congo {
left: 250px;
top: 350px;
}
.js-parksi-nav .js-parksi__item--drc {
left: 340px;
top: 350px;
}
.js-parksi-nav .js-parksi__item--malawi {
left: 440px;
top: 450px;
}
.js-parksi-nav .js-parksi__item--mozambique {
top: 490px;
left: 450px;
}
.js-parksi-nav .js-parksi__item--rwanda {
top: 330px;
left: 410px;
}
.js-parksi-nav .js-parksi__item--southsudan {
top: 250px;
left: 410px;
}
.js-parksi-nav .js-parksi__item--zambia {
top: 450px;
left: 400px;
}
.js-parksi-nav .js-parksi__item--zimbabwe {
top: 490px;
left: 410px;
}
}
@media screen and (min-width: 640px) {
.js-parksi-nav .js-parksi__item--badingilo {
-webkit-transform: translateX(5px) translateY(10px);
transform: translateX(5px) translateY(10px);
}
.js-parksi-nav .js-parksi__item--bangweulu {
-webkit-transform: translateX(5px) translateY(-40px);
transform: translateX(5px) translateY(-40px);
}
.js-parksi-nav .js-parksi__item--boma {
-webkit-transform: translateX(35px);
transform: translateX(35px);
}
.js-parksi-nav .js-parksi__item--chinko {
-webkit-transform: translateX(35px) translateY(-5px);
transform: translateX(35px) translateY(-5px);
}
.js-parksi-nav .js-parksi__item--ennedi {
-webkit-transform: translateX(20px) translateY(-50px);
transform: translateX(20px) translateY(-50px);
}
.js-parksi-nav .js-parksi__item--garamba {
-webkit-transform: translateX(30px) translateY(-60px);
transform: translateX(30px) translateY(-60px);
}
.js-parksi-nav .js-parksi__item--iona {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
.js-parksi-nav .js-parksi__item--kafue {
-webkit-transform: translateX(-20px) translateY(-20px);
transform: translateX(-20px) translateY(-20px);
}
.js-parksi-nav .js-parksi__item--liuwaplain {
-webkit-transform: translateX(-40px);
transform: translateX(-40px);
}
.js-parksi-nav .js-parksi__item--liwonde {
-webkit-transform: translateX(5px) translateY(-5px);
transform: translateX(5px) translateY(-5px);
}
.js-parksi-nav .js-parksi__item--majete {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
.js-parksi-nav .js-parksi__item--mangochi {
-webkit-transform: translateY(5px);
transform: translateY(5px);
}
.js-parksi-nav .js-parksi__item--matusadona {
-webkit-transform: translateX(-15px) translateY(-5px);
transform: translateX(-15px) translateY(-5px);
}
.js-parksi-nav .js-parksi__item--nkhotakota {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
.js-parksi-nav .js-parksi__item--nyungwe {
-webkit-transform: translateX(-8px);
transform: translateX(-8px);
}
.js-parksi-nav .js-parksi__item--odzala-kokoua {
-webkit-transform: translateX(22px) translateY(-50px);
transform: translateX(22px) translateY(-50px);
}
.js-parksi-nav .js-parksi__item--pendjari {
-webkit-transform: translateX(-5px) translateY(-10px);
transform: translateX(-5px) translateY(-10px);
}
.js-parksi-nav .js-parksi__item--siniakaminia {
-webkit-transform: translateX(5px) translateY(25px);
transform: translateX(5px) translateY(25px);
}
.js-parksi-nav .js-parksi__item--w {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
.js-parksi-nav .js-parksi__item--zakouma {
-webkit-transform: translateX(15px) translateY(25px);
transform: translateX(15px) translateY(25px);
}
}
@media screen and (min-width: 640px) {
.js-parksi-nav .js-parksi__item .c-parksi-widget__stitle--park {
display: none;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.js-parksi-nav .js-parksi__item .c-parksi-widget__stitle--dot {
display: none;
}
}
.dot-mobile {
max-width: 350px;
margin: 0 auto;
position: absolute;
height: 100%;
left: 0;
right: 0;
top: 0;
font-size: 0;
display: none;
}
.dot-mobile span {
position: absolute;
background: #dcb457;
border: 3px solid #fff;
border-radius: 50%;
height: 12px;
width: 12px;
z-index: 999;
font-size: 1px;
display: inline-block;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.dot-mobile {
display: block;
}
.dot-mobile--akagera span {
top: 291px;
left: 238px;
}
.dot-mobile--badingilo span {
top: 255px;
left: 232px;
}
.dot-mobile--bangweulu span {
top: 342px;
left: 237px;
}
.dot-mobile--bazaruto span {
top: 385px;
left: 263px;
}
.dot-mobile--boma span {
top: 250px;
left: 250px;
}
.dot-mobile--chinko span {
top: 245px;
left: 204px;
}
.dot-mobile--ennedi span {
top: 189px;
left: 183px;
}
.dot-mobile--garamba span {
top: 277px;
left: 219px;
}
.dot-mobile--iona span {
top: 350px;
left: 162px;
}
.dot-mobile--kafue span {
top: 353px;
left: 230px;
}
.dot-mobile--liuwaplain span {
top: 359px;
left: 209px;
}
.dot-mobile--liwonde span {
top: 360px;
left: 260px;
}
.dot-mobile--southsudamajeten span {
top: 315px;
left: 165px;
}
.dot-mobile--majete span {
top: 315px;
left: 165px;
}
.dot-mobile--mangochi span {
top: 381px;
left: 255px;
}
.dot-mobile--matusadona span {
top: 315px;
left: 165px;
}
.dot-mobile--nkhotakota span {
top: 354px;
left: 251px;
}
.dot-mobile--nyungwe span {
top: 291px;
left: 234px;
}
.dot-mobile--odzala-kokoua span {
top: 291px;
left: 159px;
}
.dot-mobile--pendjari span {
top: 231px;
left: 95px;
}
.dot-mobile--siniakaminia span {
top: 227px;
left: 174px;
}
.dot-mobile--w span {
top: 227px;
left: 100px;
}
.dot-mobile--zakouma span {
top: 232px;
left: 186px;
}
}
/* ==========================================================================
#Primary nav component
========================================================================== */
/*doc
---
title: Primary Nav
name: primary-nav
category: Components - Primary Nav
---
```html_example
```
*/
/* List class
========================================================================== */
.c-primary-nav {
padding: 0;
margin-top: 1.2rem;
list-style-type: none;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-primary-nav {
height: 100vh;
-webkit-transition: all 0.3s cubic-bezier(0.33, 0.02, 0.46, 0.01);
transition: all 0.3s cubic-bezier(0.33, 0.02, 0.46, 0.01);
-webkit-transform: translateX(0);
transform: translateX(0);
width: 100%;
opacity: 0;
top: 70px;
left: 0;
position: absolute;
visibility: hidden;
padding: 4rem 0 2rem;
background: #373737;
height: 100vh !important;
}
}
@media screen and (min-width: 0) and (max-width: 1023px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-primary-nav {
height: 768px;
}
}
@media screen and (min-width: 0) and (max-width: 1023px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-primary-nav {
height: 1024px;
}
}
@media screen and (min-width: 0) and (max-width: 1023px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-primary-nav {
height: 320px;
}
}
@media screen and (min-width: 0) and (max-width: 1023px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-primary-nav {
height: 568px;
}
}
@media screen and (min-width: 0) and (max-width: 1023px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-primary-nav {
height: 320px;
}
}
@media screen and (min-width: 0) and (max-width: 1023px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-primary-nav {
height: 480px;
}
}
.c-primary-nav.is-active {
opacity: 1;
visibility: visible;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-primary-nav.is-active {
z-index: 999;
}
}
/* List items class
========================================================================== */
.c-primary-nav__item {
margin: 0 1rem;
margin-bottom: 0;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-primary-nav__item {
margin: 0 0 0.75rem 0;
}
}
@media screen and (min-width: 1024px) {
.c-primary-nav__item {
display: block;
position: relative;
float: left;
margin-right: 0.55rem;
margin-left: 0.55rem;
}
}
@media screen and (min-width: 1100px) {
.c-primary-nav__item {
margin-right: 0.95rem;
margin-left: 0.95rem;
}
}
@media screen and (min-width: 1150px) {
.c-primary-nav__item {
margin-right: 0rem;
margin-left: 0rem;
}
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-primary-nav__item.collapsed {
height: auto;
}
}
@media screen and (min-width: 1200px) {
.c-primary-nav__item {
margin-right: 1.5rem;
}
}
@media screen and (min-width: 1255px) {
.c-primary-nav__item {
margin-right: 1.65rem;
}
}
@media screen and (min-width: 1280px) {
.c-primary-nav__item {
margin-right: 1.2rem;
}
}
@media screen and (min-width: 1400px) {
.c-primary-nav__item {
margin-right: 1.2rem;
}
}
@media screen and (min-width: 1024px) {
.c-primary-nav__item.has-dropdown:hover .c-drop-nav__wrap {
opacity: 1;
visibility: visible;
}
}
@media screen and (min-width: 1024px) {
.c-primary-nav__item.has-dropdown:hover .c-drop-nav__wrap .c-btn--small {
margin: 0.65rem auto 0;
}
}
.c-primary-nav__item .c-primary-nav__link {
font-weight: 500;
font-size: 0.9rem;
text-transform: uppercase;
padding: 0.5rem 1.5rem 0.5rem 1rem;
display: block;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
position: relative;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-primary-nav__item .c-primary-nav__link {
display: block;
font-size: 1.7rem;
padding: 0.5rem 1.5rem;
}
}
@media screen and (min-width: 1024px) and (max-width: 1149px) {
.c-primary-nav__item .c-primary-nav__link {
padding: 0.5rem 0;
}
}
@media screen and (min-width: 1150px) and (max-width: 1237px) {
.c-primary-nav__item .c-primary-nav__link {
padding: 0.5rem 1rem;
}
}
.c-primary-nav__item .c-primary-nav__link::after {
height: 0.8em;
width: 0.5em;
margin-left: 0.35rem;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
top: -0.1em;
}
@media screen and (min-width: 1024px) {
.c-primary-nav__item .c-primary-nav__link::after {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
height: 1.2em;
width: 1em;
}
}
/* Drop-down
========================================================================== */
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-drop-nav__wrap {
display: none;
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
display: none;
visibility: hidden;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
position: absolute;
width: 100%;
top: 0;
left: 0;
height: auto;
background: #373737;
padding: 4rem 10% 2rem;
}
}
@media screen and (min-width: 1024px) {
.c-drop-nav__wrap {
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
background: #fff;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
min-width: 150px;
overflow: hidden;
padding: 1rem 1.5rem 0.65rem;
opacity: 0;
visibility: hidden;
position: absolute;
top: 100%;
z-index: 4;
width: 460px;
}
}
@media screen and (min-width: 1024px) {
.c-drop-nav__wrap--onecol {
width: 300px;
}
}
@media screen and (min-width: 1024px) {
.c-drop-nav__wrap--threecol {
width: 690px;
}
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-drop-nav__wrap.is-shown {
display: block;
opacity: 1;
visibility: visible;
width: 100%;
min-height: 100vh;
max-height: 100vh;
overflow-y: scroll;
padding-bottom: 8rem;
}
}
.c-drop-nav__wrap.is-expanded {
display: block;
opacity: 1;
visibility: visible;
}
.c-drop-nav {
margin-bottom: 0;
}
.c-drop-nav .c-drop-nav__item:last-child a {
border-bottom: 0;
}
.c-drop-nav__section > span {
text-transform: uppercase;
font-weight: 500;
}
.c-drop-nav__section a {
padding: 0.5rem 0;
-webkit-transition: padding-left 0.2s ease-in-out;
transition: padding-left 0.2s ease-in-out;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-drop-nav__section a {
font-weight: 300;
font-size: 1.2rem;
padding: 0.25rem 0;
}
.c-drop-nav__section a:link, .c-drop-nav__section a:visited {
color: #fff;
}
}
@media screen and (min-width: 1024px) {
.c-drop-nav__section a {
border-bottom: 1px solid #ccc;
font-size: 0.8rem;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
display: inline-block;
line-height: 1.5rem;
margin: 0;
}
.c-drop-nav__section a:link, .c-drop-nav__section a:visited {
color: #373737;
}
}
@media screen and (min-width: 1024px) {
.c-drop-nav__section a:hover {
padding-left: 0.5rem;
}
}
@media screen and (min-width: 1024px) {
.c-drop-nav__section > a,
.c-drop-nav__section > span {
text-transform: uppercase;
border-bottom: 0;
font-weight: 500;
}
}
@media screen and (min-width: 1024px) {
.c-drop-nav__section > span {
font-size: 0.8rem;
line-height: 1.5rem;
color: #373737;
}
}
.c-drop-nav {
/* the lowest dropdowns */
}
@media screen and (min-width: 1024px) {
.c-drop-nav__item--has-children > .c-drop-nav__link {
border-bottom: 0;
}
}
.c-drop-nav__item--has-children ul {
margin: 0;
padding: 0;
list-style: none;
}
@media screen and (min-width: 1024px) {
.c-drop-nav__item--has-children ul {
border-bottom: 1px solid #ccc;
}
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-drop-nav__item--has-children ul {
padding: 0 0 0 1rem;
}
}
.c-drop-nav__item--has-children ul a {
padding: 0 0 0 0.75rem;
border: 0;
line-height: 1.2;
position: relative;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-drop-nav__item--has-children ul a {
padding: 0.25rem 0;
display: block;
}
}
.c-drop-nav__item--has-children ul a::after {
display: block;
position: absolute;
content: "";
left: 0.25rem;
top: 0.4rem;
width: 0;
height: 0;
border-style: solid;
border-width: 2px 0 2px 3.6px;
border-color: transparent;
}
@media screen and (min-width: 1024px) {
.c-drop-nav__item--has-children ul a::after {
border-left-color: #373737;
}
}
.c-drop-nav__section .back-link::before {
background-image: url("../../processed/svg/arrow_white.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
-webkit-transition: -webkit-filter 0.25s ease-in-out;
transition: -webkit-filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out;
-webkit-filter: brightness(100%);
filter: brightness(100%);
width: 1em;
height: 1em;
font-size: 0.8em;
top: -0.1em;
right: 0.3rem;
vertical-align: middle;
}
.c-drop-nav__section .back-link {
font-size: 1.7rem;
font-weight: 700;
display: inline-block;
margin-bottom: 0.5rem;
margin-left: -1.15rem;
}
@media screen and (min-width: 1024px) {
.c-drop-nav__section .back-link {
display: none;
}
}
.c-drop-nav__section .back-link::before {
height: 0.8em;
width: 0.5em;
margin-right: 0.4rem;
}
/* Mobile toggle link
========================================================================== */
.c-mobile-toggle::after {
background-image: url("../../processed/svg/hamburger.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
-webkit-transition: -webkit-filter 0.25s ease-in-out;
transition: -webkit-filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out;
-webkit-filter: brightness(100%);
filter: brightness(100%);
font-size: 0.8em;
top: -0.1em;
left: 0.3rem;
vertical-align: middle;
}
.c-mobile-toggle {
display: block;
text-transform: uppercase;
font-size: 1rem;
font-weight: 700;
text-align: right;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media screen and (min-width: 1024px) {
.c-mobile-toggle {
display: none;
}
}
.c-mobile-toggle::after {
width: 1.1em;
height: 1.1em;
font-size: 0.9em;
}
.c-mobile-toggle:link, .c-mobile-toggle:visited {
color: #fff;
}
.c-mobile-toggle.is-active::after {
background-image: url("../../processed/svg/x.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
-webkit-transition: -webkit-filter 0.25s ease-in-out;
transition: -webkit-filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out;
-webkit-filter: brightness(100%);
filter: brightness(100%);
font-size: 0.8em;
top: -0.1em;
left: 0.3rem;
vertical-align: middle;
}
@media screen and (min-width: 1024px) {
.mobile-only {
display: none;
}
}
.mobile-buttons {
margin: 0 1rem;
padding: 0.5rem 1.5rem 0.5rem 1rem;
list-style-type: none;
max-width: 300px;
}
.mobile-buttons li {
float: left;
width: calc(50% - 20px);
margin-right: 10px;
}
.mobile-buttons li a {
display: block;
text-align: center;
width: 100%;
font-size: 1.2rem;
margin-right: 0.25rem;
padding-left: 0;
padding-right: 0;
}
.mobile-search {
margin: 0;
padding: 0.5rem 1.5rem 0.5rem 1.5rem;
clear: both;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.is-active .c-featured-text__credit {
display: none;
}
}
.c-menu-involved-nav {
position: relative;
margin-bottom: 0;
padding: 0;
}
.c-menu-involved-nav > .c-drop-nav__item {
display: block;
}
@media screen and (min-width: 1024px) {
.c-menu-involved-nav > .c-drop-nav__item:hover > a,
.c-menu-involved-nav > .c-drop-nav__item:hover > span {
background-color: rgba(255, 255, 255, 0.2);
}
}
.c-menu-involved-nav > .c-drop-nav__item > a,
.c-menu-involved-nav > .c-drop-nav__item > span {
color: #FFF;
font-size: 0.9rem;
font-style: normal;
font-weight: 500;
line-height: normal;
padding: 0;
}
@media screen and (min-width: 1024px) {
.c-menu-involved-nav > .c-drop-nav__item > a,
.c-menu-involved-nav > .c-drop-nav__item > span {
display: block;
text-transform: uppercase;
padding: 0.75rem 0.8rem;
border-radius: 10px;
border: 2px solid #31A3F3;
margin-bottom: 0;
}
.c-menu-involved-nav > .c-drop-nav__item > a::after,
.c-menu-involved-nav > .c-drop-nav__item > span::after {
background-image: url("../../processed/svg/arrow_white.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
-webkit-transition: -webkit-filter 0.25s ease-in-out;
transition: -webkit-filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out;
transition: filter 0.25s ease-in-out, -webkit-filter 0.25s ease-in-out;
-webkit-filter: brightness(100%);
filter: brightness(100%);
font-size: 0.8em;
top: -0.3em;
left: 0.3rem;
vertical-align: middle;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
height: 1.2em;
width: 1em;
margin-left: 0.35rem;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
}
.c-menu-involved-nav > .c-drop-nav__item:hover > .c-menu-involved-nav__sub {
display: block;
}
.c-menu-involved-nav > .c-drop-nav__item > .c-menu-involved-nav__sub {
position: absolute;
top: 100%;
right: 0;
display: none;
background-color: #FFF;
border: 2px solid #31A3F3;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 10;
padding: 0 1rem !important;
width: clamp(300px, 100vw, 340px);
}
.c-menu-involved-nav > .c-drop-nav__item > .c-menu-involved-nav__sub > .c-drop-nav__item > a,
.c-menu-involved-nav > .c-drop-nav__item > .c-menu-involved-nav__sub > .c-drop-nav__item > span {
color: #ffffff;
text-transform: uppercase;
font-weight: 500;
font-size: 1.2rem;
padding: 0.4rem 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (min-width: 1024px) {
.c-menu-involved-nav > .c-drop-nav__item > .c-menu-involved-nav__sub > .c-drop-nav__item > a,
.c-menu-involved-nav > .c-drop-nav__item > .c-menu-involved-nav__sub > .c-drop-nav__item > span {
color: #373737;
font-size: 0.8rem;
}
}
.c-menu-involved-nav > .c-drop-nav__item .c-menu-involved-nav__sub {
padding: 0;
margin: 0;
text-align: left;
}
.c-menu-involved-nav > .c-drop-nav__item .c-menu-involved-nav__sub > .c-drop-nav__item.menu-item--expanded > a {
font-weight: 500 !important;
}
.c-menu-involved-nav > .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item {
list-style: none;
}
.c-menu-involved-nav > .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item > a {
font-weight: 500;
}
.c-menu-involved-nav > .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item a {
padding: 0.4rem 0;
font-size: 0.8rem;
font-weight: 400;
display: block;
}
.c-menu-involved-nav > .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item a:link, .c-menu-involved-nav > .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item a:visited {
color: #373737;
}
.c-menu-involved-nav > .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item {
border-bottom: 1px solid #cccccc;
}
.c-menu-involved-nav > .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item:first-child {
border-top: 1px solid #31A3F3;
}
.c-menu-involved-nav > .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item:last-child {
margin-bottom: 1rem;
border-bottom: none;
}
.c-menu-involved-nav > .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item a {
padding: 0.6rem 0;
font-size: 0.8rem;
font-weight: 400;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
@media screen and (min-width: 1024px) {
.c-menu-involved-nav > .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item a {
padding: 0.4rem 0;
font-weight: 300;
}
}
@media screen and (min-width: 1024px) {
.c-menu-involved-nav > .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item .c-menu-involved-nav__sub .c-drop-nav__item:hover a {
padding-left: 0.5rem;
background: #e1f1fc;
color: #373737 !important;
}
}
.mobile-only:not(.mobile-search) {
margin: 0 0;
}
.mobile-only:not(.mobile-search) .region-secondary-nav {
margin: 0 0 1rem 0;
}
.mobile-only:not(.mobile-search) .region-secondary-nav nav {
float: none;
}
.mobile-only:not(.mobile-search) .c-menu-involved-nav {
padding: 0.5rem 1.5rem;
position: relative;
}
.mobile-only:not(.mobile-search) .c-menu-involved-nav.is-active {
background-color: #212121;
}
.mobile-only:not(.mobile-search) .c-menu-involved-nav.is-active > .c-drop-nav__item {
border-bottom: none;
}
.mobile-only:not(.mobile-search) .c-menu-involved-nav.is-active > .c-drop-nav__item > .c-menu-involved-nav__sub {
opacity: 1;
max-height: 1000px;
}
.mobile-only:not(.mobile-search) .c-menu-involved-nav > .c-drop-nav__item {
display: block;
border-bottom: 1px solid #31A3F3;
cursor: pointer;
}
.mobile-only:not(.mobile-search) .c-menu-involved-nav > .c-drop-nav__item > a,
.mobile-only:not(.mobile-search) .c-menu-involved-nav > .c-drop-nav__item > span {
color: #FFF;
font-size: 1.2rem;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.9px;
text-transform: uppercase;
padding: 1rem 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.mobile-only:not(.mobile-search) .c-menu-involved-nav > .c-drop-nav__item > a::after,
.mobile-only:not(.mobile-search) .c-menu-involved-nav > .c-drop-nav__item > span::after {
background-image: url("../../processed/svg/arrow_blue.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
position: relative;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-filter: brightness(100%);
filter: brightness(100%);
font-size: 0.8em;
vertical-align: middle;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
height: 1.2em;
width: 1em;
}
.mobile-only:not(.mobile-search) .c-menu-involved-nav > .c-drop-nav__item.is-active > a::after,
.mobile-only:not(.mobile-search) .c-menu-involved-nav > .c-drop-nav__item.is-active > span::after {
background-image: url("../../processed/svg/arrow_blue.svg");
top: 0;
-webkit-transform: rotate(-269deg);
transform: rotate(-269deg);
}
.mobile-only:not(.mobile-search) .c-menu-involved-nav > .c-drop-nav__item > .c-menu-involved-nav__sub {
margin: 0;
position: relative;
top: auto;
right: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background: none;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
z-index: 10;
padding: 0 !important;
width: 100%;
max-height: 0;
opacity: 0;
overflow: hidden;
will-change: max-height, opacity;
-webkit-transition: max-height 0.4s ease, opacity 0.3s ease;
transition: max-height 0.4s ease, opacity 0.3s ease;
}
.mobile-only:not(.mobile-search) .c-menu-involved-nav > .c-drop-nav__item > .c-menu-involved-nav__sub .c-drop-nav__item {
list-style: none;
}
.mobile-only:not(.mobile-search) .c-menu-involved-nav > .c-drop-nav__item > .c-menu-involved-nav__sub .c-drop-nav__item a {
font-size: 1.2rem;
}
.mobile-only:not(.mobile-search) .c-menu-involved-nav > .c-drop-nav__item > .c-menu-involved-nav__sub .c-drop-nav__item a:link, .mobile-only:not(.mobile-search) .c-menu-involved-nav > .c-drop-nav__item > .c-menu-involved-nav__sub .c-drop-nav__item a:visited {
color: #fff;
}
.mobile-only:not(.mobile-search) .mobile-buttons {
margin: 0;
padding: 0 1.5rem 10rem 1.5rem;
list-style-type: none;
max-width: 100%;
}
.mobile-only:not(.mobile-search) .mobile-buttons li {
float: none;
width: 100%;
margin-right: 0;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.05rem;
}
@media screen and (min-width: 1024px) {
.c-page-head.is-active .c-menu-involved-nav .c-drop-nav__item > a,
.c-page-head.is-active .c-menu-involved-nav .c-drop-nav__item > span,
.c-page-head--dark .c-menu-involved-nav .c-drop-nav__item > a,
.c-page-head--dark .c-menu-involved-nav .c-drop-nav__item > span {
color: #373737;
}
.c-page-head.is-active .c-menu-involved-nav .c-drop-nav__item > a::after,
.c-page-head.is-active .c-menu-involved-nav .c-drop-nav__item > span::after,
.c-page-head--dark .c-menu-involved-nav .c-drop-nav__item > a::after,
.c-page-head--dark .c-menu-involved-nav .c-drop-nav__item > span::after {
background-image: url("../../processed/svg/arrow_black.svg");
}
}
.c-page-head.is-active .c-menu-involved-nav .menu-item--expanded.is-active .c-menu-involved-nav__sub.submenu--visible {
display: block !important;
}
.c-primary-nav.is-active:not(.is-shifted) {
overflow-y: scroll;
overflow-x: hidden;
width: 100vw;
}
.c-menu-involved-nav > li > ul > li:first-of-type > a,
.c-menu-involved-nav > li > ul > li:first-of-type > span {
margin-top: 1rem;
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.c-menu-involved-nav > li > ul > li:first-of-type > a::after,
.c-menu-involved-nav > li > ul > li:first-of-type > span::after {
background-image: url("../../processed/svg/arrow_gray_right.svg") !important;
content: "View All";
background-repeat: no-repeat;
display: inline-block;
background-position: right center;
padding-right: 12px;
background-size: 10px 10px;
font-size: 0.7rem;
text-transform: capitalize;
}
/* ==========================================================================
#Teaser component
========================================================================== */
/*doc
---
title: Teaser
name: teaser
category: Components - Teaser
---
This is the teaser component which has multiple variations. Take a look at the `Teaser with image` section to see a full example.
```html_example
Articles
Mindfulness. If you’re still thinking this is merely a touchy-feely trend practiced by yogis, creatives and the business elite – you’re way behind. Thousands of people in organizations around the world are now benefiting from the improved performance, communication, relationships...
```
*/
.c-teaser__source {
font-weight: 600;
color: #7bcf1f;
margin-bottom: 0;
}
.c-teaser__title {
color: #666;
font-size: 1.5rem;
margin-bottom: 0;
}
.c-teaser__link {
color: #30a3f3;
}
.c-teaser__content {
color: #666;
font-size: 1rem;
}
.c-teaser__byline {
color: #666;
}
/*doc
---
title: Teaser with image
name: teaser_with_image
category: Components - Teaser
---
```html_example
Articles
Mindfulness. If you’re still thinking this is merely a touchy-feely trend practiced by yogis, creatives and the business elite – you’re way behind. Thousands of people in organizations around the world are now benefiting from the improved performance, communication, relationships...
```
*/
/*doc
---
title: Teaser in UI Row
name: teaser_ui_row
category: Components - Teaser
---
This is an example of how to use the teaser component with the `ui-row` object to get padding and a border.
```html_example
Articles
Mindfulness. If you’re still thinking this is merely a touchy-feely trend practiced by yogis, creatives and the business elite – you’re way behind. Thousands of people in organizations around the world are now benefiting from the improved performance, communication, relationships...
Articles
Mindfulness. If you’re still thinking this is merely a touchy-feely trend practiced by yogis, creatives and the business elite – you’re way behind. Thousands of people in organizations around the world are now benefiting from the improved performance, communication, relationships...
```
*/
/*doc
---
title: Teaser with byline
name: teaser_with_byline
category: Components - Teaser
---
```html_example
Articles
By Chris Roane
Mindfulness. If you’re still thinking this is merely a touchy-feely trend practiced by yogis, creatives and the business elite – you’re way behind. Thousands of people in organizations around the world are now benefiting from the improved performance, communication, relationships...
```
*/
/* ==========================================================================
Widgets component
use for classes shared by all widgets
========================================================================== */
.c-widget {
fill: #373737;
background-color: #fff;
}
.c-widget.t-bg-blue {
background-color: #0f324e;
color: #fff;
fill: #fff;
}
.c-widget.t-bg-blue .c-default-text__headline,
.c-widget.t-bg-blue h1,
.c-widget.t-bg-blue h2,
.c-widget.t-bg-blue h3,
.c-widget.t-bg-blue h4,
.c-widget.t-bg-blue h5,
.c-widget.t-bg-blue h6 {
color: #fff;
}
.c-widget.t-bg-blue .c-donation__step h6 {
color: #373737;
}
.c-widget.t-bg-sand {
background-color: #e8e8de;
}
.c-widget__intro-text {
text-align: center;
font-size: 1.2rem;
padding: 0;
margin-bottom: 3rem;
font-weight: 300;
}
@media screen and (min-width: 640px) {
.c-widget__intro-text {
padding: 0 4rem;
}
}
@media screen and (min-width: 1024px) {
.c-widget__intro-text {
padding: 0 5rem;
}
}
.c-widget__headline {
text-align: center;
line-height: 1;
}
.c-widget--image-bg {
background-position: center center;
background-repeat: no-repeat;
}
@media screen and (min-width: 1024px) {
.c-widget--image-bg {
background-size: cover;
}
}
.c-widget__square-lists {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0;
margin: 0;
}
.c-widget__square-lists li {
flex-basis: 100%;
-webkit-flex-basis: 100%;
-spec-flex-basis: 100%;
flex-basis: 100%;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
list-style: none;
margin-bottom: 1rem;
}
@media screen and (min-width: 640px) {
.c-widget__square-lists li {
flex-basis: 48%;
-webkit-flex-basis: 48%;
-spec-flex-basis: 48%;
flex-basis: 48%;
-ms-flex-preferred-size: 48%;
-webkit-flex-basis: 48%;
}
}
@media screen and (min-width: 1024px) {
.c-widget__square-lists li {
flex-basis: 32%;
-webkit-flex-basis: 32%;
-spec-flex-basis: 32%;
flex-basis: 32%;
-ms-flex-preferred-size: 32%;
-webkit-flex-basis: 32%;
}
}
.c-widget__square-lists li::before {
content: "";
float: left;
padding-top: 100%;
}
@media screen and (min-width: 1024px) {
.c-widget__square-lists--1 li {
margin-left: 34%;
}
}
@media screen and (min-width: 1024px) {
.c-widget__square-lists--2 li:nth-child(1) {
margin-left: 17%;
}
}
@media screen and (min-width: 1024px) {
.c-widget__square-lists--2 li:nth-child(2) {
margin-right: 17%;
}
}
@media screen and (min-width: 1024px) {
.c-widget__square-lists--4 li:nth-child(4) {
margin-left: 34%;
}
}
@media screen and (min-width: 1024px) {
.c-widget__square-lists--5 li:nth-child(4) {
margin-left: 17%;
}
}
@media screen and (min-width: 1024px) {
.c-widget__square-lists--5 li:nth-child(5) {
margin-right: 17%;
}
}
.c-widget--centered {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.c-widget--centered .c-widget__main {
flex-basis: 100%;
-webkit-flex-basis: 100%;
-spec-flex-basis: 100%;
flex-basis: 100%;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
}
.c-widget--centered .c-widget__main--with-cite {
flex-basis: 100%;
-webkit-flex-basis: 100%;
-spec-flex-basis: 100%;
flex-basis: 100%;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
margin-left: -20%;
}
.c-widget--centered .c-widget__image-credit {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
flex-basis: 20%;
-webkit-flex-basis: 20%;
-spec-flex-basis: 20%;
flex-basis: 20%;
-ms-flex-preferred-size: 20%;
-webkit-flex-basis: 20%;
}
.c-widget__image--left {
float: left;
margin: 1rem 1rem 1rem 0;
}
.c-widget__image--right {
float: right;
margin: 1rem 0 1rem 1rem;
}
.c-widget .ajax_wrapper {
/* ugly fix to chosen issue */
}
.c-widget .ajax_wrapper .ajax_wrapper .c-chosen {
display: none;
}
.c-widget .ajax_wrapper .ajax_results .o-band {
padding: 0;
}
/* ==========================================================================
#Case Study widgets component
========================================================================== */
/*doc
---
title: Case Study widgets
name: cstudy-widgets
category: Components - Case study widgets
---
This is the Case Study widget component which has multiple variations. Take a look at the `` section to see a full example.
```html_example
{% if fields.field_photo_caption is not empty %}
{{fields.field_photo_caption}}
{% endif %}
{% if fields.field_photo_credit is not empty %}
{{fields.field_photo_credit}}
{% endif %}
{% endif %}
{{ fields.field_text_body }}
```
*/
.c-cstudy-widget__content::after {
content: "";
display: table;
clear: both;
}
.c-cstudy-widget__content {
border: 1px solid #b5b5b5;
border-width: 1px 0;
padding-top: 2rem;
padding-bottom: 2rem;
}
.c-cstudy-widget__headline {
text-transform: uppercase;
font-size: 1.2rem;
line-height: 1.3;
font-weight: 400;
margin-bottom: 0;
}
.c-cstudy-widget__subheadline {
font-size: 1.1rem;
line-height: 1.3;
font-family: "Roboto", sans-serif;
font-weight: 300;
}
.c-cstudy-widget__text p {
font-weight: 300;
line-height: 1.7;
font-size: 0.85rem;
}
.c-cstudy-widget__figure {
margin-bottom: 0;
}
.c-cstudy-widget__figcaption {
padding: 0 0.5rem;
}
.c-cstudy-widget__photo {
width: 100%;
}
.c-cstudy-widget__photo-caption {
display: block;
font-weight: 300;
font-size: 0.7rem;
line-height: 1.2;
margin-bottom: 0.2rem;
}
.c-cstudy-widget__photo-credit {
display: block;
font-weight: 300;
font-size: 13px;
margin-bottom: 0.5rem;
}
@media screen and (min-width: 640px) {
.c-cstudy-widget__photo-credit {
margin-bottom: 0;
}
}
/* ==========================================================================
#CTA widgets component
========================================================================== */
.field--type-stacks-type .c-cta-widget .form-actions {
border-top: 0;
margin-bottom: 0;
padding: 0;
text-align: center;
}
.c-cta-widget {
margin-bottom: 0;
}
@media screen and (min-width: 640px) {
.c-cta-widget .o-grid {
max-width: 100%;
width: 100%;
}
}
.c-cta-widget .o-grid .sm-12 {
max-width: 64rem;
margin: 0 auto;
display: block;
float: none;
}
.c-cta-widget__headline {
color: #fff;
text-align: center;
font-size: 3rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-widget__headline {
font-size: 1.75rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-cta-widget__headline {
font-size: 2.2rem;
line-height: 1.2;
}
}
.c-cta-widget__text {
color: #fff;
text-align: center;
font-weight: 300;
font-size: 1.3125rem;
line-height: 1.875rem;
}
.c-cta-widget__input {
text-align: center;
}
.c-cta-widget__input input[type=email],
.c-cta-widget__input input[type=text] {
display: block;
margin-left: auto;
margin-right: auto;
background: transparent;
border: 2px solid #373737;
border: 2px solid rgba(55, 55, 55, 0.5);
width: 100%;
max-width: 441px;
font-size: 1.25rem;
font-weight: 300;
}
.c-cta-widget__input .c-btn, .c-cta-widget__input .c-cta-widget--embed .js-cm-submit-button, .c-cta-widget--embed .c-cta-widget__input .js-cm-submit-button,
.c-cta-widget__input .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .c-cta-widget__input button[type=submit] {
margin: 0 0.8rem;
}
.c-cta-widget__input .c-cta-widget__input--donate {
margin-top: 1rem;
}
.c-cta-widget__photo-credit {
color: #fff;
font-style: normal;
font-size: 13px;
}
section.t-bg-blue:not(.c-cta-widget--left-aligned) {
background-color: #0f324e;
}
section.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=email],
section.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=text] {
border: 2px solid #fff;
color: #fff;
}
section.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=email]::-webkit-input-placeholder,
section.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=text]::-webkit-input-placeholder {
color: #fff;
}
section.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=email]:-moz-placeholder,
section.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=text]:-moz-placeholder {
color: #fff;
opacity: 1;
}
section.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=email]::-moz-placeholder,
section.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=text]::-moz-placeholder {
color: #fff;
opacity: 1;
}
section.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=email]:-ms-input-placeholder,
section.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=text]:-ms-input-placeholder {
color: #fff;
}
.t-bg-sand {
background-color: #e8e8de;
}
.t-bg-sand .c-cta-widget__headline {
color: #373737;
}
.t-bg-sand .c-cta-widget__text {
color: #373737;
}
.t-bg-white {
background-color: #fff;
}
.t-bg-white .c-cta-widget__headline {
color: #373737;
}
.t-bg-white .c-cta-widget__text {
color: #373737;
}
.t-bg-white .c-cta-widget__photo-credit {
color: #373737;
}
.c-cta-widget--elephant {
background-color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-webkit-align-items: start;
-ms-flex-align: start;
align-items: start;
height: 900px;
padding: 1.3rem 0;
background-image: url("../../img/widgets/sign_up_bg2.webp");
background-size: auto 900px;
background-position: center bottom;
background-repeat: no-repeat;
border-top: 8px solid #fff;
border-bottom: 3px solid #fff;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-widget--elephant {
border-top: 3px solid #fff;
}
}
@media screen and (min-width: 1500px) {
.c-cta-widget--elephant {
background-size: cover;
}
}
.c-cta-widget--elephant p {
max-width: 900px;
margin: 0 auto;
line-height: 1.2;
font-size: 1.2rem;
padding-bottom: 1rem;
}
@media screen and (min-width: 640px) {
.c-cta-widget--elephant .o-grid {
padding-top: 3rem;
max-width: 100%;
width: 100%;
}
}
.c-cta-widget--elephant .o-grid .c-cta-widget__text {
color: #0c0c0c;
}
.c-cta-widget--elephant .o-grid [type=email], .c-cta-widget--elephant .o-grid [type=text] {
background: rgba(255, 255, 255, 0.85);
color: #0c0c0c;
font-size: 1.1rem;
font-weight: 400;
padding: 1.25rem 1.7rem;
margin-bottom: 1.5rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-widget--elephant .o-grid [type=email], .c-cta-widget--elephant .o-grid [type=text] {
font-size: 1rem;
padding: 1.2rem 1.7rem;
border: none;
}
}
.c-cta-widget--elephant .o-grid + .o-grid {
display: none;
}
.c-cta-widget--elephant .c-featured-text__credit .c-cta-widget__photo-credit {
color: #fff;
}
.c-cta-widget--embed {
background-size: 100% auto;
background-position: center bottom;
background-repeat: no-repeat;
}
.c-cta-widget--embed [type=email],
.c-cta-widget--embed [type=tel],
.c-cta-widget--embed [type=text],
.c-cta-widget--embed input:not([type]),
.c-cta-widget--embed textarea {
background-color: rgba(232, 232, 222, 0.5);
margin-bottom: 0.75rem;
width: 100%;
padding: 0.6rem 0.4rem;
height: 50px;
border: 2px solid rgba(55, 55, 55, 0.5);
font-size: 0.8rem;
line-height: 1;
}
.c-cta-widget--embed h1,
.c-cta-widget--embed h2,
.c-cta-widget--embed h3 {
text-align: center;
}
.c-cta-widget--embed .js-cm-submit-button,
.c-cta-widget--embed button[type=submit] {
margin: 0 auto 1.3rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c-cta-widget--embed.c-cta-widget--white-text {
background-color: rgba(12, 12, 12, 0.5);
color: #fff;
}
.c-cta-widget--embed.c-cta-widget--white-text h1,
.c-cta-widget--embed.c-cta-widget--white-text h2,
.c-cta-widget--embed.c-cta-widget--white-text h3 {
color: #fff;
}
.c-cta-widget--embed.c-cta-widget--white-text [type=email],
.c-cta-widget--embed.c-cta-widget--white-text [type=tel],
.c-cta-widget--embed.c-cta-widget--white-text [type=text],
.c-cta-widget--embed.c-cta-widget--white-text input:not([type]),
.c-cta-widget--embed.c-cta-widget--white-text textarea {
background-color: rgba(55, 55, 55, 0.5);
border: 2px solid rgba(232, 232, 222, 0.5);
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-widget--left-aligned {
padding-top: 50vw;
}
}
.c-cta-widget--left-aligned .c-cta-widget__headline,
.c-cta-widget--left-aligned .c-cta-widget__text {
text-align: left;
}
@media screen and (min-width: 1024px) {
.c-cta-widget--left-aligned .c-cta-widget__headline,
.c-cta-widget--left-aligned .c-cta-widget__text {
max-width: 400px;
}
}
.c-cta-widget--left-aligned .c-cta-widget__headline {
font-family: "OldStyleMT-Regular", serif;
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 0;
}
.c-cta-widget--left-aligned .c-cta-widget__text {
font-size: 0.95rem;
line-height: 1.5;
}
.c-cta-widget--left-aligned .webform-submission-call-to-action-form {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
margin-top: 2rem;
}
@media screen and (min-width: 1024px) {
.c-cta-widget--left-aligned .webform-submission-call-to-action-form {
max-width: 300px;
}
}
.c-cta-widget--left-aligned .webform-submission-call-to-action-form .form-item-first-name,
.c-cta-widget--left-aligned .webform-submission-call-to-action-form .form-item-last-name {
width: 49%;
gap: 1%;
}
.c-cta-widget--left-aligned .webform-submission-call-to-action-form .form-item-first-name input,
.c-cta-widget--left-aligned .webform-submission-call-to-action-form .form-item-last-name input {
background-color: #fff;
border-width: 1px;
color: #0c0c0c;
font-size: 0.85rem;
padding: 0.4rem;
}
.c-cta-widget--left-aligned .webform-submission-call-to-action-form .form-item-email input {
background-color: #fff;
border-width: 1px;
color: #0c0c0c;
font-size: 0.85rem;
padding: 0.4rem;
}
.c-cta-widget--left-aligned .webform-submission-call-to-action-form .form-item-first-name {
margin-right: 2%;
}
.c-cta-widget--left-aligned .webform-submission-call-to-action-form .form-item-email,
.c-cta-widget--left-aligned .webform-submission-call-to-action-form .form-actions {
width: 100%;
margin-left: 0;
margin-right: 0;
font-size: 1rem;
}
.c-cta-widget--left-aligned .webform-submission-call-to-action-form .form-item-email input,
.c-cta-widget--left-aligned .webform-submission-call-to-action-form .form-actions input {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.c-cta-widget--left-aligned .webform-submission-call-to-action-form .form-actions {
margin-top: 0.5rem;
}
.c-cta-widget--left-aligned .webform-submission-call-to-action-form .form-actions input {
padding: 0.6rem;
text-transform: uppercase;
}
/* ==========================================================================
#CTA widgets component
========================================================================== */
.field--type-stacks-type .c-cta-widget .form-actions {
border-top: 0;
margin-bottom: 0;
padding: 0;
text-align: center;
}
.c-cta-touchbase-widget {
margin-bottom: 0;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-touchbase-widget {
background-size: auto;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-touchbase-widget .o-grid {
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-cta-touchbase-widget .o-grid {
padding: 0px 1rem;
}
}
@media screen and (min-width: 640px) {
.c-cta-touchbase-widget .o-grid {
max-width: 100%;
width: 100%;
}
}
.c-cta-touchbase-widget .o-grid .sm-12 {
max-width: 64rem;
margin: 0 auto;
display: block;
float: none;
}
.c-cta-touchbase-widget__wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin: 0 -1rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-touchbase-widget__wrap {
display: block;
margin: 0;
}
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.c-cta-touchbase-widget__wrap {
display: block;
margin: 0;
}
}
.c-cta-touchbase-widget__headline {
color: #fff;
text-align: left;
font-size: 1.8rem;
font-weight: 500;
line-height: 1.1;
margin-bottom: 0.5rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-touchbase-widget__headline {
text-align: center;
font-size: 1.2rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-cta-touchbase-widget__headline {
font-size: 1.5rem;
line-height: 1.2;
}
}
.c-cta-touchbase-widget__text {
color: #fff;
text-align: left;
font-weight: 300;
font-size: 1.3125rem;
line-height: 1.875rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-touchbase-widget__text {
text-align: center;
}
}
.c-cta-touchbase-widget .c-widget__thankyou {
min-width: 100%;
}
.c-cta-touchbase-widget .c-widget__thankyou .c-cta-touchbase-widget__headline {
text-align: center;
font-weight: 500;
font-size: 1.8rem;
}
.c-cta-touchbase-widget .c-widget__thankyou .c-cta-touchbase-widget__text {
text-align: center;
line-height: 1.2;
font-size: 1rem;
max-width: 900px;
margin: 0 auto;
font-weight: 400;
padding-bottom: 1rem;
}
.c-cta-touchbase-widget__captcha {
text-align: left;
}
.c-cta-touchbase-widget__captcha .g-recaptcha {
width: 100%;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-touchbase-widget__captcha {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: auto;
}
}
.c-cta-touchbase-widget__input {
text-align: left;
width: 55%;
padding: 0px 2rem 0px 0px;
}
.c-cta-touchbase-widget__input form {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.c-cta-touchbase-widget__input form .j-ajax--hide {
width: 50%;
}
.c-cta-touchbase-widget__input form .c-cta-touchbase-widget__input {
width: 50%;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-touchbase-widget__input {
width: 100%;
padding: 0px;
margin-bottom: 2rem;
}
.c-cta-touchbase-widget__input form {
display: block;
}
.c-cta-touchbase-widget__input form .j-ajax--hide {
width: 100%;
padding-bottom: 30px;
}
.c-cta-touchbase-widget__input form .c-cta-touchbase-widget__input {
width: 100%;
}
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.c-cta-touchbase-widget__input {
width: 100%;
padding: 0px;
margin-bottom: 2rem;
}
}
.c-cta-touchbase-widget__input input[type=email],
.c-cta-touchbase-widget__input input[type=text] {
display: block;
margin-left: auto;
margin-right: auto;
background: transparent;
border: 2px solid #373737;
border: 2px solid rgba(55, 55, 55, 0.5);
width: 100%;
max-width: 441px;
font-size: 1.25rem;
font-weight: 300;
margin: 0 0.8rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-touchbase-widget__input input[type=email],
.c-cta-touchbase-widget__input input[type=text] {
margin: auto auto 1rem;
}
}
.c-cta-touchbase-widget__input .form-item {
margin: 0;
}
.c-cta-touchbase-widget__input .form-actions {
text-align: left;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-touchbase-widget__input .form-actions {
text-align: center;
}
}
.c-cta-touchbase-widget__input .c-btn, .c-cta-touchbase-widget__input .c-cta-widget--embed .js-cm-submit-button, .c-cta-widget--embed .c-cta-touchbase-widget__input .js-cm-submit-button,
.c-cta-touchbase-widget__input .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .c-cta-touchbase-widget__input button[type=submit] {
margin: 0 0.8rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-touchbase-widget__input .c-btn, .c-cta-touchbase-widget__input .c-cta-widget--embed .js-cm-submit-button, .c-cta-widget--embed .c-cta-touchbase-widget__input .js-cm-submit-button,
.c-cta-touchbase-widget__input .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .c-cta-touchbase-widget__input button[type=submit] {
margin: auto auto 1rem;
}
}
.c-cta-touchbase-widget__input .c-cta-widget__input--donate {
margin-top: 1rem;
}
.c-cta-touchbase-widget__donate {
text-align: center;
width: 45%;
padding: 0px;
padding-left: 2rem;
border-left: 2px solid #fff;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-touchbase-widget__donate {
width: 100%;
border: none;
padding-left: 0;
}
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.c-cta-touchbase-widget__donate {
width: 100%;
border: none;
}
}
.c-cta-touchbase-widget__donate h2 {
color: #fff;
font-weight: 500;
font-size: 1.8rem;
}
.c-cta-touchbase-widget__donate p {
color: #fff;
font-size: 1rem;
padding: 0 1rem 1rem;
}
.c-cta-touchbase-widget__photo-credit {
color: #fff;
font-style: normal;
font-size: 13px;
}
.c-cta-touchbase-widget.style1 .o-grid [type=email], .c-cta-touchbase-widget.style1 .o-grid [type=text] {
color: #0f324e;
}
.c-cta-touchbase-widget.style1 .o-grid [type=email]::-webkit-input-placeholder, .c-cta-touchbase-widget.style1 .o-grid [type=text]::-webkit-input-placeholder {
color: #0f324e;
}
.c-cta-touchbase-widget.style1 .o-grid [type=email]:-moz-placeholder, .c-cta-touchbase-widget.style1 .o-grid [type=text]:-moz-placeholder {
color: #0f324e;
opacity: 1;
}
.c-cta-touchbase-widget.style1 .o-grid [type=email]::-moz-placeholder, .c-cta-touchbase-widget.style1 .o-grid [type=text]::-moz-placeholder {
color: #0f324e;
opacity: 1;
}
.c-cta-touchbase-widget.style1 .o-grid [type=email]:-ms-input-placeholder, .c-cta-touchbase-widget.style1 .o-grid [type=text]:-ms-input-placeholder {
color: #0f324e;
}
.c-cta-touchbase-widget.style2 .c-cta-touchbase-widget__headline,
.c-cta-touchbase-widget.style2 .c-cta-touchbase-widget__text p {
color: #0f324e;
}
.c-cta-touchbase-widget.style2 .c-cta-touchbase-widget__donate h2, .c-cta-touchbase-widget.style2 .c-cta-touchbase-widget__donate p {
color: #0f324e;
}
.c-cta-touchbase-widget.style2 .o-grid [type=email], .c-cta-touchbase-widget.style2 .o-grid [type=text] {
color: #0f324e;
}
.c-cta-touchbase-widget.style2 .o-grid [type=email]::-webkit-input-placeholder, .c-cta-touchbase-widget.style2 .o-grid [type=text]::-webkit-input-placeholder {
color: #0f324e;
}
.c-cta-touchbase-widget.style2 .o-grid [type=email]:-moz-placeholder, .c-cta-touchbase-widget.style2 .o-grid [type=text]:-moz-placeholder {
color: #0f324e;
opacity: 1;
}
.c-cta-touchbase-widget.style2 .o-grid [type=email]::-moz-placeholder, .c-cta-touchbase-widget.style2 .o-grid [type=text]::-moz-placeholder {
color: #0f324e;
opacity: 1;
}
.c-cta-touchbase-widget.style2 .o-grid [type=email]:-ms-input-placeholder, .c-cta-touchbase-widget.style2 .o-grid [type=text]:-ms-input-placeholder {
color: #0f324e;
}
.c-cta-touchbase-widget.style3 {
background: #0f324e;
}
.c-cta-touchbase-widget.style3 .c-cta-touchbase-widget__headline {
color: #30a3f3;
}
.c-cta-touchbase-widget.style3 .o-grid [type=email], .c-cta-touchbase-widget.style3 .o-grid [type=text] {
background: rgb(255, 255, 255);
color: #0f324e;
}
.c-cta-touchbase-widget.style3 .o-grid [type=email]::-webkit-input-placeholder, .c-cta-touchbase-widget.style3 .o-grid [type=text]::-webkit-input-placeholder {
color: #0f324e;
}
.c-cta-touchbase-widget.style3 .o-grid [type=email]:-moz-placeholder, .c-cta-touchbase-widget.style3 .o-grid [type=text]:-moz-placeholder {
color: #0f324e;
opacity: 1;
}
.c-cta-touchbase-widget.style3 .o-grid [type=email]::-moz-placeholder, .c-cta-touchbase-widget.style3 .o-grid [type=text]::-moz-placeholder {
color: #0f324e;
opacity: 1;
}
.c-cta-touchbase-widget.style3 .o-grid [type=email]:-ms-input-placeholder, .c-cta-touchbase-widget.style3 .o-grid [type=text]:-ms-input-placeholder {
color: #0f324e;
}
.c-cta-touchbase-widget.style3 .c-cta-touchbase-widget__donate h2 {
color: #7bcf1f;
}
.c-cta-touchbase-widget.style4 {
background: #e8e8de;
}
.c-cta-touchbase-widget.style4 .c-cta-touchbase-widget__headline,
.c-cta-touchbase-widget.style4 .c-cta-touchbase-widget__text p {
color: #0f324e;
}
.c-cta-touchbase-widget.style4 .o-grid [type=email], .c-cta-touchbase-widget.style4 .o-grid [type=text] {
background: transparent;
border: 1px solid #0f324e;
color: #0f324e;
}
.c-cta-touchbase-widget.style4 .o-grid [type=email]::-webkit-input-placeholder, .c-cta-touchbase-widget.style4 .o-grid [type=text]::-webkit-input-placeholder {
color: #0f324e;
}
.c-cta-touchbase-widget.style4 .o-grid [type=email]:-moz-placeholder, .c-cta-touchbase-widget.style4 .o-grid [type=text]:-moz-placeholder {
color: #0f324e;
opacity: 1;
}
.c-cta-touchbase-widget.style4 .o-grid [type=email]::-moz-placeholder, .c-cta-touchbase-widget.style4 .o-grid [type=text]::-moz-placeholder {
color: #0f324e;
opacity: 1;
}
.c-cta-touchbase-widget.style4 .o-grid [type=email]:-ms-input-placeholder, .c-cta-touchbase-widget.style4 .o-grid [type=text]:-ms-input-placeholder {
color: #0f324e;
}
.c-cta-touchbase-widget.style4 .c-cta-touchbase-widget__donate h2, .c-cta-touchbase-widget.style4 .c-cta-touchbase-widget__donate p {
color: #0f324e;
}
.c-cta-touchbase-widget.style4 .c-cta-touchbase-widget__donate {
border-color: #0f324e;
}
.c-cta-touchbase-widget.c-cta-touchbase-widget--popup {
display: none;
background-color: #30a3f3;
background-size: auto 100%;
background-position: center center;
padding: 30vh 2vw 0;
position: fixed;
z-index: 100000;
top: 0;
width: 100%;
height: 100vh;
}
@media screen and (min-width: 640px) {
.c-cta-touchbase-widget.c-cta-touchbase-widget--popup {
right: 0;
height: auto;
padding: 0;
top: 20%;
width: 400px;
}
}
.c-cta-touchbase-widget.c-cta-touchbase-widget--popup .o-grid {
padding: 1rem;
}
.c-cta-touchbase-widget.c-cta-touchbase-widget--popup h2 {
font-size: 1.25rem;
text-align: center;
}
.c-cta-touchbase-widget.c-cta-touchbase-widget--popup .c-cta-touchbase-widget__text {
font-size: 1rem;
text-align: center;
}
.c-cta-touchbase-widget.c-cta-touchbase-widget--popup .c-cta-touchbase-widget__wrap {
padding: 0;
margin: 0;
}
.c-cta-touchbase-widget.c-cta-touchbase-widget--popup form .j-ajax--hide {
width: 100%;
}
.c-cta-touchbase-widget.c-cta-touchbase-widget--popup .c-cta-touchbase-widget__input {
width: auto;
padding: 0;
}
.c-cta-touchbase-widget.c-cta-touchbase-widget--popup .c-cta-touchbase-widget__input form {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
}
.c-cta-touchbase-widget.c-cta-touchbase-widget--popup .c-cta-touchbase-widget__input input[type=email],
.c-cta-touchbase-widget.c-cta-touchbase-widget--popup .c-cta-touchbase-widget__input input[type=text] {
margin: 0 0 0.5rem;
background-color: rgba(255, 255, 255, 0.5);
}
.c-cta-touchbase-widget.c-cta-touchbase-widget--popup .c-cta-touchbase-widget__input .webform-button--submit {
display: block;
margin: 0 auto;
}
.c-cta-touchbase-widget.c-cta-touchbase-widget--popup .j-close {
cursor: pointer;
font-size: 2rem;
font-weight: 100;
line-height: 0.5;
color: #000;
position: absolute;
top: 10px;
right: 10px;
}
.c-cta-touchbase-widget.c-cta-touchbase-widget--popup .j-close:link, .c-cta-touchbase-widget.c-cta-touchbase-widget--popup .j-close:visited {
color: #999;
}
.t-bg-blue:not(.c-cta-widget--left-aligned) {
background-color: #0f324e;
}
.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=email],
.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=text] {
border: 2px solid #fff;
color: #fff;
}
.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=email]::-webkit-input-placeholder,
.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=text]::-webkit-input-placeholder {
color: #fff;
}
.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=email]:-moz-placeholder,
.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=text]:-moz-placeholder {
color: #fff;
opacity: 1;
}
.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=email]::-moz-placeholder,
.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=text]::-moz-placeholder {
color: #fff;
opacity: 1;
}
.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=email]:-ms-input-placeholder,
.t-bg-blue:not(.c-cta-widget--left-aligned) .c-cta-widget__input input[type=text]:-ms-input-placeholder {
color: #fff;
}
.t-bg-sand {
background-color: #e8e8de;
}
.t-bg-sand .c-cta-widget__headline {
color: #373737;
}
.t-bg-sand .c-cta-widget__text {
color: #373737;
}
.t-bg-white {
background-color: #fff;
}
.t-bg-white .c-cta-widget__headline {
color: #373737;
}
.t-bg-white .c-cta-widget__text {
color: #373737;
}
.t-bg-white .c-cta-widget__photo-credit {
color: #373737;
}
.c-cta-touchbase-widget--elephant {
background-color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-webkit-align-items: start;
-ms-flex-align: start;
align-items: start;
height: auto;
padding: 1.3rem 0;
background-image: url("../../img/widgets/sign_up_bg2.webp");
background-size: auto 900px;
background-position: center top;
background-repeat: no-repeat;
border-top: 8px solid #fff;
border-bottom: 3px solid #fff;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-touchbase-widget--elephant {
border-top: 3px solid #fff;
}
}
@media screen and (min-width: 1500px) {
.c-cta-touchbase-widget--elephant {
background-size: cover;
}
}
.c-cta-touchbase-widget--elephant p {
max-width: 900px;
margin: 0 auto;
line-height: 1.2;
font-size: 1rem;
padding-bottom: 1rem;
}
@media screen and (min-width: 640px) {
.c-cta-touchbase-widget--elephant .o-grid {
padding-top: 3rem;
max-width: 100%;
width: 100%;
}
}
.c-cta-touchbase-widget--elephant .o-grid .c-cta-widget__text {
color: #0c0c0c;
}
.c-cta-touchbase-widget--elephant .o-grid [type=email], .c-cta-touchbase-widget--elephant .o-grid [type=text] {
background: rgba(255, 255, 255, 0.5);
color: #0c0c0c;
font-size: 1rem;
font-weight: 400;
padding: 1rem 1.5rem;
margin-bottom: 1rem;
border: none;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-touchbase-widget--elephant .o-grid [type=email], .c-cta-touchbase-widget--elephant .o-grid [type=text] {
font-size: 1rem;
padding: 1.2rem 1.7rem;
border: none;
}
}
.c-cta-touchbase-widget--elephant .o-grid + .o-grid {
display: none;
}
.c-cta-touchbase-widget--elephant .c-featured-text__credit .c-cta-widget__photo-credit {
color: #fff;
}
/*doc
---
title: CTA widgets Light
name: cta-widgets-light
category: Components - CTA widgets
---
This is the Light CTA widgets component.
```html_example
```
*/
/*doc
---
title: CTA widgets WHite w email
name: cta-widgets-white-email
category: Components - CTA widgets
---
This is the White CTA widget with email component.
```html_example
```
*/
/* ==========================================================================
Default Text component
========================================================================== */
.c-default-text li {
/*margin-bottom: 2.4rem;
changed 7/14/17 ml
*/
margin-bottom: 1.2rem;
}
.c-default-text__headline {
text-align: center;
font-family: "OldStyleMT-Regular", serif;
font-weight: 300;
}
.c-default-text__subheadline {
text-align: center;
font-family: "OldStyleMT-Regular", serif;
padding-bottom: 1.3rem;
border-bottom: 1px solid;
}
.c-default-text h2.c-default-text__subheadline {
font-size: 1.5rem;
}
.c-default-text h3.c-default-text__subheadline {
font-size: 1.25rem;
}
.c-default-text h4.c-default-text__subheadline {
font-size: 1rem;
}
.c-default-text__aside {
font-family: "OldStyleMT-Regular", serif;
font-weight: 300;
margin: 1rem 2rem;
}
@media screen and (min-width: 1024px) {
.c-default-text__aside {
float: left;
margin: 1rem 1rem 1rem -60px;
max-width: 300px;
}
}
.c-default-text .c-btn, .c-default-text .c-cta-widget--embed .js-cm-submit-button, .c-cta-widget--embed .c-default-text .js-cm-submit-button,
.c-default-text .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .c-default-text button[type=submit] {
display: table;
margin-left: auto;
margin-right: auto;
}
.c-default-text .c-widget__image {
float: none;
text-align: center;
margin: 1rem auto;
position: relative;
}
.c-default-text .c-widget__image img {
width: 100%;
}
.c-default-text .c-widget__image .c-widget__caption {
text-align: left;
}
.c-default-text .c-widget__image .c-widget__photo-credit {
position: absolute;
left: 0.9rem;
top: 0.6rem;
}
@media screen and (min-width: 1024px) {
.c-default-text .c-widget__image--left {
float: left;
margin: 1rem 1rem 1rem -120px;
max-width: 500px;
}
}
@media screen and (min-width: 1024px) {
.c-default-text .c-widget__image--right {
float: right;
margin: 1rem -120px 1rem 1rem;
max-width: 500px;
}
}
.c-default-text.t-br-white .o-grid--narrow, .c-default-text.t-br-white #block-newsroomandpeoplectablock .c-widget > .o-grid, #block-newsroomandpeoplectablock .c-default-text.t-br-white .c-widget > .o-grid, .c-default-text.t-br-white .c-cta-widget--embed form, .c-cta-widget--embed .c-default-text.t-br-white form {
max-width: 64rem;
}
@media screen and (min-width: 1024px) {
.c-default-text.t-br-white .o-grid--narrow, .c-default-text.t-br-white #block-newsroomandpeoplectablock .c-widget > .o-grid, #block-newsroomandpeoplectablock .c-default-text.t-br-white .c-widget > .o-grid, .c-default-text.t-br-white .c-cta-widget--embed form, .c-cta-widget--embed .c-default-text.t-br-white form {
padding: 0 5rem;
}
}
.c-default-text.t-br-white .md-shift-2 {
margin-left: 0 !important;
}
.c-default-text.t-br-white .md-9 {
width: 100%;
}
.c-default-text.t-br-white .c-default-text__subheadline {
font-family: "Roboto", sans-serif;
padding-bottom: 0;
border-bottom: 0;
font-weight: 300;
font-size: 2rem;
line-height: 100%;
text-align: center;
margin-bottom: 1.75rem;
}
.c-default-text.t-br-white .c-default-text__content {
background-color: #fff;
-webkit-box-shadow: 0px 0px 15.1px 5px rgba(0, 0, 0, 0.04);
box-shadow: 0px 0px 15.1px 5px rgba(0, 0, 0, 0.04);
border-radius: 18px;
padding: 2rem 3rem;
}
@media screen and (min-width: 640px) {
.c-default-text .md-9.md-shift-1-5 {
margin-left: 12.5%;
}
}
.c-default-text.t-br-grey > .o-grid--narrow, #block-newsroomandpeoplectablock .c-default-text.t-br-grey.c-widget > .o-grid, .c-cta-widget--embed .c-default-text.t-br-grey > form {
background-color: #f5f5f5;
border-radius: 1rem;
padding: 2rem;
text-align: center;
}
.c-default-text.t-br-grey > .o-grid--narrow .c-default-text__headline, #block-newsroomandpeoplectablock .c-default-text.t-br-grey.c-widget > .o-grid .c-default-text__headline, .c-cta-widget--embed .c-default-text.t-br-grey > form .c-default-text__headline {
font-family: "Roboto", sans-serif;
font-weight: 300;
}
.c-default-text.t-br-grey > .o-grid--narrow .c-default-text__subheadline, #block-newsroomandpeoplectablock .c-default-text.t-br-grey.c-widget > .o-grid .c-default-text__subheadline, .c-cta-widget--embed .c-default-text.t-br-grey > form .c-default-text__subheadline {
font-family: "Roboto", sans-serif;
font-weight: 300;
padding-bottom: 0;
border-bottom: 0;
}
/* ==========================================================================
#List widgets component
========================================================================== */
/*doc
---
title: List widgets
name: list-widgets
category: Components - List widgets
---
This is the List widgets component which has multiple variations.
*/
.c-widget__list .c-widget__headline {
font-size: 2.5rem;
}
.c-widget__list .c-widget__intro-text p {
padding: 0 40px;
}
.c-widget__list .c-widget__list-item {
font-size: 0.8rem;
margin-bottom: 3rem;
}
@media screen and (min-width: 0) {
.c-widget__list .c-widget__list-item {
overflow: auto;
}
}
.c-widget__list .c-widget__list-item-title {
vertical-align: top;
line-height: 1;
}
.c-widget__list .c-widget__list-item-title a {
color: inherit;
text-decoration: underline;
}
.c-widget__list .c-widget__list-item-text {
font-weight: 300;
line-height: 1.5;
}
.c-widget__list-item-featured {
background-repeat: none;
background-size: 100% 100%;
text-align: center;
position: relative;
}
.c-widget__list-item-featured__wrap {
padding: 0 1.3rem;
width: 100%;
display: block;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.c-widget__list-item-featured-title {
color: #fff;
font-weight: 700;
line-height: 1;
}
.t-bg-sand .c-widget__list-item-image img {
border: 1px solid #373737;
background: #fff;
}
.t-rounded .c-widget__list-item-image img {
border-radius: 100%;
}
/* ==========================================================================
Media components
========================================================================== */
.c-photo .c-widget__photo-credit {
display: block;
height: 0;
padding: 0 0 0 1rem;
position: relative;
top: -2rem;
font-size: 13px;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-photo__inline--overflow {
margin: 0 -1rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-photo__inline--overflow {
margin: 0 -4rem;
}
}
.c-photo--fullwidth {
min-height: 400px;
position: relative;
margin-bottom: 0;
}
@media screen and (min-height: 1024px) {
.c-photo--fullwidth {
min-height: 50vh;
}
}
@media screen and (min-height: 1024px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-photo--fullwidth {
min-height: 384px;
}
}
@media screen and (min-height: 1024px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-photo--fullwidth {
min-height: 512px;
}
}
@media screen and (min-height: 1024px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-photo--fullwidth {
min-height: 160px;
}
}
@media screen and (min-height: 1024px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-photo--fullwidth {
min-height: 284px;
}
}
@media screen and (min-height: 1024px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-photo--fullwidth {
min-height: 160px;
}
}
@media screen and (min-height: 1024px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-photo--fullwidth {
min-height: 240px;
}
}
.c-photo--fullwidth .c-widget__photo-credit {
position: absolute;
bottom: 40px;
left: 1rem;
top: auto;
}
.c-widget__photo-credit {
color: #fff;
font-size: 13px;
font-style: normal;
}
.c-widget__caption {
font-size: 0.6rem;
font-style: normal;
}
.c-media__photo-gallery--no-caption {
max-width: 660px;
margin: 0 auto;
}
.c-media__photo-gallery--controls {
font-size: 0.8rem;
padding-top: 0.2rem;
text-align: center;
}
.c-media__photo-gallery--controls a {
float: right;
}
.c-media__photo-gallery-text {
position: relative;
font-size: 0.8rem;
font-weight: 300;
line-height: 1.3rem;
}
@media screen and (min-width: 640px) {
.c-media__photo-gallery-text > div {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.c-media__photo-gallery-text::before {
content: "";
float: left;
padding-top: 150%;
}
}
.c-media__photo-gallery-image .c-widget__photo-credit,
.c-media__photo-gallery-image--no-caption .c-widget__photo-credit {
display: block;
height: 0;
padding: 0 0 0 1rem;
position: relative;
top: -1.6rem;
font-size: 13px;
}
.c-media__photo-gallery-image--no-caption,
.c-media__photo-gallery-image--no-caption--no-caption {
max-width: 660px;
margin: 0 auto;
}
.c-media__photo-gallery-image--wrap img {
width: 100%;
}
.c-widget__gallery--grid {
background-color: #fff !important;
color: #373737 !important;
}
.c-widget__gallery--grid .c-widget__headline,
.c-widget__gallery--grid .c-widget__intro-text,
.c-widget__gallery--grid h1,
.c-widget__gallery--grid h2,
.c-widget__gallery--grid h3,
.c-widget__gallery--grid h4,
.c-widget__gallery--grid h5,
.c-widget__gallery--grid h6 {
color: #373737 !important;
}
.c-media__photo-gallery-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
@media screen and (min-width: 640px) {
.c-media__photo-gallery-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
}
.c-media__photo-gallery-grid-item {
position: relative;
}
@media screen and (min-width: 640px) {
.c-media__photo-gallery-grid-item--large {
grid-column: 1/-1;
}
}
@media screen and (min-width: 640px) {
.c-media__photo-gallery-grid-item--small {
grid-column: span 1;
}
}
.c-media__photo-gallery-grid-caption {
font-size: 0.7rem;
font-weight: 300;
line-height: 1.3;
margin-top: 0.5rem;
color: #000000;
}
.c-media__photo-gallery-grid-image {
position: relative;
}
.c-media__photo-gallery-grid-image img {
width: 100%;
display: block;
}
.c-media__photo-gallery-grid-image .c-widget__photo-credit {
display: block;
height: 0;
padding: 0 0 0 1rem;
position: relative;
top: -1.6rem;
font-size: 13px;
}
.c-media__photo-gallery-grid-image .j-gallery-lightbox {
cursor: pointer;
position: relative;
display: block;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.c-media__photo-gallery-grid-image .j-gallery-lightbox:hover {
opacity: 0.85;
}
.c-media__photo-gallery-grid-image .j-gallery-lightbox:focus {
outline: 2px solid #30a3f3;
outline-offset: 2px;
}
.mfp-gallery-grid .mfp-bg {
background-color: rgba(0, 0, 0, 0.9);
opacity: 0;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.mfp-gallery-grid.mfp-ready .mfp-bg {
opacity: 1;
}
.mfp-gallery-grid .mfp-close {
color: #fff;
opacity: 0.8;
font-size: 2rem;
line-height: 1;
}
.mfp-gallery-grid .mfp-close:hover, .mfp-gallery-grid .mfp-close:focus {
opacity: 1;
color: #fff;
}
.mfp-gallery-grid .mfp-arrow {
opacity: 0.8;
}
.mfp-gallery-grid .mfp-arrow:hover, .mfp-gallery-grid .mfp-arrow:focus {
opacity: 1;
}
.mfp-gallery-grid .mfp-arrow:before, .mfp-gallery-grid .mfp-arrow:after {
border-top-color: #fff;
border-bottom-color: #fff;
}
.mfp-gallery-grid .mfp-title {
color: #fff;
font-size: 0.9rem;
padding-top: 1rem;
line-height: 1.4;
text-align: center;
}
.mfp-gallery-grid .mfp-counter {
color: #fff;
font-size: 0.8rem;
}
.mfp-gallery-grid .mfp-figure:after {
background: transparent;
}
.mfp-gallery-grid .mfp-img {
background: transparent;
}
.mfp-gallery-open {
overflow: hidden;
}
.c-media__image--open-window {
height: 1rem;
width: 1rem;
display: inline-block;
}
.c-media__image--fullscreen {
display: none;
height: 0.9rem;
width: 1.5rem;
-webkit-transition: all 500ms;
transition: all 500ms;
}
@media screen and (min-width: 1024px) {
.c-media__image--fullscreen {
display: block;
}
}
.c-media__image--fullscreen:hover {
margin-left: 0;
opacity: 0.75;
}
.c-media__image--fullscreen .st0 {
fill: none;
stroke: #373737;
stroke-width: 8;
stroke-miterlimit: 10;
}
.c-media__image--fullscreen .st1 {
fill: #373737;
}
.t-bg-blue .c-media__image--fullscreen .st0 {
stroke: #fff;
}
.t-bg-blue .c-media__image--fullscreen .st1 {
fill: #fff;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-media__video .c-widget__headline {
font-size: 2.1rem;
}
}
.c-media__video--youtube, .c-media__video--vimeo {
height: 0;
margin-bottom: 0.88889rem;
overflow: hidden;
padding-bottom: 67.5%;
padding-top: 1.38889rem;
position: relative;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-media__video--youtube, .c-media__video--vimeo {
margin-left: -2rem;
margin-right: -2rem;
}
}
.c-media__video--youtube iframe, .c-media__video--vimeo iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.c-media__video--vimeo {
padding-top: 0;
padding-bottom: 56.34%;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-media__video--vimeo {
margin-left: -2rem;
margin-right: -2rem;
padding-bottom: 67.5%;
}
}
/* ==========================================================================
Sliders component
========================================================================== */
.c-slider .slick-prev,
.c-slider .slick-next {
height: 80px;
width: 30px;
}
.c-slider .slick-prev::before,
.c-slider .slick-next::before {
color: #373737;
font-family: "FontAwesome";
font-size: 80px;
}
.c-slider .slick-prev {
left: -80px;
}
.c-slider .slick-next {
right: -80px;
}
.t-bg-blue .c-slider .slick-prev::before,
.t-bg-blue .c-slider .slick-next::before,
.c-slider--full .slick-prev::before,
.c-slider--full .slick-next::before {
color: #fff;
}
.c-slider--full {
height: 100%;
}
.c-slider--full .slick-prev {
left: 20px;
z-index: 9;
}
.c-slider--full .slick-next {
right: 20px;
}
.c-slider--full .slick-list,
.c-slider--full .slick-track {
min-height: 100%;
}
/* ==========================================================================
The Widget Grid component
========================================================================== */
.c-grid {
font-size: 0.6rem;
font-weight: 300;
}
.c-grid__image--default {
padding: 0 16.2878787879%;
}
.c-grid__body {
font-weight: 400;
display: none;
}
@media screen and (min-width: 640px) {
.c-grid__body {
display: block;
}
}
.c-grid__body p {
font-size: 0.7rem;
font-weight: 300;
margin-bottom: 2rem;
}
.c-grid__meta {
color: rgba(55, 55, 55, 0.75);
font-weight: 400;
margin: 0.25em 0 0.4rem;
font-size: 0.7rem;
}
.c-grid__meta span {
text-transform: uppercase;
}
.c-grid__meta .c-media__image--open-window {
float: right;
fill: rgba(55, 55, 55, 0.75);
height: 0.7rem;
width: 0.7rem;
}
.c-grid__source {
font-size: 0.7rem;
font-weight: 400;
color: rgba(55, 55, 55, 0.75);
margin-bottom: 0.4rem;
}
.c-grid__title {
line-height: 1;
font-size: 0.9rem;
font-weight: 400;
margin-bottom: 0.4rem;
}
.c-grid__title a {
color: #373737;
}
.c-grid__title a:hover {
color: #5b5b5b;
}
.c-grid__main-title--less-mb {
margin-bottom: 1rem;
}
.c-grid__main-description {
font-size: 0.9rem;
font-weight: 300;
line-height: 1.66;
}
.c-grid--no-photos .c-grid__image {
display: none;
}
.c-grid .c-hover-wrap:hover .c-grid__title a {
color: #5b5b5b;
}
.c-grid .c-hover-wrap:hover .c-hover-wrap--image img {
-webkit-filter: opacity(0.8);
filter: opacity(0.8);
}
.c-grid-featured__wrap {
padding: 2.6rem 0 1.3rem;
border: 0;
overflow: auto;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-grid-featured__wrap {
padding: 0;
}
}
@media screen and (min-width: 640px) {
.c-grid-featured__wrap {
margin: 1.3rem 0 3rem;
padding: 0 0 1.3rem;
}
}
.c-grid-featured__wrap > div:hover + .md-6 .c-grid__title a {
color: #5b5b5b;
}
.c-grid-featured__wrap .j-hover-effect img {
-webkit-filter: opacity(0.8);
filter: opacity(0.8);
}
@media screen and (min-width: 640px) {
.c-grid-featured .c-grid__title {
font-size: 2rem;
font-weight: 500;
margin-bottom: 0;
line-height: 1.1;
}
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.c-grid-featured .c-grid__title {
font-size: 1.6rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-grid-featured .c-grid__title {
font-size: 1.5rem;
}
}
.c-grid-featured .c-grid__body {
font-size: 1rem;
}
.c-grid-featured .c-grid__body p {
font-size: 1rem;
margin-bottom: 0;
line-height: 1.4;
}
@media screen and (min-width: 640px) {
.c-grid-featured .c-grid__meta {
font-size: 0.8rem;
}
}
.c-grid-featured .c-grid__meta .c-media__image--open-window {
height: 0.8rem;
width: 0.8rem;
}
@media screen and (min-width: 640px) {
.c-grid-featured .c-grid__source {
font-size: 0.8rem;
}
}
.c-grid__image--video {
position: relative;
}
.c-grid__image--video span {
display: block;
}
.c-grid__image--video a::before {
content: "\f144";
font-family: "FontAwesome";
font-size: 4rem;
line-height: 1;
color: rgba(255, 255, 255, 0.8);
position: absolute;
top: calc(50% - 2rem);
left: calc(50% - 2rem);
z-index: 10;
}
/* add the newsroom here */
@media screen and (min-width: 1400px) {
.c-newsroom {
margin: 0 -3rem;
}
}
.c-newsroom__title {
font-family: "Roboto", sans-serif;
text-align: center;
}
@media screen and (min-width: 640px) {
.c-newsroom__title {
font-size: 3.2rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-newsroom__title {
font-size: 2.2rem;
}
}
.c-newsroom__menu {
list-style: none;
padding: 0;
}
@media screen and (min-width: 640px) {
.c-newsroom__menu {
display: table;
margin: 3.4rem auto 0;
}
}
.c-newsroom__menu li {
visibility: hidden;
display: block;
font-size: 0.8rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-newsroom__menu li {
padding: 0 1rem;
width: 250px;
}
.c-newsroom__menu li:hover, .c-newsroom__menu li:focus {
background: rgba(55, 55, 55, 0.25);
}
.c-newsroom__menu li:hover a, .c-newsroom__menu li:focus a {
color: #fff;
}
}
@media screen and (min-width: 640px) {
.c-newsroom__menu li {
display: inline-block;
visibility: visible;
margin: 0 0.4rem;
}
}
@media screen and (min-width: 1024px) {
.c-newsroom__menu li {
margin: 0 0.4rem;
}
}
@media screen and (min-width: 1150px) {
.c-newsroom__menu li {
margin: 0 1.6rem;
}
}
.c-newsroom__menu li:first-child {
margin-left: 0;
visibility: visible;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-newsroom__menu li:first-child::after {
background-image: url("../../processed/svg/arrow_black.svg");
background-repeat: no-repeat;
background-size: auto 100%;
content: "";
display: inline-block;
-webkit-filter: brightness(100%);
filter: brightness(100%);
font-size: 0.8em;
right: -3rem;
cursor: pointer;
position: relative;
top: -0.2rem;
transition: filter 0.25s ease-in-out 0s, -webkit-filter 0.25s ease-in-out 0s;
vertical-align: middle;
height: 1.2em;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 1em;
}
.c-newsroom__menu li:first-child a:hover::after {
background-image: url("../../processed/svg/arrow_white.svg");
}
}
.c-newsroom__menu li:last-child {
margin-right: 0;
}
.c-newsroom__menu a {
color: #373737;
font-size: 1rem;
font-weight: 300;
display: inline-block;
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-newsroom__menu a {
font-size: 0.8rem;
}
}
@media screen and (min-width: 640px) {
.c-newsroom__menu a:hover, .c-newsroom__menu a.is-active {
/*text-decoration: underline;*/
border-bottom: 1px solid;
line-height: 1;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-newsroom__menu {
position: absolute;
background-color: #fff;
z-index: 9;
visibility: hidden;
padding: 0 0 1rem;
}
}
.c-newsroom__menu.j-hover-effect {
visibility: visible;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-newsroom__menu.j-hover-effect li {
visibility: visible;
}
}
.c-newsroom {
/* can't use standard BEM format bc drupal views cant handle underscores as input */
}
.c-newsroom--items {
list-style: none;
margin: 0;
padding: 0;
}
@media screen and (min-width: 640px) {
.c-newsroom--items li:nth-child(3n) {
margin-right: 3.74426%;
}
.c-newsroom--items li:nth-child(3n+1) {
margin-right: 0;
clear: none;
}
.c-newsroom--items li:nth-child(3n+2) {
clear: left;
}
}
.c-newsroom--item:first-of-type {
width: 100%;
margin-right: 0;
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-newsroom .view-header {
margin: 0 -2rem;
}
}
.c-newsroom .view-footer {
clear: both;
}
.path-newsroom .o-wrap__content {
background: #fff;
}
.t-bg-blue .c-grid__title a,
.t-bg-blue .c-grid__title a:hover,
.t-bg-blue .c-grid__source,
.t-bg-blue .c-grid__meta {
color: #fff;
}
.node--view-mode-grid-without-thumbnail.c-grid.c-grid__newsroom-subpage, .node--view-mode-grid-without-thumbnail.c-grid.c-grid__newsroom-file-upload {
background: #fafafa;
height: 100%;
padding: 22px 40px;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.node--view-mode-grid-without-thumbnail.c-grid.c-grid__newsroom-subpage, .node--view-mode-grid-without-thumbnail.c-grid.c-grid__newsroom-file-upload {
padding: 15px 25px;
}
}
.view-display-id-page_7 ul.c-newsroom--items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.view-display-id-page_7 ul.c-newsroom--items li.c-newsroom--item {
margin-bottom: 32px;
}
@media screen and (min-width: 1255px) {
.view-display-id-page_7 ul.c-newsroom--items li.c-newsroom--item {
margin-bottom: 25px;
}
}
.view-display-id-page_7 ul.c-newsroom--items li {
margin-right: 32px;
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.view-display-id-page_7 ul.c-newsroom--items li:first-child {
width: 100%;
}
}
@media screen and (min-width: 1255px) {
.view-display-id-page_7 ul.c-newsroom--items li {
margin-right: 25px;
}
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.view-display-id-page_7 ul.c-newsroom--items li {
width: 45.837159%;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.view-display-id-page_7 ul.c-newsroom--items li {
width: 100%;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.view-display-id-page_7 ul.c-newsroom--items li {
margin-right: 0;
width: 100%;
}
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.c-newsroom--items li {
width: 47.837159%;
}
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.c-newsroom--items li:nth-child(2n+1) {
margin-right: 0;
clear: none;
}
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.c-newsroom--items li:nth-child(2n+2) {
clear: left;
margin-right: 20px;
}
}
.node--view-mode-grid-featured-statement {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.node--view-mode-grid-featured-statement .c-grid-featured__wrap {
margin: auto;
padding: 70px 20px;
max-width: 820px;
}
.vertical-align--medium-up {
-webkit-box-align: start;
-webkit-align-items: start;
-ms-flex-align: start;
align-items: start;
}
.c-grid__body p {
margin-bottom: 0;
}
.c-pager {
margin: 30px auto 0;
}
.c-newsroom--item .c-grid.c-grid__newsroom-subpage .c-grid__title {
line-height: 1.3;
font-weight: 500;
}
.c-newsroom--item .c-grid__title {
font-weight: 500;
}
.c-grid-featured__wrap {
margin: 4rem 0 3rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-grid-featured__wrap {
margin-bottom: 0;
}
}
.c-grid-featured .c-grid__source {
margin-top: 10px;
}
.c-grid__image.c-hover-wrap--image {
margin-bottom: 20px;
}
.c-newsroom--item {
margin-bottom: 40px;
}
/*Article Details Page*/
.headline-separate .vertical-align .o-grid {
margin-top: 200px;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.headline-separate .vertical-align .o-grid {
margin-top: 150px;
}
}
.headline-separate .vertical-align .o-grid .c-page-head__headline {
color: #373737;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.headline-separate .vertical-align .o-grid .c-page-head__headline {
font-size: 35px;
line-height: 1.3;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.headline-separate .vertical-align .o-grid .c-page-head__headline {
font-size: 28px;
}
}
.headline-separate .t-alpha-mask--dark {
background-color: #fff;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.headline-separate .t-alpha-mask--dark {
top: -65px;
}
}
.headline-separate.c-page-head--light .has-dropdown .c-primary-nav__link {
color: #373737;
}
.headline-separate.c-page-head--light .c-page-head__right .c-language {
color: #373737;
}
.headline-separate.c-page-head--light .c-page-head__right .c-language.active {
color: #373737;
}
.separate-body-widget.o-grid--narrow, #block-newsroomandpeoplectablock .c-widget > .separate-body-widget.o-grid, .c-cta-widget--embed form.separate-body-widget {
max-width: 60rem;
}
.separate-body-widget.o-grid--narrow .lg-9, #block-newsroomandpeoplectablock .c-widget > .separate-body-widget.o-grid .lg-9, .c-cta-widget--embed form.separate-body-widget .lg-9 {
margin-left: 120px;
}
@media screen and (min-width: 1024px) and (max-width: 1320px) {
.separate-body-widget.o-grid--narrow .lg-9, #block-newsroomandpeoplectablock .c-widget > .separate-body-widget.o-grid .lg-9, .c-cta-widget--embed form.separate-body-widget .lg-9 {
margin-left: 70px;
}
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.separate-body-widget.o-grid--narrow .lg-9, #block-newsroomandpeoplectablock .c-widget > .separate-body-widget.o-grid .lg-9, .c-cta-widget--embed form.separate-body-widget .lg-9 {
margin-left: 0px;
}
}
.separate-body-widget.o-grid--narrow p, #block-newsroomandpeoplectablock .c-widget > .separate-body-widget.o-grid p, .c-cta-widget--embed form.separate-body-widget p {
opacity: 0.8;
line-height: 1.4;
}
.separate-body-widget.o-grid--narrow .c-widget__caption, #block-newsroomandpeoplectablock .c-widget > .separate-body-widget.o-grid .c-widget__caption, .c-cta-widget--embed form.separate-body-widget .c-widget__caption {
margin-top: 10px;
line-height: 1.5;
font-weight: 500;
}
.separate-body-widget.o-grid--narrow .read-time, #block-newsroomandpeoplectablock .c-widget > .separate-body-widget.o-grid .read-time, .c-cta-widget--embed form.separate-body-widget .read-time {
margin-bottom: 15px;
}
.headline-separate.c-page-head--light .c-primary-nav__item.has-dropdown .c-primary-nav__link::after {
background-image: url("../../processed/svg/arrow_black.svg");
}
.headline-separate.c-page-head--light .c-icon--search {
background-image: url(../../processed/svg/magnifying_glass_k.svg);
}
.related-reading {
padding: 60px 0px;
background-color: #e8e8de;
}
.related-reading .related-read-sub {
max-width: 67rem;
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
}
.related-reading h2 {
font-size: 24px;
text-align: center;
margin-bottom: 40px;
font-weight: 500;
}
.related-reading .related-reading-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.related-reading .related-reading-list {
display: block;
}
}
.related-reading .related-reading-list .reading-item {
width: 32%;
margin-right: 24px;
background: #fff;
padding: 20px 30px;
-webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
margin-bottom: 24px;
}
.related-reading .related-reading-list .reading-item:last-child {
margin-right: 0;
}
@media screen and (min-width: 1024px) and (max-width: 1320px) {
.related-reading .related-reading-list .reading-item {
max-width: 30%;
margin: 15px;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.related-reading .related-reading-list .reading-item {
max-width: 30%;
margin: 15px;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.related-reading .related-reading-list .reading-item {
max-width: 44%;
margin: 20px;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.related-reading .related-reading-list .reading-item {
max-width: 100%;
margin: 15px;
}
}
.related-reading .related-reading-list .reading-item .c-grid__meta {
color: rgba(55, 55, 55, 0.85);
}
.related-reading .related-reading-list .reading-item .c-grid__meta p {
margin-bottom: 10px;
}
.related-reading .related-reading-list .reading-item .c-grid {
height: 100%;
padding-bottom: 47px;
position: relative;
outline: none;
}
.related-reading .related-reading-list .reading-item .c-grid__title {
font-size: 24px;
margin-bottom: 20px;
line-height: 1.3;
font-family: "OldStyleMT-Regular", serif;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.related-reading .related-reading-list .reading-item .c-grid__title {
font-size: 18px;
}
}
.related-reading .related-reading-list .reading-item .c-grid__body p {
font-size: 16px;
margin-bottom: 20px;
}
.related-reading .related-reading-list .reading-item .c-grid__body p span {
font-style: normal;
}
.read-more-btn {
text-align: left;
padding-top: 20px;
}
.read-more-btn a {
background-color: #30a3f3;
padding: 14px 27px;
display: inline-block;
color: #fff;
font-size: 15px;
font-weight: 500;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
.read-more-btn a:hover {
background-color: #0d8be3;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.read-more-btn a {
font-size: 14px;
padding: 6px 15px;
}
}
.block-social-sharing-buttons-block {
position: -webkit-sticky;
position: sticky;
display: inline-block;
background-color: rgba(232, 232, 222, 0.19);
padding: 10px 17px;
border-radius: 10px;
border: 1px solid #373737;
margin-left: 50px;
top: 130px;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.block-social-sharing-buttons-block {
background-color: transparent;
border: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-webkit-justify-content: end;
-ms-flex-pack: end;
justify-content: end;
margin-left: 0;
}
}
.block-social-sharing-buttons-block h2 {
font-size: 14px;
margin-bottom: 0;
text-align: center;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.block-social-sharing-buttons-block h2 {
margin-right: 15px;
}
}
.block-social-sharing-buttons-block .social-sharing-buttons {
display: block;
margin: 10px 0px;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.block-social-sharing-buttons-block .social-sharing-buttons {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
.block-social-sharing-buttons-block .social-sharing-buttons a {
border: 1px solid #8e8b8b;
width: 40px;
height: 40px;
border-radius: 50px;
margin-bottom: 10px;
background-color: #fff;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.block-social-sharing-buttons-block .social-sharing-buttons a {
margin-bottom: 0;
}
}
body.page-node-type-newsroom-subpage, body.page-node-type-newsroom-short-story {
overflow-x: visible;
}
.headline-separate.c-page-head--light .c-page-head__right a.c-language:link {
color: #373737;
}
/*Newsroom Video*/
.video-newsroom h1.o-grid--narrow, .video-newsroom #block-newsroomandpeoplectablock .c-widget > h1.o-grid, #block-newsroomandpeoplectablock .video-newsroom .c-widget > h1.o-grid {
font-size: 45px;
padding-top: 50px;
margin-bottom: 50px;
max-width: 80%;
line-height: 1.3;
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.video-newsroom h1.o-grid--narrow, .video-newsroom #block-newsroomandpeoplectablock .c-widget > h1.o-grid, #block-newsroomandpeoplectablock .video-newsroom .c-widget > h1.o-grid {
font-size: 38px;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.video-newsroom h1.o-grid--narrow, .video-newsroom #block-newsroomandpeoplectablock .c-widget > h1.o-grid, #block-newsroomandpeoplectablock .video-newsroom .c-widget > h1.o-grid {
font-size: 34px;
max-width: 100%;
padding-top: 60px;
margin-bottom: 80px;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.video-newsroom h1.o-grid--narrow, .video-newsroom #block-newsroomandpeoplectablock .c-widget > h1.o-grid, #block-newsroomandpeoplectablock .video-newsroom .c-widget > h1.o-grid {
font-size: 26px;
max-width: 100%;
margin-bottom: 90px;
padding-top: 55px;
}
}
.video-newsroom .c-grid__image--video {
max-width: 92%;
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.video-newsroom .c-grid__image--video {
max-width: 100%;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.video-newsroom .c-grid__image--video {
max-width: 100%;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.video-newsroom .c-grid__image--video {
max-width: 100%;
}
}
.video-newsroom .video-wrapper {
position: relative;
}
.video-newsroom .video-wrapper .block-social-sharing-buttons-block {
position: absolute;
right: 0;
top: 0;
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.video-newsroom .video-wrapper .block-social-sharing-buttons-block {
background-color: transparent;
border: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-webkit-justify-content: end;
-ms-flex-pack: end;
justify-content: end;
margin-left: 0;
}
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.video-newsroom .video-wrapper .block-social-sharing-buttons-block {
top: -80px;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.video-newsroom .video-wrapper .block-social-sharing-buttons-block {
top: -80px;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.video-newsroom .video-wrapper .block-social-sharing-buttons-block {
top: -68px;
}
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.video-newsroom .video-wrapper .block-social-sharing-buttons-block h2 {
margin-right: 15px;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.video-newsroom .video-wrapper .block-social-sharing-buttons-block h2 {
font-size: 14px;
}
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.video-newsroom .video-wrapper .block-social-sharing-buttons-block .social-sharing-buttons {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (min-width: 640px) and (max-width: 1320px) {
.video-newsroom .video-wrapper .block-social-sharing-buttons-block .social-sharing-buttons a {
margin-bottom: 0;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.video-newsroom .video-wrapper .block-social-sharing-buttons-block .social-sharing-buttons a {
width: 32px;
height: 32px;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.video-newsroom .video-wrapper .block-social-sharing-buttons-block .social-sharing-buttons a svg {
width: 17px;
height: 17px;
}
}
.video-newsroom .c-widget .o-grid--narrow.c-widget__main, .video-newsroom #block-newsroomandpeoplectablock .c-widget > .c-widget__main.o-grid, #block-newsroomandpeoplectablock .video-newsroom .c-widget > .c-widget__main.o-grid, .video-newsroom .c-widget .c-cta-widget--embed form.c-widget__main, .c-cta-widget--embed .video-newsroom .c-widget form.c-widget__main {
max-width: 100%;
}
.video-newsroom .c-widget .o-grid--narrow.c-widget__main .lg-9, .video-newsroom #block-newsroomandpeoplectablock .c-widget > .c-widget__main.o-grid .lg-9, #block-newsroomandpeoplectablock .video-newsroom .c-widget > .c-widget__main.o-grid .lg-9, .video-newsroom .c-widget .c-cta-widget--embed form.c-widget__main .lg-9, .c-cta-widget--embed .video-newsroom .c-widget form.c-widget__main .lg-9 {
margin: 0px 115px;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.video-newsroom .c-widget .o-grid--narrow.c-widget__main .lg-9, .video-newsroom #block-newsroomandpeoplectablock .c-widget > .c-widget__main.o-grid .lg-9, #block-newsroomandpeoplectablock .video-newsroom .c-widget > .c-widget__main.o-grid .lg-9, .video-newsroom .c-widget .c-cta-widget--embed form.c-widget__main .lg-9, .c-cta-widget--embed .video-newsroom .c-widget form.c-widget__main .lg-9 {
margin: 0;
}
}
.video-newsroom .c-widget .o-grid--narrow.c-widget__main .block-social-sharing-buttons-block, .video-newsroom #block-newsroomandpeoplectablock .c-widget > .c-widget__main.o-grid .block-social-sharing-buttons-block, #block-newsroomandpeoplectablock .video-newsroom .c-widget > .c-widget__main.o-grid .block-social-sharing-buttons-block, .video-newsroom .c-widget .c-cta-widget--embed form.c-widget__main .block-social-sharing-buttons-block, .c-cta-widget--embed .video-newsroom .c-widget form.c-widget__main .block-social-sharing-buttons-block {
display: none;
}
.video-newsroom .node__content.o-grid--narrow, .video-newsroom #block-newsroomandpeoplectablock .c-widget > .node__content.o-grid, #block-newsroomandpeoplectablock .video-newsroom .c-widget > .node__content.o-grid, .video-newsroom .c-cta-widget--embed form.node__content, .c-cta-widget--embed .video-newsroom form.node__content {
margin: 0px 130px;
padding: 80px 0px 60px;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.video-newsroom .node__content.o-grid--narrow, .video-newsroom #block-newsroomandpeoplectablock .c-widget > .node__content.o-grid, #block-newsroomandpeoplectablock .video-newsroom .c-widget > .node__content.o-grid, .video-newsroom .c-cta-widget--embed form.node__content, .c-cta-widget--embed .video-newsroom form.node__content {
margin: 0;
}
}
.flex-col {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.justify-between {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
/** Gray Box **/
@media screen and (min-width: 0) and (max-width: 639px) {
.c-grid-slider {
margin-bottom: 60px !important;
}
}
.c-grid-slider .slick-track {
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.c-grid-slider .c-grid__item {
height: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding-inline: 0.5rem;
}
.c-grid-slider .c-grid__item .c-grid {
padding: 1rem;
height: 100%;
}
.c-grid-slider .c-grid__meta span {
text-transform: none;
}
.c-grid-slider .slick-dots {
bottom: -45px;
}
.c-grid-slider .slick-dots li button::before {
content: "";
background-color: #D9D9D9;
opacity: 1;
border-radius: 50%;
}
.c-grid-slider .slick-dots li.slick-active button::before {
border: 1px solid #918F8F;
}
.t-bg-sand-box .c-grid-slider .c-grid__item .c-grid {
background: #F5F5F5;
}
.c-contact__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-contact__grid {
grid-template-columns: 1fr;
}
}
.c-contact__grid > div {
border: 1px solid;
padding: 1rem;
}
.c-contact__grid > div dl {
margin-bottom: 1rem;
}
.c-contact__grid > div dl p {
margin-bottom: 0;
}
.c-contact__grid > div dl dd {
margin-bottom: 0.5rem;
}
.c-our-work {
/* top, transparent black, faked with gradient */
overflow: hidden;
border-top: 4px solid #fff;
border-bottom: 4px solid #fff;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-our-work {
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
}
}
@media screen and (min-width: 640px) {
.c-our-work {
min-height: 100vh;
min-height: 0;
}
}
@media screen and (min-width: 640px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-our-work {
min-height: 768px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-our-work {
min-height: 1024px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-our-work {
min-height: 320px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-our-work {
min-height: 568px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-our-work {
min-height: 320px;
}
}
@media screen and (min-width: 640px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-our-work {
min-height: 480px;
}
}
@media screen and (min-width: 0) and (max-width: 480px) {
.c-our-work {
min-height: 100vh;
min-height: 0;
}
}
@media screen and (min-width: 0) and (max-width: 480px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-our-work {
min-height: 768px;
}
}
@media screen and (min-width: 0) and (max-width: 480px) and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-our-work {
min-height: 1024px;
}
}
@media screen and (min-width: 0) and (max-width: 480px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
.c-our-work {
min-height: 320px;
}
}
@media screen and (min-width: 0) and (max-width: 480px) and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
.c-our-work {
min-height: 568px;
}
}
@media screen and (min-width: 0) and (max-width: 480px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
.c-our-work {
min-height: 320px;
}
}
@media screen and (min-width: 0) and (max-width: 480px) and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
.c-our-work {
min-height: 480px;
}
}
.c-our-work__headline {
text-align: center;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-our-work .c-featured-text__credit-top-right {
top: auto;
bottom: 0;
}
}
.c-our-work__text {
text-align: center;
max-width: 880px;
font-weight: 300;
margin: 0 auto;
}
@media screen and (min-width: 640px) {
.c-our-work__text {
margin-bottom: 60px;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-our-work__text {
margin-bottom: 100px;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-our-work__text {
margin-bottom: 100px;
}
}
.c-our-work__text p {
font-size: 1.2rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-our-work__text p {
font-size: 1rem;
}
}
.c-our-work__list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
gap: 1rem;
margin: 0 auto;
list-style: none;
padding: 0;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
@media screen and (min-width: 768px) {
.c-our-work__list {
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
}
.c-our-work__list a {
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
color: #373737;
}
.c-our-work__list a:hover {
color: #30a3f3;
}
.c-our-work__list .read-more-btn a {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
color: white;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-our-work__list li {
width: 100%;
margin-bottom: 30px;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.c-our-work__list li {
width: 80%;
margin-bottom: 50px;
}
}
@media screen and (min-width: 1200px) {
.c-our-work__list li {
max-width: 432px;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 60px;
width: 100%;
}
}
@media screen and (min-width: 1280px) {
.c-our-work__list li {
margin-bottom: 30px;
}
}
.c-our-work__list li strong {
text-align: center;
font-size: 18px;
display: block;
max-width: 280px;
margin: auto;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-our-work__list li strong {
max-width: 280px;
font-size: 1.125rem;
padding: 0 15px 20px;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.c-our-work__list li strong {
font-size: 1.125rem;
max-width: 370px;
padding: 0 15px 20px;
}
}
@media screen and (min-width: 1200px) {
.c-our-work__list li strong {
max-width: 350px;
padding: 0 15px 20px;
}
}
.c-our-work__list li p {
width: 100%;
font-size: 16px;
line-height: 21px;
font-weight: 300;
margin: 0 auto;
}
@media screen and (min-width: 640px) and (max-width: 1315px) {
.c-our-work__list li p {
min-height: 70px;
}
}
@media screen and (min-width: 1500px) {
.c-our-work__list li p {
min-height: 195px;
}
}
.c-our-work__list li img {
display: block;
margin: 0 auto;
background-color: #b9b9b9;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-our-work__list li img {
width: 100%;
height: 250px;
margin-bottom: 25px;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.c-our-work__list li img {
width: 100%;
height: 250px;
margin-bottom: 20px;
}
}
@media screen and (min-width: 1200px) {
.c-our-work__list li img {
margin-bottom: 20px;
}
}
@media screen and (min-width: 1280px) {
.c-our-work__list li img {
min-height: 267px;
}
}
@media screen and (min-width: 1500px) {
.c-our-work__list li img {
min-height: 267px;
}
}
.c-our-work__list {
/* padding-left: 0;
margin: $base-spacing 0 $base-spacing * 2;
@include media($medium) {
float: left;
width: 100%;
margin: 0;
background: rgba(0, 0, 0, .15);
text-shadow: .5px .5px 0 $mineshaft;
}
@include media($large) {
position: relative;
bottom: 0;
padding: 1.5rem 0;
}
li {
display: flex;
align-items: center;
list-style: none;
text-align: center;
color: $white;
padding: 0 1rem 0 2rem;
height: 4rem;
@include media($small-only) {
padding: 0 .5rem;
}
@include media($medium) {
width: 33.333%;
height: auto;
padding: 0 .5rem;
float: left;
font-size: .9rem;
display: block;
}
@include media($ipad-landscape) { max-height: 250px;}
@include media($ipad-portrait) { max-height: 250px;}
@include media($large) {
width: 20%;
}
// scss-lint:disable NestingDepth
&:nth-child(1) {
@include media($medium) {
border-right: 1px solid;
}
}
&:nth-child(2) {
@include media($medium) {
border-right: 1px solid;
}
}
&:nth-child(3) {
@include media($large) {
border-right: 1px solid;
}
}
&:nth-child(4) {
@include media($medium) {
margin-left: calc(33.333%/2);
border-right: 1px solid;
clear: left;
}
@include media($large) {
margin-left: 0;
clear: none;
}
}
&:nth-child(5) {
border-right: 0;
}
}
// scss-lint:enable NestingDepth
a {
color: $white;
@include media($small-only) {
display: block;
width: 100%;
font-size: 1rem;
}
}
strong {
display: block;
font-weight: $bold;
text-align: left;
@include media($small-only) {
display: flex;
align-items: center;
height: 65px;
}
@include media($medium) {
text-align: center;
}
}
p {
font-size: .85rem;
text-align: center;
display: none;
@include media($medium) {
display: block;
}
}
svg {
text-align: center;
max-width: 65px;
margin-right: .5rem;
@include media($small-only) {
float: left;
}
@include media($medium) {
max-width: 38.5%;
margin-right: 0;
}
// scss-lint:disable NestingDepth
.st0 {
fill: $white;
// scss-lint:enable NestingDepth
}
.st1 {
fill: $white;
opacity: 0;
transition: all .25s ease-in-out;
}
&:hover {
.st1 {
opacity: .5;
}
}
}*/
}
.c-our-work__foot {
text-align: center;
}
.c-our-work__foot p {
font-size: 16px;
margin-bottom: 15px;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-our-work__foot .c-btn, .c-our-work__foot .c-cta-widget--embed .js-cm-submit-button, .c-cta-widget--embed .c-our-work__foot .js-cm-submit-button,
.c-our-work__foot .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .c-our-work__foot button[type=submit] {
margin-bottom: 50px;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.c-our-work__foot .c-btn, .c-our-work__foot .c-cta-widget--embed .js-cm-submit-button, .c-cta-widget--embed .c-our-work__foot .js-cm-submit-button,
.c-our-work__foot .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .c-our-work__foot button[type=submit] {
margin-bottom: 50px;
}
}
@media screen and (min-width: 1200px) {
.c-our-work__foot .c-btn, .c-our-work__foot .c-cta-widget--embed .js-cm-submit-button, .c-cta-widget--embed .c-our-work__foot .js-cm-submit-button,
.c-our-work__foot .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .c-our-work__foot button[type=submit] {
margin-bottom: 60px;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.view-latest-efforts .c-our-work__list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.view-latest-efforts .c-our-work__list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
}
@media screen and (min-width: 1200px) {
.view-latest-efforts .c-our-work__list {
display: inline-block;
}
}
.view-latest-efforts .c-our-work__list li {
padding: 0 25px 40px;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.view-latest-efforts .c-our-work__list li {
width: 100%;
padding: 0;
margin-bottom: 30px;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.view-latest-efforts .c-our-work__list li {
width: 80%;
padding: 0;
margin-bottom: 30px;
}
}
@media screen and (min-width: 1200px) {
.view-latest-efforts .c-our-work__list li {
max-width: 100%;
width: 50%;
float: left;
margin-bottom: 25px;
}
}
.view-latest-efforts .c-our-work__list li:first-child {
padding-left: 0;
}
.view-latest-efforts .c-our-work__list li:first-child p {
font-size: 16px;
}
.view-latest-efforts .c-our-work__list li:first-child strong {
font-size: 22px;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.view-latest-efforts .c-our-work__list li:first-child strong {
font-size: 1.125rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.view-latest-efforts .c-our-work__list li:first-child strong {
font-size: 1.125rem;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.view-latest-efforts .c-our-work__list li:first-child img {
width: 100%;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.view-latest-efforts .c-our-work__list li:first-child img {
width: 100%;
}
}
@media screen and (min-width: 1200px) {
.view-latest-efforts .c-our-work__list li:first-child img {
min-height: 430px;
}
}
.view-latest-efforts .c-our-work__list li:first-child .latest-efforts-img {
width: 100%;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.view-latest-efforts .c-our-work__list li:first-child .latest-info {
padding: 25px 0 5px;
width: 100%;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.view-latest-efforts .c-our-work__list li:first-child .latest-info {
padding: 25px 0 5px;
width: 100%;
}
}
@media screen and (min-width: 1200px) {
.view-latest-efforts .c-our-work__list li:first-child .latest-info {
padding: 25px 0 5px;
width: 100%;
}
}
@media screen and (min-width: 1200px) {
.view-latest-efforts .c-our-work__list li:not(:first-child) {
background-color: #f9f9f9;
padding: 25px;
}
}
@media screen and (min-width: 1200px) {
.view-latest-efforts .c-our-work__list li:not(:first-child) article {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-flow: row-reverse;
-ms-flex-flow: row-reverse;
flex-flow: row-reverse;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.view-latest-efforts .c-our-work__list li:not(:first-child) .latest-info {
padding: 25px 0 5px;
width: 100%;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.view-latest-efforts .c-our-work__list li:not(:first-child) .latest-info {
padding: 25px 0 5px;
width: 100%;
}
}
@media screen and (min-width: 1200px) {
.view-latest-efforts .c-our-work__list li:not(:first-child) .latest-info {
padding-right: 25px;
}
}
.view-latest-efforts .c-our-work__list li p {
margin: 0;
min-height: auto;
max-width: 100%;
font-size: 14px;
}
.view-latest-efforts .c-our-work__list li p em {
font-style: normal;
font-weight: 500;
color: #30a3f3;
}
.view-latest-efforts .c-our-work__list li strong {
margin: 0;
text-align: left;
padding: 0;
max-width: 100%;
min-height: auto;
padding-bottom: 12px;
}
.view-latest-efforts .c-our-work__list li img {
max-width: 100%;
margin: 0;
min-height: 230px;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.view-latest-efforts .c-our-work__list li img:hover {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.view-latest-efforts .c-our-work__list li .latest-efforts-img {
overflow: hidden;
}
@media screen and (min-width: 1200px) {
.view-latest-efforts .c-our-work__list li .latest-efforts-img {
width: 45%;
float: left;
}
}
.view-latest-efforts .c-our-work__list li .latest-efforts-img a {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
@media screen and (min-width: 1200px) {
.view-latest-efforts .c-our-work__list li .latest-info {
float: left;
width: 55%;
}
}
.view-latest-efforts .c-our-work__list .read-more-btn a {
position: static;
-webkit-transform: translate(0%);
transform: translate(0%);
}
/* ==========================================================================
Search component
========================================================================== */
@media screen and (min-width: 1024px) {
.c-search__page .block-system-main-block {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.c-search__page .block-system-main-block h2 {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1;
flex-basis: 100%;
-webkit-flex-basis: 100%;
-spec-flex-basis: 100%;
flex-basis: 100%;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
text-align: center;
text-transform: capitalize;
border-bottom: 1px solid;
font-family: "OldStyleMT-Regular", serif;
padding-bottom: 0.65rem;
font-size: 4rem;
}
@media screen and (min-width: 1024px) {
.c-search__page .block-system-main-block h2 {
flex-basis: 80%;
-webkit-flex-basis: 80%;
-spec-flex-basis: 80%;
flex-basis: 80%;
-ms-flex-preferred-size: 80%;
-webkit-flex-basis: 80%;
}
}
.c-search__page .block-system-main-block .search-page-form {
margin-bottom: 2.6rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-search__page .block-system-main-block .search-page-form {
max-width: 100%;
}
}
.c-search__page .block-system-main-block .search-page-form label {
margin-right: 1.3rem;
}
.c-search__page .block-system-main-block .search-page-form .form-wrapper {
position: relative;
width: 100%;
display: block;
}
.c-search__page .block-system-main-block .search-page-form input[type=submit] {
background-size: 66% 66%;
/*opacty: .5; */
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-search__page .block-system-main-block .search-page-form input[type=submit] {
position: absolute;
top: 1.75rem;
left: calc(100% - 3.5rem);
}
}
.c-search__page .block-system-main-block .search-page-form .search-help-link,
.c-search__page .block-system-main-block .search-page-form .search-advanced {
display: none;
}
.c-search__page .block-system-main-block .item-list {
flex-basis: 100%;
-webkit-flex-basis: 100%;
-spec-flex-basis: 100%;
flex-basis: 100%;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
}
.c-search__sidebar .view-header {
color: #fff;
background: #0f324e;
padding: 0.65rem;
font-size: 0.8rem;
margin-bottom: 1rem;
position: relative;
}
.c-search__sidebar .view-header::after {
display: block;
content: "";
border: 1rem solid transparent;
border-top-color: #0f324e;
position: absolute;
bottom: -2rem;
left: calc(50% - 1rem);
}
.c-search__sidebar ul {
padding: 0;
}
.c-search__sidebar ul li {
padding: 0;
font-size: 0.8rem;
margin: 0 -1.5rem 0.5rem 1.5rem;
}
.c-search__sidebar ul li a {
color: #0f324e;
font-weight: 400;
}
.c-search__sidebar ul li a:hover {
text-decoration: underline;
}
.mfp-container .mfp-close {
color: rgba(255, 255, 255, 0.75);
font-size: 3rem;
font-family: "Roboto", sans-serif;
font-weight: 300;
background: none;
position: fixed;
top: 2rem;
right: 2rem;
}
.mfp-container h2 {
color: rgba(255, 255, 255, 0.75);
}
.c-search-form--footer {
max-width: 660px;
margin: 0 auto;
text-align: center;
color: #fff;
}
.c-search-form--footer:focus {
outline: none;
}
.c-search-form--footer span {
display: block;
margin-bottom: 1rem;
font-size: 0.8rem;
opacity: 0.5;
}
.c-search-form--footer .form-search {
background: none;
color: #fff;
border: 3px solid rgba(255, 255, 255, 0.75);
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.c-search-form--footer .form-search::-webkit-input-placeholder {
color: #fff;
opacity: 1;
}
.c-search-form--footer .form-search:-moz-placeholder {
color: #fff;
opacity: 1;
}
.c-search-form--footer .form-search::-moz-placeholder {
color: #fff;
opacity: 1;
}
.c-search-form--footer .form-search:-ms-input-placeholder {
color: #fff;
opacity: 1;
}
@media screen and (min-width: 1024px) {
.c-search-form--footer .form-search {
padding: 1.5rem 1rem;
text-align: center;
font-size: 1.5rem;
}
}
.c-search-form--footer .form-search:focus::-webkit-input-placeholder {
opacity: 0;
}
.c-search-form--footer .form-search:focus:-moz-placeholder {
opacity: 0;
}
.c-search-form--footer .form-search:focus::-moz-placeholder {
opacity: 0;
}
.c-search-form--footer .form-search:focus:-ms-input-placeholder {
opacity: 0;
}
.c-search-form--footer .form-actions {
display: block;
}
.c-search-form--footer input[type=submit] {
font-size: 1.1rem;
padding: 1.2rem 2.5rem;
}
.c-search-results {
padding: 0;
list-style: none;
}
@media screen and (min-width: 1024px) {
.c-search-results {
padding: 0 2.6rem 0 0;
}
}
.c-search-results li {
padding: 0;
margin: 0 0 1.3rem;
border-bottom: 1px solid rgba(55, 55, 55, 0.25);
list-style: none;
}
.c-search-results .c-search-result__title {
font-size: 1.5rem;
font-weight: normal;
line-height: 1;
margin: 0 0 0.5rem;
}
.c-search-results .c-search-result__title a {
color: #373737;
}
.c-search-results .c-search-result__title a:hover {
color: #0f324e;
}
.c-search-results .c-search-result {
/*
&__snippet-info {}
*/
}
.c-search-results .c-search-result__snippet {
/*opacity: .5; made dark */
font-size: 0.8rem;
}
.c-search-results .c-search-result {
/*
&_info {} */
}
/* ==========================================================================
The Parks component
========================================================================== */
@media screen and (min-width: 640px) {
.c-park-nav__drop-arrow,
.c-park__menu .c-park-nav__item.has-dropdown span {
background-image: url("../../processed/svg/arrow_white.svg");
background-repeat: no-repeat;
background-size: auto 75%;
display: inline-block;
position: relative;
top: -0.25em;
left: -0.5rem;
transition: filter 0.25s ease-in-out 0s, -webkit-filter 0.25s ease-in-out 0s;
vertical-align: middle;
height: 1.2em;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 1em;
margin-left: 0.35rem;
cursor: pointer;
}
}
@media screen and (min-width: 0) {
.c-mobile-toggle--parks span, .c-park__menu .c-park-nav__item:first-of-type span {
background-image: url("../../processed/svg/arrow_white.svg");
background-repeat: no-repeat;
background-size: auto 75%;
display: inline-block;
position: relative;
top: -0.25em;
left: -0.5rem;
transition: filter 0.25s ease-in-out 0s, -webkit-filter 0.25s ease-in-out 0s;
vertical-align: middle;
height: 1.2em;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 1em;
margin-left: 0.35rem;
cursor: pointer;
}
}
.c-park__menu {
background: rgba(0, 0, 0, 0.25);
position: absolute;
bottom: 0;
width: 100%;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu {
height: 2.4rem;
background-color: transparent;
}
}
.c-park__menu .c-park-nav__item.has-dropdown ul .c-park-nav__link::after {
background: none;
}
.c-park__menu .c-park-nav {
margin: 0 auto;
padding: 0;
display: table;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav {
opacity: 1;
visibility: visible;
top: 0;
position: relative;
padding: 0;
height: auto;
margin-left: auto;
margin-right: auto;
width: calc(100% - 2rem);
/* border: 1px solid red;*/
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav.j-hover-effect > .c-park-nav__item:first-of-type span {
background-image: url("../../processed/svg/arrow_black.svg");
left: 90%;
position: absolute;
right: 0;
}
}
.c-park__menu .c-park-nav__item {
margin-right: 0.5rem;
position: relative;
}
@media screen and (min-width: 640px) {
.c-park__menu .c-park-nav__item {
display: block;
float: left;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-park__menu .c-park-nav__item {
margin-right: 0;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav__item {
margin: 0.25rem 0;
display: none;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav__item .c-park-nav__item {
padding-left: 0.5rem;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav__item:first-of-type {
display: block;
text-align: center;
}
.c-park__menu .c-park-nav__item:first-of-type ul {
display: none;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav__item:first-of-type.has-dropdown {
margin-left: 1rem;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav__item:first-of-type span {
background-size: auto 100%;
top: 0.1rem;
width: 0.5em;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav__item .c-park-nav__link {
padding: 0.25rem 0.45rem;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav__item .c-park-nav__link::after {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
@media screen and (min-width: 640px) {
.c-park__menu .c-park-nav__item ul {
display: none;
z-index: 2;
padding: 0;
width: 200px;
margin: 1px auto 0;
position: absolute;
border: 1px solid #dddddd;
}
}
.c-park__menu .c-park-nav__item ul li {
display: block;
margin: 0;
float: none;
color: #373737;
background-color: #fff;
padding: 0;
}
.c-park__menu .c-park-nav__item ul a:hover {
text-decoration: underline;
}
.c-park__menu .c-park-nav__item.has-dropdown > a:hover {
text-decoration: underline;
color: #fff;
}
.c-park__menu .c-park-nav__item.has-dropdown:hover .c-park-nav__drop .c-park-nav__link {
color: #373737;
}
@media screen and (min-width: 640px) {
.c-park__menu .c-park-nav__item.has-dropdown:hover ul {
display: block;
}
}
.c-park__menu .c-park-nav__link {
font-size: 0.7rem;
color: #fff;
text-transform: uppercase;
padding: 0.5rem 1rem 0.5rem 1.5rem;
font-weight: 500;
display: inline-block;
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-park__menu .c-park-nav__link {
padding: 0.5rem 0.5rem 0.5rem 1rem;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav__link {
font-size: 0.7rem;
}
}
.c-park__menu .c-park-nav__link:hover {
background: transparent;
color: #fff;
text-decoration: underline;
}
.c-park__menu .c-park-nav__link.is-active {
text-decoration: underline;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav.j-hover-effect {
background: #fff;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav.j-hover-effect .c-park-nav__drop {
padding-left: 0;
margin: 0;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav.j-hover-effect li.has-dropdown ul,
.c-park__menu .c-park-nav.j-hover-effect li,
.c-park__menu .c-park-nav.j-hover-effect a {
display: block;
color: #373737;
background: #fff;
}
.c-park__menu .c-park-nav.j-hover-effect li.has-dropdown ul:first-of-type,
.c-park__menu .c-park-nav.j-hover-effect li:first-of-type,
.c-park__menu .c-park-nav.j-hover-effect a:first-of-type {
text-align: left;
margin-left: 0;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav.j-hover-effect li {
display: block;
float: none;
background: #fff;
color: #373737;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-park__menu .c-park-nav.j-hover-effect li a {
padding: 0 0.25rem;
}
.c-park__menu .c-park-nav.j-hover-effect li a:hover {
background-color: rgba(55, 55, 55, 0.25);
}
}
.c-park__menu .c-park-nav {
/* end hovereffect for mobile */
}
.c-park__page .c-cta-widget__headline {
font-family: "OldStyleMT-Regular", serif;
font-size: 2rem;
margin: 0;
}
.c-park__page .c-cta-widget__text {
font-family: "OldStyleMT-Regular", serif;
font-size: 1.5rem;
}
.c-park__page .c-default-text .c-default-text__subheadline,
.c-park__page .c-default-text .c-default-text__headline {
font-family: "Roboto", sans-serif;
font-weight: 300;
border: 0;
text-transform: capitalize;
clear: both;
margin-bottom: 1.5rem;
padding: 0;
}
.c-park__page h1.c-default-text__headline {
font-size: 3.5rem;
}
.c-park__page h2.c-default-text__headline {
font-size: 2.5rem;
}
.c-park__page h3.c-default-text__headline {
font-size: 1.5rem;
}
.c-park__page h2.c-default-text__subheadline {
font-size: 2.5rem;
}
.c-park__page h3.c-default-text__subheadline {
font-size: 1.5rem;
}
.c-park__page h4.c-default-text__subheadline {
font-size: 1rem;
}
.c-page-head--park {
z-index: 2;
min-height: 685px;
}
/* park dropdown in header */
/*
This header overrides the normal sticky header for large screens on only the parks pages
The park menu is cloned and placed in the header.
When a certain scroll point is hit the class is-parkmenu is attached
js code is in app.js in the scroll function starting on line 20
*/
.c-page-head .c-park__menu {
display: none;
}
.c-page-head.is-parkmenu .c-page-head__right,
.c-page-head.is-parkmenu .menu--main {
display: none;
}
@media screen and (min-width: 1024px) {
.c-page-head.is-parkmenu .c-park__menu {
display: block;
background: none;
left: 0;
width: 100%;
}
}
.c-page-head.is-parkmenu .c-park__menu .c-park-nav__item .c-park-nav__link {
color: #373737;
}
.c-page-head.is-parkmenu .c-park__menu .c-park-nav__item .c-park-nav__link:hover {
color: #0f324e;
text-decoration: underline;
}
.c-page-head.is-parkmenu .c-park__menu .c-park-nav__item ul {
top: 2.7rem;
}
.c-page-head.is-parkmenu .c-park__menu .c-park-nav__item.has-dropdown > .c-park-nav__link {
padding-bottom: 1.5rem;
}
.c-page-head.is-parkmenu .c-park__menu .c-park-nav__item.has-dropdown span {
background-image: url("../../processed/svg/arrow_black.svg");
}
/* overrides for childless menus(campaigns)
for the parks the first item required childre, when campaigns were added we needed to implement this.
in a campaigh just add a child to the first menu item, then add the t-hide-child class
to the container in the menu item.
*/
.c-park-nav__item:first-of-type.t-hide-child:hover ul,
.j-hover-effect .c-park-nav__item:first-of-type.t-hide-child:hover ul {
display: none;
}
.c-park-nav__item:first-of-type.t-hide-child ul, .c-park-nav__item:first-of-type.t-hide-child ul li, .c-park-nav__item:first-of-type.t-hide-child ul li a,
.j-hover-effect .c-park-nav__item:first-of-type.t-hide-child ul,
.j-hover-effect .c-park-nav__item:first-of-type.t-hide-child ul li,
.j-hover-effect .c-park-nav__item:first-of-type.t-hide-child ul li a {
display: none;
}
@media screen and (min-width: 640px) {
.c-park-nav__item:first-of-type.t-hide-child.has-dropdown span,
.j-hover-effect .c-park-nav__item:first-of-type.t-hide-child.has-dropdown span {
display: none;
}
}
.c-mobile-toggle--parks {
display: none;
text-align: center;
font-size: 0.9rem;
font-weight: 700;
}
.c-mobile-toggle--parks:link {
color: #fff;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-mobile-toggle--parks {
display: block;
padding-top: 0.65rem;
}
}
.c-mobile-toggle--parks span {
left: 0;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-mobile-toggle--parks + .c-park-nav {
display: none;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-mobile-toggle--parks.j-hover-effect + .c-park-nav {
display: block;
}
}
.c-park__menu > a:link.c-mobile-toggle--parks,
.c-park__menu > a:visited.c-mobile-toggle--parks {
color: #fff; /* needed for specificity */
}
/*the js clones new menu, this is needed to hide ide it*/
@media screen and (min-width: 0) and (max-width: 639px) {
.park-menu-sticky-processed .c-park-nav > .c-park-nav__item > .c-mobile-toggle--parks {
display: none;
}
}
.c-park__menu .c-park-nav__item--btn a {
background-color: #30a3f3;
padding: 0.5rem 1rem;
}
.c-park__menu .c-park-nav__item--btn a:hover {
text-decoration: none;
background-color: rgb(13.1506849315, 139.1780821918, 226.8493150685);
cursor: pointer;
}
.c-park__menu .c-park-nav__item--btn a:focus {
background-color: rgb(11.7534246575, 124.3904109589, 202.7465753425);
}
.c-page-head__subheadline {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
gap: 1rem;
}
@media screen and (min-width: 640px) {
.c-page-head__subheadline {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row;
-ms-flex-flow: row;
flex-flow: row;
}
}
.c-page-head__subheadline > div {
font-size: 1.5rem;
font-family: "OldStyleMT-Regular", serif;
font-weight: 500;
}
@media screen and (min-width: 640px) {
.c-page-head__subheadline > div {
border-right: 1px dashed;
padding-right: 1rem;
width: 470px;
text-align: right;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation: portrait) {
.c-page-head__subheadline > div {
font-size: 1rem;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation: portrait) {
.c-page-head__subheadline > div p {
margin-bottom: 0.75rem;
}
}
@media screen and (min-width: 640px) {
.c-page-head__subheadline > a {
margin: 0;
}
}
/* ==========================================================================
People component
========================================================================== */
.c-people__main-list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding-left: 0;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-people__main-list {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
@media screen and (min-width: 1024px) {
.c-people__main-list .c-people__list--twocol {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}
@media screen and (min-width: 1024px) {
.c-people__main-list .c-people__list--twocol li {
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
}
}
.c-people__main-list h6 {
margin-bottom: 0.65rem;
}
.c-people__main-list h6 span,
.c-people__main-list h6 small {
display: block;
line-height: 1;
}
.c-people__main-list > li {
flex-basis: 100%;
-webkit-flex-basis: 100%;
-spec-flex-basis: 100%;
flex-basis: 100%;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
margin: 0 0 2rem;
}
@media screen and (min-width: 1024px) {
.c-people__main-list > li {
flex-basis: 33.333%;
-webkit-flex-basis: 33.333%;
-spec-flex-basis: 33.333%;
flex-basis: 33.333%;
-ms-flex-preferred-size: 33.333%;
-webkit-flex-basis: 33.333%;
margin: 0;
}
}
.c-people__main-list > li a {
color: #373737;
}
.c-people__main-list > li address,
.c-people__main-list > li dl {
font-size: 0.8rem;
font-weight: 300;
line-height: 1rem;
display: block;
color: rgba(55, 55, 55, 0.75);
}
.c-people__main-list > li dl {
width: calc(100% - 1rem);
float: left;
}
.c-people__main-list > li dt {
float: left;
margin-bottom: 1rem;
clear: left;
width: 33%;
}
.c-people__main-list > li dd {
float: left;
font-size: 0.7rem;
margin-bottom: 1rem;
width: 67%;
}
.c-people__main-list > li address {
font-style: normal;
display: block;
clear: left;
}
.c-people__main-list > li ul {
padding: 0;
margin: 0;
}
.c-people__main-list > li li {
list-style: none;
padding: 0;
margin: 0 0 1.3rem;
line-height: 1.6rem;
}
.c-people__main-list > li li a {
font-size: 0.8rem;
font-weight: 300;
line-height: 1rem;
display: block;
/*color: rgba($mineshaft, .75);*/
color: #373737;
}
.c-people__main-list > li li a:hover {
color: #0d8be3;
}
@media screen and (min-width: 1024px) {
.c-people__main-list > li:nth-child(1) {
padding-right: 2rem;
}
}
.c-people__main-list > li:nth-child(2) {
border-top: 1px solid;
border-bottom: 1px solid;
padding: 2rem 0;
}
@media screen and (min-width: 1024px) {
.c-people__main-list > li:nth-child(2) {
border-left: 1px solid rgba(55, 55, 55, 0.75);
border-bottom: 0;
border-top: 0;
padding: 0 2rem 1rem;
}
}
.c-people__main-list > li:nth-child(3) {
border-bottom: 1px solid;
padding: 2rem 0;
}
@media screen and (min-width: 1024px) {
.c-people__main-list > li:nth-child(3) {
border-left: 1px solid rgba(55, 55, 55, 0.75);
border-bottom: 0;
border-top: 0;
padding: 0 2rem 1rem;
}
}
@media screen and (min-width: 1024px) {
.c-people__main-list > li:nth-child(4) {
flex-basis: 40%;
-webkit-flex-basis: 40%;
-spec-flex-basis: 40%;
flex-basis: 40%;
-ms-flex-preferred-size: 40%;
-webkit-flex-basis: 40%;
padding-left: 2rem;
}
}
@media screen and (min-width: 1024px) {
.c-people__main-list > li:nth-child(4) li {
width: 50%;
float: left;
}
}
.c-people__node--top {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border-bottom: 1px solid;
padding-bottom: 1.3rem;
}
@media screen and (min-width: 64rem) {
.c-people__node--top::after {
content: "";
display: table;
clear: both;
}
.c-people__node--top {
max-width: 67rem;
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
}
}
@media screen and (max-width: 850px) {
.c-people__node--top {
display: block;
}
}
@media screen and (min-width: 640px) {
.c-people__node--top .c-people__node--left {
flex-basis: 33.333%;
-webkit-flex-basis: 33.333%;
-spec-flex-basis: 33.333%;
flex-basis: 33.333%;
-ms-flex-preferred-size: 33.333%;
-webkit-flex-basis: 33.333%;
}
}
.c-people__node--top .c-people__node--left img {
border-radius: 100%;
}
@media screen and (min-width: 640px) {
.c-people__node--top .c-people__node--right {
flex-basis: 66.666%;
-webkit-flex-basis: 66.666%;
-spec-flex-basis: 66.666%;
flex-basis: 66.666%;
-ms-flex-preferred-size: 66.666%;
-webkit-flex-basis: 66.666%;
padding-left: 1rem;
text-align: center;
}
}
.c-people__node--bottom.o-grid {
padding-top: 1.3rem;
}
.c-people__node--bottom .c-people__body p {
font-weight: 300;
font-size: 1rem;
line-height: 1.9rem;
}
.c-people__name {
font-size: 1.9rem;
margin: 0;
font-family: "Roboto", sans-serif;
font-weight: 300;
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-people__name {
font-size: 1.5rem;
}
}
.c-people__position {
font-size: 1.2rem;
margin: 0;
font-family: "Roboto", sans-serif;
font-weight: 300;
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-people__position {
font-size: 1rem;
}
}
.c-people__type {
font-size: 1.2rem;
margin: 0;
font-family: "Roboto", sans-serif;
font-weight: 300;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-people__type {
font-size: 0.95rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.c-people__type {
font-size: 0.8rem;
}
}
.c-people__soc {
padding: 0;
margin: 0;
}
.c-people__soc li {
list-style: none;
display: inline-block;
}
.c-people__soc li a {
display: block;
color: #fff;
text-align: center;
margin: 1rem 0.125rem;
}
.c-people__soc--li {
background-color: #007bb6;
}
.c-people__soc--tw {
background-color: #00aced;
}
.c-people__nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.c-people__nav li {
padding: 0;
margin: 0.4rem 0;
width: 48px;
height: 48px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.c-people__nav a {
text-indent: -9999px;
display: block;
padding-top: 100%;
}
.c-people__nav--prev {
background-image: url("../../processed/svg/arrow_circle_left.svg");
}
.c-people__nav--grid {
background-image: url("../../processed/svg/back_circle.svg");
}
.c-people__nav--next {
background-image: url("../../processed/svg/arrow_circle_right.svg");
}
.c-people__list {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 1rem;
list-style: none;
padding: 0;
margin: 0;
}
.c-people__list li {
flex-basis: 50%;
-webkit-flex-basis: 50%;
-spec-flex-basis: 50%;
flex-basis: 50%;
-ms-flex-preferred-size: 50%;
-webkit-flex-basis: 50%;
padding: 0;
border: 4px solid transparent;
}
@media screen and (min-width: 640px) {
.c-people__list li {
flex-basis: 33.3333%;
-webkit-flex-basis: 33.3333%;
-spec-flex-basis: 33.3333%;
flex-basis: 33.3333%;
-ms-flex-preferred-size: 33.3333%;
-webkit-flex-basis: 33.3333%;
}
}
@media screen and (min-width: 1024px) {
.c-people__list li {
flex-basis: 25%;
-webkit-flex-basis: 25%;
-spec-flex-basis: 25%;
flex-basis: 25%;
-ms-flex-preferred-size: 25%;
-webkit-flex-basis: 25%;
}
}
.c-people__viewheader {
text-align: center;
padding-bottom: 1.3rem;
}
.t-serif .c-people__viewheader {
font-family: "OldStyleMT-Regular", serif;
}
.c-people__slide-up {
padding: 0.5rem;
background-color: rgb(255, 255, 255);
position: relative;
width: 100%;
min-height: 5.9375rem;
-webkit-transition: bottom 500ms linear;
transition: bottom 500ms linear;
}
.c-people__card {
display: block;
background-color: #e8e8de;
text-align: center;
overflow: hidden;
}
.c-people__card .field--name-field-teaser-media {
/*have to use drupal's trash names because of some ds issues*/
height: 100%;
position: relative;
z-index: 0;
}
.c-people__card .field--name-field-teaser-media img {
display: block;
}
.view-id-people .c-people__card .field--name-field-teaser-media {
background-color: #fff;
}
.view-id-people .c-people__card .field--name-field-teaser-media img {
border-radius: 100%;
}
.c-people__card .c-people__name {
font-size: 0.875rem;
color: #373737;
font-weight: 300;
}
@media screen and (min-width: 1024px) {
.c-people__card .c-people__name {
font-size: 1rem;
}
}
.c-people__card .c-people__position {
font-size: 0.75rem;
color: #373737;
}
@media screen and (min-width: 1024px) {
.c-people__card .c-people__position {
font-size: 0.9rem;
}
}
.c-people__card::after {
/*
content: '';
display: block;
padding-top: 100%;
*/
}
.c-people__card {
/*&:hover {
.c-people__slide-up {
bottom: 0;
}
}*/
}
.c-people__simplelist {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.c-people__simplelist--item {
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid-column;
margin-bottom: 0.5rem;
padding: 0;
}
.c-people__simplelist--item .c-people__name {
font-size: 0.875rem;
color: #373737;
font-weight: 300;
}
@media screen and (min-width: 1024px) {
.c-people__simplelist--item .c-people__name {
font-size: 1rem;
}
}
.c-people__simplelist--item .c-people__position {
font-size: 0.75rem;
color: #373737;
}
@media screen and (min-width: 1024px) {
.c-people__simplelist--item .c-people__position {
font-size: 0.9rem;
}
}
.c-people__ordering-list {
padding: 0;
margin: 1.3rem 0;
list-style: none;
}
.c-people__ordering-list > li {
clear: left;
}
.c-people__ordering-list li {
margin: 0.5rem 0;
}
.c-people__ordering-list ul li {
width: 50%;
float: left;
list-style: none;
padding: 0 0.5rem;
}
.c-people--ordering-table thead,
.c-people--ordering-table .tabledrag-toggle-weight-wrapper {
display: none;
}
.c-people--ordering-table table {
border-top: 1px solid;
}
.c-people--ordering-table table .handle {
height: 24px;
width: 24px;
}
.c-people--ordering-table table .draggable a.tabledrag-handle {
margin: 5px 0 -5px;
}
.c-people--ordering-table table tr.drag-previous,
.c-people--ordering-table table tr.drag {
background-color: #e8e8de;
}
/* new people widget styles*/
.c-people--rounded .c-people__card {
background: none;
}
.c-people--rounded .c-people__card img {
border-radius: 100%;
}
/* ==========================================================================
#Donation forms component
========================================================================== */
@media screen and (min-width: 0) and (max-width: 480px) {
.c-donation > .o-grid {
padding: 0 0.5rem;
}
}
.c-donation #edit-payment-request-button p.description {
text-align: center;
}
.c-donation fieldset.form-composite {
margin: 0;
}
.c-donation .ui-button-text {
height: 25rem;
line-height: 23px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.c-donation #edit-amount-buttons .ui-button-text,
.c-donation #edit-amount-buttons label {
background: #e8e8e8;
height: 50px;
font-size: 18px;
font-weight: 500;
line-height: 50px;
color: #828282;
border-radius: 5px;
border: 1px solid #b5b5b5;
padding: 0;
text-align: center;
cursor: pointer;
}
.c-donation #edit-amount-buttons .ui-button-text.error,
.c-donation #edit-amount-buttons label.error {
border: 1px solid #d11149;
-webkit-box-shadow: inset 0 0 0 1px #d11149;
box-shadow: inset 0 0 0 1px #d11149;
}
.c-donation #edit-amount-buttons .ui-widget.ui-state-active .ui-button-text,
.c-donation #edit-amount-buttons label.ui-state-active {
background: #30a3f3;
color: #fff;
}
.c-donation #edit-amount-buttons + .webform-buttons-other-input {
position: relative;
margin-top: 1%;
height: 50px;
}
.c-donation #edit-amount-buttons + .webform-buttons-other-input input {
/*position: absolute;
top: -23px;
width: 48%;*/
}
@media screen and (min-width: 640px) {
.c-donation #edit-amount-buttons + .webform-buttons-other-input input {
top: -20px;
}
}
@media screen and (min-width: 1024px) {
.c-donation #edit-amount-buttons + .webform-buttons-other-input input {
top: -50px;
right: 0;
width: 48%;
margin-right: 2%;
}
}
.c-donation [type=checkbox] + label {
font-size: 15px;
margin-left: 5px;
color: #828282;
}
.c-donation__cards {
margin-top: 0.5rem;
}
.c-donation h1.c-donation__intro_mobile {
font-size: 2.75rem;
text-align: center;
margin-bottom: 20px;
line-height: 60px;
}
.c-donation h1.c-donation__intro {
font-size: 3.75rem;
text-align: center;
margin-bottom: 0;
}
.c-donation h1.c-donation__intro_mobile {
display: none;
}
@media screen and (min-width: 640px) {
.c-donation h1.c-donation__intro {
display: block;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation h1.c-donation__intro {
display: none;
}
.c-donation h1.c-donation__intro_mobile {
display: block;
}
}
.c-donation .c-donation__intro p {
font-family: "OldStyleMT-Regular", serif;
margin: 5px -100px 10px;
text-align: center;
font-size: 25px;
margin-bottom: 0.9375rem;
}
@media screen and (min-width: 640px) {
.c-donation .c-donation__intro p {
display: block;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation .c-donation__intro p {
display: none;
}
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation .c-donation__intro h1 {
font-size: 2rem;
}
}
.c-donation .c-donation__intro--flush .c-donation__intro p {
margin-left: 0;
margin-right: 0;
}
.c-donation__button-1 {
margin: 0;
}
.c-donation__otherways {
margin: 0.65rem auto;
}
.c-donation__otherways a {
color: #373737;
}
.c-donation__otherways a:hover {
text-decoration: underline;
}
.c-donation__form {
border-radius: 0.5rem;
background: #fff;
overflow: hidden;
padding: 0 1.3rem;
min-height: 500px;
}
.c-donation__form .ui-buttonset,
.c-donation__form .ui-buttonset .ui-button {
margin: 0;
}
.c-donation__form .ui-state-default,
.c-donation__form .ui-widget-content .ui-state-default,
.c-donation__form .ui-widget-header .ui-state-default {
border: 0;
}
.c-donation__form .c-donation__amount {
margin-top: 1em;
margin-bottom: 1em;
font-size: 0.7rem;
}
.c-donation__form .c-donation__amount .ui-button {
width: 49%;
margin: 1% 1% 0 0;
}
@media screen and (min-width: 640px) {
.c-donation__form .c-donation__amount .ui-button {
width: 32.33333%;
}
}
@media screen and (min-width: 1024px) {
.c-donation__form .c-donation__amount .ui-button {
width: 24%;
}
}
.c-donation__form .c-donation__amount .ui-corner-right {
width: 33%;
}
@media screen and (min-width: 640px) {
.c-donation__form.c-donation__form--high .c-donation__amount .ui-button {
width: 49%;
}
}
@media screen and (min-width: 1024px) {
.c-donation__form.c-donation__form--high .c-donation__amount .ui-button {
width: 49%;
}
}
.c-donation__form .c-donation__step {
display: none;
padding-top: 1.5rem;
position: relative;
}
.c-donation__form .c-donation__step--back {
color: #fff;
background: #30a3f3;
font-size: 0.5rem;
display: block;
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 2.75rem;
padding: 0.25rem;
cursor: pointer;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation__form .c-donation__step--back {
position: relative;
width: calc(100% + 3rem);
margin: -1.5rem -1.5rem 1.5rem;
}
}
.c-donation__form .c-donation__step--back span {
font-size: 0.7rem;
line-height: 1.3rem;
display: block;
font-weight: 500;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation__form .c-donation__step--back span {
display: inline;
margin-right: 0.25rem;
}
}
.c-donation__form .c-donation__step input:not(.c-btn),
.c-donation__form .c-donation__step .chosen-container-single .chosen-single span,
.c-donation__form .c-donation__step .chosen-container .chosen-results li {
padding: 0.6rem 0.4rem;
font-size: 0.8rem;
line-height: 1;
height: 2.5rem;
border: 1px solid rgba(55, 55, 55, 0.5);
}
.c-donation__form .c-donation__step#step_1 {
padding-top: 0;
}
.c-donation__form .c-donation__step#step_1 #edit-email {
/*background: lighten($nobel, 10%);
border: 0; */
background: rgba(232, 232, 222, 0.5);
border: 1px solid;
display: block;
margin: 0 auto;
max-width: 200px;
padding: 0 20px;
font-size: 20px;
}
@media screen and (min-width: 640px) {
.c-donation__form .c-donation__step#step_1 #edit-email {
max-width: 300px;
}
}
.c-donation__form .c-donation__step#step_1 #edit-email.error {
border: 1px solid #d11149;
-webkit-box-shadow: inset 0 0 0 1px #d11149;
box-shadow: inset 0 0 0 1px #d11149;
}
.c-donation__form .c-donation__step#step_2 .js-webform-name,
.c-donation__form .c-donation__step#step_2 .js-webform-type-webform-name {
margin: 1rem 0 0;
}
.c-donation__form .c-donation__step#step_2 .c-donation__navigation {
margin: -50px 0 0;
}
.c-donation__form .c-donation__step #edit-address--wrapper {
margin: 0 0 1.3rem;
}
.c-donation__form .c-donation__step #edit-address--wrapper + .js-form-type-tel {
left: 50%;
margin: 0;
position: relative;
top: -65px;
width: 50%;
}
@media screen and (min-width: 640px) {
.c-donation__form .c-donation__step #edit-address--wrapper + .js-form-type-tel {
top: -81px;
}
}
.c-donation__form .c-donation__step #edit-address--wrapper + .js-form-type-tel #edit-phone {
margin-bottom: 0.25rem;
background: rgba(232, 232, 222, 0.5);
border: 1px solid;
}
.c-donation__form .c-donation__step.current {
display: block;
}
.c-donation__form .c-donation__step h6 {
font-size: 1em;
text-align: center;
margin-bottom: 0;
font-weight: 400;
}
.c-donation__form .c-donation__step .form-item-email {
margin-bottom: 0;
margin-top: 2.75rem;
}
.c-donation__form .c-donation__step .form-item-opt-in {
font-size: 0.6rem;
text-align: center;
margin: 0.3rem 0 1rem;
}
.c-donation__form .c-donation__step .form-item-opt-in input {
margin: 0;
height: auto;
display: inline-block;
}
.c-donation__form .c-donation__step .webform-name,
.c-donation__form .c-donation__step .webform-address,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.c-donation__form .c-donation__step .webform-name .form-item,
.c-donation__form .c-donation__step .webform-address .form-item,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper .form-item,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item {
flex-basis: 48.5%;
-webkit-flex-basis: 48.5%;
-spec-flex-basis: 48.5%;
flex-basis: 48.5%;
-ms-flex-preferred-size: 48.5%;
-webkit-flex-basis: 48.5%;
margin: 0;
}
.c-donation__form .c-donation__step .webform-name .form-item.form-item-address-address, .c-donation__form .c-donation__step .webform-name .form-item.form-item-address-address-2,
.c-donation__form .c-donation__step .webform-address .form-item.form-item-address-address,
.c-donation__form .c-donation__step .webform-address .form-item.form-item-address-address-2,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper .form-item.form-item-address-address,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper .form-item.form-item-address-address-2,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item.form-item-address-address,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item.form-item-address-address-2 {
flex-basis: 100%;
-webkit-flex-basis: 100%;
-spec-flex-basis: 100%;
flex-basis: 100%;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
}
.c-donation__form .c-donation__step .webform-name .form-item.form-item-address-state-province, .c-donation__form .c-donation__step .webform-name .form-item.form-item-address-postal-code,
.c-donation__form .c-donation__step .webform-address .form-item.form-item-address-state-province,
.c-donation__form .c-donation__step .webform-address .form-item.form-item-address-postal-code,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper .form-item.form-item-address-state-province,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper .form-item.form-item-address-postal-code,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item.form-item-address-state-province,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item.form-item-address-postal-code {
flex-basis: 24.25%;
-webkit-flex-basis: 24.25%;
-spec-flex-basis: 24.25%;
flex-basis: 24.25%;
-ms-flex-preferred-size: 24.25%;
-webkit-flex-basis: 24.25%;
}
.c-donation__form .c-donation__step .webform-name label,
.c-donation__form .c-donation__step .webform-address label,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper label,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper label {
display: none;
}
.c-donation__form .c-donation__step .webform-name input,
.c-donation__form .c-donation__step .webform-name select,
.c-donation__form .c-donation__step .webform-address input,
.c-donation__form .c-donation__step .webform-address select,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper input,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper select,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper input,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper select {
flex-basis: 45%;
-webkit-flex-basis: 45%;
-spec-flex-basis: 45%;
flex-basis: 45%;
-ms-flex-preferred-size: 45%;
-webkit-flex-basis: 45%;
width: 100%;
margin-bottom: 0.25rem;
background: rgba(232, 232, 222, 0.5);
border: 1px solid;
}
.c-donation__form .c-donation__step .webform-name input.error,
.c-donation__form .c-donation__step .webform-name select.error,
.c-donation__form .c-donation__step .webform-address input.error,
.c-donation__form .c-donation__step .webform-address select.error,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper input.error,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper select.error,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper input.error,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper select.error {
border: 2px solid #d11149;
}
.c-donation__form .c-donation__step .webform-name select,
.c-donation__form .c-donation__step .webform-address select,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper select,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 5px;
font-size: 0.8rem;
line-height: 1;
padding: 0.6rem 0.4rem;
height: 2.5rem;
}
.c-donation__form .c-donation__step .webform-name .js-form-type-select,
.c-donation__form .c-donation__step .webform-name .c-custom-select,
.c-donation__form .c-donation__step .webform-address .js-form-type-select,
.c-donation__form .c-donation__step .webform-address .c-custom-select,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper .js-form-type-select,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper .c-custom-select,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .js-form-type-select,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .c-custom-select {
position: relative;
}
.c-donation__form .c-donation__step .webform-name .js-form-type-select::after,
.c-donation__form .c-donation__step .webform-name .c-custom-select::after,
.c-donation__form .c-donation__step .webform-address .js-form-type-select::after,
.c-donation__form .c-donation__step .webform-address .c-custom-select::after,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper .js-form-type-select::after,
.c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper .c-custom-select::after,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .js-form-type-select::after,
.c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .c-custom-select::after {
background-image: url("../../processed/svg/arrow_black.svg");
background-repeat: no-repeat;
background-size: auto 100%;
font-size: 0.8em;
right: 0.5rem;
position: absolute;
top: 50%;
vertical-align: middle;
height: 1.2em;
-webkit-transform: rotate(-90deg) translateX(0.8em);
transform: rotate(-90deg) translateX(0.8em);
width: 1em;
content: "";
pointer-events: none;
display: block;
}
.c-donation__form .c-donation__step .StripeElement {
margin-bottom: 0.25rem;
background: rgba(232, 232, 222, 0.5);
border: 0;
font-size: 0.8rem;
line-height: 1;
padding: 0.4rem;
border-radius: 5px;
}
.c-donation__form .c-donation__step textarea {
background: rgba(232, 232, 222, 0.5);
border: 0;
}
.c-donation__form .field--type-stacks-type .form-actions {
border: 0;
}
.c-donation__header {
font-size: 1rem;
border-bottom: 2px solid #30a3f3;
margin: 0 -1.3rem 0.65rem;
overflow: hidden;
}
.c-donation__header::after {
content: "";
display: table;
clear: both;
}
.c-donation__header label {
display: block;
float: left;
width: 50%;
border: 0 !important;
color: #30a3f3;
margin: 0;
text-transform: uppercase;
border-radius: 0;
background: none;
text-align: center;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
cursor: pointer;
}
.c-donation__header label.ui-button {
border-radius: 0;
background: #fff;
border-color: transparent;
}
.c-donation__header label.ui-state-active {
color: #fff !important;
background: #30a3f3 !important;
border-color: #30a3f3 !important;
}
.c-donation__header input {
margin: 0;
}
.c-donation .c-widget__thankyou {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 345px;
}
.c-donation .c-widget__thankyou .c-cta-widget__headline {
font-family: "OldStyleMT-Regular", serif;
margin-bottom: 0;
}
.c-donation .c-widget__thankyou .c-cta-widget__text {
font-family: "OldStyleMT-Regular", serif;
font-size: 1rem;
line-height: 1.3rem;
}
.c-donation .c-widget__thankyou + #step_1 {
display: none;
}
.c-donation__link {
text-align: center;
margin: 0;
}
.c-donation__link a {
font-size: 0.75rem;
border-bottom: 1px solid #30a3f3;
}
.c-donation .h-progressbar,
.c-donation .c-donation__step .h-progressbar {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background-color: #e8e8e8;
border: 1px solid #b5b5b5;
height: 1px;
margin: 2rem auto 3rem;
border-radius: 5px;
overflow: visible;
max-width: 100%;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media screen and (min-width: 1024px) {
.c-donation .h-progressbar,
.c-donation .c-donation__step .h-progressbar {
max-width: 90%;
}
}
.c-donation .h-progressbar .h-progressbar__step,
.c-donation .c-donation__step .h-progressbar .h-progressbar__step {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-flow: column;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 30%;
}
.c-donation .h-progressbar .h-progressbar__step h6,
.c-donation .c-donation__step .h-progressbar .h-progressbar__step h6 {
padding: 0 1rem;
}
.c-donation .h-progressbar .h-progressbar__step:first-child,
.c-donation .c-donation__step .h-progressbar .h-progressbar__step:first-child {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
width: 20%;
}
.c-donation .h-progressbar .h-progressbar__step:first-child h6,
.c-donation .c-donation__step .h-progressbar .h-progressbar__step:first-child h6 {
text-align: left;
padding-left: 0;
}
.c-donation .h-progressbar .h-progressbar__step:last-child,
.c-donation .c-donation__step .h-progressbar .h-progressbar__step:last-child {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
width: 20%;
}
.c-donation .h-progressbar .h-progressbar__step:last-child h6,
.c-donation .c-donation__step .h-progressbar .h-progressbar__step:last-child h6 {
text-align: right;
padding-right: 0;
}
.c-donation .h-progressbar h6,
.c-donation .c-donation__step .h-progressbar h6 {
color: #b5b5b5;
font-size: 0.7rem;
font-weight: 500;
line-height: 1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.c-donation .h-progressbar .c-number-label,
.c-donation .c-donation__step .h-progressbar .c-number-label {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
height: 1.73333em;
background-color: #fff;
color: #30a3f3;
text-align: center;
border: 1px solid #30a3f3;
line-height: 1.5;
margin-right: 0;
}
.c-donation .h-progressbar .c-number-label.active,
.c-donation .c-donation__step .h-progressbar .c-number-label.active {
background-color: #30a3f3;
color: #fff;
}
.c-donation .h-progressbar .c-number-label.active + h6,
.c-donation .c-donation__step .h-progressbar .c-number-label.active + h6 {
color: #30a3f3;
font-weight: 600;
}
.c-donation__monthly {
height: 1rem;
overflow: visible;
font-weight: 500;
font-size: 0.7rem;
position: relative;
opacity: 0.8;
z-index: 2;
}
.c-donation__monthly span {
background-color: #30a3f3;
color: #fff;
border: 1px solid #30a3f3;
border-radius: 2rem;
display: block;
text-align: center;
width: 50%;
-webkit-transform: translateX(100%);
transform: translateX(100%);
position: relative;
padding: 0.25rem 1rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation__monthly span {
width: 60%;
-webkit-transform: translateX(75%);
transform: translateX(75%);
}
}
.c-donation__monthly span::after, .c-donation__monthly span::before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.c-donation__monthly span::after {
border-color: transparent;
border-bottom-color: #30a3f3;
border-width: 10px;
margin-left: -10px;
}
.c-donation__monthly span::before {
border-color: transparent;
border-bottom-color: #30a3f3;
border-width: 12px;
margin-left: -12px;
}
.c-donation__monthly.j-active {
visibility: hidden;
}
.c-number-label {
color: #fff;
background: #0f324e;
font-size: 1em;
text-align: center;
display: inline-block;
border-radius: 1em;
width: 1.73333em;
margin-right: 0.5em;
}
.c-donation--light .c-donation__intro {
color: #fff;
}
.c-donation.t-bg-blue .c-donation__form,
.c-donation.t-bg-blue .c-widget__thankyou .c-cta-widget__text,
.c-donation.c-donation--light .c-widget__thankyou .c-cta-widget__text,
.c-donation.t-bg-blue .c-widget__thankyou .c-cta-widget__headline,
.c-donation.c-donation--light .c-widget__thankyou .c-cta-widget__headline {
color: #373737;
}
.field--type-stacks-type .c-donation .form-actions {
border-top: 0;
}
.js-webform-buttons-other-input {
width: 100% !important;
}
.js-webform-buttons-other-input input {
width: 100% !important;
border-radius: 4px;
}
/* confirmation hacks */
.c-donation__confirmation .c-donation__intro {
display: none;
}
.c-donation__confirmation .c-donation__form {
background: none;
padding: 0;
overflow: visible;
}
.c-donation__confirmation .c-cta-widget__headline {
text-align: center;
margin-bottom: 0;
}
@media screen and (min-width: 1024px) {
.c-donation__confirmation .c-cta-widget__headline {
margin: inherit -100px;
font-size: 3.75rem;
}
}
.c-donation__confirmation .c-widget__thankyou .c-cta-widget__text {
text-align: center;
overflow: visible;
}
@media screen and (min-width: 1024px) {
.c-donation__confirmation .c-widget__thankyou .c-cta-widget__text {
margin: 5px -100px 0.9375rem;
font-size: 1.25rem;
}
}
.c-donation.t-bg-blue .c-donation__confirmation .c-donation__form,
.c-donation.t-bg-blue .c-donation__confirmation .c-widget__thankyou .c-cta-widget__text,
.c-donation.c-donation--light .c-donation__confirmation .c-widget__thankyou .c-cta-widget__text,
.c-donation.t-bg-blue .c-donation__confirmation .c-widget__thankyou .c-cta-widget__headline,
.c-donation.c-donation--light .c-donation__confirmation .c-widget__thankyou .c-cta-widget__headline {
color: #fff;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation.t-show-intro--mobile .c-donation__intro p {
display: block;
margin: 1rem;
}
}
/*doc
---
title: Donations forms Light
name: donantions-widgets-light
category: Components - Donation Forms
---
This is the Light CTA widgets component.
*/
/*doc
---
title: Donations forms Dark
name: donantions-widgets-dark
category: Components - Donation Forms
---
This is the White CTA widget with email component.
*/
.c-donation-2025 {
color: #fff;
padding: 0;
/** Parents **/
}
.c-donation-2025__grid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-webkit-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
@media screen and (min-width: 1024px) {
.c-donation-2025__grid {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
}
.c-donation-2025__form {
-webkit-box-flex: 1;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding: 1.5rem 2rem;
background: var(--BG-Form-Column, linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%), linear-gradient(0deg, #172d45 0%, #172d45 100%), #19314c);
}
@media screen and (min-width: 1024px) {
.c-donation-2025__form {
padding: 3rem 1rem;
}
}
.c-donation-2025__form .c-donation-2025__form {
background: none;
padding: 0;
border-radius: 0;
}
@media screen and (min-width: 1024px) {
.c-donation-2025__form .c-donation-2025__form {
max-width: 550px;
margin-inline: auto;
}
}
.c-donation-2025__form .form-item,
.c-donation-2025__form .form-actions {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.c-donation-2025__form .c-donation__monthly_other {
padding: 1rem 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0;
}
.c-donation-2025__form .c-donation__monthly_other svg {
-webkit-box-flex: 0;
-webkit-flex: 0 0 32px;
-ms-flex: 0 0 32px;
flex: 0 0 32px;
margin-left: 0.5rem;
}
.c-donation-2025__form .c-donation__frequency {
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
max-width: 326px;
text-align: left;
}
@media screen and (min-width: 1024px) {
.c-donation-2025__form .c-donation__frequency {
max-width: 100%;
}
}
.c-donation-2025__form .c-donation__frequency[aria-checked=false] {
display: none;
}
.c-donation-2025__form .c-donation__frequency span.highlighted {
color: #fcc33c;
}
.c-donation-2025__form .c-donation__step {
background-color: #fff;
border-radius: 4px;
padding: 1rem !important;
overflow: hidden;
color: #202325;
}
.c-donation-2025__form #edit-amount-buttons {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.25rem;
}
.c-donation-2025__form #edit-amount-buttons label {
border-radius: 10px;
background: #d9d9d9;
border: none;
height: 60px;
padding: 0;
gap: 10px;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
color: #202325;
font-size: 18px;
font-weight: 700;
line-height: 60px;
margin: 0;
width: 30%;
min-width: 30%;
-webkit-transition: all 0.125s ease-in-out;
transition: all 0.125s ease-in-out;
}
.c-donation-2025__form #edit-amount-buttons label:hover {
background: #cbcbcb;
}
.c-donation-2025__form #edit-amount-buttons label.ui-state-active {
background: #31a3f3;
-webkit-box-shadow: 0px 1px 5px 0px #121212;
box-shadow: 0px 1px 5px 0px #121212;
}
.c-donation-2025__form #edit-amount-buttons label.ui-state-active:hover {
background-color: #2d98e2;
}
@media screen and (min-width: 1024px) {
.c-donation-2025__form .c-donation__form .c-donation__amount .ui-button {
width: 32%;
}
}
.c-donation-2025__form {
/** fields **/
}
.c-donation-2025__form .c-donation__amount {
margin-top: 0;
margin-bottom: 0.5rem;
}
.c-donation-2025__form .c-donation__form .c-donation__step .StripeElement {
background: none;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
padding: 0;
margin-bottom: 1rem;
}
.c-donation-2025__form .js-form-type-select::after {
scale: 0.75;
}
.c-donation-2025__form .c-donation__form .c-donation__step .webform-name input,
.c-donation-2025__form .c-donation__form .c-donation__step .webform-name select,
.c-donation-2025__form .c-donation__form .c-donation__step .webform-address input,
.c-donation-2025__form .c-donation__form .c-donation__step .webform-address select,
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper input,
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper select,
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper input,
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper select,
.c-donation-2025__form .c-donation__form .c-donation__step#step_1 #edit-email,
.c-donation-2025__form #edit-amount-buttons + .webform-buttons-other-input input {
color: #30313d;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
height: 50px;
padding: 12px;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
background-color: #fff;
border-radius: 5px;
border: 1px solid #e6e6e6;
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}
.c-donation-2025__form .c-donation__form .c-donation__step .webform-name input.error,
.c-donation-2025__form .c-donation__form .c-donation__step .webform-name select.error,
.c-donation-2025__form .c-donation__form .c-donation__step .webform-address input.error,
.c-donation-2025__form .c-donation__form .c-donation__step .webform-address select.error,
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper input.error,
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper select.error,
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper input.error,
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper select.error,
.c-donation-2025__form .c-donation__form .c-donation__step#step_1 #edit-email.error,
.c-donation-2025__form #edit-amount-buttons + .webform-buttons-other-input input.error {
border: 1px solid #d11149;
-webkit-box-shadow: inset 0 0 0 1px #d11149;
box-shadow: inset 0 0 0 1px #d11149;
}
.c-donation-2025__form .c-donation__form .c-donation__step .webform-name input:focus,
.c-donation-2025__form .c-donation__form .c-donation__step .webform-name select:focus,
.c-donation-2025__form .c-donation__form .c-donation__step .webform-address input:focus,
.c-donation-2025__form .c-donation__form .c-donation__step .webform-address select:focus,
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper input:focus,
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper select:focus,
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper input:focus,
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper select:focus,
.c-donation-2025__form .c-donation__form .c-donation__step#step_1 #edit-email:focus,
.c-donation-2025__form #edit-amount-buttons + .webform-buttons-other-input input:focus {
outline: 0;
border-color: #0570de;
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 3px hsla(210, 96%, 45%, 0.25), 0 1px 1px 0 rgba(0, 0, 0, 0.08);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02), 0 0 0 3px hsla(210, 96%, 45%, 0.25), 0 1px 1px 0 rgba(0, 0, 0, 0.08);
}
.c-donation-2025__form .email-error {
display: none;
color: #df1b41;
font-size: 15px;
margin-top: 4px;
}
.c-donation-2025__form .email-error.active {
display: block;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
row-gap: 0.75rem;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
margin: 0;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item.form-item-address-address {
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item.form-item-address-address input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-right: none;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item.form-item-address-address-2 {
-webkit-flex-basis: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item.form-item-address-address-2 input {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item.form-item-address-city {
-webkit-flex-basis: 33.33%;
-ms-flex-preferred-size: 33.33%;
flex-basis: 33.33%;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item.form-item-address-city input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-right: none;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item.form-item-address-state-province {
-webkit-flex-basis: 33.33%;
-ms-flex-preferred-size: 33.33%;
flex-basis: 33.33%;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item.form-item-address-state-province select {
border-radius: 0px;
border-right: none;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item.form-item-address-postal-code {
-webkit-flex-basis: 33.33%;
-ms-flex-preferred-size: 33.33%;
flex-basis: 33.33%;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-address .fieldset-wrapper .form-item.form-item-address-postal-code input {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper {
gap: 0;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper .form-item {
-webkit-box-flex: 1;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
margin: 0;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper .form-item:not(.form-item-name-last) input {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-right: none;
}
.c-donation-2025__form .c-donation__form .c-donation__step .js-webform-type-webform-name .fieldset-wrapper .form-item.form-item-name-last input {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.c-donation-2025__form #edit-amount-buttons + .webform-buttons-other-input {
margin-top: 0.5rem;
}
.c-donation-2025__form .c-donation__form .c-donation__step#step_1 #edit-email {
max-width: 100%;
}
.c-donation-2025__form {
/** submit **/
}
.c-donation-2025__form .c-btn--secondary, .c-donation-2025__form input[type=submit].c-btn--secondary, .c-donation-2025__form .c-btn--override-secondary .c-cta-widget__input .c-btn, .c-btn--override-secondary .c-cta-widget__input .c-donation-2025__form .c-btn, .c-donation-2025__form .c-btn--override-secondary .c-cta-widget__input .c-cta-widget--embed .js-cm-submit-button, .c-btn--override-secondary .c-cta-widget__input .c-cta-widget--embed .c-donation-2025__form .js-cm-submit-button, .c-donation-2025__form .c-cta-widget--embed .c-btn--override-secondary .c-cta-widget__input .js-cm-submit-button, .c-cta-widget--embed .c-btn--override-secondary .c-cta-widget__input .c-donation-2025__form .js-cm-submit-button,
.c-donation-2025__form .c-btn--override-secondary .c-cta-widget__input .c-cta-widget--embed button[type=submit],
.c-btn--override-secondary .c-cta-widget__input .c-cta-widget--embed .c-donation-2025__form button[type=submit],
.c-donation-2025__form .c-cta-widget--embed .c-btn--override-secondary .c-cta-widget__input button[type=submit],
.c-cta-widget--embed .c-btn--override-secondary .c-cta-widget__input .c-donation-2025__form button[type=submit] {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 60px;
padding: 11px 10px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
border-radius: 10px;
background: #31a3f3;
color: #fff;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 150%;
/* 27px */
text-transform: uppercase;
width: 100%;
}
.c-donation-2025__form .c-btn--secondary:hover, .c-donation-2025__form .c-btn--override-secondary .c-cta-widget__input .c-btn:hover, .c-btn--override-secondary .c-cta-widget__input .c-donation-2025__form .c-btn:hover, .c-donation-2025__form .c-btn--override-secondary .c-cta-widget__input .c-cta-widget--embed .js-cm-submit-button:hover, .c-btn--override-secondary .c-cta-widget__input .c-cta-widget--embed .c-donation-2025__form .js-cm-submit-button:hover, .c-donation-2025__form .c-cta-widget--embed .c-btn--override-secondary .c-cta-widget__input .js-cm-submit-button:hover, .c-cta-widget--embed .c-btn--override-secondary .c-cta-widget__input .c-donation-2025__form .js-cm-submit-button:hover,
.c-donation-2025__form .c-btn--override-secondary .c-cta-widget__input .c-cta-widget--embed button[type=submit]:hover,
.c-btn--override-secondary .c-cta-widget__input .c-cta-widget--embed .c-donation-2025__form button[type=submit]:hover,
.c-donation-2025__form .c-cta-widget--embed .c-btn--override-secondary .c-cta-widget__input button[type=submit]:hover,
.c-cta-widget--embed .c-btn--override-secondary .c-cta-widget__input .c-donation-2025__form button[type=submit]:hover {
background-color: #2d98e2;
}
.c-donation-2025__form {
/** STEP 2 **/
}
.c-donation-2025__form .c-donation__giving {
border-bottom: 1px solid #d6d6d6;
background: #f0f3f5;
display: block;
text-align: center;
padding: 16px 0px;
color: #202325;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin: -1rem -1rem 1rem;
}
.c-donation-2025__form .c-donation__giving a {
text-decoration: underline;
color: #202325;
}
.c-donation-2025__form .c-donation__giving a:hover {
text-decoration: none;
}
.c-donation-2025__form .c-donation__secondary-title {
color: #202325 !important;
font-size: 21px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-bottom: 0.75rem;
}
.c-donation-2025__form .c-donation__paypal {
border-radius: 10px;
border: 1px solid #bbb;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 60px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
color: #121212;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
-webkit-transition: all 0.125s ease-in-out;
transition: all 0.125s ease-in-out;
}
.c-donation-2025__form .c-donation__paypal:hover {
background-color: #f0f3f5;
}
.c-donation-2025__form .c-donation__spacer {
width: 100%;
text-align: center;
color: #676767;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 1rem 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.c-donation-2025__form .c-donation__spacer::before, .c-donation-2025__form .c-donation__spacer::after {
content: "";
display: inline-block;
width: 44%;
height: 1px;
background: #dbdbdb;
margin-right: 10px;
margin-bottom: 0;
}
.c-donation-2025__form .c-donation__spacer::after {
margin-left: 10px;
margin-right: 0;
}
.c-donation-2025__form .c-donation__form .c-donation__step#step_2 .c-donation__navigation {
margin: 2rem 0 0;
}
.c-donation-2025 {
/** Sidebar **/
}
.c-donation-2025__sidebar {
color: #fff;
font-size: clamp(16px, 0.8rem, 0.8rem);
font-weight: 400;
line-height: 1.5;
letter-spacing: -0.16px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (max-width: 1023px) and (min-width: 623px) {
.c-donation-2025__sidebar {
background-position: 0 14%;
min-height: 400px;
}
}
@media screen and (max-width: 623px) {
.c-donation-2025__sidebar {
background-position: top;
min-height: 300px;
}
}
@media screen and (max-width: 469px) {
.c-donation-2025__sidebar {
min-height: 200px;
}
}
.c-donation-2025__sidebar {
width: 100%;
position: relative;
}
@media screen and (min-width: 1024px) {
.c-donation-2025__sidebar {
-webkit-box-flex: 1;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
width: auto;
height: 100dvh;
min-height: 0;
position: -webkit-sticky;
position: sticky;
top: 0;
}
}
.c-donation-2025__sidebar .testimonial-wrapper {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
padding: 2rem 2rem;
display: none;
}
@media screen and (min-width: 1024px) {
.c-donation-2025__sidebar .testimonial-wrapper {
display: block;
}
}
.c-donation-2025__sidebar .testimonial-body {
font-style: italic;
}
.c-donation-2025__sidebar .testimonial-name {
font-weight: 600;
text-align: right;
}
.c-donation-2025__sidebar .testimonial-position {
text-align: right;
}
.c-donation-2025 {
/** **/
/** Content Parent **/
}
.c-donation-2025 .c-donation__title {
color: #fff;
text-align: center;
font-size: clamp(16px, 2.4rem, 2.4rem);
font-style: normal;
font-weight: 400;
line-height: 110%;
/* 52.8px */
letter-spacing: -0.48px;
margin-bottom: 0.75rem;
}
.c-donation-2025 .c-donation__intro-text p {
text-align: center;
font-size: clamp(16px, 0.8rem, 0.8rem);
font-style: normal;
font-weight: 400;
line-height: 150%;
/* 24px */
letter-spacing: -0.16px;
max-width: 600px;
margin: 0 auto 2.5rem;
}
.c-donation-2025 .c-donation-2025__header .webform-custom-options-buttons {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
margin: 0;
border-radius: 4px;
overflow: hidden;
}
.c-donation-2025 .c-donation-2025__header .webform-custom-options-button {
cursor: pointer;
-webkit-box-flex: 1;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
background: #d9d9d9;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: #202325;
font-size: clamp(18px, 0.9rem, 0.9rem);
font-weight: 700;
min-height: 40px;
-webkit-transition: all 0.125s ease-in-out;
transition: all 0.125s ease-in-out;
}
.c-donation-2025 .c-donation-2025__header .webform-custom-options-button:hover {
background: #cbcbcb;
}
.c-donation-2025 .c-donation-2025__header .webform-custom-options-button .description {
font-size: 0.8em;
}
.c-donation-2025 .c-donation-2025__header .webform-custom-options-button[data-option-value]:hover,
.c-donation-2025 .c-donation-2025__header .webform-custom-options-button[data-option-value]:focus {
border-color: #999;
color: #202325;
}
.c-donation-2025 .c-donation-2025__header .webform-custom-options-button[data-option-value][aria-checked=true] {
border-color: #31a3f3;
background: #31a3f3;
color: #fff;
cursor: default;
}
.c-donation-2025 .c-donation-2025__header .webform-custom-options-button[data-option-value][aria-checked=true]:focus {
-webkit-box-shadow: 0 0 5px #0074bd;
box-shadow: 0 0 5px #0074bd;
}
.c-donation-2025 .c-donation-2025__header .webform-custom-options-button[data-option-value][aria-disabled=true],
.c-donation-2025 .c-donation-2025__header .webform-custom-options-button[data-option-value][aria-disabled=true]:hover,
.c-donation-2025 .c-donation-2025__header .webform-custom-options-button[data-option-value][aria-disabled=true]:focus {
cursor: not-allowed;
border-color: #ccc;
color: #999;
}
.c-donation-2025 .c-donation__form .c-donation__step .form-item-opt-in {
margin-bottom: 3rem;
padding-top: 0.75rem;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-align: left;
color: #202325;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.c-donation-2025 .c-donation__form .c-donation__step .form-item-opt-in input[type=checkbox] {
margin-top: 2px;
margin-right: 0.5em;
}
.c-donation-2025 .c-donation__form .c-donation__step .form-item-opt-in label {
display: inline-block;
font-size: 18px;
}
.c-donation-2025 .c-donation__otherways a {
text-decoration: underline;
}
.c-donation-2025 .c-donation__otherways a:hover {
text-decoration: none;
}
.c-donation-2025 .form-item-opt-in [type=checkbox],
.c-donation-2025 .form-item-opt-in [type=radio] {
width: 20px;
height: 20px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 0.5;
}
.c-donation-2025 .form-item-opt-in [type=checkbox]:checked,
.c-donation-2025 .form-item-opt-in [type=radio]:checked {
opacity: 1;
accent-color: #309ae5;
border-color: #309ae5;
}
.c-donation-2025 .form-item-opt-in [type=checkbox] + label,
.c-donation-2025 .form-item-opt-in [type=radio] + label {
display: inline;
color: #30313d;
}
.c-donation-2025__photo-credit {
display: block;
position: absolute;
bottom: 1rem;
left: 1rem;
font-size: 13px;
line-height: 1;
font-style: normal;
}
/** End 2025 **/
.c-donation--column-content.c-donation--light h2.c-donation__intro_mobile {
color: #fff;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation--column-content.c-donation--top {
padding-top: 4rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.c-donation--column-content.c-donation--top {
padding-top: 4rem;
}
}
@media screen and (min-width: 1200px) {
.c-donation--column-content.c-donation--top {
padding-top: 6rem;
}
}
.c-donation--column-content .o-grid {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
padding: 0;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation--column-content .o-grid {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
.c-donation--column-content .c-donation__step#step_2 .c-donation__navigation {
margin: 0;
}
.c-donation--column-content.c-donation--left .o-grid {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation--column-content.c-donation--left .o-grid {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
.c-donation--column-content.j-thank-you-active .c-donation__form-wrapper,
.c-donation--column-content.j-thank-you-active .c-donation__main > .c-donation__intro {
display: none;
}
.c-donation--column-content.j-thank-you-active .thank-you-container {
background-color: #0f324e;
padding: 2rem;
display: block;
}
.c-donation--column-content.j-thank-you-active .thank-you-container p {
color: #fff;
}
.c-donation--column-content .o-grid > .c-donation__intro--flush {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.c-donation--column-content .c-donation__intro p {
font-family: "Roboto", sans-serif;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation--column-content .c-donation__intro p {
display: block;
font-size: 1rem;
margin: 5px 0 10px;
}
}
.c-donation--column-content h2.c-donation__intro_mobile {
display: none;
font-weight: 700;
margin-bottom: 0;
text-align: center;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation--column-content h2.c-donation__intro_mobile {
display: block;
}
}
.c-donation--column-content .c-donation-2025__form {
background: none;
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
.c-donation--column-content .c-donation-2025__form .webform-custom-options-buttons {
margin: 0;
}
.c-donation--column-content .c-donation-2025__form .webform-custom-options-button {
border: none;
border-radius: 0;
margin: 0 0 10px;
}
.c-donation--column-content .c-donation-2025__form .webform-custom-options-button[data-option-value][aria-checked=true] {
background: #30a3f3;
color: #fff;
}
.c-donation--column-content .c-donation-2025__form .webform-custom-options-button:first-of-type {
border-radius: 5px 0 0 5px;
}
.c-donation--column-content .c-donation-2025__form .webform-custom-options-button:last-of-type {
border-radius: 0 5px 5px 0;
}
.c-donation--column-content .c-donation-2025__form .c-donation__monthly_other {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.c-donation--column-content .c-donation-2025__form .c-donation__frequency {
font-weight: 400;
text-align: center;
}
.c-donation--column-content .c-donation-2025__form .c-donation__frequency > span {
display: none;
}
.c-donation--column-content .c-donation-2025__form .c-donation__otherways a {
text-decoration: underline;
}
.c-donation--column-content .c-donation-2025__form .c-donation__otherways a:hover {
text-decoration: none;
}
.c-donation--column-content .thank-you-container {
text-align: center;
}
.c-donation--column-content .thank-you-header {
margin: 0 auto 1rem;
}
.c-donation--column-content .thank-you-header .thank-you-title {
color: #FFF;
font-family: "OldStyleMT-Regular", serif;
font-size: 30px;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.48px;
margin-bottom: 1.5rem;
}
@media screen and (min-width: 1024px) {
.c-donation--column-content .thank-you-header .thank-you-title {
font-size: 48px;
}
}
.c-donation--column-content .thank-you-header p {
text-align: center;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.16px;
}
.c-donation--column-content .download-receipt-btn {
display: inline-block;
background-color: transparent;
border: 1px solid #fff;
color: #fff;
font-size: 1rem;
font-weight: 500;
padding: 0.75rem 1.5rem;
border-radius: 2rem;
text-decoration: none;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.c-donation--column-content .download-receipt-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.c-donation--column-content .impact-section {
margin-bottom: 4rem;
}
.c-donation--column-content .impact-section .impact-title {
font-family: "OldStyleMT-Regular", serif;
margin-bottom: 2.5rem;
color: #FFF;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.28px;
}
@media screen and (min-width: 640px) {
.c-donation--column-content .impact-section .impact-title {
font-size: 28px;
}
}
.c-donation--column-content .impact-stats {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0;
}
@media screen and (min-width: 640px) {
.c-donation--column-content .impact-stats {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
}
.c-donation--column-content .impact-stat {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border-top: 1px solid rgba(255, 255, 255, 0.6);
padding-block: 0.75rem;
}
@media screen and (min-width: 640px) {
.c-donation--column-content .impact-stat {
border-top: none;
border-left: 1px solid rgba(255, 255, 255, 0.6);
padding-inline: 0.5rem;
padding-block: 0;
}
}
.c-donation--column-content .impact-stat:first-child {
border: none;
}
.c-donation--column-content .impact-stat .impact-icon {
height: 66px;
margin-bottom: 0.5rem;
}
.c-donation--column-content .impact-stat .impact-number {
font-family: "OldStyleMT-Regular", serif;
color: #DBDCD4;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 1;
letter-spacing: -0.36px;
margin-bottom: 0.25rem;
}
.c-donation--column-content .impact-stat .impact-title {
font-family: "Roboto", sans-serif;
color: #DBDCD4;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.28px;
text-transform: uppercase;
margin-bottom: 0.25rem;
}
.c-donation--column-content .impact-stat .impact-subtitle {
color: rgba(255, 255, 255, 0.6);
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.16px;
}
.c-donation--column-content .social-sharing .social-title {
font-family: "OldStyleMT-Regular", serif;
color: #FFF;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.28px;
margin-bottom: 2rem;
}
@media screen and (min-width: 640px) {
.c-donation--column-content .social-sharing .social-title {
font-size: 28px;
}
}
.c-donation--column-content .social-buttons {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 0.5rem;
}
@media screen and (min-width: 640px) {
.c-donation--column-content .social-buttons {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
gap: 1rem;
}
}
.c-donation--column-content .social-btn {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
display: flex;
height: 55px;
padding: 10px 16px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 8px;
border: 1.5px solid rgba(255, 255, 255, 0.5);
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 1.5;
letter-spacing: -0.16px;
}
.c-donation--column-content .social-btn svg {
width: 24px;
height: 24px;
fill: #fff;
}
.c-donation--column-content .social-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.c-donation--column-content .social-btn.facebook-btn:hover {
border-color: #1877F2;
}
.c-donation--column-content .social-btn.twitter-btn:hover, .c-donation--column-content .social-btn.share-x:hover {
border-color: #1DA1F2;
}
.c-donation--column-content .social-btn.linkedin-btn:hover {
border-color: #0077B5;
}
.c-donation--column-content .social-sharing-buttons__button {
margin: 0.25rem;
}
.c-donation--column-content .social-sharing-buttons__button svg use {
fill: #fff;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation--centered-content.c-donation--top {
padding-top: 4rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.c-donation--centered-content.c-donation--top {
padding-top: 4rem;
}
}
@media screen and (min-width: 1200px) {
.c-donation--centered-content.c-donation--top {
padding-top: 6rem;
}
}
.c-donation--centered-content .c-donation__step#step_2 .c-donation__navigation {
margin: 0;
}
.c-donation--centered-content.j-thank-you-active .c-donation__form-wrapper,
.c-donation--centered-content.j-thank-you-active .c-donation__intro--centered > .c-donation__intro {
display: none;
}
.c-donation--centered-content.j-thank-you-active .thank-you-container {
background-color: #0f324e;
padding: 2rem;
display: block;
}
.c-donation--centered-content.j-thank-you-active .thank-you-container p {
color: #fff;
}
.c-donation--centered-content h2.c-donation__intro {
font-weight: 700;
margin-bottom: 0;
text-align: center;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation--centered-content h2.c-donation__intro {
display: none;
}
}
.c-donation--centered-content.c-donation--light h2.c-donation__intro_mobile {
color: #fff;
}
.c-donation--centered-content h2.c-donation__intro_mobile {
display: none;
font-weight: 700;
margin-bottom: 0;
text-align: center;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation--centered-content h2.c-donation__intro_mobile {
display: block;
}
}
.c-donation--centered-content .c-donation__intro {
color: #fff;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation--centered-content .c-donation__intro {
display: block;
}
}
.c-donation--centered-content .c-donation__intro p {
font-family: "Roboto", sans-serif;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-donation--centered-content .c-donation__intro p {
display: block;
font-size: 1rem;
margin: 5px 0 10px;
}
}
.c-donation--centered-content .c-donation-2025__form {
max-width: 600px;
margin: 0 auto;
}
.c-donation--centered-content .c-donation-2025__form {
background: none;
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
.c-donation--centered-content .c-donation-2025__form .webform-custom-options-buttons {
margin: 0;
}
.c-donation--centered-content .c-donation-2025__form .webform-custom-options-button {
border: none;
border-radius: 0;
margin: 0 0 10px;
}
.c-donation--centered-content .c-donation-2025__form .webform-custom-options-button[data-option-value][aria-checked=true] {
background: #30a3f3;
color: #fff;
}
.c-donation--centered-content .c-donation-2025__form .webform-custom-options-button:first-of-type {
border-radius: 5px 0 0 5px;
}
.c-donation--centered-content .c-donation-2025__form .webform-custom-options-button:last-of-type {
border-radius: 0 5px 5px 0;
}
.c-donation--centered-content .c-donation-2025__form .c-donation__monthly_other {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.c-donation--centered-content .c-donation-2025__form .c-donation__frequency {
font-weight: 400;
text-align: center;
}
.c-donation--centered-content .c-donation-2025__form .c-donation__frequency > span {
display: none;
}
.c-donation--centered-content .c-donation-2025__form .c-donation__otherways a {
text-decoration: underline;
}
.c-donation--centered-content .c-donation-2025__form .c-donation__otherways a:hover {
text-decoration: none;
}
.c-donation--centered-content .thank-you-container {
text-align: center;
}
.c-donation--centered-content .thank-you-header {
margin: 0 auto 1rem;
}
.c-donation--centered-content .thank-you-header .thank-you-title {
color: #FFF;
font-family: "OldStyleMT-Regular", serif;
font-size: 30px;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.48px;
margin-bottom: 1.5rem;
}
@media screen and (min-width: 1024px) {
.c-donation--centered-content .thank-you-header .thank-you-title {
font-size: 48px;
}
}
.c-donation--centered-content .thank-you-header p {
text-align: center;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.16px;
}
.c-donation--centered-content .download-receipt-btn {
display: inline-block;
background-color: transparent;
border: 1px solid #fff;
color: #fff;
font-size: 1rem;
font-weight: 500;
padding: 0.75rem 1.5rem;
border-radius: 2rem;
text-decoration: none;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.c-donation--centered-content .download-receipt-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.c-donation--centered-content .impact-section {
margin-bottom: 4rem;
}
.c-donation--centered-content .impact-section .impact-title {
font-family: "OldStyleMT-Regular", serif;
margin-bottom: 2.5rem;
color: #FFF;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.28px;
}
@media screen and (min-width: 640px) {
.c-donation--centered-content .impact-section .impact-title {
font-size: 28px;
}
}
.c-donation--centered-content .impact-stats {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0;
}
@media screen and (min-width: 640px) {
.c-donation--centered-content .impact-stats {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
}
.c-donation--centered-content .impact-stat {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border-top: 1px solid rgba(255, 255, 255, 0.6);
padding-block: 0.75rem;
}
@media screen and (min-width: 640px) {
.c-donation--centered-content .impact-stat {
border-top: none;
border-left: 1px solid rgba(255, 255, 255, 0.6);
padding-inline: 0.5rem;
padding-block: 0;
}
}
.c-donation--centered-content .impact-stat:first-child {
border: none;
}
.c-donation--centered-content .impact-stat .impact-icon {
height: 66px;
margin-bottom: 0.5rem;
}
.c-donation--centered-content .impact-stat .impact-number {
font-family: "OldStyleMT-Regular", serif;
color: #DBDCD4;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 1;
letter-spacing: -0.36px;
margin-bottom: 0.25rem;
}
.c-donation--centered-content .impact-stat .impact-title {
font-family: "Roboto", sans-serif;
color: #DBDCD4;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.28px;
text-transform: uppercase;
margin-bottom: 0.25rem;
}
.c-donation--centered-content .impact-stat .impact-subtitle {
color: rgba(255, 255, 255, 0.6);
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.16px;
}
.c-donation--centered-content .social-sharing .social-title {
font-family: "OldStyleMT-Regular", serif;
color: #FFF;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.28px;
margin-bottom: 2rem;
}
@media screen and (min-width: 640px) {
.c-donation--centered-content .social-sharing .social-title {
font-size: 28px;
}
}
.c-donation--centered-content .social-buttons {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 0.5rem;
}
@media screen and (min-width: 640px) {
.c-donation--centered-content .social-buttons {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
gap: 1rem;
}
}
.c-donation--centered-content .social-btn {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
display: flex;
height: 55px;
padding: 10px 16px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 8px;
border: 1.5px solid rgba(255, 255, 255, 0.5);
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 1.5;
letter-spacing: -0.16px;
}
.c-donation--centered-content .social-btn svg {
width: 24px;
height: 24px;
fill: #fff;
}
.c-donation--centered-content .social-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.c-donation--centered-content .social-btn.facebook-btn:hover {
border-color: #1877F2;
}
.c-donation--centered-content .social-btn.twitter-btn:hover, .c-donation--centered-content .social-btn.share-x:hover {
border-color: #1DA1F2;
}
.c-donation--centered-content .social-btn.linkedin-btn:hover {
border-color: #0077B5;
}
.c-donation--centered-content .social-sharing-buttons__button {
margin: 0.25rem;
}
.c-donation--centered-content .social-sharing-buttons__button svg use {
fill: #fff;
}
/* ==========================================================================
#contact forms component
========================================================================== */
.c-contact-form .form-type-textfield label,
.c-contact-form .form-type-email label,
.c-contact-form .form-type-tel label,
.c-contact-form .form-type-select label,
.c-contact-form .form-type-textarea label {
display: none;
}
.c-contact-form {
background-color: #EEEEEE;
}
.c-contact-form .c-widget__thankyou, .c-contact-form__inner {
background-color: #fff;
-webkit-box-shadow: 0px 0px 15.1px 5px rgba(0, 0, 0, 0.04);
box-shadow: 0px 0px 15.1px 5px rgba(0, 0, 0, 0.04);
border-radius: 18px;
padding: 2rem 3rem;
}
.c-contact-form .c-widget__thankyou h2 {
font-weight: 300;
font-size: 2rem;
line-height: 100%;
text-align: center;
margin-bottom: 1.75rem;
}
.c-contact-form .c-widget__thankyou div {
text-align: center;
}
.c-contact-form span.c-contact-form--required {
color: #d11149;
text-align: right;
display: block;
padding-top: 0.5rem;
font-size: 0.7rem;
}
.c-contact-form .form-actions {
text-align: center;
}
/*
.c-contact-form {
&__wrap {
max-width: 660px;
margin: 0 auto;
}
.c-contact-form__row--date {
max-height: 88px;
overflow: hidden;
}
form {
h2 {
text-align: center;
font-size: 2.5rem;
}
.form-item {
margin: 0;
}
label {
font-size: .7rem;
padding: 0 0 .25rem .25rem;
&.c-contact-form--required {
color: $error-text;
text-align: right;
display: block;
}
}
input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea,
select,
.chosen-container-single .chosen-single {
background-color: rgba($cararra, .5);
background-image: none;
margin-bottom: .75rem;
width: 100%;
padding: .6rem .4rem;
height: 50px;
border: 1px solid rgba($mineshaft, .5);
font-size: .8rem;
line-height: 1;
&:required:focus:valid {
border: $success-text 2px solid;
padding: .55rem .35rem;
}
&:required:focus:invalid {
border: $error-text 2px solid;
padding: .55rem .35rem;
}
}
select:required:valid + .chosen-container:hover > .chosen-single {
border: $success-text 2px solid;
padding: .55rem .35rem;
}
select:required:invalid + .chosen-container:hover > .chosen-single {
border: $error-text 2px solid;
padding: .55rem .35rem;
}
input[type="date"] {
//&::-webkit-calendar-picker-indicator,
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
display: none;
}
&::-webkit-calendar-picker-indicator {
-webkit-appearance: none;
color: rgba($white, 0);
height: 30px;
width: 30px;
&:hover {
background: rgba($white, 0);
}
}
&::-webkit-input-placeholder {
visibility: hidden !important;
}
}
.js-form-type-date {
width: 85%;
display: inline-block;
&::after {
content: '\f073';
display: inline-block;
font-size: 1rem;
font-family: $f-fonts;
position: relative;
top: -2.6rem;
left: 85%;
pointer-events: none;
}
input {
cursor: pointer;
}
}
.chosen-container-single {
margin-bottom: .75rem;
height: 50px;
.chosen-single {
height: 50px;
line-height: 1;
border-radius: $br-default;
box-shadow: none;
margin-bottom: 0;
span {
font-size: .85rem;
line-height: 1.5;
}
}
}
}
&.t-bg-sand,
&.t-bg-blue {
input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea,
.chosen-container-single .chosen-single,
select {
background-color: rgba($white, .5);
}
}
.c-widget__thankyou {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
min-height: 345px;
h2 {
font-family: $f-serif;
text-align: center;
line-height: 1;
margin-bottom: 1em;
}
div {
font-family: $f-serif;
font-size: 1rem;
line-height: $base-spacing;
}
}
}
/* calendar */
.ui-datepicker.ui-widget {
max-width: 250px;
font-size: 0.6rem;
border: 0;
background: rgb(247.7098214286, 247.7098214286, 244.5401785714);
border-radius: 0;
-webkit-box-shadow: 0 3px 5px 2px rgba(55, 55, 55, 0.5);
box-shadow: 0 3px 5px 2px rgba(55, 55, 55, 0.5);
}
.ui-datepicker.ui-widget::before {
border: 1rem solid;
border-color: transparent transparent rgb(247.7098214286, 247.7098214286, 244.5401785714);
height: 0;
width: 0;
content: "";
position: absolute;
left: 85px;
top: -2rem;
display: block;
}
.ui-datepicker.ui-widget .ui-datepicker-header,
.ui-datepicker.ui-widget .ui-state-default,
.ui-datepicker.ui-widget .ui-widget-content .ui-state-default,
.ui-datepicker.ui-widget .ui-widget-header .ui-state-default {
background: none;
border: 0;
text-align: center;
}
.ui-datepicker.ui-widget .ui-datepicker-header.ui-state-highlight,
.ui-datepicker.ui-widget .ui-state-default.ui-state-highlight,
.ui-datepicker.ui-widget .ui-widget-content .ui-state-default.ui-state-highlight,
.ui-datepicker.ui-widget .ui-widget-header .ui-state-default.ui-state-highlight {
background: #fff;
}
/* style for form block */
#block-newsroomandpeoplectablock {
clear: both;
}
/* captcha */
.g-recaptcha {
width: 300px;
height: 74px;
overflow: hidden;
margin: 0 auto;
}
.g-recaptcha > div {
position: relative;
left: -1px;
top: -1px;
}
/* popup only */
.ap-email-signup .g-recaptcha {
opacity: 0.75;
width: 220px;
margin-bottom: 0.5rem;
}
/* contact form */
.c-contact-form__wrap .g-recaptcha {
margin-left: 0;
}
.webform-confirmation__message {
font-size: 1.5rem;
line-height: 1.5;
margin: 2rem 0 1em 0;
text-align: center;
}
.webform-confirmation__back {
margin: 0 0 1em 0;
text-align: center;
}
#mpv {
width: 90%;
margin: 0 auto;
}
#mpv h1.c-page-head__headline {
font-size: 3rem;
margin-bottom: 50px;
text-align: center;
}
@media screen and (max-width: 1024px) {
#mpv h1.c-page-head__headline {
font-size: 2rem;
}
}
#mpv h1.c-page-head__headline.opt-out {
font-size: 2.5rem;
}
#mpv #edit-intro {
background-color: #f1f1eb;
text-align: center;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
padding: 40px 0;
margin-bottom: 30px;
}
#mpv #edit-intro p {
margin: 0 2% 40px 2%;
font-weight: 400;
}
#mpv #edit-intro input {
font-weight: 400;
padding-left: 20px;
}
#mpv #edit-intro label {
margin-bottom: 5px;
}
#mpv .mpv-form {
font-weight: 300;
}
#mpv .mpv-form label {
font-weight: 300;
}
#mpv .mpv-form label b {
font-weight: 400;
}
#mpv .mpv-form form {
background-color: #e4e4da;
margin: 0 auto;
padding-bottom: 50px;
border-radius: 15px;
}
#mpv .mpv-form .form-item {
margin: 0;
}
#mpv .mpv-form .form-type-email {
margin: 0 auto;
width: 50%;
}
#mpv .mpv-form .form-type-email label {
text-align: left;
}
#mpv .mpv-form .form-type-checkbox {
margin: 0 10% 25px;
border-bottom: 1px solid #CCC;
padding-bottom: 25px;
}
#mpv .mpv-form .form-type-checkbox input {
display: block;
float: left;
margin-top: 7px;
}
#mpv .mpv-form .form-type-checkbox label {
margin-left: 30px;
display: block;
}
#mpv #edit-opt-out-wrapper {
margin: 0 10%;
border: none;
text-align: center;
}
#mpv #edit-opt-out-wrapper a {
color: #373737;
text-decoration: underline;
}
#mpv .form-actions {
text-align: center;
margin: 0;
}
#mpv .form-actions input {
margin: 0;
}
@media screen and (max-width: 768px) {
#mpv {
width: 100%;
}
#mpv h1.c-page-head__headline {
font-size: 1.5rem;
margin-bottom: 30px;
}
#mpv #edit-intro p {
margin-bottom: 30px;
}
#mpv .mpv-form .form-type-email {
width: 80%;
}
#mpv #edit-opt-out-wrapper .form-type-checkbox {
margin: 0;
}
}
@media screen and (min-width: 1024px) {
.c-testimony-widget .c-testimony-widget__items {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 3rem;
}
}
.c-testimony-widget {
/** BG None **/
}
.c-testimony-widget.t-bg-none .c-testimony-widget__item {
color: #000;
padding: 0;
margin-bottom: 1.5rem;
}
@media screen and (min-width: 1024px) {
.c-testimony-widget.t-bg-none .c-testimony-widget__item {
margin-bottom: 0rem;
padding: 1.5rem 2.5rem 0.5rem;
}
}
.c-testimony-widget.t-bg-none .c-testimony-widget__item:last-child {
margin-bottom: 0;
}
.c-testimony-widget.t-bg-none .c-testimony-widget__title {
display: none;
}
.c-testimony-widget.t-bg-none .c-testimony-widget__text {
text-align: center;
margin-bottom: 1rem;
font-size: max(16px, 0.8rem);
line-height: 1.3;
}
@media screen and (min-width: 1024px) {
.c-testimony-widget.t-bg-none .c-testimony-widget__text {
font-size: 1.05rem;
}
}
.c-testimony-widget.t-bg-none .c-testimony-widget__text p {
font-weight: 300 !important;
line-height: 1.5 !important;
display: inline;
}
.c-testimony-widget.t-bg-none .c-testimony-widget__text::before {
content: "";
display: inline-block;
background: no-repeat 0 0;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAyNyAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyLjQ5MTUgOS4yMjRMMjIuNjgzNSA5LjI4OEMyNS4xMTU1IDEwLjI0OCAyNi4yNjc1IDExLjc4NCAyNi4yNjc1IDEzLjg5NkMyNi4yNjc1IDE2LjUyIDI0LjE1NTUgMTguODI0IDIxLjcyMzUgMTguODI0QzE4LjcxNTUgMTguODI0IDE2LjQxMTUgMTUuODggMTYuNDExNSAxMi4xNjhDMTYuNDExNSA3Ljk0NCAxOC43MTU1IDMuNTI4IDIyLjIzNTUgMS4wMzJDMjIuODExNSAwLjY0Nzk5OSAyMy4yNTk1IDAuMzkxOTk4IDIzLjU3OTUgMC4zOTE5OThDMjMuOTYzNSAwLjM5MTk5OCAyNC4yMTk1IDAuNzExOTk4IDI0LjIxOTUgMS4wOTZDMjQuMjE5NSAxLjYwOCAyMy44OTk1IDIuMjQ4IDIyLjg3NTUgMy41MjhDMjEuNDY3NSA1LjMyIDIwLjg5MTUgNi41MzYgMjAuODkxNSA3LjU2QzIwLjg5MTUgOC4zMjggMjEuMjc1NSA4Ljc3NiAyMi40OTE1IDkuMjI0Wk01LjI3NTUgNy40OTZDNS4yNzU1IDguNDU2IDUuNzIzNSA4Ljk2OCA3LjM4NzUgOS43MzZDOS45NDc1IDEwLjk1MiAxMC43MTU1IDEyLjA0IDEwLjcxNTUgMTQuNDA4QzEwLjcxNTUgMTYuODQgOC42Njc1IDE4LjgyNCA2LjEwNzUgMTguODI0QzIuOTA3NSAxOC44MjQgMC43OTU1IDE2LjA3MiAwLjc5NTUgMTIuMTA0QzAuNzk1NSA4LjU4NCAyLjM5NTUgNC43NDQgNS4wODM1IDEuOTkyQzYuMDQzNSAwLjk2Nzk5OSA3LjAwMzUgMC4zOTE5OTggNy42NDM1IDAuMzkxOTk4QzguMTU1NSAwLjM5MTk5OCA4LjQ3NTUgMC42NDc5OTkgOC40NzU1IDEuMDk2QzguNDc1NSAxLjQxNiA4LjIxOTUgMS45MjggNy40NTE1IDIuODg4QzUuOTE1NSA0Ljc0NCA1LjI3NTUgNi4xNTIgNS4yNzU1IDcuNDk2WiIgZmlsbD0iIzI0NjMzNiIvPgo8L3N2Zz4K");
width: 27px;
height: 19px;
margin-right: 0.5rem;
}
.c-testimony-widget.t-bg-none .c-testimony-widget__text::after {
content: "";
display: inline-block;
background: no-repeat 0 0;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNiAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuMDk5NSA5LjY3MkgzLjAzNTVDMS4zNzE1IDkuMDMyIDAuMjE5NSA3LjMwNCAwLjIxOTUgNS41MTJDMC4yMTk1IDIuNzYgMi4yNjc1IDAuNTg0IDQuNzYzNSAwLjU4NEM3LjgzNTUgMC41ODQgMTAuMDc1NSAzLjQ2NCAxMC4wNzU1IDcuNDk2QzEwLjA3NTUgMTAuNzYgOC40NzU1IDE0LjI4IDUuNzIzNSAxNy4wMzJDNC42MzU1IDE4LjE4NCAzLjQxOTUgMTkuMDE2IDIuOTA3NSAxOS4wMTZDMi40NTk1IDE5LjAxNiAyLjEzOTUgMTguNjMyIDIuMTM5NSAxOC4xMkMyLjEzOTUgMTcuNjA4IDIuMzk1NSAxNy4xNiAzLjI5MTUgMTYuMTM2QzQuNjk5NSAxNC40MDggNS40MDM1IDEzLjA2NCA1LjQwMzUgMTEuOTc2QzUuNDAzNSAxMC44MjQgNC44OTE1IDEwLjI0OCAzLjI5MTUgOS43MzZMMy4wOTk1IDkuNjcyWk0xOC43Nzk1IDkuNDhMMTguNzE1NSA5LjQxNkMxNi44NTk1IDguNzEyIDE1LjcwNzUgNy4xMTIgMTUuNzA3NSA1LjEyOEMxNS43MDc1IDIuNTA0IDE3LjYyNzUgMC41ODQgMjAuMTg3NSAwLjU4NEMyMy40NTE1IDAuNTg0IDI1LjY5MTUgMy40IDI1LjY5MTUgNy41NkMyNS42OTE1IDExLjkxMiAyMi42ODM1IDE3LjE2IDE5LjIyNzUgMTguODg4QzE5LjA5OTUgMTguOTUyIDE4LjkwNzUgMTkuMDE2IDE4Ljc3OTUgMTkuMDE2QzE4LjI2NzUgMTkuMDE2IDE3Ljk0NzUgMTguNjk2IDE3Ljk0NzUgMTguMTg0QzE3Ljk0NzUgMTcuODY0IDE4LjIwMzUgMTcuMzUyIDE4LjcxNTUgMTYuNzEyTDE4Ljk3MTUgMTYuMzkyQzIwLjQ0MzUgMTQuNiAyMS4xNDc1IDEzLjA2NCAyMS4xNDc1IDExLjg0OEMyMS4xNDc1IDEwLjY5NiAyMC41MDc1IDEwLjA1NiAxOC43Nzk1IDkuNDhaIiBmaWxsPSIjMjQ2MzM2Ii8+Cjwvc3ZnPgo=");
width: 27px;
height: 19px;
margin-left: 0.5rem;
}
.c-testimony-widget.t-bg-none .c-testimony-widget__data {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 0.5rem;
}
@media screen and (min-width: 1024px) {
.c-testimony-widget.t-bg-none .c-testimony-widget__data {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 0;
}
}
.c-testimony-widget.t-bg-none .c-testimony-widget__data p {
margin-bottom: 0;
}
.c-testimony-widget.t-bg-none .c-testimony-widget__avatar {
width: 100px;
height: 100px;
margin-bottom: 0.5rem;
}
.c-testimony-widget.t-bg-none .c-testimony-widget__avatar img {
width: 100px;
height: 100px;
}
.c-testimony-widget.t-bg-none .c-testimony-widget__name {
font-size: max(16px, 0.9rem);
font-weight: 500;
line-height: 1.333;
margin-bottom: 0.25rem;
}
@media screen and (min-width: 1024px) {
.c-testimony-widget.t-bg-none .c-testimony-widget__name {
text-align: center;
}
}
.c-testimony-widget.t-bg-none .c-testimony-widget__position {
font-size: max(16px, 0.75rem);
font-weight: 300;
line-height: 1.6;
text-align: left;
}
@media screen and (min-width: 1024px) {
.c-testimony-widget.t-bg-none .c-testimony-widget__position {
text-align: center;
}
}
.c-testimony-widget {
/** BG Gray **/
}
.c-testimony-widget.t-bg-gray .c-testimony-widget__item {
color: #000;
padding: 1.5rem 2.5rem 0.5rem;
margin-bottom: 3rem;
}
@media screen and (min-width: 1024px) {
.c-testimony-widget.t-bg-gray .c-testimony-widget__item {
margin-bottom: 0rem;
}
}
.c-testimony-widget.t-bg-gray .c-testimony-widget__item:last-child {
margin-bottom: 0;
}
.c-testimony-widget.t-bg-gray .c-testimony-widget__item {
background: #F5F5F5;
}
.c-testimony-widget.t-bg-gray .c-testimony-widget__title {
font-family: "Roboto", sans-serif;
font-size: 24px;
font-weight: 500;
margin-bottom: 1.25rem;
}
.c-testimony-widget.t-bg-gray .c-testimony-widget__text {
margin-bottom: 1rem;
font-size: 1.1rem;
font-style: normal;
}
.c-testimony-widget.t-bg-gray .c-testimony-widget__text p {
font-weight: 300 !important;
line-height: 1.7 !important;
display: inline;
}
.c-testimony-widget.t-bg-gray .c-testimony-widget__text::before {
content: "";
display: inline-block;
background: no-repeat 0 0;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAyNyAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyLjQ5MTUgOS4yMjRMMjIuNjgzNSA5LjI4OEMyNS4xMTU1IDEwLjI0OCAyNi4yNjc1IDExLjc4NCAyNi4yNjc1IDEzLjg5NkMyNi4yNjc1IDE2LjUyIDI0LjE1NTUgMTguODI0IDIxLjcyMzUgMTguODI0QzE4LjcxNTUgMTguODI0IDE2LjQxMTUgMTUuODggMTYuNDExNSAxMi4xNjhDMTYuNDExNSA3Ljk0NCAxOC43MTU1IDMuNTI4IDIyLjIzNTUgMS4wMzJDMjIuODExNSAwLjY0Nzk5OSAyMy4yNTk1IDAuMzkxOTk4IDIzLjU3OTUgMC4zOTE5OThDMjMuOTYzNSAwLjM5MTk5OCAyNC4yMTk1IDAuNzExOTk4IDI0LjIxOTUgMS4wOTZDMjQuMjE5NSAxLjYwOCAyMy44OTk1IDIuMjQ4IDIyLjg3NTUgMy41MjhDMjEuNDY3NSA1LjMyIDIwLjg5MTUgNi41MzYgMjAuODkxNSA3LjU2QzIwLjg5MTUgOC4zMjggMjEuMjc1NSA4Ljc3NiAyMi40OTE1IDkuMjI0Wk01LjI3NTUgNy40OTZDNS4yNzU1IDguNDU2IDUuNzIzNSA4Ljk2OCA3LjM4NzUgOS43MzZDOS45NDc1IDEwLjk1MiAxMC43MTU1IDEyLjA0IDEwLjcxNTUgMTQuNDA4QzEwLjcxNTUgMTYuODQgOC42Njc1IDE4LjgyNCA2LjEwNzUgMTguODI0QzIuOTA3NSAxOC44MjQgMC43OTU1IDE2LjA3MiAwLjc5NTUgMTIuMTA0QzAuNzk1NSA4LjU4NCAyLjM5NTUgNC43NDQgNS4wODM1IDEuOTkyQzYuMDQzNSAwLjk2Nzk5OSA3LjAwMzUgMC4zOTE5OTggNy42NDM1IDAuMzkxOTk4QzguMTU1NSAwLjM5MTk5OCA4LjQ3NTUgMC42NDc5OTkgOC40NzU1IDEuMDk2QzguNDc1NSAxLjQxNiA4LjIxOTUgMS45MjggNy40NTE1IDIuODg4QzUuOTE1NSA0Ljc0NCA1LjI3NTUgNi4xNTIgNS4yNzU1IDcuNDk2WiIgZmlsbD0iIzI0NjMzNiIvPgo8L3N2Zz4K");
width: 27px;
height: 19px;
margin-right: 0.5rem;
}
.c-testimony-widget.t-bg-gray .c-testimony-widget__text::after {
content: "";
display: inline-block;
background: no-repeat 0 0;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNiAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuMDk5NSA5LjY3MkgzLjAzNTVDMS4zNzE1IDkuMDMyIDAuMjE5NSA3LjMwNCAwLjIxOTUgNS41MTJDMC4yMTk1IDIuNzYgMi4yNjc1IDAuNTg0IDQuNzYzNSAwLjU4NEM3LjgzNTUgMC41ODQgMTAuMDc1NSAzLjQ2NCAxMC4wNzU1IDcuNDk2QzEwLjA3NTUgMTAuNzYgOC40NzU1IDE0LjI4IDUuNzIzNSAxNy4wMzJDNC42MzU1IDE4LjE4NCAzLjQxOTUgMTkuMDE2IDIuOTA3NSAxOS4wMTZDMi40NTk1IDE5LjAxNiAyLjEzOTUgMTguNjMyIDIuMTM5NSAxOC4xMkMyLjEzOTUgMTcuNjA4IDIuMzk1NSAxNy4xNiAzLjI5MTUgMTYuMTM2QzQuNjk5NSAxNC40MDggNS40MDM1IDEzLjA2NCA1LjQwMzUgMTEuOTc2QzUuNDAzNSAxMC44MjQgNC44OTE1IDEwLjI0OCAzLjI5MTUgOS43MzZMMy4wOTk1IDkuNjcyWk0xOC43Nzk1IDkuNDhMMTguNzE1NSA5LjQxNkMxNi44NTk1IDguNzEyIDE1LjcwNzUgNy4xMTIgMTUuNzA3NSA1LjEyOEMxNS43MDc1IDIuNTA0IDE3LjYyNzUgMC41ODQgMjAuMTg3NSAwLjU4NEMyMy40NTE1IDAuNTg0IDI1LjY5MTUgMy40IDI1LjY5MTUgNy41NkMyNS42OTE1IDExLjkxMiAyMi42ODM1IDE3LjE2IDE5LjIyNzUgMTguODg4QzE5LjA5OTUgMTguOTUyIDE4LjkwNzUgMTkuMDE2IDE4Ljc3OTUgMTkuMDE2QzE4LjI2NzUgMTkuMDE2IDE3Ljk0NzUgMTguNjk2IDE3Ljk0NzUgMTguMTg0QzE3Ljk0NzUgMTcuODY0IDE4LjIwMzUgMTcuMzUyIDE4LjcxNTUgMTYuNzEyTDE4Ljk3MTUgMTYuMzkyQzIwLjQ0MzUgMTQuNiAyMS4xNDc1IDEzLjA2NCAyMS4xNDc1IDExLjg0OEMyMS4xNDc1IDEwLjY5NiAyMC41MDc1IDEwLjA1NiAxOC43Nzk1IDkuNDhaIiBmaWxsPSIjMjQ2MzM2Ii8+Cjwvc3ZnPgo=");
width: 27px;
height: 19px;
margin-left: 0.5rem;
}
.c-testimony-widget.t-bg-gray .c-testimony-widget__data {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.c-testimony-widget.t-bg-gray .c-testimony-widget__avatar {
width: 100px;
height: 100px;
margin-bottom: 0.5rem;
}
.c-testimony-widget.t-bg-gray .c-testimony-widget__avatar img {
width: 100px;
height: 100px;
}
.c-testimony-widget.t-bg-gray .c-testimony-widget__name {
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: 18px;
margin-bottom: 0.25rem;
}
.c-testimony-widget.t-bg-gray .c-testimony-widget__position {
font-size: 12px;
font-style: normal;
font-weight: 300;
line-height: 24px;
max-width: 270px;
text-align: center;
}
@media (max-width: 1200px) {
.c-executive-summary-widget .o-grid {
padding-inline: 3rem;
}
}
@media (max-width: 970px) {
.c-executive-summary-widget .o-grid {
padding-inline: 1rem;
}
}
.c-executive-summary-widget .o-grid--wide {
padding-inline: 0;
}
.c-executive-summary-widget__title-main {
font-family: "Roboto", sans-serif;
text-align: center;
font-size: max(16px, 1.2rem);
font-weight: 400;
}
@media (min-width: 770px) {
.c-executive-summary-widget__title-main {
font-size: 1.8rem;
font-weight: 300;
letter-spacing: 3.24px;
text-align: center;
}
}
.c-executive-summary-widget__content {
display: block;
position: relative;
}
.c-executive-summary-widget__block {
position: relative;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: no-wrap;
-ms-flex-wrap: no-wrap;
flex-wrap: no-wrap;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
@media (max-width: 770px) {
.c-executive-summary-widget__block {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c-executive-summary-widget__block-text {
width: 100%;
padding-right: 0;
}
.c-executive-summary-widget__block-media {
width: 100%;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
}
@media (min-width: 770px) {
.c-executive-summary-widget__block-media--right {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}
.c-executive-summary-widget__block-text {
-webkit-box-flex: 1;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding-inline: 1rem;
padding-block: 1.8rem 0.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
@media (min-width: 970px) {
.c-executive-summary-widget__block-text {
min-height: 600px;
padding-block: 4.8rem 3.5rem;
padding-inline: 4rem;
}
}
.c-executive-summary-widget__block-media {
-webkit-box-flex: 1;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-position: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 350px;
overflow: hidden;
overflow: clip;
padding: 1em;
position: relative;
}
.c-executive-summary-widget__block-media img {
border: none;
right: 0;
top: 0;
bottom: 0;
left: 0;
height: 100%;
margin: 0;
max-height: none;
max-width: none;
-o-object-fit: cover;
object-fit: cover;
outline: none;
padding: 0;
position: absolute;
width: 100%;
}
.c-executive-summary-widget__block-media img.block-media-small {
display: block;
}
@media (min-width: 970px) {
.c-executive-summary-widget__block-media img.block-media-small {
display: none;
}
}
.c-executive-summary-widget__block-media img.block-media-large {
display: none;
}
@media (min-width: 970px) {
.c-executive-summary-widget__block-media img.block-media-large {
display: block;
}
}
.c-executive-summary-widget__title {
font-family: "Roboto", sans-serif;
font-size: max(16px, 1.2rem);
font-weight: 500;
line-height: 1.4;
margin-bottom: 1rem;
}
@media (min-width: 970px) {
.c-executive-summary-widget__title {
margin-bottom: 1.5rem;
}
}
.c-executive-summary-widget__text {
font-weight: 300;
line-height: 1.6;
color: #000;
font-family: "Roboto", sans-serif;
font-size: max(16px, 0.9rem);
}
.c-impact-by-numbers-widget {
margin-bottom: 1rem;
}
@media (min-width: 880px) {
.c-impact-by-numbers-widget {
margin-bottom: 3rem;
}
}
.c-impact-by-numbers-widget.o-band {
padding: 0 0 5px;
}
.c-impact-by-numbers-widget .o-grid {
padding-inline: 1rem;
}
.c-impact-by-numbers-widget .o-grid--wide {
padding-inline: 0;
}
.c-impact-by-numbers-widget__row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background: #E9E8E0;
}
.c-impact-by-numbers-widget__header {
max-width: 880px;
padding-block: 1.5rem 1rem;
padding-inline: 2rem;
margin-inline: auto;
}
@media (min-width: 880px) {
.c-impact-by-numbers-widget__header {
padding-block: 3rem 1rem;
}
}
.c-impact-by-numbers-widget__title {
text-align: center;
font-family: "Roboto", sans-serif;
font-size: 1.2rem;
font-weight: 300;
line-height: 1.4;
letter-spacing: 3.6px;
}
@media screen and (min-width: 640px) {
.c-impact-by-numbers-widget__title {
font-size: 1.8rem;
}
}
.c-impact-by-numbers-widget__desc {
text-align: center;
font-size: max(16px, 0.9rem);
font-style: normal;
font-weight: 300;
line-height: 1.666;
}
.c-impact-by-numbers-widget__item {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 0;
}
@media (min-width: 770px) {
.c-impact-by-numbers-widget__item {
grid-template-columns: repeat(3, 1fr);
}
}
.c-impact-by-numbers-widget__block {
-webkit-box-flex: 1;
-webkit-flex: 1 0 33%;
-ms-flex: 1 0 33%;
flex: 1 0 33%;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-position: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 430px;
overflow: hidden;
overflow: clip;
padding: 1em;
position: relative;
}
.c-impact-by-numbers-widget__media img {
border: none;
right: 0;
top: 0;
bottom: 0;
left: 0;
height: 100%;
margin: 0;
max-height: none;
max-width: none;
-o-object-fit: cover;
object-fit: cover;
outline: none;
padding: 0;
position: absolute;
width: 100%;
}
.c-impact-by-numbers-widget__data {
position: relative;
z-index: 2;
}
.c-impact-by-numbers-widget__stats {
color: #FFF;
text-align: center;
font-family: "OldStyleMT-Regular", serif;
font-size: 3.2rem;
font-style: normal;
font-weight: 500;
line-height: 1;
}
.c-impact-by-numbers-widget__text {
color: #FFF;
text-align: center;
font-family: "Roboto", sans-serif;
font-size: max(16px, 1.2rem);
font-weight: 400;
line-height: 1.333;
}
.c-impact-by-numbers-widget__text p {
margin-bottom: 0;
}
/*
.c-impact-by-numbers--dark-green {
--bg-main: #246336;
--tx-main: #FFF;
--bg-sec: #E0E8E2;
--tx-sec: #264422;
}
.c-impact-by-numbers--green {
--bg-main: #A3AB8E;
--tx-main: #264422;
--bg-sec: #F1F2ED;
--tx-sec: #264422;
}
.c-impact-by-numbers--gray {
--bg-main: #E0E0E0;
--tx-main: #000;
--bg-sec: #F5F5F5;
--tx-sec: #000;
margin-bottom: 3rem;
}
.c-impact-by-numbers-widget__row {
display: flex;
flex-direction: column;
justify-content: center;
@media (min-width: $ibn-medium-mq) {
flex-direction: row;
}
}
.c-impact-by-numbers-widget__header {
background-color: var(--bg-main, #000);
padding-block: 3rem 1rem;
padding-inline: 2rem;
@media (min-width: $ibn-medium-mq) {
width: 25%;
}
}
.c-impact-by-numbers-widget__title {
color: var(--tx-main, black);
font-family: $f-sans;
font-size: 1.2rem;
font-weight: 600;
line-height: 1.25;
margin-bottom: 0;
}
.c-impact-by-numbers-widget__desc {
color: var(--tx-main, black);
font-size: 0.9rem;
font-weight: 400;
line-height: 1.55;
}
.c-impact-by-numbers-widget__item {
background-color: var(--bg-sec, #F5F5F5);
display: flex;
justify-content: stretch;
flex: 1 1 auto;
text-align: center;
padding-inline: 1.5rem;
flex-direction: column;
@media (min-width: $ibn-medium-mq) {
flex-direction: row;
padding-block: 1.5rem;
padding-inline: 0;
}
}
.c-impact-by-numbers-widget__block {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-inline: 1rem;
padding-block: 1rem;
&:not(:first-child) {
border-top: 1px dashed #264422;
}
@media (min-width: $ibn-medium-mq) {
width: 33%;
padding-block: 1rem;
&:not(:first-child) {
border-top: none;
border-left: 1px dashed #264422;
}
}
p {
margin-bottom: 0;
strong {
font-weight: 500;
}
}
}
.c-impact-by-numbers-widget__media {}
.c-impact-by-numbers-widget__stats {
color: var(--tx-sec, black);
text-align: center;
font-size: 3.2rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.64px;
margin-bottom: 0;
}
.c-impact-by-numbers-widget__subtitle {
color: var(--tx-sec, black);
text-align: center;
font-size: 1.2rem;
line-height: 1.33;
}
.c-impact-by-numbers-widget__text {
color: var(--tx-sec, black);
font-size: 1rem;
font-weight: 400;
line-height: 1;
}
*/
/* ==========================================================================
Thank You Page Styles
========================================================================== */
.c-donation-2025__thank-you .thank-you-container {
text-align: center;
}
.c-donation-2025__thank-you .thank-you-header {
margin: 0 auto 1rem;
}
.c-donation-2025__thank-you .thank-you-header .thank-you-title {
color: #FFF;
font-family: "OldStyleMT-Regular", serif;
font-size: 30px;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.48px;
margin-bottom: 1.5rem;
}
@media screen and (min-width: 1024px) {
.c-donation-2025__thank-you .thank-you-header .thank-you-title {
font-size: 48px;
}
}
.c-donation-2025__thank-you .thank-you-header p {
text-align: center;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.16px;
}
.c-donation-2025__thank-you .download-receipt-btn {
display: inline-block;
background-color: transparent;
border: 1px solid #fff;
color: #fff;
font-size: 1rem;
font-weight: 500;
padding: 0.75rem 1.5rem;
border-radius: 2rem;
text-decoration: none;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.c-donation-2025__thank-you .download-receipt-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.c-donation-2025__thank-you .impact-section {
margin-bottom: 4rem;
}
.c-donation-2025__thank-you .impact-section .impact-title {
font-family: "OldStyleMT-Regular", serif;
margin-bottom: 2.5rem;
color: #FFF;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.28px;
}
@media screen and (min-width: 640px) {
.c-donation-2025__thank-you .impact-section .impact-title {
font-size: 28px;
}
}
.c-donation-2025__thank-you .impact-stats {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
gap: 0;
}
@media screen and (min-width: 640px) {
.c-donation-2025__thank-you .impact-stats {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
}
.c-donation-2025__thank-you .impact-stat {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border-top: 1px solid rgba(255, 255, 255, 0.6);
padding-block: 0.75rem;
}
@media screen and (min-width: 640px) {
.c-donation-2025__thank-you .impact-stat {
border-top: none;
border-left: 1px solid rgba(255, 255, 255, 0.6);
padding-inline: 0.5rem;
padding-block: 0;
}
}
.c-donation-2025__thank-you .impact-stat:first-child {
border: none;
}
.c-donation-2025__thank-you .impact-stat .impact-icon {
height: 66px;
margin-bottom: 0.5rem;
}
.c-donation-2025__thank-you .impact-stat .impact-number {
font-family: "OldStyleMT-Regular", serif;
color: #DBDCD4;
font-size: 36px;
font-style: normal;
font-weight: 700;
line-height: 1;
letter-spacing: -0.36px;
margin-bottom: 0.25rem;
}
.c-donation-2025__thank-you .impact-stat .impact-title {
font-family: "Roboto", sans-serif;
color: #DBDCD4;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.28px;
text-transform: uppercase;
margin-bottom: 0.25rem;
}
.c-donation-2025__thank-you .impact-stat .impact-subtitle {
color: rgba(255, 255, 255, 0.6);
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.16px;
}
.c-donation-2025__thank-you .social-sharing .social-title {
font-family: "OldStyleMT-Regular", serif;
color: #FFF;
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.28px;
margin-bottom: 2rem;
}
@media screen and (min-width: 640px) {
.c-donation-2025__thank-you .social-sharing .social-title {
font-size: 28px;
}
}
.c-donation-2025__thank-you .social-buttons {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
gap: 0.5rem;
}
@media screen and (min-width: 640px) {
.c-donation-2025__thank-you .social-buttons {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
gap: 1rem;
}
}
.c-donation-2025__thank-you .social-btn {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
display: flex;
height: 55px;
padding: 10px 16px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 8px;
border: 1.5px solid rgba(255, 255, 255, 0.5);
color: #FFF;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 1.5;
letter-spacing: -0.16px;
}
.c-donation-2025__thank-you .social-btn svg {
width: 24px;
height: 24px;
fill: #fff;
}
.c-donation-2025__thank-you .social-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.c-donation-2025__thank-you .social-btn.facebook-btn:hover {
border-color: #1877F2;
}
.c-donation-2025__thank-you .social-btn.twitter-btn:hover, .c-donation-2025__thank-you .social-btn.share-x:hover {
border-color: #1DA1F2;
}
.c-donation-2025__thank-you .social-btn.linkedin-btn:hover {
border-color: #0077B5;
}
.c-donation-2025__thank-you .social-sharing-buttons__button {
margin: 0.25rem;
}
.c-donation-2025__thank-you .social-sharing-buttons__button svg use {
fill: #fff;
}
:root {
--sidebar-width: 100%;
}
@media screen and (min-width: 768px) {
:root {
--sidebar-width: calc(250px + 2rem);
}
}
@media screen and (min-width: 1024px) {
:root {
--sidebar-width: calc(300px + 5rem);
}
}
.c-contanct_grid__wrapper {
background: #EEEEEE;
}
.c-contact__grid > div {
background: #FFFFFF;
-webkit-box-shadow: 0px 0px 15.1px 5px rgba(0, 0, 0, 0.0392156863);
box-shadow: 0px 0px 15.1px 5px rgba(0, 0, 0, 0.0392156863);
border-radius: 18px;
border: none !important;
}
.c-contentwithsidebar {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 0;
padding-top: 1rem;
}
@media screen and (min-width: 768px) {
.c-contentwithsidebar {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
padding-top: 0;
}
}
@media screen and (min-width: 768px) {
.c-contentwithsidebar .o-grid {
padding: 0 2rem 0 1rem;
}
}
@media screen and (min-width: 1024px) {
.c-contentwithsidebar .o-grid {
padding: 0 5rem 0 1rem;
}
}
.c-contentwithsidebar .t-br-white .o-grid--narrow, .c-contentwithsidebar .t-br-white .c-cta-widget--embed form, .c-cta-widget--embed .c-contentwithsidebar .t-br-white form, .c-contentwithsidebar .t-br-white #block-newsroomandpeoplectablock .c-widget > .o-grid, #block-newsroomandpeoplectablock .c-contentwithsidebar .t-br-white .c-widget > .o-grid {
max-width: 64rem;
}
@media screen and (min-width: 1024px) {
.c-contentwithsidebar .t-br-white .o-grid--narrow, .c-contentwithsidebar .t-br-white .c-cta-widget--embed form, .c-cta-widget--embed .c-contentwithsidebar .t-br-white form, .c-contentwithsidebar .t-br-white #block-newsroomandpeoplectablock .c-widget > .o-grid, #block-newsroomandpeoplectablock .c-contentwithsidebar .t-br-white .c-widget > .o-grid {
padding: 0 5rem 0 1rem;
}
}
.c-contentwithsidebar__sidebar {
width: calc(100% - 4rem);
background: #FFFFFF;
border: 2px solid #D9D9D9;
border-radius: 11px;
z-index: 10;
margin-bottom: 1rem;
margin-inline: 2rem;
padding-block: 0.5rem;
min-width: auto;
max-width: none;
}
@media screen and (min-width: 768px) {
.c-contentwithsidebar__sidebar {
width: calc(var(--sidebar-width) - 5rem);
position: -webkit-sticky;
position: sticky;
top: 9rem;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
overflow-y: auto;
overflow-x: hidden;
margin-top: 6.75rem;
margin-inline: 2rem 0;
}
}
@media screen and (min-width: 1024px) {
.c-contentwithsidebar__sidebar {
margin-inline: 5rem 0;
}
}
.c-contentwithsidebar__sidebar ul {
padding: 0;
margin: 0;
list-style: none;
}
.c-contentwithsidebar__sidebar li {
margin: 0 1rem;
padding: 0.5rem 0;
border-bottom: 1px solid #D9D9D9;
}
.c-contentwithsidebar__sidebar li:last-child {
border-bottom: none;
}
.c-contentwithsidebar__sidebar li a {
color: #000;
-webkit-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.c-contentwithsidebar__sidebar li a:hover {
color: #333;
}
.c-contentwithsidebar__content {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media screen and (min-width: 768px) {
.c-contentwithsidebar .c-widget {
padding-left: var(--sidebar-width);
margin-left: calc(var(--sidebar-width) * -1);
}
}
.c-contact__section-title {
font-weight: 300;
font-size: 2rem;
line-height: 100%;
text-align: center;
margin-bottom: 1.75rem;
}
.c-contact__grid {
font-size: 0.9rem;
}
.c-contact__grid .c-contact__grid_first {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
}
.c-contact__grid .c-contact__grid_first address {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-style: normal;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background: #2EA1F1;
color: #fff;
margin-inline: -1.5rem;
height: 100%;
margin-bottom: -1.5rem;
padding: 1rem 1.5rem 1.5rem;
margin-top: 3rem;
}
.c-contact__grid .c-contact__grid_first address p {
line-height: 1.5rem;
margin-bottom: 0;
}
.c-contact__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
@media screen and (min-width: 0px) and (max-width: 1023px) {
.c-contact__grid {
grid-template-columns: 1fr;
}
}
.c-contact__grid > div {
border: 1px solid;
padding: 1rem 1.5rem;
}
.c-contact__grid > div dl {
margin-bottom: 1rem;
}
.c-contact__grid > div dl p {
margin-bottom: 0;
}
.c-contact__grid > div dl dd {
margin-bottom: 0.5rem;
}
/* ==========================================================================
#Trumps
========================================================================== */
/* Visibility classes
========================================================================== */
.t-hide {
display: none !important;
}
.t-show {
display: block !important;
}
/* Float classes
========================================================================== */
.t-left {
float: left !important;
}
.t-right {
float: right !important;
}
.t-flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
/* Text align classes
========================================================================== */
.t-text-left {
text-align: left !important;
}
.t-text-right {
text-align: right !important;
}
.t-text-center {
text-align: center !important;
}
@media screen and (min-width: 1024px) {
.t-text-center--large {
text-align: center !important;
}
}
/* Font family trumps
========================================================================== */
.t-sans {
font-family: "Roboto", sans-serif;
}
.t-serif {
font-family: "OldStyleMT-Regular", serif;
}
/* BG Colors
========================================================================== */
.t-bg-white {
background-color: #fff;
}
.t-bg-blue {
background-color: #0f324e;
}
.t-bg-sand {
background-color: #e8e8de;
}
.t-bg-concrete {
background-color: #f2f2f2;
}
/* Margin trumps
========================================================================== */
.t-mbr {
margin-right: 1.3rem;
}
.t-msr {
margin-right: 0.65rem;
}
.t-mbl {
margin-left: 1.3rem;
}
.t-msl {
margin-left: 0.65rem;
}
.t-mbb {
margin-bottom: 1.3rem;
}
.t-msb {
margin-bottom: 0.65rem;
}
.t-mbt {
margin-top: 1.3rem;
}
.t-mst {
margin-top: 0.65rem;
}
.t-nom {
margin: 0;
}
/* Padding trumps
========================================================================== */
.t-pbr {
padding-right: 1.3rem;
}
.t-psr {
padding-right: 0.65rem;
}
.t-pbl {
padding-left: 1.3rem;
}
.t-psl {
padding-left: 0.65rem;
}
.t-nop {
padding: 0;
}
.t-nopb {
padding-bottom: 0;
}
.t-bg-position__horizontal--left {
background-position-x: left !important;
}
.t-bg-position__horizontal--center {
background-position-x: center !important;
}
.t-bg-position__horizontal--right {
background-position-x: right !important;
}
.t-bg-position__vertical--top {
background-position-y: top !important;
}
.t-bg-position__vertical--center {
background-position-y: center !important;
}
.t-bg-position__vertical--bottom {
background-position-y: bottom !important;
}
.t-fixed-bg {
background-attachment: fixed;
}
@media screen and (min-width: 0) and (max-width: 1023px) and (hover: none) {
.t-fixed-bg {
/* custom css for devices where the primary input mechanism cannot hover
at all or cannot conveniently hover */
background-attachment: scroll;
}
}
@media screen and (min-width: 1024px) {
.t-with-header {
margin-top: 140px;
}
}
.t-flex-list-partners {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
list-style: none;
margin-bottom: 1rem;
}
.t-flex-list-partners li {
flex-basis: 48%;
-webkit-flex-basis: 48%;
-spec-flex-basis: 48%;
flex-basis: 48%;
-ms-flex-preferred-size: 48%;
-webkit-flex-basis: 48%;
padding: 1rem;
text-align: center;
}
@media screen and (min-width: 640px) {
.t-flex-list-partners li {
flex-basis: 32%;
-webkit-flex-basis: 32%;
-spec-flex-basis: 32%;
flex-basis: 32%;
-ms-flex-preferred-size: 32%;
-webkit-flex-basis: 32%;
}
}
@media screen and (min-width: 1024px) {
.t-flex-list-partners li {
flex-basis: 24%;
-webkit-flex-basis: 24%;
-spec-flex-basis: 24%;
flex-basis: 24%;
-ms-flex-preferred-size: 24%;
-webkit-flex-basis: 24%;
}
}
.t-flex-list-partners .slick-arrow::before {
border-color: #0c0c0c;
opacity: 0.3;
}
.t-alpha-mask--dark {
background-color: rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.t-alpha-mask--dark {
position: relative;
top: -90px;
padding-top: 90px;
}
}
.t-alpha-mask-top--dark {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.9)), color-stop(50%, rgba(0, 0, 0, 0)));
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 50%);
}
.t-alpha-mask-top--dark .o-grid {
padding-top: 10rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.t-alpha-mask-top--dark .o-grid {
padding-top: 9rem;
}
}
@media screen and (min-width: 640px) and (max-width: 1199.98px) {
.t-alpha-mask-top--dark .o-grid {
padding-top: 8rem;
}
}
@media screen and (min-width: 1200px) {
.t-alpha-mask-top--dark .o-grid {
padding-top: 8rem;
}
}
.t-add-comma::after {
display: inline-block;
content: ",";
padding: 0 5px 0 0;
}
.t-add-comma:last-child::after {
display: none;
}
.t-text-images--flush.c-default-text .c-widget__image--right {
margin-right: 0;
max-width: 380px;
}
.t-text-images--flush.c-default-text .c-widget__image--left {
margin-left: 0;
max-width: 380px;
}
.t-newsroom .ajax_results ul li {
margin-bottom: 40px;
}
/* Anchor fix - adds offset space above anchored elements to account for fixed headers
Only applies when element has an id attribute
Uses responsive offset: 91px on small screens, 85px on all other screens
Automatically adjusts height based on band padding class
*/
.t-anchor-fix[id]::before {
content: "";
display: block;
height: calc(85px + 3rem);
position: relative;
width: 1px;
margin: -85px 0 0;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.t-anchor-fix[id]::before {
height: calc(91px + 2rem);
margin: -91px 0 0;
}
}
.t-anchor-fix[id]::before {
/* Adjust for o-band--small (2rem top padding) */
}
.t-anchor-fix[id]::before.o-band--small::before {
height: calc(85px + 2rem);
}
@media screen and (min-width: 0) and (max-width: 639px) {
.t-anchor-fix[id]::before.o-band--small::before {
height: calc(91px + 2rem);
}
}
.t-anchor-fix[id]::before {
/* Adjust for o-band--flush (no top padding) */
}
.t-anchor-fix[id]::before.o-band--flush::before {
height: 85px;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.t-anchor-fix[id]::before.o-band--flush::before {
height: 91px;
}
}
/* Style-guide trumps
========================================================================== */
.wf {
background: #ccc;
}
/* ==========================================================================
#States - Classes added with the .is- naming convention
========================================================================== */
.is-shifted {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
width: 100%;
-webkit-transition: all 0.5s cubic-bezier(0.33, 0.02, 0.46, 0.01);
transition: all 0.5s cubic-bezier(0.33, 0.02, 0.46, 0.01);
}
@media screen and (min-width: 1024px) {
.is-shifted {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.annual_reports__container {
background-color: white !important;
color: black !important;
}
.featured-item {
-webkit-border-after: 1px solid rgba(0, 0, 0, 0.52);
border-block-end: 1px solid rgba(0, 0, 0, 0.52);
margin-block: 2rem;
-webkit-padding-after: 2rem;
padding-block-end: 2rem;
}
.featured-item .layout__region {
display: grid;
gap: 64px;
grid-template-columns: 1fr;
min-height: 20rem;
}
@media (min-width: 1000px) {
.featured-item .layout__region {
grid-template-columns: 236px 1fr;
}
}
.featured-item .field--name-node-title a {
color: currentColor;
}
.featured-item .field--name-field-teaser-image img {
-o-object-position: center;
object-position: center;
width: 100%;
}
.featured-item .resource__button-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
font-weight: 500;
gap: 0.25rem;
}
@media screen and (min-width: 1000px) {
.featured-item .resource__button-wrapper {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
gap: 1rem;
}
}
.featured-item .resource__button-wrapper .file-button, .featured-item .resource__button-wrapper .c-btn, .featured-item .resource__button-wrapper .c-cta-widget--embed .js-cm-submit-button, .c-cta-widget--embed .featured-item .resource__button-wrapper .js-cm-submit-button,
.featured-item .resource__button-wrapper .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .featured-item .resource__button-wrapper button[type=submit] {
font-size: 0.8rem;
-webkit-margin-after: 0.25rem;
margin-block-end: 0.25rem;
padding-block: 0.75rem;
text-align: center;
}
.featured-item:not(.has-summary) .resource__button-wrapper > .c-btn--transdark {
display: none;
}
.details__container {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.details__container h2 {
font-size: 1.6rem;
font-weight: 400;
margin: 0px;
}
.details__container .field--name-field-subtitle {
font-size: 1rem;
font-weight: 300;
-webkit-margin-before: 0.5rem;
margin-block-start: 0.5rem;
}
.details__container .field--name-field-summary {
margin-block: 1rem;
}
.details__container .field--name-field-summary p {
font-size: max(16px, 0.9rem);
font-weight: 300;
line-height: 1.6;
}
.reports__list {
display: grid;
gap: 3rem 2rem;
grid-template-columns: 1fr;
list-style: none;
padding: 0;
}
@media (min-width: 768px) {
.reports__list {
grid-template-columns: 1fr 1fr;
}
}
.reports__list .report {
background: #F5F5F5;
border-radius: 0.4rem;
display: grid;
gap: 1rem;
grid-template-columns: clamp(113px, 10vw, 5.5rem) 1fr;
padding: 1rem;
}
.reports__list .report__image {
aspect-ratio: 113/158;
width: 113px;
}
.reports__list .report__image div {
height: 100%;
width: 100%;
}
.reports__list .report__image img {
max-width: 100%;
-o-object-position: center;
object-position: center;
}
.reports__list .report__meta {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.reports__list .report__title {
color: #000000;
font-family: "Roboto", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 0 0 0.5rem;
}
.reports__list .report__title a {
color: currentColor;
}
.reports__list .report__subtitle {
font-size: 0.8rem;
font-weight: 300;
line-height: 1;
margin: 0;
}
.reports__list .report__links {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
gap: 0.5rem;
-webkit-margin-before: 1rem;
margin-block-start: 1rem;
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
}
.reports__list .report__links .file-button, .reports__list .report__links .c-btn, .reports__list .report__links .c-cta-widget--embed .js-cm-submit-button, .c-cta-widget--embed .reports__list .report__links .js-cm-submit-button,
.reports__list .report__links .c-cta-widget--embed button[type=submit],
.c-cta-widget--embed .reports__list .report__links button[type=submit] {
font-size: 0.7rem;
font-weight: 500;
text-align: center;
-webkit-margin-after: 0;
margin-block-end: 0;
padding-block: 0.5rem;
}
.flex {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
/* Drupal tabs
========================================================================== */
.g-drupal-tabs {
position: fixed;
bottom: 0;
right: 0;
background: #efefef;
z-index: 100;
border: 1px solid #ddd;
margin: 0;
padding: 0.5rem;
border-top-left-radius: 8px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.g-drupal-tabs a {
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
background: #fff;
font-size: 0.75rem;
display: block;
padding: 0.35rem 0.55rem;
border-radius: 3px;
}
.g-drupal-tabs a:link, .g-drupal-tabs a:visited {
color: #373737;
}
.g-drupal-tabs a:hover {
background: rgba(255, 255, 255, 0.8);
}
.node__content p,
.c-widget p {
font-weight: 400;
}
.c-default-text ul li,
ul.t-small-bullets li {
font-weight: 400;
margin-left: -3px;
padding-left: 3px;
list-style: none;
}
.c-default-text ul li::before,
ul.t-small-bullets li::before {
background-image: url("../../img/svg/SVG_list.svg");
display: block;
height: 5px;
width: 5px;
position: relative;
content: "";
left: -20px;
top: 16px;
}
ul.bg-lg-3, ul.c-newsroom--items {
display: flow-root;
}
/* weird remnant code in app.scss */
.c-parksi-widget__mobile-select-container {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 100vw;
}
.c-parksi-widget__mobile-select-container .c-parksi-widget_mobile-select {
width: 400px;
z-index: 100;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-parksi-widget__mobile-select-container {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
z-index: 1;
width: 100%;
gap: 12px;
}
.c-parksi-widget__mobile-select-container h4 {
margin-bottom: 0;
margin-top: 2rem;
color: white;
}
.c-parksi-widget__mobile-select-container .c-parksi-widget_mobile-select {
width: 40vw;
/* If chosen starts working for this input again, we can remove the styles below this line */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
padding: 6px 20px;
font-size: 1rem;
background: #fff;
color: #0c0c0c;
}
.c-parksi-widget__mobile-select-container .c-parksi-widget_mobile-select .chosen-drop {
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
.c-parksi-widget__mobile-select-container .c-parksi-widget_mobile-select .chosen-single div b {
background-image: none !important;
}
.c-parksi-widget__mobile-select-container .c-parksi-widget__fixedtext {
margin-top: 6rem;
}
}
@media screen and (max-width: 639px) {
.c-parksi-widget__footer {
display: none;
}
.c-parksi-widget_mobile-select {
width: calc(100% - 40px) !important;
}
.c-parksi-widget__body .o-grid--wide {
height: 90vh;
}
.c-parksi-widget__box {
top: 1rem;
}
.c-parksi-widget__box p {
font-size: 0.9rem;
}
.dot-mobile {
left: -6px !important;
/* Matches the 6 rem above */
top: -6rem !important;
}
}
/*# sourceMappingURL=maps/app.css.map */
