@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");
}
@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
========================================================================== */
/* ==========================================================================
Misc
========================================================================== */
/* ==========================================================================
Spacing
========================================================================== */
/* ==========================================================================
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;
}
}
@media screen and (min-width: 0) and (max-width: 1023px) {
body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
margin-left: 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 {
outline: none;
position: relative;
}
.contextual-region::after {
content: "";
display: table;
clear: both;
}
.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,
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-x: hidden;
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;
}
}
/* ==========================================================================
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 {
border: 2px solid #383838;
padding: 0.85rem 1.7rem;
border-radius: 8px;
font-size: 0.85rem;
max-width: 100%;
}
[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 {
-webkit-box-shadow: none;
box-shadow: none;
outline: 0;
}
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%;
}
/*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 {
margin-bottom: 1.3rem;
max-width: 100%;
width: auto;
}
.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;
}
/* ==========================================================================
#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: #0d8be3;
}
a:active {
-webkit-transition: color 0.3s;
transition: color 0.3s;
color: #0d8be3;
}
/* ==========================================================================
#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 #a6a6a6;
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--flush, .o-band--small, .o-band {
position: relative;
}
.o-band--flush::after, .o-band--small::after, .o-band::after {
content: "";
display: table;
clear: both;
}
.o-band {
padding: 3rem 0;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.o-band {
padding: 1.25rem 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;
}
/* ==========================================================================
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 ?
Join | `c-btn c-btn--small`
Default button | `c-btn c-btn--default`
Medium button | `c-btn c-btn--medium`
Large button | `c-btn c-btn--large`
*/
/* Dynamic button mixin
========================================================================== */
/*doc
---
title: Button styles
name: button-sizesb
category: Components - Button
---
Any of the following buttons styles can be paired with the button size classes above.
Button | Modifier Class
--------|-----------------------------------------
Join Us | `c-btn c-btn--primary`
Learn More
| `c-btn c-btn--trans`
Donate | `c-btn c-btn--secondary`
View All | `c-btn c-btn--transdark`
*/
/* Static button styles
========================================================================== */
.c-btn,
input[type=submit] {
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
background-color: #30a3f3;
border: 0;
border-radius: 8px;
color: #fff;
display: inline-block;
font-family: "Roboto", sans-serif;
font-size: 0.85rem;
line-height: 1;
padding: 0.85rem 1.7rem;
-webkit-font-smoothing: antialiased;
}
.c-btn:link, .c-btn:visited,
input[type=submit]:link,
input[type=submit]:visited {
color: #fff;
}
.c-btn:hover,
input[type=submit]:hover {
background-color: #0d8be3;
cursor: pointer;
}
.c-btn:focus,
input[type=submit]:focus {
background-color: #0c7ccb;
}
.c-btn--small {
font-size: 0.7rem;
}
.c-btn--default {
font-size: 0.85rem;
}
.c-btn--medium {
font-size: 1rem;
}
.c-btn--large, input[type=submit].c-btn--large {
font-size: 1.3rem;
}
.c-btn--primary {
background-color: #30a3f3;
color: #fff;
}
.c-btn--primary:hover {
background-color: #0d8be3;
}
.c-btn--primary:link, .c-btn--primary:visited {
color: #fff;
}
.c-btn--primary:focus {
background-color: #0c7ccb;
}
.c-btn--trans {
background-color: transparent;
border: 3px solid #fff;
color: #fff;
}
.c-btn--trans:hover {
background-color: rgba(0, 0, 0, 0);
}
.c-btn--trans:link, .c-btn--trans:visited {
color: #fff;
}
.c-btn--trans:focus {
background-color: rgba(0, 0, 0, 0);
}
.c-btn--transdark {
background-color: transparent;
border: 2px solid #373737;
color: #373737;
}
.c-btn--transdark:hover {
background-color: rgba(0, 0, 0, 0);
}
.c-btn--transdark:link, .c-btn--transdark:visited {
color: #373737;
}
.c-btn--transdark:focus {
background-color: rgba(0, 0, 0, 0);
}
.c-btn--secondary, .c-btn--override-secondary .c-cta-widget__input .c-btn, input[type=submit].c-btn--secondary {
background-color: #7bcf1f;
color: #fff;
}
.c-btn--secondary:hover, .c-btn--override-secondary .c-cta-widget__input .c-btn:hover, input[type=submit].c-btn--secondary:hover {
background-color: #61a318;
}
.c-btn--secondary:link, .c-btn--override-secondary .c-cta-widget__input .c-btn:link, input[type=submit].c-btn--secondary:link, .c-btn--secondary:visited, .c-btn--override-secondary .c-cta-widget__input .c-btn:visited, input[type=submit].c-btn--secondary:visited {
color: #fff;
}
.c-btn--secondary:focus, .c-btn--override-secondary .c-cta-widget__input .c-btn:focus, input[type=submit].c-btn--secondary:focus {
background-color: #538c15;
}
.c-btn--small {
padding: 0.5rem 1rem;
border-radius: 3px;
}
.c-btn--trans:hover {
background: rgba(255, 255, 255, 0.25);
}
.c-btn--transdark:hover {
background: rgba(115, 115, 115, 0.25);
}
/*this style is for search glass buttons
you may need to position them depending on the form this styling assumes inline*/
.c-btn--search-icon, .c-search__page .block-system-main-block .search-page-form input[type=submit] {
background: url("../../processed/svg/magnifying_glass_k.svg") center center no-repeat transparent;
margin: 0;
text-indent: -9999px;
position: relative;
left: -3.5rem;
}
.c-chosen {
text-align: center;
}
.c-chosen select {
font-size: 1rem;
padding-right: 20px;
}
.c-chosen .filter_search_form {
display: inline;
color: #373737;
}
.c-chosen .chosen-container-single .chosen-single div b {
border-color: #373737;
}
.t-bg-blue .c-chosen .chosen-container-single .chosen-single div b {
border-color: #fff;
}
/* @group Base */
.chosen-container {
text-align: left;
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 0.8rem;
font-weight: 300;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* @group Results */
/* @end */
}
.chosen-container * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.chosen-container .chosen-drop {
position: absolute;
top: 100%;
z-index: 1010;
width: 100%;
background: rgba(255, 255, 255, 0.9);
clip: rect(0, 0, 0, 0);
}
.chosen-container.chosen-with-drop .chosen-drop {
clip: auto;
}
.chosen-container a {
cursor: pointer;
}
.chosen-container .search-choice .group-name,
.chosen-container .chosen-single .group-name {
margin-right: 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: normal;
color: #373737;
}
.chosen-container .search-choice .group-name::after,
.chosen-container .chosen-single .group-name::after {
content: ":";
padding-left: 2px;
vertical-align: top;
}
.chosen-container .chosen-results {
color: #444;
position: relative;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
max-height: 240px;
-webkit-overflow-scrolling: touch;
}
.chosen-container .chosen-results li {
display: none;
margin: 0;
padding: 10px;
list-style: none;
line-height: 15px;
word-wrap: break-word;
-webkit-touch-callout: none;
}
.chosen-container .chosen-results li.active-result {
display: list-item;
cursor: pointer;
}
.chosen-container .chosen-results li.disabled-result {
display: list-item;
color: #ccc;
cursor: default;
}
.chosen-container .chosen-results li.highlighted {
background-color: #9b9b9b;
color: #fff;
}
.chosen-container .chosen-results li.no-results {
color: #777;
display: list-item;
background: #f4f4f4;
}
.chosen-container .chosen-results li.group-result {
display: list-item;
font-weight: bold;
cursor: default;
}
.chosen-container .chosen-results li.group-option {
padding-left: 15px;
}
.chosen-container .chosen-results li em {
font-style: normal;
text-decoration: underline;
}
/* @end */
/* @group Single Chosen */
.chosen-container-single .chosen-single {
position: relative;
display: block;
overflow: hidden;
padding: 0 0 0 8px;
height: 39px;
color: inherit;
text-decoration: none;
white-space: nowrap;
line-height: 39px;
}
.chosen-container-single .chosen-single span {
display: block;
overflow: hidden;
font-size: 1rem;
margin-right: 39px;
text-overflow: ellipsis;
white-space: nowrap;
}
.chosen-container-single .chosen-single abbr {
position: absolute;
top: 6px;
right: 26px;
display: block;
width: 12px;
height: 12px;
background: url("../../img/chosen-sprite.png") -42px 1px no-repeat;
font-size: 1px;
}
.chosen-container-single .chosen-single abbr:hover {
background-position: -42px -10px;
}
.chosen-container-single .chosen-single div {
position: absolute;
top: 0;
right: 0;
display: block;
width: 39px;
height: 100%;
}
.chosen-container-single .chosen-single div b {
display: block;
position: absolute;
top: 50%;
right: 50%;
width: 10px;
height: 10px;
margin: -5px -5px 0 0;
border-width: 0 1px 1px 0;
border-style: solid;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.chosen-container-single .chosen-default {
color: #999;
}
.chosen-container-single .chosen-single-with-deselect span {
margin-right: 38px;
}
.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
background-position: -42px -10px;
}
.chosen-container-single .chosen-search {
position: relative;
z-index: 1010;
margin: 0;
padding: 3px 4px;
white-space: nowrap;
}
.chosen-container-single .chosen-search input[type=text] {
margin: 1px 0;
padding: 4px 20px 4px 5px;
width: 100%;
height: auto;
outline: 0;
border: 1px solid #aaa;
background: url("../../img/chosen-sprite.png") no-repeat 100% -20px;
font-size: 1em;
font-family: sans-serif;
line-height: normal;
border-radius: 0;
}
.chosen-container-single .chosen-drop {
margin-top: -1px;
background-clip: padding-box;
}
.chosen-container-single.chosen-container-single-nosearch .chosen-search {
position: absolute;
clip: rect(0, 0, 0, 0);
}
/* @end */
/* @group Multi Chosen */
.chosen-container-multi .chosen-choices {
position: relative;
overflow: hidden;
margin: 0;
padding: 0 5px;
width: 100%;
height: auto;
border: 1px solid #aaa;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #eee), color-stop(15%, #fff));
background-image: linear-gradient(#eee 1%, #fff 15%);
cursor: text;
}
.chosen-container-multi .chosen-choices li {
float: left;
list-style: none;
}
.chosen-container-multi .chosen-choices li.search-field {
margin: 0;
padding: 0;
white-space: nowrap;
}
.chosen-container-multi .chosen-choices li.search-field input[type=text] {
margin: 1px 0;
padding: 0;
height: 25px;
outline: 0;
border: 0 !important;
background: transparent !important;
-webkit-box-shadow: none;
box-shadow: none;
color: #999;
font-size: 100%;
font-family: sans-serif;
line-height: normal;
border-radius: 0;
width: 25px;
}
.chosen-container-multi .chosen-choices li.search-choice {
position: relative;
margin: 3px 5px 3px 0;
padding: 3px 20px 3px 5px;
border: 1px solid #aaa;
max-width: 100%;
border-radius: 3px;
background-color: #eee;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), to(#eee));
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-size: 100% 19px;
background-repeat: repeat-x;
background-clip: padding-box;
-webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
color: #333;
line-height: 13px;
cursor: default;
}
.chosen-container-multi .chosen-choices li.search-choice span {
word-wrap: break-word;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
position: absolute;
top: 4px;
right: 3px;
display: block;
width: 12px;
height: 12px;
background: url("../../img/chosen-sprite.png") -42px 1px no-repeat;
font-size: 1px;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
background-position: -42px -10px;
}
.chosen-container-multi .chosen-choices li.search-choice-disabled {
padding-right: 5px;
border: 1px solid #ccc;
background-color: #e4e4e4;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), to(#eee));
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
color: #666;
}
.chosen-container-multi .chosen-choices li.search-choice-focus {
background: #d4d4d4;
}
.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
background-position: -42px -10px;
}
.chosen-container-multi .chosen-results {
margin: 0;
padding: 0;
}
.chosen-container-multi .chosen-drop .result-selected {
display: list-item;
color: #ccc;
cursor: default;
}
/* @end */
/* @group Active */
.chosen-container-active {
/*.chosen-single {
}*/
}
.chosen-container-active.chosen-with-drop .chosen-single {
background-color: rgba(255, 255, 255, 0.3);
}
.chosen-container-active.chosen-with-drop .chosen-single div {
border-left: 0;
background: transparent;
}
.chosen-container-active.chosen-with-drop .chosen-single div b {
background-position: -18px 2px;
}
.chosen-container-active .chosen-choices {
border: 1px solid #5897fb;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active .chosen-choices li.search-field input[type=text] {
color: #222 !important;
}
/* @end */
/* @group Disabled Support */
.chosen-disabled {
opacity: 0.5 !important;
cursor: default;
}
.chosen-disabled .chosen-single {
cursor: default;
}
.chosen-disabled .chosen-choices .search-choice .search-choice-close {
cursor: default;
}
/* @end */
/* @group Right to Left */
.chosen-rtl {
text-align: right;
}
.chosen-rtl .chosen-single {
overflow: visible;
padding: 0 8px 0 0;
}
.chosen-rtl .chosen-single div {
right: auto;
left: 3px;
}
.chosen-rtl .chosen-single abbr {
right: auto;
left: 26px;
}
.chosen-rtl .chosen-single span {
margin-right: 0;
margin-left: 26px;
direction: rtl;
}
.chosen-rtl .chosen-single-with-deselect span {
margin-left: 38px;
}
.chosen-rtl .chosen-choices li {
float: right;
}
.chosen-rtl .chosen-choices li.search-field input[type=text] {
direction: rtl;
}
.chosen-rtl .chosen-choices li.search-choice {
margin: 3px 5px 3px 0;
padding: 3px 5px 3px 19px;
}
.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
right: auto;
left: 4px;
}
.chosen-rtl.chosen-container-single .chosen-results {
margin: 0 0 4px 4px;
padding: 0 4px 0 0;
}
.chosen-rtl.chosen-container-single .chosen-single div b {
background-position: 6px 2px;
}
.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
background-position: -12px 2px;
}
.chosen-rtl .chosen-results li.group-option {
padding-right: 15px;
padding-left: 0;
}
.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
border-right: 0;
}
.chosen-rtl .chosen-search input[type=text] {
padding: 4px 5px 4px 20px;
background: url("../../img/chosen-sprite.png") no-repeat -30px -20px;
direction: rtl;
}
/* @end */
/* @group Retina compatibility */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
.chosen-rtl .chosen-search input[type=text],
.chosen-container-single .chosen-single abbr,
.chosen-container-single .chosen-single div b,
.chosen-container-single .chosen-search input[type=text],
.chosen-container-multi .chosen-choices .search-choice .search-choice-close,
.chosen-container .chosen-results-scroll-down span,
.chosen-container .chosen-results-scroll-up span {
background-image: url("../../img/chosen-sprite@2x.png") !important;
background-size: 52px 37px !important;
background-repeat: no-repeat !important;
}
}
/* @end */
.c-pseudo-chosen {
padding-left: 0;
}
.c-pseudo-chosen > li {
display: inline-block;
margin-right: 0;
}
@media screen and (min-width: 0) and (max-width: 480px) {
.c-pseudo-chosen > li {
display: block;
}
}
.c-pseudo-chosen > li.has-dropdown {
padding-right: 1.5rem;
}
.c-pseudo-chosen > li.has-dropdown > a {
padding-right: 0;
padding-left: 0.5rem;
padding-bottom: 1px;
position: relative;
bottom: -1px;
background: #fff;
border: 1px solid #dddddd;
border-width: 1px 1px 0;
border-color: transparent;
z-index: 4;
}
.c-pseudo-chosen > li.has-dropdown:hover > a {
border-color: #dddddd;
}
.c-pseudo-chosen > li.has-dropdown > a::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;
left: 1.2rem;
position: relative;
top: -0.3em;
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-pseudo-chosen > li > ul {
display: none;
position: absolute;
background-color: #fff;
padding: 0.5rem 0;
margin: 0 1rem 0 0;
text-align: left;
z-index: 3;
border: 1px solid #dddddd;
}
.c-pseudo-chosen > li > ul li {
list-style: none;
padding: 0;
}
.c-pseudo-chosen > li > ul li a {
min-width: 235px;
}
.c-pseudo-chosen > li > ul li a:hover {
background: rgba(55, 55, 55, 0.25);
}
.c-pseudo-chosen > li:hover > ul {
display: block;
}
.c-pseudo-chosen a {
color: #373737;
display: block;
padding: 0.25rem 1.5rem 0.25rem 1rem;
}
.c-pseudo-chosen > li:nth-child(1) a {
z-index: 10;
}
.c-pseudo-chosen > li:nth-child(1) ul {
z-index: 9;
}
.c-pseudo-chosen > li:nth-child(2) a {
z-index: 8;
}
.c-pseudo-chosen > li:nth-child(2) ul {
z-index: 7;
}
/* ==========================================================================
CTA Nav
========================================================================== */
.c-cta-nav {
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;
padding: 0;
margin: 0;
list-style: none;
font-size: 2rem;
margin-bottom: 1.7rem;
}
@media screen and (min-width: 1150px) {
.c-cta-nav {
font-size: 2.25rem;
}
}
.c-cta-nav__item {
-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;
margin: 0 0.05rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
@media screen and (min-width: 1150px) {
.c-cta-nav__item {
margin: 0 0.15rem;
}
}
.c-cta-nav [class^=c-icon] {
-webkit-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
}
.c-cta-nav [class^=c-icon]:hover {
opacity: 0.7;
}
.c-cta-nav .c-btn {
margin-left: 1rem;
margin-bottom: 0;
}
@media screen and (min-width: 1150px) {
.c-cta-nav .c-btn {
margin-left: 1.5rem;
}
}
.c-cta-nav--copyright {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
margin-bottom: 1rem;
margin-top: 1.25rem;
opacity: 0.89;
max-width: 256px;
margin-right: auto;
margin-left: auto;
line-height: 15px;
}
.c-cta-nav--copyright a {
color: #fff;
}
.c-cta-nav--copyright .c-cta-nav__item {
color: #fff;
font-size: 11px;
margin: 0;
display: inline-block;
}
.c-cta-nav--copyright .c-cta-nav__item:after {
content: " |";
}
.c-cta-nav--copyright .c-cta-nav__item:last-child:after {
content: "";
}
.c-cta-nav--copyright .c-cta-nav__item a:link,
.c-cta-nav--copyright .c-cta-nav__item a:visited {
-webkit-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
color: #fff;
}
.c-cta-nav--copyright .c-cta-nav__item a:hover {
opacity: 0.7;
}
.c-cta-nav--copyright .c-cta-nav__item .optanon-show-settings-popup-wrapper .optanon-show-settings-middle a.optanon-show-settings {
font-size: 11px;
}
/* ==========================================================================
#Facts widgets component
========================================================================== */
/*doc
---
title: Facts widgets
name: facts-widgets
category: Components - Facts widgets
---
This is the facts widgets component which has multiple variations. Take a look at the `` section to see a full example.
```html_example
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: #0d2b43;
}
.c-faq-widget__term.open {
background-color: #0b2439;
}
.c-faq-widget__term.open:hover {
background-color: #0a2234;
}
.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;
}
}
.c-featured-text__credit {
font-size: 13px;
position: absolute;
bottom: 1rem;
left: 3rem;
color: #fff;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-featured-text__credit {
bottom: 3rem;
}
}
.c-featured-text__credit-top-right {
font-size: 13px;
position: absolute;
top: 1rem;
right: 3rem;
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__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--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;
}
.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;
min-height: 450px;
}
@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;
}
}
@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;
min-height: 450px;
}
@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;
}
}
@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;
min-height: 450px;
}
@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;
}
}
@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;
min-height: 450px;
}
@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;
}
}
@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: 100vh;
min-height: 450px;
}
/* ==========================================================================
#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 {
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.85rem;
}
.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;
}
@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-size: 3.2rem;
font-weight: 500;
margin-bottom: 1rem;
line-height: 1;
}
@media screen and (min-width: 1024px) {
.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: 1024px) {
.c-page-head__headline--medium {
font-size: 2.8rem;
line-height: 3rem;
}
}
.c-page-head__body {
font-size: 1.5rem;
font-family: "OldStyleMT-Regular", serif;
font-weight: 500;
margin-bottom: 2rem;
}
@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;
}
}
@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 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: block;
}
}
.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;
}
}
@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.is-active .c-btn {
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: 115px;
height: 115px;
background-size: 115px 115px;
}
}
.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 .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);
/* 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__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-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);
}
.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_map4.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;
}
@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;
font-size: 30px;
color: #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
@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;
}
}
@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 {
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;
margin-bottom: 5vh;
font-weight: 300;
text-align: center;
font-size: 1.35rem;
}
@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;
}
}
@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;
}
}
@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;
}
}
.c-snav__item {
background: none;
}
@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.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 10% 2rem;
background: #373737;
height: auto !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-bottom: 0.75rem;
}
}
@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: 1.25rem;
margin-left: 1rem;
}
}
@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: 2rem;
}
}
@media screen and (min-width: 1400px) {
.c-primary-nav__item {
margin-right: 2.9rem;
}
}
@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;
}
}
.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: 50vh;
}
}
.c-drop-nav__wrap.is-expanded {
display: block;
opacity: 1;
visibility: visible;
}
.c-drop-nav {
margin-bottom: 0;
/* the lowest dropdowns */
}
.c-drop-nav .c-drop-nav__item:last-child a {
border-bottom: 0;
}
.c-drop-nav__section a {
padding: 0.5rem 0;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-drop-nav__section a {
font-weight: 500;
font-size: 1.2rem;
text-transform: uppercase;
padding: 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 {
opacity: 0.7;
}
}
@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;
}
}
@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;
}
}
.c-drop-nav__item--has-children ul a {
padding: 0 0 0 0.75rem;
border: 0;
line-height: 1.2;
position: relative;
}
.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 {
font-size: 1.7rem;
font-weight: 700;
display: inline-block;
margin-bottom: 0.5rem;
margin-left: -1.15rem;
}
.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;
}
@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 {
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;
}
.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;
}
@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 1rem;
padding: 0.5rem 1.5rem 0.5rem 1rem;
clear: both;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.is-active .c-featured-text__credit {
display: none;
}
}
/* ==========================================================================
#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 {
border: 1px solid #b5b5b5;
border-width: 1px 0;
padding-top: 2rem;
padding-bottom: 2rem;
}
.c-cstudy-widget__content::after {
content: "";
display: table;
clear: both;
}
.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
========================================================================== */
/*doc
---
title: CTA widgets
name: cta-widgets
category: Components - CTA widgets
---
This is the CTA widgets component which has multiple variations. Take a look at the `` section to see a full example.
```html_example
```
*/
.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 {
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;
}
.t-bg-blue {
background-color: #0f324e;
}
.t-bg-blue .c-cta-widget__input input[type=email],
.t-bg-blue .c-cta-widget__input input[type=text] {
border: 2px solid #fff;
color: #fff;
}
.t-bg-blue .c-cta-widget__input input[type=email]::-webkit-input-placeholder,
.t-bg-blue .c-cta-widget__input input[type=text]::-webkit-input-placeholder {
color: #fff;
}
.t-bg-blue .c-cta-widget__input input[type=email]:-moz-placeholder,
.t-bg-blue .c-cta-widget__input input[type=text]:-moz-placeholder {
color: #fff;
opacity: 1;
}
.t-bg-blue .c-cta-widget__input input[type=email]::-moz-placeholder,
.t-bg-blue .c-cta-widget__input input[type=text]::-moz-placeholder {
color: #fff;
opacity: 1;
}
.t-bg-blue .c-cta-widget__input input[type=email]:-ms-input-placeholder,
.t-bg-blue .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;
}
/*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
```
*/
/* ==========================================================================
#CTA widgets component
========================================================================== */
/*doc
---
title: CTA widgets
name: cta-widgets
category: Components - CTA widgets
---
This is the CTA widgets component which has multiple variations. Take a look at the `` section to see a full example.
```html_example
```
*/
.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 {
margin: 0 0.8rem;
}
@media screen and (min-width: 0) and (max-width: 639px) {
.c-cta-touchbase-widget__input .c-btn {
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 {
border-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;
}
.t-bg-blue {
background-color: #0f324e;
}
.t-bg-blue .c-cta-widget__input input[type=email],
.t-bg-blue .c-cta-widget__input input[type=text] {
border: 2px solid #fff;
color: #fff;
}
.t-bg-blue .c-cta-widget__input input[type=email]::-webkit-input-placeholder,
.t-bg-blue .c-cta-widget__input input[type=text]::-webkit-input-placeholder {
color: #fff;
}
.t-bg-blue .c-cta-widget__input input[type=email]:-moz-placeholder,
.t-bg-blue .c-cta-widget__input input[type=text]:-moz-placeholder {
color: #fff;
opacity: 1;
}
.t-bg-blue .c-cta-widget__input input[type=email]::-moz-placeholder,
.t-bg-blue .c-cta-widget__input input[type=text]::-moz-placeholder {
color: #fff;
opacity: 1;
}
.t-bg-blue .c-cta-widget__input input[type=email]:-ms-input-placeholder,
.t-bg-blue .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 {
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: 1rem;
bottom: 2rem;
}
@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;
}
}
/* ==========================================================================
#List widgets component
========================================================================== */
/*doc
---
title: List widgets
name: list-widgets
category: Components - List widgets
---
This is the List widgets component which has multiple variations.
```html_example
```
*/
.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;
}
/*doc
---
title: List widgets image
name: list-widgets-image
category: Components - List widgets
---
This is the List widgets component which has multiple variations.
```html_example
```
*/
/*doc
---
title: List widgets Featured
name: list-widgets-featured
category: Components - List widgets
---
This is the List widgets component which has multiple variations.
```html_example
```
*/
/* ==========================================================================
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-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--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;
}
}
@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;
}
@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 */
.c-newsroom {
/* can't use standard BEM format bc drupal views cant handle underscores as input */
}
@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: 2.3rem 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;
}
}
@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--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;
}
.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;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.c-our-work {
max-height: 1000px;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
.c-our-work {
max-height: 2500px;
}
}
.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: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
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;
margin-bottom: 60px;
/* 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;
}
}
}*/
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-our-work__list {
display: block;
}
}
.c-our-work__list a {
color: #373737;
}
.c-our-work__list li {
padding: 0 10px;
}
@media screen and (min-width: 0) and (max-width: 1023px) {
.c-our-work__list li {
margin-bottom: 50px;
}
}
.c-our-work__list li strong {
text-align: center;
font-size: 18px;
display: block;
padding: 0 10px;
}
.c-our-work__list li p {
max-width: 319px;
width: 100%;
font-size: 16px;
line-height: 21px;
font-weight: 300;
margin: 0 auto;
}
.c-our-work__list li img {
display: block;
margin: 0 auto;
margin-bottom: 27px;
}
@media screen and (min-width: 640px) {
.c-our-work__list li img {
max-width: 400px;
}
}
.c-our-work__foot {
text-align: center;
}
.c-our-work__foot p {
font-size: 16px;
margin-bottom: 15px;
}
.c-our-work__foot .c-btn {
margin-bottom: 100px;
}
/* ==========================================================================
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 {
/*
&__snippet-info {}
*/
/*
&_info {} */
}
.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 {
/*opacity: .5; made dark */
font-size: 0.8rem;
}
/* ==========================================================================
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;
/* end hovereffect for mobile */
}
@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__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: #0d8be3;
cursor: pointer;
}
.c-park__menu .c-park-nav__item--btn a:focus {
background-color: #0c7ccb;
}
.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: #5b5b5b;
}
@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 {
max-width: 67rem;
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
}
.c-people__node--top::after {
content: "";
display: table;
clear: both;
}
}
@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: 50%;
-webkit-flex-basis: 50%;
-spec-flex-basis: 50%;
flex-basis: 50%;
-ms-flex-preferred-size: 50%;
-webkit-flex-basis: 50%;
}
}
@media screen and (min-width: 640px) {
.c-people__node--top .c-people__node--right {
flex-basis: 50%;
-webkit-flex-basis: 50%;
-spec-flex-basis: 50%;
flex-basis: 50%;
-ms-flex-preferred-size: 50%;
-webkit-flex-basis: 50%;
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;
}
.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;
/*&:hover {
.c-people__slide-up {
bottom: 0;
}
}*/
}
.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;
}
.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__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;
}
/* ==========================================================================
#Donation forms component
========================================================================== */
/*doc
---
title: Donation Forms
name: donations-widgets
category: Components - Donation Forms
---
This is the Donations widgets component which has multiple variations.
```html_example
```
*/
@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;
}
.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: 0.4rem;
vertical-align: middle;
height: 1.2em;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
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;
}
/*doc
---
title: Donations forms Light
name: donantions-widgets-light
category: Components - Donation Forms
---
This is the Light CTA widgets component.
```html_example
```
*/
/*doc
---
title: Donations forms Dark
name: donantions-widgets-dark
category: Components - Donation Forms
---
This is the White CTA widget with email component.
```html_example
```
*/
/* ==========================================================================
#contact forms component
========================================================================== */
.c-contact-form__wrap {
max-width: 660px;
margin: 0 auto;
}
.c-contact-form .c-contact-form__row--date {
max-height: 88px;
overflow: hidden;
}
.c-contact-form form h2 {
text-align: center;
font-size: 2.5rem;
}
.c-contact-form form .form-item {
margin: 0;
}
.c-contact-form form label {
font-size: 0.7rem;
padding: 0 0 0.25rem 0.25rem;
}
.c-contact-form form label.c-contact-form--required {
color: #d11149;
text-align: right;
display: block;
}
.c-contact-form form input[type=text],
.c-contact-form form input[type=date],
.c-contact-form form input[type=email],
.c-contact-form form input[type=number],
.c-contact-form form input[type=tel],
.c-contact-form form textarea,
.c-contact-form form select,
.c-contact-form form .chosen-container-single .chosen-single {
background-color: rgba(232, 232, 222, 0.5);
background-image: none;
margin-bottom: 0.75rem;
width: 100%;
padding: 0.6rem 0.4rem;
height: 50px;
border: 1px solid rgba(55, 55, 55, 0.5);
font-size: 0.8rem;
line-height: 1;
}
.c-contact-form form input[type=text]:required:focus:valid,
.c-contact-form form input[type=date]:required:focus:valid,
.c-contact-form form input[type=email]:required:focus:valid,
.c-contact-form form input[type=number]:required:focus:valid,
.c-contact-form form input[type=tel]:required:focus:valid,
.c-contact-form form textarea:required:focus:valid,
.c-contact-form form select:required:focus:valid,
.c-contact-form form .chosen-container-single .chosen-single:required:focus:valid {
border: #0a8754 2px solid;
padding: 0.55rem 0.35rem;
}
.c-contact-form form input[type=text]:required:focus:invalid,
.c-contact-form form input[type=date]:required:focus:invalid,
.c-contact-form form input[type=email]:required:focus:invalid,
.c-contact-form form input[type=number]:required:focus:invalid,
.c-contact-form form input[type=tel]:required:focus:invalid,
.c-contact-form form textarea:required:focus:invalid,
.c-contact-form form select:required:focus:invalid,
.c-contact-form form .chosen-container-single .chosen-single:required:focus:invalid {
border: #d11149 2px solid;
padding: 0.55rem 0.35rem;
}
.c-contact-form form select:required:valid + .chosen-container:hover > .chosen-single {
border: #0a8754 2px solid;
padding: 0.55rem 0.35rem;
}
.c-contact-form form select:required:invalid + .chosen-container:hover > .chosen-single {
border: #d11149 2px solid;
padding: 0.55rem 0.35rem;
}
.c-contact-form form input[type=date]::-webkit-inner-spin-button, .c-contact-form form input[type=date]::-webkit-outer-spin-button {
display: none;
}
.c-contact-form form input[type=date]::-webkit-calendar-picker-indicator {
-webkit-appearance: none;
color: rgba(255, 255, 255, 0);
height: 30px;
width: 30px;
}
.c-contact-form form input[type=date]::-webkit-calendar-picker-indicator:hover {
background: rgba(255, 255, 255, 0);
}
.c-contact-form form input[type=date]::-webkit-input-placeholder {
visibility: hidden !important;
}
.c-contact-form form .js-form-type-date {
width: 85%;
display: inline-block;
}
.c-contact-form form .js-form-type-date::after {
content: "\f073";
display: inline-block;
font-size: 1rem;
font-family: "FontAwesome";
position: relative;
top: -2.6rem;
left: 85%;
pointer-events: none;
}
.c-contact-form form .js-form-type-date input {
cursor: pointer;
}
.c-contact-form form .chosen-container-single {
margin-bottom: 0.75rem;
height: 50px;
}
.c-contact-form form .chosen-container-single .chosen-single {
height: 50px;
line-height: 1;
border-radius: 5px;
-webkit-box-shadow: none;
box-shadow: none;
margin-bottom: 0;
}
.c-contact-form form .chosen-container-single .chosen-single span {
font-size: 0.85rem;
line-height: 1.5;
}
.c-contact-form.t-bg-sand input[type=text],
.c-contact-form.t-bg-sand input[type=date],
.c-contact-form.t-bg-sand input[type=email],
.c-contact-form.t-bg-sand input[type=number],
.c-contact-form.t-bg-sand input[type=tel],
.c-contact-form.t-bg-sand textarea,
.c-contact-form.t-bg-sand .chosen-container-single .chosen-single,
.c-contact-form.t-bg-sand select, .c-contact-form.t-bg-blue input[type=text],
.c-contact-form.t-bg-blue input[type=date],
.c-contact-form.t-bg-blue input[type=email],
.c-contact-form.t-bg-blue input[type=number],
.c-contact-form.t-bg-blue input[type=tel],
.c-contact-form.t-bg-blue textarea,
.c-contact-form.t-bg-blue .chosen-container-single .chosen-single,
.c-contact-form.t-bg-blue select {
background-color: rgba(255, 255, 255, 0.5);
}
.c-contact-form .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-contact-form .c-widget__thankyou h2 {
font-family: "OldStyleMT-Regular", serif;
text-align: center;
line-height: 1;
margin-bottom: 1em;
}
.c-contact-form .c-widget__thankyou div {
font-family: "OldStyleMT-Regular", serif;
font-size: 1rem;
line-height: 1.3rem;
}
/* calendar */
.ui-datepicker.ui-widget {
max-width: 250px;
font-size: 0.6rem;
border: 0;
background: #f8f8f5;
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 #f8f8f5;
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;
}
#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;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
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;
}
}
/* ==========================================================================
#Trumps
========================================================================== */
/* Visibility classes
========================================================================== */
/*doc
---
title: Visibility Classes
name: vis_class
category: Trumps - Visibility Classes
---
Classes you can use in the HTML to affect the visibility of an element.
Two vartions are available: `.t-show` and `.t-hide`.
Class | Description
----------------|---------------
`.t-hide`| Hides element
`.t-show`| Shows element
```html_example
[This element is visible!]
```
*/
.t-hide {
display: none !important;
}
.t-show {
display: block !important;
}
/* Float classes
========================================================================== */
/*doc
---
title: Float Classes
name: flo_class
category: Trumps - Float Classes
---
Classes you can use in the HTML to affect the visibility of an element. Use `.t-left` to float an element
to the left, and use `.t-right` to float to the right.
Class | Description
----------------|---------------
`.t-left`| Aligns element to the left
`.t-right`| Aligns element to the right
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum saepe aspernatur, nostrum excepturi consequatur? Est, natus aspernatur error delectus facere asperiores dolorem cum enim harum consectetur! Tempore, vero tempora cupiditate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum saepe aspernatur, nostrum excepturi consequatur? Est, natus aspernatur error delectus facere asperiores dolorem cum enim harum consectetur! Tempore, vero tempora cupiditate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum saepe aspernatur, nostrum excepturi consequatur? Est, natus aspernatur error delectus facere asperiores dolorem cum enim harum consectetur! Tempore, vero tempora cupiditate.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum saepe aspernatur, nostrum excepturi consequatur? Est, natus aspernatur error delectus facere asperiores dolorem cum enim harum consectetur! Tempore, vero tempora cupiditate.
```
*/
.t-left {
float: left !important;
}
.t-right {
float: right !important;
}
/* Text align classes
========================================================================== */
/*doc
---
title: Text Align Classes
name: tex_class
category: Trumps - Text Align Classes
---
Classes you can use in the HTML to affect the visibility of an element. Use the following classes
to adjust text alignment:
Class | Description
----------------|---------------
`.t-text-left`| Aligns text to the left
`.t-text-center`| Aligns text to the center
`.t-text-right`| Aligns text to the right
```html_example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic corporis quidem omnis cumque praesentium, consequatur nostrum minus. Aliquid, delectus incidunt repudiandae eveniet cupiditate nobis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic corporis quidem omnis cumque praesentium, consequatur nostrum minus. Aliquid, delectus incidunt repudiandae eveniet cupiditate nobis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic corporis quidem omnis cumque praesentium, consequatur nostrum minus. Aliquid, delectus incidunt repudiandae eveniet cupiditate nobis!
```
*/
.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
========================================================================== */
/*doc
---
title: Font family
name: name
category: Trumps - Font Family
---
```html_example
This is a heading which is normally serif.
This is a paragraph which is normally sans-serif.
```
*/
.t-sans {
font-family: "Roboto", sans-serif;
}
.t-serif {
font-family: "OldStyleMT-Regular", serif;
}
/* BG Colors
========================================================================== */
/*doc
---
title: Background colors
name: bg-colors
category: Trumps - Background colors
---
```html_example
Example
```
*/
.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
========================================================================== */
/*doc
---
title: Margin
name: margin-classes
category: Trumps - Margin classes
---
```html_example
Margin base right
Margin small right
Margin base left
Margin small left
Margin base bottom
Margin small bottom
Margin base top
Margin small top
```
*/
.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
========================================================================== */
/*doc
---
title: Padding
name: padding-classes
category: Trumps - Padding classes
---
```html_example
Padding base right
Padding small right
Padding base left
Padding small left
```
*/
.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-add-comma::after {
display: inline-block;
content: ",";
padding: 0 5px 0 0;
}
.t-add-comma:last-child::after {
display: none;
}
/* 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);
}
}
.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;
}
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 {
background: #fff;
color: #0c0c0c;
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;
}
} 