/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button, [type=button], [type=reset], [type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox], [type=radio] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/* ==========================================================================
BASE / RESETS
========================================================================== */
/**
* This contains some additional resets and baselines not facilitated by
* 'normalize.css'. Editing is not recommended.
*/
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* Vertical Rhythm
=========================================== */
/**
* Apply our base spacing unit as a `margin-bottom` to all block level elements
* so that we get nice and consistent vertical rhythm very cheaply.
* http://csswizardry.com/2012/06/single-direction-margin-declarations/
*/
address,
blockquote,
dl,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
menu,
ol,
p,
pre,
summary,
table,
ul {
margin-top: 0;
margin-bottom: 16px;
}
fieldset {
margin-right: 0;
margin-left: 0;
padding: 0;
}
/**
* We'll also indent list elements by the same amount of spacing. Also, we will
* remove the left padding added by some user-agents.
*/
dd,
ol,
ul {
margin-left: 16px;
padding-left: 0;
}
/**
* Remove trailing margins from nested lists.
*/
li > ol,
li > ul {
margin-bottom: 0;
}
/**
* Pseudo Selection
*/
::-moz-selection {
background: #FFFFFF;
text-shadow: none;
}
::selection {
background: gray;
text-shadow: none;
}
::selection:window-inactive {
background: #eaeaea;
}
img::selection {
background: rgba(0, 0, 0, 0);
}
img::-moz-selection {
background: rgba(0, 0, 0, 0);
}
/**
* Identify Disabled/Not Allowed Elements
*/
*[disabled] {
cursor: not-allowed;
}
/**
* Breakpoints
* These values will not show up in content, but can be queried by JavaScript
* to know which breakpoint is active.
*/
body::before {
display: none;
content: "xsmall";
visibility: hidden;
}
@media (min-width: 40em) {
body::before {
content: "small";
}
}
@media (min-width: 48em) {
body::before {
content: "medium";
}
}
@media (min-width: 60em) {
body::before {
content: "large";
}
}
@media (min-width: 75em) {
body::before {
content: "xlarge";
}
}
@media (min-width: 90em) {
body::before {
content: "wide";
}
}
/* ==========================================================================
ELEMENTS / FORMS
========================================================================== */
/**
* Semantically, we'd like all forms to be built with FIELDSETs and LEGENDs, but
* we currently don't want to visually see them.
*
* 1. Visually hide content, leaving it accessible to screen readers and ATs.
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
fieldset {
margin-bottom: 0;
border: none;
}
legend { /* [1] */
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0);
}
/**
* Make sure our form elements don't use any UA-specific font styles: we want
* them to use ours. This may need reverting as more design information becomes
* available, and we start putting together more complete forms.
*/
input {
font: inherit;
}
/* ==========================================================================
ELEMENTS / LINKS
========================================================================== */
/**
* Our basic A elements only need very minimal styling. Anything more
* opinionated (e.g. buttons, calls-to-action, etc.) will need a class defining
* in the Components layer.
*/
a {
color: #3d70b2;
text-decoration: none;
cursor: pointer;
}
a:focus,
a:hover {
text-decoration: underline;
}
/* ==========================================================================
ELEMENTS / MEDIA
========================================================================== */
/**
* 1. Fluid media 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;'.
*/
audio,
video {
width: 100%;
}
audio:focus,
video:focus {
outline: 1px dotted currentColor;
}
embed,
img,
object,
video {
max-width: 100%; /* [1] */
height: auto; /* [1] */
}
iframe {
max-width: 100%; /* [1] */
}
embed,
object {
height: 100%;
}
img {
font-style: italic; /* [2] */
vertical-align: middle; /* [3] */
}
/**
* 1. If a 'width' and/or 'height' attribute have been explicitly defined, let's
* not make the image fluid.
*/
img[width], /* [1] */
img[height] { /* [1] */
max-width: none;
}
/* ==========================================================================
ELEMENTS / PAGE
========================================================================== */
/**
* High-level, page-level styling.
*
* 1. Ensure the page always fills at least the entire height of the viewport.
* 2. Force scroll bars to always be visible to prevent awkward 'jumps' when
* navigating between pages that do/do not have enough content to produce
* scroll bars naturally.
* 3. 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.
* 4. Fonts on OSX will look more consistent with other systems that do not
* render text using sub-pixel anti-aliasing.
* 5. Prevent certain mobile browsers from automatically zooming fonts.
* 6. Set the, non-standard, color of the highlight that appears over a link
* when it is being tapped in some browsers.
* 7. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
*/
html {
height: 100%;
min-height: 100%; /* [1] */
overflow-y: scroll; /* [2] */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: calc((16px / 16) * 1em); /* [3] */
-webkit-font-smoothing: antialiased; /* [4] */
-moz-osx-font-smoothing: grayscale; /* [4] */
line-height: 1.5; /* [3] */
-webkit-text-size-adjust: 100%; /* [5] */
-ms-text-size-adjust: 100%; /* [5] */
color: #4a4a4a;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
touch-action: manipulation; /* [7] */
}
@media (min-width: 40em) {
html {
line-height: calc((1.5 + 1.8) / 2);
}
}
@media (min-width: 60em) {
html {
line-height: 1.8;
}
}
body {
display: flex;
min-height: 100%;
flex-direction: column;
}
main {
flex-grow: 1;
}
/* ==========================================================================
ELEMENTS / TABLES
========================================================================== */
/**
* Table styles are incredibly un-opinionated. Simply:
*
* 1. Force TABLEs to be full-width by default.
* 2. Ensure their first and last cells in each row carry no indents.
*/
table {
width: 100%; /* [1] */
}
th:first-child,
td:first-child{
padding-left: 0; /* [2] */
}
th:last-child,
td:last-child {
padding-right: 0; /* [2] */
}
/* ==========================================================================
ELEMENTS / TYPOGRAPHY
========================================================================== */
/* Headings
=========================================== */
/**
* Force all headings to have the exact same *default* styling. This means we
* are free to use the correct semantic element without having opinionated look-
* and-feel attached to it. Provide all cosmetics for specific visual use cases
* via heading classes (i.e. `.c-heading-*`).
*
* http://csswizardry.com/2016/02/managing-typography-on-large-apps/
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 16px;
font-weight: normal;
}
/* Other text-level elements
=========================================== */
/**
* As above, leave SMALL as a purely semantic choice, and omit any cosmetics.
*/
small {
font: inherit;
}
/* ==========================================================================
OBJECTS / LAYOUT
========================================================================== */
/**
* Grid-like layout system.
*
* The Layout object provides us with a column-style layout system. This file
* contains the basic structural elements, but classes should be complemented
* with width Utilities, for example:
*
*
*
*
*
*
*
*
* The above will create a two-column structure in which each column will
* fluidly fill half of the width of the parent. We can have more complex
* systems:
*
*
*
*
*
*
*
*
*
*
* The above will create a system in which the first item will be 100% width
* until we enter our medium breakpoint, when it will become 33.333% width. The
* second and third items will be 50% of their parent, until they also become
* 33.333% width at the medium breakpoint.
*
* We can also manipulate entire layout systems by adding a series of Modifiers
* to the `.o-layout` Block. For example:
*
*
*
* This will reverse the displayed order of the system so that it runs in the
* opposite order to our source, effectively flipping the system over.
*
*
*
* This will cause the system to fill up from either the centre or the right
* hand side. Default behaviour is to fill up the layout system from the left.
*
* There are plenty more options available to us: explore them below.
*/
/* Default/mandatory classes.
=========================================== */
.o-layout {
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin: 0 0 0 calc(0px - 16px);
padding: 0;
list-style: none;
/*transition: all .3s ease;*/
}
.o-layout__item {
flex: 1 1 auto;
max-width: 100%;
padding-left: 16px;
/*transition: all .3s ease;*/
}
.o-layout.o-layout__item {
margin-left: 0;
/*padding-left: 0;*/
}
/* Layout Display Direction.
* The flex-direction property specifies the direction of the flexible items
* inside the flex container. The default value of flex-direction is row
* (left-to-right, top-to-bottom).
=========================================== */
/**
* To reverse the layout direction, use o-layout--row-reverse.
*/
.o-layout--row-reverse {
flex-direction: row-reverse;
}
/**
* Use o-layout--column to set the flex items vertically.
*/
.o-layout--column {
flex-direction: column;
}
/**
* Same as column, but reversed.
*/
.o-layout--column-reverse {
flex-direction: column-reverse;
}
@media screen and (min-width: 48em) {
.o-layout--row--m {
flex-direction: row;
}
.o-layout--row-reverse--m {
flex-direction: row-reverse;
}
.o-layout--column--m {
flex-direction: column;
}
.o-layout--column-reverse--m {
flex-direction: column-reverse;
}
}
@media screen and (min-width: 60em) {
.o-layout--row--l {
flex-direction: row;
}
.o-layout--row-reverse--l {
flex-direction: row-reverse;
}
.o-layout--column--l {
flex-direction: column;
}
.o-layout--column-reverse--l {
flex-direction: column-reverse;
}
}
@media screen and (min-width: 90em) {
.o-layout--row--w {
flex-direction: row;
}
.o-layout--row-reverse--w {
flex-direction: row-reverse;
}
.o-layout--column--w {
flex-direction: column;
}
.o-layout--column-reverse--w {
flex-direction: column-reverse;
}
}
/* Gutter size modifiers.
=========================================== */
/**
* Smaller gutters between items.
*/
.o-layout--narrow {
margin-left: calc(0px - (16px * 0.5));
}
.o-layout--narrow > .o-layout__item {
padding-left: calc(16px * 0.5);
}
/**
* Larger gutters between items.
*/
.o-layout--wide {
margin-left: calc(0px - (16px * 2));
}
.o-layout--wide > .o-layout__item {
padding-left: calc(16px * 2);
}
/**
* No gutters between items.
*/
.o-layout--flush {
margin-left: 0;
}
.o-layout--flush > .o-layout__item {
padding-left: 0;
}
/**
* Make full width of parent.
*/
.o-layout--full {
margin-right: calc(0px - 16px);
}
/* Vertical gutter modifiers.
=========================================== */
/**
* Include vertical gutters on layout items.
*/
.o-layout--spaced > .o-layout__item {
margin-bottom: 16px;
}
/**
* If we've chosen to change the size of the horizontal gutters, let's change
* the vertical gutters accordingly.
*/
.o-layout--spaced.o-layout--narrow > .o-layout__item {
margin-bottom: calc(16px * 0.5);
}
.o-layout--spaced.o-layout--wide > .o-layout__item {
margin-bottom: calc(16px * 2);
}
/* Align-Items modifiers.
* The align-items property controls how flex items are positioned
* when the items do not use all available space along the container's cross-axis.
=========================================== */
/**
* Items are positioned at the start of the container's cross-axis.
*/
.o-layout--align-top {
align-items: flex-start;
}
/**
* Items are positioned along the center of the container's cross-axis.
*/
.o-layout--align-center {
align-items: center;
}
/**
* Items are positioned at the end of the container's cross-axis.
*/
.o-layout--align-bottom {
align-items: flex-end;
}
/**
* Items are positioned at along the container's cross-axis so that their baselines align.
*/
.o-layout--align-baseline {
align-items: baseline;
}
/**
* Default value. Items are stretched to fit the container's cross-axis.
*/
.o-layout--align-stretch {
align-items: stretch;
}
/* Align-Content modifiers.
* The align-content property controls how lines are positioned in multi-line containers.
=========================================== */
/**
* Default value. Lines are packed at the start of the container's cross-axis.
*/
.o-layout--align-content-start {
align-content: flex-start;
}
/**
* Lines are packed along the center of the container's cross-axis.
*/
.o-layout--align-content-center {
align-content: center;
}
/**
* Lines are packed at the end of the container's cross-axis.
*/
.o-layout--align-content-end {
align-content: flex-end;
}
/**
* Lines are distributed along the container's cross-axis with equal spacing around each line.
*/
.o-layout--align-content-around {
align-content: space-around;
}
/**
* Lines are distributed along the container's cross-axis with equal spacing between each line.
*/
.o-layout--align-content-between {
align-content: space-between;
}
/* Align-Self modifiers.
* The align-self property controls how individual flex items are positioned along the container's cross-axis.
=========================================== */
/**
* Default value. Items are aligned based on the flex container's `align-items` value.
*/
.o-layout--align-self-auto {
align-self: auto;
}
/**
* Items are aligned to the start of the flex container's cross-axis, despite the container's `align-items` value.
*/
.o-layout--align-self-start {
align-self: flex-start;
}
/**
* Items are aligned along the center of the flex container's cross-axis, despite the container's `align-items` value.
*/
.o-layout--align-self-center {
align-self: center;
}
/**
* Items are aligned to the end of the flex container's cross-axis, despite the container's `align-items` value.
*/
.o-layout--align-self-end {
align-self: flex-end;
}
/**
* Items are stretched to fill the flex container's cross-axis, despite the container's `align-items` value.
*/
.o-layout--align-self-stretch {
align-self: stretch;
}
/* Justify-Content modifiers.
* The justify-content property controls how flex items are positioned
* when the items do not use all available space along the container's main-axis.
=========================================== */
/**
* Default value. Items are justified at the start of the container's main-axis.
*/
.o-layout--justify-start {
justify-content: flex-start;
}
/**
* Items are justified along the center of the container's main-axis.
*/
.o-layout--justify-center {
justify-content: center;
}
/**
* Items are justified at the end of the container's main-axis.
*/
.o-layout--justify-end {
justify-content: flex-end;
}
/**
* Items are justified along the container's main-axis with equal spacing around each item.
*/
.o-layout--justify-around {
justify-content: space-around;
}
/**
* Items are justified along the container's main-axis with equal spacing between each item.
*/
.o-layout--justify-between {
justify-content: space-between;
}
/* Growth control.
=========================================== */
.o-layout--grow {
flex-grow: 1;
}
.o-layout--no-grow {
flex-grow: 0;
}
.o-layout--shrink {
flex-shrink: 1;
}
.o-layout--no-shrink {
flex-shrink: 0;
}
/* Wrapping modifiers.
=========================================== */
.o-layout--no-wrap {
flex-wrap: nowrap;
}
.o-layout--wrap {
flex-wrap: wrap;
}
.o-layout--wrap-reverse {
flex-wrap: wrap-reverse;
}
/* Flex ordering modifiers.
* Set an item to be first or last in grid.
=========================================== */
.o-layout__first {
order: -1;
}
.o-layout__last {
order: 1;
}
@media screen and (min-width: 40em) {
.o-layout__first--s {
order: -1;
}
.o-layout__last--s {
order: 1;
}
}
@media screen and (min-width: 48em) {
.o-layout__first--m {
order: -1;
}
.o-layout__last--m {
order: 1;
}
}
@media screen and (min-width: 60em) {
.o-layout__first--l {
order: -1;
}
.o-layout__last--l {
order: 1;
}
}
@media screen and (min-width: 90em) {
.o-layout__first--w {
order: -1;
}
.o-layout__last--w {
order: 1;
}
}
/* ==========================================================================
OBJECTS / LISTS
========================================================================== */
/**
* The o-list-bare object strips list-like appearance from lists by removing
* their bullets, and any indentation.
*/
.o-list-bare {
margin-left: 0;
list-style: none;
}
/**
* The o-list-block object displays any list of items into stacked blocks.
*/
.o-list-block {
margin-left: 0;
list-style: none;
}
.o-list-block__item {
display: block;
}
/**
* The o-list-inline object simply displays a list of items in one line.
*/
.o-list-inline {
margin-left: 0;
list-style: none;
}
.o-list-inline__item {
display: inline-block;
}
.o-list-inline__item:not(:last-child) {
margin-right: 16px;
}
/* Spacing modifiers
=========================================== */
.o-list-inline--narrow > .o-list-inline__item {
margin-right: calc(16px * 0.5);
}
.o-list-inline--wide > .o-list-inline__item {
margin-right: calc(16px * 2);
}
/* ==========================================================================
OBJECTS / TABLES
========================================================================== */
/**
* A simple object for manipulating the structure of HTML 'table's.
*/
.o-table {
width: 100%;
}
/* Equal-width table cells.
========================================================================== */
/**
* 'table-layout: fixed' forces all cells within a table to occupy the same
* width as each other. This also has performance benefits: because the browser
* does not need to (re)calculate cell dimensions based on content it discovers,
* the table can be rendered very quickly. Further reading:
* https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
*/
.o-table--fixed {
table-layout: fixed;
}
/* Padding variants.
========================================================================== */
.o-table--narrow th,
.o-table--narrow td {
padding: calc(16px * 0.5);
}
.o-table--wide th,
.o-table--wide td {
padding: calc(16px * 2);
}
/* Borderless table
* Removes default border-bottom on TABLE rows.
=========================================== */
.o-table-borderless tr {
border: none;
}
/* ==========================================================================
OBJECTS / WRAPPER
========================================================================== */
/**
* Page-level constraining and wrapping elements.
*/
.o-site-wrapper {
width: 100%;
max-width: 100rem;
margin-right: auto;
margin-left: auto;
}
.o-wrapper {
width: 100%;
max-width: 92vw;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-left: 16px;
}
.o-wrapper--fulltop {
max-width: 92vw;
border: 2px solid #1c1b1a;
}
.o-wrapper--full {
max-width: 92vw;
}
.o-wrapper--flush {
padding-right: 0;
padding-left: 0;
}
/* ==========================================================================
COMPONENTS / BUTTONS
========================================================================== */
/**
* 1. Allows styling of box model properties.
* 2. Reset browser styles.
* 3. Subtract border-width from the padding so buttons don't grow if the
* border-width is modified.
* 4. Tidy alignment for when the button size needs to be modified.
* 5. Make buttons inherit font styles (necessary when styling `input`s as
* buttons).
* 6. Set default button font-size.
* 7. Set default button font-weight.
* 8. Set default button text-alignment.
* 9. Remove anchor text-decoration (necessary when styling `a`s as buttons).
* 10. Base transparent border for modifiers to alter.
* 11. Set default button border-radius.
* 12. Set default button transition (color, background-color, border-color and box-shadow)
* 13. Force all button-styled elements to appear click-able.
* 14. Remove browser outline styles.
*/
.c-button {
display: inline-block; /* [1] */
margin: 0; /* [2] */
padding: calc(0.5em - 1px) calc(1em - 1px); /* [3] */
position: relative;
vertical-align: middle; /* [4] */
font-family: inherit; /* [5] */
font-size: 1em; /* [6] */
font-weight: 400; /* [7] */
line-height: normal;
text-align: center; /* [8] */
text-decoration: none; /* [9] */
background-color: #c0c0c0;
border: 1px solid rgba(0, 0, 0, 0); /* [10] */
border-radius: 0.125em; /* [11] */
color: #fff;
-webkit-appearance: none;
appearance: none;
cursor: pointer; /* [13] */
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* [12] */
}
.c-button2 {
display: inline-block; /* [1] */
margin: 0; /* [2] */
padding: calc(0.5em - 1px) calc(1em - 1px); /* [3] */
position: relative;
vertical-align: middle; /* [4] */
font-family: inherit; /* [5] */
font-size: 1em; /* [6] */
font-weight: 400; /* [7] */
line-height: normal;
text-align: center; /* [8] */
text-decoration: none; /* [9] */
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0); /* [10] */
border-radius: 0.125em; /* [11] */
color: #fff;
-webkit-appearance: none;
appearance: none;
cursor: pointer; /* [13] */
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; /* [12] */
}
.c-button:hover,
.c-button:active,
.c-button:focus {
text-decoration: none; /* [9] */
outline: none; /* [1] */
}
.c-button:not([class*="u-bg-"]):not([class*="c-button--primary"]):hover{
background-color: #FFFFFF;
}
/**
* Fix a Firefox bug whereby `input type="submit"` gains 2px extra padding.
*/
.c-button::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Button aesthetic modifiers
=========================================== */
/**
* For buttons that identify as the primary action.
*/
.c-button--primary {
background-color: #3d70b2;
border-color: #3d70b2;
color: #fff;
}
.c-button--primary:hover,
.c-button--primary:active {
background-color: #4888c8;
border-color: #4888c8;
}
/**
* For outlined or hollow buttons.
*/
.c-button--hollow {
background-color: rgba(0, 0, 0, 0);
border-color: currentColor;
color: #3d70b2;
}
.c-button--hollow:not([class*="u-bg-"]):hover{
background-color: #eaeaea;
}
/**
* For buttons you want to look like normal links.
*/
.c-button--clear {
background-color: rgba(0, 0, 0, 0);
}
.c-button--clear:hover,
.c-button--clear:active {
border-bottom: 1px solid currentColor;
}
.c-button--clear:not([class*="u-bg-"]):hover{
background-color: rgba(0, 0, 0, 0);
}
/* Button state modifiers
=========================================== */
/**
* For buttons whose state is toggled.
*/
.c-button[disabled],
.c-button.is-disabled,
.c-button.is-disabled:hover,
.c-button.is-disabled:active,
.c-button.is-disabled:focus {
box-shadow: none;
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
/**
* For buttons whose state is toggled when a related form or field contains
* an error or multiple errors.
*/
.c-button.is-error,
.c-button.is-error:hover,
.c-button.is-error:active,
.c-button.is-error:focus,
.is-error .c-button,
.is-error .c-button:hover,
.is-error .c-button:active,
.is-error .c-button:focus {
background-color: #c8102e;
border-color: #c8102e;
color: #fff;
cursor: not-allowed;
}
/* Button sizing modifiers
=========================================== */
.c-button--tiny {
padding: calc(0.5em / 2 - 1px) calc(1em / 2 - 1px); /* [3] */
font-size: 0.625em;
}
.c-button--small {
padding: calc(0.5em / 1.5 - 1px) calc(1em / 1.5 - 1px); /* [3] */
font-size: 0.75em;
}
.c-button--large {
padding: calc(0.5em * 2 - 1px) calc(1em * 2 - 1px); /* [3] */
}
.c-button--huge {
padding: calc(0.5em * 3 - 1px) calc(1em * 3 - 1px); /* [3] */
}
.c-button--flush {
padding-right: 0;
padding-left: 0;
}
/**
* For buttons that need to display full-width on small devices only.
*/
.c-button--full-small {
display: block;
width: 100%;
}
/**
* For buttons that need to display full-width.
*/
.c-button--full {
display: block;
width: 100%;
}
/* Button glossy modifiers
=========================================== */
.c-button--glossy {
box-shadow: 0 1px 4px -2px #707070;
text-shadow: 0 -1px #707070;
}
.c-button--glossy::after {
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
border-radius: inherit;
content: '';
}
/* ==========================================================================
COMPONENTS / CONTROL GROUPS
========================================================================== */
/**
* To group related buttons and/or inputs together, you can use the
* `.c-control-group` wrapping element. This will bunch the related elements
* together and remove the spacing between them.
*/
.c-control-group {
display: flex;
}
.c-control-group .c-control-group__label {
height: calc(2.5em - (1px * 2));
margin-bottom: 0;
padding-right: calc(16px / 2);
line-height: calc(2.5em - (1px * 2));
}
.c-control-group .c-control-group__button,
.c-control-group .c-control-group__field {
border-radius: 0;
}
.c-control-group .c-control-group__field {
min-width: 0;
height: auto;
margin-bottom: 0;
}
.c-control-group .c-control-group__button:not(:first-child):not(:first-of-type),
.c-control-group .c-control-group__field:not(:first-child):not(:first-of-type) {
border-left-width: 0;
}
.c-control-group .c-control-group__button:first-child,
.c-control-group .c-control-group__field:first-child {
border-top-left-radius: 0.125em;
border-bottom-left-radius: 0.125em;
}
.c-control-group .c-control-group__button:last-child,
.c-control-group .c-control-group__field:last-child {
border-top-right-radius: 0.125em;
border-bottom-right-radius: 0.125em;
}
/**
* Adding the `.c-control-group--rounded` modifier will make the first and
* last related elements rounded.
*/
.c-control-group--rounded .c-control-group__button:first-child,
.c-control-group--rounded .c-control-group__field:first-child {
border-top-left-radius: 10em;
border-bottom-left-radius: 10em;
}
.c-control-group--rounded .c-control-group__field:first-child {
padding-left: 16px;
}
.c-control-group--rounded .c-control-group__button:last-child,
.c-control-group--rounded .c-control-group__field:last-child {
border-top-right-radius: 10em;
border-bottom-right-radius: 10em;
}
/**
* Adding the `.c-control-group--rounded-right` modifier will make the last
* related element rounded.
*/
.c-control-group--rounded-right .c-control-group__button:last-child,
.c-control-group--rounded-right .c-control-group__field:last-child {
border-top-right-radius: 10em;
border-bottom-right-radius: 10em;
}
/**
* Adding the `.c-control-group--rounded-left` modifier will make the first
* related element rounded.
*/
.c-control-group--rounded-left .c-control-group__button:first-child,
.c-control-group--rounded-left .c-control-group__field:first-child {
border-top-left-radius: 10em;
border-bottom-left-radius: 10em;
}
/**
* Adding the `.c-control-group--stacked` modifier will turn the related
* elements into a vertical element.
*/
.c-control-group--stacked {
flex-wrap: wrap;
}
.c-control-group--stacked .c-control-group__button:not(:first-child):not(:first-of-type),
.c-control-group--stacked .c-control-group__field:not(:first-child):not(:first-of-type) {
border-left-width: 1px;
}
.c-control-group--stacked .c-control-group__button,
.c-control-group--stacked .c-control-group__field {
flex: 0 0 100%;
max-width: 100%;
margin-left: 0;
}
.c-control-group--stacked .c-control-group__button:not(:first-child):not(:first-of-type),
.c-control-group--stacked .c-control-group__field:not(:first-child):not(:first-of-type) {
border-top: 0;
}
.c-control-group--stacked .c-control-group__button:not(:first-child):not(:last-child):not(:first-of-type):not(:last-of-type),
.c-control-group--stacked .c-control-group__field:not(:first-child):not(:last-child):not(:first-of-type):not(:last-of-type) {
border-radius: 0;
}
.c-control-group--stacked .c-control-group__button:first-child,
.c-control-group--stacked .c-control-group__field:first-child {
border-radius: 0.125em 0.125em 0 0;
}
.c-control-group--stacked .c-control-group__button:last-child,
.c-control-group--stacked .c-control-group__field:last-child {
border-radius: 0 0 0.125em 0.125em;
}
/* ==========================================================================
COMPONENTS / DIVIDER
========================================================================== */
/**
* Divider component to provide more prominent horizontal rules between other
* elements.
*
* The default Divider and it's `--top` modifier are intended for use on
* horizontal rules.
* e.g. ``
*
* 1. Set a transparent border on the relevant edge to prevent element collapse.
* 2. Reduce the `margin-bottom` by the same width as the divider in order to
* keep on our baseline grid.
*/
.c-divider {
position: relative;
margin-bottom: calc(16px - 1px); /* 2 */
border: solid transparent;
border-width: 0 0 1px; /* 1 */
}
.c-divider::before,
.c-divider::after {
display: block;
position: absolute;
width: 100%;
content: "";
}
/**
* Divider gradient border.
*/
.c-divider::before {
bottom: 0;
height: 1px;
background: linear-gradient(to right, rgba(191, 191, 191, 0), rgb(192, 192, 192), rgba(191, 191, 191, 0));
}
/**
* Divider shadow.
*/
.c-divider::after {
top: 100%;
height: calc(16px / 2);
background: radial-gradient(at 50% 0, rgba(74, 74, 74, .15), transparent 40%);
}
/**
* Top divider
*/
.c-divider--top {
border-width: 1px 0 0;
}
.c-divider--top::before {
bottom: 100%;
background: linear-gradient(to right, rgba(191, 191, 191, 0), rgb(192, 192, 192), rgba(191, 191, 191, 0));
}
.c-divider--top::after {
top: calc(0px - calc(16px / 2) - 1px);
background: radial-gradient(at 50% 100%, rgba(74, 74, 74, .15), transparent 40%);
}
/* ==========================================================================
COMPONENTS / FORMS
========================================================================== */
/* Form list
=========================================== */
/**
* All form fields should be presented in a list so that
*
* a) they are easier to navigate using a screen reader;
* b) if CSS fails to load for any reason, the user is still presented with a
* well-formatted list of fields.
*/
.c-form-list:not(.o-layout) {
margin: 0;
padding: 0;
list-style: none;
}
.c-form-list__item {
display: block;
margin-bottom: calc(1em / 2);
width: 100%;
}
@media (min-width: 48em) {
.c-form-list__item {
max-width: 20em;
}
/* For any inputs that need to be displayed full-width */
.c-form-list__item--full {
max-width: 100%;
}
}
/* Form labels
=========================================== */
/**
* All LABEL elements must also carry a class of `.c-form-label`. By applying
* these styles to a class and not to the LABEL element directly, we are free
* to reuse the same look-and-feel on spoofed LABEL elements. E.g. when we have
* a ‘meta label’ covering a number of sub labels:
*
* Gender
* • Male • Female • Rather not say
*
*/
.c-form-label {
display: inline-block;
margin-bottom: calc(1em / 4);
}
/* Form text inputs
=========================================== */
/**
* All text-like form inputs require a class of `.c-form-input`: we do not use
* selectors like `input[type="text"] {}`.
*
* 1. Fix for IE 10/11 removing vertical padding from inputs which was being
* ignored.
* 2. Padding added via line-height/height to re-center text for all browsers
* (38px to account for border).
*/
.c-form-input {
display: inline-block;
margin-bottom: calc(1em / 4);
padding: 0 calc(1em / 2); /* [1] */
width: 93%;
height: calc(2.5em - (1px * 2)); /* [2] */
line-height: calc(2.5em - (1px * 2)); /* [2] */
background-color: #fff;
border: 1px solid #c0c0c0;
border-radius: 0.125em;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
outline: 0;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
-moz-appearance: none;
-webkit-appearance: none;
}
.c-form-input2 {
display: inline-block;
margin-bottom: calc(1em / 4);
padding: 0 calc(1em / 2); /* [1] */
width: 35%;
height: calc(2.5em - (1px * 2)); /* [2] */
line-height: calc(2.5em - (1px * 2)); /* [2] */
background-color: #fff;
border: 1px solid #c0c0c0;
border-radius: 0.125em;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
outline: 0;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
-moz-appearance: none;
-webkit-appearance: none;
}
.c-form-input:focus {
border-color: #fff;
box-shadow: inset 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
outline: none;
}
/**
* For use on large text inputs such as textareas
*/
.c-form-input--long {
height: 8em;
resize: vertical;
}
.c-form-input--file {
padding: 0;
line-height: calc(2em - (1px * 2));
}
/* Form select inputs
=========================================== */
.c-form-select {
display: inline-block;
position: relative;
margin-bottom: calc(1em / 4);
width: 100%;
font-size: 1em;
line-height: 1.5;
cursor: pointer;
}
/**
* Gradient to hide the overflow of long labels
*
* 1. Stretch to full height on the right (taking into account border width)
*/
.c-form-select::before {
position: absolute;
top: 1px; /* [1] */
right: 1px; /* [1] */
bottom: 1px; /* [1] */
width: calc(1em * 2);
background: #fff;
background: -ms-linear-gradient(right, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0));
background: linear-gradient(to left, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0));
border-radius: 0 0.125em 0.125em 0;
content: "";
pointer-events: none;
}
/**
* Custom drop-down indicator icon
*/
.c-form-select::after {
position: absolute;
top: 50%;
right: calc(1em / 2);
margin-bottom: calc(1em / 4);
width: calc(1em / 2);
height: calc(1em / 2);
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAkCAYAAAA5DDySAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPVJREFUeNrk2s0NgzAMhmFno47EKGzQETpSR2CEjkCjyEg0aiAhP7Y/IuUSuLyPhDg4RLycc5PfH78fBLy48/3TyYcrb1iEv53RISxCqpM4dkVGSMSHTakHKAhH8RvAExXhLD58AvziCw0hJz7+E8AgFMcjIVyOR0CojreM0CzeIkLzeEsI3eItIHSP14wwLF4jwvB4TQhi8RoQxOMlEdTESyCoix+JoDZ+BIL6+J4IZuJ7IJiLb4lgNr4Fgvn4GgSY+CsIcPGFCDP0bCIDAXowU4OANZ8sRMCcUGciYN9ROEGAv6BxhHCP+B3CvLubsEjFfwUYAKjtGJxFvDJsAAAAAElFTkSuQmCC") no-repeat center center;
background-size: contain;
content: "";
pointer-events: none;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.c-form-select__dropdown {
width: 100%;
height: calc(2.5em - (1px * 2));
padding: calc(1em / 2) calc(1em / 2);
font-size: inherit;
background-color: #fff;
border: 1px solid #c0c0c0;
border-radius: 0.125em;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
outline: 0;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
-webkit-appearance: none;
-moz-appearance: none;
}
.c-form-select__dropdown::-ms-expand {
display: none;
}
.c-form-select__dropdown:focus {
/*border-color: #fff;
box-shadow: inset 0 0 0.5em 0 rgba(0, 0, 0, 0.2);*/
}
/* Form checkbox inputs
=========================================== */
.c-form-checkbox {
display: inline-block;
margin-bottom: calc(1em / 4);
width: 100%;
cursor: pointer;
font-size: 1em;
}
/**
* For cases where checkboxes or radio buttons need to display inline.
*/
.c-form-checkbox--inline {
width: auto;
margin-right: calc(1em * 2);
}
/**
* Hide the default input visually to utilise keyboard functionality and allow
* for custom input styles.
*/
.c-form-checkbox__input {
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.c-form-checkbox__caption {
display: flex;
align-items: center;
position: relative;
margin-left: calc(1em + 1em);
}
.c-form-checkbox__caption::before {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
margin-right: 1em;
margin-left: calc(0px - (1em + 1em));
background-color: #fff;
border: 1px solid #c0c0c0;
content: "";
transition: border-color 0.25s ease;
}
.c-form-checkbox--radio .c-form-checkbox__caption::before {
border-radius: 100%;
}
.c-form-checkbox__input:focus + .c-form-checkbox__caption::before {
outline: none;
}
.c-form-checkbox__input:checked + .c-form-checkbox__caption::before {
box-shadow: inset 0 0 0.5em 0 rgba(0, 0, 0, 0.2);
transition: border-color 0.25s ease, background-color 0.25s ease;
}
.c-form-checkbox__input:checked + .c-form-checkbox__caption::after {
position: absolute;
left: calc(0px - (1em + 1em));
width: calc(1em + 1px);
height: calc(1em + 1px);
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xMTYuMTU4LDI5LjMzNmwtNC45NzUtNC45NzVjLTMuNDY5LTMuNDY5LTkuMDg4LTMuNDc4LTEyLjU0OS0wLjAxOUw0OC4xMDMsNzQuODc1TDI5LjM2NCw1Ni4xMzYgIGMtMy40NTktMy40Ni05LjA3OC0zLjQ1LTEyLjU0OSwwLjAyMWwtNC45NzQsNC45NzRjLTMuNDcsMy40Ny0zLjQ4LDkuMDg5LTAuMDIsMTIuNTQ5TDQxLjgsMTAzLjY1NyAgYzEuNzQxLDEuNzQxLDQuMDI2LDIuNjAyLDYuMzEsMi41ODhjMi4yNzksMC4wMTEsNC41NTktMC44NTIsNi4yOTctMi41OWw2MS43NzEtNjEuNzcxICBDMTE5LjYzNywzOC40MjQsMTE5LjYzMSwzMi44MDcsMTE2LjE1OCwyOS4zMzZ6IiBmaWxsPSIjMjMyMzIzIi8+PC9zdmc+") no-repeat center center;
background-size: contain;
content: "";
}
.c-form-checkbox--radio .c-form-checkbox__input:checked + .c-form-checkbox__caption::after {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIyMHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMCAyMCIgd2lkdGg9IjIwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSI+PGcgZmlsbD0iIzAwMDAwMCIgaWQ9IkNvcmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzguMDAwMDAwLCAtMzM4LjAwMDAwMCkiPjxnIGlkPSJyYWRpby1idXR0b24tb24iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMzOC4wMDAwMDAsIDMzOC4wMDAwMDApIj48cGF0aCBkPSJNMTAsNSBDNy4yLDUgNSw3LjIgNSwxMCBDNSwxMi44IDcuMiwxNSAxMCwxNSBDMTIuOCwxNSAxNSwxMi44IDE1LDEwIEMxNSw3LjIgMTIuOCw1IDEwLDUgTDEwLDUgWiBNMTAsMCBDNC41LDAgMCw0LjUgMCwxMCBDMCwxNS41IDQuNSwyMCAxMCwyMCBDMTUuNSwyMCAyMCwxNS41IDIwLDEwIEMyMCw0LjUgMTUuNSwwIDEwLDAgTDEwLDAgWiBNMTAsMTggQzUuNiwxOCAyLDE0LjQgMiwxMCBDMiw1LjYgNS42LDIgMTAsMiBDMTQuNCwyIDE4LDUuNiAxOCwxMCBDMTgsMTQuNCAxNC40LDE4IDEwLDE4IEwxMCwxOCBaIiBpZD0iU2hhcGUiLz48L2c+PC9nPjwvZz48L3N2Zz4=");
border-radius: 100%;
}
.c-form-checkbox__input:disabled + .c-form-checkbox__caption {
opacity: 0.5;
cursor: not-allowed;
}
.c-form-checkbox__input:disabled + .c-form-checkbox__caption::before {
background-color: #c0c0c0;
border-color: #c0c0c0;
}
/* Form modifiers
=========================================== */
/**
* Since the majority of form field in an ecommerce site are required, all LABEL
* elements without the `is-required` class will automatically italicized.
*/
.c-form-label:not(.is-required):not(.u-text-normal) {
/*font-style: italic;*/
}
/* Disabled Form Elements
=========================================== */
.c-form-input[disabled],
.c-form-select__dropdown[disabled],
.c-form-checkbox__input[disabled] {
background-color: #c0c0c0;
}
/* Form errors
=========================================== */
/**
* Errors are handled by adding the .has-error class to the field's parent –
* usually the .c-form-list__item.
*
* The `invalid` class is included here to work with code output on some pages.
*/
.has-error,
.invalid {
color: #c8102e;
}
/**
* Change form field styles
*/
.has-error .c-form-input,
.invalid .c-form-input,
.c-form-input.has-error,
/*.c-form-input:not(:focus):invalid,*/
.has-error .c-form-select__dropdown,
.invalid .c-form-select__dropdown,
.c-form-select__dropdown.has-error/*,
.c-form-select__dropdown:not(:focus):invalid*/ {
border-color: #c8102e;
}
.has-error .c-form-input:focus,
.invalid .c-form-input:focus,
.c-form-input.has-error:focus,
/*.c-form-input:invalid:focus,*/
.has-error .c-form-select__dropdown:focus,
.invalid .c-form-select__dropdown:focus,
.c-form-select__dropdown.has-error:focus/*,
.c-form-select__dropdown:invalid:focus*/ {
border-color: #fff;
box-shadow: inset 0 0 0.5em 0 rgba(200, 16, 46, 0.75);
}
/**
* Change checkbox/radio indicator border color
*/
.has-error .c-form-checkbox__caption::before,
.invalid .c-form-checkbox__caption::before,
.c-form-checkbox__caption.has-error::before,
.c-form-checkbox__caption:invalid::before {
border-color: #c8102e;
}
/* Input sizing modifiers
=========================================== */
.c-form-input--large {
height: calc(3.5em - (1px * 2)); /* [2] */
line-height: calc(3.5em - (1px * 2)); /* [2] */
}
.c-form-input--huge {
height: calc(4.5em - (1px * 2)); /* [2] */
line-height: calc(4.5em - (1px * 2)); /* [2] */
}
.c-form-input--large.c-form-select__dropdown,
.c-form-input--huge.c-form-select__dropdown {
line-height: inherit;
}
/* ==========================================================================
COMPONENTS / KEYLINE
========================================================================== */
/**
* Simple keyline component to provide horizontal rules between other elements.
* e.g. ``
*
* 1. Reduce the `margin-bottom` by the same width as the keyline in order to
* keep on our baseline grid.
*/
.c-keyline {
margin-bottom: calc(16px - 1px); /* [1] */
border: none;
border-bottom: 1px solid #c0c0c0;
}
/**
* Heavier keylines.
*/
.c-keyline--thick {
margin-bottom: calc(16px - calc(1px * 2));
}
/**
* Smaller gaps underneath keylines.
*/
.c-keyline--small {
margin-bottom: calc((16px / 2) - 1px); /* [1] */
}
/**
* Adjust smaller gaps underneath thicker keylines.
*/
.c-keyline--small.c-keyline--thick {
margin-bottom: calc((16px / 2) - calc(1px * 2)); /* [1] */
}
/* ==========================================================================
COMPONENTS / MENU
========================================================================== */
.c-menu {}
.c-menu__title {
font-weight: 700;
}
.c-menu__list {
margin-left: 0;
line-height: 2;
list-style: none;
}
.c-menu__row {}
.c-menu__link {
display: block;
color: currentColor;
}
@media (min-width: 48em) {
.c-menu__link {
display: inline-block;
}
}
.c-collapsible-menu__trigger {
display: none;
}
@media (max-width: 47.9em) {
.c-collapsible-menu {
}
.c-collapsible-menu__label {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 700;
}
.c-collapsible-menu__label::after {
display: inline-block;
font-size: 1rem;
line-height: 1;
content: '+';
}
.c-collapsible-menu .c-menu__title {
display: none;
}
.c-collapsible-menu .c-menu__list {
display: block;
max-height: 0;
opacity: 0;
overflow: hidden;
visibility: hidden;
transition-delay: 0.15s, 0s, 0s;
}
.c-collapsible-menu__trigger:checked ~ .c-collapsible-menu__label::after {
content: '-';
}
.c-collapsible-menu__trigger:checked ~ .c-menu__list {
display: block;
max-height: 25em;
margin-top: 1em;
opacity: 1;
overflow: visible;
transition: visibility 0s ease, max-height 0.3s ease, opacity 0.3s ease;
transition-delay: 0s;
visibility: visible;
}
}
@media (min-width: 48em) {
.c-collapsible-menu__label {
display: none;
}
}
/* ==========================================================================
COMPONENTS / MINI-MODAL
========================================================================== */
.has-active-mini-modal {
overflow: hidden;
}
.c-mini-modal {
width: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
opacity: 0;
transition: all ease 300ms;
z-index: 500;
}
.c-mini-modal--active {
opacity: 1;
}
.c-mini-modal__overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.9);
}
.c-mini-modal__viewport {
height: 100%;
position: relative;
pointer-events: none;
}
.c-mini-modal__item {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all ease 300ms;
}
.c-mini-modal__item--added,
.c-mini-modal__item--removed {
opacity: 0;
}
.c-mini-modal__item--added--previous,
.c-mini-modal__item--removed--next {
transform: translateX(-100%);
}
.c-mini-modal__item--added--next,
.c-mini-modal__item--removed--previous {
transform: translateX(100%);
}
.c-mini-modal__status {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
color: #fff;
opacity: 0;
transition: all ease 300ms;
transform: translate(-50%, -50%);
}
.c-mini-modal__item--loading .c-mini-modal__status {
opacity: 1;
}
.c-mini-modal__content {
height: 100%;
opacity: 0;
transition: all ease 300ms;
transform: scale(0.5);
}
.c-mini-modal__item--loaded .c-mini-modal__content {
transform: none;
opacity: 1;
}
.c-mini-modal__item--removed--previous .c-mini-modal__content,
.c-mini-modal__item--removed--next .c-mini-modal__content {
transform: scale(0.5);
}
.c-mini-modal__element {
display: block;
max-width: 85vw;
max-height: 75vh;
margin: auto;
position: relative;
top: 50%;
overflow: auto;
transform: translateY(-50%);
pointer-events: auto;
-webkit-overflow-scrolling: touch;
}
.c-mini-modal__element--iframe,
.c-mini-modal__element--map {
background-color: #fff;
}
.c-mini-modal__element--iframe,
.c-mini-modal__iframe {
width: 100%;
height: 100%;
}
.c-mini-modal__element--video {
max-width: calc(100vh * (16 / 9));
}
.c-mini-modal__element--video::before {
display: block;
padding-bottom: 56.25%;
background-color: #000;
content: '';
}
.c-mini-modal__element-subject {
margin: auto;
padding: 2rem 2rem 1rem;
overflow: hidden;
}
.c-mini-modal__video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.c-mini-modal__caption {
padding: 1em;
position: absolute;
right: 0;
bottom: 0;
left: 0;
color: #fff;
pointer-events: auto;
}
.c-mini-modal__close,
.c-mini-modal__nav {
display: inline-block;
width: 1em;
height: 1em;
margin: 0;
padding: 0;
position: absolute;
font-family: monospace;
font-size: 3rem;
font-weight: 400;
line-height: 1;
text-align: center;
text-decoration: none;
border: 0 none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.c-mini-modal__close:hover,
.c-mini-modal__close:active,
.c-mini-modal__close:focus,
.c-mini-modal__nav:hover,
.c-mini-modal__nav:active,
.c-mini-modal__nav:focus {
text-decoration: none;
outline: none;
}
.c-mini-modal__close {
top: 0.5rem;
right: 0.5rem;
background-color: rgba(0, 0, 0, 0);
color: #fff;
}
.c-mini-modal__nav {
top: 50%;
transform: translateY(-50%);
background-color: #fff;
border-radius: 50%;
}
.c-mini-modal__nav--previous {
left: 0.5rem;
}
.c-mini-modal__nav--next {
right: 0.5rem;
}
/* ==========================================================================
COMPONENTS / NAVIGATION
========================================================================== */
.c-navigation {
position: relative;
}
.c-navigation__trigger {
display: none;
}
.c-navigation__trigger:checked ~ .c-navigation__row,
.c-navigation__trigger:checked ~ .c-navigation__row .c-navigation__row {
display: block;
}
.c-navigation__label {
display: block;
min-height: 2em;
margin: 0;
padding: 1em;
position: relative;
font-style: normal;
background-color: #9f9f9f;
color: #fff;
}
.c-navigation__label::after,
.c-navigation__label::before {
position: absolute;
right: 1em;
transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
}
.c-navigation__label::after {
content: "\2212";
opacity: 0;
transform: scale(0);
}
.c-navigation__label::before {
content: "\2261";
opacity: 1;
transform: scale(2);
}
.c-navigation__trigger:checked ~ .c-navigation__label::after {
opacity: 1;
transform: scale(2);
}
.c-navigation__trigger:checked ~ .c-navigation__label::before {
opacity: 0;
transform: scale(0);
}
.c-navigation__row {
display: none;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.c-navigation__link {
display: block;
padding: 0.5em 1em;
background-color: #fff;
color: #0f0f0f;
}
.c-navigation__link:hover {
text-decoration: none;
box-shadow: 0 2px 0 -1px #0f0f0f;
transition: box-shadow ease-in 0.2s;
}
.c-navigation__row:nth-child(2) .c-navigation__link {
padding-left: 2em;
}
.c-navigation__row:nth-child(2) .c-navigation__row:last-of-type .c-navigation__link {
padding-left: 3em;
}
@media (min-width: 48em) {
.c-navigation__label {
display: none;
}
.c-navigation__row,
.c-navigation__trigger:checked ~ .c-navigation__row,
.c-navigation__trigger:checked ~ .c-navigation__row .c-navigation__row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.c-navigation__list {
position: relative;
flex: 1 1 auto;
text-align: center;
}
.c-navigation__list .c-navigation__row {
display: none;
min-width: 100%;
position: absolute;
white-space: nowrap;
z-index: 100;
}
.c-navigation__row:nth-child(2) .c-navigation__list {
text-align: left;
}
.c-navigation__row:nth-child(2) .c-navigation__row:last-of-type {
top: 0;
left: 100%;
z-index: 200;
}
.c-navigation__row:nth-child(2) .c-navigation__link,
.c-navigation__row:nth-child(2) .c-navigation__row:last-of-type .c-navigation__link {
padding-left: 1em;
}
.c-navigation__row:nth-child(2) .c-navigation__link:hover {
background-color: #eaeaea;
box-shadow: none;
transition: background-color ease-in 0.2s;
}
.c-navigation__list:hover > .c-navigation__row {
display: table;
box-shadow: 1px 1px 0.25em 0 #0f0f0f;
}
.c-navigation__link {
border-right: 0 solid #0f0f0f; /* Change to 1px to add a right-border */
}
.c-navigation__list:last-of-type .c-navigation__link,
.c-navigation__row:nth-child(2) .c-navigation__list .c-navigation__link {
border-right: 0;
}
}
/* ==========================================================================
COMPONENTS / TABLES
========================================================================== */
/**
* The simple table offers easy to read data with a horizontal divider between
* rows at the expense of occupying more space.
*/
.c-table-simple {
border-collapse: collapse;
}
.c-table-simple__row {
border-bottom: 1px solid #c0c0c0;
}
.c-table-simple__cell {
padding: calc(1em / 2);
text-align: left;
vertical-align: top;
}
.c-table-simple__cell2 {
padding: calc(1em / 2);
text-align: right;
vertical-align: top;
}
.c-table-simple__cell--standard {
padding: 1em;
}
.c-table-simple__cell--wide {
padding: calc(1em * 2);
}
/**
* The stripped table offers easy to read data with alternating background rows.
*/
.c-table-stripped {
border-collapse: collapse;
}
.c-table-stripped__row:not(:nth-child(even)) {
background-color: #eaeaea;
}
/**
* This is a basic, responsive table set-up. It does require using a `data-label`
* attribute if you would like to show the row titles.
*/
.c-table-responsive {
width: 100%;
border-collapse: collapse;
}
.c-table-responsive_thead {
display: none;
}
.c-table-responsive__row {
display: block;
margin-bottom: calc(1em / 2);
border-bottom: 1px solid #c0c0c0;
}
.c-table-responsive__cell {
display: block;
padding-bottom: calc(1em / 2);
}
.c-table-responsive__cell::before {
display: block;
font-weight: 700;
text-align: left;
content: attr(data-label);
}
.c-table-responsive__cell--flex {
display: flex;
justify-content: space-between;
}
@media screen and (min-width: 48em) {
.c-table-responsive_thead {
display: table-header-group;
}
.c-table-responsive__row {
display: table-row;
margin-bottom: 0;
}
.c-table-responsive__cell {
display: table-cell;
padding: calc(1em / 2);
text-align: left;
vertical-align: top;
}
.c-table-responsive__cell--flush {
padding: 0;
}
.c-table-responsive__cell--narrow {
padding: calc(1em / 4);
}
.c-table-responsive__cell--standard {
padding: 1em;
}
.c-table-responsive__cell--wide {
padding: calc(1em * 2);
}
.c-table-responsive__cell::before {
display: none;
}
}
/* ==========================================================================
COMPONENTS / TYPOGRAPHY
========================================================================== */
/**
* In order to divorce our semantic decisions from our stylistic ones, we only
* define opinionated typographical styles against classes, NOT against
* typographic HTML elements.
*
* Further reading:
* http://csswizardry.com/2016/02/managing-typography-on-large-apps/
*/
/* Heading-level typography
=========================================== */
.c-heading-alpha {
font-size: calc((((16px * 1.2) * 1.2) * 1.2) * 1.2);
line-height: 1.25;
}
.c-heading-bravo {
font-size: calc(((16px * 1.2) * 1.2) * 1.2);
line-height: 1.154;
}
.c-heading-charlie {
font-size: calc((16px * 1.2) * 1.2);
line-height: 1.136;
}
.c-heading-delta {
font-size: calc(16px * 1.2);
line-height: 1.125;
}
.c-heading-echo {
font-size: 16px;
line-height: 1.125;
}
.c-heading-foxtrot {
font-size: calc(16px / 1.2);
line-height: 1.125;
}
@media (min-width: 40em) {
/**
* Small Breakpoint [40em = 640px]
* When in the small breakpoint, 'font-size' and 'line-height' are
* dynamically adjusted.
*/
.c-heading-alpha {
font-size: calc(((((16px * 1.2) * 1.2) * 1.2) * 1.2) + (((((16 * 1.333) * 1.333) * 1.333) * 1.333) - ((((16 * 1.2) * 1.2) * 1.2) * 1.2)) * ((100vw - (640 * 1px) ) / (960 - 640)));
line-height: calc(1.25em + 0.2 * ((100% - (640 * 1px)) / 640));
}
.c-heading-bravo {
font-size: calc((((16px * 1.2) * 1.2) * 1.2) + ((((16 * 1.333) * 1.333) * 1.333) - (((16 * 1.2) * 1.2) * 1.2)) * ((100vw - (640 * 1px) ) / (960 - 640)));
line-height: calc(1.154em + 0.096 * ((100% - (640 * 1px)) / 640));
}
.c-heading-charlie {
font-size: calc(((16px * 1.2) * 1.2) + (((16 * 1.333) * 1.333) - ((16 * 1.2) * 1.2)) * ((100vw - (640 * 1px) ) / (960 - 640)));
line-height: calc(1.136em + 0.114 * ((100% - (640 * 1px)) / 640));
}
.c-heading-delta {
font-size: calc((16px * 1.2) + ((16 * 1.333) - (16 * 1.2)) * ((100vw - (640 * 1px) ) / (960 - 640)));
line-height: calc(1.125em + 0.95 * ((100% - (640 * 1px)) / 640));
}
.c-heading-echo {
font-size: calc(16px * ((100vw - (640 * 1px) ) / (960 - 640)));
line-height: calc(1.125em + 0.25 * ((100% - (640 * 1px)) / 640));
}
.c-heading-foxtrot {
font-size: calc((16px / 1.2) + ((16 / 1.333) - (16 / 1.2)) * ((100vw - (640 * 1px) ) / (960 - 640)));
line-height: calc(1.125em + 0.25 * ((100% - (640 * 1px)) / 640));
}
}
@media (min-width: 60em) {
/**
* Large Breakpoint [60em = 960px] and Greater
*/
.c-heading-alpha {
font-size: calc((((16px * 1.333) * 1.333) * 1.333) * 1.333);
line-height: 1.05;
}
.c-heading-bravo {
font-size: calc(((16px * 1.333) * 1.333) * 1.333);
line-height: 1.25;
}
.c-heading-charlie {
font-size: calc((16px * 1.333) * 1.333);
line-height: 1.25;
}
.c-heading-delta {
font-size: calc(16px * 1.333);
line-height: 1.22;
}
.c-heading-echo {
font-size: 16px;
line-height: 1.5;
}
.c-heading-foxtrot {
font-size: calc(16px / 1.333);
line-height: 1.5;
}
}
.c-heading--subheading {
font-size: 0.6em;
font-weight: 400;
}
.c-heading--keyline {
display: inline-block;
margin-bottom: 1em;
position: relative;
}
.c-heading--keyline::after {
display: block;
width: 25%;
height: calc(16px / 8);
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, 0.5em);
-ms-transform: translate(-50%, 0.5em);
transform: translate(-50%, 0.5em);
background-color: #c0c0c0;
content: "";
}
/* Text-level typography
=========================================== */
.c-text-body {
font-size: 16px;
}
/* ==========================================================================
UTILITIES / BORDERS
========================================================================== */
/**
* Utility classes to adjust element borders.
*/
.u-border-none {
border-width: 0;
}
.u-border-thick {
border-width: calc(1px * 2);
}
.u-border-rounded {
border-radius: 10em;
}
.u-border-square {
border-radius: 0;
}
/* ==========================================================================
UTILITIES / CLEAR FIX
========================================================================== */
/**
* Class-based implementation of the 'clearfix hack'.
* http://cssmojo.com/the-very-latest-clearfix-reloaded/
*/
.u-clear-fix::after {
display: table;
clear: both;
content: "";
}
/* ==========================================================================
UTILITIES / COLORS
========================================================================== */
/**
* Utility classes to adjust element colors inline.
* Both .u-bg-*** and .u-color-*** work for each color class.
*/
.u-bg-red::before,
.u-bg-red {
background-color: #c8102e;
}
.u-bg-yellow::before,
.u-bg-yellow {
background-color: #f9ed1f;
}
.u-bg-blue::before,
.u-bg-blue {
background-color: #003b6f;
}
.u-bg-green::before,
.u-bg-green {
background-color: #009a44;
}
.u-bg-black::before,
.u-bg-black {
background-color: #0f0f0f;
}
.u-bg-gray-50::before,
.u-bg-gray-50 {
background-color: #222;
}
.u-bg-gray-40::before,
.u-bg-gray-40 {
background-color: #707070;
}
.u-bg-gray-30::before,
.u-bg-gray-30 {
background-color: #9f9f9f;
}
.u-bg-gray-20::before,
.u-bg-gray-20 {
background-color: #c0c0c0;
}
.u-bg-gray-10::before,
.u-bg-gray-10 {
background-color: #eaeaea;
}
.u-bg-white::before,
.u-bg-white {
background-color: #fff;
}
.u-bg-transparent {
background-color: rgba(0, 0, 0, 0);
}
.u-bg-primary::before,
.u-bg-primary {
background-color: #3d70b2;
}
.u-bg-secondary::before,
.u-bg-secondary {
background-color: #5aaafa;
}
.u-bg-tertiary::before,
.u-bg-tertiary {
background-color: #008571;
}
.u-bg-highlight::before,
.u-bg-highlight {
background-color: #f9ed1f;
}
.u-bg-accent::before,
.u-bg-accent {
background-color: #3cc;
}
.c-button:hover.u-bg-red {
background-color: #a00c24;
}
.c-button:hover.u-bg-yellow {
background-color: #c7bd19;
}
.c-button:hover.u-bg-blue {
background-color: #34638b;
}
.c-button:hover.u-bg-green {
background-color: #007c36;
}
.c-button:hover.u-bg-black {
background-color: #3f3f3f;
}
.c-button:hover.u-bg-gray-50 {
background-color: #4e4e4e;
}
.c-button:hover.u-bg-gray-40 {
background-color: #5a5a5a;
}
.c-button:hover.u-bg-gray-30 {
background-color: #7f7f7f;
}
.c-button:hover.u-bg-gray-20 {
background-color: #9a9a9a;
}
.c-button:hover.u-bg-gray-10 {
background-color: #bcbcbc;
}
.c-button:hover.u-bg-white {
background-color: #cbcbcb;
}
.c-button:hover.u-bg-primary {
background-color: #315a8e;
}
.c-button:hover.u-bg-secondary {
background-color: #4888c8;
}
.c-button:hover.u-bg-tertiary {
background-color: #006b5b;
}
.c-button:hover.u-bg-highlight {
background-color: #c7bd19;
}
.c-button:hover.u-bg-accent {
background-color: #29a4a4;
}
.u-border-red {
border-color: #c8102e;
}
.u-border-yellow {
border-color: #f9ed1f;
}
.u-border-blue {
border-color: #003b6f;
}
.u-border-green {
border-color: #009a44;
}
.u-border-black {
border-color: #0f0f0f;
}
.u-border-gray-50 {
border-color: #222;
}
.u-border-gray-40 {
border-color: #707070;
}
.u-border-gray-30 {
border-color: #9f9f9f;
}
.u-border-gray-20 {
border-color: #c0c0c0;
}
.u-border-gray-10 {
border-color: #eaeaea;
}
.u-border-white {
border-color: #fff;
}
.u-border-transparent {
border-color: rgba(0, 0, 0, 0);
}
.u-border-primary {
border-color: #3d70b2;
}
.u-border-secondary {
border-color: #5aaafa;
}
.u-border-tertiary {
border-color: #008571;
}
.u-border-highlight {
border-color: #f9ed1f;
}
.u-border-accent {
border-color: #3cc;
}
.u-color-red {
color: #c8102e;
}
.u-color-yellow {
color: #f9ed1f;
}
.u-color-blue {
color: #003b6f;
}
.u-color-blue2 {
color: #0d3dd3;
}
.u-color-green {
color: #009a44;
}
.u-color-black {
color: #0f0f0f;
}
.u-color-gray-50 {
color: #222;
}
.u-color-gray-40 {
color: #707070;
}
.u-color-gray-30 {
color: #9f9f9f;
}
.u-color-gray-20 {
color: #c0c0c0;
}
.u-color-gray-10 {
color: #eaeaea;
}
.u-color-white {
color: #fff;
}
.u-color-transparent {
color: rgba(0, 0, 0, 0);
}
.u-color-primary {
color: #3d70b2;
}
.u-color-secondary {
color: #5aaafa;
}
.u-color-tertiary {
color: #008571;
}
.u-color-highlight {
color: #f9ed1f;
}
.u-color-accent {
color: #3cc;
}
/**
* This will make sure the full background of a layout object is filled.
*/
.o-layout[class*="u-bg-"] {
position: relative;
background-color: rgba(0, 0, 0, 0);
}
.o-layout[class*="u-bg-"]::before {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 16px;
content: '';
}
.o-layout--narrow[class*="u-bg-"]::before {
left: calc(16px * 0.5);
}
.o-layout--wide[class*="u-bg-"]::before {
left: calc(16px * 2);
}
.o-layout--flush[class*="u-bg-"]::before {
left: 0;
}
.o-layout[class*="u-bg-"] > * {
position: relative;
z-index: 1;
}
/* ==========================================================================
UTILITIES / DISPLAY
========================================================================== */
.u-overflow-hidden {
overflow: hidden;
}
/**
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.u-hide-visually {
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.u-hide-visually.focusable:active,
.u-hide-visually.focusable:focus {
width: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
clip: auto;
white-space: inherit;
}
/**
* Hide visually and from screen readers.
*/
[aria-hidden=true], .u-hidden {
display: none;
}
/**
* Hidden visually but maintains the layout.
*/
.u-invisible {
visibility: hidden;
}
/**
* Various utility classes to show the content.
*/
.u-flex {
display: flex;
}
.u-block,
.u-shown {
display: block;
overflow:hidden;
}
.u-inline {
display: inline;
}
.u-inline-block {
display: inline-block;
}
.u-visible {
visibility: visible;
}
/* Small Breakpoint [40em = 640px]
=========================================== */
@media screen and (min-width: 40em) {
.u-hidden--s {
display: none;
}
.u-invisible--s {
visibility: hidden;
}
.u-flex--s {
display: flex;
}
.u-block--s,
.u-shown--s {
display: block;
}
.u-inline--s {
display: inline;
}
.u-inline-block--s {
display: inline-block;
}
.u-visible--s {
visibility: visible;
}
}
/* Medium Breakpoint [48em = 768px]
=========================================== */
@media screen and (min-width: 48em) {
.u-hidden--m {
display: none;
}
.u-invisible--m {
visibility: hidden;
}
.u-flex--m {
display: flex;
}
.u-block--m,
.u-shown--m {
display: block;
}
.u-inline--m {
display: inline;
}
.u-inline-block--m {
display: inline-block;
}
.u-visible--m {
visibility: visible;
}
}
/* Large Breakpoint [60em = 960px]
=========================================== */
@media screen and (min-width: 60em) {
.u-hidden--l {
display: none;
}
.u-invisible--l {
visibility: hidden;
}
.u-flex--l {
display: flex;
}
.u-block--l,
.u-shown--l {
display: block;
}
.u-inline--l {
display: inline;
}
.u-inline-block--l {
display: inline-block;
}
.u-visible--l {
visibility: visible;
}
}
/* Extra-Large Breakpoint [75em = 1200px]
=========================================== */
@media screen and (min-width: 75em) {
.u-hidden--xl {
display: none;
}
.u-invisible--xl {
visibility: hidden;
}
.u-flex--xl {
display: flex;
}
.u-block--xl,
.u-shown--xl {
display: block;
}
.u-inline--xl {
display: inline;
}
.u-inline-block--xl {
display: inline-block;
}
.u-visible--xl {
visibility: visible;
}
}
/* Wide-Screen Breakpoint [90em = 1440px]
=========================================== */
@media screen and (min-width: 90em) {
.u-hidden--w {
display: none;
}
.u-invisible--w {
visibility: hidden;
}
.u-flex--w {
display: flex;
}
.u-block--w,
.u-shown--w {
display: block;
}
.u-inline--w {
display: inline;
}
.u-inline-block--w {
display: inline-block;
}
.u-visible--w {
visibility: visible;
}
}
/* ==========================================================================
UTILITIES / GRIDS
========================================================================== */
/**
* A series of utility classes that give an automatic number of columns based
* on the class used, media breakpoints are included.
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* The above will create a three-column structure in which each column will
* fluidly fill one-third of the width of the parent with the remainder elements
* wrapping as needed. We can have more complex systems:
*
*