/**
* Heifer v2
*/
/**
* Global Stylesheet
* The site's main (and perhaps only) stylesheet. All supporting stylesheet
* files are imported into and compiled from here.
*/
/**
* Normalize
* Using the Normalize.css (http://necolas.github.io/normalize.css/) with only minor modification.
*/
/*
HTML5 Display Definitions
Set the appropriate `display` definitions for new HTML5 elements.
The majority will be displayed `block`.
*/
*,
*:before,
*:after {
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/*
Some, however, need to be `inline-block` with an IE7 fallback.
*/
audio,
canvas,
video {
display: inline-block;
}
.lte7 audio,
.lte7 canvas,
.lte7 video {
display: inline;
zoom: 1;
}
/*
Audio
From Normalize.css:
> Prevents modern browsers from displaying `audio` without controls.
> Remove excess height in iOS5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
/*
Type
*/
/*
HTML Font Size Adjust
1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
`em` units.
2. Prevents iOS text size adjust after orientation change, without disabling
user zoom.
*/
html {
font-size: 100%;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */
}
html {
font-family: sans-serif;
}
.v2-content button,
.v2-content input,
.v2-content select,
.v2-content textarea {
font-family: sans-serif;
}
.v2-content abbr[title] {
border: none;
}
.v2-content i,
.v2-content cite,
.v2-content address {
font-style: normal;
}
.v2-content dfn {
font-style: italic;
}
.v2-content b {
font-weight: normal;
}
.v2-content strong {
font-weight: bold;
}
.v2-content h1,
.v2-content h2,
.v2-content h3,
.v2-content h4,
.v2-content h5,
.v2-content h6,
.v2-content p,
.v2-content pre,
.v2-content blockquote,
.v2-content menu,
.v2-content ul,
.v2-content ol,
.v2-content dl,
.v2-content table,
.v2-content figure {
/* Display & Box Model */
margin: 1.25rem 0 0 0;
/* Other */
font-size: 1em;
}
.v2-content menu,
.v2-content ol,
.v2-content ul {
padding-left: 2.5em;
}
.v2-content li ul,
.v2-content li ol {
margin-top: 0.7142857142857143em;
margin-bottom: 0.7142857142857143em;
}
.v2-content dd {
margin-left: 2.5em;
}
.v2-content blockquote {
padding: 1.25em 2.5em;
}
.v2-content blockquote > :first-child {
margin-top: 0;
}
.v2-content q {
quotes: none;
}
.v2-content q:before,
.v2-content q:after {
content: "";
content: none;
}
.v2-content mark {
background: #ff0;
color: #000;
}
.v2-content code,
.v2-content kbd,
.v2-content pre,
.v2-content samp {
font-family: monospace, serif;
font-size: 1em;
}
.v2-content pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
.v2-content small {
font-size: 1em;
}
.v2-content sub,
.v2-content sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
.v2-content sup {
top: -0.5em;
}
.v2-content sub {
bottom: -0.25em;
}
img {
max-width: 100%;
border: 0;
}
.lte7 img {
-ms-interpolation-mode: bicubic;
}
svg:not(:root) {
overflow: hidden;
}
.v2-content form {
margin: 0;
}
.v2-content fieldset {
border: none;
margin: 0;
padding: 0;
}
.v2-content legend {
width: 100%;
border: 0;
padding: 0;
display: block;
white-space: normal;
}
.lte7 .v2-content legend {
margin-left: -7px;
}
.v2-content button,
.v2-content input,
.v2-content select,
.v2-content textarea {
font-size: 100%;
margin: 0;
display: block;
}
.v2-content button .lte7,
.v2-content input .lte7,
.v2-content select .lte7,
.v2-content textarea .lte7 {
vertical-align: middle;
}
.v2-content button,
.v2-content html input[type="button"],
.v2-content input[type="reset"],
.v2-content input[type="submit"] {
-webkit-appearance: button;
display: inline-block;
cursor: pointer;
}
.v2-content button .lte7,
.v2-content html input[type="button"] .lte7,
.v2-content input[type="reset"] .lte7,
.v2-content input[type="submit"] .lte7 {
overflow: visible;
display: inline;
zoom: 1;
}
.v2-content button,
.v2-content input {
line-height: normal;
}
.v2-content button[disabled],
.v2-content input[disabled] {
cursor: default;
}
.v2-content button::-moz-focus-inner,
.v2-content input::-moz-focus-inner {
border: 0;
padding: 0;
}
.v2-content input[type="checkbox"],
.v2-content input[type="radio"] {
margin: 3px;
padding: 0;
box-sizing: border-box;
position: relative;
vertical-align: top;
}
.v2-content input[type="checkbox"] .lte7,
.v2-content input[type="radio"] .lte7 {
width: 13px;
height: 13px;
}
.v2-content input[type="search"] {
-webkit-appearance: textfield;
}
.v2-content input[type="search"]::-webkit-search-cancel-button,
.v2-content input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.v2-content textarea {
overflow: auto;
vertical-align: top;
}
.v2-content table {
border-spacing: 0;
}
@font-face {
font-family: 'Trade Gothic Bold Cond';
src: url('../../../resources/v2/fonts/trade-gothic/3699AB_0_0.eot');
src: url('../../../resources/v2/fonts/trade-gothic/3699AB_0_0.eot?#iefix') format('embedded-opentype'), url('../../../resources/v2/fonts/trade-gothic/3699AB_0_0.woff') format('woff'), url('../../../resources/v2/fonts/trade-gothic/3699AB_0_0.woff2') format('woff2'), url('../../../resources/v2/fonts/trade-gothic/3699AB_0_0.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
/**
* Weekly font declaration
*/
@font-face {
font-family: 'Weekly';
src: url('../../../resources/v2/fonts/weekly/Weekly-Regular.eot');
src: url('../../../resources/v2/fonts/weekly/Weekly-Regular.eot?#iefix') format('embedded-opentype'), url('../../../resources/v2/fonts/weekly/Weekly-Regular.woff') format('woff'), url('../../../resources/v2/fonts/weekly/Weekly-Regular.ttf') format('truetype'), url('../../../resources/v2/fonts/weekly/Weekly-Regular.svg#WeeklyRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Weekly';
src: url('../../../resources/v2/fonts/weekly/Weekly-Bold.eot');
src: url('../../../resources/v2/fonts/weekly/Weekly-Bold.eot?#iefix') format('embedded-opentype'), url('../../../resources/v2/fonts/weekly/Weekly-Bold.woff') format('woff'), url('../../../resources/v2/fonts/weekly/Weekly-Bold.ttf') format('truetype'), url('../../../resources/v2/fonts/weekly/Weekly-Bold.svg#WeeklyBold') format('svg');
font-weight: 700;
font-style: normal;
}
/**
* SuperFly font declaration
*/
@font-face {
font-family: 'SuperFly Two';
src: url('../../../resources/v2/fonts/superfly/superfly-two.eot');
src: url('../../../resources/v2/fonts/superfly/superfly-two.eot?#iefix') format('embedded-opentype'), url('../../../resources/v2/fonts/superfly/superfly-two.woff2') format('woff2'), url('../../../resources/v2/fonts/superfly/superfly-two.woff') format('woff'), url('../../../resources/v2/fonts/superfly/superfly-two.ttf') format('truetype'), url('../../../resources/v2/fonts/superfly/superfly-two.svg#SuperFly') format('svg');
font-weight: normal;
font-style: normal;
}
/**
* Global Font Declarations
*/
.shell__v2-content {
font-family: "Weekly", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: normal;
color: #241912;
}
.fonts__weekly {
font-family: "Weekly", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: normal;
}
.fonts__weekly-bold,
.slider__impact,
.slider__input,
.slider__button,
.slider__dollar-input,
.slider__dollar-input[type="text"],
.slider__unit-input,
.slider__unit-input[type="text"] {
font-family: "Weekly", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
}
.fonts__trade-gothic,
.donationForm__amount,
.donationForm__abandonment__title,
.slider__price,
.slider__horizontal .slider__tooltip,
.minorCampaign__footer-header,
.minorCampaign__footer-link,
.slider__min,
.slider__max {
font-family: "Trade Gothic Bold Cond", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
}
.fonts__kepler,
.donationForm__upsell-title {
font-family: "kepler-std", "Times New Roman", Times, Georgia, serif;
font-weight: normal;
}
.fonts__helvetica,
.donationForm__help-text,
.donationForm__total,
.radio__label-text,
.checkbox__label-text {
font-family: Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: normal;
}
.fonts__helvetica-bold {
font-family: Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
}
.fonts__superfly,
.minorCampaign__vertical-text {
font-family: "SuperFly Two", "Times New Roman", Times, Georgia, serif;
font-weight: normal;
}
/*
Typographic Scale
The building blocks for the site's type sizes. Almost exclusively, an element's
font size is assigned with one of these classes. If a new size is needed, a new
class is created here so it can be used and reused elsewhere.
The list of type sizes can grow or shrink, but be vigilant in keeping the
number of sizes to a minimum. A nice rule of thumb is that no two sizes can one
pixel in difference (forcing you to choose one over the other, giving you one
class where you previously had two).
````typographic-scale
Canon Text (80px)
Columbian Text (48px)
Paragon Text (32px)
Great Text (24px)
Normal Text (18px)
Petite Text (16px)
Pica Text (14px)
Nonpareil Text (12px)
````
*/
/*
Canon Text
*/
.hierarchy__canon-text,
.donationForm__abandonment__title {
font-size: 80px;
font-size: 5rem;
line-height: 1;
}
@media all and (max-width: 47.9375em) {
.hierarchy__canon-text,
.donationForm__abandonment__title {
font-size: 60px;
font-size: 3.75rem;
line-height: 1;
}
}
/*
Columbian Text
*/
.hierarchy__columbian-text,
.donationForm__amount {
font-size: 48px;
font-size: 3rem;
line-height: 1;
}
@media all and (max-width: 47.9375em) {
.hierarchy__columbian-text,
.donationForm__amount {
font-size: 32px;
font-size: 2rem;
line-height: 1;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.hierarchy__columbian-text,
.donationForm__amount {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.hierarchy__columbian-text,
.donationForm__amount {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.hierarchy__columbian-text,
.donationForm__amount {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
/*
Paragon Text
*/
.hierarchy__paragon-text {
font-size: 32px;
font-size: 2rem;
line-height: 1;
}
@media all and (max-width: 47.9375em) {
.hierarchy__paragon-text {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.hierarchy__paragon-text {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.hierarchy__paragon-text {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
/*
Great Text
*/
.hierarchy__great-text,
.donationForm__upsell-title,
.slider__impact,
.slider__input,
.minorCampaign__footer-header,
.slider__dollar-input,
.slider__dollar-input[type="text"],
.slider__unit-input,
.slider__unit-input[type="text"] {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
@media all and (max-width: 47.9375em) {
.hierarchy__great-text,
.donationForm__upsell-title,
.slider__impact,
.slider__input,
.minorCampaign__footer-header,
.slider__dollar-input,
.slider__dollar-input[type="text"],
.slider__unit-input,
.slider__unit-input[type="text"] {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.hierarchy__great-text,
.donationForm__upsell-title,
.slider__impact,
.slider__input,
.minorCampaign__footer-header,
.slider__dollar-input,
.slider__dollar-input[type="text"],
.slider__unit-input,
.slider__unit-input[type="text"] {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
/*
Normal Text
*/
.hierarchy__normal-text,
.images__figcaption,
.minorCampaign__figcaption {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
@media all and (max-width: 47.9375em) {
.hierarchy__normal-text,
.images__figcaption,
.minorCampaign__figcaption {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
/*
Petite Text
*/
.hierarchy__petite-text {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
/*
Pica Text
*/
.hierarchy__pica-text,
.simpleFooter__text,
.minorCampaign__footer-text {
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
}
/*
Nonpareil Text
*/
.hierarchy__nonpareil-text,
.donationForm__help-text,
.donationForm__total {
font-size: 12px;
font-size: 0.75rem;
line-height: 1;
}
.colors__white,
.donationForm__abandonment__title {
color: #fff;
}
.colors__black {
color: #000;
}
.colors__disabled-button-grey {
color: #a5a4a2;
}
.colors__disabled-text-grey {
color: #71706e;
}
.colors__ui-element-grey {
color: #dcdcdc;
}
.colors__teal {
color: #02948a;
}
.colors__dark-teal {
color: #0e7d74;
}
.colors__yellow {
color: #f4c033;
}
.colors__orange {
color: #d27523;
}
.colors__small-button-orange {
color: #af621e;
}
.colors__dark-orange {
color: #994800;
}
.colors__red {
color: #cc4743;
}
.colors__hyperlink-red {
color: #c44440;
}
.colors__body-text-brown {
color: #241912;
}
.colors__warm-brown {
color: #815a44;
}
.colors__headline-brown {
color: #4b372b;
}
.colors__cream {
color: #f9f5ee;
}
/*
Responsive Grid
The default responsive grid in Motif is built with a few rules in mind:
1. Each row of columns must be wrapped in a row element
2. There's no need to specify if a column is first or last
With that in mind, there is a basic syntax to learn for what classes to use.
Our breakpoints are classified as:
- Base
- Small
- Medium
- Large
- Extra Large
Our default responsive grid system only uses 3 grids to cover all of our bases:
- `grid, small` covers Base and Small viewports, but cuts off at Medium
- `grid, medium` covers only Medium
- `grid, large` starts at Large and covers Extra Large as well (there is no max
cutoff value for `grid, large`)
Understanding that, the syntax should be easy to understand. In these examples,
we will talk about `grid, small`:
- **Rows**: `.grid__s-row` (Grid, Small, Row)
- **Columns**: `.grid__cs` (Grid, Column, Small)
- **Column Width**: `.grid__s-half` (Grid, Small, Half-Width)
However, to be slightly more succinct, you can use the condensed column syntax:
- **Columns (Condensed)**: `.grid__cs-half` (Grid, Column, Small, Half-Width)
In brief, the way the grid works is that `.grid__cs` floats the element to the left
(by default), and adds padding to both the left and the right. `-half` gives
it a width of `50%`. The combined padding of the two columns bumped up against
each other form the full "gutter". The `.grid__s-row` then clears the floats and has
a *negative* margin on both the left and the right that pops the columns out to
the sides the exact width of their paddings, meaning the column content lines
up with the site boundaries on the left and right without the need to specify
"first" or "last" column classes.
To use this responsively, then, you just add the classes by breakpoint:
By default, the column breakdown of each grid breakpoint:
- `grid, small`: 4 columns
- `grid, medium`: 9 columns
- `grid, large`: 12 columns
For the larger grids, the classes follow the numbers closely...
- `.grid__cl-10of12
- `.grid__cm-4of9`
...in just about every combination (based on their total column number), but
all of the grids also have a few "fuzzy" shortcuts as well:
- `half`
- `third`
- `quarter`
- `three-quarters`
- `two-thirds`
*/
.grid__halves,
.grid__thirds,
.grid__quarters {
margin-left: -0.9375rem;
margin-right: -0.9375rem;
/* Pretty */
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
.grid__halves:before,
.grid__thirds:before,
.grid__quarters:before,
.grid__halves:after,
.grid__thirds:after,
.grid__quarters:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.grid__halves:after,
.grid__thirds:after,
.grid__quarters:after {
clear: both;
}
ul.grid__halves,
ul.grid__thirds,
ul.grid__quarters {
padding-left: 0;
list-style: none outside none;
}
.grid__halves > *,
.grid__thirds > *,
.grid__quarters > * {
display: inline;
float: left;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
/* Display & Box Model */
display: inline-block;
/* Positioning */
float: none;
/* Pretty */
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.grid__halves > * {
width: 50%;
}
.grid__thirds > * {
width: 33.33333%;
}
.grid__quarters > * {
width: 25%;
}
.opera-only :-o-prefocus,
.grid__thirds {
word-spacing: -0.43em;
}
/**
* Mobile Grid
*/
@media all and (max-width: 47.9375em) {
[class*="grid__s-row"],
.grid__s-quarters,
.grid__s-thirds,
.grid__s-halves {
margin-left: -0.9375rem;
margin-right: -0.9375rem;
}
[class*="grid__s-row"]:before,
[class*="grid__s-row"]:after,
.grid__s-quarters:before,
.grid__s-quarters:after,
.grid__s-thirds:before,
.grid__s-thirds:after,
.grid__s-halves:before,
.grid__s-halves:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
[class*="grid__s-row"]:after,
.grid__s-quarters:after,
.grid__s-thirds:after,
.grid__s-halves:after {
clear: both;
}
ul[class*="grid__s-row"],
ul.grid__s-quarters,
ul.grid__s-thirds,
ul.grid__s-halves {
padding-left: 0;
list-style: none outside none;
}
.grid__s-row--rtl > [class*="grid__cs"] {
float: right;
}
.grid__s-row--ltr > [class*="grid__cs"] {
float: left;
}
[class*="grid__cs"],
.grid__s-quarters > *,
.grid__s-thirds > *,
.grid__s-halves > * {
display: inline;
float: left;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.grid__s-quarter,
.grid__cs-quarter,
.grid__s-quarters > * {
width: 25%;
}
.grid__s-third,
.grid__cs-third,
.grid__s-thirds > * {
width: 33.33333%;
}
.grid__s-half,
.grid__cs-half,
.grid__s-halves > * {
width: 50%;
}
.grid__s-two-thirds,
.grid__cs-two-thirds {
width: 66.66667%;
}
.grid__s-three-quarters,
.grid__cs-three-quarters {
width: 75%;
}
.grid__s-full,
.grid__cs-full {
width: 100%;
}
[class^="grid__"][class*="s-5of6"] {
width: 83.33333%;
}
[class^="grid__"][class*="s-1of6"] {
width: 16.66667%;
}
[class^="grid__"][class*="s-4of5"] {
width: 80%;
}
[class^="grid__"][class*="s-3of5"] {
width: 60%;
}
[class^="grid__"][class*="s-2of5"] {
width: 40%;
}
[class^="grid__"][class*="s-1of5"] {
width: 20%;
}
.grid__s-row--flex,
.grid__s-row--flex-start,
.grid__s-row--flex-end,
.grid__s-row--flex-center,
.grid__s-row--flex-stretch,
.grid__s-quarters,
.grid__s-thirds,
.grid__s-halves {
letter-spacing: -0.31em;
text-rendering: optimizespeed;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: start;
align-items: flex-start;
}
.grid__s-row--flex-end {
-ms-flex-align: end;
align-items: flex-end;
}
.grid__s-row--flex-center {
-ms-flex-align: center;
align-items: center;
}
.grid__s-row--flex-stretch {
-ms-flex-align: stretch;
align-items: stretch;
}
.grid__s-row--flex > [class*="grid__cs"],
.grid__s-row--flex-start > [class*="grid__cs"],
.grid__s-row--flex-end > [class*="grid__cs"],
.grid__s-row--flex-center > [class*="grid__cs"],
.grid__s-row--flex-stretch > [class*="grid__cs"],
.grid__s-quarters > *,
.grid__s-thirds > *,
.grid__s-halves > * {
float: none;
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.opera-only :-o-prefocus,
.grid__s-row--flex,
.grid__s-row--flex-start,
.grid__s-row--flex-end,
.grid__s-row--flex-center,
.grid__s-row--flex-stretch,
.grid__s-row--flex-start,
.grid__s-row--flex-end,
.grid__s-row--flex-center,
.grid__s-row--flex-stretch,
.grid__s-quarters,
.grid__s-thirds,
.grid__s-halves {
word-spacing: -0.43em;
}
}
/**
* Tablet Grid
*/
@media all and (min-width: 48em) and (max-width: 61.9375em) {
[class*="grid__m-row"],
.grid__m-quarters,
.grid__m-thirds,
.grid__m-halves {
margin-left: -0.5625rem;
margin-right: -0.5625rem;
}
[class*="grid__m-row"]:before,
[class*="grid__m-row"]:after,
.grid__m-quarters:before,
.grid__m-quarters:after,
.grid__m-thirds:before,
.grid__m-thirds:after,
.grid__m-halves:before,
.grid__m-halves:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
[class*="grid__m-row"]:after,
.grid__m-quarters:after,
.grid__m-thirds:after,
.grid__m-halves:after {
clear: both;
}
ul[class*="grid__m-row"],
ul.grid__m-quarters,
ul.grid__m-thirds,
ul.grid__m-halves {
padding-left: 0;
list-style: none outside none;
}
.grid__m-row--rtl > [class*="grid__cm"] {
float: right;
}
.grid__m-row--ltr > [class*="grid__cm"] {
float: left;
}
[class*="grid__cm"],
.grid__m-quarters > *,
.grid__m-thirds > *,
.grid__m-halves > * {
display: inline;
float: left;
padding-left: 0.5625rem;
padding-right: 0.5625rem;
}
.grid__m-quarter,
.grid__cm-quarter,
.grid__m-quarters > * {
width: 25%;
}
.grid__m-third,
.grid__cm-third,
.grid__m-thirds > * {
width: 33.33333%;
}
.grid__m-half,
.grid__cm-half,
.grid__m-halves > * {
width: 50%;
}
.grid__m-two-thirds,
.grid__cm-two-thirds {
width: 66.66667%;
}
.grid__m-three-quarters,
.grid__cm-three-quarters {
width: 75%;
}
.grid__m-full,
.grid__cm-full {
width: 100%;
}
[class^="grid__"][class*="m-11of12"] {
width: 91.66667%;
}
[class^="grid__"][class*="m-10of12"] {
width: 83.33333%;
}
[class^="grid__"][class*="m-7of12"] {
width: 58.33333%;
}
[class^="grid__"][class*="m-5of12"] {
width: 41.66667%;
}
[class^="grid__"][class*="m-2of12"] {
width: 16.66667%;
}
[class^="grid__"][class*="m-1of12"] {
width: 8.33333%;
}
[class^="grid__"][class*="m-10of11"] {
width: 90.90909%;
}
[class^="grid__"][class*="m-9of11"] {
width: 81.81818%;
}
[class^="grid__"][class*="m-8of11"] {
width: 72.72727%;
}
[class^="grid__"][class*="m-7of11"] {
width: 63.63636%;
}
[class^="grid__"][class*="m-6of11"] {
width: 54.54545%;
}
[class^="grid__"][class*="m-5of11"] {
width: 45.45455%;
}
[class^="grid__"][class*="m-4of11"] {
width: 36.36364%;
}
[class^="grid__"][class*="m-3of11"] {
width: 27.27273%;
}
[class^="grid__"][class*="m-2of11"] {
width: 18.18182%;
}
[class^="grid__"][class*="m-1of11"] {
width: 9.09091%;
}
[class^="grid__"][class*="m-9of10"] {
width: 90%;
}
[class^="grid__"][class*="m-8of10"] {
width: 80%;
}
[class^="grid__"][class*="m-7of10"] {
width: 70%;
}
[class^="grid__"][class*="m-6of10"] {
width: 60%;
}
[class^="grid__"][class*="m-4of10"] {
width: 40%;
}
[class^="grid__"][class*="m-3of10"] {
width: 30%;
}
[class^="grid__"][class*="m-2of10"] {
width: 20%;
}
[class^="grid__"][class*="m-1of10"] {
width: 10%;
}
[class^="grid__"][class*="m-8of9"] {
width: 88.88889%;
}
[class^="grid__"][class*="m-7of9"] {
width: 77.77778%;
}
[class^="grid__"][class*="m-5of9"] {
width: 55.55556%;
}
[class^="grid__"][class*="m-4of9"] {
width: 44.44444%;
}
[class^="grid__"][class*="m-2of9"] {
width: 22.22222%;
}
[class^="grid__"][class*="m-1of9"] {
width: 11.11111%;
}
[class^="grid__"][class*="m-7of8"] {
width: 87.5%;
}
[class^="grid__"][class*="m-5of8"] {
width: 62.5%;
}
[class^="grid__"][class*="m-3of8"] {
width: 37.5%;
}
[class^="grid__"][class*="m-1of8"] {
width: 12.5%;
}
[class^="grid__"][class*="m-6of7"] {
width: 85.71429%;
}
[class^="grid__"][class*="m-5of7"] {
width: 71.42857%;
}
[class^="grid__"][class*="m-4of7"] {
width: 57.14286%;
}
[class^="grid__"][class*="m-3of7"] {
width: 42.85714%;
}
[class^="grid__"][class*="m-2of7"] {
width: 28.57143%;
}
[class^="grid__"][class*="m-1of7"] {
width: 14.28571%;
}
[class^="grid__"][class*="m-5of6"] {
width: 83.33333%;
}
[class^="grid__"][class*="m-1of6"] {
width: 16.66667%;
}
[class^="grid__"][class*="m-4of5"] {
width: 80%;
}
[class^="grid__"][class*="m-3of5"] {
width: 60%;
}
[class^="grid__"][class*="m-2of5"] {
width: 40%;
}
[class^="grid__"][class*="m-1of5"] {
width: 20%;
}
.grid__m-row--flex,
.grid__m-row--flex-start,
.grid__m-row--flex-end,
.grid__m-row--flex-center,
.grid__m-row--flex-stretch,
.grid__m-quarters,
.grid__m-thirds,
.grid__m-halves {
letter-spacing: -0.31em;
text-rendering: optimizespeed;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: start;
align-items: flex-start;
}
.grid__m-row--flex-end {
-ms-flex-align: end;
align-items: flex-end;
}
.grid__m-row--flex-center {
-ms-flex-align: center;
align-items: center;
}
.grid__m-row--flex-stretch {
-ms-flex-align: stretch;
align-items: stretch;
}
.grid__m-row--flex > [class*="grid__cm"],
.grid__m-row--flex-start > [class*="grid__cm"],
.grid__m-row--flex-end > [class*="grid__cm"],
.grid__m-row--flex-center > [class*="grid__cm"],
.grid__m-row--flex-stretch > [class*="grid__cm"],
.grid__m-quarters > *,
.grid__m-thirds > *,
.grid__m-halves > * {
float: none;
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.opera-only :-o-prefocus,
.grid__m-row--flex,
.grid__m-row--flex-start,
.grid__m-row--flex-end,
.grid__m-row--flex-center,
.grid__m-row--flex-stretch,
.grid__m-row--flex-start,
.grid__m-row--flex-end,
.grid__m-row--flex-center,
.grid__m-row--flex-stretch,
.grid__m-quarters,
.grid__m-thirds,
.grid__m-halves {
word-spacing: -0.43em;
}
}
/**
* Desktop Grid
*/
/*
````desktop-grid
````
*/
@media all and (min-width: 62em) {
[class*="grid__l-row"],
.grid__l-quarters,
.grid__l-thirds,
.grid__l-halves {
margin-left: -1.125rem;
margin-right: -1.125rem;
}
[class*="grid__l-row"]:before,
[class*="grid__l-row"]:after,
.grid__l-quarters:before,
.grid__l-quarters:after,
.grid__l-thirds:before,
.grid__l-thirds:after,
.grid__l-halves:before,
.grid__l-halves:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
[class*="grid__l-row"]:after,
.grid__l-quarters:after,
.grid__l-thirds:after,
.grid__l-halves:after {
clear: both;
}
ul[class*="grid__l-row"],
ul.grid__l-quarters,
ul.grid__l-thirds,
ul.grid__l-halves {
padding-left: 0;
list-style: none outside none;
}
.grid__l-row--rtl > [class*="grid__cl"] {
float: right;
}
.grid__l-row--ltr > [class*="grid__cl"] {
float: left;
}
[class*="grid__cl"],
.grid__l-quarters > *,
.grid__l-thirds > *,
.grid__l-halves > * {
display: inline;
float: left;
padding-left: 1.125rem;
padding-right: 1.125rem;
}
.grid__l-quarter,
.grid__cl-quarter,
.grid__l-quarters > * {
width: 25%;
}
.grid__l-third,
.grid__cl-third,
.grid__l-thirds > * {
width: 33.33333%;
}
.grid__l-half,
.grid__cl-half,
.grid__l-halves > * {
width: 50%;
}
.grid__l-two-thirds,
.grid__cl-two-thirds {
width: 66.66667%;
}
.grid__l-three-quarters,
.grid__cl-three-quarters,
.minorCampaign__introduction {
width: 75%;
}
.grid__l-full,
.grid__cl-full {
width: 100%;
}
[class^="grid__"][class*="l-11of12"] {
width: 91.66667%;
}
[class^="grid__"][class*="l-10of12"] {
width: 83.33333%;
}
[class^="grid__"][class*="l-7of12"] {
width: 58.33333%;
}
[class^="grid__"][class*="l-5of12"] {
width: 41.66667%;
}
[class^="grid__"][class*="l-2of12"] {
width: 16.66667%;
}
[class^="grid__"][class*="l-1of12"] {
width: 8.33333%;
}
[class^="grid__"][class*="l-10of11"] {
width: 90.90909%;
}
[class^="grid__"][class*="l-9of11"] {
width: 81.81818%;
}
[class^="grid__"][class*="l-8of11"] {
width: 72.72727%;
}
[class^="grid__"][class*="l-7of11"] {
width: 63.63636%;
}
[class^="grid__"][class*="l-6of11"] {
width: 54.54545%;
}
[class^="grid__"][class*="l-5of11"] {
width: 45.45455%;
}
[class^="grid__"][class*="l-4of11"] {
width: 36.36364%;
}
[class^="grid__"][class*="l-3of11"] {
width: 27.27273%;
}
[class^="grid__"][class*="l-2of11"] {
width: 18.18182%;
}
[class^="grid__"][class*="l-1of11"] {
width: 9.09091%;
}
[class^="grid__"][class*="l-9of10"] {
width: 90%;
}
[class^="grid__"][class*="l-8of10"] {
width: 80%;
}
[class^="grid__"][class*="l-7of10"] {
width: 70%;
}
[class^="grid__"][class*="l-6of10"] {
width: 60%;
}
[class^="grid__"][class*="l-4of10"] {
width: 40%;
}
[class^="grid__"][class*="l-3of10"] {
width: 30%;
}
[class^="grid__"][class*="l-2of10"] {
width: 20%;
}
[class^="grid__"][class*="l-1of10"] {
width: 10%;
}
[class^="grid__"][class*="l-8of9"] {
width: 88.88889%;
}
[class^="grid__"][class*="l-7of9"] {
width: 77.77778%;
}
[class^="grid__"][class*="l-5of9"] {
width: 55.55556%;
}
[class^="grid__"][class*="l-4of9"] {
width: 44.44444%;
}
[class^="grid__"][class*="l-2of9"] {
width: 22.22222%;
}
[class^="grid__"][class*="l-1of9"] {
width: 11.11111%;
}
[class^="grid__"][class*="l-7of8"] {
width: 87.5%;
}
[class^="grid__"][class*="l-5of8"] {
width: 62.5%;
}
[class^="grid__"][class*="l-3of8"] {
width: 37.5%;
}
[class^="grid__"][class*="l-1of8"] {
width: 12.5%;
}
[class^="grid__"][class*="l-6of7"] {
width: 85.71429%;
}
[class^="grid__"][class*="l-5of7"] {
width: 71.42857%;
}
[class^="grid__"][class*="l-4of7"] {
width: 57.14286%;
}
[class^="grid__"][class*="l-3of7"] {
width: 42.85714%;
}
[class^="grid__"][class*="l-2of7"] {
width: 28.57143%;
}
[class^="grid__"][class*="l-1of7"] {
width: 14.28571%;
}
[class^="grid__"][class*="l-5of6"] {
width: 83.33333%;
}
[class^="grid__"][class*="l-1of6"] {
width: 16.66667%;
}
[class^="grid__"][class*="l-4of5"] {
width: 80%;
}
[class^="grid__"][class*="l-3of5"] {
width: 60%;
}
[class^="grid__"][class*="l-2of5"] {
width: 40%;
}
[class^="grid__"][class*="l-1of5"] {
width: 20%;
}
/*
Media Grid
The Media Grid allows you to place a grid of photos or videos (catalog or
retail products, etc.) without floating them, alleviating the need to concern
yourself with clearing the floats with rows should an object extend further
than another. Also, because they are not floating, it allows you to align
the entire group center, making sure any "orphaned" grid entries are centered.
The syntax is simply the same as the regular responsive grid system, except
the row class has a `--flex` modifier.
````media-grid
Alderaan is peaceful. We have no weapons.
Alderaan is peaceful. We have no weapons.
Alderaan is peaceful. We have no weapons.
````
*/
.grid__l-row--flex,
.grid__l-row--flex-start,
.grid__l-row--flex-end,
.grid__l-row--flex-center,
.grid__l-row--flex-stretch,
.grid__l-quarters,
.grid__l-thirds,
.grid__l-halves {
letter-spacing: -0.31em;
text-rendering: optimizespeed;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: start;
align-items: flex-start;
}
.grid__l-row--flex-end {
-ms-flex-align: end;
align-items: flex-end;
}
.grid__l-row--flex-center {
-ms-flex-align: center;
align-items: center;
}
.grid__l-row--flex-stretch {
-ms-flex-align: stretch;
align-items: stretch;
}
.grid__l-row--flex > [class*="grid__cl"],
.grid__l-row--flex-start > [class*="grid__cl"],
.grid__l-row--flex-end > [class*="grid__cl"],
.grid__l-row--flex-center > [class*="grid__cl"],
.grid__l-row--flex-stretch > [class*="grid__cl"],
.grid__l-quarters > *,
.grid__l-thirds > *,
.grid__l-halves > * {
float: none;
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
.opera-only :-o-prefocus,
.grid__l-row--flex,
.grid__l-row--flex-start,
.grid__l-row--flex-end,
.grid__l-row--flex-center,
.grid__l-row--flex-stretch,
.grid__l-row--flex-start,
.grid__l-row--flex-end,
.grid__l-row--flex-center,
.grid__l-row--flex-stretch,
.grid__l-quarters,
.grid__l-thirds,
.grid__l-halves {
word-spacing: -0.43em;
}
}
.wrappers__wrapper,
.patternsHome__wrapper {
width: 92%;
margin-left: auto;
margin-right: auto;
max-width: 1200px;
}
.wrappers__group:before,
.wrappers__group:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.wrappers__group:after {
clear: both;
}
/*
Spacing Helpers
Spacing helpers are quick but powerful classes that add margin or padding to
any given element. These classes are `!important`, so they override all other
styles.
* `p`, `m` = padding, margin
* `a`, `t`, `r`, `b`, `l`, `h`, `v` = all, top, right, bottom, left, horizontal, vertical
* `s`, `m`, `l`, `n` = small (~`5px`), medium (~`10px`), large (~`20px`), none (`0`)
For example: `.spacing__pam` means "padding, all, medium".
**Note:** These are all based on the current element's font size and the
project's vertical rhythm (even on the sides, to provide uniform spacing).
As such, they require `_vars.less`.
*/
.spacing__ptn,
.spacing__pvn,
.spacing__pan {
padding-top: 0 !important;
}
.spacing__pts,
.spacing__pvs,
.spacing__pas {
padding-top: 0.3125rem !important;
}
.spacing__ptm,
.spacing__pvm,
.spacing__pam {
padding-top: 0.625rem !important;
}
.spacing__ptl,
.spacing__pvl,
.spacing__pal {
padding-top: 1.25rem !important;
}
.spacing__prn,
.spacing__phn,
.spacing__pan {
padding-right: 0 !important;
}
.spacing__prs,
.spacing__phs,
.spacing__pas {
padding-right: 0.3125rem !important;
}
.spacing__prm,
.spacing__phm,
.spacing__pam {
padding-right: 0.625rem !important;
}
.spacing__prl,
.spacing__phl,
.spacing__pal {
padding-right: 1.25rem !important;
}
.spacing__pbn,
.spacing__pvn,
.spacing__pan {
padding-bottom: 0 !important;
}
.spacing__pbs,
.spacing__pvs,
.spacing__pas {
padding-bottom: 0.3125rem !important;
}
.spacing__pbm,
.spacing__pvm,
.spacing__pam {
padding-bottom: 0.625rem !important;
}
.spacing__pbl,
.spacing__pvl,
.spacing__pal {
padding-bottom: 1.25rem !important;
}
.spacing__pln,
.spacing__phn,
.spacing__pan {
padding-left: 0 !important;
}
.spacing__pls,
.spacing__phs,
.spacing__pas {
padding-left: 0.3125rem !important;
}
.spacing__plm,
.spacing__phm,
.spacing__pam {
padding-left: 0.625rem !important;
}
.spacing__pll,
.spacing__phl,
.spacing__pal {
padding-left: 1.25rem !important;
}
.spacing__mtn,
.spacing__mvn,
.spacing__man {
margin-top: 0 !important;
}
.spacing__mts,
.spacing__mvs,
.spacing__mas {
margin-top: 0.3125rem !important;
}
.spacing__mtm,
.spacing__mvm,
.spacing__mam {
margin-top: 0.625rem !important;
}
.spacing__mtl,
.spacing__mvl,
.spacing__mal {
margin-top: 1.25rem !important;
}
.spacing__mrn,
.spacing__mhn,
.spacing__man {
margin-right: 0 !important;
}
.spacing__mrs,
.spacing__mhs,
.spacing__mas {
margin-right: 0.3125rem !important;
}
.spacing__mrm,
.spacing__mhm,
.spacing__mam {
margin-right: 0.625rem !important;
}
.spacing__mrl,
.spacing__mhl,
.spacing__mal {
margin-right: 1.25rem !important;
}
.spacing__mbn,
.spacing__mvn,
.spacing__man {
margin-bottom: 0 !important;
}
.spacing__mbs,
.spacing__mvs,
.spacing__mas {
margin-bottom: 0.3125rem !important;
}
.spacing__mbm,
.spacing__mvm,
.spacing__mam {
margin-bottom: 0.625rem !important;
}
.spacing__mbl,
.spacing__mvl,
.spacing__mal {
margin-bottom: 1.25rem !important;
}
.spacing__mln,
.spacing__mhn,
.spacing__man {
margin-left: 0 !important;
}
.spacing__mls,
.spacing__mhs,
.spacing__mas {
margin-left: 0.3125rem !important;
}
.spacing__mlm,
.spacing__mhm,
.spacing__mam {
margin-left: 0.625rem !important;
}
.spacing__mll,
.spacing__mhl,
.spacing__mal {
margin-left: 1.25rem !important;
}
/**
Grid Spacing
These variables are to allow for easy application of padding equal to a
specific column width at each breakpoint.
Example:
Padding left equal to two columns at large screens
`
`
pl-l-2of12 reads "padding left | large screens | 2 of the 12 columns"
If you want to provide spacing equal to the column only (no column margins), append the spacing class
with `-mm`, aka Minus Margin
Example:
`
`
*/
@media all and (max-width: 47.9375em) {
.spacing__pl-s-5of6 {
padding-left: 76.66666667vw;
}
.spacing__pr-s-5of6 {
padding-right: 76.66666667vw;
}
.spacing__pl-s-5of6-mm {
padding-left: calc(76.66666667vw - 30px);
}
.spacing__pr-s-5of6-mm {
padding-right: calc(76.66666667vw - 30px);
}
.spacing__pl-s-4of6 {
padding-left: 61.33333333vw;
}
.spacing__pr-s-4of6 {
padding-right: 61.33333333vw;
}
.spacing__pl-s-4of6-mm {
padding-left: calc(61.33333333vw - 30px);
}
.spacing__pr-s-4of6-mm {
padding-right: calc(61.33333333vw - 30px);
}
.spacing__pl-s-3of6 {
padding-left: 46vw;
}
.spacing__pr-s-3of6 {
padding-right: 46vw;
}
.spacing__pl-s-3of6-mm {
padding-left: calc(46vw - 30px);
}
.spacing__pr-s-3of6-mm {
padding-right: calc(46vw - 30px);
}
.spacing__pl-s-2of6 {
padding-left: 30.66666667vw;
}
.spacing__pr-s-2of6 {
padding-right: 30.66666667vw;
}
.spacing__pl-s-2of6-mm {
padding-left: calc(30.66666667vw - 30px);
}
.spacing__pr-s-2of6-mm {
padding-right: calc(30.66666667vw - 30px);
}
.spacing__pl-s-1of6 {
padding-left: 15.33333333vw;
}
.spacing__pr-s-1of6 {
padding-right: 15.33333333vw;
}
.spacing__pl-s-1of6-mm {
padding-left: calc(15.33333333vw - 30px);
}
.spacing__pr-s-1of6-mm {
padding-right: calc(15.33333333vw - 30px);
}
}
@media all and (min-width: 48em) and (max-width: 61.9375em) {
.spacing__pl-m-11of12 {
padding-left: 84.33333333vw;
}
.spacing__pr-m-11of12 {
padding-right: 84.33333333vw;
}
.spacing__pl-m-11of12-mm {
padding-left: calc(84.33333333vw - 18px);
}
.spacing__pr-m-11of12-mm {
padding-right: calc(84.33333333vw - 18px);
}
.spacing__pl-m-10of12 {
padding-left: 76.66666667vw;
}
.spacing__pr-m-10of12 {
padding-right: 76.66666667vw;
}
.spacing__pl-m-10of12-mm {
padding-left: calc(76.66666667vw - 18px);
}
.spacing__pr-m-10of12-mm {
padding-right: calc(76.66666667vw - 18px);
}
.spacing__pl-m-9of12 {
padding-left: 69vw;
}
.spacing__pr-m-9of12 {
padding-right: 69vw;
}
.spacing__pl-m-9of12-mm {
padding-left: calc(69vw - 18px);
}
.spacing__pr-m-9of12-mm {
padding-right: calc(69vw - 18px);
}
.spacing__pl-m-8of12 {
padding-left: 61.33333333vw;
}
.spacing__pr-m-8of12 {
padding-right: 61.33333333vw;
}
.spacing__pl-m-8of12-mm {
padding-left: calc(61.33333333vw - 18px);
}
.spacing__pr-m-8of12-mm {
padding-right: calc(61.33333333vw - 18px);
}
.spacing__pl-m-7of12 {
padding-left: 53.66666667vw;
}
.spacing__pr-m-7of12 {
padding-right: 53.66666667vw;
}
.spacing__pl-m-7of12-mm {
padding-left: calc(53.66666667vw - 18px);
}
.spacing__pr-m-7of12-mm {
padding-right: calc(53.66666667vw - 18px);
}
.spacing__pl-m-6of12 {
padding-left: 46vw;
}
.spacing__pr-m-6of12 {
padding-right: 46vw;
}
.spacing__pl-m-6of12-mm {
padding-left: calc(46vw - 18px);
}
.spacing__pr-m-6of12-mm {
padding-right: calc(46vw - 18px);
}
.spacing__pl-m-5of12 {
padding-left: 38.33333333vw;
}
.spacing__pr-m-5of12 {
padding-right: 38.33333333vw;
}
.spacing__pl-m-5of12-mm {
padding-left: calc(38.33333333vw - 18px);
}
.spacing__pr-m-5of12-mm {
padding-right: calc(38.33333333vw - 18px);
}
.spacing__pl-m-4of12 {
padding-left: 30.66666667vw;
}
.spacing__pr-m-4of12 {
padding-right: 30.66666667vw;
}
.spacing__pl-m-4of12-mm {
padding-left: calc(30.66666667vw - 18px);
}
.spacing__pr-m-4of12-mm {
padding-right: calc(30.66666667vw - 18px);
}
.spacing__pl-m-3of12 {
padding-left: 23vw;
}
.spacing__pr-m-3of12 {
padding-right: 23vw;
}
.spacing__pl-m-3of12-mm {
padding-left: calc(23vw - 18px);
}
.spacing__pr-m-3of12-mm {
padding-right: calc(23vw - 18px);
}
.spacing__pl-m-2of12 {
padding-left: 15.33333333vw;
}
.spacing__pr-m-2of12 {
padding-right: 15.33333333vw;
}
.spacing__pl-m-2of12-mm {
padding-left: calc(15.33333333vw - 18px);
}
.spacing__pr-m-2of12-mm {
padding-right: calc(15.33333333vw - 18px);
}
.spacing__pl-m-1of12 {
padding-left: 7.66666667vw;
}
.spacing__pr-m-1of12 {
padding-right: 7.66666667vw;
}
.spacing__pl-m-1of12-mm {
padding-left: calc(7.66666667vw - 18px);
}
.spacing__pr-m-1of12-mm {
padding-right: calc(7.66666667vw - 18px);
}
}
@media all and (min-width: 62em) {
.spacing__pl-l-11of12 {
padding-left: 84.33333333vw;
}
.spacing__pr-l-11of12 {
padding-right: 84.33333333vw;
}
.spacing__pl-l-11of12-mm {
padding-left: calc(84.33333333vw - 36px);
}
.spacing__pr-l-11of12-mm {
padding-right: calc(84.33333333vw - 36px);
}
.spacing__pl-l-10of12 {
padding-left: 76.66666667vw;
}
.spacing__pr-l-10of12 {
padding-right: 76.66666667vw;
}
.spacing__pl-l-10of12-mm {
padding-left: calc(76.66666667vw - 36px);
}
.spacing__pr-l-10of12-mm {
padding-right: calc(76.66666667vw - 36px);
}
.spacing__pl-l-9of12 {
padding-left: 69vw;
}
.spacing__pr-l-9of12 {
padding-right: 69vw;
}
.spacing__pl-l-9of12-mm {
padding-left: calc(69vw - 36px);
}
.spacing__pr-l-9of12-mm {
padding-right: calc(69vw - 36px);
}
.spacing__pl-l-8of12 {
padding-left: 61.33333333vw;
}
.spacing__pr-l-8of12 {
padding-right: 61.33333333vw;
}
.spacing__pl-l-8of12-mm {
padding-left: calc(61.33333333vw - 36px);
}
.spacing__pr-l-8of12-mm {
padding-right: calc(61.33333333vw - 36px);
}
.spacing__pl-l-7of12 {
padding-left: 53.66666667vw;
}
.spacing__pr-l-7of12 {
padding-right: 53.66666667vw;
}
.spacing__pl-l-7of12-mm {
padding-left: calc(53.66666667vw - 36px);
}
.spacing__pr-l-7of12-mm {
padding-right: calc(53.66666667vw - 36px);
}
.spacing__pl-l-6of12 {
padding-left: 46vw;
}
.spacing__pr-l-6of12 {
padding-right: 46vw;
}
.spacing__pl-l-6of12-mm {
padding-left: calc(46vw - 36px);
}
.spacing__pr-l-6of12-mm {
padding-right: calc(46vw - 36px);
}
.spacing__pl-l-5of12 {
padding-left: 38.33333333vw;
}
.spacing__pr-l-5of12 {
padding-right: 38.33333333vw;
}
.spacing__pl-l-5of12-mm {
padding-left: calc(38.33333333vw - 36px);
}
.spacing__pr-l-5of12-mm {
padding-right: calc(38.33333333vw - 36px);
}
.spacing__pl-l-4of12 {
padding-left: 30.66666667vw;
}
.spacing__pr-l-4of12 {
padding-right: 30.66666667vw;
}
.spacing__pl-l-4of12-mm {
padding-left: calc(30.66666667vw - 36px);
}
.spacing__pr-l-4of12-mm {
padding-right: calc(30.66666667vw - 36px);
}
.spacing__pl-l-3of12 {
padding-left: 23vw;
}
.spacing__pr-l-3of12 {
padding-right: 23vw;
}
.spacing__pl-l-3of12-mm {
padding-left: calc(23vw - 36px);
}
.spacing__pr-l-3of12-mm {
padding-right: calc(23vw - 36px);
}
.spacing__pl-l-2of12 {
padding-left: 15.33333333vw;
}
.spacing__pr-l-2of12 {
padding-right: 15.33333333vw;
}
.spacing__pl-l-2of12-mm {
padding-left: calc(15.33333333vw - 36px);
}
.spacing__pr-l-2of12-mm {
padding-right: calc(15.33333333vw - 36px);
}
.spacing__pl-l-1of12 {
padding-left: 7.66666667vw;
}
.spacing__pr-l-1of12 {
padding-right: 7.66666667vw;
}
.spacing__pl-l-1of12-mm {
padding-left: calc(7.66666667vw - 36px);
}
.spacing__pr-l-1of12-mm {
padding-right: calc(7.66666667vw - 36px);
}
}
@media all and (min-width: 81.5em) {
.spacing__pl-l-11of12 {
padding-left: 1195.33333333px;
}
.spacing__pr-l-11of12 {
padding-right: 1195.33333333px;
}
.spacing__pl-l-11of12-mm {
padding-left: calc(1195.33333333px - 36px);
}
.spacing__pr-l-11of12-mm {
padding-right: calc(1195.33333333px - 36px);
}
.spacing__pl-l-10of12 {
padding-left: 1086.66666667px;
}
.spacing__pr-l-10of12 {
padding-right: 1086.66666667px;
}
.spacing__pl-l-10of12-mm {
padding-left: calc(1086.66666667px - 36px);
}
.spacing__pr-l-10of12-mm {
padding-right: calc(1086.66666667px - 36px);
}
.spacing__pl-l-9of12 {
padding-left: 978px;
}
.spacing__pr-l-9of12 {
padding-right: 978px;
}
.spacing__pl-l-9of12-mm {
padding-left: calc(978px - 36px);
}
.spacing__pr-l-9of12-mm {
padding-right: calc(978px - 36px);
}
.spacing__pl-l-8of12 {
padding-left: 869.33333333px;
}
.spacing__pr-l-8of12 {
padding-right: 869.33333333px;
}
.spacing__pl-l-8of12-mm {
padding-left: calc(869.33333333px - 36px);
}
.spacing__pr-l-8of12-mm {
padding-right: calc(869.33333333px - 36px);
}
.spacing__pl-l-7of12 {
padding-left: 760.66666667px;
}
.spacing__pr-l-7of12 {
padding-right: 760.66666667px;
}
.spacing__pl-l-7of12-mm {
padding-left: calc(760.66666667px - 36px);
}
.spacing__pr-l-7of12-mm {
padding-right: calc(760.66666667px - 36px);
}
.spacing__pl-l-6of12 {
padding-left: 652px;
}
.spacing__pr-l-6of12 {
padding-right: 652px;
}
.spacing__pl-l-6of12-mm {
padding-left: calc(652px - 36px);
}
.spacing__pr-l-6of12-mm {
padding-right: calc(652px - 36px);
}
.spacing__pl-l-5of12 {
padding-left: 543.33333333px;
}
.spacing__pr-l-5of12 {
padding-right: 543.33333333px;
}
.spacing__pl-l-5of12-mm {
padding-left: calc(543.33333333px - 36px);
}
.spacing__pr-l-5of12-mm {
padding-right: calc(543.33333333px - 36px);
}
.spacing__pl-l-4of12 {
padding-left: 434.66666667px;
}
.spacing__pr-l-4of12 {
padding-right: 434.66666667px;
}
.spacing__pl-l-4of12-mm {
padding-left: calc(434.66666667px - 36px);
}
.spacing__pr-l-4of12-mm {
padding-right: calc(434.66666667px - 36px);
}
.spacing__pl-l-3of12 {
padding-left: 326px;
}
.spacing__pr-l-3of12 {
padding-right: 326px;
}
.spacing__pl-l-3of12-mm {
padding-left: calc(326px - 36px);
}
.spacing__pr-l-3of12-mm {
padding-right: calc(326px - 36px);
}
.spacing__pl-l-2of12 {
padding-left: 217.33333333px;
}
.spacing__pr-l-2of12 {
padding-right: 217.33333333px;
}
.spacing__pl-l-2of12-mm {
padding-left: calc(217.33333333px - 36px);
}
.spacing__pr-l-2of12-mm {
padding-right: calc(217.33333333px - 36px);
}
.spacing__pl-l-1of12 {
padding-left: 108.66666667px;
}
.spacing__pr-l-1of12 {
padding-right: 108.66666667px;
}
.spacing__pl-l-1of12-mm {
padding-left: calc(108.66666667px - 36px);
}
.spacing__pr-l-1of12-mm {
padding-right: calc(108.66666667px - 36px);
}
}
/*
Text Align
Simple classes to adjust your text alignment. They can be added to individual elements or on wrapping elements (an outer `div`, perhaps) to adjust the alignment of all the child elements.
*/
.presentational__align-left {
text-align: left;
}
.presentational__align-center {
text-align: center;
}
.presentational__align-right {
text-align: right;
}
.presentational__align-sub {
vertical-align: sub;
}
.presentational__align-middle {
vertical-align: middle;
}
.presentational__align-top {
vertical-align: top;
}
/*
Floats
Next, we have classes for floating elements.
*/
.presentational__float-left {
float: left;
}
.presentational__float-center {
margin-left: auto;
margin-right: auto;
}
.presentational__float-right {
float: right;
}
.presentational__float-none {
float: none;
}
.presentational__clear {
clear: both;
}
/*
"New Line"
Turns an `inline` or `inline-block` element into a `block` one.
*/
.presentational__new-line {
display: block;
}
.presentational__group {
/* Mixins */
}
.presentational__group:before,
.presentational__group:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.presentational__group:after {
clear: both;
}
/*
"Is Hidden"
Visually hides content in a way that leaves it accessible to screen readers.
Like more magic, makes the visible invisible.
*/
.presentational__is-hidden {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.presentational__is-hidden.focusable:active,
.presentational__is-hidden.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .presentational__is-hidden a,
body:hover .presentational__is-hidden input,
body:hover .presentational__is-hidden button {
display: none;
}
@media all and (max-width: 47.9375em) {
.presentational__is-hidden-small {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.presentational__is-hidden-small.focusable:active,
.presentational__is-hidden-small.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .presentational__is-hidden-small a,
body:hover .presentational__is-hidden-small input,
body:hover .presentational__is-hidden-small button {
display: none;
}
}
@media all and (min-width: 48em) and (max-width: 61.9375em) {
.presentational__is-hidden-medium {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.presentational__is-hidden-medium.focusable:active,
.presentational__is-hidden-medium.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .presentational__is-hidden-medium a,
body:hover .presentational__is-hidden-medium input,
body:hover .presentational__is-hidden-medium button {
display: none;
}
}
@media all and (min-width: 62em) {
.presentational__is-hidden-large {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.presentational__is-hidden-large.focusable:active,
.presentational__is-hidden-large.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .presentational__is-hidden-large a,
body:hover .presentational__is-hidden-large input,
body:hover .presentational__is-hidden-large button {
display: none;
}
}
/*
"Isn't Hidden"
Undoes `.is-hidden`.
*/
.presentational__isnt-hidden {
/* Mixins */
width: auto;
height: auto;
margin: 0;
position: relative;
clip: auto;
}
body:hover .presentational__isnt-hidden a,
body:hover .presentational__isnt-hidden input,
body:hover .presentational__isnt-hidden button {
display: inline-block;
}
.lte7 body:hover .presentational__isnt-hidden a,
.lte7 body:hover .presentational__isnt-hidden input,
.lte7 body:hover .presentational__isnt-hidden button {
display: inline;
zoom: 1;
}
/*
"Relative Container"
Exactly what it sounds like.
*/
.presentational__relative-container {
position: relative;
}
html.presentational__no-scroll,
body.presentational__no-scroll {
height: 100%;
width: 100%;
overflow: hidden;
position: fixed;
}
/**
* Globals
*/
.icons__icon,
.shell__v2-content svg:not([class]) {
height: 1em;
width: 1em;
overflow: hidden;
}
.images__figcaption,
.minorCampaign__figcaption {
background: #02948a;
color: #fff;
font-family: "kepler-std", "Times New Roman", Times, Georgia, serif;
padding: 1.25rem 2.25rem;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3);
}
@media all and (min-width: 48em) {
.images__figcaption,
.minorCampaign__figcaption {
width: 80%;
}
}
/*
"Responive Iframe"
Iframe maintains aspect ratio as screen resizes.
Height and width can be provided to the .iframe__responsive--container mixin, but it defaults to a 16:9 ratio.
*/
.iframe__responsive {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.iframe__responsive--container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.v2-content a:focus,
.v2-content a:active,
.v2-content a:hover {
outline: 0;
}
/*
Interactive Elements
*/
/*
Buttons
Default interactive button styles. This `.btn` class can be applied to ``,
``, or `Default
Primary
Danger
````
*/
.buttons__base,
[class*="buttons__"],
.buttons__primary,
.buttons__secondary,
.buttons__disabled,
.buttons__inverse,
.donationForm__button,
.buttons__primary--large,
.buttons__primary--small,
.buttons__secondary--large,
.buttons__secondary--small,
.buttons__disabled--large,
.buttons__disabled--small,
.buttons__inverse--full,
.buttons__primary--large--small,
.buttons__primary--small--large,
.buttons__secondary--large--small,
.buttons__secondary--small--large,
.buttons__disabled--large--small,
.buttons__disabled--small--large {
width: auto;
height: auto;
margin: 0;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
line-height: 1;
letter-spacing: 0.0125em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
position: relative;
-webkit-appearance: none;
background-clip: padding-box;
outline: 0;
border: 0;
border-radius: 3px;
overflow: visible;
cursor: pointer;
vertical-align: middle;
display: inline-block;
background: #d27523;
color: #fff;
padding: 0.625rem 1.125rem;
font-family: "Trade Gothic Bold Cond", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
}
@media all and (max-width: 47.9375em) {
.buttons__base,
[class*="buttons__"],
.buttons__primary,
.buttons__secondary,
.buttons__disabled,
.buttons__inverse,
.donationForm__button,
.buttons__primary--large,
.buttons__primary--small,
.buttons__secondary--large,
.buttons__secondary--small,
.buttons__disabled--large,
.buttons__disabled--small,
.buttons__inverse--full,
.buttons__primary--large--small,
.buttons__primary--small--large,
.buttons__secondary--large--small,
.buttons__secondary--small--large,
.buttons__disabled--large--small,
.buttons__disabled--small--large {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
p > .buttons__base,
p > [class*="buttons__"],
p > .buttons__primary,
p > .buttons__secondary,
p > .buttons__disabled,
p > .buttons__inverse,
p > .buttons__primary--large,
p > .buttons__primary--small,
p > .buttons__secondary--large,
p > .buttons__secondary--small,
p > .buttons__disabled--large,
p > .buttons__disabled--small,
p > .buttons__inverse--full,
p > .buttons__primary--large--small,
p > .buttons__primary--small--large,
p > .buttons__secondary--large--small,
p > .buttons__secondary--small--large,
p > .buttons__disabled--large--small,
p > .buttons__disabled--small--large {
margin-top: 0;
}
.buttons__base:hover,
[class*="buttons__"]:hover,
.buttons__base.is-current,
[class*="buttons__"].is-current,
.buttons__primary:hover,
.buttons__primary.is-current,
.buttons__secondary:hover,
.buttons__secondary.is-current,
.buttons__disabled:hover,
.buttons__disabled.is-current,
.buttons__inverse:hover,
.buttons__inverse.is-current,
.buttons__primary--large:hover,
.buttons__primary--large.is-current,
.buttons__primary--small:hover,
.buttons__primary--small.is-current,
.buttons__secondary--large:hover,
.buttons__secondary--large.is-current,
.buttons__secondary--small:hover,
.buttons__secondary--small.is-current,
.buttons__disabled--large:hover,
.buttons__disabled--large.is-current,
.buttons__disabled--small:hover,
.buttons__disabled--small.is-current,
.buttons__inverse--full:hover,
.buttons__inverse--full.is-current,
.buttons__primary--large--small:hover,
.buttons__primary--large--small.is-current,
.buttons__primary--small--large:hover,
.buttons__primary--small--large.is-current,
.buttons__secondary--large--small:hover,
.buttons__secondary--large--small.is-current,
.buttons__secondary--small--large:hover,
.buttons__secondary--small--large.is-current,
.buttons__disabled--large--small:hover,
.buttons__disabled--large--small.is-current,
.buttons__disabled--small--large:hover,
.buttons__disabled--small--large.is-current {
background: #994800;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.buttons__base:focus,
[class*="buttons__"]:focus,
.buttons__primary:focus,
.buttons__secondary:focus,
.buttons__disabled:focus,
.buttons__inverse:focus,
.buttons__primary--large:focus,
.buttons__primary--small:focus,
.buttons__secondary--large:focus,
.buttons__secondary--small:focus,
.buttons__disabled--large:focus,
.buttons__disabled--small:focus,
.buttons__inverse--full:focus,
.buttons__primary--large--small:focus,
.buttons__primary--small--large:focus,
.buttons__secondary--large--small:focus,
.buttons__secondary--small--large:focus,
.buttons__disabled--large--small:focus,
.buttons__disabled--small--large:focus {
outline: 2px solid #217e78;
outline-offset: 2px;
}
.buttons--full {
width: 100%;
display: block;
}
.buttons__primary,
.buttons__primary--large,
.buttons__primary--small,
.buttons__primary--large--small,
.buttons__primary--small--large {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
@media all and (max-width: 47.9375em) {
.buttons__primary,
.buttons__primary--large,
.buttons__primary--small,
.buttons__primary--large--small,
.buttons__primary--small--large {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.buttons__primary--large,
.buttons__primary--small--large {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
@media all and (max-width: 47.9375em) {
.buttons__primary--large,
.buttons__primary--large--large,
.buttons__primary--small--large,
.buttons__primary--large--small--large,
.buttons__primary--small--large--large {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.buttons__primary--large,
.buttons__primary--large--large,
.buttons__primary--small--large,
.buttons__primary--large--small--large,
.buttons__primary--small--large--large {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.buttons__primary--small,
.buttons__primary--large--small {
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
}
.buttons__secondary,
.buttons__secondary--large,
.buttons__secondary--small,
.buttons__secondary--large--small,
.buttons__secondary--small--large {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
background: #4b372b;
}
@media all and (max-width: 47.9375em) {
.buttons__secondary,
.buttons__secondary--large,
.buttons__secondary--small,
.buttons__secondary--large--small,
.buttons__secondary--small--large {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.buttons__secondary:hover,
.buttons__secondary--large:hover,
.buttons__secondary--small:hover,
.buttons__secondary--large--small:hover,
.buttons__secondary--small--large:hover {
background: #241912;
}
.buttons__secondary--large,
.buttons__secondary--small--large {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
@media all and (max-width: 47.9375em) {
.buttons__secondary--large,
.buttons__secondary--large--large,
.buttons__secondary--small--large,
.buttons__secondary--large--small--large,
.buttons__secondary--small--large--large {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.buttons__secondary--large,
.buttons__secondary--large--large,
.buttons__secondary--small--large,
.buttons__secondary--large--small--large,
.buttons__secondary--small--large--large {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.buttons__secondary--large:hover,
.buttons__secondary--large--large:hover,
.buttons__secondary--small--large:hover,
.buttons__secondary--large--small--large:hover,
.buttons__secondary--small--large--large:hover {
background: #241912;
}
.buttons__secondary--small,
.buttons__secondary--large--small {
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
}
.buttons__secondary--small:hover,
.buttons__secondary--large--small:hover,
.buttons__secondary--small--small:hover,
.buttons__secondary--large--small--small:hover,
.buttons__secondary--small--large--small:hover {
background: #241912;
}
.buttons__disabled,
.buttons__disabled--large,
.buttons__disabled--small,
.buttons__disabled--large--small,
.buttons__disabled--small--large {
background: #a5a4a2;
color: #71706e;
cursor: default;
}
.buttons__disabled:hover,
.buttons__disabled--large:hover,
.buttons__disabled--small:hover,
.buttons__disabled--large--small:hover,
.buttons__disabled--small--large:hover {
background: #a5a4a2;
box-shadow: none;
}
.buttons__disabled--large,
.buttons__disabled--small--large {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
@media all and (max-width: 47.9375em) {
.buttons__disabled--large,
.buttons__disabled--large--large,
.buttons__disabled--small--large,
.buttons__disabled--large--small--large,
.buttons__disabled--small--large--large {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.buttons__disabled--large,
.buttons__disabled--large--large,
.buttons__disabled--small--large,
.buttons__disabled--large--small--large,
.buttons__disabled--small--large--large {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.buttons__disabled--large:hover,
.buttons__disabled--large--large:hover,
.buttons__disabled--small--large:hover,
.buttons__disabled--large--small--large:hover,
.buttons__disabled--small--large--large:hover {
background: #a5a4a2;
box-shadow: none;
}
.buttons__disabled--small,
.buttons__disabled--large--small {
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
}
.buttons__disabled--small:hover,
.buttons__disabled--large--small:hover,
.buttons__disabled--small--small:hover,
.buttons__disabled--large--small--small:hover,
.buttons__disabled--small--large--small:hover {
background: #a5a4a2;
box-shadow: none;
}
.buttons__inverse,
.buttons__inverse--full {
margin: 2px;
border: 3px solid #fff;
border-radius: 3px;
box-shadow: 0 0 0 3px #241912;
background: transparent;
color: #241912;
font-family: "Trade Gothic Bold Cond", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
@media all and (max-width: 47.9375em) {
.buttons__inverse,
.buttons__inverse--full {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.buttons__inverse:focus,
.buttons__inverse:hover,
.buttons__inverse--full:focus,
.buttons__inverse--full:hover {
background: #02948a;
color: #fff;
box-shadow: 0 0 0 3px #02948a;
}
.buttons__inverse--full {
width: 100%;
display: block;
}
.buttons__no-button,
.donationForm__close {
background: transparent;
color: #241912;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
}
.buttons__no-button:hover,
.buttons__no-button:focus,
.donationForm__close:hover,
.donationForm__close:focus {
background: transparent;
color: #241912;
}
.pointer-events__none {
pointer-events: none;
}
@media all and (min-width: 48em) {
.js-herald-animate {
transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.js-herald-animate:not(.scrollingAnimation__scroll-to) {
opacity: 0;
transform: translateY(40px);
}
}
.shell__v2-content {
width: 100%;
}
.patternsColorSwatch {
padding: 2.5rem 1.125rem 1.25rem 1.125rem;
color: #fff;
width: 100%;
font-size: 14px;
}
.patternsColorSwatch--teal {
background: #02948a;
}
.patternsColorSwatch--dark-teal {
background: #0e7d74;
}
.patternsColorSwatch--yellow {
background: #f4c033;
}
.patternsColorSwatch--small-button-orange {
background: #af621e;
}
.patternsColorSwatch--dark-orange {
background: #994800;
}
.patternsColorSwatch--orange {
background: #d27523;
}
.patternsColorSwatch--dark-red {
background: #c44440;
}
.patternsColorSwatch--red {
background: #cc4743;
}
.patternsColorSwatch--warm-brown {
background: #815a44;
}
.patternsColorSwatch--body-text-brown {
background: #241912;
}
.patternsColorSwatch--headline-brown {
background: #4b372b;
}
.patternsColorSwatch--cream {
background: #f9f5ee;
color: #241912;
}
.patternsColorSwatch--dark-grey {
background: #a5a4a2;
}
.patternsColorSwatch--light-grey {
background: #dcdcdc;
color: #241912;
}
.patternsColorSwatch--grey {
background: #71706e;
}
.patternsNav {
position: relative;
height: 66px;
z-index: 20;
width: 100%;
}
.patternsNav__sticky {
padding: 0.625rem 0;
background: #fff;
border-bottom: 1px solid #71706e;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.patternsNav__row {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: justify;
justify-content: space-between;
}
.patternsNav__list {
padding-left: 0;
list-style: none outside none;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 0;
}
.patternsNav__list--main {
-ms-flex-pack: end;
justify-content: flex-end;
}
.patternsNav__item {
padding: 0.625rem 1.125rem;
}
.patternsNav__side-nav {
position: fixed;
top: 0;
left: 0;
width: 220px;
height: 100vh;
padding: 67.25px 1.125rem 1.25rem;
background: #fff;
z-index: 19;
overflow-x: scroll;
transition: transform 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.patternsNav__side-nav:not(.is-revealed) {
transform: translateX(-101%);
}
.patternsHome__wrapper {
transition: transform 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95), margin-left 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@media all and (min-width: 48em) {
.patternsHome__wrapper {
width: calc(92% - 220px);
}
}
.patternsHome__wrapper.is-revealed {
transform: translateX(220px);
}
.patternsHome__section-heading {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
border-bottom: 1px solid #241912;
}
.patternsHome__tab-list {
list-style: none;
padding-left: 0;
margin-top: 1.25rem;
}
.patternsHome__tab-list:before,
.patternsHome__tab-list:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.patternsHome__tab-list:after {
clear: both;
}
.patternsHome__tab-list li {
float: left;
}
.patternsHome__tab-link {
padding-left: 0.5625rem;
padding-right: 0.5625rem;
}
.patternsHome__reveal-target:not(.is-revealed) {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.patternsHome__reveal-target:not(.is-revealed).focusable:active,
.patternsHome__reveal-target:not(.is-revealed).focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .patternsHome__reveal-target:not(.is-revealed) a,
body:hover .patternsHome__reveal-target:not(.is-revealed) input,
body:hover .patternsHome__reveal-target:not(.is-revealed) button {
display: none;
}
.patternsHome__section {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.patternsHome__heading {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
font-family: "Trade Gothic Bold Cond", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
text-align: left;
margin-top: 1.25rem;
}
@media all and (max-width: 47.9375em) {
.patternsHome__heading {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.patternsHome__heading {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.patternsHome__heading--secondary {
font-family: "Weekly", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
margin-top: 0.625rem;
}
@media all and (max-width: 47.9375em) {
.patternsHome__heading--secondary {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.patternsHome__img--dynamic {
position: absolute;
top: 0;
right: 0;
z-index: 1;
max-width: none;
height: 100%;
width: 100%;
object-fit: cover;
}
.patternsHome__colorblock--figure {
position: relative;
margin-top: 0;
line-height: 0;
}
.patternsHome__colorblock--figure:before {
position: absolute;
width: calc(100% - (92% / 12));
height: calc(100% + 100px);
content: '';
background: transparent;
z-index: 0;
left: 0;
top: 50%;
transform: translate(-2rem, -50%);
background: #cc4743;
}
@media all and (min-width: 81.5em) {
.patternsHome__colorblock--figure:before {
width: calc(100% - (1200px / 12) + 1.125rem);
transform: translate(0, -50%);
}
}
@media all and (max-width: 47.9375em) {
.patternsHome__colorblock--figure:before {
width: 100%;
height: calc(100% - 1.25rem);
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(0, 2.5rem);
}
}
.patternsHome__colorblock--img {
-o-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
position: relative;
transform: translateX(-100%);
left: 100%;
z-index: 1;
}
@media all and (max-width: 47.9375em) {
.patternsHome__colorblock--img {
position: relative;
transform: none;
top: auto;
right: auto;
left: auto;
margin: 0 auto;
display: block;
}
}
.donationForm {
position: relative;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.3);
}
@media all and (min-width: 48em) {
.donationForm__abandonment.is-active .donationForm {
display: block;
margin: 2.5rem auto 0 auto;
}
}
.donationForm__step-one {
padding-bottom: 2.5rem;
}
.donationForm__step-two {
display: block;
}
.donationForm__step-two:not(.is-revealed) {
display: none;
}
.donationForm__content {
background: #fff;
padding-top: 2.5rem;
}
.donationForm__header {
font-family: "Trade Gothic Bold Cond", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
color: #815a44;
}
@media all and (max-width: 47.9375em) {
.donationForm__header {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.donationForm__header {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.donationForm__subheader {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
font-family: "Trade Gothic Bold Cond", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
margin-top: 0;
margin-bottom: 1.25rem;
color: #815a44;
text-align: left;
}
@media all and (max-width: 47.9375em) {
.donationForm__subheader {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.donationForm__subheader {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.donationForm__help {
display: inline-block;
height: 24px;
width: 14.5625px;
padding-left: 0.28125rem;
padding-right: 0.28125rem;
position: relative;
}
.donationForm__help:hover .donationForm__help-text,
.donationForm__help:focus .donationForm__help-text {
width: auto;
height: auto;
margin: 0;
position: relative;
clip: auto;
width: 90vw;
display: block;
position: absolute;
overflow: visible;
}
body:hover .donationForm__help:hover .donationForm__help-text a,
body:hover .donationForm__help:focus .donationForm__help-text a,
body:hover .donationForm__help:hover .donationForm__help-text input,
body:hover .donationForm__help:focus .donationForm__help-text input,
body:hover .donationForm__help:hover .donationForm__help-text button,
body:hover .donationForm__help:focus .donationForm__help-text button {
display: inline-block;
}
.lte7 body:hover .donationForm__help:hover .donationForm__help-text a,
.lte7 body:hover .donationForm__help:focus .donationForm__help-text a,
.lte7 body:hover .donationForm__help:hover .donationForm__help-text input,
.lte7 body:hover .donationForm__help:focus .donationForm__help-text input,
.lte7 body:hover .donationForm__help:hover .donationForm__help-text button,
.lte7 body:hover .donationForm__help:focus .donationForm__help-text button {
display: inline;
zoom: 1;
}
.donationForm__help-icon {
height: 14px;
width: 14px;
fill: #241912;
display: block;
}
.donationForm__help-text {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
max-width: 325px;
padding: 1.25rem 1.125rem;
background: #241912;
color: #fff;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
}
.donationForm__help-text.focusable:active,
.donationForm__help-text.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .donationForm__help-text a,
body:hover .donationForm__help-text input,
body:hover .donationForm__help-text button {
display: none;
}
.donationForm__help-text:before {
content: '';
height: 0;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #241912;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
.donationForm__button-container {
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-pack: stretch;
justify-content: stretch;
position: relative;
}
.donationForm__button {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
line-height: 1;
width: 50%;
background: #4b372b;
}
@media all and (max-width: 47.9375em) {
.donationForm__button {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.donationForm__button:hover {
background: #241912;
}
.donationForm__button-container--single .donationForm__button {
width: 100%;
}
.donationForm__button.is-active {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
padding-top: 0;
padding-bottom: 2px;
background: #fff;
color: #815a44;
position: relative;
}
@media all and (max-width: 47.9375em) {
.donationForm__button.is-active {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.donationForm__button.is-active {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.donationForm__button.is-active:before {
content: '';
height: 12px;
width: 100%;
position: absolute;
bottom: 100%;
right: 0;
left: 0;
background: #fff;
}
.donationForm__button.is-active:hover {
background: #fff;
}
.donationForm__section-break {
margin-top: 2.5rem;
padding-top: 2.5rem;
position: relative;
}
.donationForm__section-break:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 2px;
width: 80%;
max-width: 300px;
background: #815a44;
}
.donationForm__upsell {
position: absolute;
top: 10%;
right: 0;
width: 33.3333vw;
text-align: center;
background: #fff;
padding: 2.5rem 2.25rem;
z-index: -1;
display: none;
box-shadow: inset 7px 0 9px -7px rgba(0, 0, 0, 0.3), 0 5px 5px -5px rgba(0, 0, 0, 0.3), 5px 0 5px -5px rgba(0, 0, 0, 0.3), 0 -5px 5px -5px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: transform 320ms cubic-bezier(0.075, 0.82, 0.165, 1), opacity 220ms cubic-bezier(0.39, 0.575, 0.565, 1) 50ms;
}
.donationForm__upsell.is-active {
transform: translateX(100%);
opacity: 1;
z-index: 1;
}
.donationForm__upsell-button {
margin: 0 auto;
}
@media all and (min-width: 48em) {
.donationForm__upsell {
display: block;
}
}
@media all and (min-width: 62em) {
.donationForm__upsell {
max-width: 350px;
}
}
@media all and (min-width: 48em) {
.donationForm__abandonment.is-active .donationForm__upsell {
display: none;
}
}
.donationForm__upsell-logo {
width: 133px;
height: 50px;
display: block;
margin: 0 auto;
fill: #815a44;
}
.donationForm__upsell-title {
text-align: center;
width: 100%;
display: block;
margin-top: 0.625rem;
padding-top: 0.625rem;
position: relative;
color: #815a44;
}
.donationForm__upsell-title:before {
content: '';
width: 90%;
max-width: 70px;
height: 2px;
background: #815a44;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.donationForm__states:not(.is-revealed) {
display: none;
}
.donationForm__country[data-billing-country="other"]:not(.is-revealed) {
display: none;
}
.donationForm__continue-container {
border-top: 1px solid #815a44;
margin-top: 2.5rem;
padding-top: 2.5rem;
}
.donationForm__continue-container.is-revealed {
display: none;
}
.donationForm__continue {
float: left;
}
.donationForm__amount-total {
float: right;
}
.donationForm__amount-total-footer {
text-align: left;
width: 100%;
}
@media all and (max-width: 47.9375em) {
.donationForm__amount-total-footer {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
}
.donationForm__total {
margin-top: 0;
color: #994800;
}
@media all and (max-width: 47.9375em) {
.donationForm__amount-total-footer .donationForm__total {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
padding-right: 0.5625rem;
}
}
.donationForm__amount {
margin-top: 2px;
color: #d27523;
}
.donationForm__button-price--wrapper,
.donationForm__button-other--wrapper {
padding-top: 7px;
padding-bottom: 7px;
}
@media all and (max-width: 47.9375em) {
.donationForm__button-price--wrapper:nth-of-type(odd) {
padding-right: 0;
}
}
.donationForm__button-other--wrapper.is-revealed {
display: none;
}
.donationForm__price-other--wrapper:not(.is-revealed) {
display: none;
}
.donationForm__footer {
padding-top: 2.5rem;
padding-bottom: 3.125rem;
background: #f9f5ee;
}
.donationForm__footer-copy {
margin-top: 0;
margin-bottom: 1.25rem;
}
@media all and (max-width: 47.9375em) {
.donationForm__footer-copy {
padding-top: 0.625rem;
}
}
.donationForm__abandonment {
z-index: 2;
position: relative;
}
@media all and (min-width: 48em) {
.donationForm__abandonment.is-active {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
background: rgba(36, 25, 18, 0.97);
overflow-y: scroll;
padding-top: 5rem;
padding-bottom: 5rem;
text-align: center;
}
}
.donationForm__close {
display: none;
color: #fff;
position: absolute;
top: 0;
right: 0;
transform: translateY(-100%);
height: 30px;
width: 30px;
}
.donationForm__close:hover,
.donationForm__close:focus {
color: #f4c033;
}
@media all and (min-width: 48em) {
.donationForm__abandonment.is-active .donationForm__close {
display: block;
}
}
.donationForm__close-icon {
fill: currentColor;
height: 26px;
width: 26px;
display: block;
}
.donationForm__abandonment__title {
max-width: 700px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
display: none;
}
@media all and (min-width: 48em) {
.donationForm__abandonment.is-active .donationForm__abandonment__title {
display: block;
}
}
@media all and (min-width: 48em) {
.donationForm__abandonment.is-active .donationForm__wrapper {
width: 92%;
margin-left: auto;
margin-right: auto;
max-width: 1200px;
}
}
.donationForm__error {
font-size: 16px;
font-size: 1rem;
line-height: 1.5625;
border-color: #97A8A3;
border-style: solid;
border-width: 0 0 1px 0;
background: #cc4743;
color: #fff;
}
.donationForm__error:not(.is-active) {
border: none;
}
.radio__radio,
input[type=radio].radio__radio {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
z-index: 1;
transform: translate(-50%, -50%);
opacity: 0;
cursor: pointer;
}
.radio__label {
position: relative;
display: -ms-flexbox;
display: flex;
}
.radio__input {
position: relative;
margin: 2px;
border: 2px solid #fff;
border-radius: 3px;
width: 16px;
height: 16px;
box-shadow: 0 0 0 2px #241912;
background: #f9f5ee;
color: #fff;
}
.radio__radio:checked ~ .radio__input,
.radio__button:checked ~ .radio__input {
background: #02948a;
box-shadow: 0 0 0 2px #02948a;
}
.radio__label-text {
font-size: 16px;
font-size: 1rem;
line-height: 1;
line-height: 1.8em;
font-weight: 700;
padding: 0 0 0 5px;
}
.radioButton__radio,
input[type=radio].radioButton__radio,
.radioButton__button,
input[type=radio].radioButton__button {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
z-index: 1;
transform: translate(-50%, -50%);
opacity: 0;
cursor: pointer;
}
.radioButton__button,
input[type=radio].radioButton__button {
text-align: center;
}
.radioButton__label {
position: relative;
display: inline-block;
}
.radioButton__label--full {
width: 100%;
text-align: center;
display: block;
}
.radioButton__label-text {
font-family: "Trade Gothic Bold Cond", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
display: inline-block;
position: relative;
margin: 2px;
border: 3px solid #02948a;
border-radius: 3px;
box-shadow: 0 0 0 3px #02948a;
background: #02948a;
color: #fff;
text-align: center;
}
@media all and (max-width: 47.9375em) {
.radioButton__label-text {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.radioButton__label-text:hover,
.radioButton__label-text:focus,
.radioButton__label-text.is-current {
background: #d27523;
border-color: #d27523;
box-shadow: 0 0 0 3px #d27523;
}
.radioButton__label-text:not(.is-hidden) {
padding: 0.625rem 1.125rem;
}
.radioButton__radio:checked ~ .radioButton__label-text,
.radioButton__button:checked ~ .radioButton__label-text {
background: #d27523;
border-color: #fff;
box-shadow: 0 0 0 3px #d27523;
}
.radioButton--full .radioButton__label-text,
.radioButton--large--full .radioButton__label-text {
width: calc(100% - (3px * 2));
display: block;
}
.radioButton--large .radioButton__label-text,
.radioButton--large--full .radioButton__label-text {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
@media all and (max-width: 47.9375em) {
.radioButton--large .radioButton__label-text,
.radioButton--large--full .radioButton__label-text {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.radioButton--large .radioButton__label-text,
.radioButton--large--full .radioButton__label-text {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.radioButton--full,
.radioButton--large--full {
width: 100%;
}
.checkbox__checkbox,
input[type=checkbox].checkbox__checkbox {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
z-index: 1;
transform: translate(-50%, -50%);
opacity: 0;
cursor: pointer;
}
.checkbox__label {
position: relative;
display: -ms-flexbox;
display: flex;
}
.checkbox__input {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
position: relative;
margin: 2px;
border: 2px solid #fff;
border-radius: 3px;
width: 16px;
height: 16px;
box-shadow: 0 0 0 2px #241912;
background: #f9f5ee;
color: #fff;
}
.checkbox__input .checkbox__icon {
display: none;
}
.checkbox__checkbox:checked ~ .checkbox__input,
.checkbox__button:checked ~ .checkbox__input {
background: #02948a;
box-shadow: 0 0 0 2px #02948a;
}
.checkbox__checkbox:checked ~ .checkbox__input .checkbox__icon,
.checkbox__button:checked ~ .checkbox__input .checkbox__icon {
display: block;
}
.checkbox__label-text {
font-size: 16px;
font-size: 1rem;
line-height: 1;
line-height: 1.8em;
font-weight: 700;
padding: 0 0 0 5px;
}
.checkbox__icon {
width: 10px;
height: 12px;
}
.input__input,
input.input__input,
input[type="date"].input__input,
input[type="datetime-local"].input__input,
input[type="datetime"].input__input,
input[type="email"].input__input,
input[type="month"].input__input,
input[type="number"].input__input,
input[type="password"].input__input,
input[type="search"].input__input,
input[type="tel"].input__input,
input[type="text"].input__input,
input[type="time"].input__input,
input[type="url"].input__input,
input[type="week"].input__input {
font-family: Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: normal;
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
width: 100%;
border-radius: 7px !important;
border: 2px solid #241912;
padding: 12px 10px;
background: #fff;
position: relative;
color: #241912;
z-index: 1;
}
.input__input.isnt-empty:invalid,
.input__input.isnt-empty:valid.invalid,
.input__input.isnt-empty.invalid,
input.input__input.isnt-empty:invalid,
input[type="date"].input__input.isnt-empty:invalid,
input[type="datetime-local"].input__input.isnt-empty:invalid,
input[type="datetime"].input__input.isnt-empty:invalid,
input[type="email"].input__input.isnt-empty:invalid,
input[type="month"].input__input.isnt-empty:invalid,
input[type="number"].input__input.isnt-empty:invalid,
input[type="password"].input__input.isnt-empty:invalid,
input[type="search"].input__input.isnt-empty:invalid,
input[type="tel"].input__input.isnt-empty:invalid,
input[type="text"].input__input.isnt-empty:invalid,
input[type="time"].input__input.isnt-empty:invalid,
input[type="url"].input__input.isnt-empty:invalid,
input[type="week"].input__input.isnt-empty:invalid,
input.input__input.isnt-empty.invalid,
input[type="date"].input__input.isnt-empty.invalid,
input[type="datetime-local"].input__input.isnt-empty.invalid,
input[type="datetime"].input__input.isnt-empty.invalid,
input[type="email"].input__input.isnt-empty.invalid,
input[type="month"].input__input.isnt-empty.invalid,
input[type="number"].input__input.isnt-empty.invalid,
input[type="password"].input__input.isnt-empty.invalid,
input[type="search"].input__input.isnt-empty.invalid,
input[type="tel"].input__input.isnt-empty.invalid,
input[type="text"].input__input.isnt-empty.invalid,
input[type="time"].input__input.isnt-empty.invalid,
input[type="url"].input__input.isnt-empty.invalid,
input[type="week"].input__input.isnt-empty.invalid,
input.input__input.isnt-empty:valid.invalid,
input[type="date"].input__input.isnt-empty:valid.invalid,
input[type="datetime-local"].input__input.isnt-empty:valid.invalid,
input[type="datetime"].input__input.isnt-empty:valid.invalid,
input[type="email"].input__input.isnt-empty:valid.invalid,
input[type="month"].input__input.isnt-empty:valid.invalid,
input[type="number"].input__input.isnt-empty:valid.invalid,
input[type="password"].input__input.isnt-empty:valid.invalid,
input[type="search"].input__input.isnt-empty:valid.invalid,
input[type="tel"].input__input.isnt-empty:valid.invalid,
input[type="text"].input__input.isnt-empty:valid.invalid,
input[type="time"].input__input.isnt-empty:valid.invalid,
input[type="url"].input__input.isnt-empty:valid.invalid,
input[type="week"].input__input.isnt-empty:valid.invalid {
border-color: #cc4743;
color: #cc4743;
}
.input__input.isnt-empty:invalid:focus,
.input__input.isnt-empty:valid.invalid:focus,
.input__input.isnt-empty.invalid:focus,
.input__input.isnt-empty:invalid:hover,
.input__input.isnt-empty:valid.invalid:hover,
.input__input.isnt-empty.invalid:hover {
box-shadow: 0 0 2px #cc4743;
}
.input__input.isnt-empty:valid,
input.input__input.isnt-empty:valid,
input[type="date"].input__input.isnt-empty:valid,
input[type="datetime-local"].input__input.isnt-empty:valid,
input[type="datetime"].input__input.isnt-empty:valid,
input[type="email"].input__input.isnt-empty:valid,
input[type="month"].input__input.isnt-empty:valid,
input[type="number"].input__input.isnt-empty:valid,
input[type="password"].input__input.isnt-empty:valid,
input[type="search"].input__input.isnt-empty:valid,
input[type="tel"].input__input.isnt-empty:valid,
input[type="text"].input__input.isnt-empty:valid,
input[type="time"].input__input.isnt-empty:valid,
input[type="url"].input__input.isnt-empty:valid,
input[type="week"].input__input.isnt-empty:valid {
border-color: #02948a;
color: #02948a;
}
.input__input.isnt-empty:valid:focus,
.input__input.isnt-empty:valid:hover {
box-shadow: 0 0 2px #02948a;
}
.input__input.is-required,
input.input__input.is-required,
input[type="date"].input__input.is-required,
input[type="datetime-local"].input__input.is-required,
input[type="datetime"].input__input.is-required,
input[type="email"].input__input.is-required,
input[type="month"].input__input.is-required,
input[type="number"].input__input.is-required,
input[type="password"].input__input.is-required,
input[type="search"].input__input.is-required,
input[type="tel"].input__input.is-required,
input[type="text"].input__input.is-required,
input[type="time"].input__input.is-required,
input[type="url"].input__input.is-required,
input[type="week"].input__input.is-required {
border-color: #cc4743;
color: #cc4743;
}
.input__input.is-required:focus,
.input__input.is-required:hover,
input.input__input.is-required:focus,
input[type="date"].input__input.is-required:focus,
input[type="datetime-local"].input__input.is-required:focus,
input[type="datetime"].input__input.is-required:focus,
input[type="email"].input__input.is-required:focus,
input[type="month"].input__input.is-required:focus,
input[type="number"].input__input.is-required:focus,
input[type="password"].input__input.is-required:focus,
input[type="search"].input__input.is-required:focus,
input[type="tel"].input__input.is-required:focus,
input[type="text"].input__input.is-required:focus,
input[type="time"].input__input.is-required:focus,
input[type="url"].input__input.is-required:focus,
input[type="week"].input__input.is-required:focus,
input.input__input.is-required:hover,
input[type="date"].input__input.is-required:hover,
input[type="datetime-local"].input__input.is-required:hover,
input[type="datetime"].input__input.is-required:hover,
input[type="email"].input__input.is-required:hover,
input[type="month"].input__input.is-required:hover,
input[type="number"].input__input.is-required:hover,
input[type="password"].input__input.is-required:hover,
input[type="search"].input__input.is-required:hover,
input[type="tel"].input__input.is-required:hover,
input[type="text"].input__input.is-required:hover,
input[type="time"].input__input.is-required:hover,
input[type="url"].input__input.is-required:hover,
input[type="week"].input__input.is-required:hover {
box-shadow: 0 0 2px #cc4743;
}
.input__input:focus,
.input__input:hover,
input.input__input:active,
input[type="date"].input__input:active,
input[type="datetime-local"].input__input:active,
input[type="datetime"].input__input:active,
input[type="email"].input__input:active,
input[type="month"].input__input:active,
input[type="number"].input__input:active,
input[type="password"].input__input:active,
input[type="search"].input__input:active,
input[type="tel"].input__input:active,
input[type="text"].input__input:active,
input[type="time"].input__input:active,
input[type="url"].input__input:active,
input[type="week"].input__input:active,
input.input__input:hover,
input[type="date"].input__input:hover,
input[type="datetime-local"].input__input:hover,
input[type="datetime"].input__input:hover,
input[type="email"].input__input:hover,
input[type="month"].input__input:hover,
input[type="number"].input__input:hover,
input[type="password"].input__input:hover,
input[type="search"].input__input:hover,
input[type="tel"].input__input:hover,
input[type="text"].input__input:hover,
input[type="time"].input__input:hover,
input[type="url"].input__input:hover,
input[type="week"].input__input:hover,
input.input__input:focus,
input[type="date"].input__input:focus,
input[type="datetime-local"].input__input:focus,
input[type="datetime"].input__input:focus,
input[type="email"].input__input:focus,
input[type="month"].input__input:focus,
input[type="number"].input__input:focus,
input[type="password"].input__input:focus,
input[type="search"].input__input:focus,
input[type="tel"].input__input:focus,
input[type="text"].input__input:focus,
input[type="time"].input__input:focus,
input[type="url"].input__input:focus,
input[type="week"].input__input:focus {
background: #fff;
box-shadow: 0 0 2px #241912;
}
.input__input:-ms-input-placeholder {
color: transparent !important;
}
.input__input::placeholder {
color: transparent !important;
}
.input__label {
display: block;
position: relative;
margin-bottom: calc(2.1875rem);
background: #fff;
}
.input__label-text {
font-family: Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10px;
padding: 0;
background: #fff;
color: #241912;
transition: all 0.1s ease-out;
z-index: 2;
}
.input__input:focus ~ .input__label-text,
.input__input.isnt-empty ~ .input__label-text {
font-size: 12px;
font-size: 0.75rem;
line-height: 1;
padding: 0 5px;
transform: translateY(-250%);
}
.input__input.isnt-empty:valid ~ .input__label-text {
color: #02948a;
}
.input__input.isnt-empty:invalid ~ .input__label-text,
.input__input.isnt-empty:valid.invalid ~ .input__label-text,
.input__input.isnt-empty.invalid ~ .input__label-text,
.input__input.is-required ~ .input__label-text {
color: #cc4743;
}
.input__validation {
display: block;
position: absolute;
width: 19px;
height: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
right: 10px;
}
.input__input.isnt-empty:valid ~ .input__validation .input__validation-check {
display: block;
}
.input__input.isnt-empty:invalid ~ .input__validation .input__validation-error,
.input__input.isnt-empty:valid.invalid ~ .input__validation .input__validation-error,
.input__input.isnt-empty.invalid ~ .input__validation .input__validation-error,
.input__input.is-required ~ .input__validation .input__validation-error {
display: block;
}
.input__input.isnt-empty:invalid ~ .input__validation .input__validation-check,
.input__input.isnt-empty:valid.invalid ~ .input__validation .input__validation-check,
.input__input.isnt-empty.invalid ~ .input__validation .input__validation-check,
.input__input.is-required ~ .input__validation .input__validation-check {
display: none;
}
.input__validation-check {
display: none;
}
.input__validation-error {
display: none;
}
.input__alert {
font-family: Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: normal;
font-size: 12px;
font-size: 0.75rem;
line-height: 1;
display: none;
position: absolute;
top: calc(100% + 5px);
margin: 2px 0 0 0;
color: #cc4743;
}
.input__alert--alt,
.input__alert--required {
display: none;
}
.input__input.isnt-empty:invalid ~ .input__alert,
.input__input.isnt-empty:invalid ~ .input__alert .input__alert--alt,
.input__input.isnt-empty:valid.invalid ~ .input__alert .input__alert--alt,
.input__input.isnt-empty.invalid ~ .input__alert,
.input__input.isnt-empty.invalid ~ .input__alert .input__alert--alt {
display: inline-block;
}
.input__input.is-required ~ .input__alert,
.input__input.is-required ~ .input__alert .input__alert--required {
display: inline-block;
}
.input__input.is-required ~ .input__alert .input__alert--alt {
display: none;
}
input.input__input,
input[type="date"].input__input,
input[type="datetime-local"].input__input,
input[type="datetime"].input__input,
input[type="email"].input__input,
input[type="month"].input__input,
input[type="number"].input__input,
input[type="password"].input__input,
input[type="search"].input__input,
input[type="tel"].input__input,
input[type="text"].input__input,
input[type="time"].input__input,
input[type="url"].input__input,
input[type="week"].input__input {
box-shadow: none;
}
.inputCustom__label {
font-family: Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: normal;
font-size: 48px;
font-size: 3rem;
color: #d27523;
line-height: 1;
width: 100%;
display: block;
box-shadow: none;
border-style: solid;
border-color: #d27523;
border-width: 0 0 5px 0;
border-radius: 0 !important;
text-align: left;
max-width: 100%;
}
@media all and (max-width: 47.9375em) {
.inputCustom__label {
font-size: 32px;
font-size: 2rem;
line-height: 1;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.inputCustom__label {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.inputCustom__label {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.inputCustom__label {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.inputCustom__label-text {
width: 1px;
height: 1px;
padding: 0;
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
border: 0;
overflow: hidden;
}
.inputCustom__label-text.focusable:active,
.inputCustom__label-text.focusable:focus {
width: auto;
height: auto;
margin: 0;
clip: auto;
overflow: visible;
position: static;
}
body:hover .inputCustom__label-text a,
body:hover .inputCustom__label-text input,
body:hover .inputCustom__label-text button {
display: none;
}
input[type="text"].inputCustom__input {
font-family: Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: normal;
font-size: 48px;
font-size: 3rem;
color: #d27523;
line-height: 1;
display: inline;
width: 100%;
box-shadow: none;
border: none;
padding: 0;
background: transparent;
max-width: calc(100% - 50px);
min-width: 100px;
}
@media all and (max-width: 47.9375em) {
input[type="text"].inputCustom__input {
font-size: 32px;
font-size: 2rem;
line-height: 1;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
input[type="text"].inputCustom__input {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
input[type="text"].inputCustom__input {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
input[type="text"].inputCustom__input {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
select.select__select {
display: block;
outline: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 2;
width: 100%;
height: 100%;
line-height: 1em;
max-width: 100%;
cursor: pointer;
}
.select__label {
display: block;
position: relative;
margin-bottom: calc(2.1875rem);
background: #fff;
}
.select__label-text {
font-family: Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10px;
padding: 0;
background: #fff;
color: #241912;
transition: all 0.1s ease-out;
z-index: 2;
}
.select__select:focus ~ .select__label-text,
.select__select.isnt-empty ~ .select__label-text {
font-size: 12px;
font-size: 0.75rem;
line-height: 1;
padding: 0 5px;
transform: translateY(-250%);
}
.select__select.is-required ~ .select__label-text {
color: #cc4743;
}
.select__select.isnt-empty:valid ~ .select__label-text {
color: #02948a;
}
.select__value {
font-family: Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: normal;
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
width: 100%;
border-radius: 7px !important;
border: 2px solid #241912;
padding: 12px 10px;
background: #fff;
display: inline-block;
color: transparent;
transition: color 0.15s linear;
text-align: left;
}
.select__select:focus ~ .select__value,
.select__select.isnt-empty ~ .select__value {
color: #241912;
}
.select__select:hover ~ .select__value,
.select__select:focus ~ .select__value {
box-shadow: 0 0 2px #241912;
}
.select__select.is-required ~ .select__value {
border-color: #cc4743;
color: transparent;
}
.select__select.is-required:hover ~ .select__value,
.select__select.is-required:focus ~ .select__value {
box-shadow: 0 0 2px #cc4743;
}
.select__select.isnt-empty:valid ~ .select__value {
border-color: #02948a;
color: #02948a;
}
.select__select.isnt-empty:valid:hover ~ .select__value,
.select__select.isnt-empty:valid:focus ~ .select__value {
box-shadow: 0 0 2px #02948a;
}
.select__icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
width: 15px;
height: 15px;
fill: currentColor;
}
.select__validation {
display: block;
position: absolute;
width: 19px;
height: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
right: 35px;
}
.select__select.isnt-empty:valid ~ .select__validation .select__validation-check {
display: block;
}
.select__select.is-required ~ .select__validation .select__validation-error {
display: block;
}
.select__validation-check {
display: none;
}
.select__validation-error {
display: none;
}
.select__alert {
font-family: Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: normal;
font-size: 12px;
font-size: 0.75rem;
line-height: 1;
display: none;
position: absolute;
top: calc(100% + 5px);
margin: 2px 0 0 0;
color: #cc4743;
}
.select__select.is-required ~ .select__alert,
.select__select.is-required ~ .select__alert .select__alert--required {
display: inline-block;
}
.select__select.is-required ~ .select__alert .select__alert--alt {
display: none;
}
/*! nouislider - 11.1.0 - 2018-04-02 11:18:13 */
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.slider__target,
.slider__target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
box-sizing: border-box;
}
.slider__target {
position: relative;
direction: ltr;
}
.slider__base,
.slider__connects {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
/* Wrapper for all connect elements.
*/
.slider__connects {
overflow: hidden;
z-index: 0;
}
.slider__connect,
.slider__origin {
will-change: transform;
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: 0 0;
}
/* Offset direction
*/
html:not([dir="rtl"]) .slider__horizontal .slider__origin {
left: auto;
right: 0;
}
/* Give origins 0 height/width so they don't interfere with clicking the
* connect elements.
*/
.slider__vertical .slider__origin {
width: 0;
}
.slider__horizontal .slider__origin {
height: 0;
}
.slider__handle {
position: absolute;
}
.slider__state-tap .slider__connect,
.slider__state-tap .slider__origin {
transition: transform 0.3s;
}
.slider__state-drag * {
cursor: inherit !important;
}
/* Slider size and handle placement;
*/
.slider__horizontal {
height: 18px;
}
.slider__horizontal .slider__handle {
width: 34px;
height: 28px;
left: -17px;
top: -6px;
}
.slider__vertical {
width: 18px;
}
.slider__vertical .slider__handle {
width: 28px;
height: 34px;
left: -6px;
top: -17px;
}
html:not([dir="rtl"]) .slider__horizontal .slider__handle {
right: -17px;
left: auto;
}
/* Styling;
* Giving the connect element a border radius causes issues with using transform: scale
*/
.slider__target {
background: #FAFAFA;
border-radius: 4px;
border: 1px solid #D3D3D3;
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.slider__connects {
border-radius: 3px;
}
.slider__connect {
background: #3FB8AF;
}
/* Handles and cursors;
*/
.slider__draggable {
cursor: ew-resize;
}
.slider__vertical .slider__draggable {
cursor: ns-resize;
}
.slider__handle {
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #FFF;
cursor: default;
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
.slider__active {
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
/* Handle stripes;
*/
.slider__handle:before,
.slider__handle:after {
content: "";
display: block;
position: absolute;
height: 14px;
width: 1px;
background: #E8E7E6;
left: 14px;
top: 6px;
}
.slider__handle:after {
left: 17px;
}
.slider__vertical .slider__handle:before,
.slider__vertical .slider__handle:after {
width: 14px;
height: 1px;
left: 6px;
top: 14px;
}
.slider__vertical .slider__handle:after {
top: 17px;
}
/* Disabled state;
*/
[disabled] .slider__connect {
background: #B8B8B8;
}
[disabled].slider__target,
[disabled].slider__handle,
[disabled] .slider__handle {
cursor: not-allowed;
}
/* Base;
*
*/
.slider__pips,
.slider__pips * {
box-sizing: border-box;
}
.slider__pips {
position: absolute;
color: #999;
}
/* Values;
*
*/
.slider__value {
position: absolute;
white-space: nowrap;
text-align: center;
}
.slider__value-sub {
color: #ccc;
font-size: 10px;
}
/* Markings;
*
*/
.slider__marker {
position: absolute;
background: #CCC;
}
.slider__marker-sub {
background: #AAA;
}
.slider__marker-large {
background: #AAA;
}
/* Horizontal layout;
*
*/
.slider__pips-horizontal {
padding: 10px 0;
height: 80px;
top: 100%;
left: 0;
width: 100%;
}
.slider__value-horizontal {
transform: translate(-50%, 50%);
}
.slider__rtl .slider__value-horizontal {
transform: translate(50%, 50%);
}
.slider__marker-horizontal.slider__marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
.slider__marker-horizontal.slider__marker-sub {
height: 10px;
}
.slider__marker-horizontal.slider__marker-large {
height: 15px;
}
/* Vertical layout;
*
*/
.slider__pips-vertical {
padding: 0 10px;
height: 100%;
top: 0;
left: 100%;
}
.slider__value-vertical {
transform: translate(0, -50%, 0);
padding-left: 25px;
}
.slider__rtl .slider__value-vertical {
transform: translate(0, 50%);
}
.slider__marker-vertical.slider__marker {
width: 5px;
height: 2px;
margin-top: -1px;
}
.slider__marker-vertical.slider__marker-sub {
width: 10px;
}
.slider__marker-vertical.slider__marker-large {
width: 15px;
}
.slider__tooltip {
display: block;
position: absolute;
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #fff;
color: #000;
padding: 5px;
text-align: center;
white-space: nowrap;
}
.slider__horizontal .slider__tooltip {
transform: translate(-50%, 0);
left: 50%;
bottom: 120%;
}
.slider__vertical .slider__tooltip {
transform: translate(0, -50%);
top: 50%;
right: 120%;
}
/**
* Slider styles start here
* By going below, we can override
*/
.slider__slider {
width: 100%;
padding: 40px 0;
}
.slider__target {
background: #4b372b;
border: none;
height: 32px;
}
.slider__target:before {
content: '';
height: 2px;
width: 90%;
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
background: repeating-linear-gradient(to right, #815a44, #815a44 5px, #4b372b 5px, #4b372b 10px);
}
@media all and (min-width: 48em) {
.slider__target {
height: 40px;
}
}
.slider__price,
.slider__min,
.slider__max {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
letter-spacing: 0.01277777em;
line-height: 1;
color: #fff;
background: #4b372b;
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-left: 0.25rem;
padding-right: 0.25rem;
}
@media all and (max-width: 47.9375em) {
.slider__price,
.slider__min,
.slider__max {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
@media all and (min-width: 48em) {
.slider__price,
.slider__min,
.slider__max {
font-size: 24px;
font-size: 1.5rem;
letter-spacing: 0.0125em;
line-height: 1;
}
}
@media all and (min-width: 48em) and all and (max-width: 47.9375em) {
.slider__price,
.slider__min,
.slider__max {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (min-width: 48em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.slider__price,
.slider__min,
.slider__max {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.slider__min {
left: 10px;
}
.slider__max {
right: 10px;
}
.slider__horizontal .slider__handle {
width: 75px;
height: 75px;
background: #fff;
border: 8px solid #4b372b;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
top: -22px;
border-radius: 50%;
}
.slider__horizontal .slider__handle:before,
.slider__horizontal .slider__handle:after {
display: none;
}
@media all and (min-width: 48em) {
.slider__horizontal .slider__handle {
width: 96px;
height: 96px;
top: -27px;
}
}
.slider__horizontal .slider__tooltip {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
color: #241912;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: transparent;
border: none;
padding: 0;
height: 24px;
}
@media all and (max-width: 47.9375em) {
.slider__horizontal .slider__tooltip {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.slider__horizontal .slider__tooltip {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
@media all and (min-width: 48em) {
.slider__horizontal .slider__tooltip {
font-size: 32px;
font-size: 2rem;
line-height: 1;
height: 30px;
}
}
@media all and (min-width: 48em) and all and (max-width: 47.9375em) {
.slider__horizontal .slider__tooltip {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
}
@media all and (min-width: 48em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.slider__horizontal .slider__tooltip {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (min-width: 48em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.slider__horizontal .slider__tooltip {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
html:not([dir="rtl"]) .slider__horizontal .slider__handle {
right: -32px;
}
@media all and (min-width: 48em) {
html:not([dir="rtl"]) .slider__horizontal .slider__handle {
right: -48px;
}
}
.slider__impact {
color: #241912;
padding-bottom: 2.5rem;
width: 100%;
text-align: center;
}
.slider__impact-unit {
color: #d27523;
border-bottom: 3px solid #d27523;
}
.slider__impact-dollars {
color: #d27523;
border-bottom: 3px solid #d27523;
}
.slider__input,
.slider__dollar-input,
.slider__dollar-input[type="text"],
.slider__unit-input,
.slider__unit-input[type="text"] {
display: inline;
width: auto;
padding: 0;
border: 0;
box-shadow: none;
color: #d27523;
background: transparent;
border-radius: 0;
}
.slider__input:hover,
.slider__input:focus,
.slider__dollar-input:hover,
.slider__dollar-input:focus,
.slider__dollar-input[type="text"]:hover,
.slider__dollar-input[type="text"]:focus,
.slider__unit-input:hover,
.slider__unit-input:focus,
.slider__unit-input[type="text"]:hover,
.slider__unit-input[type="text"]:focus {
background: transparent;
box-shadow: none;
}
.slider__dollar-input,
.slider__dollar-input[type="text"] {
width: 55px;
}
.slider__unit-input,
.slider__unit-input[type="text"] {
width: 30px;
text-align: center;
}
.slider__other {
text-align: center;
width: 100%;
}
.slider__button {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
display: inline-block;
width: auto;
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
color: #d27523;
border-bottom: 1px solid #d27523;
margin-top: 2.5rem;
}
@media all and (max-width: 47.9375em) {
.slider__button {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.slider__button:hover,
.slider__button:focus {
color: #994800;
background: transparent;
}
.slider__input-container {
margin-top: 2.5rem;
max-width: 150px;
display: inline-block;
}
@media all and (min-width: 48em) {
.js-herald-animate {
transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.js-herald-animate:not(.scrollingAnimation__scroll-to) {
opacity: 0;
transform: translateY(40px);
}
}
.wysiwyg__wysiwyg {
text-align: left;
}
.wysiwyg__wysiwyg:before,
.wysiwyg__wysiwyg:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.wysiwyg__wysiwyg:after {
clear: both;
}
.wysiwyg__wysiwyg h1,
.wysiwyg__wysiwyg h2,
.wysiwyg__wysiwyg h3 {
margin: 0;
text-align: left;
}
.wysiwyg__wysiwyg h1 {
font-size: 80px;
font-size: 5rem;
line-height: 0.925;
font-family: "Trade Gothic Bold Cond", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
}
@media all and (max-width: 47.9375em) {
.wysiwyg__wysiwyg h1 {
font-size: 48px;
font-size: 3rem;
line-height: 1.08333333;
}
}
.wysiwyg__wysiwyg h2,
.wysiwyg__wysiwyg h3 {
font-family: "Weekly", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
}
.wysiwyg__wysiwyg h2 {
font-size: 48px;
font-size: 3rem;
line-height: 1.08333333;
}
@media all and (max-width: 47.9375em) {
.wysiwyg__wysiwyg h2 {
font-size: 32px;
font-size: 2rem;
line-height: 1.1875;
}
}
.wysiwyg__wysiwyg h3 {
font-size: 32px;
font-size: 2rem;
line-height: 1.1875;
}
@media all and (max-width: 47.9375em) {
.wysiwyg__wysiwyg h3 {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.16666667;
}
}
.wysiwyg__wysiwyg p {
margin: 0 0 2.5rem 0;
}
.gridLines__toggle {
position: fixed;
z-index: 100;
top: 0;
left: 0;
background: #dcdcdc;
color: #000;
padding: 0.625rem 1.125rem;
border: none;
}
.gridLines__toggle:hover,
.gridLines__toggle:focus {
background: #02948a;
color: #fff;
}
.gridLines {
position: fixed;
z-index: 99;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-align: stretch;
align-items: stretch;
}
.gridLines:not(.is-revealed) {
display: none;
}
.gridLines__line {
display: block;
width: 100%;
position: relative;
background: rgba(204, 71, 67, 0.15);
}
.gridLines__line:before,
.gridLines__line:after {
content: '';
display: block;
width: 1px;
height: 100vh;
position: absolute;
top: 0;
background: #cc4743;
}
.gridLines__line:before {
left: 0;
}
.gridLines__line:after {
right: 0;
}
.gridLines__row {
display: -ms-flexbox;
display: flex;
-ms-flex-align: stretch;
align-items: stretch;
height: 100%;
}
@media all and (max-width: 61.9375em) {
.gridLines__l {
display: none;
}
}
@media all and (max-width: 47.9375em) {
.gridLines__m {
display: none;
}
}
@media all and (min-width: 62em) {
.gridLines__m {
display: none;
}
}
@media all and (min-width: 48em) {
.gridLines__s {
display: none;
}
}
.gridLines__col {
display: -ms-flexbox;
display: flex;
-ms-flex-align: stretch;
align-items: stretch;
}
.donationPartial {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: stretch;
justify-content: stretch;
background: #f9f5ee;
overflow: hidden;
padding: 2.5rem 2.25rem;
margin: 2.5rem 0;
}
.donationPartial:before,
.donationPartial:after {
content: "\0020";
height: 0;
display: block;
overflow: hidden;
}
.donationPartial:after {
clear: both;
}
@media all and (max-width: 47.9375em) {
.donationPartial {
padding: 2.5rem 0;
}
}
.donationPartial__content-left {
position: relative;
height: 100%;
}
@media all and (min-width: 48em) {
.donationPartial__content-left {
padding-right: 0.5625rem;
}
}
@media all and (max-width: 47.9375em) {
.donationPartial__content-left {
padding-bottom: 1.25rem;
margin-bottom: 1.25rem;
}
}
.donationPartial__header {
color: #02948a;
font-family: "Trade Gothic Bold Cond", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 48px;
font-size: 3rem;
line-height: 1;
}
.donationPartial__copy {
color: #241912;
font-size: 18px;
font-size: 1.125rem;
margin-top: 25px;
}
.donationPartial__list {
color: #815a44;
list-style-type: none;
padding: 0;
}
.donationPartial__list-item {
display: -ms-flexbox;
display: flex;
}
.donationPartial__stat-num {
font-family: "Trade Gothic Bold Cond", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
font-size: 32px;
font-size: 2rem;
-ms-flex-preferred-size: 10%;
flex-basis: 10%;
}
.donationPartial__stat-num sup {
font-size: 18px;
font-size: 1.125rem;
}
.donationPartial__stat-text {
font-family: "kepler-std", "Times New Roman", Times, Georgia, serif;
font-weight: normal;
font-size: 24px;
font-size: 1.5rem;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
@media all and (max-width: 47.9375em) {
.donationPartial__stat-text {
font-size: 18px;
font-size: 1.125rem;
line-height: 1;
padding-left: 0.28125rem;
}
}
.donationPartial__separator {
position: absolute;
background: #815a44;
}
@media all and (min-width: 48em) {
.donationPartial__separator {
right: 0;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 80%;
}
}
@media all and (max-width: 47.9375em) {
.donationPartial__separator {
width: 90%;
height: 2px;
bottom: 0;
}
}
.donationPartial__subheader {
color: #815a44;
font-family: "Trade Gothic Bold Cond", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
font-size: 32px;
font-size: 2rem;
}
.donationPartial__monthly {
padding: 0.625rem 0 2.5rem 0;
}
.donationPartial__cta {
padding-top: 1.875rem;
border-top: 1px solid #241912;
}
.donationPartial__button-other--wrapper.is-revealed {
display: none;
}
.donationPartial__price-other--wrapper:not(.is-revealed) {
display: none;
}
.simpleHeader__header {
background: #fff;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
position: relative;
z-index: 2;
}
.simpleHeader__logo-link {
color: #815a44;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
display: inline-block;
}
.simpleHeader__logo-link:hover,
.simpleHeader__logo-link:focus {
color: #4b372b;
}
.simpleHeader__logo {
display: block;
width: 150px;
height: 40px;
fill: currentColor;
}
.simpleFooter {
padding: 1.25rem 0;
background: #241912;
color: #fff;
}
.simpleFooter__text {
margin-top: 0;
}
.simpleFooter a {
color: #fff;
text-decoration: underline;
}
.simpleFooter a:hover {
color: #d27523;
}
.minorCampaign {
background: radial-gradient(#f9f5ee, #f9f5ee, #dfd4b9);
padding-top: 2.5rem;
position: relative;
overflow: hidden;
}
.minorCampaign:before {
content: '';
background: linear-gradient(to bottom, #dfd4b9, #f9f5ee);
position: absolute;
top: 100px;
right: 0;
left: 10%;
bottom: 0;
height: 100%;
width: 90%;
border-top-left-radius: 100%;
transform: translateX(10%);
}
@media all and (min-width: 48em) {
.minorCampaign {
padding-top: 5rem;
}
}
.minorCampaign__heading {
font-size: 80px;
font-size: 5rem;
line-height: 1;
font-family: "Trade Gothic Bold Cond", Helvetica, Arial, "Arial Unicode", "Lucida Sans Unicode", sans-serif;
font-weight: 700;
color: #4b372b;
text-transform: uppercase;
text-align: left;
}
@media all and (max-width: 47.9375em) {
.minorCampaign__heading {
font-size: 60px;
font-size: 3.75rem;
line-height: 1;
}
}
.minorCampaign__subtitle {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
color: #241912;
}
@media all and (max-width: 47.9375em) {
.minorCampaign__subtitle {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
@media all and (max-width: 47.9375em) {
.minorCampaign__subtitle {
display: none;
}
}
.minorCampaign__form {
margin-top: 2.5rem;
position: relative;
z-index: 2;
}
.minorCampaign__figure {
position: relative;
z-index: 1;
}
@media all and (min-width: 48em) {
.minorCampaign__figure {
margin-top: 0;
transform: translateY(-50px);
}
}
@media all and (max-width: 47.9375em) {
.minorCampaign__figure {
margin: 1.5625rem 0;
}
}
.minorCampaign__figure img {
width: 100%;
height: auto;
display: block;
}
.objectfit .minorCampaign__figure img {
object-fit: cover;
object-position: center center;
height: 100%;
}
.minorCampaign__vertical-text {
font-size: 120px;
color: #f4c033;
text-align: left;
position: absolute;
left: 100%;
bottom: 0;
transform: rotate(-90deg);
margin-top: 0;
line-height: 1;
transform-origin: left center;
white-space: nowrap;
}
.minorCampaign__benefits {
position: relative;
padding-bottom: 5rem;
}
.minorCampaign__benefits:before {
content: '';
background: #f9f5ee;
width: 100%;
min-height: 100%;
position: absolute;
top: -2.5rem;
left: -4vw;
bottom: 0;
}
@media all and (min-width: 48em) {
.minorCampaign__benefits:before {
top: -5rem;
}
}
@media all and (max-width: 47.9375em) {
.minorCampaign__benefits:before {
width: calc(100% + 8vw);
}
}
@media all and (min-width: 81.5em) {
.minorCampaign__benefits:before {
left: calc((100vw - 1200px) * -0.5);
}
}
.minorCampaign__footer {
position: relative;
padding-top: 2.5rem;
padding-bottom: 3.75rem;
background: #fff;
z-index: 1;
}
.minorCampaign__footer-header {
margin-top: 0;
color: #815a44;
}
@media all and (max-width: 47.9375em) {
.minorCampaign__footer-header {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.minorCampaign__footer-header {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.minorCampaign__footer-header {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.minorCampaign__footer-link {
font-size: 18px;
font-size: 1.125rem;
line-height: 1;
display: inline-block;
color: #d27523;
text-transform: uppercase;
}
@media all and (max-width: 47.9375em) {
.minorCampaign__footer-link {
font-size: 24px;
font-size: 1.5rem;
line-height: 1;
}
}
.minorCampaign__footer-link--group {
display: -ms-flexbox;
display: flex;
}
.minorCampaign__footer-link--symbol {
height: 15px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
margin-left: 5px;
}
@media all and (max-width: 47.9375em) {
.minorCampaign__footer-link--symbol {
height: 20px;
}
}
.minorCampaign__footer-text {
margin-top: 0.9375rem;
line-height: 24px;
}
@media all and (max-width: 47.9375em) {
.minorCampaign__footer-text {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666667;
line-height: 1.5;
}
}
@media all and (max-width: 47.9375em) and all and (max-width: 47.9375em) {
.minorCampaign__footer-text {
font-size: 16px;
font-size: 1rem;
line-height: 1;
}
}
.minorCampaign__footer-item,
.minorCampaign__footer-item-pipe {
position: relative;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
@media all and (max-width: 47.9375em) {
.minorCampaign__footer-item,
.minorCampaign__footer-item-pipe {
padding: 2.5rem 0;
}
}
.minorCampaign__footer-item-pipe {
border-style: solid;
border-color: #815a44;
border-width: 0 2px 0 0;
}
@media all and (max-width: 47.9375em) {
.minorCampaign__footer-item-pipe {
border-width: 0 0 1px 0;
padding: 2.5rem 0;
}
}
/**
* Print
*/
@media print {
* {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
}
html {
font: 12pt/1.5em Georgia, "Times New Roman", Times, serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
line-height: 1.1em;
margin-bottom: 0.5em;
margin-top: 1em;
page-break-after: avoid;
orphans: 3;
widows: 3;
}
li h1,
li h2,
li h3,
li h4,
li h5,
li h6 {
margin-top: 0;
}
h1 {
font-size: 24pt;
}
h2 {
font-size: 21pt;
}
h3 {
font-size: 18pt;
}
h4 {
font-size: 16pt;
}
h5 {
font-size: 14pt;
}
h6 {
font-size: 12pt;
}
blockquote,
p,
ul,
ol,
dl,
figure,
img {
margin-bottom: 1em;
}
figure img {
margin-bottom: 0;
}
ul,
ol,
dd {
margin-left: 3em;
}
pre,
blockquote {
border-left: 0.5em solid #999;
padding-left: 1.5em;
page-break-inside: avoid;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
figcaption {
text-transform: uppercase;
font-size: 10pt;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
form,
video,
nav {
display: none !important;
}
@page {
margin: 2cm;
}
}
/**
* Prototype Styles
* REMOVE WHEN BEGINNING PRODUCTION
*/
/*# sourceMappingURL=../build/css/maps/global-v2.css.map */