*
* This will cause the system to fill up from either the centre or the right
* hand side. Default behaviour is to fill up the layout system from the left.
*
* There are plenty more options available to us: explore them below.
*/
/* Default/mandatory classes.
========================================================================== */
/**
* 1. Allows us to use the layout object on any type of element.
* 2. We need to defensively reset any box-model properties.
* 3. Use the negative margin trick for multi-row grids:
* http://csswizardry.com/2011/08/building-better-grid-systems/
*/
.o-layout {
display: block;
/* [1] */
margin: 0;
/* [2] */
padding: 0;
/* [2] */
list-style: none;
/* [1] */
margin-left: -1rem;
/* [3] */
font-size: 0; }
/**
* 1. Required in order to combine fluid widths with fixed gutters.
* 2. Allows us to manipulate grids vertically, with text-level properties,
* etc.
* 3. Default item alignment is with the tops of each other, like most
* traditional grid/layout systems.
* 4. By default, all layout items are full-width (mobile first).
* 5. Gutters provided by left padding:
* http://csswizardry.com/2011/08/building-better-grid-systems/
*/
.o-layout__item {
box-sizing: border-box;
/* [1] */
display: inline-block;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */
padding-left: 1rem;
/* [5] */
font-size: 1.1764705882rem; }
/* Gutter size modifiers.
========================================================================== */
.o-layout--flush {
margin-left: 0; }
.o-layout--flush > .o-layout__item {
padding-left: 0; }
.o-layout--tiny {
margin-left: -0.5rem; }
.o-layout--tiny > .o-layout__item {
padding-left: 0.5rem; }
.o-layout--small {
margin-left: -0.67rem; }
.o-layout--small > .o-layout__item {
padding-left: 0.67rem; }
.o-layout--large {
margin-left: -2rem; }
.o-layout--large > .o-layout__item {
padding-left: 2rem; }
.o-layout--huge {
margin-left: -4rem; }
.o-layout--huge > .o-layout__item {
padding-left: 4rem; }
.o-layout--margin-bottom > .o-layout__item {
margin-bottom: 1rem; }
/* Vertical alignment modifiers.
========================================================================== */
/**
* Align all grid items to the middles of each other.
*/
.o-layout--middle > .o-layout__item {
vertical-align: middle; }
/**
* Align all grid items to the bottoms of each other.
*/
.o-layout--bottom > .o-layout__item {
vertical-align: bottom; }
/**
* Stretch all grid items of each row to have an equal-height.
* Please be aware that this modifier class doesn’t take any effect in IE9 and
* below and other older browsers due to the lack of `display: flex` support.
*/
.o-layout--stretch {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap; }
.o-layout--stretch.o-layout--center {
-webkit-justify-content: center;
justify-content: center; }
.o-layout--stretch.o-layout--right {
-webkit-justify-content: flex-end;
justify-content: flex-end; }
.o-layout--stretch.o-layout--left {
-webkit-justify-content: flex-start;
justify-content: flex-start; }
.o-layout--stretch.o-layout--middle {
-webkit-align-items: center;
align-items: center; }
.o-layout--stretch.o-layout--center-items {
-webkit-align-items: center;
align-items: center; }
.o-layout--stretch.o-layout--bottom-items {
-webkit-align-items: flex-end;
align-items: flex-end; }
.o-layout--stretch.o-layout--top-items {
-webkit-align-items: flex-start;
align-items: flex-start; }
.o-layout--stretch .o-layout__item--right {
-webkit-justify-content: flex-end;
justify-content: flex-end; }
/* Fill order modifiers.
========================================================================== */
/**
* Fill up the layout system from the centre.
*/
.o-layout--center {
text-align: center; }
.o-layout--center > .o-layout__item {
text-align: left; }
/**
* Fill up the layout system from the right-hand side.
*/
.o-layout--right {
text-align: right; }
.o-layout--right > .o-layout__item {
text-align: left; }
/**
* Fill up the layout system from the left-hand side. This will likely only be
* needed when using in conjunction with `.o-layout--reverse`.
*/
.o-layout--left {
text-align: left; }
.o-layout--left > .o-layout__item {
text-align: left; }
/**
* Reverse the rendered order of the grid system.
*/
.o-layout--reverse {
direction: rtl; }
.o-layout--reverse > .o-layout__item {
direction: ltr; }
/* Auto-widths modifier.
========================================================================== */
/**
* Cause layout items to take up a non-explicit amount of width.
*/
.o-layout--auto > .o-layout__item {
width: auto; }
/* ==========================================================================
#EMBED
========================================================================== */
.o-embed {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%; }
.o-embed__object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
/* ==========================================================================
#BOXES
========================================================================== */
@media (min-width: 48em) {
.o-boxes {
display: -webkit-flex;
display: flex; } }
.o-boxes:after {
content: "" !important;
display: block !important;
clear: both !important; }
.o-boxes__box {
float: left;
padding: 4rem 0;
font-size: 1.0441176471rem;
font-family: semplicitapro, sans-serif; }
@media screen and (min-width: 34em) {
.o-boxes__box {
font-size: 0.9411764706rem; } }
@media screen and (min-width: 48em) {
.o-boxes__box {
font-size: 0.9411764706rem; } }
@media screen and (min-width: 71.25em) {
.o-boxes__box {
font-size: 0.9411764706rem; } }
@media screen and (min-width: 90em) {
.o-boxes__box {
font-size: 1.0065359477rem; } }
/* Variants
========================================================================== */
.o-boxes--2 > .o-boxes__box {
width: 100%; }
@media (min-width: 48em) and (max-width: 71.24em) {
.o-boxes--2 > .o-boxes__box {
width: 50%;
-webkit-flex: 0 50%;
flex: 0 50%;
padding-right: 1em;
padding-left: 1em; } }
@media (min-width: 71.25em) {
.o-boxes--2 > .o-boxes__box {
padding-right: 2em;
padding-left: 2em; } }
@media (min-width: 48em) {
.o-boxes--middle {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-align-content: center;
align-content: center; }
.o-boxes--bottom {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: flex-end;
align-items: flex-end;
-webkit-align-content: flex-end;
align-content: flex-end; } }
/* ==========================================================================
#BUTTON
========================================================================== */
.c-button {
font-size: 1.1764705882rem;
font-family: semplicitapro, sans-serif;
font-style: normal;
font-weight: 700;
border: none;
padding: 0.67rem 1rem;
text-align: center;
text-decoration: none;
-webkit-font-kerning: normal;
font-kerning: normal;
display: inline-block;
border-radius: 0;
transition: 300ms ease;
text-transform: uppercase; }
@media screen and (min-width: 34em) {
.c-button {
font-size: 1.1764705882rem; } }
@media screen and (min-width: 48em) {
.c-button {
font-size: 1.1764705882rem; } }
@media screen and (min-width: 71.25em) {
.c-button {
font-size: 1.1764705882rem; } }
@media screen and (min-width: 90em) {
.c-button {
font-size: 1.1764705882rem; } }
.c-button:hover {
cursor: pointer; }
/* Sizes
========================================================================== */
.c-button--small {
font-size: 0.9264705882rem;
padding: 0.5rem 0.67rem; }
@media screen and (min-width: 34em) {
.c-button--small {
font-size: 0.8823529412rem; } }
@media screen and (min-width: 48em) {
.c-button--small {
font-size: 0.8823529412rem; } }
@media screen and (min-width: 71.25em) {
.c-button--small {
font-size: 0.7516339869rem; } }
@media screen and (min-width: 90em) {
.c-button--small {
font-size: 0.8823529412rem; } }
/* Colors
========================================================================== */
.c-button--lprimary {
background-color: #b9e269;
color: #FDFEFD; }
.c-button--lprimary:hover {
background-color: #cdea94;
color: #a8ad69; }
.c-button--lprimary:focus {
color: #FDFEFD; }
.c-button--primary {
background-color: #91D200;
color: #FDFEFD; }
.c-button--primary:hover {
background-color: #6e9f00;
color: #FDFEFD; }
.c-button--primary:focus {
color: #FDFEFD; }
.c-button--dprimary {
background-color: #8e9350;
color: #FDFEFD; }
.c-button--dprimary:hover {
background-color: #a8ad69;
color: #a8ad69; }
.c-button--dprimary:focus {
color: #FDFEFD; }
.c-button--secondary {
background-color: #A27C71;
color: #FDFEFD; }
.c-button--secondary:hover {
background-color: #876359;
color: #FDFEFD; }
.c-button--secondary:focus {
color: #FDFEFD; }
.c-button--dsecondary {
background-color: #876359;
color: #FDFEFD; }
.c-button--dsecondary:hover {
background-color: #694d44;
color: #FDFEFD; }
.c-button--dsecondary:focus {
color: #FDFEFD; }
/* ==========================================================================
#BOX
========================================================================== */
.c-box__title {
color: #FDFEFD; }
/* Colors
========================================================================== */
.c-box--primary {
background-color: #91D200; }
.c-box--primary p a,
.c-box--primary li a {
text-shadow: 0.1rem 0 #91D200, 0.15rem 0 #91D200, -0.1rem 0 #91D200, -0.15rem 0 #91D200; }
.c-box--lPrimary {
background-color: #cdea94; }
.c-box--lPrimary p a,
.c-box--lPrimary li a {
color: #221E1F;
text-shadow: 0.1rem 0 #cdea94, 0.15rem 0 #cdea94, -0.1rem 0 #cdea94, -0.15rem 0 #cdea94;
transition: 300ms ease; }
.c-box--lPrimary p a:hover,
.c-box--lPrimary li a:hover {
background-image: none; }
.c-box--dPrimary {
background-color: #a8ad69; }
.c-box--dPrimary p a,
.c-box--dPrimary li a {
text-shadow: 0.1rem 0 #a8ad69, 0.15rem 0 #a8ad69, -0.1rem 0 #a8ad69, -0.15rem 0 #a8ad69; }
.c-box--secondary {
background-color: #A27C71; }
.c-box--secondary p a,
.c-box--secondary li a {
text-shadow: 0.1rem 0 #A27C71, 0.15rem 0 #A27C71, -0.1rem 0 #A27C71, -0.15rem 0 #A27C71; }
.c-box--lSecondary {
background-color: #d2bdb6; }
.c-box--lSecondary p a,
.c-box--lSecondary li a {
text-shadow: 0.1rem 0 #cdea94, 0.15rem 0 #cdea94, -0.1rem 0 #cdea94, -0.15rem 0 #cdea94; }
.c-box--dSecondary {
background-color: #876359; }
.c-box--dSecondary p a,
.c-box--dSecondary li a {
text-shadow: 0.1rem 0 #cdea94, 0.15rem 0 #cdea94, -0.1rem 0 #cdea94, -0.15rem 0 #cdea94; }
.c-box--green {
background-color: #61A730; }
.c-box--green p a,
.c-box--green li a {
text-shadow: 0.1rem 0 #cdea94, 0.15rem 0 #cdea94, -0.1rem 0 #cdea94, -0.15rem 0 #cdea94; }
/* ==========================================================================
#LOGO
========================================================================== */
.c-logo {
max-width: 110px;
display: block; }
@media (min-width: 34em) {
.c-logo {
max-width: 180px;
float: right;
padding-top: 1rem;
padding-left: 1rem; } }
/* ==========================================================================
#SCROLLDOWN
========================================================================== */
.c-scroll {
margin: 2rem auto 0;
width: 26px;
height: 40px;
box-shadow: inset 0 0 0 2px #FDFEFD;
border-radius: 25px;
position: relative; }
.c-scroll::before {
position: absolute;
left: 50%;
content: '';
width: 4px;
height: 4px;
background: #FDFEFD;
margin-left: -2px;
top: 10px;
border-radius: 4px;
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scrolldown;
animation-name: scrolldown; }
@-webkit-keyframes scrolldown {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px); } }
@keyframes scrolldown {
0% {
opacity: 1; }
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px); } }
/* Colors
========================================================================== */
.c-scroll--dark {
box-shadow: inset 0 0 0 2px #cdea94; }
.c-scroll--dark::before {
background: #cdea94; }
/* ==========================================================================
#MASTHEAD
========================================================================== */
.c-masthead {
position: relative;
width: 100%;
height: 100%;
height: 100vh;
background-image: url("/assets/images/bg-masthead.jpg");
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
background-attachment: fixed;
/* Content below on baseline */ }
@media (max-width: 33.99em) {
.c-masthead {
height: 40vh;
background-image: url("/assets/images/bg-masthead-mobile.jpg");
background-position: center center;
background-attachment: scroll; } }
.c-masthead__content {
position: absolute;
bottom: 0%;
right: 0%; }
.c-masthead__content .c-scroll {
margin-bottom: 2rem; }
@media (min-width: 90em) {
.c-masthead__content .c-scroll {
margin-bottom: 4rem; } }
@media (max-width: 33.99em) {
.c-masthead__content--from-mobile {
display: none; } }
.c-masthead__content--mobile {
background: #FDFEFD;
height: auto;
width: 100%;
position: relative; }
@media (min-width: 34em) {
.c-masthead__content--mobile {
display: none; } }
.c-masthead__textblock {
background-color: rgba(253, 254, 253, 0.9);
padding: 1rem 2rem 2rem;
font-size: 1rem; }
@media (min-width: 90em) {
.c-masthead__textblock {
padding: 2rem 2rem 4rem; } }
@media (max-width: 33.99em) {
.c-masthead__textblock {
padding: 1rem 1rem 2rem 2rem;
border-bottom: 1px solid #91D200; } }
.c-masthead__title {
color: #91D200;
line-height: 3rem;
font-size: 1.6764705882rem;
margin-bottom: 0.0364605882rem;
padding-top: 0.9635394118rem;
font-weight: 700; }
@media screen and (min-width: 34em) {
.c-masthead__title {
font-size: 2.2352941176rem;
margin-bottom: 0.2152841176rem;
padding-top: 0.7847158824rem; } }
@media screen and (min-width: 48em) {
.c-masthead__title {
font-size: 2.2352941176rem;
margin-bottom: 0.2152841176rem;
padding-top: 0.7847158824rem; } }
@media screen and (min-width: 71.25em) {
.c-masthead__title {
font-size: 2.3006535948rem;
margin-bottom: 0.2361991503rem;
padding-top: 0.7638008497rem; } }
@media screen and (min-width: 90em) {
.c-masthead__title {
font-size: 2.3921568627rem;
margin-bottom: 0.2654801961rem;
padding-top: 0.7345198039rem; } }
.c-masthead__back {
position: absolute;
top: 20px;
right: 20px; }
/* ==========================================================================
#CONTENT
========================================================================== */
.c-content {
padding-top: 4rem;
padding-bottom: 4rem; }
@media (min-width: 48em) {
.c-content {
padding-top: 7rem;
padding-bottom: 7rem; } }
.c-content__text {
margin: 0 auto;
width: 100%;
padding-bottom: 2em; }
.c-content__title {
letter-spacing: 0;
color: #A27C71;
max-width: 600px;
line-height: 4rem;
font-size: 1.8823529412rem;
margin-bottom: 0.6023429412rem;
padding-top: 1.3976570588rem;
-webkit-font-kerning: normal;
font-kerning: normal;
letter-spacing: 0.075rem;
text-transform: uppercase; }
@media screen and (min-width: 34em) {
.c-content__title {
font-size: 2.9779411765rem;
margin-bottom: 0.9529311765rem;
padding-top: 1.0470688235rem; } }
@media screen and (min-width: 48em) {
.c-content__title {
font-size: 2.9779411765rem;
margin-bottom: 0.9529311765rem;
padding-top: 1.0470688235rem; } }
@media screen and (min-width: 71.25em) {
.c-content__title {
font-size: 2.8692810458rem;
margin-bottom: 0.9181599346rem;
padding-top: 1.0818400654rem; } }
@media screen and (min-width: 90em) {
.c-content__title {
font-size: 3.1895424837rem;
margin-bottom: 1.0206435948rem;
padding-top: 0.9793564052rem; } }
@media (max-width: 33.99em) {
.c-content__title {
line-height: 3rem;
font-size: 1.8823529412rem;
margin-bottom: 1.1023429412rem;
padding-top: 0.8976570588rem; } }
@media screen and (max-width: 33.99em) and (min-width: 34em) {
.c-content__title {
font-size: 2.9779411765rem;
margin-bottom: 1.4529311765rem;
padding-top: 0.5470688235rem; } }
@media screen and (max-width: 33.99em) and (min-width: 48em) {
.c-content__title {
font-size: 2.9779411765rem;
margin-bottom: 1.4529311765rem;
padding-top: 0.5470688235rem; } }
@media screen and (max-width: 33.99em) and (min-width: 71.25em) {
.c-content__title {
font-size: 2.8692810458rem;
margin-bottom: 1.4181599346rem;
padding-top: 0.5818400654rem; } }
@media screen and (max-width: 33.99em) and (min-width: 90em) {
.c-content__title {
font-size: 3.1895424837rem;
margin-bottom: 1.5206435948rem;
padding-top: 0.4793564052rem; } }
.c-content__paragraph {
line-height: 2rem;
font-size: 1.1764705882rem;
margin-bottom: 1.3764605882rem;
padding-top: 0.6235394118rem; }
.c-content__scroll {
margin: 4rem auto 2rem; }
/* ==========================================================================
#FORM
========================================================================== */
.c-form__label,
.c-form__input {
display: block;
font-size: 1.0441176471rem;
font-family: semplicitapro, sans-serif; }
@media screen and (min-width: 34em) {
.c-form__label,
.c-form__input {
font-size: 0.9411764706rem; } }
@media screen and (min-width: 48em) {
.c-form__label,
.c-form__input {
font-size: 0.9411764706rem; } }
@media screen and (min-width: 71.25em) {
.c-form__label,
.c-form__input {
font-size: 0.9411764706rem; } }
@media screen and (min-width: 90em) {
.c-form__label,
.c-form__input {
font-size: 1.0065359477rem; } }
.c-form__inline {
width: 100%; }
.c-form__inline:after {
content: "" !important;
display: block !important;
clear: both !important; }
@media (min-width: 71.25em) {
.c-form__inline > div {
float: left;
width: calc(50% - (1em / 2)); }
.c-form__inline > div:first-of-type {
margin-right: 1em; } }
.c-form__inline:after {
content: "" !important;
display: block !important;
clear: both !important; }
.c-form__label {
-webkit-font-kerning: normal;
font-kerning: normal;
letter-spacing: 0.075rem;
text-transform: uppercase;
letter-spacing: 0;
font-weight: 700;
color: #876359; }
.c-form__req {
margin-left: .2em;
color: inherit; }
.c-form__input {
width: 100%;
border-style: solid;
border-width: 2px;
border-radius: 0;
padding: 0.5rem;
color: #221E1F;
font-weight: 500;
box-sizing: border-box; }
.c-form__input:focus {
outline: none; }
.c-form__input,
.c-form__checkbox,
.c-form__radio {
margin-bottom: 0.67rem; }
.c-form__button {
margin-top: 0.67rem; }
/* Variants
========================================================================== */
.c-form--inschrijven {
margin: 30px auto 0;
width: 100%;
max-width: 350px; }
@media (min-width: 71.25em) {
.c-form__inline--35-65 > div:first-of-type {
width: calc(35% - (1em / 2)); }
.c-form__inline--35-65 > div:last-of-type {
width: calc(65% - (1em / 2));
text-align: right; } }
.c-form__label--small {
display: inline;
text-transform: none;
font-weight: 500;
font-size: 0.9264705882rem;
letter-spacing: 0; }
@media screen and (min-width: 34em) {
.c-form__label--small {
font-size: 0.8823529412rem; } }
@media screen and (min-width: 48em) {
.c-form__label--small {
font-size: 0.8823529412rem; } }
@media screen and (min-width: 71.25em) {
.c-form__label--small {
font-size: 0.7516339869rem; } }
@media screen and (min-width: 90em) {
.c-form__label--small {
font-size: 0.8823529412rem; } }
.c-form__label--inline {
margin-right: .2rem; }
/* Colors
========================================================================== */
.c-form--inschrijven p.has-error {
color: #FDFEFD; }
.c-form__label--white {
color: #FDFEFD; }
.c-form__label--white.has-error {
color: #FDFEFD; }
.c-form__input--primary {
border-color: #91D200; }
.c-form__input--primary:focus {
border-color: #a8ad69; }
.c-form__input--secondary {
border-color: #d2bdb6; }
.c-form__input--secondary:focus {
border-color: #91D200; }
/* ==========================================================================
#FOOTER
========================================================================== */
.c-footer {
background-color: #876359;
color: #FDFEFD;
text-align: center; }
@media (min-width: 48em) {
.c-footer__logo,
.c-footer__contact {
float: left;
text-align: left; } }
.c-footer__contact {
margin-bottom: 1rem; }
.c-footer__contact > p {
padding-top: 0;
line-height: 1.8; }
.c-footer__logo {
display: block;
margin: 0 auto;
width: 150px;
margin-bottom: 1rem; }
@media (min-width: 48em) {
.c-footer__logo {
width: 15vw;
margin-right: 1rem; } }
.c-footer__link {
color: #FDFEFD;
text-decoration: none;
background: none;
text-shadow: 0.1rem 0 #876359, 0.15rem 0 #876359, -0.1rem 0 #876359, -0.15rem 0 #876359; }
.c-footer__link:hover {
background: none; }
.c-footer__copy {
display: block;
margin-top: 1rem; }
@media (min-width: 48em) {
.c-footer__copy {
float: none;
clear: both;
text-align: left; } }
.c-footer__group-gl,
.c-footer__impuls {
width: 50%; }
@media (max-width: 47.99em) {
.c-footer__impuls {
padding-top: 0; } }
@media (min-width: 48em) {
.c-footer__impuls {
text-align: right; } }
.c-footer__poweredby {
color: #FDFEFD; }
@media (min-width: 48em) {
.c-footer__poweredby {
position: relative;
top: .65rem; } }
.c-footer__impulslogo {
display: inline-block;
height: 15px;
margin-left: .1rem;
transition: 300ms ease; }
.c-footer__impulslogo:hover {
opacity: .5; }
/* Variations
========================================================================== */
.c-footer--form {
background: #a8ad69; }
/* ==========================================================================
#HEADER
========================================================================== */
@media (min-width: 34em) {
.c-header--info,
.c-header--contest {
height: 100vh; } }
.c-header--info .o-layout,
.c-header--contest .o-layout {
height: 100%; }
@media (max-width: 71.24em) {
.c-header--info .o-layout,
.c-header--contest .o-layout {
position: relative; } }
/* ==========================================================================
#CONTEST
========================================================================== */
.c-info {
background-color: #d2bdb6;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-items: center;
align-items: center;
-webkit-flex-direction: column;
flex-direction: column; }
@media (min-width: 71.25em) {
.c-info {
height: 100vh; } }
@media (max-width: 71.24em) {
.c-info {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 10;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-between;
justify-content: space-between; } }
.c-info__content {
padding: 2rem; }
.c-info__content h3 {
line-height: 2rem;
font-size: 1.3235294118rem;
margin-bottom: 1.4235194118rem;
padding-top: 0.5764805882rem; }
@media screen and (min-width: 34em) {
.c-info__content h3 {
font-size: 1.2573529412rem;
margin-bottom: 1.4023429412rem;
padding-top: 0.5976570588rem; } }
@media screen and (min-width: 48em) {
.c-info__content h3 {
font-size: 1.2573529412rem;
margin-bottom: 1.4023429412rem;
padding-top: 0.5976570588rem; } }
@media screen and (min-width: 71.25em) {
.c-info__content h3 {
font-size: 1.4705882353rem;
margin-bottom: 1.4705782353rem;
padding-top: 0.5294217647rem; } }
@media screen and (min-width: 90em) {
.c-info__content h3 {
font-size: 1.3464052288rem;
margin-bottom: 1.4308396732rem;
padding-top: 0.5691603268rem; } }
.c-info__content .c-content__title {
line-height: 3rem;
font-size: 1.8823529412rem;
margin-bottom: 1.1023429412rem;
padding-top: 0.8976570588rem; }
@media screen and (min-width: 34em) {
.c-info__content .c-content__title {
font-size: 2.9779411765rem;
margin-bottom: 1.4529311765rem;
padding-top: 0.5470688235rem; } }
@media screen and (min-width: 48em) {
.c-info__content .c-content__title {
font-size: 2.9779411765rem;
margin-bottom: 1.4529311765rem;
padding-top: 0.5470688235rem; } }
@media screen and (min-width: 71.25em) {
.c-info__content .c-content__title {
font-size: 2.8692810458rem;
margin-bottom: 1.4181599346rem;
padding-top: 0.5818400654rem; } }
@media screen and (min-width: 90em) {
.c-info__content .c-content__title {
font-size: 3.1895424837rem;
margin-bottom: 1.5206435948rem;
padding-top: 0.4793564052rem; } }
.c-info__content p {
text-align: left;
color: #35373f; }
@media (max-width: 71.24em) {
.c-info__content {
padding: 1rem 1rem 1rem 2rem; }
.c-info__content h3 {
line-height: 2rem;
font-size: 1.3235294118rem;
margin-bottom: 0.4235194118rem;
padding-top: 0.5764805882rem; } }
@media screen and (max-width: 71.24em) and (min-width: 34em) {
.c-info__content h3 {
font-size: 1.2573529412rem;
margin-bottom: 0.4023429412rem;
padding-top: 0.5976570588rem; } }
@media screen and (max-width: 71.24em) and (min-width: 48em) {
.c-info__content h3 {
font-size: 1.2573529412rem;
margin-bottom: 0.4023429412rem;
padding-top: 0.5976570588rem; } }
@media screen and (max-width: 71.24em) and (min-width: 71.25em) {
.c-info__content h3 {
font-size: 1.4705882353rem;
margin-bottom: 0.4705782353rem;
padding-top: 0.5294217647rem; } }
@media screen and (max-width: 71.24em) and (min-width: 90em) {
.c-info__content h3 {
font-size: 1.3464052288rem;
margin-bottom: 0.4308396732rem;
padding-top: 0.5691603268rem; } }
@media (max-width: 71.24em) {
.c-info__content .c-content__title {
line-height: 2rem;
font-size: 1.6764705882rem;
margin-bottom: 0.5364605882rem;
padding-top: 0.4635394118rem; } }
@media screen and (max-width: 71.24em) and (min-width: 34em) {
.c-info__content .c-content__title {
font-size: 2.2352941176rem;
margin-bottom: 0.7152841176rem;
padding-top: 0.2847158824rem; } }
@media screen and (max-width: 71.24em) and (min-width: 48em) {
.c-info__content .c-content__title {
font-size: 2.2352941176rem;
margin-bottom: 0.7152841176rem;
padding-top: 0.2847158824rem; } }
@media screen and (max-width: 71.24em) and (min-width: 71.25em) {
.c-info__content .c-content__title {
font-size: 2.3006535948rem;
margin-bottom: 0.7361991503rem;
padding-top: 0.2638008497rem; } }
@media screen and (max-width: 71.24em) and (min-width: 90em) {
.c-info__content .c-content__title {
font-size: 2.3921568627rem;
margin-bottom: 0.7654801961rem;
padding-top: 0.2345198039rem; } }
@media (max-width: 71.24em) {
.c-info__content .c-content__title::before {
display: none; }
.c-info__content p {
margin-bottom: 0; } }
@media (min-width: 71.25em) {
.c-info__image {
width: 100%; } }
@media (min-width: 48em) and (max-width: 71.24em) {
.c-info__image {
width: 37%; } }
@media (min-width: 34em) and (max-width: 47.99em) {
.c-info__image {
width: 50%; } }
@media (max-width: 33.99em) {
.c-info__image {
display: none; } }
/* ==========================================================================
#CLEARFIX
========================================================================== */
/**
* Attach our clearfix mixin to a utility class.
*/
.h-clearfix:after {
content: "" !important;
display: block !important;
clear: both !important; }
/* Based on inuitcss (https://github.com/inuitcss/inuitcss/blob/develop/utilities/_utilities.spacings.scss)
/**
* Utility classes to put specific spacing values onto elements. The below loop
* will generate us a suite of classes like:
*
* .h-margin-top {}
* .h-padding-left-large {}
* .h-margin-right-small {}
* .h-padding {}
* .h-padding-right-none {}
* .h-padding-horizontal {}
* .h-padding-vertical-small {}
*/
/* stylelint-disable string-quotes */
.h-padding {
padding: 1rem !important; }
.h-padding--tiny {
padding: 0.5rem !important; }
.h-padding--small {
padding: 0.67rem !important; }
.h-padding--large {
padding: 2rem !important; }
.h-padding--huge {
padding: 4rem !important; }
.h-padding-none {
padding: 0 !important; }
.h-padding-top {
padding-top: 1rem !important; }
.h-padding-top--tiny {
padding-top: 0.5rem !important; }
.h-padding-top--small {
padding-top: 0.67rem !important; }
.h-padding-top--large {
padding-top: 2rem !important; }
.h-padding-top--huge {
padding-top: 4rem !important; }
.h-padding-top-none {
padding-top: 0 !important; }
.h-padding-right {
padding-right: 1rem !important; }
.h-padding-right--tiny {
padding-right: 0.5rem !important; }
.h-padding-right--small {
padding-right: 0.67rem !important; }
.h-padding-right--large {
padding-right: 2rem !important; }
.h-padding-right--huge {
padding-right: 4rem !important; }
.h-padding-right-none {
padding-right: 0 !important; }
.h-padding-bottom {
padding-bottom: 1rem !important; }
.h-padding-bottom--tiny {
padding-bottom: 0.5rem !important; }
.h-padding-bottom--small {
padding-bottom: 0.67rem !important; }
.h-padding-bottom--large {
padding-bottom: 2rem !important; }
.h-padding-bottom--huge {
padding-bottom: 4rem !important; }
.h-padding-bottom-none {
padding-bottom: 0 !important; }
.h-padding-left {
padding-left: 1rem !important; }
.h-padding-left--tiny {
padding-left: 0.5rem !important; }
.h-padding-left--small {
padding-left: 0.67rem !important; }
.h-padding-left--large {
padding-left: 2rem !important; }
.h-padding-left--huge {
padding-left: 4rem !important; }
.h-padding-left-none {
padding-left: 0 !important; }
.h-padding-horizontal {
padding-left: 1rem !important;
padding-right: 1rem !important; }
.h-padding-horizontal--tiny {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important; }
.h-padding-horizontal--small {
padding-left: 0.67rem !important;
padding-right: 0.67rem !important; }
.h-padding-horizontal--large {
padding-left: 2rem !important;
padding-right: 2rem !important; }
.h-padding-horizontal--huge {
padding-left: 4rem !important;
padding-right: 4rem !important; }
.h-padding-horizontal-none {
padding-left: 0 !important;
padding-right: 0 !important; }
.h-padding-vertical {
padding-top: 1rem !important;
padding-bottom: 1rem !important; }
.h-padding-vertical--tiny {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important; }
.h-padding-vertical--small {
padding-top: 0.67rem !important;
padding-bottom: 0.67rem !important; }
.h-padding-vertical--large {
padding-top: 2rem !important;
padding-bottom: 2rem !important; }
.h-padding-vertical--huge {
padding-top: 4rem !important;
padding-bottom: 4rem !important; }
.h-padding-vertical-none {
padding-top: 0 !important;
padding-bottom: 0 !important; }
.h-margin {
margin: 1rem !important; }
.h-margin--tiny {
margin: 0.5rem !important; }
.h-margin--small {
margin: 0.67rem !important; }
.h-margin--large {
margin: 2rem !important; }
.h-margin--huge {
margin: 4rem !important; }
.h-margin-none {
margin: 0 !important; }
.h-margin-top {
margin-top: 1rem !important; }
.h-margin-top--tiny {
margin-top: 0.5rem !important; }
.h-margin-top--small {
margin-top: 0.67rem !important; }
.h-margin-top--large {
margin-top: 2rem !important; }
.h-margin-top--huge {
margin-top: 4rem !important; }
.h-margin-top-none {
margin-top: 0 !important; }
.h-margin-right {
margin-right: 1rem !important; }
.h-margin-right--tiny {
margin-right: 0.5rem !important; }
.h-margin-right--small {
margin-right: 0.67rem !important; }
.h-margin-right--large {
margin-right: 2rem !important; }
.h-margin-right--huge {
margin-right: 4rem !important; }
.h-margin-right-none {
margin-right: 0 !important; }
.h-margin-bottom {
margin-bottom: 1rem !important; }
.h-margin-bottom--tiny {
margin-bottom: 0.5rem !important; }
.h-margin-bottom--small {
margin-bottom: 0.67rem !important; }
.h-margin-bottom--large {
margin-bottom: 2rem !important; }
.h-margin-bottom--huge {
margin-bottom: 4rem !important; }
.h-margin-bottom-none {
margin-bottom: 0 !important; }
.h-margin-left {
margin-left: 1rem !important; }
.h-margin-left--tiny {
margin-left: 0.5rem !important; }
.h-margin-left--small {
margin-left: 0.67rem !important; }
.h-margin-left--large {
margin-left: 2rem !important; }
.h-margin-left--huge {
margin-left: 4rem !important; }
.h-margin-left-none {
margin-left: 0 !important; }
.h-margin-horizontal {
margin-left: 1rem !important;
margin-right: 1rem !important; }
.h-margin-horizontal--tiny {
margin-left: 0.5rem !important;
margin-right: 0.5rem !important; }
.h-margin-horizontal--small {
margin-left: 0.67rem !important;
margin-right: 0.67rem !important; }
.h-margin-horizontal--large {
margin-left: 2rem !important;
margin-right: 2rem !important; }
.h-margin-horizontal--huge {
margin-left: 4rem !important;
margin-right: 4rem !important; }
.h-margin-horizontal-none {
margin-left: 0 !important;
margin-right: 0 !important; }
.h-margin-vertical {
margin-top: 1rem !important;
margin-bottom: 1rem !important; }
.h-margin-vertical--tiny {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important; }
.h-margin-vertical--small {
margin-top: 0.67rem !important;
margin-bottom: 0.67rem !important; }
.h-margin-vertical--large {
margin-top: 2rem !important;
margin-bottom: 2rem !important; }
.h-margin-vertical--huge {
margin-top: 4rem !important;
margin-bottom: 4rem !important; }
.h-margin-vertical-none {
margin-top: 0 !important;
margin-bottom: 0 !important; }
/* stylelint-enable string-quotes */
/* ==========================================================================
#RESPONSIVE-SPACINGS
========================================================================== */
/**
* Utility classes enhancing the normal spacing classes by adding responsiveness
* to them. By default this brings us the following classes:
*
* .h-margin-bottom-none@mobile {}
* .h-margin-bottom-none@tablet {}
* .h-margin-bottom-none@desktop {}
* .h-margin-bottom-none@wide {}
*
* But we can affect the classes that get generated by altering the appropriate
* Sass maps below.
*/
/* stylelint-disable max-nesting-depth */
@media (min-width: 34em) {
.h-margin-bottom-none\@mobile {
margin-bottom: 0 !important; } }
@media (min-width: 48em) {
.h-margin-bottom-none\@tablet {
margin-bottom: 0 !important; } }
@media (min-width: 71.25em) {
.h-margin-bottom-none\@desktop {
margin-bottom: 0 !important; } }
@media (min-width: 90em) {
.h-margin-bottom-none\@wide {
margin-bottom: 0 !important; } }
/* stylelint-enable max-nesting-depth */
/* ==========================================================================
#WIDTHS
========================================================================== */
/**
* inuitcss generates a series of utility classes that give a fluid width to
* whichever element they’re applied, e.g.:
*
* ![]()
*
* These classes are most commonly used in conjunction with our layout system,
* e.g.:
*
*
*
* By default, inuitcss will also generate responsive variants of each of these
* classes by using your Sass MQ configuration, e.g.:
*
*
*
* Optionally, inuitcss can generate offset classes which can push and pull
* elements left and right by a specified amount, e.g.:
*
*
*
* This is useful for making very granular changes to the rendered order of
* items in a layout.
*
* N.B. This option is turned off by default.
*/
/**
* A series of width helper classes that you can use to size things like grid
* systems. Classes take a fraction-like format (e.g. `.h-2/3`). Use these in
* your markup:
*
*
*
* The following will generate widths helper classes based on the fractions
* defined in the `$fractions` list.
*/
.h-1\/1 {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/1 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-1\/1 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/2 {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/2 {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-1\/2 {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-2\/2 {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/2 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-2\/2 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/3 {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/3 {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-1\/3 {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-2\/3 {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/3 {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-2\/3 {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-3\/3 {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/3 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-3\/3 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/4 {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/4 {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-1\/4 {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-2\/4 {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/4 {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-2\/4 {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-3\/4 {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/4 {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-3\/4 {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-4\/4 {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/4 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-4\/4 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/5 {
width: 20% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important; }
.h-pull-1\/5 {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */ }
.h-2\/5 {
width: 40% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important; }
.h-pull-2\/5 {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */ }
.h-3\/5 {
width: 60% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important; }
.h-pull-3\/5 {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */ }
.h-4\/5 {
width: 80% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important; }
.h-pull-4\/5 {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */ }
.h-5\/5 {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/5 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-5\/5 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/6 {
width: 16.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/6 {
position: relative !important;
right: auto !important;
/* [1] */
left: 16.6666666667% !important; }
.h-pull-1\/6 {
position: relative !important;
right: 16.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-2\/6 {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/6 {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-2\/6 {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-3\/6 {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/6 {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-3\/6 {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-4\/6 {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/6 {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-4\/6 {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-5\/6 {
width: 83.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/6 {
position: relative !important;
right: auto !important;
/* [1] */
left: 83.3333333333% !important; }
.h-pull-5\/6 {
position: relative !important;
right: 83.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-6\/6 {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/6 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-6\/6 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/7 {
width: 14.2857142857% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/7 {
position: relative !important;
right: auto !important;
/* [1] */
left: 14.2857142857% !important; }
.h-pull-1\/7 {
position: relative !important;
right: 14.2857142857% !important;
left: auto !important;
/* [1] */ }
.h-2\/7 {
width: 28.5714285714% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/7 {
position: relative !important;
right: auto !important;
/* [1] */
left: 28.5714285714% !important; }
.h-pull-2\/7 {
position: relative !important;
right: 28.5714285714% !important;
left: auto !important;
/* [1] */ }
.h-3\/7 {
width: 42.8571428571% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/7 {
position: relative !important;
right: auto !important;
/* [1] */
left: 42.8571428571% !important; }
.h-pull-3\/7 {
position: relative !important;
right: 42.8571428571% !important;
left: auto !important;
/* [1] */ }
.h-4\/7 {
width: 57.1428571429% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/7 {
position: relative !important;
right: auto !important;
/* [1] */
left: 57.1428571429% !important; }
.h-pull-4\/7 {
position: relative !important;
right: 57.1428571429% !important;
left: auto !important;
/* [1] */ }
.h-5\/7 {
width: 71.4285714286% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/7 {
position: relative !important;
right: auto !important;
/* [1] */
left: 71.4285714286% !important; }
.h-pull-5\/7 {
position: relative !important;
right: 71.4285714286% !important;
left: auto !important;
/* [1] */ }
.h-6\/7 {
width: 85.7142857143% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/7 {
position: relative !important;
right: auto !important;
/* [1] */
left: 85.7142857143% !important; }
.h-pull-6\/7 {
position: relative !important;
right: 85.7142857143% !important;
left: auto !important;
/* [1] */ }
.h-7\/7 {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/7 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-7\/7 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/8 {
width: 12.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/8 {
position: relative !important;
right: auto !important;
/* [1] */
left: 12.5% !important; }
.h-pull-1\/8 {
position: relative !important;
right: 12.5% !important;
left: auto !important;
/* [1] */ }
.h-2\/8 {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/8 {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-2\/8 {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-3\/8 {
width: 37.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/8 {
position: relative !important;
right: auto !important;
/* [1] */
left: 37.5% !important; }
.h-pull-3\/8 {
position: relative !important;
right: 37.5% !important;
left: auto !important;
/* [1] */ }
.h-4\/8 {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/8 {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-4\/8 {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-5\/8 {
width: 62.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/8 {
position: relative !important;
right: auto !important;
/* [1] */
left: 62.5% !important; }
.h-pull-5\/8 {
position: relative !important;
right: 62.5% !important;
left: auto !important;
/* [1] */ }
.h-6\/8 {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/8 {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-6\/8 {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-7\/8 {
width: 87.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/8 {
position: relative !important;
right: auto !important;
/* [1] */
left: 87.5% !important; }
.h-pull-7\/8 {
position: relative !important;
right: 87.5% !important;
left: auto !important;
/* [1] */ }
.h-8\/8 {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-8\/8 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-8\/8 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/12 {
width: 8.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/12 {
position: relative !important;
right: auto !important;
/* [1] */
left: 8.3333333333% !important; }
.h-pull-1\/12 {
position: relative !important;
right: 8.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-2\/12 {
width: 16.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/12 {
position: relative !important;
right: auto !important;
/* [1] */
left: 16.6666666667% !important; }
.h-pull-2\/12 {
position: relative !important;
right: 16.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-3\/12 {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/12 {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-3\/12 {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-4\/12 {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/12 {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-4\/12 {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-5\/12 {
width: 41.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/12 {
position: relative !important;
right: auto !important;
/* [1] */
left: 41.6666666667% !important; }
.h-pull-5\/12 {
position: relative !important;
right: 41.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-6\/12 {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/12 {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-6\/12 {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-7\/12 {
width: 58.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/12 {
position: relative !important;
right: auto !important;
/* [1] */
left: 58.3333333333% !important; }
.h-pull-7\/12 {
position: relative !important;
right: 58.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-8\/12 {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-8\/12 {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-8\/12 {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-9\/12 {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-9\/12 {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-9\/12 {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-10\/12 {
width: 83.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-10\/12 {
position: relative !important;
right: auto !important;
/* [1] */
left: 83.3333333333% !important; }
.h-pull-10\/12 {
position: relative !important;
right: 83.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-11\/12 {
width: 91.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-11\/12 {
position: relative !important;
right: auto !important;
/* [1] */
left: 91.6666666667% !important; }
.h-pull-11\/12 {
position: relative !important;
right: 91.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-12\/12 {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-12\/12 {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-12\/12 {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
/**
* If we’re using Sass-MQ, automatically generate grid system(s) for each of our
* defined breakpoints, and give them a Responsive Suffix, e.g.:
*
*
*/
@media (min-width: 34em) {
.h-1\/1\@mobile {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/1\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-1\/1\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/2\@mobile {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/2\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-1\/2\@mobile {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-2\/2\@mobile {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/2\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-2\/2\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/3\@mobile {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/3\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-1\/3\@mobile {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-2\/3\@mobile {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/3\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-2\/3\@mobile {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-3\/3\@mobile {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/3\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-3\/3\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/4\@mobile {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/4\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-1\/4\@mobile {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-2\/4\@mobile {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/4\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-2\/4\@mobile {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-3\/4\@mobile {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/4\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-3\/4\@mobile {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-4\/4\@mobile {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/4\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-4\/4\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/5\@mobile {
width: 20% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important; }
.h-pull-1\/5\@mobile {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */ }
.h-2\/5\@mobile {
width: 40% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important; }
.h-pull-2\/5\@mobile {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */ }
.h-3\/5\@mobile {
width: 60% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important; }
.h-pull-3\/5\@mobile {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */ }
.h-4\/5\@mobile {
width: 80% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important; }
.h-pull-4\/5\@mobile {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */ }
.h-5\/5\@mobile {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/5\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-5\/5\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/6\@mobile {
width: 16.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/6\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 16.6666666667% !important; }
.h-pull-1\/6\@mobile {
position: relative !important;
right: 16.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-2\/6\@mobile {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/6\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-2\/6\@mobile {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-3\/6\@mobile {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/6\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-3\/6\@mobile {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-4\/6\@mobile {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/6\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-4\/6\@mobile {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-5\/6\@mobile {
width: 83.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/6\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 83.3333333333% !important; }
.h-pull-5\/6\@mobile {
position: relative !important;
right: 83.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-6\/6\@mobile {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/6\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-6\/6\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/7\@mobile {
width: 14.2857142857% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/7\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 14.2857142857% !important; }
.h-pull-1\/7\@mobile {
position: relative !important;
right: 14.2857142857% !important;
left: auto !important;
/* [1] */ }
.h-2\/7\@mobile {
width: 28.5714285714% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/7\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 28.5714285714% !important; }
.h-pull-2\/7\@mobile {
position: relative !important;
right: 28.5714285714% !important;
left: auto !important;
/* [1] */ }
.h-3\/7\@mobile {
width: 42.8571428571% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/7\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 42.8571428571% !important; }
.h-pull-3\/7\@mobile {
position: relative !important;
right: 42.8571428571% !important;
left: auto !important;
/* [1] */ }
.h-4\/7\@mobile {
width: 57.1428571429% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/7\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 57.1428571429% !important; }
.h-pull-4\/7\@mobile {
position: relative !important;
right: 57.1428571429% !important;
left: auto !important;
/* [1] */ }
.h-5\/7\@mobile {
width: 71.4285714286% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/7\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 71.4285714286% !important; }
.h-pull-5\/7\@mobile {
position: relative !important;
right: 71.4285714286% !important;
left: auto !important;
/* [1] */ }
.h-6\/7\@mobile {
width: 85.7142857143% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/7\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 85.7142857143% !important; }
.h-pull-6\/7\@mobile {
position: relative !important;
right: 85.7142857143% !important;
left: auto !important;
/* [1] */ }
.h-7\/7\@mobile {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/7\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-7\/7\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/8\@mobile {
width: 12.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/8\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 12.5% !important; }
.h-pull-1\/8\@mobile {
position: relative !important;
right: 12.5% !important;
left: auto !important;
/* [1] */ }
.h-2\/8\@mobile {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/8\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-2\/8\@mobile {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-3\/8\@mobile {
width: 37.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/8\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 37.5% !important; }
.h-pull-3\/8\@mobile {
position: relative !important;
right: 37.5% !important;
left: auto !important;
/* [1] */ }
.h-4\/8\@mobile {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/8\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-4\/8\@mobile {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-5\/8\@mobile {
width: 62.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/8\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 62.5% !important; }
.h-pull-5\/8\@mobile {
position: relative !important;
right: 62.5% !important;
left: auto !important;
/* [1] */ }
.h-6\/8\@mobile {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/8\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-6\/8\@mobile {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-7\/8\@mobile {
width: 87.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/8\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 87.5% !important; }
.h-pull-7\/8\@mobile {
position: relative !important;
right: 87.5% !important;
left: auto !important;
/* [1] */ }
.h-8\/8\@mobile {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-8\/8\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-8\/8\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/12\@mobile {
width: 8.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/12\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 8.3333333333% !important; }
.h-pull-1\/12\@mobile {
position: relative !important;
right: 8.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-2\/12\@mobile {
width: 16.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/12\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 16.6666666667% !important; }
.h-pull-2\/12\@mobile {
position: relative !important;
right: 16.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-3\/12\@mobile {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/12\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-3\/12\@mobile {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-4\/12\@mobile {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/12\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-4\/12\@mobile {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-5\/12\@mobile {
width: 41.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/12\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 41.6666666667% !important; }
.h-pull-5\/12\@mobile {
position: relative !important;
right: 41.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-6\/12\@mobile {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/12\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-6\/12\@mobile {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-7\/12\@mobile {
width: 58.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/12\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 58.3333333333% !important; }
.h-pull-7\/12\@mobile {
position: relative !important;
right: 58.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-8\/12\@mobile {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-8\/12\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-8\/12\@mobile {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-9\/12\@mobile {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-9\/12\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-9\/12\@mobile {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-10\/12\@mobile {
width: 83.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-10\/12\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 83.3333333333% !important; }
.h-pull-10\/12\@mobile {
position: relative !important;
right: 83.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-11\/12\@mobile {
width: 91.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-11\/12\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 91.6666666667% !important; }
.h-pull-11\/12\@mobile {
position: relative !important;
right: 91.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-12\/12\@mobile {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-12\/12\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-12\/12\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ } }
@media (min-width: 48em) {
.h-1\/1\@tablet {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/1\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-1\/1\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/2\@tablet {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/2\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-1\/2\@tablet {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-2\/2\@tablet {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/2\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-2\/2\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/3\@tablet {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/3\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-1\/3\@tablet {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-2\/3\@tablet {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/3\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-2\/3\@tablet {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-3\/3\@tablet {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/3\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-3\/3\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/4\@tablet {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/4\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-1\/4\@tablet {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-2\/4\@tablet {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/4\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-2\/4\@tablet {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-3\/4\@tablet {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/4\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-3\/4\@tablet {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-4\/4\@tablet {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/4\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-4\/4\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/5\@tablet {
width: 20% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important; }
.h-pull-1\/5\@tablet {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */ }
.h-2\/5\@tablet {
width: 40% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important; }
.h-pull-2\/5\@tablet {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */ }
.h-3\/5\@tablet {
width: 60% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important; }
.h-pull-3\/5\@tablet {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */ }
.h-4\/5\@tablet {
width: 80% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important; }
.h-pull-4\/5\@tablet {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */ }
.h-5\/5\@tablet {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/5\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-5\/5\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/6\@tablet {
width: 16.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/6\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 16.6666666667% !important; }
.h-pull-1\/6\@tablet {
position: relative !important;
right: 16.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-2\/6\@tablet {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/6\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-2\/6\@tablet {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-3\/6\@tablet {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/6\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-3\/6\@tablet {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-4\/6\@tablet {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/6\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-4\/6\@tablet {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-5\/6\@tablet {
width: 83.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/6\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 83.3333333333% !important; }
.h-pull-5\/6\@tablet {
position: relative !important;
right: 83.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-6\/6\@tablet {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/6\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-6\/6\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/7\@tablet {
width: 14.2857142857% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/7\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 14.2857142857% !important; }
.h-pull-1\/7\@tablet {
position: relative !important;
right: 14.2857142857% !important;
left: auto !important;
/* [1] */ }
.h-2\/7\@tablet {
width: 28.5714285714% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/7\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 28.5714285714% !important; }
.h-pull-2\/7\@tablet {
position: relative !important;
right: 28.5714285714% !important;
left: auto !important;
/* [1] */ }
.h-3\/7\@tablet {
width: 42.8571428571% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/7\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 42.8571428571% !important; }
.h-pull-3\/7\@tablet {
position: relative !important;
right: 42.8571428571% !important;
left: auto !important;
/* [1] */ }
.h-4\/7\@tablet {
width: 57.1428571429% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/7\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 57.1428571429% !important; }
.h-pull-4\/7\@tablet {
position: relative !important;
right: 57.1428571429% !important;
left: auto !important;
/* [1] */ }
.h-5\/7\@tablet {
width: 71.4285714286% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/7\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 71.4285714286% !important; }
.h-pull-5\/7\@tablet {
position: relative !important;
right: 71.4285714286% !important;
left: auto !important;
/* [1] */ }
.h-6\/7\@tablet {
width: 85.7142857143% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/7\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 85.7142857143% !important; }
.h-pull-6\/7\@tablet {
position: relative !important;
right: 85.7142857143% !important;
left: auto !important;
/* [1] */ }
.h-7\/7\@tablet {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/7\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-7\/7\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/8\@tablet {
width: 12.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/8\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 12.5% !important; }
.h-pull-1\/8\@tablet {
position: relative !important;
right: 12.5% !important;
left: auto !important;
/* [1] */ }
.h-2\/8\@tablet {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/8\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-2\/8\@tablet {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-3\/8\@tablet {
width: 37.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/8\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 37.5% !important; }
.h-pull-3\/8\@tablet {
position: relative !important;
right: 37.5% !important;
left: auto !important;
/* [1] */ }
.h-4\/8\@tablet {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/8\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-4\/8\@tablet {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-5\/8\@tablet {
width: 62.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/8\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 62.5% !important; }
.h-pull-5\/8\@tablet {
position: relative !important;
right: 62.5% !important;
left: auto !important;
/* [1] */ }
.h-6\/8\@tablet {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/8\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-6\/8\@tablet {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-7\/8\@tablet {
width: 87.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/8\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 87.5% !important; }
.h-pull-7\/8\@tablet {
position: relative !important;
right: 87.5% !important;
left: auto !important;
/* [1] */ }
.h-8\/8\@tablet {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-8\/8\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-8\/8\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/12\@tablet {
width: 8.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/12\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 8.3333333333% !important; }
.h-pull-1\/12\@tablet {
position: relative !important;
right: 8.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-2\/12\@tablet {
width: 16.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/12\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 16.6666666667% !important; }
.h-pull-2\/12\@tablet {
position: relative !important;
right: 16.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-3\/12\@tablet {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/12\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-3\/12\@tablet {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-4\/12\@tablet {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/12\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-4\/12\@tablet {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-5\/12\@tablet {
width: 41.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/12\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 41.6666666667% !important; }
.h-pull-5\/12\@tablet {
position: relative !important;
right: 41.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-6\/12\@tablet {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/12\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-6\/12\@tablet {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-7\/12\@tablet {
width: 58.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/12\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 58.3333333333% !important; }
.h-pull-7\/12\@tablet {
position: relative !important;
right: 58.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-8\/12\@tablet {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-8\/12\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-8\/12\@tablet {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-9\/12\@tablet {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-9\/12\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-9\/12\@tablet {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-10\/12\@tablet {
width: 83.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-10\/12\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 83.3333333333% !important; }
.h-pull-10\/12\@tablet {
position: relative !important;
right: 83.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-11\/12\@tablet {
width: 91.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-11\/12\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 91.6666666667% !important; }
.h-pull-11\/12\@tablet {
position: relative !important;
right: 91.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-12\/12\@tablet {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-12\/12\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-12\/12\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ } }
@media (min-width: 71.25em) {
.h-1\/1\@desktop {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/1\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-1\/1\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/2\@desktop {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/2\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-1\/2\@desktop {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-2\/2\@desktop {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/2\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-2\/2\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/3\@desktop {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/3\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-1\/3\@desktop {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-2\/3\@desktop {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/3\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-2\/3\@desktop {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-3\/3\@desktop {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/3\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-3\/3\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/4\@desktop {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/4\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-1\/4\@desktop {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-2\/4\@desktop {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/4\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-2\/4\@desktop {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-3\/4\@desktop {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/4\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-3\/4\@desktop {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-4\/4\@desktop {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/4\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-4\/4\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/5\@desktop {
width: 20% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important; }
.h-pull-1\/5\@desktop {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */ }
.h-2\/5\@desktop {
width: 40% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important; }
.h-pull-2\/5\@desktop {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */ }
.h-3\/5\@desktop {
width: 60% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important; }
.h-pull-3\/5\@desktop {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */ }
.h-4\/5\@desktop {
width: 80% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important; }
.h-pull-4\/5\@desktop {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */ }
.h-5\/5\@desktop {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/5\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-5\/5\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/6\@desktop {
width: 16.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/6\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 16.6666666667% !important; }
.h-pull-1\/6\@desktop {
position: relative !important;
right: 16.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-2\/6\@desktop {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/6\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-2\/6\@desktop {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-3\/6\@desktop {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/6\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-3\/6\@desktop {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-4\/6\@desktop {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/6\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-4\/6\@desktop {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-5\/6\@desktop {
width: 83.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/6\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 83.3333333333% !important; }
.h-pull-5\/6\@desktop {
position: relative !important;
right: 83.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-6\/6\@desktop {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/6\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-6\/6\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/7\@desktop {
width: 14.2857142857% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/7\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 14.2857142857% !important; }
.h-pull-1\/7\@desktop {
position: relative !important;
right: 14.2857142857% !important;
left: auto !important;
/* [1] */ }
.h-2\/7\@desktop {
width: 28.5714285714% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/7\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 28.5714285714% !important; }
.h-pull-2\/7\@desktop {
position: relative !important;
right: 28.5714285714% !important;
left: auto !important;
/* [1] */ }
.h-3\/7\@desktop {
width: 42.8571428571% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/7\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 42.8571428571% !important; }
.h-pull-3\/7\@desktop {
position: relative !important;
right: 42.8571428571% !important;
left: auto !important;
/* [1] */ }
.h-4\/7\@desktop {
width: 57.1428571429% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/7\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 57.1428571429% !important; }
.h-pull-4\/7\@desktop {
position: relative !important;
right: 57.1428571429% !important;
left: auto !important;
/* [1] */ }
.h-5\/7\@desktop {
width: 71.4285714286% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/7\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 71.4285714286% !important; }
.h-pull-5\/7\@desktop {
position: relative !important;
right: 71.4285714286% !important;
left: auto !important;
/* [1] */ }
.h-6\/7\@desktop {
width: 85.7142857143% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/7\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 85.7142857143% !important; }
.h-pull-6\/7\@desktop {
position: relative !important;
right: 85.7142857143% !important;
left: auto !important;
/* [1] */ }
.h-7\/7\@desktop {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/7\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-7\/7\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/8\@desktop {
width: 12.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/8\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 12.5% !important; }
.h-pull-1\/8\@desktop {
position: relative !important;
right: 12.5% !important;
left: auto !important;
/* [1] */ }
.h-2\/8\@desktop {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/8\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-2\/8\@desktop {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-3\/8\@desktop {
width: 37.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/8\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 37.5% !important; }
.h-pull-3\/8\@desktop {
position: relative !important;
right: 37.5% !important;
left: auto !important;
/* [1] */ }
.h-4\/8\@desktop {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/8\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-4\/8\@desktop {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-5\/8\@desktop {
width: 62.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/8\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 62.5% !important; }
.h-pull-5\/8\@desktop {
position: relative !important;
right: 62.5% !important;
left: auto !important;
/* [1] */ }
.h-6\/8\@desktop {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/8\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-6\/8\@desktop {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-7\/8\@desktop {
width: 87.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/8\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 87.5% !important; }
.h-pull-7\/8\@desktop {
position: relative !important;
right: 87.5% !important;
left: auto !important;
/* [1] */ }
.h-8\/8\@desktop {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-8\/8\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-8\/8\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/12\@desktop {
width: 8.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/12\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 8.3333333333% !important; }
.h-pull-1\/12\@desktop {
position: relative !important;
right: 8.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-2\/12\@desktop {
width: 16.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/12\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 16.6666666667% !important; }
.h-pull-2\/12\@desktop {
position: relative !important;
right: 16.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-3\/12\@desktop {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/12\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-3\/12\@desktop {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-4\/12\@desktop {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/12\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-4\/12\@desktop {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-5\/12\@desktop {
width: 41.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/12\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 41.6666666667% !important; }
.h-pull-5\/12\@desktop {
position: relative !important;
right: 41.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-6\/12\@desktop {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/12\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-6\/12\@desktop {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-7\/12\@desktop {
width: 58.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/12\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 58.3333333333% !important; }
.h-pull-7\/12\@desktop {
position: relative !important;
right: 58.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-8\/12\@desktop {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-8\/12\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-8\/12\@desktop {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-9\/12\@desktop {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-9\/12\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-9\/12\@desktop {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-10\/12\@desktop {
width: 83.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-10\/12\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 83.3333333333% !important; }
.h-pull-10\/12\@desktop {
position: relative !important;
right: 83.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-11\/12\@desktop {
width: 91.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-11\/12\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 91.6666666667% !important; }
.h-pull-11\/12\@desktop {
position: relative !important;
right: 91.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-12\/12\@desktop {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-12\/12\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-12\/12\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ } }
@media (min-width: 90em) {
.h-1\/1\@wide {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/1\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-1\/1\@wide {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/2\@wide {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/2\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-1\/2\@wide {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-2\/2\@wide {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/2\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-2\/2\@wide {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/3\@wide {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/3\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-1\/3\@wide {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-2\/3\@wide {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/3\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-2\/3\@wide {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-3\/3\@wide {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/3\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-3\/3\@wide {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/4\@wide {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/4\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-1\/4\@wide {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-2\/4\@wide {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/4\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-2\/4\@wide {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-3\/4\@wide {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/4\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-3\/4\@wide {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-4\/4\@wide {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/4\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-4\/4\@wide {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/5\@wide {
width: 20% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/5\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important; }
.h-pull-1\/5\@wide {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */ }
.h-2\/5\@wide {
width: 40% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/5\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important; }
.h-pull-2\/5\@wide {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */ }
.h-3\/5\@wide {
width: 60% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/5\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important; }
.h-pull-3\/5\@wide {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */ }
.h-4\/5\@wide {
width: 80% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/5\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important; }
.h-pull-4\/5\@wide {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */ }
.h-5\/5\@wide {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/5\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-5\/5\@wide {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/6\@wide {
width: 16.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/6\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 16.6666666667% !important; }
.h-pull-1\/6\@wide {
position: relative !important;
right: 16.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-2\/6\@wide {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/6\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-2\/6\@wide {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-3\/6\@wide {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/6\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-3\/6\@wide {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-4\/6\@wide {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/6\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-4\/6\@wide {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-5\/6\@wide {
width: 83.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/6\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 83.3333333333% !important; }
.h-pull-5\/6\@wide {
position: relative !important;
right: 83.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-6\/6\@wide {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/6\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-6\/6\@wide {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/7\@wide {
width: 14.2857142857% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/7\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 14.2857142857% !important; }
.h-pull-1\/7\@wide {
position: relative !important;
right: 14.2857142857% !important;
left: auto !important;
/* [1] */ }
.h-2\/7\@wide {
width: 28.5714285714% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/7\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 28.5714285714% !important; }
.h-pull-2\/7\@wide {
position: relative !important;
right: 28.5714285714% !important;
left: auto !important;
/* [1] */ }
.h-3\/7\@wide {
width: 42.8571428571% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/7\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 42.8571428571% !important; }
.h-pull-3\/7\@wide {
position: relative !important;
right: 42.8571428571% !important;
left: auto !important;
/* [1] */ }
.h-4\/7\@wide {
width: 57.1428571429% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/7\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 57.1428571429% !important; }
.h-pull-4\/7\@wide {
position: relative !important;
right: 57.1428571429% !important;
left: auto !important;
/* [1] */ }
.h-5\/7\@wide {
width: 71.4285714286% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/7\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 71.4285714286% !important; }
.h-pull-5\/7\@wide {
position: relative !important;
right: 71.4285714286% !important;
left: auto !important;
/* [1] */ }
.h-6\/7\@wide {
width: 85.7142857143% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/7\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 85.7142857143% !important; }
.h-pull-6\/7\@wide {
position: relative !important;
right: 85.7142857143% !important;
left: auto !important;
/* [1] */ }
.h-7\/7\@wide {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/7\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-7\/7\@wide {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/8\@wide {
width: 12.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/8\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 12.5% !important; }
.h-pull-1\/8\@wide {
position: relative !important;
right: 12.5% !important;
left: auto !important;
/* [1] */ }
.h-2\/8\@wide {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/8\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-2\/8\@wide {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-3\/8\@wide {
width: 37.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/8\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 37.5% !important; }
.h-pull-3\/8\@wide {
position: relative !important;
right: 37.5% !important;
left: auto !important;
/* [1] */ }
.h-4\/8\@wide {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/8\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-4\/8\@wide {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-5\/8\@wide {
width: 62.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/8\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 62.5% !important; }
.h-pull-5\/8\@wide {
position: relative !important;
right: 62.5% !important;
left: auto !important;
/* [1] */ }
.h-6\/8\@wide {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/8\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-6\/8\@wide {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-7\/8\@wide {
width: 87.5% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/8\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 87.5% !important; }
.h-pull-7\/8\@wide {
position: relative !important;
right: 87.5% !important;
left: auto !important;
/* [1] */ }
.h-8\/8\@wide {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-8\/8\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-8\/8\@wide {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.h-1\/12\@wide {
width: 8.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-1\/12\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 8.3333333333% !important; }
.h-pull-1\/12\@wide {
position: relative !important;
right: 8.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-2\/12\@wide {
width: 16.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-2\/12\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 16.6666666667% !important; }
.h-pull-2\/12\@wide {
position: relative !important;
right: 16.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-3\/12\@wide {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-3\/12\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.h-pull-3\/12\@wide {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.h-4\/12\@wide {
width: 33.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-4\/12\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.3333333333% !important; }
.h-pull-4\/12\@wide {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-5\/12\@wide {
width: 41.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-5\/12\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 41.6666666667% !important; }
.h-pull-5\/12\@wide {
position: relative !important;
right: 41.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-6\/12\@wide {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-6\/12\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.h-pull-6\/12\@wide {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.h-7\/12\@wide {
width: 58.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-7\/12\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 58.3333333333% !important; }
.h-pull-7\/12\@wide {
position: relative !important;
right: 58.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-8\/12\@wide {
width: 66.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-8\/12\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.6666666667% !important; }
.h-pull-8\/12\@wide {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-9\/12\@wide {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-9\/12\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.h-pull-9\/12\@wide {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.h-10\/12\@wide {
width: 83.3333333333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-10\/12\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 83.3333333333% !important; }
.h-pull-10\/12\@wide {
position: relative !important;
right: 83.3333333333% !important;
left: auto !important;
/* [1] */ }
.h-11\/12\@wide {
width: 91.6666666667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-11\/12\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 91.6666666667% !important; }
.h-pull-11\/12\@wide {
position: relative !important;
right: 91.6666666667% !important;
left: auto !important;
/* [1] */ }
.h-12\/12\@wide {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.h-push-12\/12\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.h-pull-12\/12\@wide {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ } }
.h-alpha {
line-height: 3rem;
font-size: 2.1176470588rem;
margin-bottom: 1.1776370588rem;
padding-top: 0.8223629412rem; }
@media screen and (min-width: 34em) {
.h-alpha {
font-size: 3.9705882353rem;
margin-bottom: 1.7705782353rem;
padding-top: 0.2294217647rem; } }
@media screen and (min-width: 48em) {
.h-alpha {
font-size: 3.9705882353rem;
margin-bottom: 1.7705782353rem;
padding-top: 0.2294217647rem; } }
@media screen and (min-width: 71.25em) {
.h-alpha {
font-size: 3.5882352941rem;
margin-bottom: 1.6482252941rem;
padding-top: 0.3517747059rem; } }
@media screen and (min-width: 90em) {
.h-alpha {
font-size: 4.2483660131rem;
margin-bottom: 1.8594671242rem;
padding-top: 0.1405328758rem; } }
.h-beta {
line-height: 3rem;
font-size: 1.8823529412rem;
margin-bottom: 1.1023429412rem;
padding-top: 0.8976570588rem; }
@media screen and (min-width: 34em) {
.h-beta {
font-size: 2.9779411765rem;
margin-bottom: 1.4529311765rem;
padding-top: 0.5470688235rem; } }
@media screen and (min-width: 48em) {
.h-beta {
font-size: 2.9779411765rem;
margin-bottom: 1.4529311765rem;
padding-top: 0.5470688235rem; } }
@media screen and (min-width: 71.25em) {
.h-beta {
font-size: 2.8692810458rem;
margin-bottom: 1.4181599346rem;
padding-top: 0.5818400654rem; } }
@media screen and (min-width: 90em) {
.h-beta {
font-size: 3.1895424837rem;
margin-bottom: 1.5206435948rem;
padding-top: 0.4793564052rem; } }
.h-gamma {
line-height: 3rem;
font-size: 1.6764705882rem;
margin-bottom: 1.0364605882rem;
padding-top: 0.9635394118rem; }
@media screen and (min-width: 34em) {
.h-gamma {
font-size: 2.2352941176rem;
margin-bottom: 1.2152841176rem;
padding-top: 0.7847158824rem; } }
@media screen and (min-width: 48em) {
.h-gamma {
font-size: 2.2352941176rem;
margin-bottom: 1.2152841176rem;
padding-top: 0.7847158824rem; } }
@media screen and (min-width: 71.25em) {
.h-gamma {
font-size: 2.3006535948rem;
margin-bottom: 1.2361991503rem;
padding-top: 0.7638008497rem; } }
@media screen and (min-width: 90em) {
.h-gamma {
font-size: 2.3921568627rem;
margin-bottom: 1.2654801961rem;
padding-top: 0.7345198039rem; } }
.h-delta {
line-height: 2rem;
font-size: 1.4926470588rem;
margin-bottom: -0.5223629412rem;
padding-top: 0.5223629412rem; }
@media screen and (min-width: 34em) {
.h-delta {
font-size: 1.6764705882rem;
margin-bottom: -0.4635394118rem;
padding-top: 0.4635394118rem; } }
@media screen and (min-width: 48em) {
.h-delta {
font-size: 1.6764705882rem;
margin-bottom: -0.4635394118rem;
padding-top: 0.4635394118rem; } }
@media screen and (min-width: 71.25em) {
.h-delta {
font-size: 1.8366013072rem;
margin-bottom: -0.4122975817rem;
padding-top: 0.4122975817rem; } }
@media screen and (min-width: 90em) {
.h-delta {
font-size: 1.7908496732rem;
margin-bottom: -0.4269381046rem;
padding-top: 0.4269381046rem; } }
.h-epsilon {
line-height: 2rem;
font-size: 1.3235294118rem;
margin-bottom: -0.5764805882rem;
padding-top: 0.5764805882rem; }
@media screen and (min-width: 34em) {
.h-epsilon {
font-size: 1.2573529412rem;
margin-bottom: -0.5976570588rem;
padding-top: 0.5976570588rem; } }
@media screen and (min-width: 48em) {
.h-epsilon {
font-size: 1.2573529412rem;
margin-bottom: -0.5976570588rem;
padding-top: 0.5976570588rem; } }
@media screen and (min-width: 71.25em) {
.h-epsilon {
font-size: 1.4705882353rem;
margin-bottom: -0.5294217647rem;
padding-top: 0.5294217647rem; } }
@media screen and (min-width: 90em) {
.h-epsilon {
font-size: 1.3464052288rem;
margin-bottom: -0.5691603268rem;
padding-top: 0.5691603268rem; } }
.h-zeta {
line-height: 2rem;
font-size: 1.1764705882rem;
margin-bottom: -0.6235394118rem;
padding-top: 0.6235394118rem; }
@media screen and (min-width: 34em) {
.h-zeta {
font-size: 1.1764705882rem;
margin-bottom: -0.6235394118rem;
padding-top: 0.6235394118rem; } }
@media screen and (min-width: 48em) {
.h-zeta {
font-size: 1.1764705882rem;
margin-bottom: -0.6235394118rem;
padding-top: 0.6235394118rem; } }
@media screen and (min-width: 71.25em) {
.h-zeta {
font-size: 1.1764705882rem;
margin-bottom: -0.6235394118rem;
padding-top: 0.6235394118rem; } }
@media screen and (min-width: 90em) {
.h-zeta {
font-size: 1.1764705882rem;
margin-bottom: -0.6235394118rem;
padding-top: 0.6235394118rem; } }
.h-eta {
line-height: 2rem;
font-size: 1.0441176471rem;
margin-bottom: -0.6658923529rem;
padding-top: 0.6658923529rem; }
@media screen and (min-width: 34em) {
.h-eta {
font-size: 0.9411764706rem;
margin-bottom: -0.6988335294rem;
padding-top: 0.6988335294rem; } }
@media screen and (min-width: 48em) {
.h-eta {
font-size: 0.9411764706rem;
margin-bottom: -0.6988335294rem;
padding-top: 0.6988335294rem; } }
@media screen and (min-width: 71.25em) {
.h-eta {
font-size: 0.9411764706rem;
margin-bottom: -0.6988335294rem;
padding-top: 0.6988335294rem; } }
@media screen and (min-width: 90em) {
.h-eta {
font-size: 1.0065359477rem;
margin-bottom: -0.6779184967rem;
padding-top: 0.6779184967rem; } }
.h-theta {
line-height: 1.1rem;
font-size: 0.9264705882rem;
margin-bottom: -0.2535394118rem;
padding-top: 0.2535394118rem; }
@media screen and (min-width: 34em) {
.h-theta {
font-size: 0.8823529412rem;
margin-bottom: -0.2676570588rem;
padding-top: 0.2676570588rem; } }
@media screen and (min-width: 48em) {
.h-theta {
font-size: 0.8823529412rem;
margin-bottom: -0.2676570588rem;
padding-top: 0.2676570588rem; } }
@media screen and (min-width: 71.25em) {
.h-theta {
font-size: 0.7516339869rem;
margin-bottom: -0.3094871242rem;
padding-top: 0.3094871242rem; } }
@media screen and (min-width: 90em) {
.h-theta {
font-size: 0.8823529412rem;
margin-bottom: -0.2676570588rem;
padding-top: 0.2676570588rem; } }
.h-iota {
line-height: 1rem;
font-size: 0.8235294118rem;
margin-bottom: -0.2364805882rem;
padding-top: 0.2364805882rem; }
@media screen and (min-width: 34em) {
.h-iota {
font-size: 0.7058823529rem;
margin-bottom: -0.2741276471rem;
padding-top: 0.2741276471rem; } }
@media screen and (min-width: 48em) {
.h-iota {
font-size: 0.7058823529rem;
margin-bottom: -0.2741276471rem;
padding-top: 0.2741276471rem; } }
@media screen and (min-width: 71.25em) {
.h-iota {
font-size: 0.6013071895rem;
margin-bottom: -0.3075916993rem;
padding-top: 0.3075916993rem; } }
@media screen and (min-width: 90em) {
.h-iota {
font-size: 0.7581699346rem;
margin-bottom: -0.2573956209rem;
padding-top: 0.2573956209rem; } }
.h-bold {
font-weight: 700; }
.h-italic {
font-style: italic; }
.h-caption {
font-size: 0.9264705882rem;
font-family: semplicitapro, sans-serif;
font-style: normal;
font-weight: 500; }
@media screen and (min-width: 34em) {
.h-caption {
font-size: 0.8823529412rem; } }
@media screen and (min-width: 48em) {
.h-caption {
font-size: 0.8823529412rem; } }
@media screen and (min-width: 71.25em) {
.h-caption {
font-size: 0.7516339869rem; } }
@media screen and (min-width: 90em) {
.h-caption {
font-size: 0.8823529412rem; } }
small {
line-height: 1rem; }
.h-caption {
line-height: 2rem;
margin-bottom: 1.2964605882rem;
padding-top: 0.7035394118rem;
color: #91D200; }
@media screen and (min-width: 34em) {
.h-caption {
margin-bottom: 1.2823429412rem;
padding-top: 0.7176570588rem; } }
@media screen and (min-width: 48em) {
.h-caption {
margin-bottom: 1.2823429412rem;
padding-top: 0.7176570588rem; } }
@media screen and (min-width: 71.25em) {
.h-caption {
margin-bottom: 1.2405128758rem;
padding-top: 0.7594871242rem; } }
@media screen and (min-width: 90em) {
.h-caption {
margin-bottom: 1.2823429412rem;
padding-top: 0.7176570588rem; } }
h1 + .h-caption,
.alpha + .h-caption,
h2 + .h-caption,
.beta + .h-caption,
h3 + .h-caption,
.gamma + .h-caption {
margin-top: -1rem; }
.h-delta + .h-caption,
.h-epsilon + .h-caption,
.h-zeta + .h-caption {
margin-top: 0rem; }
.h-upper {
-webkit-font-kerning: normal;
font-kerning: normal;
letter-spacing: 0.075rem;
text-transform: uppercase; }
.h-small-caps {
font-feature-settings: 'smcp', 'kern';
-webkit-font-kerning: normal;
font-kerning: normal;
letter-spacing: 0.1rem; }
.h-lining-numerals {
font-feature-settings: 'lnum', 'kern'; }
.h-oldstyle-numerals {
font-feature-settings: 'onum', 'kern'; }
.h-nobr {
white-space: nowrap; }
/* ==========================================================================
#FORM STATES
========================================================================== */
.has-error {
color: #F05D5E;
margin-bottom: 0; }
input.has-error {
border-color: #F05D5E; }
p.has-error {
font-size: 0.9264705882rem;
font-family: semplicitapro, sans-serif;
padding-top: 0; }
@media screen and (min-width: 34em) {
p.has-error {
font-size: 0.8823529412rem; } }
@media screen and (min-width: 48em) {
p.has-error {
font-size: 0.8823529412rem; } }
@media screen and (min-width: 71.25em) {
p.has-error {
font-size: 0.7516339869rem; } }
@media screen and (min-width: 90em) {
p.has-error {
font-size: 0.8823529412rem; } }
.is-hidden {
display: none; }
/* ==========================================================================
#ZENSCROLL
========================================================================== */
body,
.smooth-container {
scroll-behaviour: smooth; }
.show-grid {
position: relative; }
.show-grid::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(to bottom, hotpink 0, rgba(255, 255, 255, 0) 1px);
background-repeat: repeat-y;
background-size: 100% 1rem;
z-index: -1;
/* Behind content */ }
/*# sourceMappingURL=main.css.map */