html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
body {
margin: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
a {
background-color: transparent;
}
b,
strong {
font-weight: bolder;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
button,
input {
/* 1 */
overflow: visible;
}
button,
select {
/* 1 */
text-transform: none;
}
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
.list--unstyled {
margin: 0;
padding-left: 0;
list-style: none;
}
.list--gapped li {
margin-bottom: 0.5rem;
}
.list {
margin: 0;
padding-left: 0;
list-style: none;
}
.list__item {
display: inline-block;
}
.list__item ::before {
padding-left: 0.8rem;
content: "----";
}
.progress-indicator__list {
background-color: rgba(255, 255, 255, 0);
}
.t-title,
.title {
font-weight: 900;
line-height: 1.13;
font-size: 3.2rem;
margin-top: 4.5rem;
margin-bottom: 0;
}
@media (max-width: 415px) {
.t-title,
.title {
font-size: 2rem;
}
}
.t-title:first-child, .t-title--no-stack,
.title:first-child,
.title--no-stack {
margin-top: 0;
}
.t-title--inverted,
.title--inverted {
color: white;
}
.t-title--page,
.title--page {
font-weight: 900;
line-height: 1.13;
font-size: 6.4rem;
}
@media (max-width: 415px) {
.t-title--page,
.title--page {
font-size: 3.2rem;
}
}
.t-title__highlight,
.title__highlight {
color: #00bec8;
}
.t-title--large,
.title--large {
font-weight: 900;
line-height: 1.13;
font-size: 4.4rem;
margin-top: 10rem;
}
@media (max-width: 415px) {
.t-title--large,
.title--large {
font-size: 2.7rem;
}
}
.t-title--small,
.title--small {
font-weight: 900;
line-height: 1.13;
font-size: 2.4rem;
margin-top: 2rem;
}
@media (max-width: 415px) {
.t-title--small,
.title--small {
font-size: 1.8rem;
}
}
.t-title--form,
.title--form {
font-weight: 900;
line-height: 1.13;
font-size: 1.6rem;
}
.t-title__icon,
.title__icon {
margin-bottom: 1.8rem;
}
.t-title--inline,
.title--inline {
display: inline-block;
}
.t-lead {
font-size: 2.5rem;
line-height: 1.25;
font-weight: normal;
}
.t-intro {
position: relative;
margin: 2rem 30% 6.4rem 0;
}
@media (max-width: 768px) {
.t-intro {
margin-right: 15%;
}
}
@media (max-width: 415px) {
.t-intro {
margin-right: 0;
}
}
.t-intro__top {
position: absolute;
top: 0;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
margin: 0;
}
.t-icon-label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.t-icon-label__icon {
-ms-flex-item-align: start;
align-self: flex-start;
}
.t-icon-label__label {
margin-left: 0.4em;
}
a {
color: #003cb4;
text-decoration: underline;
}
.t-paragraph,
p {
margin-top: 1em;
}
.container {
position: relative;
max-width: 1440px;
margin: 0 auto;
/*background: linear-gradient(90deg, #fff 50%, rgba(hotpink, .5) calc(50% + 1px));
background-size: 6.25% 100%;*/
}
.container__overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
pointer-events: none;
}
.container__overlay > * {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.container__overlay > *:nth-child(2n+1) {
background: rgba(0, 255, 0, 0.2);
}
.l-content-width {
max-width: 96rem;
margin-left: auto;
margin-right: auto;
}
.l-grid {
--size-grid-gutter: 2.4rem;
--size-gutter: var(--size-grid-gutter, 1rem);
--size-gutter-x: var(--size-gutter);
--size-gutter-y: calc(var(--size-gutter) * 0.5);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: calc(100% + var(--size-gutter-x));
margin-left: calc(-1 * var(--size-gutter-x));
margin-bottom: calc(-1 * var(--size-gutter-y));
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0;
}
.l-grid__cell {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
margin-left: var(--size-gutter-x);
margin-bottom: var(--size-gutter-y);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.l-grid__cell[class*="--pull-"], .l-grid__cell[class*="--push-"] {
position: relative;
}
.l-grid__cell--1\/1 {
width: calc(99.905% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/1::before {
display: block;
content: "grid-debug: 100%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/1 {
left: calc(99.905% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/1 {
right: calc(99.905% - var(--size-gutter-x));
}
.l-grid__cell--1\/2 {
width: calc(49.9525% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/2::before {
display: block;
content: "grid-debug: 50%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/2 {
left: calc(49.9525% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/2 {
right: calc(49.9525% - var(--size-gutter-x));
}
.l-grid__cell--1\/3 {
width: calc(33.3016666667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/3::before {
display: block;
content: "grid-debug: 33.3333333333%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/3 {
left: calc(33.3016666667% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/3 {
right: calc(33.3016666667% - var(--size-gutter-x));
}
.l-grid__cell--2\/3 {
width: calc(66.6033333333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--2\/3::before {
display: block;
content: "grid-debug: 66.6666666667%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--2\/3 {
left: calc(66.6033333333% - var(--size-gutter-x));
}
.l-grid__cell--pull--2\/3 {
right: calc(66.6033333333% - var(--size-gutter-x));
}
.l-grid__cell--1\/4 {
width: calc(24.97625% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/4::before {
display: block;
content: "grid-debug: 25%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/4 {
left: calc(24.97625% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/4 {
right: calc(24.97625% - var(--size-gutter-x));
}
.l-grid__cell--3\/4 {
width: calc(74.92875% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--3\/4::before {
display: block;
content: "grid-debug: 75%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--3\/4 {
left: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--pull--3\/4 {
right: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--1\/5 {
width: calc(19.981% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/5::before {
display: block;
content: "grid-debug: 20%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/5 {
left: calc(19.981% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/5 {
right: calc(19.981% - var(--size-gutter-x));
}
.l-grid__cell--2\/5 {
width: calc(39.962% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--2\/5::before {
display: block;
content: "grid-debug: 40%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--2\/5 {
left: calc(39.962% - var(--size-gutter-x));
}
.l-grid__cell--pull--2\/5 {
right: calc(39.962% - var(--size-gutter-x));
}
.l-grid__cell--3\/5 {
width: calc(59.943% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--3\/5::before {
display: block;
content: "grid-debug: 60%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--3\/5 {
left: calc(59.943% - var(--size-gutter-x));
}
.l-grid__cell--pull--3\/5 {
right: calc(59.943% - var(--size-gutter-x));
}
.l-grid__cell--1\/6 {
width: calc(16.6508333333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/6::before {
display: block;
content: "grid-debug: 16.6666666667%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/6 {
left: calc(16.6508333333% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/6 {
right: calc(16.6508333333% - var(--size-gutter-x));
}
.l-grid__cell--1\/8 {
width: calc(12.488125% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/8::before {
display: block;
content: "grid-debug: 12.5%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/8 {
left: calc(12.488125% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/8 {
right: calc(12.488125% - var(--size-gutter-x));
}
.l-grid__cell--6\/8 {
width: calc(74.92875% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--6\/8::before {
display: block;
content: "grid-debug: 75%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--6\/8 {
left: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--pull--6\/8 {
right: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--11\/12 {
width: calc(91.5795833333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--11\/12::before {
display: block;
content: "grid-debug: 91.6666666667%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--11\/12 {
left: calc(91.5795833333% - var(--size-gutter-x));
}
.l-grid__cell--pull--11\/12 {
right: calc(91.5795833333% - var(--size-gutter-x));
}
.l-grid__cell--7\/12 {
width: calc(58.2779166667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--7\/12::before {
display: block;
content: "grid-debug: 58.3333333333%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--7\/12 {
left: calc(58.2779166667% - var(--size-gutter-x));
}
.l-grid__cell--pull--7\/12 {
right: calc(58.2779166667% - var(--size-gutter-x));
}
.l-grid__cell--1\/12 {
width: calc(8.3254166667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/12::before {
display: block;
content: "grid-debug: 8.3333333333%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/12 {
left: calc(8.3254166667% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/12 {
right: calc(8.3254166667% - var(--size-gutter-x));
}
.l-grid__cell--1\/24 {
width: calc(4.1627083333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/24::before {
display: block;
content: "grid-debug: 4.1666666667%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/24 {
left: calc(4.1627083333% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/24 {
right: calc(4.1627083333% - var(--size-gutter-x));
}
.l-grid__cell--5\/12 {
width: calc(41.6270833333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--5\/12::before {
display: block;
content: "grid-debug: 41.6666666667%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--5\/12 {
left: calc(41.6270833333% - var(--size-gutter-x));
}
.l-grid__cell--pull--5\/12 {
right: calc(41.6270833333% - var(--size-gutter-x));
}
.l-grid__cell--1 {
width: calc(4.1627083333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1::before {
display: block;
content: "grid-debug: 4.1666666667%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1 {
left: calc(4.1627083333% - var(--size-gutter-x));
}
.l-grid__cell--pull--1 {
right: calc(4.1627083333% - var(--size-gutter-x));
}
.l-grid__cell--2 {
width: calc(8.3254166667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--2::before {
display: block;
content: "grid-debug: 8.3333333333%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--2 {
left: calc(8.3254166667% - var(--size-gutter-x));
}
.l-grid__cell--pull--2 {
right: calc(8.3254166667% - var(--size-gutter-x));
}
.l-grid__cell--3 {
width: calc(12.488125% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--3::before {
display: block;
content: "grid-debug: 12.5%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--3 {
left: calc(12.488125% - var(--size-gutter-x));
}
.l-grid__cell--pull--3 {
right: calc(12.488125% - var(--size-gutter-x));
}
.l-grid__cell--4 {
width: calc(16.6508333333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--4::before {
display: block;
content: "grid-debug: 16.6666666667%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--4 {
left: calc(16.6508333333% - var(--size-gutter-x));
}
.l-grid__cell--pull--4 {
right: calc(16.6508333333% - var(--size-gutter-x));
}
.l-grid__cell--5 {
width: calc(20.8135416667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--5::before {
display: block;
content: "grid-debug: 20.8333333333%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--5 {
left: calc(20.8135416667% - var(--size-gutter-x));
}
.l-grid__cell--pull--5 {
right: calc(20.8135416667% - var(--size-gutter-x));
}
.l-grid__cell--6 {
width: calc(24.97625% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--6::before {
display: block;
content: "grid-debug: 25%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--6 {
left: calc(24.97625% - var(--size-gutter-x));
}
.l-grid__cell--pull--6 {
right: calc(24.97625% - var(--size-gutter-x));
}
.l-grid__cell--7 {
width: calc(29.1389583333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--7::before {
display: block;
content: "grid-debug: 29.1666666667%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--7 {
left: calc(29.1389583333% - var(--size-gutter-x));
}
.l-grid__cell--pull--7 {
right: calc(29.1389583333% - var(--size-gutter-x));
}
.l-grid__cell--8 {
width: calc(33.3016666667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--8::before {
display: block;
content: "grid-debug: 33.3333333333%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--8 {
left: calc(33.3016666667% - var(--size-gutter-x));
}
.l-grid__cell--pull--8 {
right: calc(33.3016666667% - var(--size-gutter-x));
}
.l-grid__cell--9 {
width: calc(37.464375% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--9::before {
display: block;
content: "grid-debug: 37.5%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--9 {
left: calc(37.464375% - var(--size-gutter-x));
}
.l-grid__cell--pull--9 {
right: calc(37.464375% - var(--size-gutter-x));
}
.l-grid__cell--10 {
width: calc(41.6270833333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--10::before {
display: block;
content: "grid-debug: 41.6666666667%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--10 {
left: calc(41.6270833333% - var(--size-gutter-x));
}
.l-grid__cell--pull--10 {
right: calc(41.6270833333% - var(--size-gutter-x));
}
.l-grid__cell--11 {
width: calc(45.7897916667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--11::before {
display: block;
content: "grid-debug: 45.8333333333%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--11 {
left: calc(45.7897916667% - var(--size-gutter-x));
}
.l-grid__cell--pull--11 {
right: calc(45.7897916667% - var(--size-gutter-x));
}
.l-grid__cell--12 {
width: calc(49.9525% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--12::before {
display: block;
content: "grid-debug: 50%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--12 {
left: calc(49.9525% - var(--size-gutter-x));
}
.l-grid__cell--pull--12 {
right: calc(49.9525% - var(--size-gutter-x));
}
.l-grid__cell--13 {
width: calc(54.1152083333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--13::before {
display: block;
content: "grid-debug: 54.1666666667%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--13 {
left: calc(54.1152083333% - var(--size-gutter-x));
}
.l-grid__cell--pull--13 {
right: calc(54.1152083333% - var(--size-gutter-x));
}
.l-grid__cell--14 {
width: calc(58.2779166667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--14::before {
display: block;
content: "grid-debug: 58.3333333333%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--14 {
left: calc(58.2779166667% - var(--size-gutter-x));
}
.l-grid__cell--pull--14 {
right: calc(58.2779166667% - var(--size-gutter-x));
}
.l-grid__cell--15 {
width: calc(62.440625% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--15::before {
display: block;
content: "grid-debug: 62.5%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--15 {
left: calc(62.440625% - var(--size-gutter-x));
}
.l-grid__cell--pull--15 {
right: calc(62.440625% - var(--size-gutter-x));
}
.l-grid__cell--16 {
width: calc(66.6033333333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--16::before {
display: block;
content: "grid-debug: 66.6666666667%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--16 {
left: calc(66.6033333333% - var(--size-gutter-x));
}
.l-grid__cell--pull--16 {
right: calc(66.6033333333% - var(--size-gutter-x));
}
.l-grid__cell--17 {
width: calc(70.7660416667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--17::before {
display: block;
content: "grid-debug: 70.8333333333%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--17 {
left: calc(70.7660416667% - var(--size-gutter-x));
}
.l-grid__cell--pull--17 {
right: calc(70.7660416667% - var(--size-gutter-x));
}
.l-grid__cell--18 {
width: calc(74.92875% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--18::before {
display: block;
content: "grid-debug: 75%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--18 {
left: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--pull--18 {
right: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--19 {
width: calc(79.0914583333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--19::before {
display: block;
content: "grid-debug: 79.1666666667%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--19 {
left: calc(79.0914583333% - var(--size-gutter-x));
}
.l-grid__cell--pull--19 {
right: calc(79.0914583333% - var(--size-gutter-x));
}
.l-grid__cell--20 {
width: calc(83.2541666667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--20::before {
display: block;
content: "grid-debug: 83.3333333333%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--20 {
left: calc(83.2541666667% - var(--size-gutter-x));
}
.l-grid__cell--pull--20 {
right: calc(83.2541666667% - var(--size-gutter-x));
}
.l-grid__cell--21 {
width: calc(87.416875% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--21::before {
display: block;
content: "grid-debug: 87.5%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--21 {
left: calc(87.416875% - var(--size-gutter-x));
}
.l-grid__cell--pull--21 {
right: calc(87.416875% - var(--size-gutter-x));
}
.l-grid__cell--22 {
width: calc(91.5795833333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--22::before {
display: block;
content: "grid-debug: 91.6666666667%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--22 {
left: calc(91.5795833333% - var(--size-gutter-x));
}
.l-grid__cell--pull--22 {
right: calc(91.5795833333% - var(--size-gutter-x));
}
.l-grid__cell--23 {
width: calc(95.7422916667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--23::before {
display: block;
content: "grid-debug: 95.8333333333%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--23 {
left: calc(95.7422916667% - var(--size-gutter-x));
}
.l-grid__cell--pull--23 {
right: calc(95.7422916667% - var(--size-gutter-x));
}
.l-grid__cell--24 {
width: calc(99.905% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--24::before {
display: block;
content: "grid-debug: 100%@";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--24 {
left: calc(99.905% - var(--size-gutter-x));
}
.l-grid__cell--pull--24 {
right: calc(99.905% - var(--size-gutter-x));
}
.l-grid__cell--push--none {
left: 0;
}
.l-grid__cell--pull--none {
right: 0;
}
@media (max-width: 768px) {
.l-grid__cell--1\/1\@tablet {
width: calc(99.905% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/1\@tablet::before {
display: block;
content: "grid-debug: 100%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/1\@tablet {
left: calc(99.905% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/1\@tablet {
right: calc(99.905% - var(--size-gutter-x));
}
.l-grid__cell--1\/2\@tablet {
width: calc(49.9525% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/2\@tablet::before {
display: block;
content: "grid-debug: 50%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/2\@tablet {
left: calc(49.9525% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/2\@tablet {
right: calc(49.9525% - var(--size-gutter-x));
}
.l-grid__cell--1\/3\@tablet {
width: calc(33.3016666667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/3\@tablet::before {
display: block;
content: "grid-debug: 33.3333333333%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/3\@tablet {
left: calc(33.3016666667% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/3\@tablet {
right: calc(33.3016666667% - var(--size-gutter-x));
}
.l-grid__cell--2\/3\@tablet {
width: calc(66.6033333333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--2\/3\@tablet::before {
display: block;
content: "grid-debug: 66.6666666667%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--2\/3\@tablet {
left: calc(66.6033333333% - var(--size-gutter-x));
}
.l-grid__cell--pull--2\/3\@tablet {
right: calc(66.6033333333% - var(--size-gutter-x));
}
.l-grid__cell--1\/4\@tablet {
width: calc(24.97625% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/4\@tablet::before {
display: block;
content: "grid-debug: 25%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/4\@tablet {
left: calc(24.97625% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/4\@tablet {
right: calc(24.97625% - var(--size-gutter-x));
}
.l-grid__cell--3\/4\@tablet {
width: calc(74.92875% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--3\/4\@tablet::before {
display: block;
content: "grid-debug: 75%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--3\/4\@tablet {
left: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--pull--3\/4\@tablet {
right: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--1\/5\@tablet {
width: calc(19.981% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/5\@tablet::before {
display: block;
content: "grid-debug: 20%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/5\@tablet {
left: calc(19.981% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/5\@tablet {
right: calc(19.981% - var(--size-gutter-x));
}
.l-grid__cell--2\/5\@tablet {
width: calc(39.962% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--2\/5\@tablet::before {
display: block;
content: "grid-debug: 40%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--2\/5\@tablet {
left: calc(39.962% - var(--size-gutter-x));
}
.l-grid__cell--pull--2\/5\@tablet {
right: calc(39.962% - var(--size-gutter-x));
}
.l-grid__cell--3\/5\@tablet {
width: calc(59.943% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--3\/5\@tablet::before {
display: block;
content: "grid-debug: 60%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--3\/5\@tablet {
left: calc(59.943% - var(--size-gutter-x));
}
.l-grid__cell--pull--3\/5\@tablet {
right: calc(59.943% - var(--size-gutter-x));
}
.l-grid__cell--1\/6\@tablet {
width: calc(16.6508333333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/6\@tablet::before {
display: block;
content: "grid-debug: 16.6666666667%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/6\@tablet {
left: calc(16.6508333333% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/6\@tablet {
right: calc(16.6508333333% - var(--size-gutter-x));
}
.l-grid__cell--1\/8\@tablet {
width: calc(12.488125% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/8\@tablet::before {
display: block;
content: "grid-debug: 12.5%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/8\@tablet {
left: calc(12.488125% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/8\@tablet {
right: calc(12.488125% - var(--size-gutter-x));
}
.l-grid__cell--6\/8\@tablet {
width: calc(74.92875% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--6\/8\@tablet::before {
display: block;
content: "grid-debug: 75%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--6\/8\@tablet {
left: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--pull--6\/8\@tablet {
right: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--11\/12\@tablet {
width: calc(91.5795833333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--11\/12\@tablet::before {
display: block;
content: "grid-debug: 91.6666666667%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--11\/12\@tablet {
left: calc(91.5795833333% - var(--size-gutter-x));
}
.l-grid__cell--pull--11\/12\@tablet {
right: calc(91.5795833333% - var(--size-gutter-x));
}
.l-grid__cell--7\/12\@tablet {
width: calc(58.2779166667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--7\/12\@tablet::before {
display: block;
content: "grid-debug: 58.3333333333%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--7\/12\@tablet {
left: calc(58.2779166667% - var(--size-gutter-x));
}
.l-grid__cell--pull--7\/12\@tablet {
right: calc(58.2779166667% - var(--size-gutter-x));
}
.l-grid__cell--1\/12\@tablet {
width: calc(8.3254166667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/12\@tablet::before {
display: block;
content: "grid-debug: 8.3333333333%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/12\@tablet {
left: calc(8.3254166667% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/12\@tablet {
right: calc(8.3254166667% - var(--size-gutter-x));
}
.l-grid__cell--1\/24\@tablet {
width: calc(4.1627083333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/24\@tablet::before {
display: block;
content: "grid-debug: 4.1666666667%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/24\@tablet {
left: calc(4.1627083333% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/24\@tablet {
right: calc(4.1627083333% - var(--size-gutter-x));
}
.l-grid__cell--5\/12\@tablet {
width: calc(41.6270833333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--5\/12\@tablet::before {
display: block;
content: "grid-debug: 41.6666666667%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--5\/12\@tablet {
left: calc(41.6270833333% - var(--size-gutter-x));
}
.l-grid__cell--pull--5\/12\@tablet {
right: calc(41.6270833333% - var(--size-gutter-x));
}
.l-grid__cell--1\@tablet {
width: calc(4.1627083333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\@tablet::before {
display: block;
content: "grid-debug: 4.1666666667%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\@tablet {
left: calc(4.1627083333% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\@tablet {
right: calc(4.1627083333% - var(--size-gutter-x));
}
.l-grid__cell--2\@tablet {
width: calc(8.3254166667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--2\@tablet::before {
display: block;
content: "grid-debug: 8.3333333333%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--2\@tablet {
left: calc(8.3254166667% - var(--size-gutter-x));
}
.l-grid__cell--pull--2\@tablet {
right: calc(8.3254166667% - var(--size-gutter-x));
}
.l-grid__cell--3\@tablet {
width: calc(12.488125% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--3\@tablet::before {
display: block;
content: "grid-debug: 12.5%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--3\@tablet {
left: calc(12.488125% - var(--size-gutter-x));
}
.l-grid__cell--pull--3\@tablet {
right: calc(12.488125% - var(--size-gutter-x));
}
.l-grid__cell--4\@tablet {
width: calc(16.6508333333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--4\@tablet::before {
display: block;
content: "grid-debug: 16.6666666667%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--4\@tablet {
left: calc(16.6508333333% - var(--size-gutter-x));
}
.l-grid__cell--pull--4\@tablet {
right: calc(16.6508333333% - var(--size-gutter-x));
}
.l-grid__cell--5\@tablet {
width: calc(20.8135416667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--5\@tablet::before {
display: block;
content: "grid-debug: 20.8333333333%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--5\@tablet {
left: calc(20.8135416667% - var(--size-gutter-x));
}
.l-grid__cell--pull--5\@tablet {
right: calc(20.8135416667% - var(--size-gutter-x));
}
.l-grid__cell--6\@tablet {
width: calc(24.97625% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--6\@tablet::before {
display: block;
content: "grid-debug: 25%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--6\@tablet {
left: calc(24.97625% - var(--size-gutter-x));
}
.l-grid__cell--pull--6\@tablet {
right: calc(24.97625% - var(--size-gutter-x));
}
.l-grid__cell--7\@tablet {
width: calc(29.1389583333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--7\@tablet::before {
display: block;
content: "grid-debug: 29.1666666667%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--7\@tablet {
left: calc(29.1389583333% - var(--size-gutter-x));
}
.l-grid__cell--pull--7\@tablet {
right: calc(29.1389583333% - var(--size-gutter-x));
}
.l-grid__cell--8\@tablet {
width: calc(33.3016666667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--8\@tablet::before {
display: block;
content: "grid-debug: 33.3333333333%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--8\@tablet {
left: calc(33.3016666667% - var(--size-gutter-x));
}
.l-grid__cell--pull--8\@tablet {
right: calc(33.3016666667% - var(--size-gutter-x));
}
.l-grid__cell--9\@tablet {
width: calc(37.464375% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--9\@tablet::before {
display: block;
content: "grid-debug: 37.5%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--9\@tablet {
left: calc(37.464375% - var(--size-gutter-x));
}
.l-grid__cell--pull--9\@tablet {
right: calc(37.464375% - var(--size-gutter-x));
}
.l-grid__cell--10\@tablet {
width: calc(41.6270833333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--10\@tablet::before {
display: block;
content: "grid-debug: 41.6666666667%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--10\@tablet {
left: calc(41.6270833333% - var(--size-gutter-x));
}
.l-grid__cell--pull--10\@tablet {
right: calc(41.6270833333% - var(--size-gutter-x));
}
.l-grid__cell--11\@tablet {
width: calc(45.7897916667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--11\@tablet::before {
display: block;
content: "grid-debug: 45.8333333333%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--11\@tablet {
left: calc(45.7897916667% - var(--size-gutter-x));
}
.l-grid__cell--pull--11\@tablet {
right: calc(45.7897916667% - var(--size-gutter-x));
}
.l-grid__cell--12\@tablet {
width: calc(49.9525% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--12\@tablet::before {
display: block;
content: "grid-debug: 50%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--12\@tablet {
left: calc(49.9525% - var(--size-gutter-x));
}
.l-grid__cell--pull--12\@tablet {
right: calc(49.9525% - var(--size-gutter-x));
}
.l-grid__cell--13\@tablet {
width: calc(54.1152083333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--13\@tablet::before {
display: block;
content: "grid-debug: 54.1666666667%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--13\@tablet {
left: calc(54.1152083333% - var(--size-gutter-x));
}
.l-grid__cell--pull--13\@tablet {
right: calc(54.1152083333% - var(--size-gutter-x));
}
.l-grid__cell--14\@tablet {
width: calc(58.2779166667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--14\@tablet::before {
display: block;
content: "grid-debug: 58.3333333333%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--14\@tablet {
left: calc(58.2779166667% - var(--size-gutter-x));
}
.l-grid__cell--pull--14\@tablet {
right: calc(58.2779166667% - var(--size-gutter-x));
}
.l-grid__cell--15\@tablet {
width: calc(62.440625% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--15\@tablet::before {
display: block;
content: "grid-debug: 62.5%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--15\@tablet {
left: calc(62.440625% - var(--size-gutter-x));
}
.l-grid__cell--pull--15\@tablet {
right: calc(62.440625% - var(--size-gutter-x));
}
.l-grid__cell--16\@tablet {
width: calc(66.6033333333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--16\@tablet::before {
display: block;
content: "grid-debug: 66.6666666667%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--16\@tablet {
left: calc(66.6033333333% - var(--size-gutter-x));
}
.l-grid__cell--pull--16\@tablet {
right: calc(66.6033333333% - var(--size-gutter-x));
}
.l-grid__cell--17\@tablet {
width: calc(70.7660416667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--17\@tablet::before {
display: block;
content: "grid-debug: 70.8333333333%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--17\@tablet {
left: calc(70.7660416667% - var(--size-gutter-x));
}
.l-grid__cell--pull--17\@tablet {
right: calc(70.7660416667% - var(--size-gutter-x));
}
.l-grid__cell--18\@tablet {
width: calc(74.92875% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--18\@tablet::before {
display: block;
content: "grid-debug: 75%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--18\@tablet {
left: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--pull--18\@tablet {
right: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--19\@tablet {
width: calc(79.0914583333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--19\@tablet::before {
display: block;
content: "grid-debug: 79.1666666667%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--19\@tablet {
left: calc(79.0914583333% - var(--size-gutter-x));
}
.l-grid__cell--pull--19\@tablet {
right: calc(79.0914583333% - var(--size-gutter-x));
}
.l-grid__cell--20\@tablet {
width: calc(83.2541666667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--20\@tablet::before {
display: block;
content: "grid-debug: 83.3333333333%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--20\@tablet {
left: calc(83.2541666667% - var(--size-gutter-x));
}
.l-grid__cell--pull--20\@tablet {
right: calc(83.2541666667% - var(--size-gutter-x));
}
.l-grid__cell--21\@tablet {
width: calc(87.416875% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--21\@tablet::before {
display: block;
content: "grid-debug: 87.5%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--21\@tablet {
left: calc(87.416875% - var(--size-gutter-x));
}
.l-grid__cell--pull--21\@tablet {
right: calc(87.416875% - var(--size-gutter-x));
}
.l-grid__cell--22\@tablet {
width: calc(91.5795833333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--22\@tablet::before {
display: block;
content: "grid-debug: 91.6666666667%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--22\@tablet {
left: calc(91.5795833333% - var(--size-gutter-x));
}
.l-grid__cell--pull--22\@tablet {
right: calc(91.5795833333% - var(--size-gutter-x));
}
.l-grid__cell--23\@tablet {
width: calc(95.7422916667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--23\@tablet::before {
display: block;
content: "grid-debug: 95.8333333333%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--23\@tablet {
left: calc(95.7422916667% - var(--size-gutter-x));
}
.l-grid__cell--pull--23\@tablet {
right: calc(95.7422916667% - var(--size-gutter-x));
}
.l-grid__cell--24\@tablet {
width: calc(99.905% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--24\@tablet::before {
display: block;
content: "grid-debug: 100%@tablet";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--24\@tablet {
left: calc(99.905% - var(--size-gutter-x));
}
.l-grid__cell--pull--24\@tablet {
right: calc(99.905% - var(--size-gutter-x));
}
.l-grid__cell--push--none\@tablet {
left: 0;
}
.l-grid__cell--pull--none\@tablet {
right: 0;
}
}
@media (max-width: 415px) {
.l-grid__cell--1\/1\@phone {
width: calc(99.905% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/1\@phone::before {
display: block;
content: "grid-debug: 100%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/1\@phone {
left: calc(99.905% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/1\@phone {
right: calc(99.905% - var(--size-gutter-x));
}
.l-grid__cell--1\/2\@phone {
width: calc(49.9525% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/2\@phone::before {
display: block;
content: "grid-debug: 50%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/2\@phone {
left: calc(49.9525% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/2\@phone {
right: calc(49.9525% - var(--size-gutter-x));
}
.l-grid__cell--1\/3\@phone {
width: calc(33.3016666667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/3\@phone::before {
display: block;
content: "grid-debug: 33.3333333333%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/3\@phone {
left: calc(33.3016666667% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/3\@phone {
right: calc(33.3016666667% - var(--size-gutter-x));
}
.l-grid__cell--2\/3\@phone {
width: calc(66.6033333333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--2\/3\@phone::before {
display: block;
content: "grid-debug: 66.6666666667%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--2\/3\@phone {
left: calc(66.6033333333% - var(--size-gutter-x));
}
.l-grid__cell--pull--2\/3\@phone {
right: calc(66.6033333333% - var(--size-gutter-x));
}
.l-grid__cell--1\/4\@phone {
width: calc(24.97625% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/4\@phone::before {
display: block;
content: "grid-debug: 25%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/4\@phone {
left: calc(24.97625% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/4\@phone {
right: calc(24.97625% - var(--size-gutter-x));
}
.l-grid__cell--3\/4\@phone {
width: calc(74.92875% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--3\/4\@phone::before {
display: block;
content: "grid-debug: 75%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--3\/4\@phone {
left: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--pull--3\/4\@phone {
right: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--1\/5\@phone {
width: calc(19.981% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/5\@phone::before {
display: block;
content: "grid-debug: 20%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/5\@phone {
left: calc(19.981% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/5\@phone {
right: calc(19.981% - var(--size-gutter-x));
}
.l-grid__cell--2\/5\@phone {
width: calc(39.962% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--2\/5\@phone::before {
display: block;
content: "grid-debug: 40%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--2\/5\@phone {
left: calc(39.962% - var(--size-gutter-x));
}
.l-grid__cell--pull--2\/5\@phone {
right: calc(39.962% - var(--size-gutter-x));
}
.l-grid__cell--3\/5\@phone {
width: calc(59.943% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--3\/5\@phone::before {
display: block;
content: "grid-debug: 60%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--3\/5\@phone {
left: calc(59.943% - var(--size-gutter-x));
}
.l-grid__cell--pull--3\/5\@phone {
right: calc(59.943% - var(--size-gutter-x));
}
.l-grid__cell--1\/6\@phone {
width: calc(16.6508333333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/6\@phone::before {
display: block;
content: "grid-debug: 16.6666666667%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/6\@phone {
left: calc(16.6508333333% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/6\@phone {
right: calc(16.6508333333% - var(--size-gutter-x));
}
.l-grid__cell--1\/8\@phone {
width: calc(12.488125% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/8\@phone::before {
display: block;
content: "grid-debug: 12.5%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/8\@phone {
left: calc(12.488125% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/8\@phone {
right: calc(12.488125% - var(--size-gutter-x));
}
.l-grid__cell--6\/8\@phone {
width: calc(74.92875% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--6\/8\@phone::before {
display: block;
content: "grid-debug: 75%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--6\/8\@phone {
left: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--pull--6\/8\@phone {
right: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--11\/12\@phone {
width: calc(91.5795833333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--11\/12\@phone::before {
display: block;
content: "grid-debug: 91.6666666667%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--11\/12\@phone {
left: calc(91.5795833333% - var(--size-gutter-x));
}
.l-grid__cell--pull--11\/12\@phone {
right: calc(91.5795833333% - var(--size-gutter-x));
}
.l-grid__cell--7\/12\@phone {
width: calc(58.2779166667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--7\/12\@phone::before {
display: block;
content: "grid-debug: 58.3333333333%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--7\/12\@phone {
left: calc(58.2779166667% - var(--size-gutter-x));
}
.l-grid__cell--pull--7\/12\@phone {
right: calc(58.2779166667% - var(--size-gutter-x));
}
.l-grid__cell--1\/12\@phone {
width: calc(8.3254166667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/12\@phone::before {
display: block;
content: "grid-debug: 8.3333333333%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/12\@phone {
left: calc(8.3254166667% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/12\@phone {
right: calc(8.3254166667% - var(--size-gutter-x));
}
.l-grid__cell--1\/24\@phone {
width: calc(4.1627083333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\/24\@phone::before {
display: block;
content: "grid-debug: 4.1666666667%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\/24\@phone {
left: calc(4.1627083333% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\/24\@phone {
right: calc(4.1627083333% - var(--size-gutter-x));
}
.l-grid__cell--5\/12\@phone {
width: calc(41.6270833333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--5\/12\@phone::before {
display: block;
content: "grid-debug: 41.6666666667%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--5\/12\@phone {
left: calc(41.6270833333% - var(--size-gutter-x));
}
.l-grid__cell--pull--5\/12\@phone {
right: calc(41.6270833333% - var(--size-gutter-x));
}
.l-grid__cell--1\@phone {
width: calc(4.1627083333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--1\@phone::before {
display: block;
content: "grid-debug: 4.1666666667%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--1\@phone {
left: calc(4.1627083333% - var(--size-gutter-x));
}
.l-grid__cell--pull--1\@phone {
right: calc(4.1627083333% - var(--size-gutter-x));
}
.l-grid__cell--2\@phone {
width: calc(8.3254166667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--2\@phone::before {
display: block;
content: "grid-debug: 8.3333333333%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--2\@phone {
left: calc(8.3254166667% - var(--size-gutter-x));
}
.l-grid__cell--pull--2\@phone {
right: calc(8.3254166667% - var(--size-gutter-x));
}
.l-grid__cell--3\@phone {
width: calc(12.488125% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--3\@phone::before {
display: block;
content: "grid-debug: 12.5%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--3\@phone {
left: calc(12.488125% - var(--size-gutter-x));
}
.l-grid__cell--pull--3\@phone {
right: calc(12.488125% - var(--size-gutter-x));
}
.l-grid__cell--4\@phone {
width: calc(16.6508333333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--4\@phone::before {
display: block;
content: "grid-debug: 16.6666666667%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--4\@phone {
left: calc(16.6508333333% - var(--size-gutter-x));
}
.l-grid__cell--pull--4\@phone {
right: calc(16.6508333333% - var(--size-gutter-x));
}
.l-grid__cell--5\@phone {
width: calc(20.8135416667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--5\@phone::before {
display: block;
content: "grid-debug: 20.8333333333%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--5\@phone {
left: calc(20.8135416667% - var(--size-gutter-x));
}
.l-grid__cell--pull--5\@phone {
right: calc(20.8135416667% - var(--size-gutter-x));
}
.l-grid__cell--6\@phone {
width: calc(24.97625% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--6\@phone::before {
display: block;
content: "grid-debug: 25%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--6\@phone {
left: calc(24.97625% - var(--size-gutter-x));
}
.l-grid__cell--pull--6\@phone {
right: calc(24.97625% - var(--size-gutter-x));
}
.l-grid__cell--7\@phone {
width: calc(29.1389583333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--7\@phone::before {
display: block;
content: "grid-debug: 29.1666666667%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--7\@phone {
left: calc(29.1389583333% - var(--size-gutter-x));
}
.l-grid__cell--pull--7\@phone {
right: calc(29.1389583333% - var(--size-gutter-x));
}
.l-grid__cell--8\@phone {
width: calc(33.3016666667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--8\@phone::before {
display: block;
content: "grid-debug: 33.3333333333%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--8\@phone {
left: calc(33.3016666667% - var(--size-gutter-x));
}
.l-grid__cell--pull--8\@phone {
right: calc(33.3016666667% - var(--size-gutter-x));
}
.l-grid__cell--9\@phone {
width: calc(37.464375% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--9\@phone::before {
display: block;
content: "grid-debug: 37.5%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--9\@phone {
left: calc(37.464375% - var(--size-gutter-x));
}
.l-grid__cell--pull--9\@phone {
right: calc(37.464375% - var(--size-gutter-x));
}
.l-grid__cell--10\@phone {
width: calc(41.6270833333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--10\@phone::before {
display: block;
content: "grid-debug: 41.6666666667%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--10\@phone {
left: calc(41.6270833333% - var(--size-gutter-x));
}
.l-grid__cell--pull--10\@phone {
right: calc(41.6270833333% - var(--size-gutter-x));
}
.l-grid__cell--11\@phone {
width: calc(45.7897916667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--11\@phone::before {
display: block;
content: "grid-debug: 45.8333333333%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--11\@phone {
left: calc(45.7897916667% - var(--size-gutter-x));
}
.l-grid__cell--pull--11\@phone {
right: calc(45.7897916667% - var(--size-gutter-x));
}
.l-grid__cell--12\@phone {
width: calc(49.9525% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--12\@phone::before {
display: block;
content: "grid-debug: 50%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--12\@phone {
left: calc(49.9525% - var(--size-gutter-x));
}
.l-grid__cell--pull--12\@phone {
right: calc(49.9525% - var(--size-gutter-x));
}
.l-grid__cell--13\@phone {
width: calc(54.1152083333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--13\@phone::before {
display: block;
content: "grid-debug: 54.1666666667%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--13\@phone {
left: calc(54.1152083333% - var(--size-gutter-x));
}
.l-grid__cell--pull--13\@phone {
right: calc(54.1152083333% - var(--size-gutter-x));
}
.l-grid__cell--14\@phone {
width: calc(58.2779166667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--14\@phone::before {
display: block;
content: "grid-debug: 58.3333333333%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--14\@phone {
left: calc(58.2779166667% - var(--size-gutter-x));
}
.l-grid__cell--pull--14\@phone {
right: calc(58.2779166667% - var(--size-gutter-x));
}
.l-grid__cell--15\@phone {
width: calc(62.440625% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--15\@phone::before {
display: block;
content: "grid-debug: 62.5%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--15\@phone {
left: calc(62.440625% - var(--size-gutter-x));
}
.l-grid__cell--pull--15\@phone {
right: calc(62.440625% - var(--size-gutter-x));
}
.l-grid__cell--16\@phone {
width: calc(66.6033333333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--16\@phone::before {
display: block;
content: "grid-debug: 66.6666666667%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--16\@phone {
left: calc(66.6033333333% - var(--size-gutter-x));
}
.l-grid__cell--pull--16\@phone {
right: calc(66.6033333333% - var(--size-gutter-x));
}
.l-grid__cell--17\@phone {
width: calc(70.7660416667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--17\@phone::before {
display: block;
content: "grid-debug: 70.8333333333%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--17\@phone {
left: calc(70.7660416667% - var(--size-gutter-x));
}
.l-grid__cell--pull--17\@phone {
right: calc(70.7660416667% - var(--size-gutter-x));
}
.l-grid__cell--18\@phone {
width: calc(74.92875% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--18\@phone::before {
display: block;
content: "grid-debug: 75%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--18\@phone {
left: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--pull--18\@phone {
right: calc(74.92875% - var(--size-gutter-x));
}
.l-grid__cell--19\@phone {
width: calc(79.0914583333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--19\@phone::before {
display: block;
content: "grid-debug: 79.1666666667%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--19\@phone {
left: calc(79.0914583333% - var(--size-gutter-x));
}
.l-grid__cell--pull--19\@phone {
right: calc(79.0914583333% - var(--size-gutter-x));
}
.l-grid__cell--20\@phone {
width: calc(83.2541666667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--20\@phone::before {
display: block;
content: "grid-debug: 83.3333333333%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--20\@phone {
left: calc(83.2541666667% - var(--size-gutter-x));
}
.l-grid__cell--pull--20\@phone {
right: calc(83.2541666667% - var(--size-gutter-x));
}
.l-grid__cell--21\@phone {
width: calc(87.416875% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--21\@phone::before {
display: block;
content: "grid-debug: 87.5%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--21\@phone {
left: calc(87.416875% - var(--size-gutter-x));
}
.l-grid__cell--pull--21\@phone {
right: calc(87.416875% - var(--size-gutter-x));
}
.l-grid__cell--22\@phone {
width: calc(91.5795833333% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--22\@phone::before {
display: block;
content: "grid-debug: 91.6666666667%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--22\@phone {
left: calc(91.5795833333% - var(--size-gutter-x));
}
.l-grid__cell--pull--22\@phone {
right: calc(91.5795833333% - var(--size-gutter-x));
}
.l-grid__cell--23\@phone {
width: calc(95.7422916667% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--23\@phone::before {
display: block;
content: "grid-debug: 95.8333333333%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--23\@phone {
left: calc(95.7422916667% - var(--size-gutter-x));
}
.l-grid__cell--pull--23\@phone {
right: calc(95.7422916667% - var(--size-gutter-x));
}
.l-grid__cell--24\@phone {
width: calc(99.905% - var(--size-gutter-x));
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.debug .l-grid__cell--24\@phone::before {
display: block;
content: "grid-debug: 100%@phone";
padding: 0.5rem;
font-size: 1.6rem;
}
.l-grid__cell--push--24\@phone {
left: calc(99.905% - var(--size-gutter-x));
}
.l-grid__cell--pull--24\@phone {
right: calc(99.905% - var(--size-gutter-x));
}
.l-grid__cell--push--none\@phone {
left: 0;
}
.l-grid__cell--pull--none\@phone {
right: 0;
}
}
.l-grid__cell--min {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.l-grid__cell--align-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.l-grid__cell--align-bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.l-grid__cell--align-centered {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.l-grid__cell--break {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
width: 100%;
margin: 0;
padding: 0;
}
.l-grid--no-gap {
--size-gutter: 0rem;
--size-gutter-x: var(--size-gutter);
--size-gutter-y: var(--size-gutter);
}
.l-grid--gapped {
--size-gutter: size("layout-2xs");
--size-gutter-x: var(--size-gutter);
--size-gutter-y: var(--size-gutter);
}
.l-grid--gapped-double {
--size-gutter: size("layout-sm");
--size-gutter-x: var(--size-gutter);
--size-gutter-y: var(--size-gutter);
}
.l-grid--align-right {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.l-grid--align-bottom {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.l-grid--align-centered {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/**
* types:
* inline: [|---|----|--|-----| ]
* samewidth: [|-----|-----|-----|-----|]
* all direct children have the same width
* equidistant: [|---| |---| |---| |---|]
* space between children has the same with
* legend:
* list/wrap: [ ]
* list-item/chil: |--|
*/
.l-horizontal,
.l-vertical {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.l-horizontal--same-width > *,
.l-vertical--same-width > * {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.l-horizontal--responsive,
.l-vertical--responsive {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.l-horizontal--equidistant, .l-horizontal--extremities,
.l-vertical--equidistant,
.l-vertical--extremities {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.l-horizontal--align-right,
.l-vertical--align-right {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.l-horizontal--align-bottom,
.l-vertical--align-bottom {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.l-horizontal--align-center,
.l-vertical--align-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.l-horizontal--stretch,
.l-vertical--stretch {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.l-horizontal--inverted,
.l-vertical--inverted {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.l-vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.l-vertical--inverted {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.c-icon {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
vertical-align: middle;
line-height: 1;
pointer-events: none;
/* makes sure the icon is not underlined when part of a link */
text-decoration: none;
}
.c-icon:not(.c-icon--no-inline) + * {
/*
adds a gap to the element that follows an icon
I chose to do it this way, so the icon does not have a gap to the right
when its not followed by text or anything else. This might be problematic sometimes,
that's whe there is a "no-inline" modifier
*/
margin-left: 0.6em;
}
.c-icon__svg {
display: block;
width: auto;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*
by default, icons have the same color than the text
set a color on the c-icon element if you want to alter this
*/
fill: currentColor;
}
.c-icon--fluid {
width: 100%;
height: auto;
}
.c-icon--fluid .c-icon__svg {
position: relative;
width: 100%;
height: auto;
top: 0;
left: 0;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
/* modifier classes for fixed icon sizes */
.c-icon[class*=c-icon--xs] {
width: 1rem;
height: 1rem;
-webkit-box-flex: 0;
-ms-flex: 0 0 1rem;
flex: 0 0 1rem;
}
.c-icon[class*=c-icon--s] {
width: 1.6rem;
height: 1.6rem;
-webkit-box-flex: 0;
-ms-flex: 0 0 1.6rem;
flex: 0 0 1.6rem;
}
.c-icon[class*=c-icon--m] {
width: 2.1rem;
height: 2.1rem;
-webkit-box-flex: 0;
-ms-flex: 0 0 2.1rem;
flex: 0 0 2.1rem;
}
.c-icon[class*=c-icon--l] {
width: 3.2rem;
height: 3.2rem;
-webkit-box-flex: 0;
-ms-flex: 0 0 3.2rem;
flex: 0 0 3.2rem;
}
.c-icon[class*=c-icon--xl] {
width: 4.8rem;
height: 4.8rem;
-webkit-box-flex: 0;
-ms-flex: 0 0 4.8rem;
flex: 0 0 4.8rem;
}
.c-slider {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.c-slider__control-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
padding-right: 2.4rem;
}
.c-slider__control-value {
white-space: nowrap;
}
.c-slider__values {
font-size: 1.6rem;
font-weight: bold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: 2rem;
padding-right: 2rem;
}
@media (max-width: 415px) {
.c-slider__values {
font-size: 1.8rem;
font-weight: bold;
}
}
.c-slider__value {
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
}
.c-slider__value + .c-slider__value {
padding-left: 0.8rem;
text-align: center;
}
.c-slider__value:first-of-type {
position: relative;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
left: -2rem;
}
.c-slider__value:last-of-type {
position: relative;
text-align: right;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
right: -2rem;
}
.c-slider__control[type=range] {
-webkit-appearance: none;
background: transparent;
margin: 2rem 0;
width: 100%;
}
.c-slider__control[type=range]::-moz-focus-outer {
border: 0;
}
.c-slider__control[type=range]:focus {
outline: 0;
}
.c-slider__control[type=range]:focus::-webkit-slider-runnable-track {
background: #1a7bff;
}
.c-slider__control[type=range]:focus::-ms-fill-lower {
background: #006cff;
}
.c-slider__control[type=range]:focus::-ms-fill-upper {
background: #1a7bff;
}
.c-slider__control[type=range]::-webkit-slider-runnable-track {
cursor: default;
height: 0.8rem;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 100%;
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2), 0 0 0 0.4rem white;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2), 0 0 0 0.4rem white;
background: #006cff;
border: 0 solid white;
border-radius: 0;
}
.c-slider__control[type=range]::-webkit-slider-thumb {
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2), 0 0 0 0.4rem white;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2), 0 0 0 0.4rem white;
background: white;
border: 1.425rem solid #003cb4;
border-radius: 50%;
cursor: w-resize;
height: 4rem;
width: 4rem;
-webkit-appearance: none;
margin-top: -1.6rem;
}
.c-slider__control[type=range]::-moz-range-track {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2), 0 0 0 0.4rem white;
cursor: default;
height: 0.8rem;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 100%;
background: #006cff;
border: 0 solid white;
border-radius: 0;
height: 0.4rem;
}
.c-slider__control[type=range]::-moz-range-thumb {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2), 0 0 0 0.4rem white;
background: white;
border: 1.425rem solid #003cb4;
border-radius: 50%;
cursor: w-resize;
height: 0rem;
width: 0rem;
}
.c-slider__control[type=range]::-ms-track {
cursor: default;
height: 0.8rem;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 100%;
background: transparent;
border-color: transparent;
border-width: 2rem 0;
color: transparent;
}
.c-slider__control[type=range]::-ms-fill-lower {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2), 0 0 0 0.4rem white;
background: #0061e6;
border: 0 solid white;
border-radius: 0;
}
.c-slider__control[type=range]::-ms-fill-upper {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2), 0 0 0 0.4rem white;
background: #006cff;
border: 0 solid white;
border-radius: 0;
}
.c-slider__control[type=range]::-ms-thumb {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2), 0 0 0 0.4rem white;
background: white;
border: 1.425rem solid #003cb4;
border-radius: 50%;
cursor: w-resize;
height: 0rem;
width: 0rem;
margin-top: 0.2rem;
}
.c-slider__control[type=range]:disabled::-webkit-slider-thumb {
cursor: not-allowed;
}
.c-slider__control[type=range]:disabled::-moz-range-thumb {
cursor: not-allowed;
}
.c-slider__control[type=range]:disabled::-ms-thumb {
cursor: not-allowed;
}
.c-slider__control[type=range]:disabled::-webkit-slider-runnable-track {
cursor: not-allowed;
}
.c-slider__control[type=range]:disabled::-ms-fill-lower {
cursor: not-allowed;
}
.c-slider__control[type=range]:disabled::-ms-fill-upper {
cursor: not-allowed;
}
.c-card {
--c-shadow: rgba(0, 0, 0, 0.1);
--c-border: #003cb4;
--c-product-student:#2ab400;
--c-border-student:#2ab400;
--c-product-basis:#003cb4;
--c-border-basis:#003cb4;
--c-product-silber:rgba(42, 55, 63, 0.5);
--c-border-silber:rgba(42, 55, 63, 0.5);
--c-product-golden:#c9ac84;
--c-border-golden:#c9ac84;
--c-product-platin:rgba(42, 55, 63, 0.05);
--c-border-platin:rgba(42, 55, 63, 0.05);
--c-product-compare:#006cff;
--c-border-compare:#006cff;
--c-card-background: white;
--s-bezel: 4.8rem;
padding: var(--s-bezel);
margin-top: 3.2rem;
background: var(--c-card-background);
}
.c-card > :last-child:not([class]) {
margin-bottom: 0;
}
.c-card__grid {
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.c-card--no-stack {
margin-top: 0;
}
.c-card--style-centered {
text-align: center;
}
.c-card--style-centered > .c-card__icon {
width: 60%;
margin: 0 auto 4.8rem;
}
.c-card--role-highlight {
--c-card-background: rgba(42, 55, 63, 0.05);
}
.c-card--role-cta {
border: 2px solid var(--c-border);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c-card--role-cta .c-card__left {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.c-card--role-cta .c-card__right {
-ms-flex-preferred-size: 20rem;
flex-basis: 20rem;
white-space: nowrap;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.c-card--filled-student {
color: white;
--c-card-background: var(--c-product-student);
}
.c-card--border-student {
--c-card-border: var(--c-border-student);
border: 2px solid var(--c-border);
}
.c-card--filled-basis {
color: white;
--c-card-background: var(--c-product-basis);
}
.c-card--border-basis {
--c-card-border: var(--c-border-basis);
border: 2px solid var(--c-border);
}
.c-card--filled-silber {
color: white;
--c-card-background: var(--c-product-silber);
}
.c-card--border-silber {
--c-card-border: var(--c-border-silber);
border: 2px solid var(--c-border);
}
.c-card--filled-golden {
color: white;
--c-card-background: var(--c-product-golden);
}
.c-card--border-golden {
--c-card-border: var(--c-border-golden);
border: 2px solid var(--c-border);
}
.c-card--filled-platin {
color: white;
--c-card-background: var(--c-product-platin);
}
.c-card--border-platin {
--c-card-border: var(--c-border-platin);
border: 2px solid var(--c-border);
}
.c-card--filled-compare {
color: white;
--c-card-background: var(--c-product-compare);
}
.c-card--border-compare {
--c-card-border: var(--c-border-compare);
border: 2px solid var(--c-border);
}
.c-card--elevated {
-webkit-box-shadow: 0 0.25rem calc(var(--s-bezel) * 0.25) var(--c-shadow), 0 0 1.2rem var(--c-shadow);
box-shadow: 0 0.25rem calc(var(--s-bezel) * 0.25) var(--c-shadow), 0 0 1.2rem var(--c-shadow);
}
.c-card--bezel-narrow {
--s-bezel: 2rem;
}
.c-card__right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c-card__icon {
width: 100%;
height: auto;
}
.c-card__icon .c-icon__svg {
position: relative;
width: 100%;
height: auto;
top: 0;
left: 0;
margin-left: 0;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.c-card--overlap {
margin-right: calc(-1 * calc(100vw - 96rem - var(--s-bezel)));
padding-right: calc(100vw - 96rem - var(--s-bezel));
}
.c-videotimeline {
overflow: hidden;
}
.c-videotimeline__video {
width: 100%;
height: auto;
}
.c-videotimeline__videowrap {
position: relative;
}
.c-videotimeline__overlays {
position: absolute;
left: 0;
top: 0;
-webkit-transform: translateY(20%);
-ms-transform: translateY(20%);
transform: translateY(20%);
opacity: 0;
margin: 1rem;
-webkit-transition: 100ms opacity linear, 200ms -webkit-transform cubic-bezier(0.3, 0.7, 0, 1);
transition: 100ms opacity linear, 200ms -webkit-transform cubic-bezier(0.3, 0.7, 0, 1);
-o-transition: 100ms opacity linear, 200ms transform cubic-bezier(0.3, 0.7, 0, 1);
transition: 100ms opacity linear, 200ms transform cubic-bezier(0.3, 0.7, 0, 1);
transition: 100ms opacity linear, 200ms transform cubic-bezier(0.3, 0.7, 0, 1), 200ms -webkit-transform cubic-bezier(0.3, 0.7, 0, 1);
background: white;
pointer-events: none;
}
.c-videotimeline--visible-overlays .c-videotimeline__overlays {
pointer-events: auto;
position: relative;
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: 200ms opacity linear 200ms, 400ms -webkit-transform cubic-bezier(0.3, 0.7, 0, 1) 200ms;
transition: 200ms opacity linear 200ms, 400ms -webkit-transform cubic-bezier(0.3, 0.7, 0, 1) 200ms;
-o-transition: 200ms opacity linear 200ms, 400ms transform cubic-bezier(0.3, 0.7, 0, 1) 200ms;
transition: 200ms opacity linear 200ms, 400ms transform cubic-bezier(0.3, 0.7, 0, 1) 200ms;
transition: 200ms opacity linear 200ms, 400ms transform cubic-bezier(0.3, 0.7, 0, 1) 200ms, 400ms -webkit-transform cubic-bezier(0.3, 0.7, 0, 1) 200ms;
z-index: 2;
}
.c-videotimeline--visible-overlays .c-videotimeline__videowrap {
position: absolute;
left: 0;
top: 0;
z-index: 1;
opacity: 0;
}
.c-videotimeline--visible-overlays .c-videotimeline__control,
.c-videotimeline--visible-overlays .c-videotimeline__values {
display: none;
}
.c-videotimeline__overlay {
margin-top: 0;
display: none;
box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12);
}
.c-videotimeline__overlay--active {
display: block;
}
.c-videotimeline__cta {
opacity: 0;
position: absolute;
background: #003cb4;
color: white;
-webkit-transform: translate(-50%, -10%);
-ms-transform: translate(-50%, -10%);
transform: translate(-50%, -10%);
border: 0;
width: 15rem;
height: 15rem;
text-align: center;
border-radius: 50%;
overflow: hidden;
line-height: 1.6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0.5em;
outline: none;
pointer-events: none;
cursor: pointer;
-webkit-transition: 100ms opacity linear, 200ms -webkit-transform cubic-bezier(0.3, 0.7, 0, 1);
transition: 100ms opacity linear, 200ms -webkit-transform cubic-bezier(0.3, 0.7, 0, 1);
-o-transition: 100ms opacity linear, 200ms transform cubic-bezier(0.3, 0.7, 0, 1);
transition: 100ms opacity linear, 200ms transform cubic-bezier(0.3, 0.7, 0, 1);
transition: 100ms opacity linear, 200ms transform cubic-bezier(0.3, 0.7, 0, 1), 200ms -webkit-transform cubic-bezier(0.3, 0.7, 0, 1);
}
.c-videotimeline__cta--active {
opacity: 1;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: 200ms opacity linear 200ms, 400ms -webkit-transform cubic-bezier(0.3, 0.7, 0, 1) 200ms;
transition: 200ms opacity linear 200ms, 400ms -webkit-transform cubic-bezier(0.3, 0.7, 0, 1) 200ms;
-o-transition: 200ms opacity linear 200ms, 400ms transform cubic-bezier(0.3, 0.7, 0, 1) 200ms;
transition: 200ms opacity linear 200ms, 400ms transform cubic-bezier(0.3, 0.7, 0, 1) 200ms;
transition: 200ms opacity linear 200ms, 400ms transform cubic-bezier(0.3, 0.7, 0, 1) 200ms, 400ms -webkit-transform cubic-bezier(0.3, 0.7, 0, 1) 200ms;
pointer-events: auto;
}
.c-videotimeline__close {
position: absolute;
right: 0;
top: 0;
border: 0;
background: none;
z-index: 10;
margin-top: 4px;
padding: 1px 6px;
}
html {
/*
setting the base-font-size to 10px to make sure,
that 1rem = 10px. (Makes it way easier to work with PX)
We do set the body font size to whatever our base-font-size
should be in the design
*/
/* 10px at 1440px browser width inc. fallback for older browsers*/
font-size: 62.5%;
font-size: 10px;
}
body {
font-size: 1.6rem;
font-family: FrutigerLTPro, Helvetica, sans-serif;
font-weight: 300;
line-height: 1.5;
color: #003cb4;
margin: 0;
background-color: white;
}
@media (max-width: 415px) {
body {
font-size: 1.35rem;
line-height: 1.5;
}
.c-videotimeline__cta {
width: 10rem;
height: 10rem;
font-size: 1.25rem;
}
ul {
padding-inline-start: 0.9rem;
}
}
.video-mask {
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.c-card--filled-basis a {
color: white;
text-decoration: underline;
}
.c-videotimeline__cta:hover {
background: #006cff;
}