/* ==========================================================================
$BASE-PICKER
========================================================================== */
/**
* Note: the root picker element should *NOT* be styled more than what’s here.
*/
.picker {
font-size: 16px;
text-align: left;
line-height: 1.2;
color: #000000;
position: absolute;
z-index: 10000;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/**
* The picker input element.
*/
.picker__input {
cursor: default;
}
/**
* When the picker is opened, the input element is “activated”.
*/
.picker__input.picker__input--active {
border-color: #0089ec;
}
/**
* The holder is the only “scrollable” top-level container element.
*/
.picker__holder {
width: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/*!
* Default mobile-first, responsive styling for pickadate.js
* Demo: http://amsul.github.io/pickadate.js
*/
/**
* Note: the root picker element should *NOT* be styled more than what’s here.
*/
/**
* Make the holder and frame fullscreen.
*/
.picker__holder,
.picker__frame {
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
/**
* The holder should overlay the entire screen.
*/
.picker__holder {
position: fixed;
transition: background 0.15s ease-out, -webkit-transform 0s 0.15s;
transition: background 0.15s ease-out, transform 0s 0.15s;
-webkit-backface-visibility: hidden;
}
/**
* The frame that bounds the box contents of the picker.
*/
.picker__frame {
position: absolute;
margin: 0 auto;
min-width: 256px;
max-width: 666px;
width: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
transition: all 0.15s ease-out;
}
@media (min-height: 33.875em) {
.picker__frame {
overflow: visible;
top: auto;
bottom: -100%;
max-height: 80%;
}
}
@media (min-height: 40.125em) {
.picker__frame {
margin-bottom: 7.5%;
}
}
/**
* The wrapper sets the stage to vertically align the box contents.
*/
.picker__wrap {
display: table;
width: 100%;
height: 100%;
}
@media (min-height: 33.875em) {
.picker__wrap {
display: block;
}
}
/**
* The box contains all the picker contents.
*/
.picker__box {
background: #ffffff;
display: table-cell;
vertical-align: middle;
}
@media (min-height: 26.5em) {
.picker__box {
font-size: 1.25em;
}
}
@media (min-height: 33.875em) {
.picker__box {
display: block;
font-size: 1.33em;
border: 1px solid #777777;
border-top-color: #898989;
border-bottom-width: 0;
border-radius: 5px 5px 0 0;
box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
}
}
@media (min-height: 40.125em) {
.picker__box {
font-size: 1.5em;
border-bottom-width: 1px;
border-radius: 5px;
}
}
/**
* When the picker opens...
*/
.picker--opened .picker__holder {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
zoom: 1;
background: rgba(0, 0, 0, 0.32);
transition: background 0.15s ease-out;
}
.picker--opened .picker__frame {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
@media (min-height: 33.875em) {
.picker--opened .picker__frame {
top: auto;
bottom: 0;
}
}
/* ==========================================================================
$BASE-DATE-PICKER
========================================================================== */
/**
* The picker box.
*/
.picker__box {
padding: 0 1em;
}
/**
* The header containing the month and year stuff.
*/
.picker__header {
text-align: center;
position: relative;
margin-top: .75em;
}
/**
* The month and year labels.
*/
.picker__month,
.picker__year {
font-weight: 500;
display: inline-block;
margin-left: .25em;
margin-right: .25em;
}
.picker__year {
color: #999999;
font-size: .8em;
font-style: italic;
}
/**
* The month and year selectors.
*/
.picker__select--month,
.picker__select--year {
border: 1px solid #b7b7b7;
height: 2em;
padding: .5em;
margin-left: .25em;
margin-right: .25em;
}
@media (min-width: 24.5em) {
.picker__select--month,
.picker__select--year {
margin-top: -0.5em;
}
}
.picker__select--month {
width: 35%;
}
.picker__select--year {
width: 22.5%;
}
.picker__select--month:focus,
.picker__select--year:focus {
border-color: #0089ec;
}
/**
* The month navigation buttons.
*/
.picker__nav--prev,
.picker__nav--next {
position: absolute;
padding: .5em 1.25em;
width: 1em;
height: 1em;
box-sizing: content-box;
top: -0.25em;
}
@media (min-width: 24.5em) {
.picker__nav--prev,
.picker__nav--next {
top: -0.33em;
}
}
.picker__nav--prev {
left: -1em;
padding-right: 1.25em;
}
@media (min-width: 24.5em) {
.picker__nav--prev {
padding-right: 1.5em;
}
}
.picker__nav--next {
right: -1em;
padding-left: 1.25em;
}
@media (min-width: 24.5em) {
.picker__nav--next {
padding-left: 1.5em;
}
}
.picker__nav--prev:before,
.picker__nav--next:before {
content: " ";
border-top: .5em solid transparent;
border-bottom: .5em solid transparent;
border-right: 0.75em solid #000000;
width: 0;
height: 0;
display: block;
margin: 0 auto;
}
.picker__nav--next:before {
border-right: 0;
border-left: 0.75em solid #000000;
}
.picker__nav--prev:hover,
.picker__nav--next:hover {
cursor: pointer;
color: #000000;
background: #b1dcfb;
}
.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
cursor: default;
background: none;
border-right-color: #f5f5f5;
border-left-color: #f5f5f5;
}
/**
* The calendar table of dates
*/
.picker__table {
text-align: center;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
font-size: inherit;
width: 100%;
margin-top: .75em;
margin-bottom: .5em;
}
@media (min-height: 33.875em) {
.picker__table {
margin-bottom: .75em;
}
}
.picker__table td {
margin: 0;
padding: 0;
}
/**
* The weekday labels
*/
.picker__weekday {
width: 14.285714286%;
font-size: .75em;
padding-bottom: .25em;
color: #999999;
font-weight: 500;
/* Increase the spacing a tad */
}
@media (min-height: 33.875em) {
.picker__weekday {
padding-bottom: .5em;
}
}
/**
* The days on the calendar
*/
.picker__day {
padding: .3125em 0;
font-weight: 200;
border: 1px solid transparent;
}
.picker__day--today {
position: relative;
}
.picker__day--today:before {
content: " ";
position: absolute;
top: 2px;
right: 2px;
width: 0;
height: 0;
border-top: 0.5em solid #0059bc;
border-left: .5em solid transparent;
}
.picker__day--disabled:before {
border-top-color: #aaaaaa;
}
.picker__day--outfocus {
color: #dddddd;
}
.picker__day--infocus:hover,
.picker__day--outfocus:hover {
cursor: pointer;
color: #000000;
background: #b1dcfb;
}
.picker__day--highlighted {
border-color: #0089ec;
}
.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
cursor: pointer;
color: #000000;
background: #b1dcfb;
}
.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
background: #0089ec;
color: #ffffff;
}
.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
background: #f5f5f5;
border-color: #f5f5f5;
color: #dddddd;
cursor: default;
}
.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
background: #bbbbbb;
}
/**
* The footer containing the "today", "clear", and "close" buttons.
*/
.picker__footer {
text-align: center;
}
.picker__button--today,
.picker__button--clear,
.picker__button--close {
border: 1px solid #ffffff;
background: #ffffff;
font-size: .8em;
padding: .66em 0;
font-weight: bold;
width: 33%;
display: inline-block;
vertical-align: bottom;
}
.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
cursor: pointer;
color: #000000;
background: #b1dcfb;
border-bottom-color: #b1dcfb;
}
.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
background: #b1dcfb;
border-color: #0089ec;
outline: none;
}
.picker__button--today:before,
.picker__button--clear:before,
.picker__button--close:before {
position: relative;
display: inline-block;
height: 0;
}
.picker__button--today:before,
.picker__button--clear:before {
content: " ";
margin-right: .45em;
}
.picker__button--today:before {
top: -0.05em;
width: 0;
border-top: 0.66em solid #0059bc;
border-left: .66em solid transparent;
}
.picker__button--clear:before {
top: -0.25em;
width: .66em;
border-top: 3px solid #ee2200;
}
.picker__button--close:before {
content: "\D7";
top: -0.1em;
vertical-align: top;
font-size: 1.1em;
margin-right: .35em;
color: #777777;
}
.picker__button--today[disabled],
.picker__button--today[disabled]:hover {
background: #f5f5f5;
border-color: #f5f5f5;
color: #dddddd;
cursor: default;
}
.picker__button--today[disabled]:before {
border-top-color: #aaaaaa;
}
/* ==========================================================================
$DEFAULT-DATE-PICKER
========================================================================== */
@charset "UTF-8";
/**
* #SETTINGS
*/
/*!
* inuitcss, by @csswizardry
*
* github.com/inuitcss | inuitcss.com
*/
/**
* #TOOLS
*/
/*------------------------------------* #ALIASES
\*------------------------------------*/
/**
* #GENERIC
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
* without disabling user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability of focused elements when they are also in an
* active/hover state.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
box-sizing: content-box;
/* 2 */
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/*------------------------------------* #RESET
\*------------------------------------*/
/**
* As well as using normalize.css, it is often advantageous to remove all
* margins from certain elements.
*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dd,
ol,
ul,
form,
fieldset,
legend,
figure,
table,
th,
td,
caption,
hr {
margin: 0;
padding: 0;
}
/**
* Give a help cursor to elements that give extra info on `:hover`.
*/
abbr[title],
dfn[title] {
cursor: help;
}
/**
* Remove underlines from potentially troublesome elements.
*/
u,
ins {
text-decoration: none;
}
/**
* Apply faux underlines to inserted text via `border-bottom`.
*/
ins {
border-bottom: 1px solid;
}
/*------------------------------------* #BOX-SIZING
\*------------------------------------*/
/**
* Set the global `box-sizing` state to `border-box`.
*
* css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
* paulirish.com/2012/box-sizing-border-box-ftw
*/
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/*------------------------------------* #SHARED
\*------------------------------------*/
/**
* Where `margin-bottom` is concerned,this value will be the same as the
* base line-height. This allows us to keep a consistent vertical rhythm.
* As per: csswizardry.com/2012/06/single-direction-margin-declarations
*/
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
blockquote,
p,
address,
hr,
table,
fieldset,
figure,
pre {
margin-bottom: 24px;
margin-bottom: 1.5rem;
}
/**
* Where `margin-left` is concerned we want to try and indent certain elements
* by a consistent amount. Define that amount once,here.
*/
ul,
ol,
dd {
margin-left: 48px;
margin-left: 3rem;
}
/**
* #BASE
*/
/*------------------------------------* #PAGE
\*------------------------------------*/
/**
* High-, page-level styling.
*
* 1. Set the default `font-size` and `line-height` for the entire project,
* sourced from our default variables. The `font-size` is calculated to exist
* in ems, the `line-height` is calculated to exist unitlessly.
* 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
* navigating between pages that do/do not have enough content to produce
* scrollbars naturally.
* 3. Ensure the page always fills at least the entire height of the viewport.
* 4. Prevent certain mobile browsers from automatically zooming fonts.
* 5. Fonts on OSX will look more consistent with other systems that do not
* render text using sub-pixel anti-aliasing.
*/
html {
font-size: 1em;
/* [1] */
line-height: 1.5;
/* [1] */
background-color: #fff;
color: #0a2949;
overflow-y: scroll;
/* [2] */
min-height: 100%;
/* [3] */
-webkit-text-size-adjust: 100%;
/* [4] */
-ms-text-size-adjust: 100%;
/* [4] */
-moz-osx-font-smoothing: grayscale;
/* [5] */
-webkit-font-smoothing: antialiased;
/* [5] */
}
/*------------------------------------* #PAGE
\*------------------------------------*/
html {
font-family: "museo-sans", sans-serif;
font-weight: 300;
}
body {
height: 100%;
position: relative;
}
button,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="file"],
input[type="number"],
input[type="tel"],
input[type="submit"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
}
/*------------------------------------* #TYPE
\*------------------------------------*/
/**
* Typographical base selectors.
*/
b,
strong {
font-weight: 700;
}
blockquote {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.3333;
font-style: italic;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 300;
color: #10B0B6;
}
/*------------------------------------* #HEADINGS
\*------------------------------------*/
/**
* Headings 1–6.
*/
h1 {
font-size: 100px;
font-size: 6.25rem;
line-height: 1.2;
}
h2 {
font-size: 60px;
font-size: 3.75rem;
line-height: 1.2;
}
h3 {
font-size: 36px;
font-size: 2.25rem;
line-height: 1.3333333333;
}
h4 {
font-size: 30px;
font-size: 1.875rem;
line-height: 1.6;
}
h5 {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
}
h6 {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
h1 {
font-size: 30px;
font-size: 1.875rem;
line-height: 1.2;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
text-transform: uppercase;
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
h1 {
font-size: 48px;
font-size: 3rem;
line-height: 1.2;
}
}
@media screen and (min-width: 64em) {
h1 {
font-size: 72px;
font-size: 4.5rem;
line-height: 1.2;
}
}
h2 {
font-size: 28px;
font-size: 1.75rem;
line-height: 1;
font-family: "museo-sans-rounded", sans-serif;
text-transform: uppercase;
font-weight: 700;
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
h2 {
font-size: 34px;
font-size: 2.125rem;
line-height: 1;
}
}
@media screen and (min-width: 64em) {
h2 {
font-size: 48px;
font-size: 3rem;
line-height: 1;
}
}
h3 {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.3333;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
}
h4 {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3333;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
}
/*@include headings() {
font-family: $header-font-family;
font-weight: $bold;
}*/
/*------------------------------------* #LISTS
\*------------------------------------*/
/**
* Remove extra vertical spacing when nesting lists.
*/
li > ul,
li > ol {
margin-bottom: 0;
}
/*------------------------------------* #IMAGES
\*------------------------------------*/
/**
* 1. Fluid images for responsive purposes.
* 2. Offset `alt` text from surrounding copy.
* 3. Setting `vertical-align` removes the whitespace that appears under `img`
* elements when they are dropped into a page as-is. Safer alternative to
* using `display: block;`.
*/
img {
max-width: 100%;
/* [1] */
font-style: italic;
/* [2] */
vertical-align: middle;
/* [3] */
}
/**
* 1. Google Maps breaks if `max-width: 100%` acts upon it; use their selector
* to remove the effects.
* 2. If a `width` and/or `height` attribute have been explicitly defined, let’s
* not make the image fluid.
*/
.gm-style img,
img[width],
img[height] {
/* [2] */
max-width: none;
}
/*------------------------------------* #PARAGRAPHS
\*------------------------------------*/
/**
* The `.lede` class is used to make the introductory text (usually a paragraph)
* of a document slightly larger: en.wikipedia.org/wiki/Lede_(news)
*/
.lede {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.3333333333;
}
p {
line-height: 1.375;
}
.lead {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3;
font-weight: 500;
}
/* ==========================================================================
Objects
========================================================================== */
/* Block Object
========================================================================== */
/* Variables */
/*------------------------------------* #BLOCK
\*------------------------------------*/
/**
* The block object simply stacks an image on top of some text-like content.
*/
/**
* Stacked image-with-text object. A simple abstraction to cover a very commonly
* occurring design pattern.
*/
.block {
display: block;
}
/**
* 1. Eliminate whitespace around images.
*/
.block__img {
vertical-align: middle;
/* [1] */
margin-bottom: 24px;
/**
* No space between the image and the text content.
*/
/**
* Small space between the image and the text content.
*/
/**
* Large space between the image and the text content.
*/
}
.block--flush > .block__img {
margin-bottom: 0;
}
.block--small > .block__img {
margin-bottom: 12px;
}
.block--large > .block__img {
margin-bottom: 48px;
}
/**
* Text-content.
*/
.block__body {
display: block;
}
/**
* Right-aligned blocks.
*/
.block--right {
text-align: right;
}
/**
* Center-aligned blocks.
*/
.block--center {
text-align: center;
}
/* Box Object
========================================================================== */
/* Variables */
/*------------------------------------* #BOX
\*------------------------------------*/
/**
* The box object simply boxes off content.
*/
/**
* 1. So we can apply the `.box` class to naturally-inline elements.
*/
.box {
display: block;
/* [1] */
padding: 24px;
}
.box > :last-child {
margin-bottom: 0;
}
/**
* Flush (i.e. no padding) box.
*/
.box--flush {
padding: 0;
}
/**
* Tiny box.
*/
.box--tiny {
padding: 6px;
}
/**
* Small box.
*/
.box--small {
padding: 12px;
}
/**
* Large box.
*/
.box--large {
padding: 48px;
}
/**
* Huge box.
*/
.box--huge {
padding: 96px;
}
/* Button Object
========================================================================== */
/* Variables */
/*------------------------------------* #BUTTONS
\*------------------------------------*/
/**
* A simple button object.
*/
/**
* 1. Allow us to style box model properties.
* 2. Line different sized buttons up a little nicer.
* 3. Make buttons inherit font styles (often necessary when styling `input`s as
* buttons).
* 4. Reset/normalize some styles.
* 5. Force all button-styled elements to appear clickable.
* 6. Fixes odd inner spacing in IE7.
* 7. Subtract the border size from the padding value so that buttons do not
* grow larger as we add borders.
*/
.btn {
display: inline-block;
/* [1] */
vertical-align: middle;
/* [2] */
font: inherit;
/* [3] */
text-align: center;
/* [4] */
margin: 0;
/* [4] */
cursor: pointer;
/* [5] */
overflow: visible;
/* [6] */
padding: 11px 23px;
/* [7] */
background-color: #f7f7f7;
border: 1px solid #0a2949;
border-radius: 100px;
}
.btn,
.btn:hover,
.btn:active,
.btn:focus {
text-decoration: none;
/* [4] */
color: #0a2949;
}
/**
* Fix a Firefox bug whereby `input type="submit"` gains 2px extra padding.
*/
.btn::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Small buttons.
*/
.btn--small {
padding: 5px 11px;
/* [7] */
}
/**
* Large buttons.
*/
.btn--large {
padding: 23px 47px;
/* [7] */
}
.btn {
padding: 6px 48px;
font-weight: 700;
}
/* Flag Object
========================================================================== */
/* Variables */
/*------------------------------------* #FLAG
\*------------------------------------*/
/**
* The flag object is a design pattern similar to the media object, however it
* utilises `display: table[-cell];` to give us control over the vertical
* alignments of the text and image. csswizardry.com/2013/05/the-flag-object
*/
/**
* 1. Allows us to control vertical alignments
* 2. Force the object to be the full width of its parent. Combined with [1],
* this makes the object behave in a quasi-`display: block;` manner.
*/
.flag {
display: table;
/* [1] */
width: 100%;
/* [2] */
}
/**
* Items within a flag object. There should only ever be one of each.
*
* 1. Default to aligning content to their middles.
*/
.flag__img,
.flag__body {
display: table-cell;
vertical-align: middle;
/* [1] */
}
/**
* Flag images have a space between them and the body of the object.
*/
.flag__img {
padding-right: 24px;
}
.flag__img > img {
display: block;
max-width: none;
}
/**
* The container for the main content of the flag object.
*
* 1. Forces the `.flag__body` to take up all remaining space.
*/
.flag__body {
width: 100%;
/* [1] */
}
.flag__body,
.flag__body > :last-child {
margin-bottom: 0;
}
/**
* Reversed flag objects have their image-content to the right, and text-content
* to the left.
*
* 1. Swap the rendered direction of the object…
* 2. …and reset it.
* 3. Reassign margins to the correct sides.
*/
.flag--rev {
direction: rtl;
/* [1] */
}
.flag--rev > .flag__img,
.flag--rev > .flag__body {
direction: ltr;
/* [2] */
}
.flag--rev > .flag__img {
padding-right: 0;
/* [3] */
padding-left: 24px;
/* [3] */
}
/**
* Vertically top aligned flag objects.
*/
.flag--top > .flag__img,
.flag--top > .flag__body {
vertical-align: top;
}
/**
* Vertically bottom aligned flag objects.
*/
.flag--bottom > .flag__img,
.flag--bottom > .flag__body {
vertical-align: bottom;
}
/**
* Responsive flag objects.
*
* There is a very pragmatic, simple implementation of a responsive flag
* object, which simply places the text-content beneath the image-content.
*
* We use a `max-width` media query because:
*
* a) it is the least verbose method in terms of amount of code required.
* b) the flag object’s default state is image-next-to-text, so its stacked
* state is the exception, rather than the rule.
*/
@media screen and (max-width: 720px) {
.flag--responsive {
/**
* Disable reversal of content because there is no concept of
* ‘reversed’ in a stacked layout.
*/
direction: ltr;
/**
* Rework the spacings on regular flag objects.
*/
}
.flag--responsive,
.flag--responsive > .flag__img,
.flag--responsive > .flag__body {
display: block;
}
.flag--responsive > .flag__img {
padding-right: 0;
padding-left: 0;
margin-bottom: 24px;
}
}
/* Layout Object
========================================================================== */
/* Variables */
/*------------------------------------* #LAYOUT
\*------------------------------------*/
/**
* The inuitcss layout system uses `box-sizing: border-box;` and
* `display: inline-block;` to create an extremely powerful, flexible
* alternative to the traditional grid system. Combine the layout items with
* the widths found in `trumps.widths`.
*/
/**
* Begin a layout group.
*/
.layout {
list-style: none;
margin: 0;
padding: 0;
margin-left: -24px;
}
/**
* 1. Cause columns to stack side-by-side.
* 2. Space columns apart.
* 3. Align columns to the tops of each other.
* 4. Full-width unless told to behave otherwise.
* 5. Required to combine fluid widths and fixed gutters.
*/
.layout__item {
display: inline-block;
/* [1] */
padding-left: 24px;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */
}
/**
* Layouts with tiny gutters.
*/
.layout--tiny {
margin-left: -3px;
}
.layout--tiny > .layout__item {
padding-left: 3px;
}
/**
* Layouts with small gutters.
*/
.layout--small {
margin-left: -12px;
}
.layout--small > .layout__item {
padding-left: 12px;
}
/**
* Layouts with large gutters.
*/
.layout--large {
margin-left: -36px;
}
.layout--large > .layout__item {
padding-left: 36px;
}
/**
* Layouts with huge gutters.
*/
.layout--huge {
margin-left: -96px;
}
.layout--huge > .layout__item {
padding-left: 96px;
}
/**
* Layouts with no gutters.
*/
.layout--flush {
margin-left: 0;
}
.layout--flush > .layout__item {
padding-left: 0;
}
/**
* Reversed rendered order of layout items, e.g. items 1, 2, 3, 4 in your
* markup will display in order 4, 3, 2, 1 on your page.
*/
.layout--rev {
direction: rtl;
text-align: left;
}
.layout--rev > .layout__item {
direction: ltr;
text-align: left;
}
/**
* Align layout items to the vertical centers of each other.
*/
.layout--middle > .layout__item {
vertical-align: middle;
}
/**
* Align layout items to the vertical bottoms of each other.
*/
.layout--bottom > .layout__item {
vertical-align: bottom;
}
/**
* Make the layout items fill up from the right hand side.
*/
.layout--right {
text-align: right;
}
.layout--right > .layout__item {
text-align: left;
}
/**
* Make the layout items fill up from the center outward.
*/
.layout--center {
text-align: center;
}
.layout--center > .layout__item {
text-align: left;
}
/**
* Cause layout items to take up a non-explicit amount of width.
*/
.layout--auto > .layout__item {
width: auto;
}
/* List Bare Object
========================================================================== */
/*------------------------------------* #LIST-BARE
\*------------------------------------*/
/**
* The list-bare object simply removes any indents and bullet points from lists.
*/
.list-bare {
margin: 0;
padding: 0;
list-style: none;
}
/* List Block Object
========================================================================== */
/*------------------------------------* #LIST-BLOCK
\*------------------------------------*/
/**
* The list-block object creates blocky list items out of a `ul` or `ol`.
*/
.list-block {
margin: 0;
padding: 0;
list-style: none;
}
.list-block__item,
.list-block > li {
padding: 24px;
}
/* List Inline Object
========================================================================== */
/*------------------------------------* #LIST-INLINE
\*------------------------------------*/
/**
* The list-inline object simply displays a list of items in one line.
*/
.list-inline {
margin: 0;
padding: 0;
list-style: none;
}
.list-inline > li {
display: inline-block;
}
/* List UI Object
========================================================================== */
/*------------------------------------* #LIST-UI
\*------------------------------------*/
/**
* The UI list object creates blocky list items with a keyline separator out of
* a `ul` or `ol`.
*/
.list-ui,
.list-ui__item,
.list-ui > li {
border: 0 solid #ccc;
}
.list-ui {
margin: 0;
padding: 0;
list-style: none;
border-top-width: 1px;
}
.list-ui__item,
.list-ui > li {
padding: 24px;
border-bottom-width: 1px;
}
/* Media Object
========================================================================== */
/* Variables */
/*------------------------------------* #MEDIA
\*------------------------------------*/
/**
* Place any image- and text-like content side-by-side, as per:
* stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
*/
.media {
display: block;
}
.media__img {
float: left;
margin-right: 24px;
}
.media__img > img {
display: block;
}
.media__body {
overflow: hidden;
display: block;
}
.media__body,
.media__body > :last-child {
margin-bottom: 0;
}
/* Pack Object
========================================================================== */
/* Variables */
/*------------------------------------* #PACK
\*------------------------------------*/
/**
* The pack object simply causes any number of elements pack up horizontally to
* automatically fill an equal, fluid width of their parent.
*/
/**
* 1. Fill all available space.
* 2. Cause children to be automatically equally sized.
*/
.pack {
width: 100%;
/* [1] */
display: table;
table-layout: fixed;
/* [2] */
}
/**
* Cause children to adopt table-like structure.
*/
.pack__item {
display: table-cell;
/**
* All items are aligned to the middles of each other.
*/
}
.pack--middle > .pack__item {
vertical-align: middle;
}
/* Tables Object
========================================================================== */
/* Variables */
/*------------------------------------* #TABLES
\*------------------------------------*/
.table {
width: 100%;
}
/* Tabs Object
========================================================================== */
/*------------------------------------* #TABS
\*------------------------------------*/
/**
* A simple abstraction for making equal-width navigation tabs.
*/
/**
* 1. Reset any residual styles (most likely from lists).
* 2. Tables for layout!
* 3. Force all `table-cell` children to have equal widths.
* 4. Force the object to be the full width of its parent. Combined with [2],
* this makes the object behave in a quasi-`display: block;` manner.
*/
.tabs {
margin: 0;
/* [1] */
padding: 0;
/* [1] */
list-style: none;
/* [1] */
display: table;
/* [2] */
table-layout: fixed;
/* [3] */
width: 100%;
/* [4] */
text-align: center;
}
.tabs__item {
display: table-cell;
/* [2] */
}
.tabs__link {
display: block;
}
/* Wrapper Object
========================================================================== */
/*------------------------------------* #WRAPPERS
\*------------------------------------*/
.wrapper {
max-width: 1224px;
margin: 0 auto;
padding-right: 12px;
padding-left: 12px;
}
@media screen and (min-width: 45em) {
.wrapper {
padding-right: 24px;
padding-left: 24px;
}
}
@media screen and (min-width: 45em) {
.lap-and-up-wrapper {
max-width: 1224px;
margin: 0 auto;
padding-right: 24px;
padding-left: 24px;
}
}
/* Inputs Object
========================================================================== */
/* Variables */
/*------------------------------------* #INPUTS
\*------------------------------------*/
/**
*
*
*/
.label {
font-size: 16px;
color: #0a2949;
cursor: pointer;
display: block;
font-weight: 300;
line-height: 24px;
margin-bottom: 0;
}
.label--inline {
display: inline-block;
}
.input {
background-color: #fff;
font-family: inherit;
border: 2px solid #f7f7f7;
border-radius: 0;
color: #f7f7f7;
display: block;
font-size: 16px;
margin: 0 0 24px 0;
padding: 12px;
height: 52px;
width: 100%;
}
.input:focus {
background: #fff;
border-color: #ccc;
outline: none;
}
.input[disabled],
fieldset[disabled] .input {
background-color: #ccc;
}
.input--textarea {
height: 200px;
}
.input--select {
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==");
background-repeat: no-repeat;
background-position: 97% center;
}
.input--small {
margin: 0 0 12px 0;
padding: 6px 12px;
height: 34px;
}
/* Icon Object
========================================================================== */
/*------------------------------------* #ICON
\*------------------------------------*/
/**
* Icon left, text right.
*
Lorem ipsum dolor sit
*
* Define width and height for .i in your stylesheet.
*
*/
.icon {
display: inline-block;
}
.icon .i {
display: inline-block;
margin-right: 12px;
vertical-align: middle;
}
.icon__text {
display: inline-block;
vertical-align: middle;
}
/**
* Icon right, text left.
*
Lorem ipsum dolor sit
*
*/
.icon--rev > .i {
margin-left: 12px;
margin-right: 0;
}
/* Video */
.flex-video {
height: 0;
margin-bottom: rem-calc(16);
overflow: hidden;
padding-bottom: 67.5%;
padding-top: rem-calc(25);
position: relative;
}
.flex-video iframe,
.flex-video object,
.flex-video embed,
.flex-video video {
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
.flex-video--widescreen {
padding-bottom: 56.34%;
}
.flex-video--vimeo {
padding-top: 0;
}
/*slick slider */
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
}
.slick-track:before,
.slick-track:after {
content: "";
display: table;
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none;
}
[dir="rtl"] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* ==========================================================================
Components
========================================================================== */
.i {
display: inline-block;
}
/*------------------------------------* #BANDS
\*------------------------------------*/
.c-band {
padding-top: 48px;
padding-bottom: 48px;
}
@media screen and (min-width: 64em) {
.c-band {
padding-top: 48px;
padding-bottom: 48px;
}
}
.c-band--small {
padding-top: 12px;
padding-bottom: 12px;
}
.c-band--medium {
padding-top: 24px;
padding-bottom: 24px;
}
.c-band--large {
padding-top: 48px;
padding-bottom: 48px;
}
.c-band--huge {
padding-top: 48px;
padding-bottom: 48px;
}
@media screen and (min-width: 64em) {
.c-band--huge {
padding-top: 96px;
padding-bottom: 96px;
}
}
.c-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
padding: 6px 0;
z-index: 99;
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
@media screen and (min-width: 45em) {
.c-sticky {
padding: 12px 0;
}
}
.headroom {
will-change: transform;
transition: transform 200ms linear;
}
.headroom--pinned {
-ms-transform: translateY(0%);
transform: translateY(0%);
}
.headroom--unpinned,
.headroom--top {
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.c-sticky__logo {
width: 60px;
height: 60px;
margin-left: 24px;
display: block;
}
.c-sticky__logo img {
height: 60px;
width: 60px;
display: block;
}
.c-sticky-nav {
text-align: right;
}
.c-sticky-nav__list {
text-align: right;
list-style-type: none;
vertical-align: middle;
margin: 0;
display: none;
}
@media screen and (min-width: 64em) {
.c-sticky-nav__list {
display: inline-block;
}
}
.c-sticky-nav__item {
display: inline-block;
margin-left: 12px;
}
@media screen and (min-width: 80em) {
.c-sticky-nav__item {
margin-left: 24px;
}
}
.c-sticky-nav__link {
color: #0a2b49;
text-decoration: none;
font-weight: 300;
}
.c-sticky-nav__link.active {
font-weight: 700;
border-bottom: 1px solid #fff;
}
.c-sticky-nav__arrow {
display: inline-block;
vertical-align: middle;
/*background-color: $white;
color: $navy;
text-transform: uppercase;
padding: 3px;
margin-left: $spacing-unit;
vertical-align: middle;*/
cursor: pointer;
margin-left: 24px;
}
@media screen and (max-width: 44.9375em) {
.c-sticky-nav__arrow {
display: none;
}
}
.c-sticky-nav__burger {
vertical-align: middle;
cursor: pointer;
margin-right: 24px;
margin-left: 12px;
}
.c-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: #0a2b49;
padding-top: 120px;
padding-bottom: 48px;
-ms-transform: translateY(-100%);
transform: translateY(-100%);
transition: all 0.2s ease;
overflow: scroll;
}
@media screen and (min-width: 45em) {
.c-nav {
padding-top: 192px;
}
}
.c-nav.is-open {
-ms-transform: translateY(0);
transform: translateY(0);
}
.c-nav__logo {
position: absolute;
top: 24px;
left: 24px;
width: 60px;
height: 60px;
}
@media screen and (min-width: 45em) {
.c-nav__logo {
width: 130px;
height: 130px;
}
}
.c-nav__cross {
position: absolute;
top: 24px;
right: 24px;
cursor: pointer;
}
.c-nav__header {
color: #fff;
margin-bottom: 24px;
}
@media screen and (min-width: 45em) {
.c-nav__header {
margin-bottom: 48px;
}
}
.c-nav__box {
border-top: 1px solid #fff;
padding-top: 24px;
padding-bottom: 24px;
max-width: 350px;
}
@media screen and (min-width: 45em) {
.c-nav__box {
padding-top: 48px;
padding-bottom: 0;
}
}
.c-nav__list {
margin: 0;
list-style-type: none;
}
.c-nav__item {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
font-weight: 700;
margin-bottom: 12px;
}
.c-nav__link {
color: #fff;
text-decoration: none;
}
.c-nav__list--mb {
margin-bottom: 72px;
}
.c-nav__text {
color: #fff;
}
.c-newsletter {
position: relative;
margin-bottom: 48px;
}
@media screen and (min-width: 45em) {
.c-newsletter {
margin-bottom: 0;
}
}
.c-newsletter .parsley-errors-list {
top: -18px;
font-weight: 700;
}
.c-newsletter__input {
border-radius: 200px;
background-color: #0a2b49;
border: 1px solid #fff;
height: 48px;
text-align: center;
font-weight: 700;
}
.c-newsletter__input::-webkit-input-placeholder {
color: #fff;
text-align: center;
font-weight: 700;
}
.c-newsletter__input:-ms-input-placeholder {
color: #fff;
text-align: center;
font-weight: 700;
}
.c-newsletter__input::placeholder {
color: #fff;
text-align: center;
font-weight: 700;
}
.c-newsletter__input:focus {
background-color: #0a2b49;
}
.c-newsletter__btn {
position: absolute;
top: 0;
right: 0;
padding: 0;
background-color: transparent;
border: none;
width: 48px;
height: 48px;
}
.c-header {
background-color: #0a2b49;
padding-top: 120%;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
.c-header {
padding-top: 100%;
}
}
@media screen and (min-width: 64em) {
.c-header {
padding-top: 63.5%;
}
}
@media only screen and (min-width: 1224px) {
.c-header {
padding-top: 51%;
}
}
@media only screen and (min-width: 1824px) {
.c-header {
padding-top: 51%;
}
}
.c-header__logo {
position: absolute;
top: 24px;
left: 24px;
width: 60px;
height: 60px;
}
.c-header__logo img {
width: 60px;
height: 60px;
}
@media screen and (min-width: 64em) {
.c-header__logo {
width: 130px;
height: 130px;
}
.c-header__logo img {
width: 130px;
height: 130px;
}
}
@media screen and (max-width: 44.9375em) {
.c-header__logo {
top: 12px;
left: 12px;
}
}
.c-header__content {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
}
.c-header__text {
font-size: 30px;
font-size: 1.875rem;
line-height: 1.2;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
text-transform: uppercase;
color: #fff;
position: relative;
padding-bottom: 24px;
margin-bottom: 0;
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
.c-header__text {
font-size: 48px;
font-size: 3rem;
line-height: 1.2;
}
}
@media screen and (min-width: 64em) {
.c-header__text {
font-size: 72px;
font-size: 4.5rem;
line-height: 1.2;
}
}
.c-header__text:before {
position: absolute;
left: 0;
bottom: 0;
display: block;
content: "";
width: 120px;
height: 3px;
background-color: #fff;
}
.c-header__edge {
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
padding-top: 9.466819222%;
background-repeat: no-repeat;
background-position: 50% bottom;
background-size: cover;
}
.c-header__edge--teal {
background-image: url(/images/hero-angle-teal.svg);
}
.c-header__edge--green {
background-image: url(/images/hero-angle-green.svg);
}
.c-header__edge--red {
background-image: url(/images/hero-angle-red.svg);
}
.c-header__edge--orange {
background-image: url(/images/hero-angle-orange.svg);
}
.c-header--simple {
padding-top: 0;
min-height: 84px;
}
@media screen and (min-width: 45em) {
.c-header--simple {
min-height: 178px;
}
}
.c-header--simple .c-header__text {
font-size: 28px;
font-size: 1.75rem;
line-height: 1;
font-family: "museo-sans-rounded", sans-serif;
text-transform: uppercase;
font-weight: 700;
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
.c-header--simple .c-header__text {
font-size: 34px;
font-size: 2.125rem;
line-height: 1;
}
}
@media screen and (min-width: 64em) {
.c-header--simple .c-header__text {
font-size: 48px;
font-size: 3rem;
line-height: 1;
}
}
.c-header--simple .c-header__content {
display: none;
top: 144px;
-ms-transform: none;
transform: none;
}
.c-header-nav {
position: absolute;
top: 12px;
right: 0;
text-align: right;
}
@media screen and (min-width: 45em) {
.c-header-nav {
top: 24px;
padding-right: 24px;
}
}
.c-header-nav__list {
text-align: right;
list-style-type: none;
vertical-align: middle;
margin: 0;
display: none;
}
@media screen and (min-width: 64em) {
.c-header-nav__list {
display: inline-block;
}
}
.c-header-nav__item {
display: inline-block;
margin-left: 24px;
}
.c-header-nav__link {
color: #fff;
text-decoration: none;
font-weight: 300;
}
.c-header-nav__link.active {
font-weight: 700;
border-bottom: 1px solid #fff;
}
.c-header-nav__arrow {
display: inline-block;
vertical-align: middle;
/*background-color: $white;
color: $navy;
text-transform: uppercase;
padding: 3px;
margin-left: $spacing-unit;
vertical-align: middle;*/
cursor: pointer;
margin-left: 24px;
}
@media screen and (max-width: 44.9375em) {
.c-header-nav__arrow {
display: none;
}
}
.c-header-nav__burger {
vertical-align: middle;
cursor: pointer;
margin-left: 12px;
}
@media screen and (max-width: 44.9375em) {
.c-header-nav__burger {
margin-right: 12px;
}
}
.c-footer-edge {
padding-top: 13.6773455378%;
position: relative;
}
.c-footer-edge__inner {
width: 100%;
position: absolute;
left: 0;
bottom: -10px;
padding-top: 13.6773455378%;
background-repeat: no-repeat;
background-position: 50% bottom;
background-size: cover;
}
.c-footer-edge--orange .c-footer-edge__inner {
background-image: url(/images/footer-angle-orange.svg);
}
.c-footer-edge--green .c-footer-edge__inner {
background-image: url(/images/footer-angle-green.svg);
}
.c-footer-edge--red .c-footer-edge__inner {
background-image: url(/images/footer-angle-red.svg);
}
.c-footer-edge--teal .c-footer-edge__inner {
background-image: url(/images/footer-angle-teal.svg);
}
.c-footer {
padding-top: 48px;
padding-bottom: 48px;
background-color: #0a2b49;
}
@media screen and (min-width: 45em) {
.c-footer {
padding-top: 96px;
padding-bottom: 96px;
}
}
.c-footer__header {
color: #10B0B6;
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3333;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
padding-bottom: 36px;
border-bottom: 1px solid #fff;
margin-bottom: 36px;
}
.c-footer__form {
position: relative;
margin-bottom: 48px;
}
@media screen and (min-width: 45em) {
.c-footer__form {
margin-bottom: 0;
}
}
.c-footer__form .parsley-errors-list {
top: -18px;
font-weight: 700;
}
.c-footer__input {
border-radius: 200px;
background-color: #0a2b49;
border: 1px solid #fff;
height: 48px;
text-align: center;
font-weight: 700;
}
.c-footer__input::-webkit-input-placeholder {
color: #fff;
text-align: center;
font-weight: 700;
}
.c-footer__input:-ms-input-placeholder {
color: #fff;
text-align: center;
font-weight: 700;
}
.c-footer__input::placeholder {
color: #fff;
text-align: center;
font-weight: 700;
}
.c-footer__input:focus {
background-color: #0a2b49;
}
.c-footer__btn {
position: absolute;
top: 0;
right: 0;
padding: 0;
background-color: transparent;
border: none;
width: 48px;
height: 48px;
}
.c-footer__top {
margin-top: 72px;
display: inline-block;
}
.c-footer__text {
color: #fff;
}
.c-footer-nav {
list-style-type: none;
margin: 0;
margin-bottom: 48px;
}
@media screen and (min-width: 45em) {
.c-footer-nav {
margin: 0;
}
}
.c-footer-nav__item {
margin-bottom: 24px;
}
.c-footer-nav__link {
color: #fff;
font-weight: 700;
text-decoration: none;
}
.c-image-tile {
margin-bottom: 48px;
}
.c-box-tile {
margin-bottom: 24px;
}
.c-box-tile__body {
background-color: #fff;
padding: 24px;
position: relative;
}
.c-box-tile__description {
margin-bottom: 48px;
}
.c-box-tile__link {
position: absolute;
right: 24px;
bottom: 24px;
text-decoration: none;
color: #0a2949;
font-weight: 700;
font-family: "museo-sans-rounded", sans-serif;
}
.c-box-tile--slide {
margin-right: 1px;
}
.c-news-tile {
margin-bottom: 24px;
}
.c-news-tile__body {
padding: 24px;
background-color: #fff;
position: relative;
}
.c-news-tile__title {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
}
.c-news-tile__description {
margin-bottom: 48px;
}
.c-news-tile__date {
margin-bottom: 0;
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
.c-news-tile__date {
margin-bottom: 24px;
}
}
.c-news-tile__link {
position: absolute;
right: 24px;
bottom: 24px;
text-decoration: none;
color: #0a2949;
font-weight: 700;
font-family: "museo-sans-rounded", sans-serif;
}
.c-event-tile {
margin-bottom: 24px;
}
.c-event-tile__body {
padding: 24px;
background-color: #fff;
position: relative;
}
.c-event-tile__title {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
margin-bottom: 12px;
}
.c-event-tile__description {
margin-bottom: 48px;
}
.c-event-tile__link {
position: absolute;
right: 48px;
bottom: 24px;
text-decoration: none;
color: #0a2949;
font-weight: 700;
font-family: "museo-sans-rounded", sans-serif;
}
.c-event-tile--slide {
margin-right: 1px;
margin-bottom: 0;
}
.c-event-tile--slide .c-event-tile__description {
min-height: 118px;
}
.c-image-block {
background-color: #fff;
z-index: 10;
position: relative;
margin-bottom: 48px;
}
.c-image-block__img {
padding-top: 100%;
background-repeat: no-repeat;
background-size: cover;
}
@media screen and (max-width: 63.9375em) {
.c-image-block__img {
padding-top: 100% !important;
height: auto !important;
}
}
.c-image-block__map {
padding-top: 100%;
background-color: #f7f7f7;
position: relative;
}
.c-image-block__map-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-image-block__box {
padding: 48px 24px;
padding-bottom: 0;
}
@media screen and (min-width: 45em) {
.c-image-block__box {
padding: 48px 36px;
padding-bottom: 0;
}
}
.c-image-block__btn {
background-color: #fff;
}
.c-image-block--featured-article {
margin-top: -288px;
}
.c-image-block--timeline {
margin-bottom: 96px;
}
.c-image-block--timeline:before {
display: block;
content: "";
position: absolute;
left: 50%;
bottom: -72px;
width: 1px;
height: 48px;
background-color: #0a2b49;
}
.c-image-block--timeline .c-image-block__box {
border-top: 3px solid #AC1B45;
}
.c-image-block--timeline .c-image-block__year {
position: absolute;
left: -12px;
bottom: 24px;
background-color: #AC1B45;
color: #fff;
padding: 12px 24px;
padding-left: 48px;
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3333;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
}
.c-image-block--artwork {
margin-bottom: 96px;
}
.c-image-block--artwork:before {
display: block !important;
content: "";
position: absolute;
left: 50%;
bottom: -72px;
width: 1px;
height: 48px;
background-color: #0a2b49;
}
.c-image-block--artwork .c-image-block__box {
border-top: 3px solid #dc9d1d;
}
@media screen and (min-width: 64em) {
.c-image-block--rev .c-image-block__year {
left: initial;
right: -12px;
}
}
.c-image-block--first {
margin-top: calc(-14.8146453089% - 96px);
}
.c-image-block--last {
margin-bottom: 0;
}
.c-image-block--last:before {
display: none;
}
.c-image-block--transport {
margin-top: -264px;
}
.c-image-block--transport:before {
display: block;
content: "";
position: absolute;
left: 50%;
bottom: -192px;
width: 1px;
height: 144px;
background-color: #0a2b49;
}
.c-timeline {
background-color: #fff;
padding-top: 48px;
padding-left: 24px;
padding-right: 24px;
padding-bottom: 96px;
position: relative;
border-top: 3px solid #AC1B45;
margin-bottom: 96px;
}
.c-timeline:before {
display: block;
content: "";
position: absolute;
left: 50%;
bottom: -72px;
width: 1px;
height: 48px;
background-color: #0a2b49;
}
.c-timeline__year {
position: absolute;
left: -12px;
bottom: 24px;
background-color: #AC1B45;
color: #fff;
padding: 12px 24px;
padding-left: 48px;
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3333;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
}
@media screen and (min-width: 64em) {
.c-timeline--rev .c-timeline__year {
left: initial;
right: -12px;
}
}
.c-timeline--first {
margin-top: -300px;
}
.c-visit__top {
padding-top: 96px;
padding-bottom: 144px;
background-color: #0a2b49;
position: relative;
z-index: 5;
}
.c-visit__band-arrow {
position: absolute;
top: 0;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.c-visit__header {
color: #fff;
position: relative;
padding-bottom: 24px;
}
.c-visit__header:before {
position: absolute;
left: 0;
bottom: 0;
display: block;
content: "";
width: 72px;
height: 3px;
background-color: #fff;
}
.c-visit__subheader {
color: #fff;
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3333;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
}
.c-visit__bottom {
background-color: #f7f7f7;
position: relative;
margin-top: -96px;
padding-bottom: 96px;
}
@media screen and (min-width: 45em) {
.c-visit__bottom {
padding-bottom: 288px;
}
}
.c-visit__bottom:before {
position: absolute;
bottom: 120px;
left: 50%;
content: "";
width: 1px;
background-color: #0a2949;
height: 192px;
display: none;
}
@media screen and (min-width: 45em) {
.c-visit__bottom:before {
display: block;
}
}
.c-visit__btn-wrapper {
text-align: center;
}
@media screen and (min-width: 45em) {
.c-visit__btn-wrapper {
text-align: right;
}
}
.c-visit__edge {
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
padding-top: 13.8146453089%;
background-image: url(/images/angle-orange.svg);
background-repeat: no-repeat;
background-position: 50% bottom;
background-size: cover;
}
.c-whats-on__top {
background-color: #0a2b49;
padding-top: 48px;
padding-bottom: 240px;
position: relative;
z-index: 5;
}
.c-whats-on__header {
color: #fff;
position: relative;
padding-bottom: 24px;
}
.c-whats-on__header:before {
position: absolute;
left: 0;
bottom: 0;
display: block;
content: "";
width: 72px;
height: 3px;
background-color: #fff;
}
.c-whats-on__subheader {
color: #fff;
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3333;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
}
.c-whats-on__bottom {
position: relative;
background-color: #f7f7f7;
margin-top: -240px;
padding-bottom: 96px;
}
@media screen and (min-width: 45em) {
.c-whats-on__bottom {
padding-bottom: 192px;
}
}
.c-whats-on__bottom:before {
position: absolute;
bottom: 48px;
left: 50%;
content: "";
width: 1px;
background-color: #0a2949;
height: 192px;
display: none;
}
@media screen and (min-width: 45em) {
.c-whats-on__bottom:before {
display: block;
}
}
.c-whats-on__events {
position: relative;
z-index: 10;
margin-bottom: 24px;
}
.c-whats-on__btn-wrapper {
text-align: center;
}
@media screen and (min-width: 45em) {
.c-whats-on__btn-wrapper {
text-align: right;
}
}
.c-fullbleed {
padding-bottom: 96px;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
@media screen and (min-width: 45em) {
.c-fullbleed {
padding-bottom: 192px;
}
}
.c-fullbleed__box {
background-color: #dc9d1d;
color: #fff;
padding: 48px 24px;
position: relative;
top: -36px;
z-index: 6;
margin-bottom: 96px;
}
@media screen and (min-width: 45em) {
.c-fullbleed__box {
padding: 48px;
}
}
.c-fullbleed__header {
position: relative;
padding-bottom: 24px;
}
.c-fullbleed__header:before {
position: absolute;
left: 0;
bottom: 0;
display: block;
content: "";
width: 72px;
height: 3px;
background-color: #fff;
}
.c-fullbleed__body ul {
margin-left: 24px;
}
.c-fullbleed__btn {
background-color: transparent;
border-color: #fff;
color: #fff;
}
.c-fullbleed__btn:hover,
.c-fullbleed__btn:focus {
color: #fff;
}
.c-fullbleed__box-edge {
background-repeat: no-repeat;
background-size: cover;
padding-top: 13.6286619161%;
background-position: 0 0;
background-image: url("/images/angle-block-orange.svg");
position: absolute;
left: 0;
right: 0;
bottom: 5px;
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.c-fullbleed__edge {
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
padding-top: 13.8146453089%;
background-image: url(/images/angle-orange.svg);
background-repeat: no-repeat;
background-position: 50% bottom;
background-size: cover;
}
.c-fullbleed--timeline {
position: relative;
}
@media screen and (max-width: 44.9375em) {
.c-fullbleed--timeline {
top: 24px;
margin-bottom: 96px;
}
}
.c-fullbleed--timeline:before {
display: block;
content: "";
z-index: 5;
position: absolute;
left: 50%;
bottom: -96px;
width: 1px;
height: 48px;
background-color: #0a2b49;
}
.c-fullbleed--timeline .c-fullbleed__edge {
top: -10px;
left: 0;
bottom: auto;
bottom: initial;
background-image: url(/images/angle-down.svg);
padding-top: 6.5835240275%;
background-position: 50% top;
}
.c-fullbleed--get-involved .c-fullbleed__edge {
top: -10px;
left: 0;
bottom: auto;
bottom: initial;
background-image: url(/images/angle-down.svg);
padding-top: 6.5835240275%;
background-position: 50% top;
}
.c-fullbleed--green .c-fullbleed__box {
background-color: #53BA6D;
}
.c-fullbleed--green .c-fullbleed__box-edge {
background-image: url("/images/angle-block-green.svg");
}
.c-fullbleed--red .c-fullbleed__box {
background-color: #AC1B45;
}
.c-fullbleed--red .c-fullbleed__box-edge {
background-image: url("/images/angle-block-red.svg");
}
@media screen and (min-width: 45em) {
.c-gallery {
margin-bottom: 48px;
}
}
.c-gallery__top {
background-color: #0a2b49;
padding-top: 96px;
padding-bottom: 96px;
position: relative;
}
@media screen and (min-width: 45em) {
.c-gallery__top {
padding-top: 192px;
}
}
.c-gallery__top:before {
position: absolute;
top: -24px;
left: 50%;
content: "";
width: 1px;
height: 384px;
background-color: #fff;
display: none;
}
@media screen and (min-width: 45em) {
.c-gallery__top:before {
display: block;
}
}
.c-gallery__header {
color: #fff;
position: relative;
padding-bottom: 24px;
}
.c-gallery__header:before {
position: absolute;
left: 0;
bottom: 0;
display: block;
content: "";
width: 72px;
height: 3px;
background-color: #fff;
}
.c-gallery__subheader {
color: #fff;
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3333;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
}
.c-gallery__bottom {
background-color: #fff;
padding-top: 36px;
padding-bottom: 48px;
position: relative;
}
@media screen and (min-width: 45em) {
.c-gallery__bottom {
padding-bottom: 144px;
}
}
.c-gallery__bottom:before {
position: absolute;
bottom: 24px;
left: 50%;
content: "";
width: 1px;
height: 192px;
background-color: #0a2b49;
display: none;
}
@media screen and (min-width: 45em) {
.c-gallery__bottom:before {
display: block;
}
}
.c-gallery__btn-wrapper {
text-align: center;
}
@media screen and (min-width: 45em) {
.c-gallery__btn-wrapper {
text-align: right;
}
}
.c-gallery__btn {
margin-top: -96px;
background-color: #fff;
}
.c-tile-slider {
position: relative;
margin-bottom: 24px;
/*overflow: hidden;
background-color: $white;
border-right: 1px solid transparent;
&:before{
position: absolute;
top:0;
left:0;
display: block;
content: "";
background-color: red;
height: 100%;
width: 100%;
margin-top: (434 / 1176 ) * 100%;
border-right: 1px solid $white;
}*/
}
.c-tile-slider__prev {
position: absolute;
left: 0;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 5;
}
@media screen and (max-width: 44.9375em) {
.c-tile-slider__prev {
display: none;
}
}
.c-tile-slider__next {
position: absolute;
right: 1px;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 5;
}
@media screen and (max-width: 44.9375em) {
.c-tile-slider__next {
display: none;
}
}
.c-tile-slider--up {
margin-top: -96px;
z-index: 5;
}
.c-slider {
top: -120px;
position: relative;
}
.c-slider__prev {
position: absolute;
left: 0;
top: 60%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 5;
}
@media screen and (max-width: 44.9375em) {
.c-slider__prev {
display: none;
}
}
.c-slider__next {
position: absolute;
right: 0;
top: 60%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 5;
}
@media screen and (max-width: 44.9375em) {
.c-slider__next {
display: none;
}
}
.c-slider__slide {
position: relative;
margin: 0 6px;
margin-bottom: 12px;
}
.c-slider__slide.slick-current {
margin-bottom: 0;
}
@media screen and (max-width: 44.9375em) {
.c-slider__slide {
margin-bottom: 0;
}
}
.c-slider__img {
padding-top: 57.25%;
background-repeat: no-repeat;
background-size: cover;
background-image: url(http://unsplash.it/1000/1000);
margin-bottom: 12px;
}
.slick-current .c-slider__img {
padding-top: 80%;
}
@media screen and (max-width: 44.9375em) {
.c-slider__img {
padding-top: 80%;
}
}
.c-slider__text {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.7142857143;
}
.c-slider--gallery.slick-initialized .slick-slide {
float: none;
display: inline-block;
vertical-align: bottom;
}
.c-involved__header {
position: relative;
padding-bottom: 24px;
text-align: center;
}
.c-involved__header:before {
position: absolute;
left: 0;
bottom: 0;
display: block;
content: "";
width: 72px;
height: 3px;
background-color: #fff;
}
.c-involved__header:before {
background-color: #0a2b49;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.c-involved__subheader {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3333;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
text-align: center;
}
.c-involved__bottom {
position: relative;
}
.c-involved__edge {
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
padding-top: 8.5022872827%;
background-image: url(/images/involved-angle.svg);
background-repeat: no-repeat;
background-position: 50% bottom;
background-size: cover;
}
.c-tile {
width: 100%;
padding-top: 100%;
display: inline-block;
position: relative;
vertical-align: top;
background-repeat: no-repeat;
background-size: cover;
}
@media screen and (min-width: 45em) {
.c-tile {
width: 50%;
padding-top: 50%;
}
}
.c-tile__content {
position: absolute;
top: 48px;
left: 24px;
padding-right: 24px;
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
.c-tile__content {
top: 48px;
left: 48px;
padding-right: 48px;
}
}
@media screen and (min-width: 64em) {
.c-tile__content {
top: 96px;
left: 72px;
padding-right: 48px;
}
}
.c-tile__header {
position: relative;
padding-bottom: 24px;
margin-bottom: 72px;
color: #fff;
}
.c-tile__header:before {
position: absolute;
left: 0;
bottom: 0;
display: block;
content: "";
width: 72px;
height: 3px;
background-color: #fff;
}
.c-tile--left {
background-color: red;
}
@media screen and (min-width: 1440px) {
.c-tile--left .c-tile__content {
left: calc((100vw - 1440px) / 2 + 24px);
}
}
.c-tile--right {
background-color: green;
}
.c-text {
margin-bottom: 24px;
}
.c-text a {
text-decoration: none;
font-weight: 700;
color: #10B0B6;
}
.c-image {
margin-bottom: 24px;
}
.c-image__img {
margin-bottom: 24px;
}
.c-image--full-bleed {
background-repeat: no-repeat;
background-size: cover;
padding-top: 37.231884058%;
margin-bottom: 48px;
}
.c-recent-news {
background-color: #f7f7f7;
position: relative;
padding-top: 0;
padding-bottom: 96px;
}
@media screen and (min-width: 45em) {
.c-recent-news {
padding-bottom: 336px;
}
}
.c-recent-news:before {
position: absolute;
bottom: 168px;
left: 50%;
content: "";
width: 1px;
background-color: #0a2949;
height: 144px;
display: none;
}
@media screen and (min-width: 45em) {
.c-recent-news:before {
display: block;
}
}
.c-recent-news__header {
position: relative;
padding-bottom: 24px;
text-align: center;
}
.c-recent-news__header:before {
position: absolute;
left: 0;
bottom: 0;
display: block;
content: "";
width: 72px;
height: 3px;
background-color: #fff;
}
.c-recent-news__header:before {
background-color: #0a2b49;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
@media screen and (max-width: 44.9375em) {
.c-recent-news__header {
margin-top: 24px;
}
}
.c-recent-news__subheader {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3333;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
text-align: center;
margin-bottom: 48px;
}
@media screen and (min-width: 45em) {
.c-recent-news__subheader {
margin-bottom: 72px;
}
}
.c-recent-news__btn-wrapper {
text-align: center;
padding-top: 24px;
}
@media screen and (min-width: 45em) {
.c-recent-news__btn-wrapper {
text-align: right;
}
}
.c-recent-news__edge {
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
padding-top: 13.8146453089%;
background-image: url(/images/angle-green.svg);
background-repeat: no-repeat;
background-position: 50% bottom;
background-size: cover;
}
.c-partnerships {
padding-bottom: 96px;
background-color: #0a2b49;
color: #fff;
}
@media screen and (max-width: 44.9375em) {
.c-partnerships {
padding-top: 24px;
padding-bottom: 24px;
}
}
.c-partnerships__header {
position: relative;
padding-bottom: 24px;
}
.c-partnerships__header:before {
position: absolute;
left: 0;
bottom: 0;
display: block;
content: "";
width: 72px;
height: 3px;
background-color: #fff;
}
.c-partnerships__subheader {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3333;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
}
.c-partnerships__btn {
background-color: #0a2b49;
color: #fff;
border-color: #fff;
}
.c-partnerships__btn:hover,
.c-partnerships__btn:focus {
color: #fff;
}
.c-partnerships__logos {
padding-top: 48px;
margin-bottom: 48px;
}
.c-partnerships__logo {
margin-bottom: 24px;
}
.c-contact {
position: relative;
padding-top: 96px;
padding-bottom: 96px;
}
@media screen and (min-width: 45em) {
.c-contact {
padding-top: 192px;
padding-bottom: 192px;
}
}
.c-contact:before {
position: absolute;
top: 0;
left: 50%;
content: "";
width: 1px;
background-color: #0a2949;
height: 144px;
display: none;
}
@media screen and (min-width: 45em) {
.c-contact:before {
display: block;
}
}
.c-contact:after {
position: absolute;
bottom: 0;
left: 50%;
content: "";
width: 1px;
background-color: #0a2949;
height: 144px;
display: none;
}
@media screen and (min-width: 45em) {
.c-contact:after {
display: block;
}
}
.c-contact__header {
position: relative;
padding-bottom: 24px;
text-align: center;
}
.c-contact__header:before {
position: absolute;
left: 0;
bottom: 0;
display: block;
content: "";
width: 72px;
height: 3px;
background-color: #fff;
}
.c-contact__header:before {
background-color: #0a2b49;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.c-contact__subheader {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3333;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
text-align: center;
margin-bottom: 96px;
}
.c-contact__input {
border: none;
border-bottom: 1px solid #0a2b49;
padding-left: 0;
margin-bottom: 48px;
color: #0a2b49;
background-color: transparent;
}
.c-contact__input::-webkit-input-placeholder {
color: #0a2b49;
}
.c-contact__input:-ms-input-placeholder {
color: #0a2b49;
}
.c-contact__input::placeholder {
color: #0a2b49;
}
.c-contact__input:focus {
background-color: transparent;
}
.c-contact__textarea {
padding-left: 0;
border: none;
border-bottom: 1px solid #0a2b49;
color: #0a2b49;
background-color: transparent;
}
.c-contact__textarea::-webkit-input-placeholder {
color: #0a2b49;
}
.c-contact__textarea:-ms-input-placeholder {
color: #0a2b49;
}
.c-contact__textarea::placeholder {
color: #0a2b49;
}
.c-contact__textarea:focus {
background-color: transparent;
}
.c-contact__btn {
margin-top: 24px;
background-color: #fff;
background-color: transparent;
}
.c-event-listings {
margin-top: -96px;
position: relative;
z-index: 5;
}
.c-event-listings__topbar {
margin-bottom: 24px;
}
.c-event-listings__btn {
background-color: #dc9d1d;
color: #fff;
font-weight: 700;
text-transform: uppercase;
padding: 24px;
text-align: center;
}
.c-event-listings__dropdown {
position: relative;
background-color: #fff;
width: 100%;
top: 3px;
padding: 24px;
z-index: 10;
background-color: #fff;
}
.c-event-listings__input {
border: none;
border-bottom: 1px solid #0a2b49;
margin-bottom: 48px;
color: #0a2b49;
background-color: transparent;
}
.c-event-listings__input::-webkit-input-placeholder {
color: #0a2b49;
}
.c-event-listings__input:-ms-input-placeholder {
color: #0a2b49;
}
.c-event-listings__input::placeholder {
color: #0a2b49;
}
.c-event-listings__input:focus {
background-color: transparent;
}
.c-event-listings__filter-btn {
background-color: #fff;
}
.c-event-listing {
background-color: #fff;
margin-bottom: 24px;
position: relative;
}
@media screen and (min-width: 45em) {
.c-event-listing {
margin-bottom: 3px;
}
}
.c-event-listing__img {
display: block;
padding-top: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.c-event-listing__header a {
color: #0a2949;
text-decoration: none;
}
.c-event-listing__date {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
margin-bottom: 0;
}
.c-event-listing__time {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
}
.c-event-listing__description {
margin-bottom: 36px;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.7142857143;
}
@media screen and (min-width: 45em) {
.c-event-listing__description {
margin-bottom: 0;
}
}
.c-event-listing__btn {
position: absolute;
left: 24px;
bottom: 24px;
background-color: #fff;
color: #0a2949;
text-decoration: none;
}
.c-page__top {
padding-top: 96px;
padding-bottom: 144px;
background-color: #0a2b49;
position: relative;
z-index: 5;
}
.c-page__header {
color: #fff;
position: relative;
padding-bottom: 24px;
}
.c-page__header:before {
position: absolute;
left: 0;
bottom: 0;
display: block;
content: "";
width: 72px;
height: 3px;
background-color: #fff;
}
.c-page__header--dark {
color: #0a2b49;
}
.c-page__header--dark:before {
background-color: #0a2b49;
}
.c-page__subheader {
color: #fff;
font-size: 20px;
font-size: 1.25rem;
line-height: 1.3333;
font-family: "museo-sans-rounded", sans-serif;
font-weight: 700;
}
.c-page__subheader--dark {
color: #0a2b49;
}
.c-page__meta {
color: #fff;
font-weight: 700;
}
.c-page__header-image {
position: relative;
margin-top: -100px;
margin-bottom: 48px;
}
.c-page__band {
background-color: #0a2b49;
padding-top: 96px;
padding-bottom: 96px;
position: relative;
z-index: 5;
}
.c-page__band-arrow {
position: absolute;
top: 0;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.c-page__band--artwork {
padding-bottom: 336px;
}
@media screen and (min-width: 45em) {
.c-page__band--featured-artist {
padding-top: 0;
}
}
.c-page__band--get-involved {
padding-bottom: 288px;
}
@media screen and (max-width: 44.9375em) {
.c-page__band--cafe {
padding-bottom: 288px;
}
}
.c-page__band--news {
padding-bottom: 288px;
}
.c-page__band--whats-on {
padding-bottom: 240px;
}
.c-page__band--event-gallery {
padding-top: 48px;
padding-bottom: 72px;
}
@media screen and (min-width: 45em) {
.c-page__band--event-gallery {
padding-bottom: 240px;
}
}
.c-page__band--transport {
padding-top: 0;
padding-bottom: 288px;
}
.c-page__band--location {
padding-bottom: 288px;
}
.c-page__opportunities {
margin-top: -240px;
position: relative;
z-index: 6;
}
.c-page__opportunity-news {
background-color: #f7f7f7;
padding-top: 192px;
padding-bottom: 96px;
position: relative;
}
.c-page__opportunity-news:before {
position: absolute;
left: 50%;
top: 48px;
z-index: 5;
content: "";
display: block;
width: 1px;
height: 96px;
background-color: #0a2b49;
}
.c-page__opportunity-news:after {
position: absolute;
left: 50%;
bottom: -48px;
z-index: 5;
content: "";
display: block;
width: 1px;
height: 144px;
background-color: #0a2b49;
}
.c-page__bottom {
background-color: #fff;
position: relative;
padding-bottom: 13.8146453089%;
}
.c-page__btn-wrapper {
text-align: center;
}
@media screen and (min-width: 45em) {
.c-page__btn-wrapper {
text-align: right;
}
}
.c-page__divider {
padding-top: 13.8146453089%;
position: relative;
}
.c-page__edge {
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
padding-top: 13.8146453089%;
background-repeat: no-repeat;
background-position: 50% bottom;
background-size: cover;
}
.c-page__edge--green {
background-image: url(/images/angle-green.svg);
}
.c-page__edge--teal {
background-image: url(/images/angle-teal.svg);
}
.c-page__edge--orange {
background-image: url(/images/angle-orange.svg);
}
.c-page__edge--simple-grey {
background-image: url(/images/angle-simple-grey.svg);
}
.c-page--contact .c-page__bottom {
padding-top: 96px;
padding-bottom: 384px;
}
.c-page--contact .c-page__transport {
background-color: #f7f7f7;
padding-bottom: 96px;
}
.c-page--article .c-page__content {
padding-top: 24px;
}
.c-page--article .c-page__header-image {
z-index: 5;
}
.c-page--simple .c-page__content {
padding-top: 72px;
}
.c-page--simple .c-page__header-image {
z-index: 5;
}
.c-page--news .c-page__content {
background-color: #f7f7f7;
padding-top: 48px;
}
.c-page--getinvolved .c-page__content {
background-color: #f7f7f7;
padding-bottom: 48px;
}
.c-page--getinvolved .c-page__bottom {
background-color: #f7f7f7;
}
.c-page--our-story .c-page__content {
background-color: #f7f7f7;
padding-bottom: 48px;
}
.c-page--cafe .c-page__content {
background-color: #f7f7f7;
}
.c-page--gallery .c-page__content {
background-color: #f7f7f7;
padding-bottom: 48px;
position: relative;
}
.c-page--gallery .c-page__content:before {
position: absolute;
left: 50%;
bottom: -48px;
z-index: 5;
content: "";
display: block;
width: 1px;
height: 96px;
background-color: #0a2b49;
}
.c-page--gallery .c-page__featured-artwork {
background-color: #f7f7f7;
padding-bottom: 72px;
}
@media screen and (min-width: 45em) {
.c-page--gallery .c-page__featured-artwork {
padding-bottom: 48px;
}
}
.c-page--whats-on .c-page__events {
background-color: #f7f7f7;
}
.c-page--whats-on .c-page__event-gallery {
background-color: #f7f7f7;
padding-bottom: 48px;
}
.c-event-gallery {
margin-top: -96px;
position: relative;
z-index: 5;
}
@media screen and (min-width: 45em) {
.c-event-gallery {
margin-top: -432px;
}
}
.c-event-gallery__item {
margin-bottom: 48px;
}
.c-pagination {
text-align: center;
padding-top: 48px;
}
@media screen and (max-width: 44.9375em) {
.c-pagination {
padding-bottom: 48px;
}
}
.c-pagination__previous {
display: inline-block;
vertical-align: middle;
}
.c-pagination__link,
.c-pagination__current {
display: inline-block;
vertical-align: middle;
color: #0a2949;
text-decoration: none;
margin-left: 12px;
margin-right: 12px;
}
@media screen and (min-width: 45em) {
.c-pagination__link,
.c-pagination__current {
margin-left: 24px;
margin-right: 24px;
}
}
.c-pagination__current {
font-weight: 700;
}
.c-pagination__next {
display: inline-block;
vertical-align: middle;
}
.c-top {
position: fixed;
z-index: 10;
right: 0;
bottom: 0;
display: inline-block;
opacity: 0;
transition: opacity .3s ease;
}
.c-top.is-visible {
opacity: 1;
}
@media screen and (min-width: 45em) {
.c-top {
right: 24px;
bottom: 24px;
}
}
.parsley-error {
border-color: #AC1B45 !important;
}
.parsley-success {
border-color: #53BA6D !important;
}
.parsley-errors-list {
margin-left: 6px;
margin-top: 6px;
margin-bottom: 0;
list-style-type: none;
font-size: 14px;
font-size: 0.875rem;
line-height: 1;
position: relative;
top: -36px;
color: #AC1B45;
}
.c-parallax-window {
min-height: 800px;
background: transparent;
position: relative;
}
.c-parallax__content {
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.c-parallax__header {
text-align: center;
color: #fff;
}
/**
* #TRUMPS
*/
/*------------------------------------* #CLEARFIX
\*------------------------------------*/
/**
* Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
* Extend the clearfix class with Sass to avoid the `.clearfix` class appearing
* over and over in your markup.
*/
.clearfix:after,
.box:after,
.media:after {
content: "";
display: table;
clear: both;
}
/*------------------------------------* #PRINT
\*------------------------------------*/
/**
* Very crude, reset-like styles taken from the HTML5 Boilerplate:
* https://github.com/h5bp/html5-boilerplate/blob/3c3c5e64604209a4d63e1e4c48dd245d45fadfd9/css/main.css#L200-L234
*/
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
/* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/**
* Don’t show links that are fragment identifiers, or use the `javascript:`
* pseudo protocol.
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
}
/*------------------------------------* #SPACING
\*------------------------------------*/
/**
* Margin and padding helper classes. Use these to tweak layout on a micro
* level.
*
* `.(m|p)(t|r|b|l|h|v)(-|+|0) {}` = margin/padding top/right/bottom/left/horizontal/vertical less/more/none
*/
/**
* Margin helper classes.
*
* Add margins.
*/
.m {
margin: 24px !important;
}
.mt {
margin-top: 24px !important;
}
.mr {
margin-right: 24px !important;
}
.mb {
margin-bottom: 24px !important;
}
.ml {
margin-left: 24px !important;
}
.mh {
margin-right: 24px !important;
margin-left: 24px !important;
}
.mv {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
/**
* Add small margins.
*/
.m- {
margin: 12px !important;
}
.mt- {
margin-top: 12px !important;
}
.mr- {
margin-right: 12px !important;
}
.mb- {
margin-bottom: 12px !important;
}
.ml- {
margin-left: 12px !important;
}
.mh- {
margin-right: 12px !important;
margin-left: 12px !important;
}
.mv- {
margin-top: 12px !important;
margin-bottom: 12px !important;
}
/**
* Add large margins.
*/
.m\+ {
margin: 48px !important;
}
.mt\+ {
margin-top: 48px !important;
}
.mr\+ {
margin-right: 48px !important;
}
.mb\+ {
margin-bottom: 48px !important;
}
.ml\+ {
margin-left: 48px !important;
}
.mh\+ {
margin-right: 48px !important;
margin-left: 48px !important;
}
.mv\+ {
margin-top: 48px !important;
margin-bottom: 48px !important;
}
/**
* Add huge margins.
*/
.m\+\+ {
margin: 96px !important;
}
.mt\+\+ {
margin-top: 96px !important;
}
.mr\+\+ {
margin-right: 96px !important;
}
.mb\+\+ {
margin-bottom: 96px !important;
}
.ml\+\+ {
margin-left: 96px !important;
}
.mh\+\+ {
margin-right: 96px !important;
margin-left: 96px !important;
}
.mv\+\+ {
margin-top: 96px !important;
margin-bottom: 96px !important;
}
/**
* Remove margins.
*/
.m0 {
margin: 0 !important;
}
.mt0 {
margin-top: 0 !important;
}
.mr0 {
margin-right: 0 !important;
}
.mb0 {
margin-bottom: 0 !important;
}
.ml0 {
margin-left: 0 !important;
}
.mh0 {
margin-right: 0 !important;
margin-left: 0 !important;
}
.mv0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/**
* Padding helper classes.
*
* Add paddings.
*/
.p {
padding: 24px !important;
}
.pt {
padding-top: 24px !important;
}
.pr {
padding-right: 24px !important;
}
.pb {
padding-bottom: 24px !important;
}
.pl {
padding-left: 24px !important;
}
.ph {
padding-right: 24px !important;
padding-left: 24px !important;
}
.pv {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
/**
* Add small paddings.
*/
.p- {
padding: 12px !important;
}
.pt- {
padding-top: 12px !important;
}
.pr- {
padding-right: 12px !important;
}
.pb- {
padding-bottom: 12px !important;
}
.pl- {
padding-left: 12px !important;
}
.ph- {
padding-right: 12px !important;
padding-left: 12px !important;
}
.pv- {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/**
* Add large paddings.
*/
.p\+ {
padding: 48px !important;
}
.pt\+ {
padding-top: 48px !important;
}
.pr\+ {
padding-right: 48px !important;
}
.pb\+ {
padding-bottom: 48px !important;
}
.pl\+ {
padding-left: 48px !important;
}
.ph\+ {
padding-right: 48px !important;
padding-left: 48px !important;
}
.pv\+ {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
/**
* Remove paddings.
*/
.p0 {
padding: 0 !important;
}
.pt0 {
padding-top: 0 !important;
}
.pr0 {
padding-right: 0 !important;
}
.pb0 {
padding-bottom: 0 !important;
}
.pl0 {
padding-left: 0 !important;
}
.ph0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.pv0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/*------------------------------------* #SPACING-RESPONSIVE
\*------------------------------------*/
/**
* Margin and padding helper classes. Use these to tweak layout on a micro
* level.
*
* `.(m|p)(t|r|b|l|h|v)(-|+|0) {}` = margin/padding top/right/bottom/left/horizontal/vertical less/more/none
*/
/*------------------------------------* #WIDTHS
\*------------------------------------*/
/**
* A series of width helper classes that you can use to size things like grid
* systems. Classes can take a fraction-like format (e.g. `.2/3`) or a spoken-
* word format (e.g. `two-thirds`). Toggle formats by overriding the
* `$inuit-use-fractions` variable defined below.
*/
/**
* Whole.
*/
[class~="1/1"] {
width: 100% !important;
}
/**
* Halves.
*/
[class~="1/2"],
[class~="2/4"],
[class~="3/6"],
[class~="4/8"],
[class~="5/10"],
[class~="6/12"] {
width: 50% !important;
}
/**
* Thirds.
*/
[class~="1/3"],
[class~="2/6"],
[class~="3/9"],
[class~="4/12"] {
width: 33.3333333% !important;
}
[class~="2/3"],
[class~="4/6"],
[class~="6/9"],
[class~="8/12"] {
width: 66.6666666% !important;
}
/**
* Quarters.
*/
[class~="1/4"],
[class~="2/8"],
[class~="3/12"] {
width: 25% !important;
}
[class~="3/4"],
[class~="6/8"],
[class~="9/12"] {
width: 75% !important;
}
/**
* Fifths.
*/
[class~="1/5"],
[class~="2/10"] {
width: 20% !important;
}
[class~="2/5"],
[class~="4/10"] {
width: 40% !important;
}
[class~="3/5"],
[class~="6/10"] {
width: 60% !important;
}
[class~="4/5"],
[class~="8/10"] {
width: 80% !important;
}
/**
* Sixths.
*/
[class~="1/6"],
[class~="2/12"] {
width: 16.6666666% !important;
}
[class~="5/6"],
[class~="10/12"] {
width: 83.3333333% !important;
}
/**
* Eighths.
*/
[class~="1/8"] {
width: 12.5% !important;
}
[class~="3/8"] {
width: 37.5% !important;
}
[class~="5/8"] {
width: 62.5% !important;
}
[class~="7/8"] {
width: 87.5% !important;
}
/**
* Ninths.
*/
[class~="1/9"] {
width: 11.1111111% !important;
}
[class~="2/9"] {
width: 22.2222222% !important;
}
[class~="4/9"] {
width: 44.4444444% !important;
}
[class~="5/9"] {
width: 55.5555555% !important;
}
[class~="7/9"] {
width: 77.7777777% !important;
}
[class~="8/9"] {
width: 88.8888888% !important;
}
/**
* Tenths.
*/
[class~="1/10"] {
width: 10% !important;
}
[class~="3/10"] {
width: 30% !important;
}
[class~="7/10"] {
width: 70% !important;
}
[class~="9/10"] {
width: 90% !important;
}
/**
* Twelfths.
*/
[class~="1/12"] {
width: 8.3333333% !important;
}
[class~="5/12"] {
width: 41.6666666% !important;
}
[class~="7/12"] {
width: 58.3333333% !important;
}
[class~="11/12"] {
width: 91.6666666% !important;
}
/*------------------------------------* #WIDTHS-RESPONSIVE
\*------------------------------------*/
/**
* Responsive width classes based on your responsive settings.
*/
@media screen and (max-width: 44.9375em) {
/**
* Whole.
*/
[class~="palm-1/1"] {
width: 100% !important;
}
/**
* Halves.
*/
[class~="palm-1/2"],
[class~="palm-2/4"],
[class~="palm-3/6"],
[class~="palm-4/8"],
[class~="palm-5/10"],
[class~="palm-6/12"] {
width: 50% !important;
}
/**
* Thirds.
*/
[class~="palm-1/3"],
[class~="palm-2/6"],
[class~="palm-3/9"],
[class~="palm-4/12"] {
width: 33.3333333% !important;
}
[class~="palm-2/3"],
[class~="palm-4/6"],
[class~="palm-6/9"],
[class~="palm-8/12"] {
width: 66.6666666% !important;
}
/**
* Quarters.
*/
[class~="palm-1/4"],
[class~="palm-2/8"],
[class~="palm-3/12"] {
width: 25% !important;
}
[class~="palm-3/4"],
[class~="palm-6/8"],
[class~="palm-9/12"] {
width: 75% !important;
}
/**
* Fifths.
*/
[class~="palm-1/5"],
[class~="palm-2/10"] {
width: 20% !important;
}
[class~="palm-2/5"],
[class~="palm-4/10"] {
width: 40% !important;
}
[class~="palm-3/5"],
[class~="palm-6/10"] {
width: 60% !important;
}
[class~="palm-4/5"],
[class~="palm-8/10"] {
width: 80% !important;
}
/**
* Sixths.
*/
[class~="palm-1/6"],
[class~="palm-2/12"] {
width: 16.6666666% !important;
}
[class~="palm-5/6"],
[class~="palm-10/12"] {
width: 83.3333333% !important;
}
/**
* Eighths.
*/
[class~="palm-1/8"] {
width: 12.5% !important;
}
[class~="palm-3/8"] {
width: 37.5% !important;
}
[class~="palm-5/8"] {
width: 62.5% !important;
}
[class~="palm-7/8"] {
width: 87.5% !important;
}
/**
* Ninths.
*/
[class~="palm-1/9"] {
width: 11.1111111% !important;
}
[class~="palm-2/9"] {
width: 22.2222222% !important;
}
[class~="palm-4/9"] {
width: 44.4444444% !important;
}
[class~="palm-5/9"] {
width: 55.5555555% !important;
}
[class~="palm-7/9"] {
width: 77.7777777% !important;
}
[class~="palm-8/9"] {
width: 88.8888888% !important;
}
/**
* Tenths.
*/
[class~="palm-1/10"] {
width: 10% !important;
}
[class~="palm-3/10"] {
width: 30% !important;
}
[class~="palm-7/10"] {
width: 70% !important;
}
[class~="palm-9/10"] {
width: 90% !important;
}
/**
* Twelfths.
*/
[class~="palm-1/12"] {
width: 8.3333333% !important;
}
[class~="palm-5/12"] {
width: 41.6666666% !important;
}
[class~="palm-7/12"] {
width: 58.3333333% !important;
}
[class~="palm-11/12"] {
width: 91.6666666% !important;
}
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
/**
* Whole.
*/
[class~="lap-1/1"] {
width: 100% !important;
}
/**
* Halves.
*/
[class~="lap-1/2"],
[class~="lap-2/4"],
[class~="lap-3/6"],
[class~="lap-4/8"],
[class~="lap-5/10"],
[class~="lap-6/12"] {
width: 50% !important;
}
/**
* Thirds.
*/
[class~="lap-1/3"],
[class~="lap-2/6"],
[class~="lap-3/9"],
[class~="lap-4/12"] {
width: 33.3333333% !important;
}
[class~="lap-2/3"],
[class~="lap-4/6"],
[class~="lap-6/9"],
[class~="lap-8/12"] {
width: 66.6666666% !important;
}
/**
* Quarters.
*/
[class~="lap-1/4"],
[class~="lap-2/8"],
[class~="lap-3/12"] {
width: 25% !important;
}
[class~="lap-3/4"],
[class~="lap-6/8"],
[class~="lap-9/12"] {
width: 75% !important;
}
/**
* Fifths.
*/
[class~="lap-1/5"],
[class~="lap-2/10"] {
width: 20% !important;
}
[class~="lap-2/5"],
[class~="lap-4/10"] {
width: 40% !important;
}
[class~="lap-3/5"],
[class~="lap-6/10"] {
width: 60% !important;
}
[class~="lap-4/5"],
[class~="lap-8/10"] {
width: 80% !important;
}
/**
* Sixths.
*/
[class~="lap-1/6"],
[class~="lap-2/12"] {
width: 16.6666666% !important;
}
[class~="lap-5/6"],
[class~="lap-10/12"] {
width: 83.3333333% !important;
}
/**
* Eighths.
*/
[class~="lap-1/8"] {
width: 12.5% !important;
}
[class~="lap-3/8"] {
width: 37.5% !important;
}
[class~="lap-5/8"] {
width: 62.5% !important;
}
[class~="lap-7/8"] {
width: 87.5% !important;
}
/**
* Ninths.
*/
[class~="lap-1/9"] {
width: 11.1111111% !important;
}
[class~="lap-2/9"] {
width: 22.2222222% !important;
}
[class~="lap-4/9"] {
width: 44.4444444% !important;
}
[class~="lap-5/9"] {
width: 55.5555555% !important;
}
[class~="lap-7/9"] {
width: 77.7777777% !important;
}
[class~="lap-8/9"] {
width: 88.8888888% !important;
}
/**
* Tenths.
*/
[class~="lap-1/10"] {
width: 10% !important;
}
[class~="lap-3/10"] {
width: 30% !important;
}
[class~="lap-7/10"] {
width: 70% !important;
}
[class~="lap-9/10"] {
width: 90% !important;
}
/**
* Twelfths.
*/
[class~="lap-1/12"] {
width: 8.3333333% !important;
}
[class~="lap-5/12"] {
width: 41.6666666% !important;
}
[class~="lap-7/12"] {
width: 58.3333333% !important;
}
[class~="lap-11/12"] {
width: 91.6666666% !important;
}
}
@media screen and (min-width: 45em) {
/**
* Whole.
*/
[class~="lap-and-up-1/1"] {
width: 100% !important;
}
/**
* Halves.
*/
[class~="lap-and-up-1/2"],
[class~="lap-and-up-2/4"],
[class~="lap-and-up-3/6"],
[class~="lap-and-up-4/8"],
[class~="lap-and-up-5/10"],
[class~="lap-and-up-6/12"] {
width: 50% !important;
}
/**
* Thirds.
*/
[class~="lap-and-up-1/3"],
[class~="lap-and-up-2/6"],
[class~="lap-and-up-3/9"],
[class~="lap-and-up-4/12"] {
width: 33.3333333% !important;
}
[class~="lap-and-up-2/3"],
[class~="lap-and-up-4/6"],
[class~="lap-and-up-6/9"],
[class~="lap-and-up-8/12"] {
width: 66.6666666% !important;
}
/**
* Quarters.
*/
[class~="lap-and-up-1/4"],
[class~="lap-and-up-2/8"],
[class~="lap-and-up-3/12"] {
width: 25% !important;
}
[class~="lap-and-up-3/4"],
[class~="lap-and-up-6/8"],
[class~="lap-and-up-9/12"] {
width: 75% !important;
}
/**
* Fifths.
*/
[class~="lap-and-up-1/5"],
[class~="lap-and-up-2/10"] {
width: 20% !important;
}
[class~="lap-and-up-2/5"],
[class~="lap-and-up-4/10"] {
width: 40% !important;
}
[class~="lap-and-up-3/5"],
[class~="lap-and-up-6/10"] {
width: 60% !important;
}
[class~="lap-and-up-4/5"],
[class~="lap-and-up-8/10"] {
width: 80% !important;
}
/**
* Sixths.
*/
[class~="lap-and-up-1/6"],
[class~="lap-and-up-2/12"] {
width: 16.6666666% !important;
}
[class~="lap-and-up-5/6"],
[class~="lap-and-up-10/12"] {
width: 83.3333333% !important;
}
/**
* Eighths.
*/
[class~="lap-and-up-1/8"] {
width: 12.5% !important;
}
[class~="lap-and-up-3/8"] {
width: 37.5% !important;
}
[class~="lap-and-up-5/8"] {
width: 62.5% !important;
}
[class~="lap-and-up-7/8"] {
width: 87.5% !important;
}
/**
* Ninths.
*/
[class~="lap-and-up-1/9"] {
width: 11.1111111% !important;
}
[class~="lap-and-up-2/9"] {
width: 22.2222222% !important;
}
[class~="lap-and-up-4/9"] {
width: 44.4444444% !important;
}
[class~="lap-and-up-5/9"] {
width: 55.5555555% !important;
}
[class~="lap-and-up-7/9"] {
width: 77.7777777% !important;
}
[class~="lap-and-up-8/9"] {
width: 88.8888888% !important;
}
/**
* Tenths.
*/
[class~="lap-and-up-1/10"] {
width: 10% !important;
}
[class~="lap-and-up-3/10"] {
width: 30% !important;
}
[class~="lap-and-up-7/10"] {
width: 70% !important;
}
[class~="lap-and-up-9/10"] {
width: 90% !important;
}
/**
* Twelfths.
*/
[class~="lap-and-up-1/12"] {
width: 8.3333333% !important;
}
[class~="lap-and-up-5/12"] {
width: 41.6666666% !important;
}
[class~="lap-and-up-7/12"] {
width: 58.3333333% !important;
}
[class~="lap-and-up-11/12"] {
width: 91.6666666% !important;
}
}
@media screen and (max-width: 63.9375em) {
/**
* Whole.
*/
[class~="portable-1/1"] {
width: 100% !important;
}
/**
* Halves.
*/
[class~="portable-1/2"],
[class~="portable-2/4"],
[class~="portable-3/6"],
[class~="portable-4/8"],
[class~="portable-5/10"],
[class~="portable-6/12"] {
width: 50% !important;
}
/**
* Thirds.
*/
[class~="portable-1/3"],
[class~="portable-2/6"],
[class~="portable-3/9"],
[class~="portable-4/12"] {
width: 33.3333333% !important;
}
[class~="portable-2/3"],
[class~="portable-4/6"],
[class~="portable-6/9"],
[class~="portable-8/12"] {
width: 66.6666666% !important;
}
/**
* Quarters.
*/
[class~="portable-1/4"],
[class~="portable-2/8"],
[class~="portable-3/12"] {
width: 25% !important;
}
[class~="portable-3/4"],
[class~="portable-6/8"],
[class~="portable-9/12"] {
width: 75% !important;
}
/**
* Fifths.
*/
[class~="portable-1/5"],
[class~="portable-2/10"] {
width: 20% !important;
}
[class~="portable-2/5"],
[class~="portable-4/10"] {
width: 40% !important;
}
[class~="portable-3/5"],
[class~="portable-6/10"] {
width: 60% !important;
}
[class~="portable-4/5"],
[class~="portable-8/10"] {
width: 80% !important;
}
/**
* Sixths.
*/
[class~="portable-1/6"],
[class~="portable-2/12"] {
width: 16.6666666% !important;
}
[class~="portable-5/6"],
[class~="portable-10/12"] {
width: 83.3333333% !important;
}
/**
* Eighths.
*/
[class~="portable-1/8"] {
width: 12.5% !important;
}
[class~="portable-3/8"] {
width: 37.5% !important;
}
[class~="portable-5/8"] {
width: 62.5% !important;
}
[class~="portable-7/8"] {
width: 87.5% !important;
}
/**
* Ninths.
*/
[class~="portable-1/9"] {
width: 11.1111111% !important;
}
[class~="portable-2/9"] {
width: 22.2222222% !important;
}
[class~="portable-4/9"] {
width: 44.4444444% !important;
}
[class~="portable-5/9"] {
width: 55.5555555% !important;
}
[class~="portable-7/9"] {
width: 77.7777777% !important;
}
[class~="portable-8/9"] {
width: 88.8888888% !important;
}
/**
* Tenths.
*/
[class~="portable-1/10"] {
width: 10% !important;
}
[class~="portable-3/10"] {
width: 30% !important;
}
[class~="portable-7/10"] {
width: 70% !important;
}
[class~="portable-9/10"] {
width: 90% !important;
}
/**
* Twelfths.
*/
[class~="portable-1/12"] {
width: 8.3333333% !important;
}
[class~="portable-5/12"] {
width: 41.6666666% !important;
}
[class~="portable-7/12"] {
width: 58.3333333% !important;
}
[class~="portable-11/12"] {
width: 91.6666666% !important;
}
}
@media screen and (min-width: 64em) {
/**
* Whole.
*/
[class~="desk-1/1"] {
width: 100% !important;
}
/**
* Halves.
*/
[class~="desk-1/2"],
[class~="desk-2/4"],
[class~="desk-3/6"],
[class~="desk-4/8"],
[class~="desk-5/10"],
[class~="desk-6/12"] {
width: 50% !important;
}
/**
* Thirds.
*/
[class~="desk-1/3"],
[class~="desk-2/6"],
[class~="desk-3/9"],
[class~="desk-4/12"] {
width: 33.3333333% !important;
}
[class~="desk-2/3"],
[class~="desk-4/6"],
[class~="desk-6/9"],
[class~="desk-8/12"] {
width: 66.6666666% !important;
}
/**
* Quarters.
*/
[class~="desk-1/4"],
[class~="desk-2/8"],
[class~="desk-3/12"] {
width: 25% !important;
}
[class~="desk-3/4"],
[class~="desk-6/8"],
[class~="desk-9/12"] {
width: 75% !important;
}
/**
* Fifths.
*/
[class~="desk-1/5"],
[class~="desk-2/10"] {
width: 20% !important;
}
[class~="desk-2/5"],
[class~="desk-4/10"] {
width: 40% !important;
}
[class~="desk-3/5"],
[class~="desk-6/10"] {
width: 60% !important;
}
[class~="desk-4/5"],
[class~="desk-8/10"] {
width: 80% !important;
}
/**
* Sixths.
*/
[class~="desk-1/6"],
[class~="desk-2/12"] {
width: 16.6666666% !important;
}
[class~="desk-5/6"],
[class~="desk-10/12"] {
width: 83.3333333% !important;
}
/**
* Eighths.
*/
[class~="desk-1/8"] {
width: 12.5% !important;
}
[class~="desk-3/8"] {
width: 37.5% !important;
}
[class~="desk-5/8"] {
width: 62.5% !important;
}
[class~="desk-7/8"] {
width: 87.5% !important;
}
/**
* Ninths.
*/
[class~="desk-1/9"] {
width: 11.1111111% !important;
}
[class~="desk-2/9"] {
width: 22.2222222% !important;
}
[class~="desk-4/9"] {
width: 44.4444444% !important;
}
[class~="desk-5/9"] {
width: 55.5555555% !important;
}
[class~="desk-7/9"] {
width: 77.7777777% !important;
}
[class~="desk-8/9"] {
width: 88.8888888% !important;
}
/**
* Tenths.
*/
[class~="desk-1/10"] {
width: 10% !important;
}
[class~="desk-3/10"] {
width: 30% !important;
}
[class~="desk-7/10"] {
width: 70% !important;
}
[class~="desk-9/10"] {
width: 90% !important;
}
/**
* Twelfths.
*/
[class~="desk-1/12"] {
width: 8.3333333% !important;
}
[class~="desk-5/12"] {
width: 41.6666666% !important;
}
[class~="desk-7/12"] {
width: 58.3333333% !important;
}
[class~="desk-11/12"] {
width: 91.6666666% !important;
}
}
/*------------------------------------* #PUSH
\*------------------------------------*/
/**
* A series of helper classes that you can use to push grid elemtents to the
* right. Classes can take a fraction-like format (e.g. `.push-2/3`)
* or a spoken-word format (e.g. `.push-two-thirds`). Toggle formats by
* overriding the `$inuit-use-fractions` variable. Toggle formats by
* overriding the `$inuit-use-fractions` variable defined below.
*/
[class*="push-"] {
position: relative;
}
/**
* Whole.
*/
[class~="push-1/1"] {
left: 100% !important;
}
/**
* Halves.
*/
[class~="push-1/2"],
[class~="push-2/4"],
[class~="push-3/6"],
[class~="push-4/8"],
[class~="push-5/10"],
[class~="push-6/12"] {
left: 50% !important;
}
/**
* Thirds.
*/
[class~="push-1/3"],
[class~="push-2/6"],
[class~="push-3/9"],
[class~="push-4/12"] {
left: 33.3333333% !important;
}
[class~="push-2/3"],
[class~="push-4/6"],
[class~="push-6/9"],
[class~="push-8/12"] {
left: 66.6666666% !important;
}
/**
* Quarters.
*/
[class~="push-1/4"],
[class~="push-2/8"],
[class~="push-3/12"] {
left: 25% !important;
}
[class~="push-3/4"],
[class~="push-6/8"],
[class~="push-9/12"] {
left: 75% !important;
}
/**
* Fifths.
*/
[class~="push-1/5"],
[class~="push-2/10"] {
left: 20% !important;
}
[class~="push-2/5"],
[class~="push-4/10"] {
left: 40% !important;
}
[class~="push-3/5"],
[class~="push-6/10"] {
left: 60% !important;
}
[class~="push-4/5"],
[class~="push-8/10"] {
left: 80% !important;
}
/**
* Sixths.
*/
[class~="push-1/6"],
[class~="push-2/12"] {
left: 16.6666666% !important;
}
[class~="push-5/6"],
[class~="push-10/12"] {
left: 83.3333333% !important;
}
/**
* Eighths.
*/
[class~="push-1/8"] {
left: 12.5% !important;
}
[class~="push-3/8"] {
left: 37.5% !important;
}
[class~="push-5/8"] {
left: 62.5% !important;
}
[class~="push-7/8"] {
left: 87.5% !important;
}
/**
* Ninths.
*/
[class~="push-1/9"] {
left: 11.1111111% !important;
}
[class~="push-2/9"] {
left: 22.2222222% !important;
}
[class~="push-4/9"] {
left: 44.4444444% !important;
}
[class~="push-5/9"] {
left: 55.5555555% !important;
}
[class~="push-7/9"] {
left: 77.7777777% !important;
}
[class~="push-8/9"] {
left: 88.8888888% !important;
}
/**
* Tenths.
*/
[class~="push-1/10"] {
left: 10% !important;
}
[class~="push-3/10"] {
left: 30% !important;
}
[class~="push-7/10"] {
left: 70% !important;
}
[class~="push-9/10"] {
left: 90% !important;
}
/**
* Twelfths.
*/
[class~="push-1/12"] {
left: 8.3333333% !important;
}
[class~="push-5/12"] {
left: 41.6666666% !important;
}
[class~="push-7/12"] {
left: 58.3333333% !important;
}
[class~="push-11/12"] {
left: 91.6666666% !important;
}
/*------------------------------------* #PUSH-RESPONSIVE
\*------------------------------------*/
/**
* Responsive push classes based on your responsive settings.
*/
@media screen and (max-width: 44.9375em) {
/**
* Whole.
*/
[class~="palm-push-1/1"] {
left: 100% !important;
}
/**
* Halves.
*/
[class~="palm-push-1/2"],
[class~="palm-push-2/4"],
[class~="palm-push-3/6"],
[class~="palm-push-4/8"],
[class~="palm-push-5/10"],
[class~="palm-push-6/12"] {
left: 50% !important;
}
/**
* Thirds.
*/
[class~="palm-push-1/3"],
[class~="palm-push-2/6"],
[class~="palm-push-3/9"],
[class~="palm-push-4/12"] {
left: 33.3333333% !important;
}
[class~="palm-push-2/3"],
[class~="palm-push-4/6"],
[class~="palm-push-6/9"],
[class~="palm-push-8/12"] {
left: 66.6666666% !important;
}
/**
* Quarters.
*/
[class~="palm-push-1/4"],
[class~="palm-push-2/8"],
[class~="palm-push-3/12"] {
left: 25% !important;
}
[class~="palm-push-3/4"],
[class~="palm-push-6/8"],
[class~="palm-push-9/12"] {
left: 75% !important;
}
/**
* Fifths.
*/
[class~="palm-push-1/5"],
[class~="palm-push-2/10"] {
left: 20% !important;
}
[class~="palm-push-2/5"],
[class~="palm-push-4/10"] {
left: 40% !important;
}
[class~="palm-push-3/5"],
[class~="palm-push-6/10"] {
left: 60% !important;
}
[class~="palm-push-4/5"],
[class~="palm-push-8/10"] {
left: 80% !important;
}
/**
* Sixths.
*/
[class~="palm-push-1/6"],
[class~="palm-push-2/12"] {
left: 16.6666666% !important;
}
[class~="palm-push-5/6"],
[class~="palm-push-10/12"] {
left: 83.3333333% !important;
}
/**
* Eighths.
*/
[class~="palm-push-1/8"] {
left: 12.5% !important;
}
[class~="palm-push-3/8"] {
left: 37.5% !important;
}
[class~="palm-push-5/8"] {
left: 62.5% !important;
}
[class~="palm-push-7/8"] {
left: 87.5% !important;
}
/**
* Ninths.
*/
[class~="palm-push-1/9"] {
left: 11.1111111% !important;
}
[class~="palm-push-2/9"] {
left: 22.2222222% !important;
}
[class~="palm-push-4/9"] {
left: 44.4444444% !important;
}
[class~="palm-push-5/9"] {
left: 55.5555555% !important;
}
[class~="palm-push-7/9"] {
left: 77.7777777% !important;
}
[class~="palm-push-8/9"] {
left: 88.8888888% !important;
}
/**
* Tenths.
*/
[class~="palm-push-1/10"] {
left: 10% !important;
}
[class~="palm-push-3/10"] {
left: 30% !important;
}
[class~="palm-push-7/10"] {
left: 70% !important;
}
[class~="palm-push-9/10"] {
left: 90% !important;
}
/**
* Twelfths.
*/
[class~="palm-push-1/12"] {
left: 8.3333333% !important;
}
[class~="palm-push-5/12"] {
left: 41.6666666% !important;
}
[class~="palm-push-7/12"] {
left: 58.3333333% !important;
}
[class~="palm-push-11/12"] {
left: 91.6666666% !important;
}
}
@media screen and (min-width: 45em) and (max-width: 63.9375em) {
/**
* Whole.
*/
[class~="lap-push-1/1"] {
left: 100% !important;
}
/**
* Halves.
*/
[class~="lap-push-1/2"],
[class~="lap-push-2/4"],
[class~="lap-push-3/6"],
[class~="lap-push-4/8"],
[class~="lap-push-5/10"],
[class~="lap-push-6/12"] {
left: 50% !important;
}
/**
* Thirds.
*/
[class~="lap-push-1/3"],
[class~="lap-push-2/6"],
[class~="lap-push-3/9"],
[class~="lap-push-4/12"] {
left: 33.3333333% !important;
}
[class~="lap-push-2/3"],
[class~="lap-push-4/6"],
[class~="lap-push-6/9"],
[class~="lap-push-8/12"] {
left: 66.6666666% !important;
}
/**
* Quarters.
*/
[class~="lap-push-1/4"],
[class~="lap-push-2/8"],
[class~="lap-push-3/12"] {
left: 25% !important;
}
[class~="lap-push-3/4"],
[class~="lap-push-6/8"],
[class~="lap-push-9/12"] {
left: 75% !important;
}
/**
* Fifths.
*/
[class~="lap-push-1/5"],
[class~="lap-push-2/10"] {
left: 20% !important;
}
[class~="lap-push-2/5"],
[class~="lap-push-4/10"] {
left: 40% !important;
}
[class~="lap-push-3/5"],
[class~="lap-push-6/10"] {
left: 60% !important;
}
[class~="lap-push-4/5"],
[class~="lap-push-8/10"] {
left: 80% !important;
}
/**
* Sixths.
*/
[class~="lap-push-1/6"],
[class~="lap-push-2/12"] {
left: 16.6666666% !important;
}
[class~="lap-push-5/6"],
[class~="lap-push-10/12"] {
left: 83.3333333% !important;
}
/**
* Eighths.
*/
[class~="lap-push-1/8"] {
left: 12.5% !important;
}
[class~="lap-push-3/8"] {
left: 37.5% !important;
}
[class~="lap-push-5/8"] {
left: 62.5% !important;
}
[class~="lap-push-7/8"] {
left: 87.5% !important;
}
/**
* Ninths.
*/
[class~="lap-push-1/9"] {
left: 11.1111111% !important;
}
[class~="lap-push-2/9"] {
left: 22.2222222% !important;
}
[class~="lap-push-4/9"] {
left: 44.4444444% !important;
}
[class~="lap-push-5/9"] {
left: 55.5555555% !important;
}
[class~="lap-push-7/9"] {
left: 77.7777777% !important;
}
[class~="lap-push-8/9"] {
left: 88.8888888% !important;
}
/**
* Tenths.
*/
[class~="lap-push-1/10"] {
left: 10% !important;
}
[class~="lap-push-3/10"] {
left: 30% !important;
}
[class~="lap-push-7/10"] {
left: 70% !important;
}
[class~="lap-push-9/10"] {
left: 90% !important;
}
/**
* Twelfths.
*/
[class~="lap-push-1/12"] {
left: 8.3333333% !important;
}
[class~="lap-push-5/12"] {
left: 41.6666666% !important;
}
[class~="lap-push-7/12"] {
left: 58.3333333% !important;
}
[class~="lap-push-11/12"] {
left: 91.6666666% !important;
}
}
@media screen and (min-width: 45em) {
/**
* Whole.
*/
[class~="lap-and-up-push-1/1"] {
left: 100% !important;
}
/**
* Halves.
*/
[class~="lap-and-up-push-1/2"],
[class~="lap-and-up-push-2/4"],
[class~="lap-and-up-push-3/6"],
[class~="lap-and-up-push-4/8"],
[class~="lap-and-up-push-5/10"],
[class~="lap-and-up-push-6/12"] {
left: 50% !important;
}
/**
* Thirds.
*/
[class~="lap-and-up-push-1/3"],
[class~="lap-and-up-push-2/6"],
[class~="lap-and-up-push-3/9"],
[class~="lap-and-up-push-4/12"] {
left: 33.3333333% !important;
}
[class~="lap-and-up-push-2/3"],
[class~="lap-and-up-push-4/6"],
[class~="lap-and-up-push-6/9"],
[class~="lap-and-up-push-8/12"] {
left: 66.6666666% !important;
}
/**
* Quarters.
*/
[class~="lap-and-up-push-1/4"],
[class~="lap-and-up-push-2/8"],
[class~="lap-and-up-push-3/12"] {
left: 25% !important;
}
[class~="lap-and-up-push-3/4"],
[class~="lap-and-up-push-6/8"],
[class~="lap-and-up-push-9/12"] {
left: 75% !important;
}
/**
* Fifths.
*/
[class~="lap-and-up-push-1/5"],
[class~="lap-and-up-push-2/10"] {
left: 20% !important;
}
[class~="lap-and-up-push-2/5"],
[class~="lap-and-up-push-4/10"] {
left: 40% !important;
}
[class~="lap-and-up-push-3/5"],
[class~="lap-and-up-push-6/10"] {
left: 60% !important;
}
[class~="lap-and-up-push-4/5"],
[class~="lap-and-up-push-8/10"] {
left: 80% !important;
}
/**
* Sixths.
*/
[class~="lap-and-up-push-1/6"],
[class~="lap-and-up-push-2/12"] {
left: 16.6666666% !important;
}
[class~="lap-and-up-push-5/6"],
[class~="lap-and-up-push-10/12"] {
left: 83.3333333% !important;
}
/**
* Eighths.
*/
[class~="lap-and-up-push-1/8"] {
left: 12.5% !important;
}
[class~="lap-and-up-push-3/8"] {
left: 37.5% !important;
}
[class~="lap-and-up-push-5/8"] {
left: 62.5% !important;
}
[class~="lap-and-up-push-7/8"] {
left: 87.5% !important;
}
/**
* Ninths.
*/
[class~="lap-and-up-push-1/9"] {
left: 11.1111111% !important;
}
[class~="lap-and-up-push-2/9"] {
left: 22.2222222% !important;
}
[class~="lap-and-up-push-4/9"] {
left: 44.4444444% !important;
}
[class~="lap-and-up-push-5/9"] {
left: 55.5555555% !important;
}
[class~="lap-and-up-push-7/9"] {
left: 77.7777777% !important;
}
[class~="lap-and-up-push-8/9"] {
left: 88.8888888% !important;
}
/**
* Tenths.
*/
[class~="lap-and-up-push-1/10"] {
left: 10% !important;
}
[class~="lap-and-up-push-3/10"] {
left: 30% !important;
}
[class~="lap-and-up-push-7/10"] {
left: 70% !important;
}
[class~="lap-and-up-push-9/10"] {
left: 90% !important;
}
/**
* Twelfths.
*/
[class~="lap-and-up-push-1/12"] {
left: 8.3333333% !important;
}
[class~="lap-and-up-push-5/12"] {
left: 41.6666666% !important;
}
[class~="lap-and-up-push-7/12"] {
left: 58.3333333% !important;
}
[class~="lap-and-up-push-11/12"] {
left: 91.6666666% !important;
}
}
@media screen and (max-width: 63.9375em) {
/**
* Whole.
*/
[class~="portable-push-1/1"] {
left: 100% !important;
}
/**
* Halves.
*/
[class~="portable-push-1/2"],
[class~="portable-push-2/4"],
[class~="portable-push-3/6"],
[class~="portable-push-4/8"],
[class~="portable-push-5/10"],
[class~="portable-push-6/12"] {
left: 50% !important;
}
/**
* Thirds.
*/
[class~="portable-push-1/3"],
[class~="portable-push-2/6"],
[class~="portable-push-3/9"],
[class~="portable-push-4/12"] {
left: 33.3333333% !important;
}
[class~="portable-push-2/3"],
[class~="portable-push-4/6"],
[class~="portable-push-6/9"],
[class~="portable-push-8/12"] {
left: 66.6666666% !important;
}
/**
* Quarters.
*/
[class~="portable-push-1/4"],
[class~="portable-push-2/8"],
[class~="portable-push-3/12"] {
left: 25% !important;
}
[class~="portable-push-3/4"],
[class~="portable-push-6/8"],
[class~="portable-push-9/12"] {
left: 75% !important;
}
/**
* Fifths.
*/
[class~="portable-push-1/5"],
[class~="portable-push-2/10"] {
left: 20% !important;
}
[class~="portable-push-2/5"],
[class~="portable-push-4/10"] {
left: 40% !important;
}
[class~="portable-push-3/5"],
[class~="portable-push-6/10"] {
left: 60% !important;
}
[class~="portable-push-4/5"],
[class~="portable-push-8/10"] {
left: 80% !important;
}
/**
* Sixths.
*/
[class~="portable-push-1/6"],
[class~="portable-push-2/12"] {
left: 16.6666666% !important;
}
[class~="portable-push-5/6"],
[class~="portable-push-10/12"] {
left: 83.3333333% !important;
}
/**
* Eighths.
*/
[class~="portable-push-1/8"] {
left: 12.5% !important;
}
[class~="portable-push-3/8"] {
left: 37.5% !important;
}
[class~="portable-push-5/8"] {
left: 62.5% !important;
}
[class~="portable-push-7/8"] {
left: 87.5% !important;
}
/**
* Ninths.
*/
[class~="portable-push-1/9"] {
left: 11.1111111% !important;
}
[class~="portable-push-2/9"] {
left: 22.2222222% !important;
}
[class~="portable-push-4/9"] {
left: 44.4444444% !important;
}
[class~="portable-push-5/9"] {
left: 55.5555555% !important;
}
[class~="portable-push-7/9"] {
left: 77.7777777% !important;
}
[class~="portable-push-8/9"] {
left: 88.8888888% !important;
}
/**
* Tenths.
*/
[class~="portable-push-1/10"] {
left: 10% !important;
}
[class~="portable-push-3/10"] {
left: 30% !important;
}
[class~="portable-push-7/10"] {
left: 70% !important;
}
[class~="portable-push-9/10"] {
left: 90% !important;
}
/**
* Twelfths.
*/
[class~="portable-push-1/12"] {
left: 8.3333333% !important;
}
[class~="portable-push-5/12"] {
left: 41.6666666% !important;
}
[class~="portable-push-7/12"] {
left: 58.3333333% !important;
}
[class~="portable-push-11/12"] {
left: 91.6666666% !important;
}
}
@media screen and (min-width: 64em) {
/**
* Whole.
*/
[class~="desk-push-1/1"] {
left: 100% !important;
}
/**
* Halves.
*/
[class~="desk-push-1/2"],
[class~="desk-push-2/4"],
[class~="desk-push-3/6"],
[class~="desk-push-4/8"],
[class~="desk-push-5/10"],
[class~="desk-push-6/12"] {
left: 50% !important;
}
/**
* Thirds.
*/
[class~="desk-push-1/3"],
[class~="desk-push-2/6"],
[class~="desk-push-3/9"],
[class~="desk-push-4/12"] {
left: 33.3333333% !important;
}
[class~="desk-push-2/3"],
[class~="desk-push-4/6"],
[class~="desk-push-6/9"],
[class~="desk-push-8/12"] {
left: 66.6666666% !important;
}
/**
* Quarters.
*/
[class~="desk-push-1/4"],
[class~="desk-push-2/8"],
[class~="desk-push-3/12"] {
left: 25% !important;
}
[class~="desk-push-3/4"],
[class~="desk-push-6/8"],
[class~="desk-push-9/12"] {
left: 75% !important;
}
/**
* Fifths.
*/
[class~="desk-push-1/5"],
[class~="desk-push-2/10"] {
left: 20% !important;
}
[class~="desk-push-2/5"],
[class~="desk-push-4/10"] {
left: 40% !important;
}
[class~="desk-push-3/5"],
[class~="desk-push-6/10"] {
left: 60% !important;
}
[class~="desk-push-4/5"],
[class~="desk-push-8/10"] {
left: 80% !important;
}
/**
* Sixths.
*/
[class~="desk-push-1/6"],
[class~="desk-push-2/12"] {
left: 16.6666666% !important;
}
[class~="desk-push-5/6"],
[class~="desk-push-10/12"] {
left: 83.3333333% !important;
}
/**
* Eighths.
*/
[class~="desk-push-1/8"] {
left: 12.5% !important;
}
[class~="desk-push-3/8"] {
left: 37.5% !important;
}
[class~="desk-push-5/8"] {
left: 62.5% !important;
}
[class~="desk-push-7/8"] {
left: 87.5% !important;
}
/**
* Ninths.
*/
[class~="desk-push-1/9"] {
left: 11.1111111% !important;
}
[class~="desk-push-2/9"] {
left: 22.2222222% !important;
}
[class~="desk-push-4/9"] {
left: 44.4444444% !important;
}
[class~="desk-push-5/9"] {
left: 55.5555555% !important;
}
[class~="desk-push-7/9"] {
left: 77.7777777% !important;
}
[class~="desk-push-8/9"] {
left: 88.8888888% !important;
}
/**
* Tenths.
*/
[class~="desk-push-1/10"] {
left: 10% !important;
}
[class~="desk-push-3/10"] {
left: 30% !important;
}
[class~="desk-push-7/10"] {
left: 70% !important;
}
[class~="desk-push-9/10"] {
left: 90% !important;
}
/**
* Twelfths.
*/
[class~="desk-push-1/12"] {
left: 8.3333333% !important;
}
[class~="desk-push-5/12"] {
left: 41.6666666% !important;
}
[class~="desk-push-7/12"] {
left: 58.3333333% !important;
}
[class~="desk-push-11/12"] {
left: 91.6666666% !important;
}
}
@media screen and (min-width: 45em) {
.lap-and-up-pull-1\/3 {
margin-left: -33.333333%;
}
}
@media screen and (min-width: 45em) {
.lap-and-up-pull-1\/2 {
margin-left: -50%;
}
}
@media screen and (min-width: 45em) {
.lap-and-up-pull-1\/4 {
margin-left: -25%;
}
}
@media screen and (min-width: 45em) {
.lap-and-up-pull-1\/12 {
margin-left: -8.3333333%;
}
}
@media screen and (min-width: 45em) {
.lap-and-up-pull-2\/12 {
margin-left: -16.666666%;
}
}
@media screen and (min-width: 45em) {
.lap-and-up-pull-3\/12 {
margin-left: -25%;
}
}
@media screen and (min-width: 45em) {
.lap-and-up-pull-5\/12 {
margin-left: -41.66666%;
}
}
@media screen and (min-width: 64em) {
.desk-pull-2\/3 {
margin-left: -66.666666%;
}
}
/*------------------------------------* #HEADINGS
\*------------------------------------*/
/**
* Headings 1–6’s corresponding Greek-alphabet abstract classes for double-
* stranded heading hierarchy: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
*
* Use these helper classes to cause other elements to adopt the styling of the
* respective heading, e.g.:
*
Lorem ipsum
*
*/
.alpha {
font-size: 100px;
font-size: 6.25rem;
line-height: 1.2;
}
.beta {
font-size: 60px;
font-size: 3.75rem;
line-height: 1.2;
}
.gamma {
font-size: 36px;
font-size: 2.25rem;
line-height: 1.3333333333;
}
.delta {
font-size: 30px;
font-size: 1.875rem;
line-height: 1.6;
}
.epsilon {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
}
.zeta {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
/*------------------------------------* #HEADINGS-RESPONSIVE
\*------------------------------------*/
/**
* Based on _trumps.headings, this will generate resonsive equivalents of the
* headings which change their font-size depending on the media-queries
* set in _settings.responsive.
*/
.bg-white {
background-color: #fff !important;
}
.white {
color: #fff !important;
}
.bg-grey {
background-color: #f7f7f7 !important;
}
.grey {
color: #f7f7f7 !important;
}
.bg-black {
background-color: #0a2949 !important;
}
.black {
color: #0a2949 !important;
}
.bg-navy {
background-color: #0a2b49 !important;
}
.navy {
color: #0a2b49 !important;
}
.bg-orange {
background-color: #dc9d1d !important;
}
.orange {
color: #dc9d1d !important;
}
.bg-red {
background-color: #AC1B45 !important;
}
.red {
color: #AC1B45 !important;
}
.bg-green {
background-color: #53BA6D !important;
}
.green {
color: #53BA6D !important;
}
.bg-teal {
background-color: #10B0B6 !important;
}
.teal {
color: #10B0B6 !important;
}
.s1 {
font-size: 100px;
font-size: 6.25rem;
line-height: 1.2;
}
.s2 {
font-size: 60px;
font-size: 3.75rem;
line-height: 1.2;
}
.s3 {
font-size: 26px;
font-size: 1.625rem;
line-height: 1.4;
}
@media screen and (min-width: 45em) {
.s3 {
font-size: 36px;
font-size: 2.25rem;
line-height: 1.3333333333;
}
}
.s4 {
font-size: 30px;
font-size: 1.875rem;
line-height: 1.3;
}
.s5 {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
}
.s6 {
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
.inline-block {
display: inline-block;
}
.align-middle {
vertical-align: middle;
}
.link-bare {
border-bottom: none;
}
.ucase {
text-transform: uppercase;
}
.lcase {
text-transform: lowercase;
}
.round {
border-radius: 50%;
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-middle {
vertical-align: middle;
}
.left {
float: left;
}
.right {
float: right;
}
.white {
color: #fff !important;
}
.bold {
font-weight: 700;
}
.regular {
font-weight: 300;
}
.light {
font-weight: 300;
}
.italic {
font-style: italic;
}
.hide {
display: none;
}
@media screen and (max-width: 44.9375em) {
.palm-hide {
display: none;
}
}
@media screen and (min-width: 45em) {
.lap-and-up-hide {
display: none;
}
}
.relative {
position: relative;
}