/* ==========================================================================
Moleqular, by Purpose Media
========================================================================== */
/*! purgecss start ignore */
/* Settings
========================================================================== */
/* ==========================================================================
* Settings - Colours
========================================================================== */
/**
* The global colour settings for the project including
* the palette and the global colour settings.
*
*/
/* Colour Palette
============================================================ */
/* Colour Defaults
============================================================ */
/* Colour Neutrals
============================================================ */
/* Colour States
============================================================ */
/* Colour Gradients
============================================================ */
/* Colour Settings
============================================================ */
/* ==========================================================================
* Settings - Typography
========================================================================== */
/**
* The global Typography settings for the project including
* the font family, sizes, weights and letter spacing.
*
*/
/* Typography Family
============================================================ */
/* Typography Weights
============================================================ */
/* Typography Heading Sizes
============================================================ */
/* Typography Body Sizes
============================================================ */
/* Typography Body Line Heights
============================================================ */
/* Typography Settings
============================================================ */
/**
* 1. Enable this option to use the global
* font line height. If disabled each
* heading shall use its own line height
* value set in this file.
*
* 2. Enable mobile sizes to auto size
* the headings for mobile. I pefer to
* manually set these on a case by
* case heading to have total control.
*/
/* [1] */
/* [2] */
/* Typography ( Update from Settings )
============================================================ */
/* ==========================================================================
* Settings - Breakpoints
========================================================================== */
/**
* An array of breakpoints to create our spacing, grids and helpers.
*
*/
/* ==========================================================================
* Settings - Spacing
========================================================================== */
/**
* Set the global space variables to be used on a project. Also we can set
* the array of values to generate our helper spacer classes.
*
*/
/* Default Spacing Values
============================================================ */
/* Container Settings
============================================================ */
/* Row Spacing Array ( For helper classes )
============================================================ */
/* Spacing Sizes Array ( For helper classes )
============================================================ */
/* Spacing Direction Array ( For helper classes )
============================================================ */
/* Spacing Properties Array ( For helper classes )
============================================================ */
/* ==========================================================================
* Settings - Grid
========================================================================== */
/**
* The settings to power our grid classes, here we can set both
* out gutter settings but also our grid widths to use.
*
*/
/* ==========================================================================
* Settings - Inputs
========================================================================== */
/**
* Settings for our inputs, set up our style here for what we
* want our inputs to look like.
*
*/
/* ==========================================================================
* Settings - Inputs
========================================================================== */
/**
* Settings for our buttons, set up our style here for what we
* want our buttons to look like.
*
*/
/* ==========================================================================
* Settings - Globals
========================================================================== */
/**
* The global settings that are too small for there own
* file, here we can set the transitions, box-shadows
* and the border radius that we use in the project.
*
*/
/* Heigts
============================================================ */
/* Transitions
============================================================ */
/* Border Radius
============================================================ */
/* Box Shadow
============================================================ */
/* Tools
========================================================================== */
/* ============================================================
* Tools - Media Query
============================================================ */
/**
* Media-queries are really simple they are set
* up in the global settings and use device names
* which are the easiest way to remember them.
* Out of the box, this framework is mobile
* first but there is media queries generated for both min
* and max widths,
* Example:
* @include by-device(ipad) {}
* @include by-device(ipad--max) {}
*
*/
/* ============================================================
* Tools - Aspect Ratio
============================================================ */
/**
* A mixin to make for giving elemnets heigh via an aspect
* ratio.
* Example:
* @include aspect-ratio(16, 9);
*
*/
/* ============================================================
* Tools - Cover
============================================================ */
/**
* The global mixin for covering over something 100%.
* Example:
* @include cover(2);
*
*/
/* ============================================================
* Tools - Transition
============================================================ */
/**
* A simple tool for quick and consistent transitions
* @include transition(color, background) {}
*
*/
/* ============================================================
* Tools - Heading
============================================================ */
/**
* The global mixin for creating headings form the settings.
* Example:
* @include heading(one);
*
*/
/* ============================================================
* Tools - Hover
============================================================ */
/**
* The global mixin for hovers to ensure the device is a hoverable device.
* Example:
* @include hover {
* color: $colour-primary;
* }
*
*/
/* Generic - Rest, Normalize
========================================================================== */
/* sanitize.css v8.0.0 | CC0 License | github.com/csstools/sanitize.css */
/* Document
* ========================================================================== */
/**
* 1. Remove repeating backgrounds in all browsers (opinionated).
* 2. Add border box sizing in all browsers (opinionated).
*
*/
*,
::before,
::after {
background-repeat: no-repeat; /* 1 */
box-sizing: border-box; /* 2 */
}
/**
* 1. Add text decoration inheritance in all browsers (opinionated).
* 2. Add vertical alignment inheritance in all browsers (opinionated).
*
*/
::before,
::after {
text-decoration: inherit; /* 1 */
vertical-align: inherit; /* 2 */
}
/**
* 1. Use the default cursor in all browsers (opinionated).
* 2. Use the default user interface font in all browsers (opinionated).
* 3. Correct the line height in all browsers.
* 4. Use a 4-space tab width in all browsers (opinionated).
* 5. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
* 6. Breaks words to prevent overflow in all browsers (opinionated).
*
*/
html {
cursor: default; /* 1 */
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 2 */
line-height: 1.15; /* 3 */ /* 4 */
-moz-tab-size: 4;
tab-size: 4; /* 4 */ /* 5 */
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%; /* 5 */
word-break: break-word; /* 6 */
}
/* Sections
* ========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*
*/
body {
margin: 0;
}
/* Grouping content
* ========================================================================== */
/**
* 1. Add the correct sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*
*/
hr {
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* Add the correct display in IE.
*
*/
main {
display: block;
}
/**
* Remove the list style on navigation lists in all browsers (opinionated).
*
*/
nav ol,
nav ul {
list-style: none;
}
/**
* 1. Use the default monospace user interface font
* in all browsers (opinionated).
* 2. Correct the odd `em` font sizing in all browsers.
*
*/
pre {
font-family: Menlo, Consolas, Roboto Mono, Ubuntu monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
* ========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*
*/
a {
background-color: transparent;
}
/**
* Add the correct text decoration in Edge, IE, Opera, and Safari.
*
*/
abbr[title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Use the default monospace user interface font
* in all browsers (opinionated).
* 2. Correct the odd `em` font sizing in all browsers.
*
*/
code,
kbd,
samp {
font-family: Menlo, Consolas, Roboto Mono, Ubuntu monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*
*/
small {
font-size: 80%;
}
/**
* Remove the text shadow on text selections in Firefox 61- (opinionated).
* 1. Restore the coloring undone by defining the text shadow
* in all browsers (opinionated).
*
*/
::selection {
background-color: #b3d4fc; /* 1 */
color: #000; /* 1 */
text-shadow: none;
}
::selection {
background-color: #b3d4fc; /* 1 */
color: #000; /* 1 */
text-shadow: none;
}
/* Embedded content
* ========================================================================== */
/**
* Change the alignment on media elements in all browsers (opinionated).
*
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/**
* Add the correct display in IE 9-.
*
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*
*/
img {
border-style: none;
}
/**
* Change the fill color to match the text color in all browsers (opinionated).
*
*/
svg:not([fill]) {
fill: currentcolor;
}
/**
* Hide the overflow in IE.
*
*/
svg:not(:root) {
overflow: hidden;
}
/* Tabular data
* ========================================================================== */
/**
* Collapse border spacing in all browsers (opinionated).
*
*/
table {
border-collapse: collapse;
}
/* Forms
* ========================================================================== */
/**
* Inherit styling in all browsers (opinionated).
*
*/
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/**
* Remove the margin in Safari.
*
*/
button,
input,
select {
margin: 0;
}
/**
* 1. Show the overflow in IE.
* 2. Remove the inheritance of text transform in Edge, Firefox, and IE.
*
*/
button {
overflow: visible; /* 1 */
text-transform: none; /* 2 */
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
appearance: button;
}
/**
* Correct the padding in Firefox.
*
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* Show the overflow in Edge and IE.
*
*/
input {
overflow: visible;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
*
*/
legend {
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in Edge and IE.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the inheritance of text transform in Firefox.
*
*/
select {
text-transform: none;
}
/**
* 1. Remove the margin in Firefox and Safari.
* 2. Remove the default vertical scrollbar in IE.
* 3. Change the resize direction on textareas in all browsers (opinionated).
*
*/
textarea {
margin: 0; /* 1 */
overflow: auto; /* 2 */
resize: vertical; /* 3 */
}
/**
* Remove the padding in IE 10-.
*
*/
[type=checkbox],
[type=radio] {
padding: 0;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*
*/
[type=search] {
-webkit-appearance: textfield;
appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Safari.
*
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*
*/
::input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*
*/
::-webkit-search-decoration {
-webkit-appearance: none;
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;
appearance: button; /* 1 */
font: inherit; /* 2 */
}
/**
* Remove the inner border and padding of focus outlines in Firefox.
*
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus outline styles unset by the previous rule in Firefox.
*
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/* Interactive
* ========================================================================== */
/**
* Add the correct display in Edge and IE.
*
*/
details {
display: block;
}
/**
* Add the correct styles in Edge, IE, and Safari.
*
*/
dialog {
background-color: white;
border: solid;
color: black;
display: block;
height: -moz-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: fit-content;
}
dialog:not([open]) {
display: none;
}
/**
* Add the correct display in all browsers.
*
*/
summary {
display: list-item;
}
/* Scripting
* ========================================================================== */
/**
* Add the correct display in IE 9-.
*
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*
*/
template {
display: none;
}
/* User interaction
* ========================================================================== */
/**
* 1. Remove the tapping delay in IE 10.
* 2. Remove the tapping delay on clickable elements
* in all browsers (opinionated).
*
*/
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] { /* 1 */
touch-action: manipulation; /* 2 */
}
/**
* Add the correct display in IE 10-.
*
*/
[hidden] {
display: none;
}
/* Accessibility
* ========================================================================== */
/**
* Change the cursor on busy elements in all browsers (opinionated).
*
*/
[aria-busy=true] {
cursor: progress;
}
/**
* Change the cursor on control elements in all browsers (opinionated).
*
*/
[aria-controls] {
cursor: pointer;
}
/**
* Change the cursor on disabled, not-editable, or otherwise
* inoperable elements in all browsers (opinionated).
*
*/
[aria-disabled=true],
[disabled] {
cursor: not-allowed;
}
/**
* Change the display on visually hidden accessible elements
* in all browsers (opinionated).
*
*/
[aria-hidden=false][hidden]:not(:focus) {
clip: rect(0, 0, 0, 0);
display: inherit;
position: absolute;
}
/* Packages ( NPM, External etc...
========================================================================== */
@keyframes splide-loading {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
.splide__track--draggable {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.splide__track--fade > .splide__list > .splide__slide {
margin: 0 !important;
opacity: 0;
z-index: 0;
}
.splide__track--fade > .splide__list > .splide__slide.is-active {
opacity: 1;
z-index: 1;
}
.splide--rtl {
direction: rtl;
}
.splide__track--ttb > .splide__list {
display: block;
}
.splide__container {
box-sizing: border-box;
position: relative;
}
.splide__list {
backface-visibility: hidden;
display: flex;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.splide.is-initialized:not(.is-active) .splide__list {
display: block;
}
.splide__pagination {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
pointer-events: none;
}
.splide__pagination li {
display: inline-block;
line-height: 1;
list-style-type: none;
margin: 0;
pointer-events: auto;
}
.splide:not(.is-overflow) .splide__pagination {
display: none;
}
.splide__progress__bar {
width: 0;
}
.splide {
position: relative;
visibility: hidden;
}
.splide.is-initialized, .splide.is-rendered {
visibility: visible;
}
.splide__slide {
backface-visibility: hidden;
box-sizing: border-box;
flex-shrink: 0;
list-style-type: none !important;
margin: 0;
position: relative;
}
.splide__slide img {
vertical-align: bottom;
}
.splide__spinner {
animation: splide-loading 1s infinite linear;
border: 2px solid #999;
border-left-color: transparent;
border-radius: 50%;
bottom: 0;
contain: strict;
display: inline-block;
height: 20px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 20px;
}
.splide__sr {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.splide__toggle__pause {
display: none;
}
.splide__toggle.is-active .splide__toggle__play {
display: none;
}
.splide__toggle.is-active .splide__toggle__pause {
display: inline;
}
.splide__track {
overflow: hidden;
position: relative;
z-index: 0;
}
/* Base
========================================================================== */
/* ============================================================
* Base - Page
============================================================ */
/**
* Default page styling and settings for html
* and body.
*
* 1. The font & type settings can be edited in the typography setting.
* 2. The colours can be set in the colours settings.
* 3. Set the scroll behavior to be default instead of smooth .
* 4. Sets the colours when highlighting.
*
*/
html {
font-size: 16px; /* 1 */
line-height: 26px; /* 1 */
background: #fff; /* 2 */
font-weight: 400; /* 1 */
font-family: "Poppins", sans-serif; /* 1 */
color: #25305d; /* 2 */
scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto; /* 3 */
}
}
body {
-ms-overflow-style: none;
}
* {
box-sizing: border-box;
}
::selection {
background-color: #25305d; /* 4 */
color: #fff; /* 4 */
}
figure {
padding: 0;
margin: 0;
}
/* ============================================================
* Base - Text
============================================================ */
/**
* Default paragpraph text
*
*/
p {
color: #25305d;
margin: 0;
padding: 0;
font-size: 16px;
line-height: 26px;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
/* ============================================================
* Base - Links
============================================================ */
/**
* Default link styling bassed of settings
* set in the main settings file.
*
*/
a {
color: #25305d;
text-decoration: none;
}
/* ============================================================
* Base - Images
============================================================ */
/**
* Default image styling
*
* 1. Limit width to 100% of parent
* 2. Make sure the correct ratio is maintained
*
*/
img {
max-width: 100%; /* 1 */
vertical-align: middle;
height: auto; /* 2 */
}
/* ============================================================
* Base - Inputs
============================================================ */
/**
* Default input styling
*
*/
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=search], input[type=email], textarea {
font-family: "Poppins", sans-serif;
border-radius: 100px;
border: 1px solid #25305d;
background-color: #fff;
color: #25305d;
padding: 11px 20px;
font-size: 16px;
line-height: 26px;
box-shadow: 0 2.5px 5px rgba(37, 48, 93, 0.05);
outline: 0;
-webkit-appearance: none;
appearance: none;
transition: border 400ms cubic-bezier(0.77, 0, 0.175, 1), box-shadow 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=search]:focus, input[type=email]:focus, textarea:focus {
border-color: #25305d;
box-shadow: 0 5px 10px rgba(37, 48, 93, 0.1);
}
input[type=text]::placeholder, input[type=email]::placeholder, input[type=password]::placeholder, input[type=number]::placeholder, input[type=tel]::placeholder, input[type=search]::placeholder, input[type=email]::placeholder, textarea::placeholder {
color: rgba(37, 48, 93, 0.5);
}
textarea {
min-height: 100px;
border-radius: 20px;
}
/* ============================================================
* Base - Lists
============================================================ */
/**
* Default list styling, can be removed with
* the o-list-bare class set in the lsit-bare
* object file.
*
*/
ul, ol {
margin-bottom: 20px;
}
li {
margin-left: 20px;
}
/* Objects
========================================================================== */
/* ============================================================
* Objects - Row
============================================================ */
/**
* The styling for rows(sections) accross the site,
* we apply the background colors to our blocks
* through this rows file. We can call our rows
* sizing set in the settings/rows file like:
* <div class="o-row o-row--large"></div>
*
* 1. Reset spacing.
*
*/
.o-row {
display: block;
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
/* Spacing Variants
*
* This is all auto generated from the settings/rows to make
* our row spacing simple throughtout the device range.
============================================================ */
.o-row {
padding: 40px 0;
}
@media (min-width: 768px) {
.o-row {
padding: 60px 0;
}
}
@media (min-width: 1024px) {
.o-row {
padding: 80px 0;
}
}
.o-row--small {
padding: 20px 0;
}
@media (min-width: 768px) {
.o-row--small {
padding: 60px 0;
}
}
.o-row--large {
padding: 100px 0;
}
@media (min-width: 768px) {
.o-row--large {
padding: 240px 0;
}
}
.o-row--super {
padding: 180px 0;
}
@media (min-width: 768px) {
.o-row--super {
padding: 360px 0;
}
}
.o-row--none {
padding: 0 0;
}
/* Colour Variants
============================================================ */
.o-row--primary {
background-color: #25305d;
}
.o-row--secondary {
background-color: #00aad0;
}
.o-row--tertiary {
background-color: #ec8005;
}
.o-row--quaternary {
background-color: #a0144d;
}
.o-row--white {
border-top: 1px solid #f2f0f0;
background-color: #fff;
}
.o-row--black {
background-color: #25305d;
}
.o-row--grey {
background-color: #f2f0f0;
}
.o-row--grey-dark {
background-color: #e6e2e2;
}
.o-row--gradient {
background: linear-gradient(135deg, #161d39 0%, #25305d 100%);
}
.o-row--overlap {
background-color: #fff;
}
/* Remove padding on touching elements
============================================================ */
/* Extras
============================================================ */
.o-row--radius {
border-radius: 3px;
}
/* ============================================================
* Objects - Container
============================================================ */
/**
* The styling for containers accross the site
*
* 1. The container width is set in the spacing
* file under the settings folder.
* 2. To center the container in the center of the page
*
*/
.o-container {
width: 100%;
max-width: 1780px; /* 1 */
padding: 0 20px;
margin: 0 auto; /* 2 */
}
@media (min-width: 768px) {
.o-container {
padding: 0 40px;
}
}
@media (min-width: 1280px) {
.o-container {
padding: 0 80px;
}
}
.o-container--small {
max-width: 1280px;
}
/* ============================================================
* Objects - Layout
============================================================ */
/**
* The styling for layouts which are used for gutters on
* grids.
*
*/
.o-layout {
list-style: none;
display: flex;
flex-wrap: wrap;
}
.o-layout__item {
box-sizing: border-box;
position: relative;
width: 100%;
max-width: 100%;
}
.o-layout__item:first-of-type {
margin-top: 0;
}
.o-layout__item.o-layout__item--1:nth-of-type(-n+1) {
margin-top: 0;
}
.o-layout__item.o-layout__item--2:nth-of-type(-n+2) {
margin-top: 0;
}
.o-layout__item.o-layout__item--3:nth-of-type(-n+3) {
margin-top: 0;
}
.o-layout__item.o-layout__item--4:nth-of-type(-n+4) {
margin-top: 0;
}
.o-layout__item.o-layout__item--5:nth-of-type(-n+5) {
margin-top: 0;
}
.o-layout__item.o-layout__item--6:nth-of-type(-n+6) {
margin-top: 0;
}
.o-layout__item.o-layout__item--7:nth-of-type(-n+7) {
margin-top: 0;
}
.o-layout__item.o-layout__item--8:nth-of-type(-n+8) {
margin-top: 0;
}
.o-layout--gutter {
margin-left: -20px;
}
@media (min-width: 1024px) {
.o-layout--gutter {
margin-left: -40px;
}
}
.o-layout--gutter > .o-layout__item {
padding-left: 20px;
}
@media (min-width: 1024px) {
.o-layout--gutter > .o-layout__item {
padding-left: 40px;
}
}
.o-layout--gutter-large {
margin-left: -40px;
}
@media (min-width: 1024px) {
.o-layout--gutter-large {
margin-left: -80px;
}
}
.o-layout--gutter-large > .o-layout__item {
padding-left: 40px;
}
@media (min-width: 1024px) {
.o-layout--gutter-large > .o-layout__item {
padding-left: 80px;
}
}
.o-layout--0 {
margin-left: 0;
}
@media (min-width: 1024px) {
.o-layout--0 {
margin-left: 0;
}
}
.o-layout--0 > .o-layout__item {
padding-left: 0;
}
@media (min-width: 1024px) {
.o-layout--0 > .o-layout__item {
padding-left: 0;
}
}
@media (min-width: 375px) {
.o-layout__item--1\@iphone-small:nth-of-type(-n+1) {
margin-top: 0;
}
.o-layout__item--2\@iphone-small:nth-of-type(-n+2) {
margin-top: 0;
}
.o-layout__item--3\@iphone-small:nth-of-type(-n+3) {
margin-top: 0;
}
.o-layout__item--4\@iphone-small:nth-of-type(-n+4) {
margin-top: 0;
}
.o-layout__item--5\@iphone-small:nth-of-type(-n+5) {
margin-top: 0;
}
.o-layout__item--6\@iphone-small:nth-of-type(-n+6) {
margin-top: 0;
}
.o-layout__item--7\@iphone-small:nth-of-type(-n+7) {
margin-top: 0;
}
.o-layout__item--8\@iphone-small:nth-of-type(-n+8) {
margin-top: 0;
}
}
@media (min-width: 640px) {
.o-layout__item--1\@iphone-max:nth-of-type(-n+1) {
margin-top: 0;
}
.o-layout__item--2\@iphone-max:nth-of-type(-n+2) {
margin-top: 0;
}
.o-layout__item--3\@iphone-max:nth-of-type(-n+3) {
margin-top: 0;
}
.o-layout__item--4\@iphone-max:nth-of-type(-n+4) {
margin-top: 0;
}
.o-layout__item--5\@iphone-max:nth-of-type(-n+5) {
margin-top: 0;
}
.o-layout__item--6\@iphone-max:nth-of-type(-n+6) {
margin-top: 0;
}
.o-layout__item--7\@iphone-max:nth-of-type(-n+7) {
margin-top: 0;
}
.o-layout__item--8\@iphone-max:nth-of-type(-n+8) {
margin-top: 0;
}
}
@media (min-width: 768px) {
.o-layout__item--1\@ipad:nth-of-type(-n+1) {
margin-top: 0;
}
.o-layout__item--2\@ipad:nth-of-type(-n+2) {
margin-top: 0;
}
.o-layout__item--3\@ipad:nth-of-type(-n+3) {
margin-top: 0;
}
.o-layout__item--4\@ipad:nth-of-type(-n+4) {
margin-top: 0;
}
.o-layout__item--5\@ipad:nth-of-type(-n+5) {
margin-top: 0;
}
.o-layout__item--6\@ipad:nth-of-type(-n+6) {
margin-top: 0;
}
.o-layout__item--7\@ipad:nth-of-type(-n+7) {
margin-top: 0;
}
.o-layout__item--8\@ipad:nth-of-type(-n+8) {
margin-top: 0;
}
}
@media (min-width: 769px) {
.o-layout__item--1\@checkout:nth-of-type(-n+1) {
margin-top: 0;
}
.o-layout__item--2\@checkout:nth-of-type(-n+2) {
margin-top: 0;
}
.o-layout__item--3\@checkout:nth-of-type(-n+3) {
margin-top: 0;
}
.o-layout__item--4\@checkout:nth-of-type(-n+4) {
margin-top: 0;
}
.o-layout__item--5\@checkout:nth-of-type(-n+5) {
margin-top: 0;
}
.o-layout__item--6\@checkout:nth-of-type(-n+6) {
margin-top: 0;
}
.o-layout__item--7\@checkout:nth-of-type(-n+7) {
margin-top: 0;
}
.o-layout__item--8\@checkout:nth-of-type(-n+8) {
margin-top: 0;
}
}
@media (min-width: 1024px) {
.o-layout__item--1\@ipad-pro:nth-of-type(-n+1) {
margin-top: 0;
}
.o-layout__item--2\@ipad-pro:nth-of-type(-n+2) {
margin-top: 0;
}
.o-layout__item--3\@ipad-pro:nth-of-type(-n+3) {
margin-top: 0;
}
.o-layout__item--4\@ipad-pro:nth-of-type(-n+4) {
margin-top: 0;
}
.o-layout__item--5\@ipad-pro:nth-of-type(-n+5) {
margin-top: 0;
}
.o-layout__item--6\@ipad-pro:nth-of-type(-n+6) {
margin-top: 0;
}
.o-layout__item--7\@ipad-pro:nth-of-type(-n+7) {
margin-top: 0;
}
.o-layout__item--8\@ipad-pro:nth-of-type(-n+8) {
margin-top: 0;
}
}
@media (min-width: 1280px) {
.o-layout__item--1\@laptop:nth-of-type(-n+1) {
margin-top: 0;
}
.o-layout__item--2\@laptop:nth-of-type(-n+2) {
margin-top: 0;
}
.o-layout__item--3\@laptop:nth-of-type(-n+3) {
margin-top: 0;
}
.o-layout__item--4\@laptop:nth-of-type(-n+4) {
margin-top: 0;
}
.o-layout__item--5\@laptop:nth-of-type(-n+5) {
margin-top: 0;
}
.o-layout__item--6\@laptop:nth-of-type(-n+6) {
margin-top: 0;
}
.o-layout__item--7\@laptop:nth-of-type(-n+7) {
margin-top: 0;
}
.o-layout__item--8\@laptop:nth-of-type(-n+8) {
margin-top: 0;
}
}
@media (min-width: 1440px) {
.o-layout__item--1\@macbook:nth-of-type(-n+1) {
margin-top: 0;
}
.o-layout__item--2\@macbook:nth-of-type(-n+2) {
margin-top: 0;
}
.o-layout__item--3\@macbook:nth-of-type(-n+3) {
margin-top: 0;
}
.o-layout__item--4\@macbook:nth-of-type(-n+4) {
margin-top: 0;
}
.o-layout__item--5\@macbook:nth-of-type(-n+5) {
margin-top: 0;
}
.o-layout__item--6\@macbook:nth-of-type(-n+6) {
margin-top: 0;
}
.o-layout__item--7\@macbook:nth-of-type(-n+7) {
margin-top: 0;
}
.o-layout__item--8\@macbook:nth-of-type(-n+8) {
margin-top: 0;
}
}
@media (min-width: 1920px) {
.o-layout__item--1\@desktop:nth-of-type(-n+1) {
margin-top: 0;
}
.o-layout__item--2\@desktop:nth-of-type(-n+2) {
margin-top: 0;
}
.o-layout__item--3\@desktop:nth-of-type(-n+3) {
margin-top: 0;
}
.o-layout__item--4\@desktop:nth-of-type(-n+4) {
margin-top: 0;
}
.o-layout__item--5\@desktop:nth-of-type(-n+5) {
margin-top: 0;
}
.o-layout__item--6\@desktop:nth-of-type(-n+6) {
margin-top: 0;
}
.o-layout__item--7\@desktop:nth-of-type(-n+7) {
margin-top: 0;
}
.o-layout__item--8\@desktop:nth-of-type(-n+8) {
margin-top: 0;
}
}
/* ============================================================
* Objects - Bare List
============================================================ */
/**
* A styling for lists to remove styling
*
*/
.o-list-bare {
list-style-type: none;
margin: 0;
padding: 0;
}
.o-list-bare__item {
margin-left: 0;
}
/* Elements
========================================================================== */
/** ========================================
* Link Style
** ===================================== **/
.e-link, .e-breadcrumb--white .rank-math-breadcrumb a {
transition: color 400ms cubic-bezier(0.77, 0, 0.175, 1);
position: relative;
border-bottom: 1px solid transparent;
/* Colours
================================================== */
/* Sizes
================================================== */
/* Font Weights & Styles
================================================== */
}
.e-link::before, .e-breadcrumb--white .rank-math-breadcrumb a::before {
transition: width 400ms cubic-bezier(0.77, 0, 0.175, 1);
position: absolute;
bottom: 0;
left: 0;
content: "";
height: 1px;
width: 0;
}
.e-link:hover:before, .e-breadcrumb--white .rank-math-breadcrumb a:hover:before {
width: 100%;
}
.e-link--black {
color: #25305d;
}
.e-link--black:before {
background-color: #25305d;
}
.e-link--white, .e-breadcrumb--white .rank-math-breadcrumb a {
color: #fff;
border-color: rgba(255, 255, 255, 0.2);
}
.e-link--white:before, .e-breadcrumb--white .rank-math-breadcrumb a:before {
background-color: #fff;
}
.e-link--primary {
color: #25305d;
border-color: rgba(37, 48, 93, 0.2);
}
.e-link--primary:before {
background-color: #25305d;
}
@media (hover: hover) {
.e-link--primary.e-link--plain:hover {
color: #00aad0;
}
}
.e-link--secondary {
color: #00aad0;
}
.e-link--secondary:before {
background-color: #00aad0;
}
.e-link--quaternary {
color: #a0144d;
}
.e-link--quaternary:before {
background-color: #a0144d;
}
.e-link--large {
font-size: 18px;
}
.e-link--plain {
text-decoration: none;
}
.e-link--bold {
font-weight: 600;
}
.e-link--plain {
border-color: transparent;
}
.e-link--plain:before {
background-color: transparent;
}
/* Buttons
================================================== */
.e-btn, .nf-form-cont .nf-form-content .nf-field-element input[type=button],
.nf-form-cont .nf-form-content .nf-field-element input[type=submit], .e-form--white input[type=button],
.e-form--white input[type=submit] {
transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), color 400ms cubic-bezier(0.77, 0, 0.175, 1);
display: inline-block;
font-size: 16px;
font-weight: 400;
line-height: 16px;
padding: 15px 30px;
border-radius: 100px;
text-align: center;
cursor: pointer;
width: 100%;
/* Colours
================================================== */
/* Types
================================================== */
}
@media (min-width: 768px) {
.e-btn, .nf-form-cont .nf-form-content .nf-field-element input[type=button],
.nf-form-cont .nf-form-content .nf-field-element input[type=submit], .e-form--white input[type=button],
.e-form--white input[type=submit] {
width: auto;
}
}
.e-btn--white {
background-color: #fff;
}
@media (hover: hover) {
.e-btn--white:hover {
color: #fff;
background-color: #ec8005;
}
}
.e-btn--white.e-btn--outline {
background-color: transparent;
border: 1px solid #fff;
color: #fff;
}
@media (hover: hover) {
.e-btn--white.e-btn--outline:hover {
background-color: #fff;
color: #25305d;
}
}
.e-btn--primary, .nf-form-cont .nf-form-content .nf-field-element input[type=button],
.nf-form-cont .nf-form-content .nf-field-element input[type=submit] {
background-color: #25305d;
color: #fff;
}
@media (hover: hover) {
.e-btn--primary:hover, .nf-form-cont .nf-form-content .nf-field-element input[type=button]:hover,
.nf-form-cont .nf-form-content .nf-field-element input[type=submit]:hover {
background-color: #00aad0;
}
}
.e-btn--primary.e-btn--outline, .nf-form-cont .nf-form-content .nf-field-element input.e-btn--outline[type=button],
.nf-form-cont .nf-form-content .nf-field-element input.e-btn--outline[type=submit] {
background-color: transparent;
border: 1px solid #25305d;
color: #25305d;
}
@media (hover: hover) {
.e-btn--primary.e-btn--outline:hover, .nf-form-cont .nf-form-content .nf-field-element input.e-btn--outline[type=button]:hover,
.nf-form-cont .nf-form-content .nf-field-element input.e-btn--outline[type=submit]:hover {
background-color: #25305d;
color: #fff;
}
}
.e-btn--secondary {
background-color: #00aad0;
color: #fff;
}
@media (hover: hover) {
.e-btn--secondary:hover {
background-color: #ec8005;
}
}
.e-btn--tertiary {
background-color: #ec8005;
color: #fff;
}
@media (hover: hover) {
.e-btn--tertiary:hover {
background-color: #00aad0;
}
}
.e-btn--buy {
background-color: #25AF60;
color: #fff;
}
@media (hover: hover) {
.e-btn--buy:hover {
background-color: #33d478;
}
}
.e-btn--full {
width: 100%;
min-width: 100%;
}
.e-btn--small {
padding: 10px;
font-size: 14px;
min-width: 150px;
}
.e-btn--no-min {
min-width: auto;
}
.e-btn--button, .e-form--white input[type=button],
.e-form--white input[type=submit] {
border: 0;
outline: 0;
}
/* ============================================================
* Element - Headings
============================================================ */
/**
* The styling for headings across the site you can edit
* the sizing in the typography config under settings.
*
*/
.e-heading {
margin: 0;
padding: 0;
color: #25305d;
font-family: "Poppins", sans-serif;
font-weight: 600;
}
/* Heading Sizes
============================================================ */
h1, .e-heading--one {
font-size: 36px;
letter-spacing: 0;
line-height: 46px;
}
@media (min-width: 1024px) {
h1, .e-heading--one {
font-size: 42px;
letter-spacing: 0;
line-height: 52px;
}
}
@media (min-width: 1280px) {
h1, .e-heading--one {
font-size: 74px;
letter-spacing: 0;
line-height: 84px;
}
}
h2, .e-heading--two {
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
@media (min-width: 1024px) {
h2, .e-heading--two {
font-size: 36px;
letter-spacing: 0;
line-height: 46px;
}
}
@media (min-width: 1280px) {
h2, .e-heading--two {
font-size: 42px;
letter-spacing: 0;
line-height: 52px;
}
}
h3, .e-heading--three {
font-size: 20px;
letter-spacing: 0;
line-height: 30px;
}
@media (min-width: 1024px) {
h3, .e-heading--three {
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
}
@media (min-width: 1280px) {
h3, .e-heading--three {
font-size: 36px;
letter-spacing: 0;
line-height: 46px;
}
}
h4, .e-heading--four {
font-size: 20px;
letter-spacing: 0;
line-height: 30px;
}
@media (min-width: 1024px) {
h4, .e-heading--four {
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
}
h5, .e-heading--five {
font-size: 20px;
letter-spacing: 0;
line-height: 30px;
}
h6, .e-heading--six {
font-size: 16px;
letter-spacing: 0;
line-height: 26px;
}
/* Responsive Headings
============================================================ */
@media (min-width: 375px) {
.e-heading--one\@iphone-small {
font-size: 74px;
letter-spacing: 0;
line-height: 84px;
}
.e-heading--two\@iphone-small {
font-size: 42px;
letter-spacing: 0;
line-height: 52px;
}
.e-heading--three\@iphone-small {
font-size: 36px;
letter-spacing: 0;
line-height: 46px;
}
.e-heading--four\@iphone-small {
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
.e-heading--five\@iphone-small {
font-size: 20px;
letter-spacing: 0;
line-height: 30px;
}
.e-heading--six\@iphone-small {
font-size: 16px;
letter-spacing: 0;
line-height: 26px;
}
}
@media (min-width: 640px) {
.e-heading--one\@iphone-max {
font-size: 74px;
letter-spacing: 0;
line-height: 84px;
}
.e-heading--two\@iphone-max {
font-size: 42px;
letter-spacing: 0;
line-height: 52px;
}
.e-heading--three\@iphone-max {
font-size: 36px;
letter-spacing: 0;
line-height: 46px;
}
.e-heading--four\@iphone-max {
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
.e-heading--five\@iphone-max {
font-size: 20px;
letter-spacing: 0;
line-height: 30px;
}
.e-heading--six\@iphone-max {
font-size: 16px;
letter-spacing: 0;
line-height: 26px;
}
}
@media (min-width: 768px) {
.e-heading--one\@ipad {
font-size: 74px;
letter-spacing: 0;
line-height: 84px;
}
.e-heading--two\@ipad {
font-size: 42px;
letter-spacing: 0;
line-height: 52px;
}
.e-heading--three\@ipad {
font-size: 36px;
letter-spacing: 0;
line-height: 46px;
}
.e-heading--four\@ipad {
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
.e-heading--five\@ipad {
font-size: 20px;
letter-spacing: 0;
line-height: 30px;
}
.e-heading--six\@ipad {
font-size: 16px;
letter-spacing: 0;
line-height: 26px;
}
}
@media (min-width: 769px) {
.e-heading--one\@checkout {
font-size: 74px;
letter-spacing: 0;
line-height: 84px;
}
.e-heading--two\@checkout {
font-size: 42px;
letter-spacing: 0;
line-height: 52px;
}
.e-heading--three\@checkout {
font-size: 36px;
letter-spacing: 0;
line-height: 46px;
}
.e-heading--four\@checkout {
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
.e-heading--five\@checkout {
font-size: 20px;
letter-spacing: 0;
line-height: 30px;
}
.e-heading--six\@checkout {
font-size: 16px;
letter-spacing: 0;
line-height: 26px;
}
}
@media (min-width: 1024px) {
.e-heading--one\@ipad-pro {
font-size: 74px;
letter-spacing: 0;
line-height: 84px;
}
.e-heading--two\@ipad-pro {
font-size: 42px;
letter-spacing: 0;
line-height: 52px;
}
.e-heading--three\@ipad-pro {
font-size: 36px;
letter-spacing: 0;
line-height: 46px;
}
.e-heading--four\@ipad-pro {
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
.e-heading--five\@ipad-pro {
font-size: 20px;
letter-spacing: 0;
line-height: 30px;
}
.e-heading--six\@ipad-pro {
font-size: 16px;
letter-spacing: 0;
line-height: 26px;
}
}
@media (min-width: 1280px) {
.e-heading--one\@laptop {
font-size: 74px;
letter-spacing: 0;
line-height: 84px;
}
.e-heading--two\@laptop {
font-size: 42px;
letter-spacing: 0;
line-height: 52px;
}
.e-heading--three\@laptop {
font-size: 36px;
letter-spacing: 0;
line-height: 46px;
}
.e-heading--four\@laptop {
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
.e-heading--five\@laptop {
font-size: 20px;
letter-spacing: 0;
line-height: 30px;
}
.e-heading--six\@laptop {
font-size: 16px;
letter-spacing: 0;
line-height: 26px;
}
}
@media (min-width: 1440px) {
.e-heading--one\@macbook {
font-size: 74px;
letter-spacing: 0;
line-height: 84px;
}
.e-heading--two\@macbook {
font-size: 42px;
letter-spacing: 0;
line-height: 52px;
}
.e-heading--three\@macbook {
font-size: 36px;
letter-spacing: 0;
line-height: 46px;
}
.e-heading--four\@macbook {
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
.e-heading--five\@macbook {
font-size: 20px;
letter-spacing: 0;
line-height: 30px;
}
.e-heading--six\@macbook {
font-size: 16px;
letter-spacing: 0;
line-height: 26px;
}
}
@media (min-width: 1920px) {
.e-heading--one\@desktop {
font-size: 74px;
letter-spacing: 0;
line-height: 84px;
}
.e-heading--two\@desktop {
font-size: 42px;
letter-spacing: 0;
line-height: 52px;
}
.e-heading--three\@desktop {
font-size: 36px;
letter-spacing: 0;
line-height: 46px;
}
.e-heading--four\@desktop {
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
.e-heading--five\@desktop {
font-size: 20px;
letter-spacing: 0;
line-height: 30px;
}
.e-heading--six\@desktop {
font-size: 16px;
letter-spacing: 0;
line-height: 26px;
}
}
/* Heading Colour
============================================================ */
.e-heading--white {
color: #fff;
}
.e-heading--black {
color: #25305d;
}
.e-heading--primary {
color: #25305d;
}
.e-heading--secondary {
color: #00aad0;
}
.e-heading--tertiary {
color: #ec8005;
}
.e-heading--quaternary {
color: #a0144d;
}
/* Heading Weights
============================================================ */
.e-heading--light {
font-weight: 300;
}
.e-heading--regular {
font-weight: 400;
}
.e-heading--medium {
font-weight: 500;
}
.e-heading--semi {
font-weight: 600;
}
.e-heading--bold {
font-weight: 600;
}
/* ============================================================
* Elements - Media
============================================================ */
/**
* Media styling for images and videos
*
*/
.e-media {
width: 100%;
height: auto;
display: flex;
}
/* Media Variations
============================================================ */
.e-media--cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100% !important;
object-fit: cover;
pointer-events: none;
}
.e-media--radius {
border-radius: 3px;
overflow: hidden;
}
.e-media--contain {
object-fit: contain;
}
.e-media--video {
position: relative;
}
.e-media--video::before {
content: "";
padding-top: 56.25%;
display: block;
width: 100%;
}
.e-media--video iframe, .e-media--video video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
transition: opacity 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.e-media--video iframe.isActive, .e-media--video video.isActive {
pointer-events: auto;
opacity: 1;
}
.e-media--circle {
border-radius: 1000px;
overflow: hidden;
}
/* Media Sizes
============================================================ */
.e-media--1-1 {
position: relative;
}
.e-media--1-1::before {
content: "";
padding-top: 100%;
display: block;
width: 100%;
}
.e-media--3-2 {
position: relative;
}
.e-media--3-2::before {
content: "";
padding-top: 66.6666666667%;
display: block;
width: 100%;
}
.e-media--4-3 {
position: relative;
}
.e-media--4-3::before {
content: "";
padding-top: 75%;
display: block;
width: 100%;
}
.e-media--16-9 {
position: relative;
}
.e-media--16-9::before {
content: "";
padding-top: 56.25%;
display: block;
width: 100%;
}
.e-media--266-100 {
position: relative;
}
.e-media--266-100::before {
content: "";
padding-top: 37.5939849624%;
display: block;
width: 100%;
}
.e-slider-arrows {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 100%;
z-index: 99;
}
.e-slider-arrow {
transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out !important;
width: 40px;
height: 40px;
border-radius: 100px;
border: 0;
position: relative;
}
.e-slider-arrow > ion-icon {
transition: color 400ms cubic-bezier(0.77, 0, 0.175, 1);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.e-slider-arrow--primary {
background-color: #25305d;
color: #fff;
}
.e-slider-arrow--primary > ion-icon {
color: #fff;
}
.e-slider-arrow--primary:hover {
background-color: #ec8005;
color: #fff;
}
.e-slider-arrow--primary:hover > ion-icon {
color: #fff;
}
.e-slider-arrow--white {
background-color: #fff;
color: #25305d;
}
.e-slider-arrow--white > ion-icon {
color: #25305d;
}
.e-slider-arrow--white:hover {
background-color: #ec8005;
color: #fff;
}
.e-slider-arrow--white:hover > ion-icon {
color: #fff;
}
.e-slider-arrow:hover {
background-color: #00aad0;
}
/* ============================================================
* Elements - Form / Ninja Styles
============================================================ */
/**
* Ninja form styles
*
*/
.e-form--white label {
color: #fff !important;
}
.e-form--white input[type=button],
.e-form--white input[type=submit] {
background-color: #00aad0 !important;
outline: 0;
border: 0;
height: 50px;
}
.e-form--white input[type=button]:hover,
.e-form--white input[type=submit]:hover {
background-color: #00809d !important;
}
.nf-form-cont {
width: 100%;
}
.nf-form-cont .ninja-forms-req-symbol {
color: #F20C49;
}
.nf-form-cont .nf-form-fields-required {
display: none;
}
.nf-form-cont .ninja-forms-req-symbol {
display: none;
}
.nf-form-cont .nf-field {
margin-top: 0;
}
@media (min-width: 768px) {
.nf-form-cont nf-cells {
display: flex;
align-items: center;
margin-left: -40px;
}
}
.nf-form-cont nf-cells .nf-cell {
padding: 0;
}
@media (min-width: 768px) {
.nf-form-cont nf-cells .nf-cell {
padding-left: 40px;
}
}
.nf-form-cont .nf-field-container.submit-container {
margin-bottom: 0;
margin-top: 10px;
}
.nf-form-cont .nf-field-container.submit-container .nf-field-element {
position: relative;
}
.nf-form-cont .nf-field-container {
margin-bottom: 18px;
}
.nf-form-cont .nf-form-content {
margin: 0;
padding: 0;
}
.nf-form-cont .nf-form-content .checkbox-wrap label::before {
content: "";
width: 10px;
height: 10px;
left: -24px;
top: 4px;
background-color: #25305d;
transition: opacity 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.nf-form-cont .nf-form-content .checkbox-wrap .nf-checked-label:after {
background-color: #25305d;
}
.nf-form-cont .nf-form-content .checkbox-wrap label::after {
border: 0;
background-color: rgba(37, 48, 93, 0.2);
transition: background 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.nf-form-cont .nf-form-content .nf-field-label {
margin-bottom: 0;
}
.nf-form-cont .nf-form-content .nf-field-label label {
font-weight: 600;
font-size: 16px;
color: #25305d;
text-transform: uppercase;
}
.nf-form-cont .nf-form-content .nf-field-element {
margin-top: 0;
position: relative;
}
.nf-form-cont .nf-form-content .nf-field-element::after {
font-family: "Material Icons";
font-feature-settings: "liga";
opacity: 0;
position: absolute;
right: 20px;
top: 10px;
font-size: 20px;
transition: opacity 400ms cubic-bezier(0.77, 0, 0.175, 1), colour 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.nf-form-cont .nf-form-content .nf-field-element input[type=text],
.nf-form-cont .nf-form-content .nf-field-element input[type=tel],
.nf-form-cont .nf-form-content .nf-field-element input[type=email],
.nf-form-cont .nf-form-content .nf-field-element textarea {
width: 100%;
background-color: #fff;
}
.nf-form-cont .nf-form-content .nf-field-element select {
width: 100%;
}
.nf-form-cont .nf-form-content .nf-field-element textarea {
height: 150px;
resize: none;
}
.nf-form-cont .nf-form-content .nf-field-element input[type=button],
.nf-form-cont .nf-form-content .nf-field-element input[type=submit] {
outline: 0;
border: 0;
height: 50px;
}
.nf-form-cont .nf-form-content .nf-field-element.nf-pass input[type=text],
.nf-form-cont .nf-form-content .nf-field-element.nf-pass input[type=tel],
.nf-form-cont .nf-form-content .nf-field-element.nf-pass input[type=email],
.nf-form-cont .nf-form-content .nf-field-element.nf-pass textarea {
border-color: #25AF60;
}
.nf-form-cont .nf-form-content .label-hidden .nf-field-label {
display: none;
}
.nf-form-cont .nf-form-content .field-wrap.nf-pass .nf-field-element::after {
content: "task_alt";
color: #25AF60;
opacity: 1;
}
.nf-form-cont .nf-form-content .field-wrap.nf-pass input[type=text],
.nf-form-cont .nf-form-content .field-wrap.nf-pass input[type=tel],
.nf-form-cont .nf-form-content .field-wrap.nf-pass input[type=email],
.nf-form-cont .nf-form-content .field-wrap.nf-pass textarea {
border-color: #25AF60;
}
.nf-form-cont .nf-form-content .field-wrap.nf-error .nf-field-element::after {
content: "highlight_off";
color: #F20C49;
opacity: 1;
}
.nf-form-cont .nf-form-content .field-wrap.nf-error input[type=text],
.nf-form-cont .nf-form-content .field-wrap.nf-error input[type=tel],
.nf-form-cont .nf-form-content .field-wrap.nf-error input[type=email],
.nf-form-cont .nf-form-content .field-wrap.nf-error textarea {
border-color: #F20C49;
}
.nf-form-cont .nf-form-content .field-wrap .nf-error-msg {
display: none;
}
.nf-form-cont .nf-form-content .nf-error .nf-error-msg {
display: none;
}
.nf-response-msg p {
background-color: #fff;
color: #25305d;
display: inline-block;
padding: 10px 20px;
margin: 20px 0;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
border-radius: 0;
}
.nf-form-hp {
position: absolute;
visibility: hidden;
}
#nf-form-errors-1 {
margin-top: 0;
}
#nf-form-errors-1 .nf-error-msg {
margin-top: 20px;
background-color: #F20C49;
color: #fff;
display: inline-block;
padding: 5px 10px;
border-radius: 0;
font-size: 14px;
font-weight: 400;
}
.e-social__item {
transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1);
width: 48px;
height: 48px;
border-radius: 100px;
}
.e-social__item--white {
background-color: #fff;
}
.e-social__item--white svg {
fill: #25305d;
}
.e-social__item--white:hover {
background-color: #25305d;
}
.e-social__item--white:hover svg {
fill: #fff;
}
.e-social__item--primary {
border: 1px solid #25305d;
}
.e-social__item--primary svg {
fill: #25305d;
}
.e-social__item--primary:hover {
background-color: #25305d;
}
.e-social__item--primary:hover svg {
fill: #fff;
}
.e-social__item svg {
transition: fill 400ms cubic-bezier(0.77, 0, 0.175, 1);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
}
.e-pagination__item {
transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1);
position: relative;
display: flex;
width: 50px;
height: 50px;
background-color: #ec8005;
color: #fff;
}
.e-pagination__item span, .e-pagination__item ion-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.e-pagination__item a, .e-pagination__item span {
transition: color 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.e-pagination__item.e-pagination--current {
background-color: #25305d;
}
.e-pagination__item.e-pagination--current a, .e-pagination__item.e-pagination--current span {
color: #fff !important;
}
.e-pagination__item:hover {
background-color: #00aad0;
}
.e-pagination__item:hover a, .e-pagination__item:hover span, .e-pagination__item:hover ion-icon {
color: #fff !important;
}
.e-pagination--wordpress {
display: flex;
align-items: center;
}
.e-pagination--wordpress .page-numbers {
margin-left: 10px;
}
.e-pagination--wordpress .page-numbers:first-child {
margin-left: 0;
}
.e-pagination .page-numbers {
transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), color 400ms cubic-bezier(0.77, 0, 0.175, 1);
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #ec8005;
color: #fff;
}
.e-pagination .page-numbers.current {
background-color: #25305d;
}
.e-pagination .page-numbers:hover {
background-color: #00aad0;
}
/* ============================================================
* Elements - Select
============================================================ */
/**
* A simple select to replace the browser default select
*
*/
.e-select, .nf-form-cont .nf-form-content .nf-field-element select {
transition: border-color 400ms cubic-bezier(0.77, 0, 0.175, 1);
font-family: "Poppins", sans-serif;
border-radius: 3px;
border: 1px solid #25305d;
background-color: #fff;
color: #25305d;
padding: 11px 20px;
font-size: 16px;
line-height: 26px;
outline: 0;
-webkit-appearance: none;
appearance: none;
font-style: normal;
width: 100%;
cursor: pointer;
max-width: 100%;
font-weight: 400;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Cdefs/%3E%3Cpath fill='%23575756' fill-rule='evenodd' d='M2.1.3l4.6 4.6L11.3.3l1.4 1.4-6 6-6-6L2.1.3z'/%3E%3C/svg%3E");
background-position: right 20px top 50%, 0 0;
background-repeat: no-repeat;
background-size: 10px auto;
box-shadow: 0 2.5px 5px rgba(37, 48, 93, 0.05);
}
.e-select::-ms-expand, .nf-form-cont .nf-form-content .nf-field-element select::-ms-expand {
display: none;
}
.e-select:focus, .nf-form-cont .nf-form-content .nf-field-element select:focus {
outline: 0;
border-color: #25305d;
}
/* Select Colours
============================================================ */
.e-select--white {
background-color: #fff;
border: 1px solid #25305d;
}
.e-select--grey {
background-color: #f2f0f0;
border: 1px solid #f2f0f0;
}
/* Select Others
============================================================ */
.e-select--fake {
opacity: 0.4;
pointer-events: none;
}
.e-select--disabled {
opacity: 0.6;
pointer-events: none;
}
/* Breadcrumbs
================================================== */
.e-breadcrumb--white .rank-math-breadcrumb .separator {
color: #fff;
}
.e-breadcrumb--white .rank-math-breadcrumb .last {
color: #fff;
font-weight: 600;
}
/* Checkboxes
================================================== */
.e-checkbox {
display: block;
width: 35px;
min-width: 35px;
height: 22px;
cursor: pointer;
position: relative;
white-space: nowrap;
}
.e-checkbox input[type=checkbox] {
display: none;
}
.e-checkbox input[type=checkbox]:checked + .e-checkbox__slider {
background-color: #25305d;
}
.e-checkbox input[type=checkbox]:checked + .e-checkbox__slider .e-checkbox__knob {
left: calc(100% - 18px);
border: 1px solid #25305d;
}
.e-checkbox__knob {
transition: left 400ms cubic-bezier(0.77, 0, 0.175, 1), border 400ms cubic-bezier(0.77, 0, 0.175, 1);
position: absolute;
border: 1px solid #e0e0e0;
width: 14px;
height: 14px;
border-radius: 50%;
left: 4px;
top: 3px;
background-color: #fff;
}
/* Radio
================================================== */
.e-radio {
display: block;
width: 35px;
min-width: 35px;
height: 22px;
cursor: pointer;
position: relative;
white-space: nowrap;
}
.e-radio input[type=radio] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 99;
}
.e-radio input[type=radio]:checked + .e-radio__slider {
background-color: #25305d;
}
.e-radio input[type=radio]:checked + .e-radio__slider .e-radio__knob {
left: calc(100% - 18px);
border: 1px solid #25305d;
}
.e-radio__knob {
transition: left 400ms cubic-bezier(0.77, 0, 0.175, 1), border 400ms cubic-bezier(0.77, 0, 0.175, 1);
position: absolute;
border: 1px solid #e0e0e0;
width: 14px;
height: 14px;
border-radius: 50%;
left: 4px;
top: 3px;
background-color: #fff;
}
.e-checkbox__slider,
.e-radio__slider {
transition: left 400ms cubic-bezier(0.77, 0, 0.175, 1), background-color 400ms cubic-bezier(0.77, 0, 0.175, 1);
background-color: #EDEDED;
position: absolute;
border-radius: 100px;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #e0e0e0;
}
/* Image Zoom
============================================================ */
.e-zoom picture {
transition: transform 400ms cubic-bezier(0.77, 0, 0.175, 1), opacity 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.e-zoom:hover picture {
transform: scale(1.05);
}
.e-zoom--less:hover picture {
transform: scale(1.015);
}
.e-animate {
opacity: 0;
}
/* Components
========================================================================== */
/* ============================================================
* Header
============================================================ */
.c-header__logo {
width: 140px;
}
@media (min-width: 768px) {
.c-header__logo {
width: 170px;
}
}
.c-header__menu {
border: 1px solid #25305d;
border-radius: 100px;
width: 48px;
height: 48px;
cursor: pointer;
}
.c-header__menu ion-icon {
color: #25305d;
font-size: 22px;
}
.c-header__menu ion-icon:nth-child(2) {
display: none;
}
.c-header__menu.active ion-icon:nth-child(1) {
display: none;
}
.c-header__menu.active ion-icon:nth-child(2) {
display: block;
}
.c-header__search {
transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1);
border: 1px solid #25305d;
border-radius: 100px;
width: 48px;
height: 48px;
min-width: 48px;
font-size: 24px;
}
.c-header__search ion-icon {
transition: color 400ms cubic-bezier(0.77, 0, 0.175, 1);
color: #25305d;
}
.c-header__search:hover {
background-color: #25305d;
}
.c-header__search:hover ion-icon {
color: #fff;
}
.c-header__search-wrapper {
transition: max-height 400ms cubic-bezier(0.77, 0, 0.175, 1);
max-height: 0;
overflow: hidden;
}
.c-header__search-wrapper.active {
max-height: 1000px;
}
.c-footer__logo {
width: 140px;
}
@media (min-width: 768px) {
.c-footer__logo {
width: 170px;
}
}
.c-footer__accreditations-container {
border-radius: 3px;
border: 1px solid #f2f0f0;
padding: 20px;
}
/** ========================================
* Menu Style
** ===================================== **/
.c-menu--white ion-icon {
color: #fff;
}
.c-menu__icon {
width: 16px;
height: 16px;
}
.c-menu__item:hover .c-menu__children {
opacity: 1;
pointer-events: all;
}
.c-menu__item:hover ion-icon:not(.c-menu__trigger) {
transform: rotate(180deg);
}
.c-menu__children {
transition: opacity 400ms cubic-bezier(0.77, 0, 0.175, 1);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
z-index: 199;
pointer-events: none;
opacity: 0;
}
.c-menu ion-icon {
transition: transform 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.c-menu--mobile {
transition: opacity 400ms cubic-bezier(0.77, 0, 0.175, 1), right 400ms cubic-bezier(0.77, 0, 0.175, 1), max-height 400ms cubic-bezier(0.77, 0, 0.175, 1);
background-color: #fff;
width: 100%;
z-index: 999;
max-height: 0;
overflow: hidden;
}
.c-menu--mobile.active {
opacity: 1;
pointer-events: all;
max-height: 500vh;
}
.c-menu--mobile .c-menu__trigger {
transition: transform 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.c-menu--mobile .c-menu__trigger.active {
transform: rotate(180deg);
}
.c-menu--mobile .c-menu__trigger.active + ul {
max-height: 500vh;
}
.c-menu--mobile .c-menu__item {
background-color: #fff;
border-top: 1px solid #f2f0f0;
}
.c-menu--mobile .c-menu__item:first-of-type {
border-top: none !important;
}
.c-menu--mobile .c-menu__wrapper {
transition: max-height 400ms cubic-bezier(0.77, 0, 0.175, 1);
max-height: 0;
overflow: hidden;
}
.c-menu--mobile .c-menu__child {
background-color: #25305d;
border-top: 1px solid #161d39;
}
.c-menu--mobile .c-menu__child:first-of-type {
border-top: none !important;
}
.c-menu--mobile .c-menu__grand-child {
background-color: #00aad0;
border-top: 1px solid #00809d;
}
.c-menu--mobile .c-menu__grand-child:first-of-type {
border-top: none !important;
}
/* ============================================================
* Components - Editable
============================================================ */
/**
* The styling for any editable content on a CMS site, the idea
* being to wrap any wysiwyg content sections with the
* "c-editable" class then we can predefine styles this way
* we do not rely on a default for the whole site.
*
*/
.c-editable h1, .c-editable h2, .c-editable h3, .c-editable h4, .c-editable h5, .c-editable h6 {
margin-bottom: 20px;
color: #25305d;
font-family: "Poppins", sans-serif;
font-weight: 600;
}
.c-editable h1:last-child, .c-editable h2:last-child, .c-editable h3:last-child, .c-editable h4:last-child, .c-editable h5:last-child, .c-editable h6:last-child {
margin-bottom: 0;
}
.c-editable h1 {
margin-top: 20px;
margin-bottom: 40px;
font-size: 36px;
letter-spacing: 0;
line-height: 46px;
}
@media (min-width: 768px) {
.c-editable h1 {
margin-top: 40px;
margin-bottom: 40px;
font-size: 42px;
letter-spacing: 0;
line-height: 52px;
}
}
@media (min-width: 1024px) {
.c-editable h1 {
font-size: 74px;
letter-spacing: 0;
line-height: 84px;
}
}
.c-editable h1:first-child {
margin-top: 0;
}
.c-editable h2 + p {
margin-top: 0;
}
.c-editable h2 {
margin-top: 30px;
margin-bottom: 40px;
font-size: 36px;
letter-spacing: 0;
line-height: 46px;
}
@media (min-width: 1024px) {
.c-editable h2 {
font-size: 42px;
letter-spacing: 0;
line-height: 52px;
}
}
.c-editable h2:first-child {
margin-top: 0;
}
.c-editable h2:last-child {
margin-bottom: 0;
}
.c-editable h2 + h4 {
margin-top: 0;
}
.c-editable h3 {
margin-top: 20px;
margin-bottom: 40px;
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
@media (min-width: 1024px) {
.c-editable h3 {
font-size: 36px;
letter-spacing: 0;
line-height: 46px;
}
}
.c-editable h3:first-child {
margin-top: 0;
}
.c-editable h3:last-child {
margin-bottom: 0;
}
.c-editable h3 + p {
margin-top: 0;
}
.c-editable h4 {
margin-top: 20px;
margin-bottom: 20px;
font-size: 20px;
letter-spacing: 0;
line-height: 30px;
}
@media (min-width: 1024px) {
.c-editable h4 {
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
}
.c-editable h4:first-child {
margin-top: 0;
}
.c-editable h4:last-child {
margin-bottom: 0;
}
.c-editable h4 + p {
margin-top: 0;
}
.c-editable h5 {
margin-top: 10px;
margin-bottom: 10px;
font-size: 20px;
letter-spacing: 0;
line-height: 30px;
}
.c-editable h5:first-child {
margin-top: 0;
}
.c-editable h5:last-child {
margin-bottom: 0;
}
.c-editable h6 {
font-size: 16px;
letter-spacing: 0;
line-height: 26px;
}
.c-editable h6:first-child {
margin-top: 0;
}
.c-editable h6:last-child {
margin-bottom: 0;
}
.c-editable p {
display: block;
margin: 20px 0;
color: #25305d;
}
.c-editable p:last-child {
margin-bottom: 0;
}
.c-editable p:first-child {
margin-top: 0;
}
.c-editable a {
font-weight: 400;
color: #25305d;
text-decoration: underline;
transition: color 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.c-editable ul li,
.c-editable ol li {
list-style-position: outside;
color: #25305d;
line-height: 26px;
}
.c-editable ol {
counter-reset: my-awesome-counter;
list-style: none;
padding-left: 40px;
border-top: 1px solid #f2f0f0;
border-bottom: 1px solid #f2f0f0;
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.c-editable ol li {
margin-left: 25px;
counter-increment: my-awesome-counter;
position: relative;
margin-bottom: 10px;
}
.c-editable ol li::before {
content: counter(my-awesome-counter);
left: -25px;
position: absolute;
font-weight: 600;
color: #25305d;
}
.c-editable ul, .c-editable ol {
padding: 0;
}
.c-editable ul:last-child, .c-editable ol:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
.c-editable blockquote {
display: inline-block;
margin: 20px 0;
}
.c-editable blockquote:first-child {
margin-top: 0;
}
.c-editable blockquote p {
margin: 0;
display: inline-block;
margin-top: 10px;
font-size: 28px;
letter-spacing: 0;
line-height: 38px;
}
.c-editable hr {
margin: 30px 0;
border-color: #25305d;
}
.c-editable img,
.c-editable .wp-caption {
height: auto;
display: inline-block;
padding: 40px 0;
}
.c-editable img:first,
.c-editable .wp-caption:first {
padding-top: 0;
}
.c-editable img + img {
padding-bottom: 0;
}
.c-editable strong {
font-weight: 600;
}
.c-editable table {
border-collapse: collapse;
width: 100%;
margin-top: 40px;
margin-bottom: 40px;
border-radius: 3px;
overflow: hidden;
width: 943px;
}
.c-editable table:first-child {
margin-top: 0;
}
.c-editable table:last-child {
margin-bottom: 0;
}
@media (min-width: 1024px) {
.c-editable table {
width: auto;
}
}
.c-editable tbody tr {
background-color: #f2f0f0;
color: #25305d;
}
.c-editable tbody tr strong {
color: #25305d;
}
.c-editable tbody tr:first-of-type {
background-color: #25305d;
color: #fff;
font-weight: 600;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.c-editable tbody tr:first-of-type strong {
color: #fff;
}
.c-editable tbody tr:last-of-type {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.c-editable tbody tr:nth-child(even) {
background-color: #f2f0f0;
}
.c-editable table, .c-editable th, .c-editable td {
border: 1px solid #fff;
}
.c-editable th, .c-editable td {
padding: 10px;
}
/* White editable option
============================================================ */
.c-editable--white h1, .c-editable--white h2, .c-editable--white h3, .c-editable--white h4, .c-editable--white h5, .c-editable--white h6, .c-editable--white p, .c-editable--white ul li, .c-editable--white ol li, .c-editable--white strong, .c-editable--white a {
color: #fff;
}
.c-editable--white ol li::before {
color: #fff;
}
.c-editable--black h1, .c-editable--black h2, .c-editable--black h3, .c-editable--black h4, .c-editable--black h5, .c-editable--black h6 {
color: #25305d;
}
.c-editable--regular h1, .c-editable--regular h2, .c-editable--regular h3, .c-editable--regular h4, .c-editable--regular h5, .c-editable--regular h6 {
font-weight: 400;
}
.c-post__thumbnail {
position: relative;
background: #ec8005;
overflow: hidden;
}
.c-post__thumbnail::before {
content: "";
padding-top: 75%;
display: block;
width: 100%;
}
.c-post__thumbnail .u-darken {
opacity: 0.1;
}
.c-post__thumbnail:hover .u-darken {
opacity: 0.3;
}
.c-card {
transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), box-shadow 400ms cubic-bezier(0.77, 0, 0.175, 1);
border-radius: 3px;
}
.c-card--white {
background: #fff;
}
.c-card--primary {
background: #25305d;
}
.c-card--secondary {
background: #00aad0;
}
.c-card--tertiary {
background: #ec8005;
}
.c-card--grey {
background: #f2f0f0;
}
.c-card--border {
border: 1px solid #EDEDED;
}
.c-card--radius {
border-radius: 3px;
}
/* ============================================================
* Components - Accordion
============================================================ */
/**
* A simple accordion that uses vanilla JS
* to show and hide content.
*
*/
.c-accordion .c-accordion__trigger {
cursor: pointer;
}
.c-accordion .c-accordion__trigger.is-active .c-accordion__icon {
transform: rotate(180deg);
}
.c-accordion .c-accordion__icon {
font-size: 26px;
transition: transform 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (min-width: 768px) {
.c-accordion .c-accordion__icon {
font-size: 30px;
}
}
.c-accordion .c-accordion__icon__container {
width: 30px;
height: 30px;
}
.c-accordion .c-accordion__content {
position: relative;
height: 0px;
overflow: hidden;
transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.c-accordion--team .c-accordion__trigger .c-accordion__icon:nth-of-type(2) {
display: none;
}
.c-accordion--team .c-accordion__trigger.is-active .c-accordion__icon {
transform: rotate(0deg);
}
.c-accordion--team .c-accordion__trigger.is-active .c-accordion__icon:nth-of-type(1) {
display: none;
}
.c-accordion--team .c-accordion__trigger.is-active .c-accordion__icon:nth-of-type(2) {
display: block;
}
.c-tabs__key, .c-tabs__accordion {
color: #25305d;
background-color: #f2f0f0;
cursor: pointer;
display: block;
transition: color 400ms cubic-bezier(0.77, 0, 0.175, 1), background-color 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (hover: hover) {
.c-tabs__key:hover, .c-tabs__accordion:hover {
color: #fff;
background-color: #25305d;
}
}
.c-tabs__key.is-active, .c-tabs__accordion.is-active {
color: #fff;
background-color: #00aad0;
cursor: default;
}
.c-tabs__accordion {
margin-top: 20px;
}
.c-tabs__accordion::before {
content: attr(data-title);
}
.c-tabs__content {
display: none;
overflow: hidden;
position: relative;
background-color: #f2f0f0;
box-sizing: border-box;
transition: opacity 400ms cubic-bezier(0.77, 0, 0.175, 1), top 400ms cubic-bezier(0.77, 0, 0.175, 1), height 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (min-width: 1024px) {
.c-tabs__content {
order: 10;
}
}
.c-tabs__content.is-active {
display: block;
}
.c-tabs__wrapper {
transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
.c-tabs__item:first-of-type .c-tabs__accordion {
margin-top: 0;
}
.c-tabs.is-animating .c-tabs__key {
cursor: not-allowed;
}
.c-content-with-media--left .o-layout {
flex-direction: column-reverse;
}
@media (min-width: 1280px) {
.c-content-with-media--left .o-layout {
flex-direction: row;
}
}
.c-content-with-media--right .o-layout {
flex-direction: column-reverse;
}
@media (min-width: 1280px) {
.c-content-with-media--right .o-layout {
flex-direction: row-reverse;
}
}
.c-content-with-media__image {
min-height: 300px;
border-radius: 3px;
overflow: hidden;
}
@media (min-width: 1024px) {
.c-content-with-media__image {
min-height: 500px;
}
}
.c-content-with-media__gallery.is-active .u-darken {
opacity: 0.4;
}
.c-content-with-media__gallery .u-darken {
opacity: 0;
}
.c-academies__map {
position: relative;
border-radius: 6px;
}
.c-academies__map::before {
content: "";
padding-top: 43.75%;
display: block;
width: 100%;
}
.c-academies__search {
height: 400px;
min-width: 400px;
border-radius: 6px;
background-color: #fff;
position: absolute;
left: 20px;
top: 20px;
}
.c-academies__all {
overflow: scroll;
max-height: 230px;
}
.c-quick-links {
position: relative;
border-radius: 100%;
}
.c-quick-links::before {
content: "";
padding-top: 100%;
display: block;
width: 100%;
}
.c-quick-links::before {
width: 0;
}
.c-quick-links--secondary {
background-color: #00aad0;
}
.c-quick-links--tertiary {
background-color: #ec8005;
}
.c-quick-links--quaternary {
background-color: #a0144d;
}
/* Utilities
========================================================================== */
/*! purgecss end ignore */
/* ============================================================
* Utilities - Widths
============================================================ */
/**
* Widths, generates classes for you to use through out
* the project. A width, push and pull are all created
* from this, they can all be used across any device size.
* An example would be:
* u-width-1/2
*
* Widths are also generated for responsive sizes
* An exmple would be:
* u-width-1/4@ipad
*/
.u-width-1\/1 {
width: calc(100%);
max-width: calc(100%);
}
.u-width-1\/2 {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/3 {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/4 {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/5 {
width: calc(20%);
max-width: calc(20%);
}
.u-width-1\/6 {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/7 {
width: calc(14.2857142857%);
max-width: calc(14.2857142857%);
}
.u-width-1\/8 {
width: calc(12.5%);
max-width: calc(12.5%);
}
.u-width-1\/9 {
width: calc(11.1111111111%);
max-width: calc(11.1111111111%);
}
.u-width-1\/10 {
width: calc(10%);
max-width: calc(10%);
}
.u-width-1\/11 {
width: calc(9.0909090909%);
max-width: calc(9.0909090909%);
}
.u-width-1\/12 {
width: calc(8.3333333333%);
max-width: calc(8.3333333333%);
}
.u-width-2\/2 {
width: calc(100%);
max-width: calc(100%);
}
.u-width-2\/3 {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-2\/4 {
width: calc(50%);
max-width: calc(50%);
}
.u-width-2\/5 {
width: calc(40%);
max-width: calc(40%);
}
.u-width-2\/6 {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-2\/7 {
width: calc(28.5714285714%);
max-width: calc(28.5714285714%);
}
.u-width-2\/8 {
width: calc(25%);
max-width: calc(25%);
}
.u-width-2\/9 {
width: calc(22.2222222222%);
max-width: calc(22.2222222222%);
}
.u-width-2\/10 {
width: calc(20%);
max-width: calc(20%);
}
.u-width-2\/11 {
width: calc(18.1818181818%);
max-width: calc(18.1818181818%);
}
.u-width-2\/12 {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-3\/3 {
width: calc(100%);
max-width: calc(100%);
}
.u-width-3\/4 {
width: calc(75%);
max-width: calc(75%);
}
.u-width-3\/5 {
width: calc(60%);
max-width: calc(60%);
}
.u-width-3\/6 {
width: calc(50%);
max-width: calc(50%);
}
.u-width-3\/7 {
width: calc(42.8571428571%);
max-width: calc(42.8571428571%);
}
.u-width-3\/8 {
width: calc(37.5%);
max-width: calc(37.5%);
}
.u-width-3\/9 {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-3\/10 {
width: calc(30%);
max-width: calc(30%);
}
.u-width-3\/11 {
width: calc(27.2727272727%);
max-width: calc(27.2727272727%);
}
.u-width-3\/12 {
width: calc(25%);
max-width: calc(25%);
}
.u-width-4\/4 {
width: calc(100%);
max-width: calc(100%);
}
.u-width-4\/5 {
width: calc(80%);
max-width: calc(80%);
}
.u-width-4\/6 {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-4\/7 {
width: calc(57.1428571429%);
max-width: calc(57.1428571429%);
}
.u-width-4\/8 {
width: calc(50%);
max-width: calc(50%);
}
.u-width-4\/9 {
width: calc(44.4444444444%);
max-width: calc(44.4444444444%);
}
.u-width-4\/10 {
width: calc(40%);
max-width: calc(40%);
}
.u-width-4\/11 {
width: calc(36.3636363636%);
max-width: calc(36.3636363636%);
}
.u-width-4\/12 {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-5\/5 {
width: calc(100%);
max-width: calc(100%);
}
.u-width-5\/6 {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-5\/7 {
width: calc(71.4285714286%);
max-width: calc(71.4285714286%);
}
.u-width-5\/8 {
width: calc(62.5%);
max-width: calc(62.5%);
}
.u-width-5\/9 {
width: calc(55.5555555556%);
max-width: calc(55.5555555556%);
}
.u-width-5\/10 {
width: calc(50%);
max-width: calc(50%);
}
.u-width-5\/11 {
width: calc(45.4545454545%);
max-width: calc(45.4545454545%);
}
.u-width-5\/12 {
width: calc(41.6666666667%);
max-width: calc(41.6666666667%);
}
.u-width-6\/6 {
width: calc(100%);
max-width: calc(100%);
}
.u-width-6\/7 {
width: calc(85.7142857143%);
max-width: calc(85.7142857143%);
}
.u-width-6\/8 {
width: calc(75%);
max-width: calc(75%);
}
.u-width-6\/9 {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-6\/10 {
width: calc(60%);
max-width: calc(60%);
}
.u-width-6\/11 {
width: calc(54.5454545455%);
max-width: calc(54.5454545455%);
}
.u-width-6\/12 {
width: calc(50%);
max-width: calc(50%);
}
.u-width-7\/7 {
width: calc(100%);
max-width: calc(100%);
}
.u-width-7\/8 {
width: calc(87.5%);
max-width: calc(87.5%);
}
.u-width-7\/9 {
width: calc(77.7777777778%);
max-width: calc(77.7777777778%);
}
.u-width-7\/10 {
width: calc(70%);
max-width: calc(70%);
}
.u-width-7\/11 {
width: calc(63.6363636364%);
max-width: calc(63.6363636364%);
}
.u-width-7\/12 {
width: calc(58.3333333333%);
max-width: calc(58.3333333333%);
}
.u-width-8\/8 {
width: calc(100%);
max-width: calc(100%);
}
.u-width-8\/9 {
width: calc(88.8888888889%);
max-width: calc(88.8888888889%);
}
.u-width-8\/10 {
width: calc(80%);
max-width: calc(80%);
}
.u-width-8\/11 {
width: calc(72.7272727273%);
max-width: calc(72.7272727273%);
}
.u-width-8\/12 {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-9\/9 {
width: calc(100%);
max-width: calc(100%);
}
.u-width-9\/10 {
width: calc(90%);
max-width: calc(90%);
}
.u-width-9\/11 {
width: calc(81.8181818182%);
max-width: calc(81.8181818182%);
}
.u-width-9\/12 {
width: calc(75%);
max-width: calc(75%);
}
.u-width-10\/10 {
width: calc(100%);
max-width: calc(100%);
}
.u-width-10\/11 {
width: calc(90.9090909091%);
max-width: calc(90.9090909091%);
}
.u-width-10\/12 {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-11\/11 {
width: calc(100%);
max-width: calc(100%);
}
.u-width-11\/12 {
width: calc(91.6666666667%);
max-width: calc(91.6666666667%);
}
.u-width-12\/12 {
width: calc(100%);
max-width: calc(100%);
}
.u-width-auto {
width: auto;
}
@media (min-width: 375px) {
.u-width-1\/2\@iphone-small {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/3\@iphone-small {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/4\@iphone-small {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/5\@iphone-small {
width: calc(20%);
max-width: calc(20%);
}
.u-width-1\/6\@iphone-small {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/7\@iphone-small {
width: calc(14.2857142857%);
max-width: calc(14.2857142857%);
}
.u-width-1\/8\@iphone-small {
width: calc(12.5%);
max-width: calc(12.5%);
}
.u-width-1\/9\@iphone-small {
width: calc(11.1111111111%);
max-width: calc(11.1111111111%);
}
.u-width-1\/10\@iphone-small {
width: calc(10%);
max-width: calc(10%);
}
.u-width-1\/11\@iphone-small {
width: calc(9.0909090909%);
max-width: calc(9.0909090909%);
}
.u-width-1\/12\@iphone-small {
width: calc(8.3333333333%);
max-width: calc(8.3333333333%);
}
.u-width-1\/1\@iphone-small {
width: calc(100%);
max-width: calc(100%);
}
.u-width-2\/3\@iphone-small {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-2\/4\@iphone-small {
width: calc(50%);
max-width: calc(50%);
}
.u-width-2\/5\@iphone-small {
width: calc(40%);
max-width: calc(40%);
}
.u-width-2\/6\@iphone-small {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-2\/7\@iphone-small {
width: calc(28.5714285714%);
max-width: calc(28.5714285714%);
}
.u-width-2\/8\@iphone-small {
width: calc(25%);
max-width: calc(25%);
}
.u-width-2\/9\@iphone-small {
width: calc(22.2222222222%);
max-width: calc(22.2222222222%);
}
.u-width-2\/10\@iphone-small {
width: calc(20%);
max-width: calc(20%);
}
.u-width-2\/11\@iphone-small {
width: calc(18.1818181818%);
max-width: calc(18.1818181818%);
}
.u-width-2\/12\@iphone-small {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/1\@iphone-small {
width: calc(100%);
max-width: calc(100%);
}
.u-width-3\/4\@iphone-small {
width: calc(75%);
max-width: calc(75%);
}
.u-width-3\/5\@iphone-small {
width: calc(60%);
max-width: calc(60%);
}
.u-width-3\/6\@iphone-small {
width: calc(50%);
max-width: calc(50%);
}
.u-width-3\/7\@iphone-small {
width: calc(42.8571428571%);
max-width: calc(42.8571428571%);
}
.u-width-3\/8\@iphone-small {
width: calc(37.5%);
max-width: calc(37.5%);
}
.u-width-3\/9\@iphone-small {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-3\/10\@iphone-small {
width: calc(30%);
max-width: calc(30%);
}
.u-width-3\/11\@iphone-small {
width: calc(27.2727272727%);
max-width: calc(27.2727272727%);
}
.u-width-3\/12\@iphone-small {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/1\@iphone-small {
width: calc(100%);
max-width: calc(100%);
}
.u-width-4\/5\@iphone-small {
width: calc(80%);
max-width: calc(80%);
}
.u-width-4\/6\@iphone-small {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-4\/7\@iphone-small {
width: calc(57.1428571429%);
max-width: calc(57.1428571429%);
}
.u-width-4\/8\@iphone-small {
width: calc(50%);
max-width: calc(50%);
}
.u-width-4\/9\@iphone-small {
width: calc(44.4444444444%);
max-width: calc(44.4444444444%);
}
.u-width-4\/10\@iphone-small {
width: calc(40%);
max-width: calc(40%);
}
.u-width-4\/11\@iphone-small {
width: calc(36.3636363636%);
max-width: calc(36.3636363636%);
}
.u-width-4\/12\@iphone-small {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/1\@iphone-small {
width: calc(100%);
max-width: calc(100%);
}
.u-width-5\/6\@iphone-small {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-5\/7\@iphone-small {
width: calc(71.4285714286%);
max-width: calc(71.4285714286%);
}
.u-width-5\/8\@iphone-small {
width: calc(62.5%);
max-width: calc(62.5%);
}
.u-width-5\/9\@iphone-small {
width: calc(55.5555555556%);
max-width: calc(55.5555555556%);
}
.u-width-5\/10\@iphone-small {
width: calc(50%);
max-width: calc(50%);
}
.u-width-5\/11\@iphone-small {
width: calc(45.4545454545%);
max-width: calc(45.4545454545%);
}
.u-width-5\/12\@iphone-small {
width: calc(41.6666666667%);
max-width: calc(41.6666666667%);
}
.u-width-1\/1\@iphone-small {
width: calc(100%);
max-width: calc(100%);
}
.u-width-6\/7\@iphone-small {
width: calc(85.7142857143%);
max-width: calc(85.7142857143%);
}
.u-width-6\/8\@iphone-small {
width: calc(75%);
max-width: calc(75%);
}
.u-width-6\/9\@iphone-small {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-6\/10\@iphone-small {
width: calc(60%);
max-width: calc(60%);
}
.u-width-6\/11\@iphone-small {
width: calc(54.5454545455%);
max-width: calc(54.5454545455%);
}
.u-width-6\/12\@iphone-small {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/1\@iphone-small {
width: calc(100%);
max-width: calc(100%);
}
.u-width-7\/8\@iphone-small {
width: calc(87.5%);
max-width: calc(87.5%);
}
.u-width-7\/9\@iphone-small {
width: calc(77.7777777778%);
max-width: calc(77.7777777778%);
}
.u-width-7\/10\@iphone-small {
width: calc(70%);
max-width: calc(70%);
}
.u-width-7\/11\@iphone-small {
width: calc(63.6363636364%);
max-width: calc(63.6363636364%);
}
.u-width-7\/12\@iphone-small {
width: calc(58.3333333333%);
max-width: calc(58.3333333333%);
}
.u-width-1\/1\@iphone-small {
width: calc(100%);
max-width: calc(100%);
}
.u-width-8\/9\@iphone-small {
width: calc(88.8888888889%);
max-width: calc(88.8888888889%);
}
.u-width-8\/10\@iphone-small {
width: calc(80%);
max-width: calc(80%);
}
.u-width-8\/11\@iphone-small {
width: calc(72.7272727273%);
max-width: calc(72.7272727273%);
}
.u-width-8\/12\@iphone-small {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-1\/1\@iphone-small {
width: calc(100%);
max-width: calc(100%);
}
.u-width-9\/10\@iphone-small {
width: calc(90%);
max-width: calc(90%);
}
.u-width-9\/11\@iphone-small {
width: calc(81.8181818182%);
max-width: calc(81.8181818182%);
}
.u-width-9\/12\@iphone-small {
width: calc(75%);
max-width: calc(75%);
}
.u-width-1\/1\@iphone-small {
width: calc(100%);
max-width: calc(100%);
}
.u-width-10\/11\@iphone-small {
width: calc(90.9090909091%);
max-width: calc(90.9090909091%);
}
.u-width-10\/12\@iphone-small {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-1\/1\@iphone-small {
width: calc(100%);
max-width: calc(100%);
}
.u-width-11\/12\@iphone-small {
width: calc(91.6666666667%);
max-width: calc(91.6666666667%);
}
.u-width-1\/1\@iphone-small {
width: calc(100%);
max-width: calc(100%);
}
.u-width-1\/1\@iphone-small {
width: calc(100%);
max-width: calc(100%);
}
.u-width-auto\@iphone-small {
width: auto;
}
}
@media (min-width: 640px) {
.u-width-1\/2\@iphone-max {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/3\@iphone-max {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/4\@iphone-max {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/5\@iphone-max {
width: calc(20%);
max-width: calc(20%);
}
.u-width-1\/6\@iphone-max {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/7\@iphone-max {
width: calc(14.2857142857%);
max-width: calc(14.2857142857%);
}
.u-width-1\/8\@iphone-max {
width: calc(12.5%);
max-width: calc(12.5%);
}
.u-width-1\/9\@iphone-max {
width: calc(11.1111111111%);
max-width: calc(11.1111111111%);
}
.u-width-1\/10\@iphone-max {
width: calc(10%);
max-width: calc(10%);
}
.u-width-1\/11\@iphone-max {
width: calc(9.0909090909%);
max-width: calc(9.0909090909%);
}
.u-width-1\/12\@iphone-max {
width: calc(8.3333333333%);
max-width: calc(8.3333333333%);
}
.u-width-1\/1\@iphone-max {
width: calc(100%);
max-width: calc(100%);
}
.u-width-2\/3\@iphone-max {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-2\/4\@iphone-max {
width: calc(50%);
max-width: calc(50%);
}
.u-width-2\/5\@iphone-max {
width: calc(40%);
max-width: calc(40%);
}
.u-width-2\/6\@iphone-max {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-2\/7\@iphone-max {
width: calc(28.5714285714%);
max-width: calc(28.5714285714%);
}
.u-width-2\/8\@iphone-max {
width: calc(25%);
max-width: calc(25%);
}
.u-width-2\/9\@iphone-max {
width: calc(22.2222222222%);
max-width: calc(22.2222222222%);
}
.u-width-2\/10\@iphone-max {
width: calc(20%);
max-width: calc(20%);
}
.u-width-2\/11\@iphone-max {
width: calc(18.1818181818%);
max-width: calc(18.1818181818%);
}
.u-width-2\/12\@iphone-max {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/1\@iphone-max {
width: calc(100%);
max-width: calc(100%);
}
.u-width-3\/4\@iphone-max {
width: calc(75%);
max-width: calc(75%);
}
.u-width-3\/5\@iphone-max {
width: calc(60%);
max-width: calc(60%);
}
.u-width-3\/6\@iphone-max {
width: calc(50%);
max-width: calc(50%);
}
.u-width-3\/7\@iphone-max {
width: calc(42.8571428571%);
max-width: calc(42.8571428571%);
}
.u-width-3\/8\@iphone-max {
width: calc(37.5%);
max-width: calc(37.5%);
}
.u-width-3\/9\@iphone-max {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-3\/10\@iphone-max {
width: calc(30%);
max-width: calc(30%);
}
.u-width-3\/11\@iphone-max {
width: calc(27.2727272727%);
max-width: calc(27.2727272727%);
}
.u-width-3\/12\@iphone-max {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/1\@iphone-max {
width: calc(100%);
max-width: calc(100%);
}
.u-width-4\/5\@iphone-max {
width: calc(80%);
max-width: calc(80%);
}
.u-width-4\/6\@iphone-max {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-4\/7\@iphone-max {
width: calc(57.1428571429%);
max-width: calc(57.1428571429%);
}
.u-width-4\/8\@iphone-max {
width: calc(50%);
max-width: calc(50%);
}
.u-width-4\/9\@iphone-max {
width: calc(44.4444444444%);
max-width: calc(44.4444444444%);
}
.u-width-4\/10\@iphone-max {
width: calc(40%);
max-width: calc(40%);
}
.u-width-4\/11\@iphone-max {
width: calc(36.3636363636%);
max-width: calc(36.3636363636%);
}
.u-width-4\/12\@iphone-max {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/1\@iphone-max {
width: calc(100%);
max-width: calc(100%);
}
.u-width-5\/6\@iphone-max {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-5\/7\@iphone-max {
width: calc(71.4285714286%);
max-width: calc(71.4285714286%);
}
.u-width-5\/8\@iphone-max {
width: calc(62.5%);
max-width: calc(62.5%);
}
.u-width-5\/9\@iphone-max {
width: calc(55.5555555556%);
max-width: calc(55.5555555556%);
}
.u-width-5\/10\@iphone-max {
width: calc(50%);
max-width: calc(50%);
}
.u-width-5\/11\@iphone-max {
width: calc(45.4545454545%);
max-width: calc(45.4545454545%);
}
.u-width-5\/12\@iphone-max {
width: calc(41.6666666667%);
max-width: calc(41.6666666667%);
}
.u-width-1\/1\@iphone-max {
width: calc(100%);
max-width: calc(100%);
}
.u-width-6\/7\@iphone-max {
width: calc(85.7142857143%);
max-width: calc(85.7142857143%);
}
.u-width-6\/8\@iphone-max {
width: calc(75%);
max-width: calc(75%);
}
.u-width-6\/9\@iphone-max {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-6\/10\@iphone-max {
width: calc(60%);
max-width: calc(60%);
}
.u-width-6\/11\@iphone-max {
width: calc(54.5454545455%);
max-width: calc(54.5454545455%);
}
.u-width-6\/12\@iphone-max {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/1\@iphone-max {
width: calc(100%);
max-width: calc(100%);
}
.u-width-7\/8\@iphone-max {
width: calc(87.5%);
max-width: calc(87.5%);
}
.u-width-7\/9\@iphone-max {
width: calc(77.7777777778%);
max-width: calc(77.7777777778%);
}
.u-width-7\/10\@iphone-max {
width: calc(70%);
max-width: calc(70%);
}
.u-width-7\/11\@iphone-max {
width: calc(63.6363636364%);
max-width: calc(63.6363636364%);
}
.u-width-7\/12\@iphone-max {
width: calc(58.3333333333%);
max-width: calc(58.3333333333%);
}
.u-width-1\/1\@iphone-max {
width: calc(100%);
max-width: calc(100%);
}
.u-width-8\/9\@iphone-max {
width: calc(88.8888888889%);
max-width: calc(88.8888888889%);
}
.u-width-8\/10\@iphone-max {
width: calc(80%);
max-width: calc(80%);
}
.u-width-8\/11\@iphone-max {
width: calc(72.7272727273%);
max-width: calc(72.7272727273%);
}
.u-width-8\/12\@iphone-max {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-1\/1\@iphone-max {
width: calc(100%);
max-width: calc(100%);
}
.u-width-9\/10\@iphone-max {
width: calc(90%);
max-width: calc(90%);
}
.u-width-9\/11\@iphone-max {
width: calc(81.8181818182%);
max-width: calc(81.8181818182%);
}
.u-width-9\/12\@iphone-max {
width: calc(75%);
max-width: calc(75%);
}
.u-width-1\/1\@iphone-max {
width: calc(100%);
max-width: calc(100%);
}
.u-width-10\/11\@iphone-max {
width: calc(90.9090909091%);
max-width: calc(90.9090909091%);
}
.u-width-10\/12\@iphone-max {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-1\/1\@iphone-max {
width: calc(100%);
max-width: calc(100%);
}
.u-width-11\/12\@iphone-max {
width: calc(91.6666666667%);
max-width: calc(91.6666666667%);
}
.u-width-1\/1\@iphone-max {
width: calc(100%);
max-width: calc(100%);
}
.u-width-1\/1\@iphone-max {
width: calc(100%);
max-width: calc(100%);
}
.u-width-auto\@iphone-max {
width: auto;
}
}
@media (min-width: 768px) {
.u-width-1\/2\@ipad {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/3\@ipad {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/4\@ipad {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/5\@ipad {
width: calc(20%);
max-width: calc(20%);
}
.u-width-1\/6\@ipad {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/7\@ipad {
width: calc(14.2857142857%);
max-width: calc(14.2857142857%);
}
.u-width-1\/8\@ipad {
width: calc(12.5%);
max-width: calc(12.5%);
}
.u-width-1\/9\@ipad {
width: calc(11.1111111111%);
max-width: calc(11.1111111111%);
}
.u-width-1\/10\@ipad {
width: calc(10%);
max-width: calc(10%);
}
.u-width-1\/11\@ipad {
width: calc(9.0909090909%);
max-width: calc(9.0909090909%);
}
.u-width-1\/12\@ipad {
width: calc(8.3333333333%);
max-width: calc(8.3333333333%);
}
.u-width-1\/1\@ipad {
width: calc(100%);
max-width: calc(100%);
}
.u-width-2\/3\@ipad {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-2\/4\@ipad {
width: calc(50%);
max-width: calc(50%);
}
.u-width-2\/5\@ipad {
width: calc(40%);
max-width: calc(40%);
}
.u-width-2\/6\@ipad {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-2\/7\@ipad {
width: calc(28.5714285714%);
max-width: calc(28.5714285714%);
}
.u-width-2\/8\@ipad {
width: calc(25%);
max-width: calc(25%);
}
.u-width-2\/9\@ipad {
width: calc(22.2222222222%);
max-width: calc(22.2222222222%);
}
.u-width-2\/10\@ipad {
width: calc(20%);
max-width: calc(20%);
}
.u-width-2\/11\@ipad {
width: calc(18.1818181818%);
max-width: calc(18.1818181818%);
}
.u-width-2\/12\@ipad {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/1\@ipad {
width: calc(100%);
max-width: calc(100%);
}
.u-width-3\/4\@ipad {
width: calc(75%);
max-width: calc(75%);
}
.u-width-3\/5\@ipad {
width: calc(60%);
max-width: calc(60%);
}
.u-width-3\/6\@ipad {
width: calc(50%);
max-width: calc(50%);
}
.u-width-3\/7\@ipad {
width: calc(42.8571428571%);
max-width: calc(42.8571428571%);
}
.u-width-3\/8\@ipad {
width: calc(37.5%);
max-width: calc(37.5%);
}
.u-width-3\/9\@ipad {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-3\/10\@ipad {
width: calc(30%);
max-width: calc(30%);
}
.u-width-3\/11\@ipad {
width: calc(27.2727272727%);
max-width: calc(27.2727272727%);
}
.u-width-3\/12\@ipad {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/1\@ipad {
width: calc(100%);
max-width: calc(100%);
}
.u-width-4\/5\@ipad {
width: calc(80%);
max-width: calc(80%);
}
.u-width-4\/6\@ipad {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-4\/7\@ipad {
width: calc(57.1428571429%);
max-width: calc(57.1428571429%);
}
.u-width-4\/8\@ipad {
width: calc(50%);
max-width: calc(50%);
}
.u-width-4\/9\@ipad {
width: calc(44.4444444444%);
max-width: calc(44.4444444444%);
}
.u-width-4\/10\@ipad {
width: calc(40%);
max-width: calc(40%);
}
.u-width-4\/11\@ipad {
width: calc(36.3636363636%);
max-width: calc(36.3636363636%);
}
.u-width-4\/12\@ipad {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/1\@ipad {
width: calc(100%);
max-width: calc(100%);
}
.u-width-5\/6\@ipad {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-5\/7\@ipad {
width: calc(71.4285714286%);
max-width: calc(71.4285714286%);
}
.u-width-5\/8\@ipad {
width: calc(62.5%);
max-width: calc(62.5%);
}
.u-width-5\/9\@ipad {
width: calc(55.5555555556%);
max-width: calc(55.5555555556%);
}
.u-width-5\/10\@ipad {
width: calc(50%);
max-width: calc(50%);
}
.u-width-5\/11\@ipad {
width: calc(45.4545454545%);
max-width: calc(45.4545454545%);
}
.u-width-5\/12\@ipad {
width: calc(41.6666666667%);
max-width: calc(41.6666666667%);
}
.u-width-1\/1\@ipad {
width: calc(100%);
max-width: calc(100%);
}
.u-width-6\/7\@ipad {
width: calc(85.7142857143%);
max-width: calc(85.7142857143%);
}
.u-width-6\/8\@ipad {
width: calc(75%);
max-width: calc(75%);
}
.u-width-6\/9\@ipad {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-6\/10\@ipad {
width: calc(60%);
max-width: calc(60%);
}
.u-width-6\/11\@ipad {
width: calc(54.5454545455%);
max-width: calc(54.5454545455%);
}
.u-width-6\/12\@ipad {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/1\@ipad {
width: calc(100%);
max-width: calc(100%);
}
.u-width-7\/8\@ipad {
width: calc(87.5%);
max-width: calc(87.5%);
}
.u-width-7\/9\@ipad {
width: calc(77.7777777778%);
max-width: calc(77.7777777778%);
}
.u-width-7\/10\@ipad {
width: calc(70%);
max-width: calc(70%);
}
.u-width-7\/11\@ipad {
width: calc(63.6363636364%);
max-width: calc(63.6363636364%);
}
.u-width-7\/12\@ipad {
width: calc(58.3333333333%);
max-width: calc(58.3333333333%);
}
.u-width-1\/1\@ipad {
width: calc(100%);
max-width: calc(100%);
}
.u-width-8\/9\@ipad {
width: calc(88.8888888889%);
max-width: calc(88.8888888889%);
}
.u-width-8\/10\@ipad {
width: calc(80%);
max-width: calc(80%);
}
.u-width-8\/11\@ipad {
width: calc(72.7272727273%);
max-width: calc(72.7272727273%);
}
.u-width-8\/12\@ipad {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-1\/1\@ipad {
width: calc(100%);
max-width: calc(100%);
}
.u-width-9\/10\@ipad {
width: calc(90%);
max-width: calc(90%);
}
.u-width-9\/11\@ipad {
width: calc(81.8181818182%);
max-width: calc(81.8181818182%);
}
.u-width-9\/12\@ipad {
width: calc(75%);
max-width: calc(75%);
}
.u-width-1\/1\@ipad {
width: calc(100%);
max-width: calc(100%);
}
.u-width-10\/11\@ipad {
width: calc(90.9090909091%);
max-width: calc(90.9090909091%);
}
.u-width-10\/12\@ipad {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-1\/1\@ipad {
width: calc(100%);
max-width: calc(100%);
}
.u-width-11\/12\@ipad {
width: calc(91.6666666667%);
max-width: calc(91.6666666667%);
}
.u-width-1\/1\@ipad {
width: calc(100%);
max-width: calc(100%);
}
.u-width-1\/1\@ipad {
width: calc(100%);
max-width: calc(100%);
}
.u-width-auto\@ipad {
width: auto;
}
}
@media (min-width: 769px) {
.u-width-1\/2\@checkout {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/3\@checkout {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/4\@checkout {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/5\@checkout {
width: calc(20%);
max-width: calc(20%);
}
.u-width-1\/6\@checkout {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/7\@checkout {
width: calc(14.2857142857%);
max-width: calc(14.2857142857%);
}
.u-width-1\/8\@checkout {
width: calc(12.5%);
max-width: calc(12.5%);
}
.u-width-1\/9\@checkout {
width: calc(11.1111111111%);
max-width: calc(11.1111111111%);
}
.u-width-1\/10\@checkout {
width: calc(10%);
max-width: calc(10%);
}
.u-width-1\/11\@checkout {
width: calc(9.0909090909%);
max-width: calc(9.0909090909%);
}
.u-width-1\/12\@checkout {
width: calc(8.3333333333%);
max-width: calc(8.3333333333%);
}
.u-width-1\/1\@checkout {
width: calc(100%);
max-width: calc(100%);
}
.u-width-2\/3\@checkout {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-2\/4\@checkout {
width: calc(50%);
max-width: calc(50%);
}
.u-width-2\/5\@checkout {
width: calc(40%);
max-width: calc(40%);
}
.u-width-2\/6\@checkout {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-2\/7\@checkout {
width: calc(28.5714285714%);
max-width: calc(28.5714285714%);
}
.u-width-2\/8\@checkout {
width: calc(25%);
max-width: calc(25%);
}
.u-width-2\/9\@checkout {
width: calc(22.2222222222%);
max-width: calc(22.2222222222%);
}
.u-width-2\/10\@checkout {
width: calc(20%);
max-width: calc(20%);
}
.u-width-2\/11\@checkout {
width: calc(18.1818181818%);
max-width: calc(18.1818181818%);
}
.u-width-2\/12\@checkout {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/1\@checkout {
width: calc(100%);
max-width: calc(100%);
}
.u-width-3\/4\@checkout {
width: calc(75%);
max-width: calc(75%);
}
.u-width-3\/5\@checkout {
width: calc(60%);
max-width: calc(60%);
}
.u-width-3\/6\@checkout {
width: calc(50%);
max-width: calc(50%);
}
.u-width-3\/7\@checkout {
width: calc(42.8571428571%);
max-width: calc(42.8571428571%);
}
.u-width-3\/8\@checkout {
width: calc(37.5%);
max-width: calc(37.5%);
}
.u-width-3\/9\@checkout {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-3\/10\@checkout {
width: calc(30%);
max-width: calc(30%);
}
.u-width-3\/11\@checkout {
width: calc(27.2727272727%);
max-width: calc(27.2727272727%);
}
.u-width-3\/12\@checkout {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/1\@checkout {
width: calc(100%);
max-width: calc(100%);
}
.u-width-4\/5\@checkout {
width: calc(80%);
max-width: calc(80%);
}
.u-width-4\/6\@checkout {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-4\/7\@checkout {
width: calc(57.1428571429%);
max-width: calc(57.1428571429%);
}
.u-width-4\/8\@checkout {
width: calc(50%);
max-width: calc(50%);
}
.u-width-4\/9\@checkout {
width: calc(44.4444444444%);
max-width: calc(44.4444444444%);
}
.u-width-4\/10\@checkout {
width: calc(40%);
max-width: calc(40%);
}
.u-width-4\/11\@checkout {
width: calc(36.3636363636%);
max-width: calc(36.3636363636%);
}
.u-width-4\/12\@checkout {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/1\@checkout {
width: calc(100%);
max-width: calc(100%);
}
.u-width-5\/6\@checkout {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-5\/7\@checkout {
width: calc(71.4285714286%);
max-width: calc(71.4285714286%);
}
.u-width-5\/8\@checkout {
width: calc(62.5%);
max-width: calc(62.5%);
}
.u-width-5\/9\@checkout {
width: calc(55.5555555556%);
max-width: calc(55.5555555556%);
}
.u-width-5\/10\@checkout {
width: calc(50%);
max-width: calc(50%);
}
.u-width-5\/11\@checkout {
width: calc(45.4545454545%);
max-width: calc(45.4545454545%);
}
.u-width-5\/12\@checkout {
width: calc(41.6666666667%);
max-width: calc(41.6666666667%);
}
.u-width-1\/1\@checkout {
width: calc(100%);
max-width: calc(100%);
}
.u-width-6\/7\@checkout {
width: calc(85.7142857143%);
max-width: calc(85.7142857143%);
}
.u-width-6\/8\@checkout {
width: calc(75%);
max-width: calc(75%);
}
.u-width-6\/9\@checkout {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-6\/10\@checkout {
width: calc(60%);
max-width: calc(60%);
}
.u-width-6\/11\@checkout {
width: calc(54.5454545455%);
max-width: calc(54.5454545455%);
}
.u-width-6\/12\@checkout {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/1\@checkout {
width: calc(100%);
max-width: calc(100%);
}
.u-width-7\/8\@checkout {
width: calc(87.5%);
max-width: calc(87.5%);
}
.u-width-7\/9\@checkout {
width: calc(77.7777777778%);
max-width: calc(77.7777777778%);
}
.u-width-7\/10\@checkout {
width: calc(70%);
max-width: calc(70%);
}
.u-width-7\/11\@checkout {
width: calc(63.6363636364%);
max-width: calc(63.6363636364%);
}
.u-width-7\/12\@checkout {
width: calc(58.3333333333%);
max-width: calc(58.3333333333%);
}
.u-width-1\/1\@checkout {
width: calc(100%);
max-width: calc(100%);
}
.u-width-8\/9\@checkout {
width: calc(88.8888888889%);
max-width: calc(88.8888888889%);
}
.u-width-8\/10\@checkout {
width: calc(80%);
max-width: calc(80%);
}
.u-width-8\/11\@checkout {
width: calc(72.7272727273%);
max-width: calc(72.7272727273%);
}
.u-width-8\/12\@checkout {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-1\/1\@checkout {
width: calc(100%);
max-width: calc(100%);
}
.u-width-9\/10\@checkout {
width: calc(90%);
max-width: calc(90%);
}
.u-width-9\/11\@checkout {
width: calc(81.8181818182%);
max-width: calc(81.8181818182%);
}
.u-width-9\/12\@checkout {
width: calc(75%);
max-width: calc(75%);
}
.u-width-1\/1\@checkout {
width: calc(100%);
max-width: calc(100%);
}
.u-width-10\/11\@checkout {
width: calc(90.9090909091%);
max-width: calc(90.9090909091%);
}
.u-width-10\/12\@checkout {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-1\/1\@checkout {
width: calc(100%);
max-width: calc(100%);
}
.u-width-11\/12\@checkout {
width: calc(91.6666666667%);
max-width: calc(91.6666666667%);
}
.u-width-1\/1\@checkout {
width: calc(100%);
max-width: calc(100%);
}
.u-width-1\/1\@checkout {
width: calc(100%);
max-width: calc(100%);
}
.u-width-auto\@checkout {
width: auto;
}
}
@media (min-width: 1024px) {
.u-width-1\/2\@ipad-pro {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/3\@ipad-pro {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/4\@ipad-pro {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/5\@ipad-pro {
width: calc(20%);
max-width: calc(20%);
}
.u-width-1\/6\@ipad-pro {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/7\@ipad-pro {
width: calc(14.2857142857%);
max-width: calc(14.2857142857%);
}
.u-width-1\/8\@ipad-pro {
width: calc(12.5%);
max-width: calc(12.5%);
}
.u-width-1\/9\@ipad-pro {
width: calc(11.1111111111%);
max-width: calc(11.1111111111%);
}
.u-width-1\/10\@ipad-pro {
width: calc(10%);
max-width: calc(10%);
}
.u-width-1\/11\@ipad-pro {
width: calc(9.0909090909%);
max-width: calc(9.0909090909%);
}
.u-width-1\/12\@ipad-pro {
width: calc(8.3333333333%);
max-width: calc(8.3333333333%);
}
.u-width-1\/1\@ipad-pro {
width: calc(100%);
max-width: calc(100%);
}
.u-width-2\/3\@ipad-pro {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-2\/4\@ipad-pro {
width: calc(50%);
max-width: calc(50%);
}
.u-width-2\/5\@ipad-pro {
width: calc(40%);
max-width: calc(40%);
}
.u-width-2\/6\@ipad-pro {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-2\/7\@ipad-pro {
width: calc(28.5714285714%);
max-width: calc(28.5714285714%);
}
.u-width-2\/8\@ipad-pro {
width: calc(25%);
max-width: calc(25%);
}
.u-width-2\/9\@ipad-pro {
width: calc(22.2222222222%);
max-width: calc(22.2222222222%);
}
.u-width-2\/10\@ipad-pro {
width: calc(20%);
max-width: calc(20%);
}
.u-width-2\/11\@ipad-pro {
width: calc(18.1818181818%);
max-width: calc(18.1818181818%);
}
.u-width-2\/12\@ipad-pro {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/1\@ipad-pro {
width: calc(100%);
max-width: calc(100%);
}
.u-width-3\/4\@ipad-pro {
width: calc(75%);
max-width: calc(75%);
}
.u-width-3\/5\@ipad-pro {
width: calc(60%);
max-width: calc(60%);
}
.u-width-3\/6\@ipad-pro {
width: calc(50%);
max-width: calc(50%);
}
.u-width-3\/7\@ipad-pro {
width: calc(42.8571428571%);
max-width: calc(42.8571428571%);
}
.u-width-3\/8\@ipad-pro {
width: calc(37.5%);
max-width: calc(37.5%);
}
.u-width-3\/9\@ipad-pro {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-3\/10\@ipad-pro {
width: calc(30%);
max-width: calc(30%);
}
.u-width-3\/11\@ipad-pro {
width: calc(27.2727272727%);
max-width: calc(27.2727272727%);
}
.u-width-3\/12\@ipad-pro {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/1\@ipad-pro {
width: calc(100%);
max-width: calc(100%);
}
.u-width-4\/5\@ipad-pro {
width: calc(80%);
max-width: calc(80%);
}
.u-width-4\/6\@ipad-pro {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-4\/7\@ipad-pro {
width: calc(57.1428571429%);
max-width: calc(57.1428571429%);
}
.u-width-4\/8\@ipad-pro {
width: calc(50%);
max-width: calc(50%);
}
.u-width-4\/9\@ipad-pro {
width: calc(44.4444444444%);
max-width: calc(44.4444444444%);
}
.u-width-4\/10\@ipad-pro {
width: calc(40%);
max-width: calc(40%);
}
.u-width-4\/11\@ipad-pro {
width: calc(36.3636363636%);
max-width: calc(36.3636363636%);
}
.u-width-4\/12\@ipad-pro {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/1\@ipad-pro {
width: calc(100%);
max-width: calc(100%);
}
.u-width-5\/6\@ipad-pro {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-5\/7\@ipad-pro {
width: calc(71.4285714286%);
max-width: calc(71.4285714286%);
}
.u-width-5\/8\@ipad-pro {
width: calc(62.5%);
max-width: calc(62.5%);
}
.u-width-5\/9\@ipad-pro {
width: calc(55.5555555556%);
max-width: calc(55.5555555556%);
}
.u-width-5\/10\@ipad-pro {
width: calc(50%);
max-width: calc(50%);
}
.u-width-5\/11\@ipad-pro {
width: calc(45.4545454545%);
max-width: calc(45.4545454545%);
}
.u-width-5\/12\@ipad-pro {
width: calc(41.6666666667%);
max-width: calc(41.6666666667%);
}
.u-width-1\/1\@ipad-pro {
width: calc(100%);
max-width: calc(100%);
}
.u-width-6\/7\@ipad-pro {
width: calc(85.7142857143%);
max-width: calc(85.7142857143%);
}
.u-width-6\/8\@ipad-pro {
width: calc(75%);
max-width: calc(75%);
}
.u-width-6\/9\@ipad-pro {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-6\/10\@ipad-pro {
width: calc(60%);
max-width: calc(60%);
}
.u-width-6\/11\@ipad-pro {
width: calc(54.5454545455%);
max-width: calc(54.5454545455%);
}
.u-width-6\/12\@ipad-pro {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/1\@ipad-pro {
width: calc(100%);
max-width: calc(100%);
}
.u-width-7\/8\@ipad-pro {
width: calc(87.5%);
max-width: calc(87.5%);
}
.u-width-7\/9\@ipad-pro {
width: calc(77.7777777778%);
max-width: calc(77.7777777778%);
}
.u-width-7\/10\@ipad-pro {
width: calc(70%);
max-width: calc(70%);
}
.u-width-7\/11\@ipad-pro {
width: calc(63.6363636364%);
max-width: calc(63.6363636364%);
}
.u-width-7\/12\@ipad-pro {
width: calc(58.3333333333%);
max-width: calc(58.3333333333%);
}
.u-width-1\/1\@ipad-pro {
width: calc(100%);
max-width: calc(100%);
}
.u-width-8\/9\@ipad-pro {
width: calc(88.8888888889%);
max-width: calc(88.8888888889%);
}
.u-width-8\/10\@ipad-pro {
width: calc(80%);
max-width: calc(80%);
}
.u-width-8\/11\@ipad-pro {
width: calc(72.7272727273%);
max-width: calc(72.7272727273%);
}
.u-width-8\/12\@ipad-pro {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-1\/1\@ipad-pro {
width: calc(100%);
max-width: calc(100%);
}
.u-width-9\/10\@ipad-pro {
width: calc(90%);
max-width: calc(90%);
}
.u-width-9\/11\@ipad-pro {
width: calc(81.8181818182%);
max-width: calc(81.8181818182%);
}
.u-width-9\/12\@ipad-pro {
width: calc(75%);
max-width: calc(75%);
}
.u-width-1\/1\@ipad-pro {
width: calc(100%);
max-width: calc(100%);
}
.u-width-10\/11\@ipad-pro {
width: calc(90.9090909091%);
max-width: calc(90.9090909091%);
}
.u-width-10\/12\@ipad-pro {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-1\/1\@ipad-pro {
width: calc(100%);
max-width: calc(100%);
}
.u-width-11\/12\@ipad-pro {
width: calc(91.6666666667%);
max-width: calc(91.6666666667%);
}
.u-width-1\/1\@ipad-pro {
width: calc(100%);
max-width: calc(100%);
}
.u-width-1\/1\@ipad-pro {
width: calc(100%);
max-width: calc(100%);
}
.u-width-auto\@ipad-pro {
width: auto;
}
}
@media (min-width: 1280px) {
.u-width-1\/2\@laptop {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/3\@laptop {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/4\@laptop {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/5\@laptop {
width: calc(20%);
max-width: calc(20%);
}
.u-width-1\/6\@laptop {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/7\@laptop {
width: calc(14.2857142857%);
max-width: calc(14.2857142857%);
}
.u-width-1\/8\@laptop {
width: calc(12.5%);
max-width: calc(12.5%);
}
.u-width-1\/9\@laptop {
width: calc(11.1111111111%);
max-width: calc(11.1111111111%);
}
.u-width-1\/10\@laptop {
width: calc(10%);
max-width: calc(10%);
}
.u-width-1\/11\@laptop {
width: calc(9.0909090909%);
max-width: calc(9.0909090909%);
}
.u-width-1\/12\@laptop {
width: calc(8.3333333333%);
max-width: calc(8.3333333333%);
}
.u-width-1\/1\@laptop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-2\/3\@laptop {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-2\/4\@laptop {
width: calc(50%);
max-width: calc(50%);
}
.u-width-2\/5\@laptop {
width: calc(40%);
max-width: calc(40%);
}
.u-width-2\/6\@laptop {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-2\/7\@laptop {
width: calc(28.5714285714%);
max-width: calc(28.5714285714%);
}
.u-width-2\/8\@laptop {
width: calc(25%);
max-width: calc(25%);
}
.u-width-2\/9\@laptop {
width: calc(22.2222222222%);
max-width: calc(22.2222222222%);
}
.u-width-2\/10\@laptop {
width: calc(20%);
max-width: calc(20%);
}
.u-width-2\/11\@laptop {
width: calc(18.1818181818%);
max-width: calc(18.1818181818%);
}
.u-width-2\/12\@laptop {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/1\@laptop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-3\/4\@laptop {
width: calc(75%);
max-width: calc(75%);
}
.u-width-3\/5\@laptop {
width: calc(60%);
max-width: calc(60%);
}
.u-width-3\/6\@laptop {
width: calc(50%);
max-width: calc(50%);
}
.u-width-3\/7\@laptop {
width: calc(42.8571428571%);
max-width: calc(42.8571428571%);
}
.u-width-3\/8\@laptop {
width: calc(37.5%);
max-width: calc(37.5%);
}
.u-width-3\/9\@laptop {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-3\/10\@laptop {
width: calc(30%);
max-width: calc(30%);
}
.u-width-3\/11\@laptop {
width: calc(27.2727272727%);
max-width: calc(27.2727272727%);
}
.u-width-3\/12\@laptop {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/1\@laptop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-4\/5\@laptop {
width: calc(80%);
max-width: calc(80%);
}
.u-width-4\/6\@laptop {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-4\/7\@laptop {
width: calc(57.1428571429%);
max-width: calc(57.1428571429%);
}
.u-width-4\/8\@laptop {
width: calc(50%);
max-width: calc(50%);
}
.u-width-4\/9\@laptop {
width: calc(44.4444444444%);
max-width: calc(44.4444444444%);
}
.u-width-4\/10\@laptop {
width: calc(40%);
max-width: calc(40%);
}
.u-width-4\/11\@laptop {
width: calc(36.3636363636%);
max-width: calc(36.3636363636%);
}
.u-width-4\/12\@laptop {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/1\@laptop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-5\/6\@laptop {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-5\/7\@laptop {
width: calc(71.4285714286%);
max-width: calc(71.4285714286%);
}
.u-width-5\/8\@laptop {
width: calc(62.5%);
max-width: calc(62.5%);
}
.u-width-5\/9\@laptop {
width: calc(55.5555555556%);
max-width: calc(55.5555555556%);
}
.u-width-5\/10\@laptop {
width: calc(50%);
max-width: calc(50%);
}
.u-width-5\/11\@laptop {
width: calc(45.4545454545%);
max-width: calc(45.4545454545%);
}
.u-width-5\/12\@laptop {
width: calc(41.6666666667%);
max-width: calc(41.6666666667%);
}
.u-width-1\/1\@laptop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-6\/7\@laptop {
width: calc(85.7142857143%);
max-width: calc(85.7142857143%);
}
.u-width-6\/8\@laptop {
width: calc(75%);
max-width: calc(75%);
}
.u-width-6\/9\@laptop {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-6\/10\@laptop {
width: calc(60%);
max-width: calc(60%);
}
.u-width-6\/11\@laptop {
width: calc(54.5454545455%);
max-width: calc(54.5454545455%);
}
.u-width-6\/12\@laptop {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/1\@laptop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-7\/8\@laptop {
width: calc(87.5%);
max-width: calc(87.5%);
}
.u-width-7\/9\@laptop {
width: calc(77.7777777778%);
max-width: calc(77.7777777778%);
}
.u-width-7\/10\@laptop {
width: calc(70%);
max-width: calc(70%);
}
.u-width-7\/11\@laptop {
width: calc(63.6363636364%);
max-width: calc(63.6363636364%);
}
.u-width-7\/12\@laptop {
width: calc(58.3333333333%);
max-width: calc(58.3333333333%);
}
.u-width-1\/1\@laptop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-8\/9\@laptop {
width: calc(88.8888888889%);
max-width: calc(88.8888888889%);
}
.u-width-8\/10\@laptop {
width: calc(80%);
max-width: calc(80%);
}
.u-width-8\/11\@laptop {
width: calc(72.7272727273%);
max-width: calc(72.7272727273%);
}
.u-width-8\/12\@laptop {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-1\/1\@laptop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-9\/10\@laptop {
width: calc(90%);
max-width: calc(90%);
}
.u-width-9\/11\@laptop {
width: calc(81.8181818182%);
max-width: calc(81.8181818182%);
}
.u-width-9\/12\@laptop {
width: calc(75%);
max-width: calc(75%);
}
.u-width-1\/1\@laptop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-10\/11\@laptop {
width: calc(90.9090909091%);
max-width: calc(90.9090909091%);
}
.u-width-10\/12\@laptop {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-1\/1\@laptop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-11\/12\@laptop {
width: calc(91.6666666667%);
max-width: calc(91.6666666667%);
}
.u-width-1\/1\@laptop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-1\/1\@laptop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-auto\@laptop {
width: auto;
}
}
@media (min-width: 1440px) {
.u-width-1\/2\@macbook {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/3\@macbook {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/4\@macbook {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/5\@macbook {
width: calc(20%);
max-width: calc(20%);
}
.u-width-1\/6\@macbook {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/7\@macbook {
width: calc(14.2857142857%);
max-width: calc(14.2857142857%);
}
.u-width-1\/8\@macbook {
width: calc(12.5%);
max-width: calc(12.5%);
}
.u-width-1\/9\@macbook {
width: calc(11.1111111111%);
max-width: calc(11.1111111111%);
}
.u-width-1\/10\@macbook {
width: calc(10%);
max-width: calc(10%);
}
.u-width-1\/11\@macbook {
width: calc(9.0909090909%);
max-width: calc(9.0909090909%);
}
.u-width-1\/12\@macbook {
width: calc(8.3333333333%);
max-width: calc(8.3333333333%);
}
.u-width-1\/1\@macbook {
width: calc(100%);
max-width: calc(100%);
}
.u-width-2\/3\@macbook {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-2\/4\@macbook {
width: calc(50%);
max-width: calc(50%);
}
.u-width-2\/5\@macbook {
width: calc(40%);
max-width: calc(40%);
}
.u-width-2\/6\@macbook {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-2\/7\@macbook {
width: calc(28.5714285714%);
max-width: calc(28.5714285714%);
}
.u-width-2\/8\@macbook {
width: calc(25%);
max-width: calc(25%);
}
.u-width-2\/9\@macbook {
width: calc(22.2222222222%);
max-width: calc(22.2222222222%);
}
.u-width-2\/10\@macbook {
width: calc(20%);
max-width: calc(20%);
}
.u-width-2\/11\@macbook {
width: calc(18.1818181818%);
max-width: calc(18.1818181818%);
}
.u-width-2\/12\@macbook {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/1\@macbook {
width: calc(100%);
max-width: calc(100%);
}
.u-width-3\/4\@macbook {
width: calc(75%);
max-width: calc(75%);
}
.u-width-3\/5\@macbook {
width: calc(60%);
max-width: calc(60%);
}
.u-width-3\/6\@macbook {
width: calc(50%);
max-width: calc(50%);
}
.u-width-3\/7\@macbook {
width: calc(42.8571428571%);
max-width: calc(42.8571428571%);
}
.u-width-3\/8\@macbook {
width: calc(37.5%);
max-width: calc(37.5%);
}
.u-width-3\/9\@macbook {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-3\/10\@macbook {
width: calc(30%);
max-width: calc(30%);
}
.u-width-3\/11\@macbook {
width: calc(27.2727272727%);
max-width: calc(27.2727272727%);
}
.u-width-3\/12\@macbook {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/1\@macbook {
width: calc(100%);
max-width: calc(100%);
}
.u-width-4\/5\@macbook {
width: calc(80%);
max-width: calc(80%);
}
.u-width-4\/6\@macbook {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-4\/7\@macbook {
width: calc(57.1428571429%);
max-width: calc(57.1428571429%);
}
.u-width-4\/8\@macbook {
width: calc(50%);
max-width: calc(50%);
}
.u-width-4\/9\@macbook {
width: calc(44.4444444444%);
max-width: calc(44.4444444444%);
}
.u-width-4\/10\@macbook {
width: calc(40%);
max-width: calc(40%);
}
.u-width-4\/11\@macbook {
width: calc(36.3636363636%);
max-width: calc(36.3636363636%);
}
.u-width-4\/12\@macbook {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/1\@macbook {
width: calc(100%);
max-width: calc(100%);
}
.u-width-5\/6\@macbook {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-5\/7\@macbook {
width: calc(71.4285714286%);
max-width: calc(71.4285714286%);
}
.u-width-5\/8\@macbook {
width: calc(62.5%);
max-width: calc(62.5%);
}
.u-width-5\/9\@macbook {
width: calc(55.5555555556%);
max-width: calc(55.5555555556%);
}
.u-width-5\/10\@macbook {
width: calc(50%);
max-width: calc(50%);
}
.u-width-5\/11\@macbook {
width: calc(45.4545454545%);
max-width: calc(45.4545454545%);
}
.u-width-5\/12\@macbook {
width: calc(41.6666666667%);
max-width: calc(41.6666666667%);
}
.u-width-1\/1\@macbook {
width: calc(100%);
max-width: calc(100%);
}
.u-width-6\/7\@macbook {
width: calc(85.7142857143%);
max-width: calc(85.7142857143%);
}
.u-width-6\/8\@macbook {
width: calc(75%);
max-width: calc(75%);
}
.u-width-6\/9\@macbook {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-6\/10\@macbook {
width: calc(60%);
max-width: calc(60%);
}
.u-width-6\/11\@macbook {
width: calc(54.5454545455%);
max-width: calc(54.5454545455%);
}
.u-width-6\/12\@macbook {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/1\@macbook {
width: calc(100%);
max-width: calc(100%);
}
.u-width-7\/8\@macbook {
width: calc(87.5%);
max-width: calc(87.5%);
}
.u-width-7\/9\@macbook {
width: calc(77.7777777778%);
max-width: calc(77.7777777778%);
}
.u-width-7\/10\@macbook {
width: calc(70%);
max-width: calc(70%);
}
.u-width-7\/11\@macbook {
width: calc(63.6363636364%);
max-width: calc(63.6363636364%);
}
.u-width-7\/12\@macbook {
width: calc(58.3333333333%);
max-width: calc(58.3333333333%);
}
.u-width-1\/1\@macbook {
width: calc(100%);
max-width: calc(100%);
}
.u-width-8\/9\@macbook {
width: calc(88.8888888889%);
max-width: calc(88.8888888889%);
}
.u-width-8\/10\@macbook {
width: calc(80%);
max-width: calc(80%);
}
.u-width-8\/11\@macbook {
width: calc(72.7272727273%);
max-width: calc(72.7272727273%);
}
.u-width-8\/12\@macbook {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-1\/1\@macbook {
width: calc(100%);
max-width: calc(100%);
}
.u-width-9\/10\@macbook {
width: calc(90%);
max-width: calc(90%);
}
.u-width-9\/11\@macbook {
width: calc(81.8181818182%);
max-width: calc(81.8181818182%);
}
.u-width-9\/12\@macbook {
width: calc(75%);
max-width: calc(75%);
}
.u-width-1\/1\@macbook {
width: calc(100%);
max-width: calc(100%);
}
.u-width-10\/11\@macbook {
width: calc(90.9090909091%);
max-width: calc(90.9090909091%);
}
.u-width-10\/12\@macbook {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-1\/1\@macbook {
width: calc(100%);
max-width: calc(100%);
}
.u-width-11\/12\@macbook {
width: calc(91.6666666667%);
max-width: calc(91.6666666667%);
}
.u-width-1\/1\@macbook {
width: calc(100%);
max-width: calc(100%);
}
.u-width-1\/1\@macbook {
width: calc(100%);
max-width: calc(100%);
}
.u-width-auto\@macbook {
width: auto;
}
}
@media (min-width: 1920px) {
.u-width-1\/2\@desktop {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/3\@desktop {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/4\@desktop {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/5\@desktop {
width: calc(20%);
max-width: calc(20%);
}
.u-width-1\/6\@desktop {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/7\@desktop {
width: calc(14.2857142857%);
max-width: calc(14.2857142857%);
}
.u-width-1\/8\@desktop {
width: calc(12.5%);
max-width: calc(12.5%);
}
.u-width-1\/9\@desktop {
width: calc(11.1111111111%);
max-width: calc(11.1111111111%);
}
.u-width-1\/10\@desktop {
width: calc(10%);
max-width: calc(10%);
}
.u-width-1\/11\@desktop {
width: calc(9.0909090909%);
max-width: calc(9.0909090909%);
}
.u-width-1\/12\@desktop {
width: calc(8.3333333333%);
max-width: calc(8.3333333333%);
}
.u-width-1\/1\@desktop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-2\/3\@desktop {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-2\/4\@desktop {
width: calc(50%);
max-width: calc(50%);
}
.u-width-2\/5\@desktop {
width: calc(40%);
max-width: calc(40%);
}
.u-width-2\/6\@desktop {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-2\/7\@desktop {
width: calc(28.5714285714%);
max-width: calc(28.5714285714%);
}
.u-width-2\/8\@desktop {
width: calc(25%);
max-width: calc(25%);
}
.u-width-2\/9\@desktop {
width: calc(22.2222222222%);
max-width: calc(22.2222222222%);
}
.u-width-2\/10\@desktop {
width: calc(20%);
max-width: calc(20%);
}
.u-width-2\/11\@desktop {
width: calc(18.1818181818%);
max-width: calc(18.1818181818%);
}
.u-width-2\/12\@desktop {
width: calc(16.6666666667%);
max-width: calc(16.6666666667%);
}
.u-width-1\/1\@desktop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-3\/4\@desktop {
width: calc(75%);
max-width: calc(75%);
}
.u-width-3\/5\@desktop {
width: calc(60%);
max-width: calc(60%);
}
.u-width-3\/6\@desktop {
width: calc(50%);
max-width: calc(50%);
}
.u-width-3\/7\@desktop {
width: calc(42.8571428571%);
max-width: calc(42.8571428571%);
}
.u-width-3\/8\@desktop {
width: calc(37.5%);
max-width: calc(37.5%);
}
.u-width-3\/9\@desktop {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-3\/10\@desktop {
width: calc(30%);
max-width: calc(30%);
}
.u-width-3\/11\@desktop {
width: calc(27.2727272727%);
max-width: calc(27.2727272727%);
}
.u-width-3\/12\@desktop {
width: calc(25%);
max-width: calc(25%);
}
.u-width-1\/1\@desktop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-4\/5\@desktop {
width: calc(80%);
max-width: calc(80%);
}
.u-width-4\/6\@desktop {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-4\/7\@desktop {
width: calc(57.1428571429%);
max-width: calc(57.1428571429%);
}
.u-width-4\/8\@desktop {
width: calc(50%);
max-width: calc(50%);
}
.u-width-4\/9\@desktop {
width: calc(44.4444444444%);
max-width: calc(44.4444444444%);
}
.u-width-4\/10\@desktop {
width: calc(40%);
max-width: calc(40%);
}
.u-width-4\/11\@desktop {
width: calc(36.3636363636%);
max-width: calc(36.3636363636%);
}
.u-width-4\/12\@desktop {
width: calc(33.3333333333%);
max-width: calc(33.3333333333%);
}
.u-width-1\/1\@desktop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-5\/6\@desktop {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-5\/7\@desktop {
width: calc(71.4285714286%);
max-width: calc(71.4285714286%);
}
.u-width-5\/8\@desktop {
width: calc(62.5%);
max-width: calc(62.5%);
}
.u-width-5\/9\@desktop {
width: calc(55.5555555556%);
max-width: calc(55.5555555556%);
}
.u-width-5\/10\@desktop {
width: calc(50%);
max-width: calc(50%);
}
.u-width-5\/11\@desktop {
width: calc(45.4545454545%);
max-width: calc(45.4545454545%);
}
.u-width-5\/12\@desktop {
width: calc(41.6666666667%);
max-width: calc(41.6666666667%);
}
.u-width-1\/1\@desktop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-6\/7\@desktop {
width: calc(85.7142857143%);
max-width: calc(85.7142857143%);
}
.u-width-6\/8\@desktop {
width: calc(75%);
max-width: calc(75%);
}
.u-width-6\/9\@desktop {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-6\/10\@desktop {
width: calc(60%);
max-width: calc(60%);
}
.u-width-6\/11\@desktop {
width: calc(54.5454545455%);
max-width: calc(54.5454545455%);
}
.u-width-6\/12\@desktop {
width: calc(50%);
max-width: calc(50%);
}
.u-width-1\/1\@desktop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-7\/8\@desktop {
width: calc(87.5%);
max-width: calc(87.5%);
}
.u-width-7\/9\@desktop {
width: calc(77.7777777778%);
max-width: calc(77.7777777778%);
}
.u-width-7\/10\@desktop {
width: calc(70%);
max-width: calc(70%);
}
.u-width-7\/11\@desktop {
width: calc(63.6363636364%);
max-width: calc(63.6363636364%);
}
.u-width-7\/12\@desktop {
width: calc(58.3333333333%);
max-width: calc(58.3333333333%);
}
.u-width-1\/1\@desktop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-8\/9\@desktop {
width: calc(88.8888888889%);
max-width: calc(88.8888888889%);
}
.u-width-8\/10\@desktop {
width: calc(80%);
max-width: calc(80%);
}
.u-width-8\/11\@desktop {
width: calc(72.7272727273%);
max-width: calc(72.7272727273%);
}
.u-width-8\/12\@desktop {
width: calc(66.6666666667%);
max-width: calc(66.6666666667%);
}
.u-width-1\/1\@desktop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-9\/10\@desktop {
width: calc(90%);
max-width: calc(90%);
}
.u-width-9\/11\@desktop {
width: calc(81.8181818182%);
max-width: calc(81.8181818182%);
}
.u-width-9\/12\@desktop {
width: calc(75%);
max-width: calc(75%);
}
.u-width-1\/1\@desktop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-10\/11\@desktop {
width: calc(90.9090909091%);
max-width: calc(90.9090909091%);
}
.u-width-10\/12\@desktop {
width: calc(83.3333333333%);
max-width: calc(83.3333333333%);
}
.u-width-1\/1\@desktop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-11\/12\@desktop {
width: calc(91.6666666667%);
max-width: calc(91.6666666667%);
}
.u-width-1\/1\@desktop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-1\/1\@desktop {
width: calc(100%);
max-width: calc(100%);
}
.u-width-auto\@desktop {
width: auto;
}
}
/* ============================================================
* Utilities - Heights
============================================================ */
/**
* Heights are auto generated from the globals scss file
* An exmple would be:
* u-height-100
*/
.u-height-5 {
height: 5%;
}
.u-height-10 {
height: 10%;
}
.u-height-20 {
height: 20%;
}
.u-height-30 {
height: 30%;
}
.u-height-40 {
height: 40%;
}
.u-height-50 {
height: 50%;
}
.u-height-60 {
height: 60%;
}
.u-height-70 {
height: 70%;
}
.u-height-80 {
height: 80%;
}
.u-height-90 {
height: 90%;
}
.u-height-100 {
height: 100%;
}
.u-height-auto {
height: auto;
}
@media (min-width: 375px) {
.u-height-5\@ {
height: 5%;
}
.u-height-10\@ {
height: 10%;
}
.u-height-20\@ {
height: 20%;
}
.u-height-30\@ {
height: 30%;
}
.u-height-40\@ {
height: 40%;
}
.u-height-50\@ {
height: 50%;
}
.u-height-60\@ {
height: 60%;
}
.u-height-70\@ {
height: 70%;
}
.u-height-80\@ {
height: 80%;
}
.u-height-90\@ {
height: 90%;
}
.u-height-100\@ {
height: 100%;
}
.u-height-auto\@iphone-small {
width: auto;
}
}
@media (min-width: 640px) {
.u-height-5\@ {
height: 5%;
}
.u-height-10\@ {
height: 10%;
}
.u-height-20\@ {
height: 20%;
}
.u-height-30\@ {
height: 30%;
}
.u-height-40\@ {
height: 40%;
}
.u-height-50\@ {
height: 50%;
}
.u-height-60\@ {
height: 60%;
}
.u-height-70\@ {
height: 70%;
}
.u-height-80\@ {
height: 80%;
}
.u-height-90\@ {
height: 90%;
}
.u-height-100\@ {
height: 100%;
}
.u-height-auto\@iphone-max {
width: auto;
}
}
@media (min-width: 768px) {
.u-height-5\@ {
height: 5%;
}
.u-height-10\@ {
height: 10%;
}
.u-height-20\@ {
height: 20%;
}
.u-height-30\@ {
height: 30%;
}
.u-height-40\@ {
height: 40%;
}
.u-height-50\@ {
height: 50%;
}
.u-height-60\@ {
height: 60%;
}
.u-height-70\@ {
height: 70%;
}
.u-height-80\@ {
height: 80%;
}
.u-height-90\@ {
height: 90%;
}
.u-height-100\@ {
height: 100%;
}
.u-height-auto\@ipad {
width: auto;
}
}
@media (min-width: 769px) {
.u-height-5\@ {
height: 5%;
}
.u-height-10\@ {
height: 10%;
}
.u-height-20\@ {
height: 20%;
}
.u-height-30\@ {
height: 30%;
}
.u-height-40\@ {
height: 40%;
}
.u-height-50\@ {
height: 50%;
}
.u-height-60\@ {
height: 60%;
}
.u-height-70\@ {
height: 70%;
}
.u-height-80\@ {
height: 80%;
}
.u-height-90\@ {
height: 90%;
}
.u-height-100\@ {
height: 100%;
}
.u-height-auto\@checkout {
width: auto;
}
}
@media (min-width: 1024px) {
.u-height-5\@ {
height: 5%;
}
.u-height-10\@ {
height: 10%;
}
.u-height-20\@ {
height: 20%;
}
.u-height-30\@ {
height: 30%;
}
.u-height-40\@ {
height: 40%;
}
.u-height-50\@ {
height: 50%;
}
.u-height-60\@ {
height: 60%;
}
.u-height-70\@ {
height: 70%;
}
.u-height-80\@ {
height: 80%;
}
.u-height-90\@ {
height: 90%;
}
.u-height-100\@ {
height: 100%;
}
.u-height-auto\@ipad-pro {
width: auto;
}
}
@media (min-width: 1280px) {
.u-height-5\@ {
height: 5%;
}
.u-height-10\@ {
height: 10%;
}
.u-height-20\@ {
height: 20%;
}
.u-height-30\@ {
height: 30%;
}
.u-height-40\@ {
height: 40%;
}
.u-height-50\@ {
height: 50%;
}
.u-height-60\@ {
height: 60%;
}
.u-height-70\@ {
height: 70%;
}
.u-height-80\@ {
height: 80%;
}
.u-height-90\@ {
height: 90%;
}
.u-height-100\@ {
height: 100%;
}
.u-height-auto\@laptop {
width: auto;
}
}
@media (min-width: 1440px) {
.u-height-5\@ {
height: 5%;
}
.u-height-10\@ {
height: 10%;
}
.u-height-20\@ {
height: 20%;
}
.u-height-30\@ {
height: 30%;
}
.u-height-40\@ {
height: 40%;
}
.u-height-50\@ {
height: 50%;
}
.u-height-60\@ {
height: 60%;
}
.u-height-70\@ {
height: 70%;
}
.u-height-80\@ {
height: 80%;
}
.u-height-90\@ {
height: 90%;
}
.u-height-100\@ {
height: 100%;
}
.u-height-auto\@macbook {
width: auto;
}
}
@media (min-width: 1920px) {
.u-height-5\@ {
height: 5%;
}
.u-height-10\@ {
height: 10%;
}
.u-height-20\@ {
height: 20%;
}
.u-height-30\@ {
height: 30%;
}
.u-height-40\@ {
height: 40%;
}
.u-height-50\@ {
height: 50%;
}
.u-height-60\@ {
height: 60%;
}
.u-height-70\@ {
height: 70%;
}
.u-height-80\@ {
height: 80%;
}
.u-height-90\@ {
height: 90%;
}
.u-height-100\@ {
height: 100%;
}
.u-height-auto\@desktop {
width: auto;
}
}
/* ============================================================
* Utilities - Spacing
============================================================ */
/**
* Spacing, generates multiple padding and margin helper
* classes to be used to DRY your code. There are two
* selectors, padding and margin, for these we will use
* the prefixes m or p to clean up our HTML. Also we can
* be specfic to apply padding to either the top, left,
* right or bottom. For these we will use the prefixes
* t, l, r, b. Finaly we can use spacing moddifiers to
* get different spacing sizes, these are set in the
* spacing settins file.
* An example of margin top with 2x spacing is:
* u-mt-2x
*
* Spacing can be changed responsively as well,
* for this it will use our projects breakpoints.
* An exmpal would be:
* u-mt-3x@desktop
*
*/
.u-p {
padding: 20px;
}
.u-p-quarter {
padding: 5px;
}
.u-p-half {
padding: 10px;
}
.u-p-2x {
padding: 40px;
}
.u-p-3x {
padding: 60px;
}
.u-p-4x {
padding: 80px;
}
.u-p-5x {
padding: 100px;
}
.u-p-6x {
padding: 120px;
}
.u-p-7x {
padding: 140px;
}
.u-p-8x {
padding: 160px;
}
.u-p-9x {
padding: 180px;
}
.u-p-10x {
padding: 200px;
}
.u-p-0 {
padding: 0;
}
.u-pt {
padding-top: 20px;
}
.u-pt-quarter {
padding-top: 5px;
}
.u-pt-half {
padding-top: 10px;
}
.u-pt-2x {
padding-top: 40px;
}
.u-pt-3x {
padding-top: 60px;
}
.u-pt-4x {
padding-top: 80px;
}
.u-pt-5x {
padding-top: 100px;
}
.u-pt-6x {
padding-top: 120px;
}
.u-pt-7x {
padding-top: 140px;
}
.u-pt-8x {
padding-top: 160px;
}
.u-pt-9x {
padding-top: 180px;
}
.u-pt-10x {
padding-top: 200px;
}
.u-pt-0 {
padding-top: 0;
}
.u-pb {
padding-bottom: 20px;
}
.u-pb-quarter {
padding-bottom: 5px;
}
.u-pb-half {
padding-bottom: 10px;
}
.u-pb-2x {
padding-bottom: 40px;
}
.u-pb-3x {
padding-bottom: 60px;
}
.u-pb-4x {
padding-bottom: 80px;
}
.u-pb-5x {
padding-bottom: 100px;
}
.u-pb-6x {
padding-bottom: 120px;
}
.u-pb-7x {
padding-bottom: 140px;
}
.u-pb-8x {
padding-bottom: 160px;
}
.u-pb-9x {
padding-bottom: 180px;
}
.u-pb-10x {
padding-bottom: 200px;
}
.u-pb-0 {
padding-bottom: 0;
}
.u-pl {
padding-left: 20px;
}
.u-pl-quarter {
padding-left: 5px;
}
.u-pl-half {
padding-left: 10px;
}
.u-pl-2x {
padding-left: 40px;
}
.u-pl-3x {
padding-left: 60px;
}
.u-pl-4x {
padding-left: 80px;
}
.u-pl-5x {
padding-left: 100px;
}
.u-pl-6x {
padding-left: 120px;
}
.u-pl-7x {
padding-left: 140px;
}
.u-pl-8x {
padding-left: 160px;
}
.u-pl-9x {
padding-left: 180px;
}
.u-pl-10x {
padding-left: 200px;
}
.u-pl-0 {
padding-left: 0;
}
.u-pr {
padding-right: 20px;
}
.u-pr-quarter {
padding-right: 5px;
}
.u-pr-half {
padding-right: 10px;
}
.u-pr-2x {
padding-right: 40px;
}
.u-pr-3x {
padding-right: 60px;
}
.u-pr-4x {
padding-right: 80px;
}
.u-pr-5x {
padding-right: 100px;
}
.u-pr-6x {
padding-right: 120px;
}
.u-pr-7x {
padding-right: 140px;
}
.u-pr-8x {
padding-right: 160px;
}
.u-pr-9x {
padding-right: 180px;
}
.u-pr-10x {
padding-right: 200px;
}
.u-pr-0 {
padding-right: 0;
}
.u-py {
padding-top: 20px;
padding-bottom: 20px;
}
.u-py-quarter {
padding-top: 5px;
padding-bottom: 5px;
}
.u-py-half {
padding-top: 10px;
padding-bottom: 10px;
}
.u-py-2x {
padding-top: 40px;
padding-bottom: 40px;
}
.u-py-3x {
padding-top: 60px;
padding-bottom: 60px;
}
.u-py-4x {
padding-top: 80px;
padding-bottom: 80px;
}
.u-py-5x {
padding-top: 100px;
padding-bottom: 100px;
}
.u-py-6x {
padding-top: 120px;
padding-bottom: 120px;
}
.u-py-7x {
padding-top: 140px;
padding-bottom: 140px;
}
.u-py-8x {
padding-top: 160px;
padding-bottom: 160px;
}
.u-py-9x {
padding-top: 180px;
padding-bottom: 180px;
}
.u-py-10x {
padding-top: 200px;
padding-bottom: 200px;
}
.u-py-0 {
padding-top: 0;
padding-bottom: 0;
}
.u-px {
padding-left: 20px;
padding-right: 20px;
}
.u-px-quarter {
padding-left: 5px;
padding-right: 5px;
}
.u-px-half {
padding-left: 10px;
padding-right: 10px;
}
.u-px-2x {
padding-left: 40px;
padding-right: 40px;
}
.u-px-3x {
padding-left: 60px;
padding-right: 60px;
}
.u-px-4x {
padding-left: 80px;
padding-right: 80px;
}
.u-px-5x {
padding-left: 100px;
padding-right: 100px;
}
.u-px-6x {
padding-left: 120px;
padding-right: 120px;
}
.u-px-7x {
padding-left: 140px;
padding-right: 140px;
}
.u-px-8x {
padding-left: 160px;
padding-right: 160px;
}
.u-px-9x {
padding-left: 180px;
padding-right: 180px;
}
.u-px-10x {
padding-left: 200px;
padding-right: 200px;
}
.u-px-0 {
padding-left: 0;
padding-right: 0;
}
.u-m {
margin: 20px;
}
.u-m-quarter {
margin: 5px;
}
.u-m-half {
margin: 10px;
}
.u-m-2x {
margin: 40px;
}
.u-m-3x {
margin: 60px;
}
.u-m-4x {
margin: 80px;
}
.u-m-5x {
margin: 100px;
}
.u-m-6x {
margin: 120px;
}
.u-m-7x {
margin: 140px;
}
.u-m-8x {
margin: 160px;
}
.u-m-9x {
margin: 180px;
}
.u-m-10x {
margin: 200px;
}
.u-m-0 {
margin: 0;
}
.u-mt {
margin-top: 20px;
}
.u-mt-quarter {
margin-top: 5px;
}
.u-mt-half {
margin-top: 10px;
}
.u-mt-2x {
margin-top: 40px;
}
.u-mt-3x {
margin-top: 60px;
}
.u-mt-4x {
margin-top: 80px;
}
.u-mt-5x {
margin-top: 100px;
}
.u-mt-6x {
margin-top: 120px;
}
.u-mt-7x {
margin-top: 140px;
}
.u-mt-8x {
margin-top: 160px;
}
.u-mt-9x {
margin-top: 180px;
}
.u-mt-10x {
margin-top: 200px;
}
.u-mt-0 {
margin-top: 0;
}
.u-mb {
margin-bottom: 20px;
}
.u-mb-quarter {
margin-bottom: 5px;
}
.u-mb-half {
margin-bottom: 10px;
}
.u-mb-2x {
margin-bottom: 40px;
}
.u-mb-3x {
margin-bottom: 60px;
}
.u-mb-4x {
margin-bottom: 80px;
}
.u-mb-5x {
margin-bottom: 100px;
}
.u-mb-6x {
margin-bottom: 120px;
}
.u-mb-7x {
margin-bottom: 140px;
}
.u-mb-8x {
margin-bottom: 160px;
}
.u-mb-9x {
margin-bottom: 180px;
}
.u-mb-10x {
margin-bottom: 200px;
}
.u-mb-0 {
margin-bottom: 0;
}
.u-ml {
margin-left: 20px;
}
.u-ml-quarter {
margin-left: 5px;
}
.u-ml-half {
margin-left: 10px;
}
.u-ml-2x {
margin-left: 40px;
}
.u-ml-3x {
margin-left: 60px;
}
.u-ml-4x {
margin-left: 80px;
}
.u-ml-5x {
margin-left: 100px;
}
.u-ml-6x {
margin-left: 120px;
}
.u-ml-7x {
margin-left: 140px;
}
.u-ml-8x {
margin-left: 160px;
}
.u-ml-9x {
margin-left: 180px;
}
.u-ml-10x {
margin-left: 200px;
}
.u-ml-0 {
margin-left: 0;
}
.u-mr {
margin-right: 20px;
}
.u-mr-quarter {
margin-right: 5px;
}
.u-mr-half {
margin-right: 10px;
}
.u-mr-2x {
margin-right: 40px;
}
.u-mr-3x {
margin-right: 60px;
}
.u-mr-4x {
margin-right: 80px;
}
.u-mr-5x {
margin-right: 100px;
}
.u-mr-6x {
margin-right: 120px;
}
.u-mr-7x {
margin-right: 140px;
}
.u-mr-8x {
margin-right: 160px;
}
.u-mr-9x {
margin-right: 180px;
}
.u-mr-10x {
margin-right: 200px;
}
.u-mr-0 {
margin-right: 0;
}
.u-my {
margin-top: 20px;
margin-bottom: 20px;
}
.u-my-quarter {
margin-top: 5px;
margin-bottom: 5px;
}
.u-my-half {
margin-top: 10px;
margin-bottom: 10px;
}
.u-my-2x {
margin-top: 40px;
margin-bottom: 40px;
}
.u-my-3x {
margin-top: 60px;
margin-bottom: 60px;
}
.u-my-4x {
margin-top: 80px;
margin-bottom: 80px;
}
.u-my-5x {
margin-top: 100px;
margin-bottom: 100px;
}
.u-my-6x {
margin-top: 120px;
margin-bottom: 120px;
}
.u-my-7x {
margin-top: 140px;
margin-bottom: 140px;
}
.u-my-8x {
margin-top: 160px;
margin-bottom: 160px;
}
.u-my-9x {
margin-top: 180px;
margin-bottom: 180px;
}
.u-my-10x {
margin-top: 200px;
margin-bottom: 200px;
}
.u-my-0 {
margin-top: 0;
margin-bottom: 0;
}
.u-mx {
margin-left: 20px;
margin-right: 20px;
}
.u-mx-quarter {
margin-left: 5px;
margin-right: 5px;
}
.u-mx-half {
margin-left: 10px;
margin-right: 10px;
}
.u-mx-2x {
margin-left: 40px;
margin-right: 40px;
}
.u-mx-3x {
margin-left: 60px;
margin-right: 60px;
}
.u-mx-4x {
margin-left: 80px;
margin-right: 80px;
}
.u-mx-5x {
margin-left: 100px;
margin-right: 100px;
}
.u-mx-6x {
margin-left: 120px;
margin-right: 120px;
}
.u-mx-7x {
margin-left: 140px;
margin-right: 140px;
}
.u-mx-8x {
margin-left: 160px;
margin-right: 160px;
}
.u-mx-9x {
margin-left: 180px;
margin-right: 180px;
}
.u-mx-10x {
margin-left: 200px;
margin-right: 200px;
}
.u-mx-0 {
margin-left: 0;
margin-right: 0;
}
@media (min-width: 375px) {
.u-p\@iphone-small {
padding: 20px;
}
.u-p-quarter\@iphone-small {
padding: 5px;
}
.u-p-half\@iphone-small {
padding: 10px;
}
.u-p-2x\@iphone-small {
padding: 40px;
}
.u-p-3x\@iphone-small {
padding: 60px;
}
.u-p-4x\@iphone-small {
padding: 80px;
}
.u-p-5x\@iphone-small {
padding: 100px;
}
.u-p-6x\@iphone-small {
padding: 120px;
}
.u-p-7x\@iphone-small {
padding: 140px;
}
.u-p-8x\@iphone-small {
padding: 160px;
}
.u-p-9x\@iphone-small {
padding: 180px;
}
.u-p-10x\@iphone-small {
padding: 200px;
}
.u-p-0\@iphone-small {
padding: 0;
}
.u-pt\@iphone-small {
padding-top: 20px;
}
.u-pt-quarter\@iphone-small {
padding-top: 5px;
}
.u-pt-half\@iphone-small {
padding-top: 10px;
}
.u-pt-2x\@iphone-small {
padding-top: 40px;
}
.u-pt-3x\@iphone-small {
padding-top: 60px;
}
.u-pt-4x\@iphone-small {
padding-top: 80px;
}
.u-pt-5x\@iphone-small {
padding-top: 100px;
}
.u-pt-6x\@iphone-small {
padding-top: 120px;
}
.u-pt-7x\@iphone-small {
padding-top: 140px;
}
.u-pt-8x\@iphone-small {
padding-top: 160px;
}
.u-pt-9x\@iphone-small {
padding-top: 180px;
}
.u-pt-10x\@iphone-small {
padding-top: 200px;
}
.u-pt-0\@iphone-small {
padding-top: 0;
}
.u-pb\@iphone-small {
padding-bottom: 20px;
}
.u-pb-quarter\@iphone-small {
padding-bottom: 5px;
}
.u-pb-half\@iphone-small {
padding-bottom: 10px;
}
.u-pb-2x\@iphone-small {
padding-bottom: 40px;
}
.u-pb-3x\@iphone-small {
padding-bottom: 60px;
}
.u-pb-4x\@iphone-small {
padding-bottom: 80px;
}
.u-pb-5x\@iphone-small {
padding-bottom: 100px;
}
.u-pb-6x\@iphone-small {
padding-bottom: 120px;
}
.u-pb-7x\@iphone-small {
padding-bottom: 140px;
}
.u-pb-8x\@iphone-small {
padding-bottom: 160px;
}
.u-pb-9x\@iphone-small {
padding-bottom: 180px;
}
.u-pb-10x\@iphone-small {
padding-bottom: 200px;
}
.u-pb-0\@iphone-small {
padding-bottom: 0;
}
.u-pl\@iphone-small {
padding-left: 20px;
}
.u-pl-quarter\@iphone-small {
padding-left: 5px;
}
.u-pl-half\@iphone-small {
padding-left: 10px;
}
.u-pl-2x\@iphone-small {
padding-left: 40px;
}
.u-pl-3x\@iphone-small {
padding-left: 60px;
}
.u-pl-4x\@iphone-small {
padding-left: 80px;
}
.u-pl-5x\@iphone-small {
padding-left: 100px;
}
.u-pl-6x\@iphone-small {
padding-left: 120px;
}
.u-pl-7x\@iphone-small {
padding-left: 140px;
}
.u-pl-8x\@iphone-small {
padding-left: 160px;
}
.u-pl-9x\@iphone-small {
padding-left: 180px;
}
.u-pl-10x\@iphone-small {
padding-left: 200px;
}
.u-pl-0\@iphone-small {
padding-left: 0;
}
.u-pr\@iphone-small {
padding-right: 20px;
}
.u-pr-quarter\@iphone-small {
padding-right: 5px;
}
.u-pr-half\@iphone-small {
padding-right: 10px;
}
.u-pr-2x\@iphone-small {
padding-right: 40px;
}
.u-pr-3x\@iphone-small {
padding-right: 60px;
}
.u-pr-4x\@iphone-small {
padding-right: 80px;
}
.u-pr-5x\@iphone-small {
padding-right: 100px;
}
.u-pr-6x\@iphone-small {
padding-right: 120px;
}
.u-pr-7x\@iphone-small {
padding-right: 140px;
}
.u-pr-8x\@iphone-small {
padding-right: 160px;
}
.u-pr-9x\@iphone-small {
padding-right: 180px;
}
.u-pr-10x\@iphone-small {
padding-right: 200px;
}
.u-pr-0\@iphone-small {
padding-right: 0;
}
.u-py\@iphone-small {
padding-top: 20px;
padding-bottom: 20px;
}
.u-py-quarter\@iphone-small {
padding-top: 5px;
padding-bottom: 5px;
}
.u-py-half\@iphone-small {
padding-top: 10px;
padding-bottom: 10px;
}
.u-py-2x\@iphone-small {
padding-top: 40px;
padding-bottom: 40px;
}
.u-py-3x\@iphone-small {
padding-top: 60px;
padding-bottom: 60px;
}
.u-py-4x\@iphone-small {
padding-top: 80px;
padding-bottom: 80px;
}
.u-py-5x\@iphone-small {
padding-top: 100px;
padding-bottom: 100px;
}
.u-py-6x\@iphone-small {
padding-top: 120px;
padding-bottom: 120px;
}
.u-py-7x\@iphone-small {
padding-top: 140px;
padding-bottom: 140px;
}
.u-py-8x\@iphone-small {
padding-top: 160px;
padding-bottom: 160px;
}
.u-py-9x\@iphone-small {
padding-top: 180px;
padding-bottom: 180px;
}
.u-py-10x\@iphone-small {
padding-top: 200px;
padding-bottom: 200px;
}
.u-py-0\@iphone-small {
padding-top: 0;
padding-bottom: 0;
}
.u-px\@iphone-small {
padding-left: 20px;
padding-right: 20px;
}
.u-px-quarter\@iphone-small {
padding-left: 5px;
padding-right: 5px;
}
.u-px-half\@iphone-small {
padding-left: 10px;
padding-right: 10px;
}
.u-px-2x\@iphone-small {
padding-left: 40px;
padding-right: 40px;
}
.u-px-3x\@iphone-small {
padding-left: 60px;
padding-right: 60px;
}
.u-px-4x\@iphone-small {
padding-left: 80px;
padding-right: 80px;
}
.u-px-5x\@iphone-small {
padding-left: 100px;
padding-right: 100px;
}
.u-px-6x\@iphone-small {
padding-left: 120px;
padding-right: 120px;
}
.u-px-7x\@iphone-small {
padding-left: 140px;
padding-right: 140px;
}
.u-px-8x\@iphone-small {
padding-left: 160px;
padding-right: 160px;
}
.u-px-9x\@iphone-small {
padding-left: 180px;
padding-right: 180px;
}
.u-px-10x\@iphone-small {
padding-left: 200px;
padding-right: 200px;
}
.u-px-0\@iphone-small {
padding-left: 0;
padding-right: 0;
}
.u-m\@iphone-small {
margin: 20px;
}
.u-m-quarter\@iphone-small {
margin: 5px;
}
.u-m-half\@iphone-small {
margin: 10px;
}
.u-m-2x\@iphone-small {
margin: 40px;
}
.u-m-3x\@iphone-small {
margin: 60px;
}
.u-m-4x\@iphone-small {
margin: 80px;
}
.u-m-5x\@iphone-small {
margin: 100px;
}
.u-m-6x\@iphone-small {
margin: 120px;
}
.u-m-7x\@iphone-small {
margin: 140px;
}
.u-m-8x\@iphone-small {
margin: 160px;
}
.u-m-9x\@iphone-small {
margin: 180px;
}
.u-m-10x\@iphone-small {
margin: 200px;
}
.u-m-0\@iphone-small {
margin: 0;
}
.u-mt\@iphone-small {
margin-top: 20px;
}
.u-mt-quarter\@iphone-small {
margin-top: 5px;
}
.u-mt-half\@iphone-small {
margin-top: 10px;
}
.u-mt-2x\@iphone-small {
margin-top: 40px;
}
.u-mt-3x\@iphone-small {
margin-top: 60px;
}
.u-mt-4x\@iphone-small {
margin-top: 80px;
}
.u-mt-5x\@iphone-small {
margin-top: 100px;
}
.u-mt-6x\@iphone-small {
margin-top: 120px;
}
.u-mt-7x\@iphone-small {
margin-top: 140px;
}
.u-mt-8x\@iphone-small {
margin-top: 160px;
}
.u-mt-9x\@iphone-small {
margin-top: 180px;
}
.u-mt-10x\@iphone-small {
margin-top: 200px;
}
.u-mt-0\@iphone-small {
margin-top: 0;
}
.u-mb\@iphone-small {
margin-bottom: 20px;
}
.u-mb-quarter\@iphone-small {
margin-bottom: 5px;
}
.u-mb-half\@iphone-small {
margin-bottom: 10px;
}
.u-mb-2x\@iphone-small {
margin-bottom: 40px;
}
.u-mb-3x\@iphone-small {
margin-bottom: 60px;
}
.u-mb-4x\@iphone-small {
margin-bottom: 80px;
}
.u-mb-5x\@iphone-small {
margin-bottom: 100px;
}
.u-mb-6x\@iphone-small {
margin-bottom: 120px;
}
.u-mb-7x\@iphone-small {
margin-bottom: 140px;
}
.u-mb-8x\@iphone-small {
margin-bottom: 160px;
}
.u-mb-9x\@iphone-small {
margin-bottom: 180px;
}
.u-mb-10x\@iphone-small {
margin-bottom: 200px;
}
.u-mb-0\@iphone-small {
margin-bottom: 0;
}
.u-ml\@iphone-small {
margin-left: 20px;
}
.u-ml-quarter\@iphone-small {
margin-left: 5px;
}
.u-ml-half\@iphone-small {
margin-left: 10px;
}
.u-ml-2x\@iphone-small {
margin-left: 40px;
}
.u-ml-3x\@iphone-small {
margin-left: 60px;
}
.u-ml-4x\@iphone-small {
margin-left: 80px;
}
.u-ml-5x\@iphone-small {
margin-left: 100px;
}
.u-ml-6x\@iphone-small {
margin-left: 120px;
}
.u-ml-7x\@iphone-small {
margin-left: 140px;
}
.u-ml-8x\@iphone-small {
margin-left: 160px;
}
.u-ml-9x\@iphone-small {
margin-left: 180px;
}
.u-ml-10x\@iphone-small {
margin-left: 200px;
}
.u-ml-0\@iphone-small {
margin-left: 0;
}
.u-mr\@iphone-small {
margin-right: 20px;
}
.u-mr-quarter\@iphone-small {
margin-right: 5px;
}
.u-mr-half\@iphone-small {
margin-right: 10px;
}
.u-mr-2x\@iphone-small {
margin-right: 40px;
}
.u-mr-3x\@iphone-small {
margin-right: 60px;
}
.u-mr-4x\@iphone-small {
margin-right: 80px;
}
.u-mr-5x\@iphone-small {
margin-right: 100px;
}
.u-mr-6x\@iphone-small {
margin-right: 120px;
}
.u-mr-7x\@iphone-small {
margin-right: 140px;
}
.u-mr-8x\@iphone-small {
margin-right: 160px;
}
.u-mr-9x\@iphone-small {
margin-right: 180px;
}
.u-mr-10x\@iphone-small {
margin-right: 200px;
}
.u-mr-0\@iphone-small {
margin-right: 0;
}
.u-my\@iphone-small {
margin-top: 20px;
margin-bottom: 20px;
}
.u-my-quarter\@iphone-small {
margin-top: 5px;
margin-bottom: 5px;
}
.u-my-half\@iphone-small {
margin-top: 10px;
margin-bottom: 10px;
}
.u-my-2x\@iphone-small {
margin-top: 40px;
margin-bottom: 40px;
}
.u-my-3x\@iphone-small {
margin-top: 60px;
margin-bottom: 60px;
}
.u-my-4x\@iphone-small {
margin-top: 80px;
margin-bottom: 80px;
}
.u-my-5x\@iphone-small {
margin-top: 100px;
margin-bottom: 100px;
}
.u-my-6x\@iphone-small {
margin-top: 120px;
margin-bottom: 120px;
}
.u-my-7x\@iphone-small {
margin-top: 140px;
margin-bottom: 140px;
}
.u-my-8x\@iphone-small {
margin-top: 160px;
margin-bottom: 160px;
}
.u-my-9x\@iphone-small {
margin-top: 180px;
margin-bottom: 180px;
}
.u-my-10x\@iphone-small {
margin-top: 200px;
margin-bottom: 200px;
}
.u-my-0\@iphone-small {
margin-top: 0;
margin-bottom: 0;
}
.u-mx\@iphone-small {
margin-left: 20px;
margin-right: 20px;
}
.u-mx-quarter\@iphone-small {
margin-left: 5px;
margin-right: 5px;
}
.u-mx-half\@iphone-small {
margin-left: 10px;
margin-right: 10px;
}
.u-mx-2x\@iphone-small {
margin-left: 40px;
margin-right: 40px;
}
.u-mx-3x\@iphone-small {
margin-left: 60px;
margin-right: 60px;
}
.u-mx-4x\@iphone-small {
margin-left: 80px;
margin-right: 80px;
}
.u-mx-5x\@iphone-small {
margin-left: 100px;
margin-right: 100px;
}
.u-mx-6x\@iphone-small {
margin-left: 120px;
margin-right: 120px;
}
.u-mx-7x\@iphone-small {
margin-left: 140px;
margin-right: 140px;
}
.u-mx-8x\@iphone-small {
margin-left: 160px;
margin-right: 160px;
}
.u-mx-9x\@iphone-small {
margin-left: 180px;
margin-right: 180px;
}
.u-mx-10x\@iphone-small {
margin-left: 200px;
margin-right: 200px;
}
.u-mx-0\@iphone-small {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 640px) {
.u-p\@iphone-max {
padding: 20px;
}
.u-p-quarter\@iphone-max {
padding: 5px;
}
.u-p-half\@iphone-max {
padding: 10px;
}
.u-p-2x\@iphone-max {
padding: 40px;
}
.u-p-3x\@iphone-max {
padding: 60px;
}
.u-p-4x\@iphone-max {
padding: 80px;
}
.u-p-5x\@iphone-max {
padding: 100px;
}
.u-p-6x\@iphone-max {
padding: 120px;
}
.u-p-7x\@iphone-max {
padding: 140px;
}
.u-p-8x\@iphone-max {
padding: 160px;
}
.u-p-9x\@iphone-max {
padding: 180px;
}
.u-p-10x\@iphone-max {
padding: 200px;
}
.u-p-0\@iphone-max {
padding: 0;
}
.u-pt\@iphone-max {
padding-top: 20px;
}
.u-pt-quarter\@iphone-max {
padding-top: 5px;
}
.u-pt-half\@iphone-max {
padding-top: 10px;
}
.u-pt-2x\@iphone-max {
padding-top: 40px;
}
.u-pt-3x\@iphone-max {
padding-top: 60px;
}
.u-pt-4x\@iphone-max {
padding-top: 80px;
}
.u-pt-5x\@iphone-max {
padding-top: 100px;
}
.u-pt-6x\@iphone-max {
padding-top: 120px;
}
.u-pt-7x\@iphone-max {
padding-top: 140px;
}
.u-pt-8x\@iphone-max {
padding-top: 160px;
}
.u-pt-9x\@iphone-max {
padding-top: 180px;
}
.u-pt-10x\@iphone-max {
padding-top: 200px;
}
.u-pt-0\@iphone-max {
padding-top: 0;
}
.u-pb\@iphone-max {
padding-bottom: 20px;
}
.u-pb-quarter\@iphone-max {
padding-bottom: 5px;
}
.u-pb-half\@iphone-max {
padding-bottom: 10px;
}
.u-pb-2x\@iphone-max {
padding-bottom: 40px;
}
.u-pb-3x\@iphone-max {
padding-bottom: 60px;
}
.u-pb-4x\@iphone-max {
padding-bottom: 80px;
}
.u-pb-5x\@iphone-max {
padding-bottom: 100px;
}
.u-pb-6x\@iphone-max {
padding-bottom: 120px;
}
.u-pb-7x\@iphone-max {
padding-bottom: 140px;
}
.u-pb-8x\@iphone-max {
padding-bottom: 160px;
}
.u-pb-9x\@iphone-max {
padding-bottom: 180px;
}
.u-pb-10x\@iphone-max {
padding-bottom: 200px;
}
.u-pb-0\@iphone-max {
padding-bottom: 0;
}
.u-pl\@iphone-max {
padding-left: 20px;
}
.u-pl-quarter\@iphone-max {
padding-left: 5px;
}
.u-pl-half\@iphone-max {
padding-left: 10px;
}
.u-pl-2x\@iphone-max {
padding-left: 40px;
}
.u-pl-3x\@iphone-max {
padding-left: 60px;
}
.u-pl-4x\@iphone-max {
padding-left: 80px;
}
.u-pl-5x\@iphone-max {
padding-left: 100px;
}
.u-pl-6x\@iphone-max {
padding-left: 120px;
}
.u-pl-7x\@iphone-max {
padding-left: 140px;
}
.u-pl-8x\@iphone-max {
padding-left: 160px;
}
.u-pl-9x\@iphone-max {
padding-left: 180px;
}
.u-pl-10x\@iphone-max {
padding-left: 200px;
}
.u-pl-0\@iphone-max {
padding-left: 0;
}
.u-pr\@iphone-max {
padding-right: 20px;
}
.u-pr-quarter\@iphone-max {
padding-right: 5px;
}
.u-pr-half\@iphone-max {
padding-right: 10px;
}
.u-pr-2x\@iphone-max {
padding-right: 40px;
}
.u-pr-3x\@iphone-max {
padding-right: 60px;
}
.u-pr-4x\@iphone-max {
padding-right: 80px;
}
.u-pr-5x\@iphone-max {
padding-right: 100px;
}
.u-pr-6x\@iphone-max {
padding-right: 120px;
}
.u-pr-7x\@iphone-max {
padding-right: 140px;
}
.u-pr-8x\@iphone-max {
padding-right: 160px;
}
.u-pr-9x\@iphone-max {
padding-right: 180px;
}
.u-pr-10x\@iphone-max {
padding-right: 200px;
}
.u-pr-0\@iphone-max {
padding-right: 0;
}
.u-py\@iphone-max {
padding-top: 20px;
padding-bottom: 20px;
}
.u-py-quarter\@iphone-max {
padding-top: 5px;
padding-bottom: 5px;
}
.u-py-half\@iphone-max {
padding-top: 10px;
padding-bottom: 10px;
}
.u-py-2x\@iphone-max {
padding-top: 40px;
padding-bottom: 40px;
}
.u-py-3x\@iphone-max {
padding-top: 60px;
padding-bottom: 60px;
}
.u-py-4x\@iphone-max {
padding-top: 80px;
padding-bottom: 80px;
}
.u-py-5x\@iphone-max {
padding-top: 100px;
padding-bottom: 100px;
}
.u-py-6x\@iphone-max {
padding-top: 120px;
padding-bottom: 120px;
}
.u-py-7x\@iphone-max {
padding-top: 140px;
padding-bottom: 140px;
}
.u-py-8x\@iphone-max {
padding-top: 160px;
padding-bottom: 160px;
}
.u-py-9x\@iphone-max {
padding-top: 180px;
padding-bottom: 180px;
}
.u-py-10x\@iphone-max {
padding-top: 200px;
padding-bottom: 200px;
}
.u-py-0\@iphone-max {
padding-top: 0;
padding-bottom: 0;
}
.u-px\@iphone-max {
padding-left: 20px;
padding-right: 20px;
}
.u-px-quarter\@iphone-max {
padding-left: 5px;
padding-right: 5px;
}
.u-px-half\@iphone-max {
padding-left: 10px;
padding-right: 10px;
}
.u-px-2x\@iphone-max {
padding-left: 40px;
padding-right: 40px;
}
.u-px-3x\@iphone-max {
padding-left: 60px;
padding-right: 60px;
}
.u-px-4x\@iphone-max {
padding-left: 80px;
padding-right: 80px;
}
.u-px-5x\@iphone-max {
padding-left: 100px;
padding-right: 100px;
}
.u-px-6x\@iphone-max {
padding-left: 120px;
padding-right: 120px;
}
.u-px-7x\@iphone-max {
padding-left: 140px;
padding-right: 140px;
}
.u-px-8x\@iphone-max {
padding-left: 160px;
padding-right: 160px;
}
.u-px-9x\@iphone-max {
padding-left: 180px;
padding-right: 180px;
}
.u-px-10x\@iphone-max {
padding-left: 200px;
padding-right: 200px;
}
.u-px-0\@iphone-max {
padding-left: 0;
padding-right: 0;
}
.u-m\@iphone-max {
margin: 20px;
}
.u-m-quarter\@iphone-max {
margin: 5px;
}
.u-m-half\@iphone-max {
margin: 10px;
}
.u-m-2x\@iphone-max {
margin: 40px;
}
.u-m-3x\@iphone-max {
margin: 60px;
}
.u-m-4x\@iphone-max {
margin: 80px;
}
.u-m-5x\@iphone-max {
margin: 100px;
}
.u-m-6x\@iphone-max {
margin: 120px;
}
.u-m-7x\@iphone-max {
margin: 140px;
}
.u-m-8x\@iphone-max {
margin: 160px;
}
.u-m-9x\@iphone-max {
margin: 180px;
}
.u-m-10x\@iphone-max {
margin: 200px;
}
.u-m-0\@iphone-max {
margin: 0;
}
.u-mt\@iphone-max {
margin-top: 20px;
}
.u-mt-quarter\@iphone-max {
margin-top: 5px;
}
.u-mt-half\@iphone-max {
margin-top: 10px;
}
.u-mt-2x\@iphone-max {
margin-top: 40px;
}
.u-mt-3x\@iphone-max {
margin-top: 60px;
}
.u-mt-4x\@iphone-max {
margin-top: 80px;
}
.u-mt-5x\@iphone-max {
margin-top: 100px;
}
.u-mt-6x\@iphone-max {
margin-top: 120px;
}
.u-mt-7x\@iphone-max {
margin-top: 140px;
}
.u-mt-8x\@iphone-max {
margin-top: 160px;
}
.u-mt-9x\@iphone-max {
margin-top: 180px;
}
.u-mt-10x\@iphone-max {
margin-top: 200px;
}
.u-mt-0\@iphone-max {
margin-top: 0;
}
.u-mb\@iphone-max {
margin-bottom: 20px;
}
.u-mb-quarter\@iphone-max {
margin-bottom: 5px;
}
.u-mb-half\@iphone-max {
margin-bottom: 10px;
}
.u-mb-2x\@iphone-max {
margin-bottom: 40px;
}
.u-mb-3x\@iphone-max {
margin-bottom: 60px;
}
.u-mb-4x\@iphone-max {
margin-bottom: 80px;
}
.u-mb-5x\@iphone-max {
margin-bottom: 100px;
}
.u-mb-6x\@iphone-max {
margin-bottom: 120px;
}
.u-mb-7x\@iphone-max {
margin-bottom: 140px;
}
.u-mb-8x\@iphone-max {
margin-bottom: 160px;
}
.u-mb-9x\@iphone-max {
margin-bottom: 180px;
}
.u-mb-10x\@iphone-max {
margin-bottom: 200px;
}
.u-mb-0\@iphone-max {
margin-bottom: 0;
}
.u-ml\@iphone-max {
margin-left: 20px;
}
.u-ml-quarter\@iphone-max {
margin-left: 5px;
}
.u-ml-half\@iphone-max {
margin-left: 10px;
}
.u-ml-2x\@iphone-max {
margin-left: 40px;
}
.u-ml-3x\@iphone-max {
margin-left: 60px;
}
.u-ml-4x\@iphone-max {
margin-left: 80px;
}
.u-ml-5x\@iphone-max {
margin-left: 100px;
}
.u-ml-6x\@iphone-max {
margin-left: 120px;
}
.u-ml-7x\@iphone-max {
margin-left: 140px;
}
.u-ml-8x\@iphone-max {
margin-left: 160px;
}
.u-ml-9x\@iphone-max {
margin-left: 180px;
}
.u-ml-10x\@iphone-max {
margin-left: 200px;
}
.u-ml-0\@iphone-max {
margin-left: 0;
}
.u-mr\@iphone-max {
margin-right: 20px;
}
.u-mr-quarter\@iphone-max {
margin-right: 5px;
}
.u-mr-half\@iphone-max {
margin-right: 10px;
}
.u-mr-2x\@iphone-max {
margin-right: 40px;
}
.u-mr-3x\@iphone-max {
margin-right: 60px;
}
.u-mr-4x\@iphone-max {
margin-right: 80px;
}
.u-mr-5x\@iphone-max {
margin-right: 100px;
}
.u-mr-6x\@iphone-max {
margin-right: 120px;
}
.u-mr-7x\@iphone-max {
margin-right: 140px;
}
.u-mr-8x\@iphone-max {
margin-right: 160px;
}
.u-mr-9x\@iphone-max {
margin-right: 180px;
}
.u-mr-10x\@iphone-max {
margin-right: 200px;
}
.u-mr-0\@iphone-max {
margin-right: 0;
}
.u-my\@iphone-max {
margin-top: 20px;
margin-bottom: 20px;
}
.u-my-quarter\@iphone-max {
margin-top: 5px;
margin-bottom: 5px;
}
.u-my-half\@iphone-max {
margin-top: 10px;
margin-bottom: 10px;
}
.u-my-2x\@iphone-max {
margin-top: 40px;
margin-bottom: 40px;
}
.u-my-3x\@iphone-max {
margin-top: 60px;
margin-bottom: 60px;
}
.u-my-4x\@iphone-max {
margin-top: 80px;
margin-bottom: 80px;
}
.u-my-5x\@iphone-max {
margin-top: 100px;
margin-bottom: 100px;
}
.u-my-6x\@iphone-max {
margin-top: 120px;
margin-bottom: 120px;
}
.u-my-7x\@iphone-max {
margin-top: 140px;
margin-bottom: 140px;
}
.u-my-8x\@iphone-max {
margin-top: 160px;
margin-bottom: 160px;
}
.u-my-9x\@iphone-max {
margin-top: 180px;
margin-bottom: 180px;
}
.u-my-10x\@iphone-max {
margin-top: 200px;
margin-bottom: 200px;
}
.u-my-0\@iphone-max {
margin-top: 0;
margin-bottom: 0;
}
.u-mx\@iphone-max {
margin-left: 20px;
margin-right: 20px;
}
.u-mx-quarter\@iphone-max {
margin-left: 5px;
margin-right: 5px;
}
.u-mx-half\@iphone-max {
margin-left: 10px;
margin-right: 10px;
}
.u-mx-2x\@iphone-max {
margin-left: 40px;
margin-right: 40px;
}
.u-mx-3x\@iphone-max {
margin-left: 60px;
margin-right: 60px;
}
.u-mx-4x\@iphone-max {
margin-left: 80px;
margin-right: 80px;
}
.u-mx-5x\@iphone-max {
margin-left: 100px;
margin-right: 100px;
}
.u-mx-6x\@iphone-max {
margin-left: 120px;
margin-right: 120px;
}
.u-mx-7x\@iphone-max {
margin-left: 140px;
margin-right: 140px;
}
.u-mx-8x\@iphone-max {
margin-left: 160px;
margin-right: 160px;
}
.u-mx-9x\@iphone-max {
margin-left: 180px;
margin-right: 180px;
}
.u-mx-10x\@iphone-max {
margin-left: 200px;
margin-right: 200px;
}
.u-mx-0\@iphone-max {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 768px) {
.u-p\@ipad {
padding: 20px;
}
.u-p-quarter\@ipad {
padding: 5px;
}
.u-p-half\@ipad {
padding: 10px;
}
.u-p-2x\@ipad {
padding: 40px;
}
.u-p-3x\@ipad {
padding: 60px;
}
.u-p-4x\@ipad {
padding: 80px;
}
.u-p-5x\@ipad {
padding: 100px;
}
.u-p-6x\@ipad {
padding: 120px;
}
.u-p-7x\@ipad {
padding: 140px;
}
.u-p-8x\@ipad {
padding: 160px;
}
.u-p-9x\@ipad {
padding: 180px;
}
.u-p-10x\@ipad {
padding: 200px;
}
.u-p-0\@ipad {
padding: 0;
}
.u-pt\@ipad {
padding-top: 20px;
}
.u-pt-quarter\@ipad {
padding-top: 5px;
}
.u-pt-half\@ipad {
padding-top: 10px;
}
.u-pt-2x\@ipad {
padding-top: 40px;
}
.u-pt-3x\@ipad {
padding-top: 60px;
}
.u-pt-4x\@ipad {
padding-top: 80px;
}
.u-pt-5x\@ipad {
padding-top: 100px;
}
.u-pt-6x\@ipad {
padding-top: 120px;
}
.u-pt-7x\@ipad {
padding-top: 140px;
}
.u-pt-8x\@ipad {
padding-top: 160px;
}
.u-pt-9x\@ipad {
padding-top: 180px;
}
.u-pt-10x\@ipad {
padding-top: 200px;
}
.u-pt-0\@ipad {
padding-top: 0;
}
.u-pb\@ipad {
padding-bottom: 20px;
}
.u-pb-quarter\@ipad {
padding-bottom: 5px;
}
.u-pb-half\@ipad {
padding-bottom: 10px;
}
.u-pb-2x\@ipad {
padding-bottom: 40px;
}
.u-pb-3x\@ipad {
padding-bottom: 60px;
}
.u-pb-4x\@ipad {
padding-bottom: 80px;
}
.u-pb-5x\@ipad {
padding-bottom: 100px;
}
.u-pb-6x\@ipad {
padding-bottom: 120px;
}
.u-pb-7x\@ipad {
padding-bottom: 140px;
}
.u-pb-8x\@ipad {
padding-bottom: 160px;
}
.u-pb-9x\@ipad {
padding-bottom: 180px;
}
.u-pb-10x\@ipad {
padding-bottom: 200px;
}
.u-pb-0\@ipad {
padding-bottom: 0;
}
.u-pl\@ipad {
padding-left: 20px;
}
.u-pl-quarter\@ipad {
padding-left: 5px;
}
.u-pl-half\@ipad {
padding-left: 10px;
}
.u-pl-2x\@ipad {
padding-left: 40px;
}
.u-pl-3x\@ipad {
padding-left: 60px;
}
.u-pl-4x\@ipad {
padding-left: 80px;
}
.u-pl-5x\@ipad {
padding-left: 100px;
}
.u-pl-6x\@ipad {
padding-left: 120px;
}
.u-pl-7x\@ipad {
padding-left: 140px;
}
.u-pl-8x\@ipad {
padding-left: 160px;
}
.u-pl-9x\@ipad {
padding-left: 180px;
}
.u-pl-10x\@ipad {
padding-left: 200px;
}
.u-pl-0\@ipad {
padding-left: 0;
}
.u-pr\@ipad {
padding-right: 20px;
}
.u-pr-quarter\@ipad {
padding-right: 5px;
}
.u-pr-half\@ipad {
padding-right: 10px;
}
.u-pr-2x\@ipad {
padding-right: 40px;
}
.u-pr-3x\@ipad {
padding-right: 60px;
}
.u-pr-4x\@ipad {
padding-right: 80px;
}
.u-pr-5x\@ipad {
padding-right: 100px;
}
.u-pr-6x\@ipad {
padding-right: 120px;
}
.u-pr-7x\@ipad {
padding-right: 140px;
}
.u-pr-8x\@ipad {
padding-right: 160px;
}
.u-pr-9x\@ipad {
padding-right: 180px;
}
.u-pr-10x\@ipad {
padding-right: 200px;
}
.u-pr-0\@ipad {
padding-right: 0;
}
.u-py\@ipad {
padding-top: 20px;
padding-bottom: 20px;
}
.u-py-quarter\@ipad {
padding-top: 5px;
padding-bottom: 5px;
}
.u-py-half\@ipad {
padding-top: 10px;
padding-bottom: 10px;
}
.u-py-2x\@ipad {
padding-top: 40px;
padding-bottom: 40px;
}
.u-py-3x\@ipad {
padding-top: 60px;
padding-bottom: 60px;
}
.u-py-4x\@ipad {
padding-top: 80px;
padding-bottom: 80px;
}
.u-py-5x\@ipad {
padding-top: 100px;
padding-bottom: 100px;
}
.u-py-6x\@ipad {
padding-top: 120px;
padding-bottom: 120px;
}
.u-py-7x\@ipad {
padding-top: 140px;
padding-bottom: 140px;
}
.u-py-8x\@ipad {
padding-top: 160px;
padding-bottom: 160px;
}
.u-py-9x\@ipad {
padding-top: 180px;
padding-bottom: 180px;
}
.u-py-10x\@ipad {
padding-top: 200px;
padding-bottom: 200px;
}
.u-py-0\@ipad {
padding-top: 0;
padding-bottom: 0;
}
.u-px\@ipad {
padding-left: 20px;
padding-right: 20px;
}
.u-px-quarter\@ipad {
padding-left: 5px;
padding-right: 5px;
}
.u-px-half\@ipad {
padding-left: 10px;
padding-right: 10px;
}
.u-px-2x\@ipad {
padding-left: 40px;
padding-right: 40px;
}
.u-px-3x\@ipad {
padding-left: 60px;
padding-right: 60px;
}
.u-px-4x\@ipad {
padding-left: 80px;
padding-right: 80px;
}
.u-px-5x\@ipad {
padding-left: 100px;
padding-right: 100px;
}
.u-px-6x\@ipad {
padding-left: 120px;
padding-right: 120px;
}
.u-px-7x\@ipad {
padding-left: 140px;
padding-right: 140px;
}
.u-px-8x\@ipad {
padding-left: 160px;
padding-right: 160px;
}
.u-px-9x\@ipad {
padding-left: 180px;
padding-right: 180px;
}
.u-px-10x\@ipad {
padding-left: 200px;
padding-right: 200px;
}
.u-px-0\@ipad {
padding-left: 0;
padding-right: 0;
}
.u-m\@ipad {
margin: 20px;
}
.u-m-quarter\@ipad {
margin: 5px;
}
.u-m-half\@ipad {
margin: 10px;
}
.u-m-2x\@ipad {
margin: 40px;
}
.u-m-3x\@ipad {
margin: 60px;
}
.u-m-4x\@ipad {
margin: 80px;
}
.u-m-5x\@ipad {
margin: 100px;
}
.u-m-6x\@ipad {
margin: 120px;
}
.u-m-7x\@ipad {
margin: 140px;
}
.u-m-8x\@ipad {
margin: 160px;
}
.u-m-9x\@ipad {
margin: 180px;
}
.u-m-10x\@ipad {
margin: 200px;
}
.u-m-0\@ipad {
margin: 0;
}
.u-mt\@ipad {
margin-top: 20px;
}
.u-mt-quarter\@ipad {
margin-top: 5px;
}
.u-mt-half\@ipad {
margin-top: 10px;
}
.u-mt-2x\@ipad {
margin-top: 40px;
}
.u-mt-3x\@ipad {
margin-top: 60px;
}
.u-mt-4x\@ipad {
margin-top: 80px;
}
.u-mt-5x\@ipad {
margin-top: 100px;
}
.u-mt-6x\@ipad {
margin-top: 120px;
}
.u-mt-7x\@ipad {
margin-top: 140px;
}
.u-mt-8x\@ipad {
margin-top: 160px;
}
.u-mt-9x\@ipad {
margin-top: 180px;
}
.u-mt-10x\@ipad {
margin-top: 200px;
}
.u-mt-0\@ipad {
margin-top: 0;
}
.u-mb\@ipad {
margin-bottom: 20px;
}
.u-mb-quarter\@ipad {
margin-bottom: 5px;
}
.u-mb-half\@ipad {
margin-bottom: 10px;
}
.u-mb-2x\@ipad {
margin-bottom: 40px;
}
.u-mb-3x\@ipad {
margin-bottom: 60px;
}
.u-mb-4x\@ipad {
margin-bottom: 80px;
}
.u-mb-5x\@ipad {
margin-bottom: 100px;
}
.u-mb-6x\@ipad {
margin-bottom: 120px;
}
.u-mb-7x\@ipad {
margin-bottom: 140px;
}
.u-mb-8x\@ipad {
margin-bottom: 160px;
}
.u-mb-9x\@ipad {
margin-bottom: 180px;
}
.u-mb-10x\@ipad {
margin-bottom: 200px;
}
.u-mb-0\@ipad {
margin-bottom: 0;
}
.u-ml\@ipad {
margin-left: 20px;
}
.u-ml-quarter\@ipad {
margin-left: 5px;
}
.u-ml-half\@ipad {
margin-left: 10px;
}
.u-ml-2x\@ipad {
margin-left: 40px;
}
.u-ml-3x\@ipad {
margin-left: 60px;
}
.u-ml-4x\@ipad {
margin-left: 80px;
}
.u-ml-5x\@ipad {
margin-left: 100px;
}
.u-ml-6x\@ipad {
margin-left: 120px;
}
.u-ml-7x\@ipad {
margin-left: 140px;
}
.u-ml-8x\@ipad {
margin-left: 160px;
}
.u-ml-9x\@ipad {
margin-left: 180px;
}
.u-ml-10x\@ipad {
margin-left: 200px;
}
.u-ml-0\@ipad {
margin-left: 0;
}
.u-mr\@ipad {
margin-right: 20px;
}
.u-mr-quarter\@ipad {
margin-right: 5px;
}
.u-mr-half\@ipad {
margin-right: 10px;
}
.u-mr-2x\@ipad {
margin-right: 40px;
}
.u-mr-3x\@ipad {
margin-right: 60px;
}
.u-mr-4x\@ipad {
margin-right: 80px;
}
.u-mr-5x\@ipad {
margin-right: 100px;
}
.u-mr-6x\@ipad {
margin-right: 120px;
}
.u-mr-7x\@ipad {
margin-right: 140px;
}
.u-mr-8x\@ipad {
margin-right: 160px;
}
.u-mr-9x\@ipad {
margin-right: 180px;
}
.u-mr-10x\@ipad {
margin-right: 200px;
}
.u-mr-0\@ipad {
margin-right: 0;
}
.u-my\@ipad {
margin-top: 20px;
margin-bottom: 20px;
}
.u-my-quarter\@ipad {
margin-top: 5px;
margin-bottom: 5px;
}
.u-my-half\@ipad {
margin-top: 10px;
margin-bottom: 10px;
}
.u-my-2x\@ipad {
margin-top: 40px;
margin-bottom: 40px;
}
.u-my-3x\@ipad {
margin-top: 60px;
margin-bottom: 60px;
}
.u-my-4x\@ipad {
margin-top: 80px;
margin-bottom: 80px;
}
.u-my-5x\@ipad {
margin-top: 100px;
margin-bottom: 100px;
}
.u-my-6x\@ipad {
margin-top: 120px;
margin-bottom: 120px;
}
.u-my-7x\@ipad {
margin-top: 140px;
margin-bottom: 140px;
}
.u-my-8x\@ipad {
margin-top: 160px;
margin-bottom: 160px;
}
.u-my-9x\@ipad {
margin-top: 180px;
margin-bottom: 180px;
}
.u-my-10x\@ipad {
margin-top: 200px;
margin-bottom: 200px;
}
.u-my-0\@ipad {
margin-top: 0;
margin-bottom: 0;
}
.u-mx\@ipad {
margin-left: 20px;
margin-right: 20px;
}
.u-mx-quarter\@ipad {
margin-left: 5px;
margin-right: 5px;
}
.u-mx-half\@ipad {
margin-left: 10px;
margin-right: 10px;
}
.u-mx-2x\@ipad {
margin-left: 40px;
margin-right: 40px;
}
.u-mx-3x\@ipad {
margin-left: 60px;
margin-right: 60px;
}
.u-mx-4x\@ipad {
margin-left: 80px;
margin-right: 80px;
}
.u-mx-5x\@ipad {
margin-left: 100px;
margin-right: 100px;
}
.u-mx-6x\@ipad {
margin-left: 120px;
margin-right: 120px;
}
.u-mx-7x\@ipad {
margin-left: 140px;
margin-right: 140px;
}
.u-mx-8x\@ipad {
margin-left: 160px;
margin-right: 160px;
}
.u-mx-9x\@ipad {
margin-left: 180px;
margin-right: 180px;
}
.u-mx-10x\@ipad {
margin-left: 200px;
margin-right: 200px;
}
.u-mx-0\@ipad {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 769px) {
.u-p\@checkout {
padding: 20px;
}
.u-p-quarter\@checkout {
padding: 5px;
}
.u-p-half\@checkout {
padding: 10px;
}
.u-p-2x\@checkout {
padding: 40px;
}
.u-p-3x\@checkout {
padding: 60px;
}
.u-p-4x\@checkout {
padding: 80px;
}
.u-p-5x\@checkout {
padding: 100px;
}
.u-p-6x\@checkout {
padding: 120px;
}
.u-p-7x\@checkout {
padding: 140px;
}
.u-p-8x\@checkout {
padding: 160px;
}
.u-p-9x\@checkout {
padding: 180px;
}
.u-p-10x\@checkout {
padding: 200px;
}
.u-p-0\@checkout {
padding: 0;
}
.u-pt\@checkout {
padding-top: 20px;
}
.u-pt-quarter\@checkout {
padding-top: 5px;
}
.u-pt-half\@checkout {
padding-top: 10px;
}
.u-pt-2x\@checkout {
padding-top: 40px;
}
.u-pt-3x\@checkout {
padding-top: 60px;
}
.u-pt-4x\@checkout {
padding-top: 80px;
}
.u-pt-5x\@checkout {
padding-top: 100px;
}
.u-pt-6x\@checkout {
padding-top: 120px;
}
.u-pt-7x\@checkout {
padding-top: 140px;
}
.u-pt-8x\@checkout {
padding-top: 160px;
}
.u-pt-9x\@checkout {
padding-top: 180px;
}
.u-pt-10x\@checkout {
padding-top: 200px;
}
.u-pt-0\@checkout {
padding-top: 0;
}
.u-pb\@checkout {
padding-bottom: 20px;
}
.u-pb-quarter\@checkout {
padding-bottom: 5px;
}
.u-pb-half\@checkout {
padding-bottom: 10px;
}
.u-pb-2x\@checkout {
padding-bottom: 40px;
}
.u-pb-3x\@checkout {
padding-bottom: 60px;
}
.u-pb-4x\@checkout {
padding-bottom: 80px;
}
.u-pb-5x\@checkout {
padding-bottom: 100px;
}
.u-pb-6x\@checkout {
padding-bottom: 120px;
}
.u-pb-7x\@checkout {
padding-bottom: 140px;
}
.u-pb-8x\@checkout {
padding-bottom: 160px;
}
.u-pb-9x\@checkout {
padding-bottom: 180px;
}
.u-pb-10x\@checkout {
padding-bottom: 200px;
}
.u-pb-0\@checkout {
padding-bottom: 0;
}
.u-pl\@checkout {
padding-left: 20px;
}
.u-pl-quarter\@checkout {
padding-left: 5px;
}
.u-pl-half\@checkout {
padding-left: 10px;
}
.u-pl-2x\@checkout {
padding-left: 40px;
}
.u-pl-3x\@checkout {
padding-left: 60px;
}
.u-pl-4x\@checkout {
padding-left: 80px;
}
.u-pl-5x\@checkout {
padding-left: 100px;
}
.u-pl-6x\@checkout {
padding-left: 120px;
}
.u-pl-7x\@checkout {
padding-left: 140px;
}
.u-pl-8x\@checkout {
padding-left: 160px;
}
.u-pl-9x\@checkout {
padding-left: 180px;
}
.u-pl-10x\@checkout {
padding-left: 200px;
}
.u-pl-0\@checkout {
padding-left: 0;
}
.u-pr\@checkout {
padding-right: 20px;
}
.u-pr-quarter\@checkout {
padding-right: 5px;
}
.u-pr-half\@checkout {
padding-right: 10px;
}
.u-pr-2x\@checkout {
padding-right: 40px;
}
.u-pr-3x\@checkout {
padding-right: 60px;
}
.u-pr-4x\@checkout {
padding-right: 80px;
}
.u-pr-5x\@checkout {
padding-right: 100px;
}
.u-pr-6x\@checkout {
padding-right: 120px;
}
.u-pr-7x\@checkout {
padding-right: 140px;
}
.u-pr-8x\@checkout {
padding-right: 160px;
}
.u-pr-9x\@checkout {
padding-right: 180px;
}
.u-pr-10x\@checkout {
padding-right: 200px;
}
.u-pr-0\@checkout {
padding-right: 0;
}
.u-py\@checkout {
padding-top: 20px;
padding-bottom: 20px;
}
.u-py-quarter\@checkout {
padding-top: 5px;
padding-bottom: 5px;
}
.u-py-half\@checkout {
padding-top: 10px;
padding-bottom: 10px;
}
.u-py-2x\@checkout {
padding-top: 40px;
padding-bottom: 40px;
}
.u-py-3x\@checkout {
padding-top: 60px;
padding-bottom: 60px;
}
.u-py-4x\@checkout {
padding-top: 80px;
padding-bottom: 80px;
}
.u-py-5x\@checkout {
padding-top: 100px;
padding-bottom: 100px;
}
.u-py-6x\@checkout {
padding-top: 120px;
padding-bottom: 120px;
}
.u-py-7x\@checkout {
padding-top: 140px;
padding-bottom: 140px;
}
.u-py-8x\@checkout {
padding-top: 160px;
padding-bottom: 160px;
}
.u-py-9x\@checkout {
padding-top: 180px;
padding-bottom: 180px;
}
.u-py-10x\@checkout {
padding-top: 200px;
padding-bottom: 200px;
}
.u-py-0\@checkout {
padding-top: 0;
padding-bottom: 0;
}
.u-px\@checkout {
padding-left: 20px;
padding-right: 20px;
}
.u-px-quarter\@checkout {
padding-left: 5px;
padding-right: 5px;
}
.u-px-half\@checkout {
padding-left: 10px;
padding-right: 10px;
}
.u-px-2x\@checkout {
padding-left: 40px;
padding-right: 40px;
}
.u-px-3x\@checkout {
padding-left: 60px;
padding-right: 60px;
}
.u-px-4x\@checkout {
padding-left: 80px;
padding-right: 80px;
}
.u-px-5x\@checkout {
padding-left: 100px;
padding-right: 100px;
}
.u-px-6x\@checkout {
padding-left: 120px;
padding-right: 120px;
}
.u-px-7x\@checkout {
padding-left: 140px;
padding-right: 140px;
}
.u-px-8x\@checkout {
padding-left: 160px;
padding-right: 160px;
}
.u-px-9x\@checkout {
padding-left: 180px;
padding-right: 180px;
}
.u-px-10x\@checkout {
padding-left: 200px;
padding-right: 200px;
}
.u-px-0\@checkout {
padding-left: 0;
padding-right: 0;
}
.u-m\@checkout {
margin: 20px;
}
.u-m-quarter\@checkout {
margin: 5px;
}
.u-m-half\@checkout {
margin: 10px;
}
.u-m-2x\@checkout {
margin: 40px;
}
.u-m-3x\@checkout {
margin: 60px;
}
.u-m-4x\@checkout {
margin: 80px;
}
.u-m-5x\@checkout {
margin: 100px;
}
.u-m-6x\@checkout {
margin: 120px;
}
.u-m-7x\@checkout {
margin: 140px;
}
.u-m-8x\@checkout {
margin: 160px;
}
.u-m-9x\@checkout {
margin: 180px;
}
.u-m-10x\@checkout {
margin: 200px;
}
.u-m-0\@checkout {
margin: 0;
}
.u-mt\@checkout {
margin-top: 20px;
}
.u-mt-quarter\@checkout {
margin-top: 5px;
}
.u-mt-half\@checkout {
margin-top: 10px;
}
.u-mt-2x\@checkout {
margin-top: 40px;
}
.u-mt-3x\@checkout {
margin-top: 60px;
}
.u-mt-4x\@checkout {
margin-top: 80px;
}
.u-mt-5x\@checkout {
margin-top: 100px;
}
.u-mt-6x\@checkout {
margin-top: 120px;
}
.u-mt-7x\@checkout {
margin-top: 140px;
}
.u-mt-8x\@checkout {
margin-top: 160px;
}
.u-mt-9x\@checkout {
margin-top: 180px;
}
.u-mt-10x\@checkout {
margin-top: 200px;
}
.u-mt-0\@checkout {
margin-top: 0;
}
.u-mb\@checkout {
margin-bottom: 20px;
}
.u-mb-quarter\@checkout {
margin-bottom: 5px;
}
.u-mb-half\@checkout {
margin-bottom: 10px;
}
.u-mb-2x\@checkout {
margin-bottom: 40px;
}
.u-mb-3x\@checkout {
margin-bottom: 60px;
}
.u-mb-4x\@checkout {
margin-bottom: 80px;
}
.u-mb-5x\@checkout {
margin-bottom: 100px;
}
.u-mb-6x\@checkout {
margin-bottom: 120px;
}
.u-mb-7x\@checkout {
margin-bottom: 140px;
}
.u-mb-8x\@checkout {
margin-bottom: 160px;
}
.u-mb-9x\@checkout {
margin-bottom: 180px;
}
.u-mb-10x\@checkout {
margin-bottom: 200px;
}
.u-mb-0\@checkout {
margin-bottom: 0;
}
.u-ml\@checkout {
margin-left: 20px;
}
.u-ml-quarter\@checkout {
margin-left: 5px;
}
.u-ml-half\@checkout {
margin-left: 10px;
}
.u-ml-2x\@checkout {
margin-left: 40px;
}
.u-ml-3x\@checkout {
margin-left: 60px;
}
.u-ml-4x\@checkout {
margin-left: 80px;
}
.u-ml-5x\@checkout {
margin-left: 100px;
}
.u-ml-6x\@checkout {
margin-left: 120px;
}
.u-ml-7x\@checkout {
margin-left: 140px;
}
.u-ml-8x\@checkout {
margin-left: 160px;
}
.u-ml-9x\@checkout {
margin-left: 180px;
}
.u-ml-10x\@checkout {
margin-left: 200px;
}
.u-ml-0\@checkout {
margin-left: 0;
}
.u-mr\@checkout {
margin-right: 20px;
}
.u-mr-quarter\@checkout {
margin-right: 5px;
}
.u-mr-half\@checkout {
margin-right: 10px;
}
.u-mr-2x\@checkout {
margin-right: 40px;
}
.u-mr-3x\@checkout {
margin-right: 60px;
}
.u-mr-4x\@checkout {
margin-right: 80px;
}
.u-mr-5x\@checkout {
margin-right: 100px;
}
.u-mr-6x\@checkout {
margin-right: 120px;
}
.u-mr-7x\@checkout {
margin-right: 140px;
}
.u-mr-8x\@checkout {
margin-right: 160px;
}
.u-mr-9x\@checkout {
margin-right: 180px;
}
.u-mr-10x\@checkout {
margin-right: 200px;
}
.u-mr-0\@checkout {
margin-right: 0;
}
.u-my\@checkout {
margin-top: 20px;
margin-bottom: 20px;
}
.u-my-quarter\@checkout {
margin-top: 5px;
margin-bottom: 5px;
}
.u-my-half\@checkout {
margin-top: 10px;
margin-bottom: 10px;
}
.u-my-2x\@checkout {
margin-top: 40px;
margin-bottom: 40px;
}
.u-my-3x\@checkout {
margin-top: 60px;
margin-bottom: 60px;
}
.u-my-4x\@checkout {
margin-top: 80px;
margin-bottom: 80px;
}
.u-my-5x\@checkout {
margin-top: 100px;
margin-bottom: 100px;
}
.u-my-6x\@checkout {
margin-top: 120px;
margin-bottom: 120px;
}
.u-my-7x\@checkout {
margin-top: 140px;
margin-bottom: 140px;
}
.u-my-8x\@checkout {
margin-top: 160px;
margin-bottom: 160px;
}
.u-my-9x\@checkout {
margin-top: 180px;
margin-bottom: 180px;
}
.u-my-10x\@checkout {
margin-top: 200px;
margin-bottom: 200px;
}
.u-my-0\@checkout {
margin-top: 0;
margin-bottom: 0;
}
.u-mx\@checkout {
margin-left: 20px;
margin-right: 20px;
}
.u-mx-quarter\@checkout {
margin-left: 5px;
margin-right: 5px;
}
.u-mx-half\@checkout {
margin-left: 10px;
margin-right: 10px;
}
.u-mx-2x\@checkout {
margin-left: 40px;
margin-right: 40px;
}
.u-mx-3x\@checkout {
margin-left: 60px;
margin-right: 60px;
}
.u-mx-4x\@checkout {
margin-left: 80px;
margin-right: 80px;
}
.u-mx-5x\@checkout {
margin-left: 100px;
margin-right: 100px;
}
.u-mx-6x\@checkout {
margin-left: 120px;
margin-right: 120px;
}
.u-mx-7x\@checkout {
margin-left: 140px;
margin-right: 140px;
}
.u-mx-8x\@checkout {
margin-left: 160px;
margin-right: 160px;
}
.u-mx-9x\@checkout {
margin-left: 180px;
margin-right: 180px;
}
.u-mx-10x\@checkout {
margin-left: 200px;
margin-right: 200px;
}
.u-mx-0\@checkout {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 1024px) {
.u-p\@ipad-pro {
padding: 20px;
}
.u-p-quarter\@ipad-pro {
padding: 5px;
}
.u-p-half\@ipad-pro {
padding: 10px;
}
.u-p-2x\@ipad-pro {
padding: 40px;
}
.u-p-3x\@ipad-pro {
padding: 60px;
}
.u-p-4x\@ipad-pro {
padding: 80px;
}
.u-p-5x\@ipad-pro {
padding: 100px;
}
.u-p-6x\@ipad-pro {
padding: 120px;
}
.u-p-7x\@ipad-pro {
padding: 140px;
}
.u-p-8x\@ipad-pro {
padding: 160px;
}
.u-p-9x\@ipad-pro {
padding: 180px;
}
.u-p-10x\@ipad-pro {
padding: 200px;
}
.u-p-0\@ipad-pro {
padding: 0;
}
.u-pt\@ipad-pro {
padding-top: 20px;
}
.u-pt-quarter\@ipad-pro {
padding-top: 5px;
}
.u-pt-half\@ipad-pro {
padding-top: 10px;
}
.u-pt-2x\@ipad-pro {
padding-top: 40px;
}
.u-pt-3x\@ipad-pro {
padding-top: 60px;
}
.u-pt-4x\@ipad-pro {
padding-top: 80px;
}
.u-pt-5x\@ipad-pro {
padding-top: 100px;
}
.u-pt-6x\@ipad-pro {
padding-top: 120px;
}
.u-pt-7x\@ipad-pro {
padding-top: 140px;
}
.u-pt-8x\@ipad-pro {
padding-top: 160px;
}
.u-pt-9x\@ipad-pro {
padding-top: 180px;
}
.u-pt-10x\@ipad-pro {
padding-top: 200px;
}
.u-pt-0\@ipad-pro {
padding-top: 0;
}
.u-pb\@ipad-pro {
padding-bottom: 20px;
}
.u-pb-quarter\@ipad-pro {
padding-bottom: 5px;
}
.u-pb-half\@ipad-pro {
padding-bottom: 10px;
}
.u-pb-2x\@ipad-pro {
padding-bottom: 40px;
}
.u-pb-3x\@ipad-pro {
padding-bottom: 60px;
}
.u-pb-4x\@ipad-pro {
padding-bottom: 80px;
}
.u-pb-5x\@ipad-pro {
padding-bottom: 100px;
}
.u-pb-6x\@ipad-pro {
padding-bottom: 120px;
}
.u-pb-7x\@ipad-pro {
padding-bottom: 140px;
}
.u-pb-8x\@ipad-pro {
padding-bottom: 160px;
}
.u-pb-9x\@ipad-pro {
padding-bottom: 180px;
}
.u-pb-10x\@ipad-pro {
padding-bottom: 200px;
}
.u-pb-0\@ipad-pro {
padding-bottom: 0;
}
.u-pl\@ipad-pro {
padding-left: 20px;
}
.u-pl-quarter\@ipad-pro {
padding-left: 5px;
}
.u-pl-half\@ipad-pro {
padding-left: 10px;
}
.u-pl-2x\@ipad-pro {
padding-left: 40px;
}
.u-pl-3x\@ipad-pro {
padding-left: 60px;
}
.u-pl-4x\@ipad-pro {
padding-left: 80px;
}
.u-pl-5x\@ipad-pro {
padding-left: 100px;
}
.u-pl-6x\@ipad-pro {
padding-left: 120px;
}
.u-pl-7x\@ipad-pro {
padding-left: 140px;
}
.u-pl-8x\@ipad-pro {
padding-left: 160px;
}
.u-pl-9x\@ipad-pro {
padding-left: 180px;
}
.u-pl-10x\@ipad-pro {
padding-left: 200px;
}
.u-pl-0\@ipad-pro {
padding-left: 0;
}
.u-pr\@ipad-pro {
padding-right: 20px;
}
.u-pr-quarter\@ipad-pro {
padding-right: 5px;
}
.u-pr-half\@ipad-pro {
padding-right: 10px;
}
.u-pr-2x\@ipad-pro {
padding-right: 40px;
}
.u-pr-3x\@ipad-pro {
padding-right: 60px;
}
.u-pr-4x\@ipad-pro {
padding-right: 80px;
}
.u-pr-5x\@ipad-pro {
padding-right: 100px;
}
.u-pr-6x\@ipad-pro {
padding-right: 120px;
}
.u-pr-7x\@ipad-pro {
padding-right: 140px;
}
.u-pr-8x\@ipad-pro {
padding-right: 160px;
}
.u-pr-9x\@ipad-pro {
padding-right: 180px;
}
.u-pr-10x\@ipad-pro {
padding-right: 200px;
}
.u-pr-0\@ipad-pro {
padding-right: 0;
}
.u-py\@ipad-pro {
padding-top: 20px;
padding-bottom: 20px;
}
.u-py-quarter\@ipad-pro {
padding-top: 5px;
padding-bottom: 5px;
}
.u-py-half\@ipad-pro {
padding-top: 10px;
padding-bottom: 10px;
}
.u-py-2x\@ipad-pro {
padding-top: 40px;
padding-bottom: 40px;
}
.u-py-3x\@ipad-pro {
padding-top: 60px;
padding-bottom: 60px;
}
.u-py-4x\@ipad-pro {
padding-top: 80px;
padding-bottom: 80px;
}
.u-py-5x\@ipad-pro {
padding-top: 100px;
padding-bottom: 100px;
}
.u-py-6x\@ipad-pro {
padding-top: 120px;
padding-bottom: 120px;
}
.u-py-7x\@ipad-pro {
padding-top: 140px;
padding-bottom: 140px;
}
.u-py-8x\@ipad-pro {
padding-top: 160px;
padding-bottom: 160px;
}
.u-py-9x\@ipad-pro {
padding-top: 180px;
padding-bottom: 180px;
}
.u-py-10x\@ipad-pro {
padding-top: 200px;
padding-bottom: 200px;
}
.u-py-0\@ipad-pro {
padding-top: 0;
padding-bottom: 0;
}
.u-px\@ipad-pro {
padding-left: 20px;
padding-right: 20px;
}
.u-px-quarter\@ipad-pro {
padding-left: 5px;
padding-right: 5px;
}
.u-px-half\@ipad-pro {
padding-left: 10px;
padding-right: 10px;
}
.u-px-2x\@ipad-pro {
padding-left: 40px;
padding-right: 40px;
}
.u-px-3x\@ipad-pro {
padding-left: 60px;
padding-right: 60px;
}
.u-px-4x\@ipad-pro {
padding-left: 80px;
padding-right: 80px;
}
.u-px-5x\@ipad-pro {
padding-left: 100px;
padding-right: 100px;
}
.u-px-6x\@ipad-pro {
padding-left: 120px;
padding-right: 120px;
}
.u-px-7x\@ipad-pro {
padding-left: 140px;
padding-right: 140px;
}
.u-px-8x\@ipad-pro {
padding-left: 160px;
padding-right: 160px;
}
.u-px-9x\@ipad-pro {
padding-left: 180px;
padding-right: 180px;
}
.u-px-10x\@ipad-pro {
padding-left: 200px;
padding-right: 200px;
}
.u-px-0\@ipad-pro {
padding-left: 0;
padding-right: 0;
}
.u-m\@ipad-pro {
margin: 20px;
}
.u-m-quarter\@ipad-pro {
margin: 5px;
}
.u-m-half\@ipad-pro {
margin: 10px;
}
.u-m-2x\@ipad-pro {
margin: 40px;
}
.u-m-3x\@ipad-pro {
margin: 60px;
}
.u-m-4x\@ipad-pro {
margin: 80px;
}
.u-m-5x\@ipad-pro {
margin: 100px;
}
.u-m-6x\@ipad-pro {
margin: 120px;
}
.u-m-7x\@ipad-pro {
margin: 140px;
}
.u-m-8x\@ipad-pro {
margin: 160px;
}
.u-m-9x\@ipad-pro {
margin: 180px;
}
.u-m-10x\@ipad-pro {
margin: 200px;
}
.u-m-0\@ipad-pro {
margin: 0;
}
.u-mt\@ipad-pro {
margin-top: 20px;
}
.u-mt-quarter\@ipad-pro {
margin-top: 5px;
}
.u-mt-half\@ipad-pro {
margin-top: 10px;
}
.u-mt-2x\@ipad-pro {
margin-top: 40px;
}
.u-mt-3x\@ipad-pro {
margin-top: 60px;
}
.u-mt-4x\@ipad-pro {
margin-top: 80px;
}
.u-mt-5x\@ipad-pro {
margin-top: 100px;
}
.u-mt-6x\@ipad-pro {
margin-top: 120px;
}
.u-mt-7x\@ipad-pro {
margin-top: 140px;
}
.u-mt-8x\@ipad-pro {
margin-top: 160px;
}
.u-mt-9x\@ipad-pro {
margin-top: 180px;
}
.u-mt-10x\@ipad-pro {
margin-top: 200px;
}
.u-mt-0\@ipad-pro {
margin-top: 0;
}
.u-mb\@ipad-pro {
margin-bottom: 20px;
}
.u-mb-quarter\@ipad-pro {
margin-bottom: 5px;
}
.u-mb-half\@ipad-pro {
margin-bottom: 10px;
}
.u-mb-2x\@ipad-pro {
margin-bottom: 40px;
}
.u-mb-3x\@ipad-pro {
margin-bottom: 60px;
}
.u-mb-4x\@ipad-pro {
margin-bottom: 80px;
}
.u-mb-5x\@ipad-pro {
margin-bottom: 100px;
}
.u-mb-6x\@ipad-pro {
margin-bottom: 120px;
}
.u-mb-7x\@ipad-pro {
margin-bottom: 140px;
}
.u-mb-8x\@ipad-pro {
margin-bottom: 160px;
}
.u-mb-9x\@ipad-pro {
margin-bottom: 180px;
}
.u-mb-10x\@ipad-pro {
margin-bottom: 200px;
}
.u-mb-0\@ipad-pro {
margin-bottom: 0;
}
.u-ml\@ipad-pro {
margin-left: 20px;
}
.u-ml-quarter\@ipad-pro {
margin-left: 5px;
}
.u-ml-half\@ipad-pro {
margin-left: 10px;
}
.u-ml-2x\@ipad-pro {
margin-left: 40px;
}
.u-ml-3x\@ipad-pro {
margin-left: 60px;
}
.u-ml-4x\@ipad-pro {
margin-left: 80px;
}
.u-ml-5x\@ipad-pro {
margin-left: 100px;
}
.u-ml-6x\@ipad-pro {
margin-left: 120px;
}
.u-ml-7x\@ipad-pro {
margin-left: 140px;
}
.u-ml-8x\@ipad-pro {
margin-left: 160px;
}
.u-ml-9x\@ipad-pro {
margin-left: 180px;
}
.u-ml-10x\@ipad-pro {
margin-left: 200px;
}
.u-ml-0\@ipad-pro {
margin-left: 0;
}
.u-mr\@ipad-pro {
margin-right: 20px;
}
.u-mr-quarter\@ipad-pro {
margin-right: 5px;
}
.u-mr-half\@ipad-pro {
margin-right: 10px;
}
.u-mr-2x\@ipad-pro {
margin-right: 40px;
}
.u-mr-3x\@ipad-pro {
margin-right: 60px;
}
.u-mr-4x\@ipad-pro {
margin-right: 80px;
}
.u-mr-5x\@ipad-pro {
margin-right: 100px;
}
.u-mr-6x\@ipad-pro {
margin-right: 120px;
}
.u-mr-7x\@ipad-pro {
margin-right: 140px;
}
.u-mr-8x\@ipad-pro {
margin-right: 160px;
}
.u-mr-9x\@ipad-pro {
margin-right: 180px;
}
.u-mr-10x\@ipad-pro {
margin-right: 200px;
}
.u-mr-0\@ipad-pro {
margin-right: 0;
}
.u-my\@ipad-pro {
margin-top: 20px;
margin-bottom: 20px;
}
.u-my-quarter\@ipad-pro {
margin-top: 5px;
margin-bottom: 5px;
}
.u-my-half\@ipad-pro {
margin-top: 10px;
margin-bottom: 10px;
}
.u-my-2x\@ipad-pro {
margin-top: 40px;
margin-bottom: 40px;
}
.u-my-3x\@ipad-pro {
margin-top: 60px;
margin-bottom: 60px;
}
.u-my-4x\@ipad-pro {
margin-top: 80px;
margin-bottom: 80px;
}
.u-my-5x\@ipad-pro {
margin-top: 100px;
margin-bottom: 100px;
}
.u-my-6x\@ipad-pro {
margin-top: 120px;
margin-bottom: 120px;
}
.u-my-7x\@ipad-pro {
margin-top: 140px;
margin-bottom: 140px;
}
.u-my-8x\@ipad-pro {
margin-top: 160px;
margin-bottom: 160px;
}
.u-my-9x\@ipad-pro {
margin-top: 180px;
margin-bottom: 180px;
}
.u-my-10x\@ipad-pro {
margin-top: 200px;
margin-bottom: 200px;
}
.u-my-0\@ipad-pro {
margin-top: 0;
margin-bottom: 0;
}
.u-mx\@ipad-pro {
margin-left: 20px;
margin-right: 20px;
}
.u-mx-quarter\@ipad-pro {
margin-left: 5px;
margin-right: 5px;
}
.u-mx-half\@ipad-pro {
margin-left: 10px;
margin-right: 10px;
}
.u-mx-2x\@ipad-pro {
margin-left: 40px;
margin-right: 40px;
}
.u-mx-3x\@ipad-pro {
margin-left: 60px;
margin-right: 60px;
}
.u-mx-4x\@ipad-pro {
margin-left: 80px;
margin-right: 80px;
}
.u-mx-5x\@ipad-pro {
margin-left: 100px;
margin-right: 100px;
}
.u-mx-6x\@ipad-pro {
margin-left: 120px;
margin-right: 120px;
}
.u-mx-7x\@ipad-pro {
margin-left: 140px;
margin-right: 140px;
}
.u-mx-8x\@ipad-pro {
margin-left: 160px;
margin-right: 160px;
}
.u-mx-9x\@ipad-pro {
margin-left: 180px;
margin-right: 180px;
}
.u-mx-10x\@ipad-pro {
margin-left: 200px;
margin-right: 200px;
}
.u-mx-0\@ipad-pro {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 1280px) {
.u-p\@laptop {
padding: 20px;
}
.u-p-quarter\@laptop {
padding: 5px;
}
.u-p-half\@laptop {
padding: 10px;
}
.u-p-2x\@laptop {
padding: 40px;
}
.u-p-3x\@laptop {
padding: 60px;
}
.u-p-4x\@laptop {
padding: 80px;
}
.u-p-5x\@laptop {
padding: 100px;
}
.u-p-6x\@laptop {
padding: 120px;
}
.u-p-7x\@laptop {
padding: 140px;
}
.u-p-8x\@laptop {
padding: 160px;
}
.u-p-9x\@laptop {
padding: 180px;
}
.u-p-10x\@laptop {
padding: 200px;
}
.u-p-0\@laptop {
padding: 0;
}
.u-pt\@laptop {
padding-top: 20px;
}
.u-pt-quarter\@laptop {
padding-top: 5px;
}
.u-pt-half\@laptop {
padding-top: 10px;
}
.u-pt-2x\@laptop {
padding-top: 40px;
}
.u-pt-3x\@laptop {
padding-top: 60px;
}
.u-pt-4x\@laptop {
padding-top: 80px;
}
.u-pt-5x\@laptop {
padding-top: 100px;
}
.u-pt-6x\@laptop {
padding-top: 120px;
}
.u-pt-7x\@laptop {
padding-top: 140px;
}
.u-pt-8x\@laptop {
padding-top: 160px;
}
.u-pt-9x\@laptop {
padding-top: 180px;
}
.u-pt-10x\@laptop {
padding-top: 200px;
}
.u-pt-0\@laptop {
padding-top: 0;
}
.u-pb\@laptop {
padding-bottom: 20px;
}
.u-pb-quarter\@laptop {
padding-bottom: 5px;
}
.u-pb-half\@laptop {
padding-bottom: 10px;
}
.u-pb-2x\@laptop {
padding-bottom: 40px;
}
.u-pb-3x\@laptop {
padding-bottom: 60px;
}
.u-pb-4x\@laptop {
padding-bottom: 80px;
}
.u-pb-5x\@laptop {
padding-bottom: 100px;
}
.u-pb-6x\@laptop {
padding-bottom: 120px;
}
.u-pb-7x\@laptop {
padding-bottom: 140px;
}
.u-pb-8x\@laptop {
padding-bottom: 160px;
}
.u-pb-9x\@laptop {
padding-bottom: 180px;
}
.u-pb-10x\@laptop {
padding-bottom: 200px;
}
.u-pb-0\@laptop {
padding-bottom: 0;
}
.u-pl\@laptop {
padding-left: 20px;
}
.u-pl-quarter\@laptop {
padding-left: 5px;
}
.u-pl-half\@laptop {
padding-left: 10px;
}
.u-pl-2x\@laptop {
padding-left: 40px;
}
.u-pl-3x\@laptop {
padding-left: 60px;
}
.u-pl-4x\@laptop {
padding-left: 80px;
}
.u-pl-5x\@laptop {
padding-left: 100px;
}
.u-pl-6x\@laptop {
padding-left: 120px;
}
.u-pl-7x\@laptop {
padding-left: 140px;
}
.u-pl-8x\@laptop {
padding-left: 160px;
}
.u-pl-9x\@laptop {
padding-left: 180px;
}
.u-pl-10x\@laptop {
padding-left: 200px;
}
.u-pl-0\@laptop {
padding-left: 0;
}
.u-pr\@laptop {
padding-right: 20px;
}
.u-pr-quarter\@laptop {
padding-right: 5px;
}
.u-pr-half\@laptop {
padding-right: 10px;
}
.u-pr-2x\@laptop {
padding-right: 40px;
}
.u-pr-3x\@laptop {
padding-right: 60px;
}
.u-pr-4x\@laptop {
padding-right: 80px;
}
.u-pr-5x\@laptop {
padding-right: 100px;
}
.u-pr-6x\@laptop {
padding-right: 120px;
}
.u-pr-7x\@laptop {
padding-right: 140px;
}
.u-pr-8x\@laptop {
padding-right: 160px;
}
.u-pr-9x\@laptop {
padding-right: 180px;
}
.u-pr-10x\@laptop {
padding-right: 200px;
}
.u-pr-0\@laptop {
padding-right: 0;
}
.u-py\@laptop {
padding-top: 20px;
padding-bottom: 20px;
}
.u-py-quarter\@laptop {
padding-top: 5px;
padding-bottom: 5px;
}
.u-py-half\@laptop {
padding-top: 10px;
padding-bottom: 10px;
}
.u-py-2x\@laptop {
padding-top: 40px;
padding-bottom: 40px;
}
.u-py-3x\@laptop {
padding-top: 60px;
padding-bottom: 60px;
}
.u-py-4x\@laptop {
padding-top: 80px;
padding-bottom: 80px;
}
.u-py-5x\@laptop {
padding-top: 100px;
padding-bottom: 100px;
}
.u-py-6x\@laptop {
padding-top: 120px;
padding-bottom: 120px;
}
.u-py-7x\@laptop {
padding-top: 140px;
padding-bottom: 140px;
}
.u-py-8x\@laptop {
padding-top: 160px;
padding-bottom: 160px;
}
.u-py-9x\@laptop {
padding-top: 180px;
padding-bottom: 180px;
}
.u-py-10x\@laptop {
padding-top: 200px;
padding-bottom: 200px;
}
.u-py-0\@laptop {
padding-top: 0;
padding-bottom: 0;
}
.u-px\@laptop {
padding-left: 20px;
padding-right: 20px;
}
.u-px-quarter\@laptop {
padding-left: 5px;
padding-right: 5px;
}
.u-px-half\@laptop {
padding-left: 10px;
padding-right: 10px;
}
.u-px-2x\@laptop {
padding-left: 40px;
padding-right: 40px;
}
.u-px-3x\@laptop {
padding-left: 60px;
padding-right: 60px;
}
.u-px-4x\@laptop {
padding-left: 80px;
padding-right: 80px;
}
.u-px-5x\@laptop {
padding-left: 100px;
padding-right: 100px;
}
.u-px-6x\@laptop {
padding-left: 120px;
padding-right: 120px;
}
.u-px-7x\@laptop {
padding-left: 140px;
padding-right: 140px;
}
.u-px-8x\@laptop {
padding-left: 160px;
padding-right: 160px;
}
.u-px-9x\@laptop {
padding-left: 180px;
padding-right: 180px;
}
.u-px-10x\@laptop {
padding-left: 200px;
padding-right: 200px;
}
.u-px-0\@laptop {
padding-left: 0;
padding-right: 0;
}
.u-m\@laptop {
margin: 20px;
}
.u-m-quarter\@laptop {
margin: 5px;
}
.u-m-half\@laptop {
margin: 10px;
}
.u-m-2x\@laptop {
margin: 40px;
}
.u-m-3x\@laptop {
margin: 60px;
}
.u-m-4x\@laptop {
margin: 80px;
}
.u-m-5x\@laptop {
margin: 100px;
}
.u-m-6x\@laptop {
margin: 120px;
}
.u-m-7x\@laptop {
margin: 140px;
}
.u-m-8x\@laptop {
margin: 160px;
}
.u-m-9x\@laptop {
margin: 180px;
}
.u-m-10x\@laptop {
margin: 200px;
}
.u-m-0\@laptop {
margin: 0;
}
.u-mt\@laptop {
margin-top: 20px;
}
.u-mt-quarter\@laptop {
margin-top: 5px;
}
.u-mt-half\@laptop {
margin-top: 10px;
}
.u-mt-2x\@laptop {
margin-top: 40px;
}
.u-mt-3x\@laptop {
margin-top: 60px;
}
.u-mt-4x\@laptop {
margin-top: 80px;
}
.u-mt-5x\@laptop {
margin-top: 100px;
}
.u-mt-6x\@laptop {
margin-top: 120px;
}
.u-mt-7x\@laptop {
margin-top: 140px;
}
.u-mt-8x\@laptop {
margin-top: 160px;
}
.u-mt-9x\@laptop {
margin-top: 180px;
}
.u-mt-10x\@laptop {
margin-top: 200px;
}
.u-mt-0\@laptop {
margin-top: 0;
}
.u-mb\@laptop {
margin-bottom: 20px;
}
.u-mb-quarter\@laptop {
margin-bottom: 5px;
}
.u-mb-half\@laptop {
margin-bottom: 10px;
}
.u-mb-2x\@laptop {
margin-bottom: 40px;
}
.u-mb-3x\@laptop {
margin-bottom: 60px;
}
.u-mb-4x\@laptop {
margin-bottom: 80px;
}
.u-mb-5x\@laptop {
margin-bottom: 100px;
}
.u-mb-6x\@laptop {
margin-bottom: 120px;
}
.u-mb-7x\@laptop {
margin-bottom: 140px;
}
.u-mb-8x\@laptop {
margin-bottom: 160px;
}
.u-mb-9x\@laptop {
margin-bottom: 180px;
}
.u-mb-10x\@laptop {
margin-bottom: 200px;
}
.u-mb-0\@laptop {
margin-bottom: 0;
}
.u-ml\@laptop {
margin-left: 20px;
}
.u-ml-quarter\@laptop {
margin-left: 5px;
}
.u-ml-half\@laptop {
margin-left: 10px;
}
.u-ml-2x\@laptop {
margin-left: 40px;
}
.u-ml-3x\@laptop {
margin-left: 60px;
}
.u-ml-4x\@laptop {
margin-left: 80px;
}
.u-ml-5x\@laptop {
margin-left: 100px;
}
.u-ml-6x\@laptop {
margin-left: 120px;
}
.u-ml-7x\@laptop {
margin-left: 140px;
}
.u-ml-8x\@laptop {
margin-left: 160px;
}
.u-ml-9x\@laptop {
margin-left: 180px;
}
.u-ml-10x\@laptop {
margin-left: 200px;
}
.u-ml-0\@laptop {
margin-left: 0;
}
.u-mr\@laptop {
margin-right: 20px;
}
.u-mr-quarter\@laptop {
margin-right: 5px;
}
.u-mr-half\@laptop {
margin-right: 10px;
}
.u-mr-2x\@laptop {
margin-right: 40px;
}
.u-mr-3x\@laptop {
margin-right: 60px;
}
.u-mr-4x\@laptop {
margin-right: 80px;
}
.u-mr-5x\@laptop {
margin-right: 100px;
}
.u-mr-6x\@laptop {
margin-right: 120px;
}
.u-mr-7x\@laptop {
margin-right: 140px;
}
.u-mr-8x\@laptop {
margin-right: 160px;
}
.u-mr-9x\@laptop {
margin-right: 180px;
}
.u-mr-10x\@laptop {
margin-right: 200px;
}
.u-mr-0\@laptop {
margin-right: 0;
}
.u-my\@laptop {
margin-top: 20px;
margin-bottom: 20px;
}
.u-my-quarter\@laptop {
margin-top: 5px;
margin-bottom: 5px;
}
.u-my-half\@laptop {
margin-top: 10px;
margin-bottom: 10px;
}
.u-my-2x\@laptop {
margin-top: 40px;
margin-bottom: 40px;
}
.u-my-3x\@laptop {
margin-top: 60px;
margin-bottom: 60px;
}
.u-my-4x\@laptop {
margin-top: 80px;
margin-bottom: 80px;
}
.u-my-5x\@laptop {
margin-top: 100px;
margin-bottom: 100px;
}
.u-my-6x\@laptop {
margin-top: 120px;
margin-bottom: 120px;
}
.u-my-7x\@laptop {
margin-top: 140px;
margin-bottom: 140px;
}
.u-my-8x\@laptop {
margin-top: 160px;
margin-bottom: 160px;
}
.u-my-9x\@laptop {
margin-top: 180px;
margin-bottom: 180px;
}
.u-my-10x\@laptop {
margin-top: 200px;
margin-bottom: 200px;
}
.u-my-0\@laptop {
margin-top: 0;
margin-bottom: 0;
}
.u-mx\@laptop {
margin-left: 20px;
margin-right: 20px;
}
.u-mx-quarter\@laptop {
margin-left: 5px;
margin-right: 5px;
}
.u-mx-half\@laptop {
margin-left: 10px;
margin-right: 10px;
}
.u-mx-2x\@laptop {
margin-left: 40px;
margin-right: 40px;
}
.u-mx-3x\@laptop {
margin-left: 60px;
margin-right: 60px;
}
.u-mx-4x\@laptop {
margin-left: 80px;
margin-right: 80px;
}
.u-mx-5x\@laptop {
margin-left: 100px;
margin-right: 100px;
}
.u-mx-6x\@laptop {
margin-left: 120px;
margin-right: 120px;
}
.u-mx-7x\@laptop {
margin-left: 140px;
margin-right: 140px;
}
.u-mx-8x\@laptop {
margin-left: 160px;
margin-right: 160px;
}
.u-mx-9x\@laptop {
margin-left: 180px;
margin-right: 180px;
}
.u-mx-10x\@laptop {
margin-left: 200px;
margin-right: 200px;
}
.u-mx-0\@laptop {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 1440px) {
.u-p\@macbook {
padding: 20px;
}
.u-p-quarter\@macbook {
padding: 5px;
}
.u-p-half\@macbook {
padding: 10px;
}
.u-p-2x\@macbook {
padding: 40px;
}
.u-p-3x\@macbook {
padding: 60px;
}
.u-p-4x\@macbook {
padding: 80px;
}
.u-p-5x\@macbook {
padding: 100px;
}
.u-p-6x\@macbook {
padding: 120px;
}
.u-p-7x\@macbook {
padding: 140px;
}
.u-p-8x\@macbook {
padding: 160px;
}
.u-p-9x\@macbook {
padding: 180px;
}
.u-p-10x\@macbook {
padding: 200px;
}
.u-p-0\@macbook {
padding: 0;
}
.u-pt\@macbook {
padding-top: 20px;
}
.u-pt-quarter\@macbook {
padding-top: 5px;
}
.u-pt-half\@macbook {
padding-top: 10px;
}
.u-pt-2x\@macbook {
padding-top: 40px;
}
.u-pt-3x\@macbook {
padding-top: 60px;
}
.u-pt-4x\@macbook {
padding-top: 80px;
}
.u-pt-5x\@macbook {
padding-top: 100px;
}
.u-pt-6x\@macbook {
padding-top: 120px;
}
.u-pt-7x\@macbook {
padding-top: 140px;
}
.u-pt-8x\@macbook {
padding-top: 160px;
}
.u-pt-9x\@macbook {
padding-top: 180px;
}
.u-pt-10x\@macbook {
padding-top: 200px;
}
.u-pt-0\@macbook {
padding-top: 0;
}
.u-pb\@macbook {
padding-bottom: 20px;
}
.u-pb-quarter\@macbook {
padding-bottom: 5px;
}
.u-pb-half\@macbook {
padding-bottom: 10px;
}
.u-pb-2x\@macbook {
padding-bottom: 40px;
}
.u-pb-3x\@macbook {
padding-bottom: 60px;
}
.u-pb-4x\@macbook {
padding-bottom: 80px;
}
.u-pb-5x\@macbook {
padding-bottom: 100px;
}
.u-pb-6x\@macbook {
padding-bottom: 120px;
}
.u-pb-7x\@macbook {
padding-bottom: 140px;
}
.u-pb-8x\@macbook {
padding-bottom: 160px;
}
.u-pb-9x\@macbook {
padding-bottom: 180px;
}
.u-pb-10x\@macbook {
padding-bottom: 200px;
}
.u-pb-0\@macbook {
padding-bottom: 0;
}
.u-pl\@macbook {
padding-left: 20px;
}
.u-pl-quarter\@macbook {
padding-left: 5px;
}
.u-pl-half\@macbook {
padding-left: 10px;
}
.u-pl-2x\@macbook {
padding-left: 40px;
}
.u-pl-3x\@macbook {
padding-left: 60px;
}
.u-pl-4x\@macbook {
padding-left: 80px;
}
.u-pl-5x\@macbook {
padding-left: 100px;
}
.u-pl-6x\@macbook {
padding-left: 120px;
}
.u-pl-7x\@macbook {
padding-left: 140px;
}
.u-pl-8x\@macbook {
padding-left: 160px;
}
.u-pl-9x\@macbook {
padding-left: 180px;
}
.u-pl-10x\@macbook {
padding-left: 200px;
}
.u-pl-0\@macbook {
padding-left: 0;
}
.u-pr\@macbook {
padding-right: 20px;
}
.u-pr-quarter\@macbook {
padding-right: 5px;
}
.u-pr-half\@macbook {
padding-right: 10px;
}
.u-pr-2x\@macbook {
padding-right: 40px;
}
.u-pr-3x\@macbook {
padding-right: 60px;
}
.u-pr-4x\@macbook {
padding-right: 80px;
}
.u-pr-5x\@macbook {
padding-right: 100px;
}
.u-pr-6x\@macbook {
padding-right: 120px;
}
.u-pr-7x\@macbook {
padding-right: 140px;
}
.u-pr-8x\@macbook {
padding-right: 160px;
}
.u-pr-9x\@macbook {
padding-right: 180px;
}
.u-pr-10x\@macbook {
padding-right: 200px;
}
.u-pr-0\@macbook {
padding-right: 0;
}
.u-py\@macbook {
padding-top: 20px;
padding-bottom: 20px;
}
.u-py-quarter\@macbook {
padding-top: 5px;
padding-bottom: 5px;
}
.u-py-half\@macbook {
padding-top: 10px;
padding-bottom: 10px;
}
.u-py-2x\@macbook {
padding-top: 40px;
padding-bottom: 40px;
}
.u-py-3x\@macbook {
padding-top: 60px;
padding-bottom: 60px;
}
.u-py-4x\@macbook {
padding-top: 80px;
padding-bottom: 80px;
}
.u-py-5x\@macbook {
padding-top: 100px;
padding-bottom: 100px;
}
.u-py-6x\@macbook {
padding-top: 120px;
padding-bottom: 120px;
}
.u-py-7x\@macbook {
padding-top: 140px;
padding-bottom: 140px;
}
.u-py-8x\@macbook {
padding-top: 160px;
padding-bottom: 160px;
}
.u-py-9x\@macbook {
padding-top: 180px;
padding-bottom: 180px;
}
.u-py-10x\@macbook {
padding-top: 200px;
padding-bottom: 200px;
}
.u-py-0\@macbook {
padding-top: 0;
padding-bottom: 0;
}
.u-px\@macbook {
padding-left: 20px;
padding-right: 20px;
}
.u-px-quarter\@macbook {
padding-left: 5px;
padding-right: 5px;
}
.u-px-half\@macbook {
padding-left: 10px;
padding-right: 10px;
}
.u-px-2x\@macbook {
padding-left: 40px;
padding-right: 40px;
}
.u-px-3x\@macbook {
padding-left: 60px;
padding-right: 60px;
}
.u-px-4x\@macbook {
padding-left: 80px;
padding-right: 80px;
}
.u-px-5x\@macbook {
padding-left: 100px;
padding-right: 100px;
}
.u-px-6x\@macbook {
padding-left: 120px;
padding-right: 120px;
}
.u-px-7x\@macbook {
padding-left: 140px;
padding-right: 140px;
}
.u-px-8x\@macbook {
padding-left: 160px;
padding-right: 160px;
}
.u-px-9x\@macbook {
padding-left: 180px;
padding-right: 180px;
}
.u-px-10x\@macbook {
padding-left: 200px;
padding-right: 200px;
}
.u-px-0\@macbook {
padding-left: 0;
padding-right: 0;
}
.u-m\@macbook {
margin: 20px;
}
.u-m-quarter\@macbook {
margin: 5px;
}
.u-m-half\@macbook {
margin: 10px;
}
.u-m-2x\@macbook {
margin: 40px;
}
.u-m-3x\@macbook {
margin: 60px;
}
.u-m-4x\@macbook {
margin: 80px;
}
.u-m-5x\@macbook {
margin: 100px;
}
.u-m-6x\@macbook {
margin: 120px;
}
.u-m-7x\@macbook {
margin: 140px;
}
.u-m-8x\@macbook {
margin: 160px;
}
.u-m-9x\@macbook {
margin: 180px;
}
.u-m-10x\@macbook {
margin: 200px;
}
.u-m-0\@macbook {
margin: 0;
}
.u-mt\@macbook {
margin-top: 20px;
}
.u-mt-quarter\@macbook {
margin-top: 5px;
}
.u-mt-half\@macbook {
margin-top: 10px;
}
.u-mt-2x\@macbook {
margin-top: 40px;
}
.u-mt-3x\@macbook {
margin-top: 60px;
}
.u-mt-4x\@macbook {
margin-top: 80px;
}
.u-mt-5x\@macbook {
margin-top: 100px;
}
.u-mt-6x\@macbook {
margin-top: 120px;
}
.u-mt-7x\@macbook {
margin-top: 140px;
}
.u-mt-8x\@macbook {
margin-top: 160px;
}
.u-mt-9x\@macbook {
margin-top: 180px;
}
.u-mt-10x\@macbook {
margin-top: 200px;
}
.u-mt-0\@macbook {
margin-top: 0;
}
.u-mb\@macbook {
margin-bottom: 20px;
}
.u-mb-quarter\@macbook {
margin-bottom: 5px;
}
.u-mb-half\@macbook {
margin-bottom: 10px;
}
.u-mb-2x\@macbook {
margin-bottom: 40px;
}
.u-mb-3x\@macbook {
margin-bottom: 60px;
}
.u-mb-4x\@macbook {
margin-bottom: 80px;
}
.u-mb-5x\@macbook {
margin-bottom: 100px;
}
.u-mb-6x\@macbook {
margin-bottom: 120px;
}
.u-mb-7x\@macbook {
margin-bottom: 140px;
}
.u-mb-8x\@macbook {
margin-bottom: 160px;
}
.u-mb-9x\@macbook {
margin-bottom: 180px;
}
.u-mb-10x\@macbook {
margin-bottom: 200px;
}
.u-mb-0\@macbook {
margin-bottom: 0;
}
.u-ml\@macbook {
margin-left: 20px;
}
.u-ml-quarter\@macbook {
margin-left: 5px;
}
.u-ml-half\@macbook {
margin-left: 10px;
}
.u-ml-2x\@macbook {
margin-left: 40px;
}
.u-ml-3x\@macbook {
margin-left: 60px;
}
.u-ml-4x\@macbook {
margin-left: 80px;
}
.u-ml-5x\@macbook {
margin-left: 100px;
}
.u-ml-6x\@macbook {
margin-left: 120px;
}
.u-ml-7x\@macbook {
margin-left: 140px;
}
.u-ml-8x\@macbook {
margin-left: 160px;
}
.u-ml-9x\@macbook {
margin-left: 180px;
}
.u-ml-10x\@macbook {
margin-left: 200px;
}
.u-ml-0\@macbook {
margin-left: 0;
}
.u-mr\@macbook {
margin-right: 20px;
}
.u-mr-quarter\@macbook {
margin-right: 5px;
}
.u-mr-half\@macbook {
margin-right: 10px;
}
.u-mr-2x\@macbook {
margin-right: 40px;
}
.u-mr-3x\@macbook {
margin-right: 60px;
}
.u-mr-4x\@macbook {
margin-right: 80px;
}
.u-mr-5x\@macbook {
margin-right: 100px;
}
.u-mr-6x\@macbook {
margin-right: 120px;
}
.u-mr-7x\@macbook {
margin-right: 140px;
}
.u-mr-8x\@macbook {
margin-right: 160px;
}
.u-mr-9x\@macbook {
margin-right: 180px;
}
.u-mr-10x\@macbook {
margin-right: 200px;
}
.u-mr-0\@macbook {
margin-right: 0;
}
.u-my\@macbook {
margin-top: 20px;
margin-bottom: 20px;
}
.u-my-quarter\@macbook {
margin-top: 5px;
margin-bottom: 5px;
}
.u-my-half\@macbook {
margin-top: 10px;
margin-bottom: 10px;
}
.u-my-2x\@macbook {
margin-top: 40px;
margin-bottom: 40px;
}
.u-my-3x\@macbook {
margin-top: 60px;
margin-bottom: 60px;
}
.u-my-4x\@macbook {
margin-top: 80px;
margin-bottom: 80px;
}
.u-my-5x\@macbook {
margin-top: 100px;
margin-bottom: 100px;
}
.u-my-6x\@macbook {
margin-top: 120px;
margin-bottom: 120px;
}
.u-my-7x\@macbook {
margin-top: 140px;
margin-bottom: 140px;
}
.u-my-8x\@macbook {
margin-top: 160px;
margin-bottom: 160px;
}
.u-my-9x\@macbook {
margin-top: 180px;
margin-bottom: 180px;
}
.u-my-10x\@macbook {
margin-top: 200px;
margin-bottom: 200px;
}
.u-my-0\@macbook {
margin-top: 0;
margin-bottom: 0;
}
.u-mx\@macbook {
margin-left: 20px;
margin-right: 20px;
}
.u-mx-quarter\@macbook {
margin-left: 5px;
margin-right: 5px;
}
.u-mx-half\@macbook {
margin-left: 10px;
margin-right: 10px;
}
.u-mx-2x\@macbook {
margin-left: 40px;
margin-right: 40px;
}
.u-mx-3x\@macbook {
margin-left: 60px;
margin-right: 60px;
}
.u-mx-4x\@macbook {
margin-left: 80px;
margin-right: 80px;
}
.u-mx-5x\@macbook {
margin-left: 100px;
margin-right: 100px;
}
.u-mx-6x\@macbook {
margin-left: 120px;
margin-right: 120px;
}
.u-mx-7x\@macbook {
margin-left: 140px;
margin-right: 140px;
}
.u-mx-8x\@macbook {
margin-left: 160px;
margin-right: 160px;
}
.u-mx-9x\@macbook {
margin-left: 180px;
margin-right: 180px;
}
.u-mx-10x\@macbook {
margin-left: 200px;
margin-right: 200px;
}
.u-mx-0\@macbook {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 1920px) {
.u-p\@desktop {
padding: 20px;
}
.u-p-quarter\@desktop {
padding: 5px;
}
.u-p-half\@desktop {
padding: 10px;
}
.u-p-2x\@desktop {
padding: 40px;
}
.u-p-3x\@desktop {
padding: 60px;
}
.u-p-4x\@desktop {
padding: 80px;
}
.u-p-5x\@desktop {
padding: 100px;
}
.u-p-6x\@desktop {
padding: 120px;
}
.u-p-7x\@desktop {
padding: 140px;
}
.u-p-8x\@desktop {
padding: 160px;
}
.u-p-9x\@desktop {
padding: 180px;
}
.u-p-10x\@desktop {
padding: 200px;
}
.u-p-0\@desktop {
padding: 0;
}
.u-pt\@desktop {
padding-top: 20px;
}
.u-pt-quarter\@desktop {
padding-top: 5px;
}
.u-pt-half\@desktop {
padding-top: 10px;
}
.u-pt-2x\@desktop {
padding-top: 40px;
}
.u-pt-3x\@desktop {
padding-top: 60px;
}
.u-pt-4x\@desktop {
padding-top: 80px;
}
.u-pt-5x\@desktop {
padding-top: 100px;
}
.u-pt-6x\@desktop {
padding-top: 120px;
}
.u-pt-7x\@desktop {
padding-top: 140px;
}
.u-pt-8x\@desktop {
padding-top: 160px;
}
.u-pt-9x\@desktop {
padding-top: 180px;
}
.u-pt-10x\@desktop {
padding-top: 200px;
}
.u-pt-0\@desktop {
padding-top: 0;
}
.u-pb\@desktop {
padding-bottom: 20px;
}
.u-pb-quarter\@desktop {
padding-bottom: 5px;
}
.u-pb-half\@desktop {
padding-bottom: 10px;
}
.u-pb-2x\@desktop {
padding-bottom: 40px;
}
.u-pb-3x\@desktop {
padding-bottom: 60px;
}
.u-pb-4x\@desktop {
padding-bottom: 80px;
}
.u-pb-5x\@desktop {
padding-bottom: 100px;
}
.u-pb-6x\@desktop {
padding-bottom: 120px;
}
.u-pb-7x\@desktop {
padding-bottom: 140px;
}
.u-pb-8x\@desktop {
padding-bottom: 160px;
}
.u-pb-9x\@desktop {
padding-bottom: 180px;
}
.u-pb-10x\@desktop {
padding-bottom: 200px;
}
.u-pb-0\@desktop {
padding-bottom: 0;
}
.u-pl\@desktop {
padding-left: 20px;
}
.u-pl-quarter\@desktop {
padding-left: 5px;
}
.u-pl-half\@desktop {
padding-left: 10px;
}
.u-pl-2x\@desktop {
padding-left: 40px;
}
.u-pl-3x\@desktop {
padding-left: 60px;
}
.u-pl-4x\@desktop {
padding-left: 80px;
}
.u-pl-5x\@desktop {
padding-left: 100px;
}
.u-pl-6x\@desktop {
padding-left: 120px;
}
.u-pl-7x\@desktop {
padding-left: 140px;
}
.u-pl-8x\@desktop {
padding-left: 160px;
}
.u-pl-9x\@desktop {
padding-left: 180px;
}
.u-pl-10x\@desktop {
padding-left: 200px;
}
.u-pl-0\@desktop {
padding-left: 0;
}
.u-pr\@desktop {
padding-right: 20px;
}
.u-pr-quarter\@desktop {
padding-right: 5px;
}
.u-pr-half\@desktop {
padding-right: 10px;
}
.u-pr-2x\@desktop {
padding-right: 40px;
}
.u-pr-3x\@desktop {
padding-right: 60px;
}
.u-pr-4x\@desktop {
padding-right: 80px;
}
.u-pr-5x\@desktop {
padding-right: 100px;
}
.u-pr-6x\@desktop {
padding-right: 120px;
}
.u-pr-7x\@desktop {
padding-right: 140px;
}
.u-pr-8x\@desktop {
padding-right: 160px;
}
.u-pr-9x\@desktop {
padding-right: 180px;
}
.u-pr-10x\@desktop {
padding-right: 200px;
}
.u-pr-0\@desktop {
padding-right: 0;
}
.u-py\@desktop {
padding-top: 20px;
padding-bottom: 20px;
}
.u-py-quarter\@desktop {
padding-top: 5px;
padding-bottom: 5px;
}
.u-py-half\@desktop {
padding-top: 10px;
padding-bottom: 10px;
}
.u-py-2x\@desktop {
padding-top: 40px;
padding-bottom: 40px;
}
.u-py-3x\@desktop {
padding-top: 60px;
padding-bottom: 60px;
}
.u-py-4x\@desktop {
padding-top: 80px;
padding-bottom: 80px;
}
.u-py-5x\@desktop {
padding-top: 100px;
padding-bottom: 100px;
}
.u-py-6x\@desktop {
padding-top: 120px;
padding-bottom: 120px;
}
.u-py-7x\@desktop {
padding-top: 140px;
padding-bottom: 140px;
}
.u-py-8x\@desktop {
padding-top: 160px;
padding-bottom: 160px;
}
.u-py-9x\@desktop {
padding-top: 180px;
padding-bottom: 180px;
}
.u-py-10x\@desktop {
padding-top: 200px;
padding-bottom: 200px;
}
.u-py-0\@desktop {
padding-top: 0;
padding-bottom: 0;
}
.u-px\@desktop {
padding-left: 20px;
padding-right: 20px;
}
.u-px-quarter\@desktop {
padding-left: 5px;
padding-right: 5px;
}
.u-px-half\@desktop {
padding-left: 10px;
padding-right: 10px;
}
.u-px-2x\@desktop {
padding-left: 40px;
padding-right: 40px;
}
.u-px-3x\@desktop {
padding-left: 60px;
padding-right: 60px;
}
.u-px-4x\@desktop {
padding-left: 80px;
padding-right: 80px;
}
.u-px-5x\@desktop {
padding-left: 100px;
padding-right: 100px;
}
.u-px-6x\@desktop {
padding-left: 120px;
padding-right: 120px;
}
.u-px-7x\@desktop {
padding-left: 140px;
padding-right: 140px;
}
.u-px-8x\@desktop {
padding-left: 160px;
padding-right: 160px;
}
.u-px-9x\@desktop {
padding-left: 180px;
padding-right: 180px;
}
.u-px-10x\@desktop {
padding-left: 200px;
padding-right: 200px;
}
.u-px-0\@desktop {
padding-left: 0;
padding-right: 0;
}
.u-m\@desktop {
margin: 20px;
}
.u-m-quarter\@desktop {
margin: 5px;
}
.u-m-half\@desktop {
margin: 10px;
}
.u-m-2x\@desktop {
margin: 40px;
}
.u-m-3x\@desktop {
margin: 60px;
}
.u-m-4x\@desktop {
margin: 80px;
}
.u-m-5x\@desktop {
margin: 100px;
}
.u-m-6x\@desktop {
margin: 120px;
}
.u-m-7x\@desktop {
margin: 140px;
}
.u-m-8x\@desktop {
margin: 160px;
}
.u-m-9x\@desktop {
margin: 180px;
}
.u-m-10x\@desktop {
margin: 200px;
}
.u-m-0\@desktop {
margin: 0;
}
.u-mt\@desktop {
margin-top: 20px;
}
.u-mt-quarter\@desktop {
margin-top: 5px;
}
.u-mt-half\@desktop {
margin-top: 10px;
}
.u-mt-2x\@desktop {
margin-top: 40px;
}
.u-mt-3x\@desktop {
margin-top: 60px;
}
.u-mt-4x\@desktop {
margin-top: 80px;
}
.u-mt-5x\@desktop {
margin-top: 100px;
}
.u-mt-6x\@desktop {
margin-top: 120px;
}
.u-mt-7x\@desktop {
margin-top: 140px;
}
.u-mt-8x\@desktop {
margin-top: 160px;
}
.u-mt-9x\@desktop {
margin-top: 180px;
}
.u-mt-10x\@desktop {
margin-top: 200px;
}
.u-mt-0\@desktop {
margin-top: 0;
}
.u-mb\@desktop {
margin-bottom: 20px;
}
.u-mb-quarter\@desktop {
margin-bottom: 5px;
}
.u-mb-half\@desktop {
margin-bottom: 10px;
}
.u-mb-2x\@desktop {
margin-bottom: 40px;
}
.u-mb-3x\@desktop {
margin-bottom: 60px;
}
.u-mb-4x\@desktop {
margin-bottom: 80px;
}
.u-mb-5x\@desktop {
margin-bottom: 100px;
}
.u-mb-6x\@desktop {
margin-bottom: 120px;
}
.u-mb-7x\@desktop {
margin-bottom: 140px;
}
.u-mb-8x\@desktop {
margin-bottom: 160px;
}
.u-mb-9x\@desktop {
margin-bottom: 180px;
}
.u-mb-10x\@desktop {
margin-bottom: 200px;
}
.u-mb-0\@desktop {
margin-bottom: 0;
}
.u-ml\@desktop {
margin-left: 20px;
}
.u-ml-quarter\@desktop {
margin-left: 5px;
}
.u-ml-half\@desktop {
margin-left: 10px;
}
.u-ml-2x\@desktop {
margin-left: 40px;
}
.u-ml-3x\@desktop {
margin-left: 60px;
}
.u-ml-4x\@desktop {
margin-left: 80px;
}
.u-ml-5x\@desktop {
margin-left: 100px;
}
.u-ml-6x\@desktop {
margin-left: 120px;
}
.u-ml-7x\@desktop {
margin-left: 140px;
}
.u-ml-8x\@desktop {
margin-left: 160px;
}
.u-ml-9x\@desktop {
margin-left: 180px;
}
.u-ml-10x\@desktop {
margin-left: 200px;
}
.u-ml-0\@desktop {
margin-left: 0;
}
.u-mr\@desktop {
margin-right: 20px;
}
.u-mr-quarter\@desktop {
margin-right: 5px;
}
.u-mr-half\@desktop {
margin-right: 10px;
}
.u-mr-2x\@desktop {
margin-right: 40px;
}
.u-mr-3x\@desktop {
margin-right: 60px;
}
.u-mr-4x\@desktop {
margin-right: 80px;
}
.u-mr-5x\@desktop {
margin-right: 100px;
}
.u-mr-6x\@desktop {
margin-right: 120px;
}
.u-mr-7x\@desktop {
margin-right: 140px;
}
.u-mr-8x\@desktop {
margin-right: 160px;
}
.u-mr-9x\@desktop {
margin-right: 180px;
}
.u-mr-10x\@desktop {
margin-right: 200px;
}
.u-mr-0\@desktop {
margin-right: 0;
}
.u-my\@desktop {
margin-top: 20px;
margin-bottom: 20px;
}
.u-my-quarter\@desktop {
margin-top: 5px;
margin-bottom: 5px;
}
.u-my-half\@desktop {
margin-top: 10px;
margin-bottom: 10px;
}
.u-my-2x\@desktop {
margin-top: 40px;
margin-bottom: 40px;
}
.u-my-3x\@desktop {
margin-top: 60px;
margin-bottom: 60px;
}
.u-my-4x\@desktop {
margin-top: 80px;
margin-bottom: 80px;
}
.u-my-5x\@desktop {
margin-top: 100px;
margin-bottom: 100px;
}
.u-my-6x\@desktop {
margin-top: 120px;
margin-bottom: 120px;
}
.u-my-7x\@desktop {
margin-top: 140px;
margin-bottom: 140px;
}
.u-my-8x\@desktop {
margin-top: 160px;
margin-bottom: 160px;
}
.u-my-9x\@desktop {
margin-top: 180px;
margin-bottom: 180px;
}
.u-my-10x\@desktop {
margin-top: 200px;
margin-bottom: 200px;
}
.u-my-0\@desktop {
margin-top: 0;
margin-bottom: 0;
}
.u-mx\@desktop {
margin-left: 20px;
margin-right: 20px;
}
.u-mx-quarter\@desktop {
margin-left: 5px;
margin-right: 5px;
}
.u-mx-half\@desktop {
margin-left: 10px;
margin-right: 10px;
}
.u-mx-2x\@desktop {
margin-left: 40px;
margin-right: 40px;
}
.u-mx-3x\@desktop {
margin-left: 60px;
margin-right: 60px;
}
.u-mx-4x\@desktop {
margin-left: 80px;
margin-right: 80px;
}
.u-mx-5x\@desktop {
margin-left: 100px;
margin-right: 100px;
}
.u-mx-6x\@desktop {
margin-left: 120px;
margin-right: 120px;
}
.u-mx-7x\@desktop {
margin-left: 140px;
margin-right: 140px;
}
.u-mx-8x\@desktop {
margin-left: 160px;
margin-right: 160px;
}
.u-mx-9x\@desktop {
margin-left: 180px;
margin-right: 180px;
}
.u-mx-10x\@desktop {
margin-left: 200px;
margin-right: 200px;
}
.u-mx-0\@desktop {
margin-left: 0;
margin-right: 0;
}
}
/* ============================================================
* Utilities - Flex
============================================================ */
/**
* Simple flex helpers to change a flex layout throughout
* device sizes.
* Example:
* u-flex u-flex-wrap u-flex-no-wrap@ipad
*
*/
.u-flex {
display: flex;
}
.u-flex-inline {
display: inline-flex;
}
.u-show {
display: inline-block;
}
.u-hide {
display: none;
}
.u-space-between {
justify-content: space-between;
}
.u-space-around {
justify-content: space-around;
}
.u-space-evenly {
justify-content: space-evenly;
}
.u-v-top {
align-items: flex-start;
}
.u-v-bottom {
align-items: flex-end;
}
.u-v-center {
align-items: center;
}
.u-h-left {
justify-content: flex-start;
}
.u-h-right {
justify-content: flex-end;
}
.u-h-center {
justify-content: center;
}
.u-no-wrap {
flex-wrap: nowrap;
}
.u-wrap {
flex-wrap: wrap;
}
.u-block {
display: block;
}
.u-js-right {
justify-self: right;
}
.u-js-left {
justify-self: left;
}
.u-as-top {
align-self: flex-start;
}
.u-as-center {
align-self: center;
}
.u-as-bottom {
align-self: flex-end;
}
.u-flex-reverse {
flex-direction: row-reverse;
}
.u-flex-even {
flex: 1;
}
.u-flex-row {
flex-direction: row;
}
.u-flex-columns {
flex-direction: column;
}
@media (min-width: 375px) {
.u-flex\@iphone-small {
display: flex;
}
.u-flex-inline\@iphone-small {
display: inline-flex;
}
.u-show\@iphone-small {
display: inline-block;
}
.u-hide\@iphone-small {
display: none;
}
.u-space-between\@iphone-small {
justify-content: space-between;
}
.u-space-around\@iphone-small {
justify-content: space-around;
}
.u-space-evenly\@iphone-small {
justify-content: space-evenly;
}
.u-v-top\@iphone-small {
align-items: flex-start;
}
.u-v-bottom\@iphone-small {
align-items: flex-end;
}
.u-v-center\@iphone-small {
align-items: center;
}
.u-h-left\@iphone-small {
justify-content: flex-start;
}
.u-h-right\@iphone-small {
justify-content: flex-end;
}
.u-h-center\@iphone-small {
justify-content: center;
}
.u-no-wrap\@iphone-small {
flex-wrap: nowrap;
}
.u-wrap\@iphone-small {
flex-wrap: wrap;
}
.u-block\@iphone-small {
display: block;
}
.u-js-right\@iphone-small {
justify-self: right;
}
.u-js-left\@iphone-small {
justify-self: left;
}
.u-as-top\@iphone-small {
align-self: flex-start;
}
.u-as-center\@iphone-small {
align-self: center;
}
.u-as-bottom\@iphone-small {
align-self: flex-end;
}
.u-flex-reverse\@iphone-small {
flex-direction: row-reverse;
}
.u-flex-even\@iphone-small {
flex: 1;
}
.u-flex-row\@iphone-small {
flex-direction: row;
}
.u-flex-columns\@iphone-small {
flex-direction: column;
}
}
@media (min-width: 640px) {
.u-flex\@iphone-max {
display: flex;
}
.u-flex-inline\@iphone-max {
display: inline-flex;
}
.u-show\@iphone-max {
display: inline-block;
}
.u-hide\@iphone-max {
display: none;
}
.u-space-between\@iphone-max {
justify-content: space-between;
}
.u-space-around\@iphone-max {
justify-content: space-around;
}
.u-space-evenly\@iphone-max {
justify-content: space-evenly;
}
.u-v-top\@iphone-max {
align-items: flex-start;
}
.u-v-bottom\@iphone-max {
align-items: flex-end;
}
.u-v-center\@iphone-max {
align-items: center;
}
.u-h-left\@iphone-max {
justify-content: flex-start;
}
.u-h-right\@iphone-max {
justify-content: flex-end;
}
.u-h-center\@iphone-max {
justify-content: center;
}
.u-no-wrap\@iphone-max {
flex-wrap: nowrap;
}
.u-wrap\@iphone-max {
flex-wrap: wrap;
}
.u-block\@iphone-max {
display: block;
}
.u-js-right\@iphone-max {
justify-self: right;
}
.u-js-left\@iphone-max {
justify-self: left;
}
.u-as-top\@iphone-max {
align-self: flex-start;
}
.u-as-center\@iphone-max {
align-self: center;
}
.u-as-bottom\@iphone-max {
align-self: flex-end;
}
.u-flex-reverse\@iphone-max {
flex-direction: row-reverse;
}
.u-flex-even\@iphone-max {
flex: 1;
}
.u-flex-row\@iphone-max {
flex-direction: row;
}
.u-flex-columns\@iphone-max {
flex-direction: column;
}
}
@media (min-width: 768px) {
.u-flex\@ipad {
display: flex;
}
.u-flex-inline\@ipad {
display: inline-flex;
}
.u-show\@ipad {
display: inline-block;
}
.u-hide\@ipad {
display: none;
}
.u-space-between\@ipad {
justify-content: space-between;
}
.u-space-around\@ipad {
justify-content: space-around;
}
.u-space-evenly\@ipad {
justify-content: space-evenly;
}
.u-v-top\@ipad {
align-items: flex-start;
}
.u-v-bottom\@ipad {
align-items: flex-end;
}
.u-v-center\@ipad {
align-items: center;
}
.u-h-left\@ipad {
justify-content: flex-start;
}
.u-h-right\@ipad {
justify-content: flex-end;
}
.u-h-center\@ipad {
justify-content: center;
}
.u-no-wrap\@ipad {
flex-wrap: nowrap;
}
.u-wrap\@ipad {
flex-wrap: wrap;
}
.u-block\@ipad {
display: block;
}
.u-js-right\@ipad {
justify-self: right;
}
.u-js-left\@ipad {
justify-self: left;
}
.u-as-top\@ipad {
align-self: flex-start;
}
.u-as-center\@ipad {
align-self: center;
}
.u-as-bottom\@ipad {
align-self: flex-end;
}
.u-flex-reverse\@ipad {
flex-direction: row-reverse;
}
.u-flex-even\@ipad {
flex: 1;
}
.u-flex-row\@ipad {
flex-direction: row;
}
.u-flex-columns\@ipad {
flex-direction: column;
}
}
@media (min-width: 769px) {
.u-flex\@checkout {
display: flex;
}
.u-flex-inline\@checkout {
display: inline-flex;
}
.u-show\@checkout {
display: inline-block;
}
.u-hide\@checkout {
display: none;
}
.u-space-between\@checkout {
justify-content: space-between;
}
.u-space-around\@checkout {
justify-content: space-around;
}
.u-space-evenly\@checkout {
justify-content: space-evenly;
}
.u-v-top\@checkout {
align-items: flex-start;
}
.u-v-bottom\@checkout {
align-items: flex-end;
}
.u-v-center\@checkout {
align-items: center;
}
.u-h-left\@checkout {
justify-content: flex-start;
}
.u-h-right\@checkout {
justify-content: flex-end;
}
.u-h-center\@checkout {
justify-content: center;
}
.u-no-wrap\@checkout {
flex-wrap: nowrap;
}
.u-wrap\@checkout {
flex-wrap: wrap;
}
.u-block\@checkout {
display: block;
}
.u-js-right\@checkout {
justify-self: right;
}
.u-js-left\@checkout {
justify-self: left;
}
.u-as-top\@checkout {
align-self: flex-start;
}
.u-as-center\@checkout {
align-self: center;
}
.u-as-bottom\@checkout {
align-self: flex-end;
}
.u-flex-reverse\@checkout {
flex-direction: row-reverse;
}
.u-flex-even\@checkout {
flex: 1;
}
.u-flex-row\@checkout {
flex-direction: row;
}
.u-flex-columns\@checkout {
flex-direction: column;
}
}
@media (min-width: 1024px) {
.u-flex\@ipad-pro {
display: flex;
}
.u-flex-inline\@ipad-pro {
display: inline-flex;
}
.u-show\@ipad-pro {
display: inline-block;
}
.u-hide\@ipad-pro {
display: none;
}
.u-space-between\@ipad-pro {
justify-content: space-between;
}
.u-space-around\@ipad-pro {
justify-content: space-around;
}
.u-space-evenly\@ipad-pro {
justify-content: space-evenly;
}
.u-v-top\@ipad-pro {
align-items: flex-start;
}
.u-v-bottom\@ipad-pro {
align-items: flex-end;
}
.u-v-center\@ipad-pro {
align-items: center;
}
.u-h-left\@ipad-pro {
justify-content: flex-start;
}
.u-h-right\@ipad-pro {
justify-content: flex-end;
}
.u-h-center\@ipad-pro {
justify-content: center;
}
.u-no-wrap\@ipad-pro {
flex-wrap: nowrap;
}
.u-wrap\@ipad-pro {
flex-wrap: wrap;
}
.u-block\@ipad-pro {
display: block;
}
.u-js-right\@ipad-pro {
justify-self: right;
}
.u-js-left\@ipad-pro {
justify-self: left;
}
.u-as-top\@ipad-pro {
align-self: flex-start;
}
.u-as-center\@ipad-pro {
align-self: center;
}
.u-as-bottom\@ipad-pro {
align-self: flex-end;
}
.u-flex-reverse\@ipad-pro {
flex-direction: row-reverse;
}
.u-flex-even\@ipad-pro {
flex: 1;
}
.u-flex-row\@ipad-pro {
flex-direction: row;
}
.u-flex-columns\@ipad-pro {
flex-direction: column;
}
}
@media (min-width: 1280px) {
.u-flex\@laptop {
display: flex;
}
.u-flex-inline\@laptop {
display: inline-flex;
}
.u-show\@laptop {
display: inline-block;
}
.u-hide\@laptop {
display: none;
}
.u-space-between\@laptop {
justify-content: space-between;
}
.u-space-around\@laptop {
justify-content: space-around;
}
.u-space-evenly\@laptop {
justify-content: space-evenly;
}
.u-v-top\@laptop {
align-items: flex-start;
}
.u-v-bottom\@laptop {
align-items: flex-end;
}
.u-v-center\@laptop {
align-items: center;
}
.u-h-left\@laptop {
justify-content: flex-start;
}
.u-h-right\@laptop {
justify-content: flex-end;
}
.u-h-center\@laptop {
justify-content: center;
}
.u-no-wrap\@laptop {
flex-wrap: nowrap;
}
.u-wrap\@laptop {
flex-wrap: wrap;
}
.u-block\@laptop {
display: block;
}
.u-js-right\@laptop {
justify-self: right;
}
.u-js-left\@laptop {
justify-self: left;
}
.u-as-top\@laptop {
align-self: flex-start;
}
.u-as-center\@laptop {
align-self: center;
}
.u-as-bottom\@laptop {
align-self: flex-end;
}
.u-flex-reverse\@laptop {
flex-direction: row-reverse;
}
.u-flex-even\@laptop {
flex: 1;
}
.u-flex-row\@laptop {
flex-direction: row;
}
.u-flex-columns\@laptop {
flex-direction: column;
}
}
@media (min-width: 1440px) {
.u-flex\@macbook {
display: flex;
}
.u-flex-inline\@macbook {
display: inline-flex;
}
.u-show\@macbook {
display: inline-block;
}
.u-hide\@macbook {
display: none;
}
.u-space-between\@macbook {
justify-content: space-between;
}
.u-space-around\@macbook {
justify-content: space-around;
}
.u-space-evenly\@macbook {
justify-content: space-evenly;
}
.u-v-top\@macbook {
align-items: flex-start;
}
.u-v-bottom\@macbook {
align-items: flex-end;
}
.u-v-center\@macbook {
align-items: center;
}
.u-h-left\@macbook {
justify-content: flex-start;
}
.u-h-right\@macbook {
justify-content: flex-end;
}
.u-h-center\@macbook {
justify-content: center;
}
.u-no-wrap\@macbook {
flex-wrap: nowrap;
}
.u-wrap\@macbook {
flex-wrap: wrap;
}
.u-block\@macbook {
display: block;
}
.u-js-right\@macbook {
justify-self: right;
}
.u-js-left\@macbook {
justify-self: left;
}
.u-as-top\@macbook {
align-self: flex-start;
}
.u-as-center\@macbook {
align-self: center;
}
.u-as-bottom\@macbook {
align-self: flex-end;
}
.u-flex-reverse\@macbook {
flex-direction: row-reverse;
}
.u-flex-even\@macbook {
flex: 1;
}
.u-flex-row\@macbook {
flex-direction: row;
}
.u-flex-columns\@macbook {
flex-direction: column;
}
}
@media (min-width: 1920px) {
.u-flex\@desktop {
display: flex;
}
.u-flex-inline\@desktop {
display: inline-flex;
}
.u-show\@desktop {
display: inline-block;
}
.u-hide\@desktop {
display: none;
}
.u-space-between\@desktop {
justify-content: space-between;
}
.u-space-around\@desktop {
justify-content: space-around;
}
.u-space-evenly\@desktop {
justify-content: space-evenly;
}
.u-v-top\@desktop {
align-items: flex-start;
}
.u-v-bottom\@desktop {
align-items: flex-end;
}
.u-v-center\@desktop {
align-items: center;
}
.u-h-left\@desktop {
justify-content: flex-start;
}
.u-h-right\@desktop {
justify-content: flex-end;
}
.u-h-center\@desktop {
justify-content: center;
}
.u-no-wrap\@desktop {
flex-wrap: nowrap;
}
.u-wrap\@desktop {
flex-wrap: wrap;
}
.u-block\@desktop {
display: block;
}
.u-js-right\@desktop {
justify-self: right;
}
.u-js-left\@desktop {
justify-self: left;
}
.u-as-top\@desktop {
align-self: flex-start;
}
.u-as-center\@desktop {
align-self: center;
}
.u-as-bottom\@desktop {
align-self: flex-end;
}
.u-flex-reverse\@desktop {
flex-direction: row-reverse;
}
.u-flex-even\@desktop {
flex: 1;
}
.u-flex-row\@desktop {
flex-direction: row;
}
.u-flex-columns\@desktop {
flex-direction: column;
}
}
/* ============================================================
* Utilities - Trumps
============================================================ */
/**
* A trumps files where overiding styling is placed,
* this is the only place in a project that a !important
* should be used !
*/
.t-trustpilot {
transform: translateY(2px);
}
.t-splide-overflow {
overflow: visible !important;
}
.splide__arrow {
transition: opacity 0.3s ease;
}
.splide__arrow:disabled {
opacity: 0.2;
pointer-events: none;
}
.splide {
visibility: visible;
}
/* ============================================================
* Utilities - Helpers
============================================================ */
/**
* The helpers file is a simple place to add commenly used
* helpers to maintain a DRY code app.
*
*/
/** Positions
============================================================ */
.u-pos-rel {
position: relative;
}
.u-pos-sticky {
position: sticky;
top: 40px;
}
/** No click events
============================================================ */
.u-no-clicky {
pointer-events: none;
}
@media (min-width: 375px) {
.u-no-clicky .u-no-clicky\@iphone-small {
pointer-events: none;
}
}
@media (min-width: 640px) {
.u-no-clicky .u-no-clicky\@iphone-max {
pointer-events: none;
}
}
@media (min-width: 768px) {
.u-no-clicky .u-no-clicky\@ipad {
pointer-events: none;
}
}
@media (min-width: 769px) {
.u-no-clicky .u-no-clicky\@checkout {
pointer-events: none;
}
}
@media (min-width: 1024px) {
.u-no-clicky .u-no-clicky\@ipad-pro {
pointer-events: none;
}
}
@media (min-width: 1280px) {
.u-no-clicky .u-no-clicky\@laptop {
pointer-events: none;
}
}
@media (min-width: 1440px) {
.u-no-clicky .u-no-clicky\@macbook {
pointer-events: none;
}
}
@media (min-width: 1920px) {
.u-no-clicky .u-no-clicky\@desktop {
pointer-events: none;
}
}
.u-clicky {
pointer-events: all;
}
/** Text Alignment
============================================================ */
.u-tac {
text-align: center;
}
.u-tar {
text-align: right;
}
.u-tal {
text-align: left;
}
@media (min-width: 375px) {
.u-tac\@iphone-small {
text-align: center;
}
.u-tar\@iphone-small {
text-align: right;
}
.u-tal\@iphone-small {
text-align: left;
}
}
@media (min-width: 640px) {
.u-tac\@iphone-max {
text-align: center;
}
.u-tar\@iphone-max {
text-align: right;
}
.u-tal\@iphone-max {
text-align: left;
}
}
@media (min-width: 768px) {
.u-tac\@ipad {
text-align: center;
}
.u-tar\@ipad {
text-align: right;
}
.u-tal\@ipad {
text-align: left;
}
}
@media (min-width: 769px) {
.u-tac\@checkout {
text-align: center;
}
.u-tar\@checkout {
text-align: right;
}
.u-tal\@checkout {
text-align: left;
}
}
@media (min-width: 1024px) {
.u-tac\@ipad-pro {
text-align: center;
}
.u-tar\@ipad-pro {
text-align: right;
}
.u-tal\@ipad-pro {
text-align: left;
}
}
@media (min-width: 1280px) {
.u-tac\@laptop {
text-align: center;
}
.u-tar\@laptop {
text-align: right;
}
.u-tal\@laptop {
text-align: left;
}
}
@media (min-width: 1440px) {
.u-tac\@macbook {
text-align: center;
}
.u-tar\@macbook {
text-align: right;
}
.u-tal\@macbook {
text-align: left;
}
}
@media (min-width: 1920px) {
.u-tac\@desktop {
text-align: center;
}
.u-tar\@desktop {
text-align: right;
}
.u-tal\@desktop {
text-align: left;
}
}
/** Text Uppercase
*
* A helper to make text uppercase.
============================================================ */
.u-uppercase {
text-transform: uppercase;
}
/** Font Colour
*
* Colouring text that isn't a heading
============================================================= */
.u-font-colour-white {
color: #fff;
}
.u-font-colour-black {
color: #25305d;
}
.u-font-colour-primary {
color: #25305d;
}
.u-font-colour-secondary {
color: #00aad0;
}
.u-font-colour-tertiary {
color: #ec8005;
}
.u-font-colour-quaternary {
color: #a0144d;
}
.u-font-colour-grey {
color: rgba(37, 48, 93, 0.6);
}
/** Font Weights
*
* Setting font options by class
============================================================= */
.u-font-light {
font-weight: 300;
}
.u-font-regular {
font-weight: 400;
}
.u-font-medium {
font-weight: 500;
}
.u-font-semi {
font-weight: 600;
}
.u-font-bold {
font-weight: 600;
}
/** Font Size
*
* Setting font size by class
============================================================= */
.u-font-small {
font-size: 14px;
line-height: 16px;
}
/** Darken
*
* Darken as an overlay
============================================================= */
.u-darken {
transition: opacity 400ms cubic-bezier(0.77, 0, 0.175, 1);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: #000;
opacity: 0.5;
z-index: 2;
}
.u-darken--less {
opacity: 0.3333333333;
}
.u-darken--even-less {
opacity: 0.25;
}
.u-darken--primary {
background-color: #25305d;
}
.u-darken--secondary {
background-color: #00aad0;
}
.u-darken--tertiary {
background-color: #ec8005;
}
/** Content Widths
*
* Stuff that needs no explaining
============================================================= */
.u-content-width {
max-width: 100%;
width: 100%;
}
@media (min-width: 1024px) {
.u-content-width {
width: 70%;
max-width: 70%;
}
}
@media (min-width: 1024px) {
.u-content-width--large {
width: 85%;
max-width: 85%;
}
}
/** Generic
*
* Stuff that needs no explaining
============================================================= */
.u-above {
position: relative;
z-index: 99;
}
/** Cover
*
* Helper to cover a parent.
============================================================ */
.u-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/** No overflow
*
* Hide all overflow
============================================================ */
.u-no-overflow {
overflow: hidden;
}
/** Margin Padding Tools
*
* Helper to remove margin / padding from first or last of
* type, helpful with menus or lists
============================================================ */
.u-remove-first:first-of-type {
margin-left: 0;
padding-left: 0;
margin-top: 0;
}
.u-remove-last:last-of-type {
margin-right: 0;
padding-right: 0;
margin-bottom: 0;
}
/* No Scroll
============================================================ */
.u-no-scroll {
overflow-y: hidden;
}
/* Z Index
============================================================ */
.u-z-up {
z-index: 99;
}
/* No Whitespace
============================================================ */
.u-no-whitespace {
white-space: nowrap;
}
/* Icon Size
============================================================ */
.u-icon {
font-size: 24px;
width: 24px;
height: 24px;
}
/* Scroll Animate
============================================================ */
.u-scroll-animate {
transition: transform 400ms cubic-bezier(0.77, 0, 0.175, 1), opacity 400ms cubic-bezier(0.77, 0, 0.175, 1), background-color 400ms cubic-bezier(0.77, 0, 0.175, 1);
transform: translateY(20px);
opacity: 0;
}
.u-scroll-animate.animate {
opacity: 1;
transform: translateY(0);
}
/* Border Radius
============================================================ */
.u-border-radius {
border-radius: 3px;
}
.u-border-radius-2x {
border-radius: 6px;
}
.u-border-radius-3x {
border-radius: 9px;
}
/* Pointer
============================================================ */
.u-pointer {
cursor: pointer;
}
.u-not-allowed {
cursor: not-allowed;
}
/* Border Top
============================================================ */
.u-border-top {
border-top-width: 1px;
border-top-style: solid;
}
.u-border-top--white {
border-top-color: #fff;
}
.u-border-top--grey {
border-top-color: #f2f0f0;
}
.u-border-bottom {
border-bottom-width: 1px;
border-bottom-style: solid;
}
.u-border-bottom--white {
border-bottom-color: #fff;
}
.u-border-bottom--grey {
border-bottom-color: #f2f0f0;
}