*
* 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: -24px;
/* [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/
* 6. Fallback for old IEs not supporting `rem` values.
*/
.o-layout__item {
box-sizing: border-box;
/* [1] */
display: inline-block;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */
padding-left: 24px;
/* [5] */
font-size: 16px;
/* [6] */
font-size: 1rem;
}
/* Gutter size modifiers
========================================================================== */
.o-layout--flush {
margin-left: 0;
}
.o-layout--flush > .o-layout__item {
padding-left: 0;
}
.o-layout--tiny {
margin-left: -6px;
}
.o-layout--tiny > .o-layout__item {
padding-left: 6px;
}
.o-layout--small {
margin-left: -12px;
}
.o-layout--small > .o-layout__item {
padding-left: 12px;
}
.o-layout--large {
margin-left: -48px;
}
.o-layout--large > .o-layout__item {
padding-left: 48px;
}
.o-layout--huge {
margin-left: -96px;
}
.o-layout--huge > .o-layout__item {
padding-left: 96px;
}
/* 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: flex;
flex-wrap: wrap;
}
.o-layout--stretch > .o-layout__item {
display: flex;
}
.o-layout--stretch.o-layout--center {
justify-content: center;
}
.o-layout--stretch.o-layout--right {
justify-content: flex-end;
}
.o-layout--stretch.o-layout--left {
justify-content: flex-start;
}
/* 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;
}
/* ==========================================================================
#MEDIA
========================================================================== */
/**
* Place any image- and text-like content side-by-side, as per:
* http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
*/
.o-media {
display: block;
}
.o-media:after {
content: "" !important;
display: block !important;
clear: both !important;
}
.o-media__img {
float: left;
margin-right: 24px;
}
.o-media__img > img {
display: block;
}
.o-media__body {
overflow: hidden;
display: block;
}
.o-media__body,
.o-media__body > :last-child {
margin-bottom: 0;
}
/* Size variants
========================================================================== */
/**
* Modify the amount of space between our image and our text. We also have
* reversible options for all available sizes.
*/
.o-media--flush > .o-media__img {
margin-right: 0;
margin-left: 0;
}
.o-media--tiny > .o-media__img {
margin-right: 6px;
}
.o-media--tiny.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 6px;
}
.o-media--small > .o-media__img {
margin-right: 12px;
}
.o-media--small.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 12px;
}
.o-media--large > .o-media__img {
margin-right: 48px;
}
.o-media--large.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 48px;
}
.o-media--huge > .o-media__img {
margin-right: 96px;
}
.o-media--huge.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 96px;
}
/* Reversed media objects
========================================================================== */
.o-media--reverse > .o-media__img {
float: right;
margin-right: 0;
margin-left: 24px;
}
/* ==========================================================================
#FLAG
========================================================================== */
/**
* The flag object is a design pattern similar to the media object, however it
* utilises `display: table[-cell];` to give us control over the vertical
* alignments of the text and image.
*
* http://csswizardry.com/2013/05/the-flag-object/
*
* 1. Allows us to control vertical alignments.
* 2. Force the object to be the full width of its parent. Combined with [1],
* this makes the object behave in a quasi-`display: block;` manner.
* 3. Reset inherited `border-spacing` declarations.
*/
.o-flag {
display: table;
/* [1] */
width: 100%;
/* [2] */
border-spacing: 0;
/* [3] */
}
/**
* Items within a flag object. There should only ever be one of each.
*
* 1. Default to aligning content to their middles.
*/
.o-flag__img,
.o-flag__body {
display: table-cell;
vertical-align: middle;
/* [1] */
}
/**
* Flag images have a space between them and the body of the object.
*
* 1. Force `.flag__img` to take up as little space as possible:
* https://pixelsvsbytes.com/2012/02/this-css-layout-grid-is-no-holy-grail/
*/
.o-flag__img {
width: 1px;
/* [1] */
padding-right: 24px;
/**
* 1. Fixes problem with images disappearing.
*
* The direct child selector '>' needs to remain in order for nested flag
* objects to not inherit their parent’s formatting. In case the image tag
* is wrapped into another tag, e.g. an anchor for linking reasons, it will
* disappear. In that case try wrapping the whole o-flag__img object into
* an anchor tag.
*
* E.g.:
*
*
*
* 
*
*
*/
}
.o-flag__img > img {
max-width: none;
/* [1] */
}
/**
* The container for the main content of the flag object.
*
* 1. Forces the `.flag__body` to take up all remaining space.
*/
.o-flag__body {
width: auto;
/* [1] */
}
.o-flag__body,
.o-flag__body > :last-child {
margin-bottom: 0;
}
/* Size variants
========================================================================== */
.o-flag--flush > .o-flag__img {
padding-right: 0;
padding-left: 0;
}
.o-flag--tiny > .o-flag__img {
padding-right: 6px;
}
.o-flag--tiny.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 6px;
}
.o-flag--small > .o-flag__img {
padding-right: 12px;
}
.o-flag--small.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 12px;
}
.o-flag--large > .o-flag__img {
padding-right: 48px;
}
.o-flag--large.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 48px;
}
.o-flag--huge > .o-flag__img {
padding-right: 96px;
}
.o-flag--huge.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 96px;
}
/* Reversed flag
========================================================================== */
/**
* 1. Swap the rendered direction of the object…
* 2. …and reset it.
* 3. Reassign margins to the correct sides.
*/
.o-flag--reverse {
direction: rtl;
/* [1] */
}
.o-flag--reverse > .o-flag__img,
.o-flag--reverse > .o-flag__body {
direction: ltr;
/* [2] */
}
.o-flag--reverse > .o-flag__img {
padding-right: 0;
/* [3] */
padding-left: 24px;
/* [3] */
}
/* Alignment variants
========================================================================== */
/**
* Vertically align the image- and body-content differently. Defaults to middle.
*/
.o-flag--top > .o-flag__img,
.o-flag--top > .o-flag__body {
vertical-align: top;
}
.o-flag--bottom > .o-flag__img,
.o-flag--bottom > .o-flag__body {
vertical-align: bottom;
}
/* ==========================================================================
#LIST-BARE
========================================================================== */
/**
* Strip list-like appearance from lists by removing their bullets and any
* indentation.
*
* Note: Declaring the item class might not be necessary everywhere,
* but is for example in
* - lists for the
- children.
*/
.o-list-bare {
list-style: none;
margin-left: 0;
}
.o-list-bare__item {
margin-left: 0;
}
/* ==========================================================================
#LIST-INLINE
========================================================================== */
/**
* The list-inline object simply displays a list of items in one line.
*/
.o-list-inline {
margin-left: 0;
list-style: none;
}
.o-list-inline__item {
display: inline-block;
}
/* ==========================================================================
#BOX
========================================================================== */
/**
* The box object simply boxes off content. Extend with cosmetic styles in the
* Components layer.
*
* 1. So we can apply the `.o-box` class to naturally-inline elements.
*/
.o-box {
display: block;
/* [1] */
padding: 24px;
}
.o-box:after {
content: "" !important;
display: block !important;
clear: both !important;
}
.o-box > :last-child {
margin-bottom: 0;
}
/* Size variants
========================================================================== */
.o-box--flush {
padding: 0;
}
.o-box--tiny {
padding: 6px;
}
.o-box--small {
padding: 12px;
}
.o-box--large {
padding: 48px;
}
.o-box--huge {
padding: 96px;
}
/* ==========================================================================
#BLOCK
========================================================================== */
/**
* Stacked image-with-text object. A simple abstraction to cover a very commonly
* occurring design pattern.
*/
.o-block {
display: block;
text-align: center;
}
.o-block__img {
margin-bottom: 24px;
/* Size variants
====================================================================== */
}
.o-block--flush > .o-block__img {
margin-bottom: 0;
}
.o-block--tiny > .o-block__img {
margin-bottom: 6px;
}
.o-block--small > .o-block__img {
margin-bottom: 12px;
}
.o-block--large > .o-block__img {
margin-bottom: 48px;
}
.o-block--huge > .o-block__img {
margin-bottom: 96px;
}
.o-block__body {
display: block;
}
/* Alignment variants
========================================================================== */
.o-block--right {
text-align: right;
}
.o-block--left {
text-align: left;
}
/* ==========================================================================
#RATIO
========================================================================== */
/**
* Create ratio-bound content blocks, to keep media (e.g. images, videos) in
* their correct aspect ratios.
*
* http://alistapart.com/article/creating-intrinsic-ratios-for-video
*
* 1. Default is a 1:1 ratio (i.e. a perfect square).
*/
.o-ratio {
position: relative;
display: block;
}
.o-ratio:before {
content: "";
display: block;
width: 100%;
padding-bottom: 100%;
/* [1] */
}
.o-ratio__content,
.o-ratio > iframe,
.o-ratio > embed,
.o-ratio > object {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
/* Ratio variants.
========================================================================== */
/**
* Generate a series of ratio classes to be used like so:
*
* * */ .o-ratio--2\:1:before { padding-bottom: 50%; } .o-ratio--4\:3:before { padding-bottom: 75%; } .o-ratio--16\:9:before { padding-bottom: 56.25%; } /* Contain modifier. ========================================================================== */ /** * Only works with image content. * Contains the image to the boundaries, without cropping or stretching it. */ .o-ratio--img-contain > .o-ratio__content:before { height: auto; margin: auto; max-height: 100%; max-width: 100%; width: auto; } /* ========================================================================== #CROP ========================================================================== */ /** * Provide a cropping container in order to display media (usually images) * cropped to certain ratios. * * 1. Set up a positioning context in which the image can sit. * 2. This is the crucial part: where the cropping happens. */ .o-crop { position: relative; /* [1] */ display: block; overflow: hidden; /* [2] */ } /** * Apply this class to the content (usually `img`) that needs cropping. * * 1. Image’s default positioning is top-left in the cropping box. * 2. Make sure the media doesn’t stop itself too soon. */ .o-crop__content { position: absolute; top: 0; /* [1] */ left: 0; /* [1] */ max-width: none; /* [2] */ } /** * We can position the media in different locations within the cropping area. */ .o-crop__content--left-top { left: 0; } .o-crop__content--left-center { top: 50%; transform: translateY(-50%); } .o-crop__content--left-bottom { top: auto; bottom: 0; } .o-crop__content--right-top { right: 0; left: auto; } .o-crop__content--right-center { top: 50%; right: 0; left: auto; transform: translateY(-50%); } .o-crop__content--right-bottom { top: auto; right: 0; bottom: 0; left: auto; } .o-crop__content--center-top { left: 50%; transform: translateX(-50%); } .o-crop__content--center, .o-crop__content--center-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .o-crop__content--center-bottom { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); } /* Crop-ratio variants ========================================================================== */ /** * Generate a series of crop classes to be used like so: * ** */ .o-crop--2\:1 { padding-bottom: 50%; } .o-crop--4\:3 { padding-bottom: 75%; } .o-crop--16\:9 { padding-bottom: 56.25%; } /* Fill modifier ========================================================================== */ /** * Content stretches to fill it's container while maintaining aspect-ratio. */ .o-crop--fill > .o-crop__content { min-height: 100%; min-width: 100%; } /* ========================================================================== #TABLE ========================================================================== */ /** * A simple object for manipulating the structure of HTML `table`s. */ .o-table { width: 100%; } /* Equal-width table cells ========================================================================== */ /** * `table-layout: fixed` forces all cells within a table to occupy the same * width as each other. This also has performance benefits: because the browser * does not need to (re)calculate cell dimensions based on content it discovers, * the table can be rendered very quickly. Further reading: * https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values */ .o-table--fixed { table-layout: fixed; } /* Size variants ========================================================================== */ .o-table--tiny th, .o-table--tiny td { padding: 6px; } .o-table--small th, .o-table--small td { padding: 12px; } .o-table--large th, .o-table--large td { padding: 48px; } .o-table--huge th, .o-table--huge td { padding: 96px; } /* ========================================================================== #PACK ========================================================================== */ /** * The pack object simply causes any number of elements pack up horizontally to * automatically fill an equal, fluid width of their parent. * * 1. Fill all available space. * 2. Remove any leftover styling from lists. * 3. Cause children to be automatically equally sized. */ .o-pack { width: 100%; /* [1] */ margin-left: 0; /* [2] */ display: table; table-layout: fixed; /* [3] */ } /** * 1. Cause children to adopt table-like structure. * 2. Default item alignment is with the tops of each other. */ .o-pack__item { display: table-cell; /* [1] */ vertical-align: top; /* [2] */ /* Vertical alignment variants ====================================================================== */ } .o-pack--middle > .o-pack__item { vertical-align: middle; } .o-pack--bottom > .o-pack__item { vertical-align: bottom; } /* Unequal-width items ========================================================================== */ .o-pack--auto { table-layout: auto; } /* Size variants ========================================================================== */ .o-pack--tiny { border-spacing: 6px; } .o-pack--small { border-spacing: 12px; } .o-pack--default { border-spacing: 24px; } .o-pack--large { border-spacing: 48px; } .o-pack--huge { border-spacing: 96px; } /* Reversed order packs ========================================================================== */ .o-pack--reverse { direction: rtl; } .o-pack--reverse > .o-pack__item { direction: ltr; } body { overflow-x: hidden; color: #ffffff; width: 100%; background-color: #00381F; font-family: "Karla", sans-serif; font-size: 18px; } .welcome__header__container { background-color: #00381F; } @media (min-width: 67.5em) { .welcome__header__container { display: flex; } } @media (min-width: 67.5em) { .welcome__header__container__intro { width: 60%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } } .welcome__logo { display: flex; justify-content: center; padding: 24px 12px; } @media (min-width: 67.5em) { .welcome__logo { float: left; width: 100%; padding: 24px 0; height: 30vh; } } .welcome__logo__img { width: 250px; height: auto; } .welcome__logo__img img { width: 100%; height: 100%; } .welcome__circle { position: absolute; top: 40%; left: 50%; transform: translate(-50%); } @media (min-width: 67.5em) { .welcome__circle { position: static; transform: translate(0); margin: 24px; } } .welcome__circle-contour { text-align: center; border-radius: 50%; border: 2px solid #D59E33; display: flex; justify-content: center; width: 340px; height: 340px; } @media (min-width: 46.25em) { .welcome__circle-contour { height: 500px; width: 500px; } } @media (min-width: 81.25em) { .welcome__circle-contour { height: 650px; width: 650px; border: 3px solid #D59E33; } } .welcome__circle-fond { margin: auto; border-radius: 50%; height: 320px; width: 320px; color: #ffffff; display: flex; align-items: center; justify-content: center; text-align: center; background-color: rgba(213, 158, 51, 0.85); } @media (min-width: 46.25em) { .welcome__circle-fond { height: 480px; width: 480px; } } @media (min-width: 81.25em) { .welcome__circle-fond { height: 600px; width: 600px; } } .welcome__circle-text { width: 260px; margin: 0 auto; font-size: 16px; } .welcome__circle-text hr { width: 70px; border-style: solid; margin: 12px auto; } @media (min-width: 46.25em) { .welcome__circle-text { width: 350px; font-size: 20px; } } @media (min-width: 81.25em) { .welcome__circle-text { width: 450px; font-size: 24px; } } .welcome__circle_content { font-weight: 700; font-family: "Muli", serif; font-size: 18px; } @media (min-width: 46.25em) { .welcome__circle_content { font-size: 24px; } } @media (min-width: 81.25em) { .welcome__circle_content { font-size: 34px; } } .welcome__team__img { width: 100%; } .welcome__team__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (min-width: 67.5em) { .welcome__team__img { width: 40%; } .welcome__team__img img { -o-object-fit: cover; object-fit: cover; } } .welcome__boite { display: flex; width: 100%; } .welcome__team__img__desktop { display: none; } @media (min-width: 67.5em) { .welcome__team__img__desktop { width: 50%; display: flex; flex-direction: column; float: left; } .welcome__team__img__desktop img { flex: 1 1 0; -o-object-fit: cover; object-fit: cover; } } .welcome__icon { width: 70px; margin: 24px; } @media (min-width: 67.5em) { .welcome__icon { display: none; } } .welcome__icon__desktop { display: none; } @media (min-width: 67.5em) { .welcome__icon__desktop { width: 70px; margin: 10px; display: flex; } } .welcome__liseret { width: 125px; height: 2px; background-color: #D59E33; } @media (min-width: 67.5em) { .welcome__liseret { width: 193px; } } .welcome__bloc { margin: 0 auto; display: flex; align-items: center; justify-content: center; text-align: center; } .welcome__section { text-align: center; padding: 48px 48px 0 48px; } @media (min-width: 67.5em) { .welcome__new__section { background-color: #F5F1E2; clear: both; color: #00381F; padding: 48px; } .welcome__new__section .welcome__mini__texte { width: 50%; margin: 0 auto; } } @media (min-width: 67.5em) { .welcome__blanche { background-color: #ffffff; clear: both; color: #00381F; padding: 48px; } } .welcome__section-title { text-transform: uppercase; text-align: center; font-size: 20px; font-family: "Muli", serif; } .welcome__lemenu { padding-bottom: 48px; } @media (min-width: 67.5em) { .welcome__lemenu { background-color: #00381F; color: #ffffff; width: 50%; float: right; } } .welcome__menu { padding: 12px; padding-bottom: 24px; background-color: #ffffff; color: #00381F; margin-top: 48px; } @media (min-width: 67.5em) { .welcome__menu { background-color: #00381F; color: #ffffff; padding: 0; } } .welcome__menu-title { text-transform: uppercase; text-align: center; font-weight: 700; color: #ffffff; margin: 12px; margin-top: 24px; padding-top: 4px; background-color: #012F1B; } .welcome__menu-subtitle { text-transform: uppercase; font-size: 16px; font-weight: 700; } .welcome__menu-prix { font-weight: 700; float: right; margin-bottom: 0; } @media (min-width: 67.5em) { .welcome__menu-prix { color: #D59E33; } } .welcome__menu-plat { text-align: left; margin: 0 12px; font-size: 16px; display: flex; flex-direction: column-reverse; } .welcome__but__container { text-align: center; } @media (min-width: 67.5em) { .a-la-carte { margin-bottom: 48px; } } .a-la-carte.center { text-align: center; } .welcome__button__lien { display: block; position: relative; text-decoration: none; color: #012F1B; background-color: #D59E33; overflow: hidden; text-transform: uppercase; border-radius: 5pt; font-weight: 700; padding: 12px; margin: 24px 0; } .welcome__button__lien::after, .welcome__button__lien::before { content: " "; display: block; position: absolute; width: 100%; top: 0; bottom: 0; right: 0; background: #012F1B; z-index: -1; } .welcome__button__lien::before { transform: translateX(-100%); z-index: 1; } .welcome__button__lien:hover:before { transform: translateX(0); transition: transform 350ms ease; } .welcome__button__lien::after { z-index: 0; transform: translateX(100%); transition: none; transition: transform 350ms ease; } .welcome__button__lien:hover:after { opacity: 1; transform: translateX(0); transition: transform 350ms 360ms ease; } .welcome__button__lien:hover div { color: #ffffff; } hr { margin: 9.5px 0; border-style: dashed; } .welcome__separateur { border: none; width: 100%; } .welcome__separateur .bloc { float: left; padding-bottom: 12px; } @media (min-width: 67.5em) { .welcome__separateur .bloc { float: none; } } .welcome__separateur .bloc:last-child { float: right; } @media (min-width: 67.5em) { .welcome__separateur .bloc:last-child { float: left; } } @media (min-width: 67.5em) { .welcome__separateur { margin-right: 24px; border-right-style: dashed; } } .welcome__menu-texte { width: 80%; } .welcome__button { text-decoration: none; text-transform: uppercase; text-align: center; font-weight: 700; z-index: 5; transition: color 350ms ease; position: relative; } @media (min-width: 67.5em) { .welcome__section__bottom { width: 50%; margin: 0 auto; display: flex; flex-direction: row; } } .welcome__bottom { clear: both; text-align: left; font-size: 16px; } @media (min-width: 67.5em) { .welcome__bottom { width: 100%; background-color: #ffffff; } .welcome__bottom hr { display: none; } .welcome__bottom .welcome__button__lien { width: 160px; } } .welcome__itineraire { width: 120px; float: right; } @media (min-width: 67.5em) { .welcome__appel { width: 160px; } } @media (min-width: 67.5em) { .welcome__reserver { width: 240px; margin: 24px auto; } } @media (min-width: 67.5em) { .landing__text__wrapper { padding: 24px; width: 60%; height: 100vh; } } @media (min-width: 81.25em) { .landing__text__wrapper { width: 70%; height: 100vh; } } .footer__section { padding: 48px 48px 0 48px; display: flex; flex-direction: column; } @media (min-width: 67.5em) { .footer__section { flex-direction: row; padding: 48px; } } @media (min-width: 67.5em) { .footer__footer { float: right; width: 20%; margin: 0 auto; } } .footer__footer p:hover { color: #D59E33; } .footer__footer.maitre-icon { order: 1; margin-bottom: 48px; } @media (min-width: 67.5em) { .footer__footer.maitre-icon { order: inherit; } } .footer__title { text-transform: uppercase; text-align: left; font-family: "Muli", serif; font-size: 16px; margin-bottom: 24px; } .footer__categorie { font-size: 14px; } .footer__social__icon { margin: 0 auto; display: flex; align-items: center; } .footer__social__icon p { transition-duration: 0.4s; } .footer__social__icon p:hover { transform: scale(1.2); } .footer__icon { margin-right: 24px; } .footer__icon a img { border-radius: 5px; } .christmas-section { display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #4f0000; } .christmas-icon { display: block; width: 70px; } .landing__wrapper { display: flex; flex-direction: column; background-color: #00381F; } @media (min-width: 67.5em) { .landing__wrapper { flex-direction: row; } } @media (min-width: 67.5em) { .landing__text__wrapper { padding: 24px; width: 60%; height: 100vh; } } @media (min-width: 81.25em) { .landing__text__wrapper { width: 70%; height: 100vh; } } .landing__team__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .landing__text { color: #ffffff; } .landing__logo { display: flex; justify-content: center; padding: 12px 12px; } .landing__logo__img { width: 250px; height: auto; } .landing__logo__img img { width: 100%; height: 100%; } .landing__social { display: flex; align-items: center; justify-content: center; } @media (min-width: 67.5em) { .landing__social { justify-content: flex-start; } } .landing__social__icon { width: 45px; height: 45px; } .landing__social__icon a img { width: 100%; height: 100%; } .c-button { border-radius: 0; border: 0; font-family: "Karla", sans-serif; font-weight: 700; text-decoration: none !important; display: flex; align-items: center; justify-content: center; text-align: center; } .c-button i { font-size: 20px; } .c-button-primary { background-color: #D59E33; color: #ffffff !important; } .c-button-primary:hover { background-color: #c69029; } .c-button-secondary { background-color: #00381F; color: #ffffff !important; } .c-button-secondary:hover { background-color: #001f11; } .c-button--uppercase { text-transform: uppercase; } .c-button-centered { display: flex; align-items: center; justify-content: center; } .c-button-start { display: flex; align-items: flex-start; justify-content: flex-start; } .c-button--tiny { padding: 6px; font-size: 14px; line-height: 14px; } .c-button--small { padding: 12px 12px; font-size: 14px; line-height: 16px; } .c-button--big { padding: 12px 24px; font-size: 18px; line-height: 18px; } .c-title { display: flex; flex-direction: column; align-items: center; font-family: "Muli", serif; font-size: 34px; color: #D59E33; } .c-title__margin { margin-top: 24px; } @media (min-width: 67.5em) { .c-title__margin { margin-top: 96px; } } body { font-family: "Karla", sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: "Muli", serif; } .c-title__divider-repeat { background-image: url("/centreequestrecancale/img/icons/divider-title-section.svg"); background-repeat: repeat-x; background-position: bottom left; height: 5px; width: 100%; margin-bottom: 60px; } .c-title__divider-repeat h2 { font-family: "Karla", sans-serif; font-size: 24px; color: #2F2F2F; padding-top: 24px; } /* ========================================================================== #CLEARFIX ========================================================================== */ /** * Attach our clearfix mixin to a utility class. */ .u-clearfix:after { content: "" !important; display: block !important; clear: both !important; } /* ========================================================================== #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. `.u-2/3`). Use these in * your markup: * ** * The following will generate widths helper classes based on the fractions * defined in the `$inuit-fractions` list. */ .u-1\/1 { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/1 { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-1\/1 { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/2 { width: 50% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/2 { position: relative !important; right: auto !important; /* [1] */ left: 50% !important; } .u-pull-1\/2 { position: relative !important; right: 50% !important; left: auto !important; /* [1] */ } .u-2\/2 { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/2 { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-2\/2 { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/3 { width: 33.33333333% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/3 { position: relative !important; right: auto !important; /* [1] */ left: 33.33333333% !important; } .u-pull-1\/3 { position: relative !important; right: 33.33333333% !important; left: auto !important; /* [1] */ } .u-2\/3 { width: 66.66666667% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/3 { position: relative !important; right: auto !important; /* [1] */ left: 66.66666667% !important; } .u-pull-2\/3 { position: relative !important; right: 66.66666667% !important; left: auto !important; /* [1] */ } .u-3\/3 { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/3 { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-3\/3 { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/4 { width: 25% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/4 { position: relative !important; right: auto !important; /* [1] */ left: 25% !important; } .u-pull-1\/4 { position: relative !important; right: 25% !important; left: auto !important; /* [1] */ } .u-2\/4 { width: 50% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/4 { position: relative !important; right: auto !important; /* [1] */ left: 50% !important; } .u-pull-2\/4 { position: relative !important; right: 50% !important; left: auto !important; /* [1] */ } .u-3\/4 { width: 75% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/4 { position: relative !important; right: auto !important; /* [1] */ left: 75% !important; } .u-pull-3\/4 { position: relative !important; right: 75% !important; left: auto !important; /* [1] */ } .u-4\/4 { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-4\/4 { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-4\/4 { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/5 { width: 20% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/5 { position: relative !important; right: auto !important; /* [1] */ left: 20% !important; } .u-pull-1\/5 { position: relative !important; right: 20% !important; left: auto !important; /* [1] */ } .u-2\/5 { width: 40% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/5 { position: relative !important; right: auto !important; /* [1] */ left: 40% !important; } .u-pull-2\/5 { position: relative !important; right: 40% !important; left: auto !important; /* [1] */ } .u-3\/5 { width: 60% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/5 { position: relative !important; right: auto !important; /* [1] */ left: 60% !important; } .u-pull-3\/5 { position: relative !important; right: 60% !important; left: auto !important; /* [1] */ } .u-4\/5 { width: 80% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-4\/5 { position: relative !important; right: auto !important; /* [1] */ left: 80% !important; } .u-pull-4\/5 { position: relative !important; right: 80% !important; left: auto !important; /* [1] */ } .u-5\/5 { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-5\/5 { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-5\/5 { 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: 20em) { .u-1\/1\@mobile { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/1\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-1\/1\@mobile { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/2\@mobile { width: 50% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/2\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 50% !important; } .u-pull-1\/2\@mobile { position: relative !important; right: 50% !important; left: auto !important; /* [1] */ } .u-2\/2\@mobile { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/2\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-2\/2\@mobile { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/3\@mobile { width: 33.33333333% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/3\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 33.33333333% !important; } .u-pull-1\/3\@mobile { position: relative !important; right: 33.33333333% !important; left: auto !important; /* [1] */ } .u-2\/3\@mobile { width: 66.66666667% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/3\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 66.66666667% !important; } .u-pull-2\/3\@mobile { position: relative !important; right: 66.66666667% !important; left: auto !important; /* [1] */ } .u-3\/3\@mobile { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/3\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-3\/3\@mobile { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/4\@mobile { width: 25% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/4\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 25% !important; } .u-pull-1\/4\@mobile { position: relative !important; right: 25% !important; left: auto !important; /* [1] */ } .u-2\/4\@mobile { width: 50% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/4\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 50% !important; } .u-pull-2\/4\@mobile { position: relative !important; right: 50% !important; left: auto !important; /* [1] */ } .u-3\/4\@mobile { width: 75% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/4\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 75% !important; } .u-pull-3\/4\@mobile { position: relative !important; right: 75% !important; left: auto !important; /* [1] */ } .u-4\/4\@mobile { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-4\/4\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-4\/4\@mobile { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/5\@mobile { width: 20% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/5\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 20% !important; } .u-pull-1\/5\@mobile { position: relative !important; right: 20% !important; left: auto !important; /* [1] */ } .u-2\/5\@mobile { width: 40% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/5\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 40% !important; } .u-pull-2\/5\@mobile { position: relative !important; right: 40% !important; left: auto !important; /* [1] */ } .u-3\/5\@mobile { width: 60% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/5\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 60% !important; } .u-pull-3\/5\@mobile { position: relative !important; right: 60% !important; left: auto !important; /* [1] */ } .u-4\/5\@mobile { width: 80% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-4\/5\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 80% !important; } .u-pull-4\/5\@mobile { position: relative !important; right: 80% !important; left: auto !important; /* [1] */ } .u-5\/5\@mobile { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-5\/5\@mobile { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-5\/5\@mobile { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-push-none\@mobile { left: auto !important; } .u-pull-none\@mobile { right: auto !important; } } @media (min-width: 46.25em) { .u-1\/1\@tablet { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/1\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-1\/1\@tablet { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/2\@tablet { width: 50% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/2\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 50% !important; } .u-pull-1\/2\@tablet { position: relative !important; right: 50% !important; left: auto !important; /* [1] */ } .u-2\/2\@tablet { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/2\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-2\/2\@tablet { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/3\@tablet { width: 33.33333333% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/3\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 33.33333333% !important; } .u-pull-1\/3\@tablet { position: relative !important; right: 33.33333333% !important; left: auto !important; /* [1] */ } .u-2\/3\@tablet { width: 66.66666667% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/3\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 66.66666667% !important; } .u-pull-2\/3\@tablet { position: relative !important; right: 66.66666667% !important; left: auto !important; /* [1] */ } .u-3\/3\@tablet { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/3\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-3\/3\@tablet { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/4\@tablet { width: 25% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/4\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 25% !important; } .u-pull-1\/4\@tablet { position: relative !important; right: 25% !important; left: auto !important; /* [1] */ } .u-2\/4\@tablet { width: 50% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/4\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 50% !important; } .u-pull-2\/4\@tablet { position: relative !important; right: 50% !important; left: auto !important; /* [1] */ } .u-3\/4\@tablet { width: 75% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/4\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 75% !important; } .u-pull-3\/4\@tablet { position: relative !important; right: 75% !important; left: auto !important; /* [1] */ } .u-4\/4\@tablet { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-4\/4\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-4\/4\@tablet { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/5\@tablet { width: 20% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/5\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 20% !important; } .u-pull-1\/5\@tablet { position: relative !important; right: 20% !important; left: auto !important; /* [1] */ } .u-2\/5\@tablet { width: 40% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/5\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 40% !important; } .u-pull-2\/5\@tablet { position: relative !important; right: 40% !important; left: auto !important; /* [1] */ } .u-3\/5\@tablet { width: 60% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/5\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 60% !important; } .u-pull-3\/5\@tablet { position: relative !important; right: 60% !important; left: auto !important; /* [1] */ } .u-4\/5\@tablet { width: 80% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-4\/5\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 80% !important; } .u-pull-4\/5\@tablet { position: relative !important; right: 80% !important; left: auto !important; /* [1] */ } .u-5\/5\@tablet { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-5\/5\@tablet { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-5\/5\@tablet { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-push-none\@tablet { left: auto !important; } .u-pull-none\@tablet { right: auto !important; } } @media (min-width: 67.5em) { .u-1\/1\@desktop { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/1\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-1\/1\@desktop { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/2\@desktop { width: 50% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/2\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 50% !important; } .u-pull-1\/2\@desktop { position: relative !important; right: 50% !important; left: auto !important; /* [1] */ } .u-2\/2\@desktop { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/2\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-2\/2\@desktop { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/3\@desktop { width: 33.33333333% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/3\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 33.33333333% !important; } .u-pull-1\/3\@desktop { position: relative !important; right: 33.33333333% !important; left: auto !important; /* [1] */ } .u-2\/3\@desktop { width: 66.66666667% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/3\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 66.66666667% !important; } .u-pull-2\/3\@desktop { position: relative !important; right: 66.66666667% !important; left: auto !important; /* [1] */ } .u-3\/3\@desktop { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/3\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-3\/3\@desktop { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/4\@desktop { width: 25% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/4\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 25% !important; } .u-pull-1\/4\@desktop { position: relative !important; right: 25% !important; left: auto !important; /* [1] */ } .u-2\/4\@desktop { width: 50% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/4\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 50% !important; } .u-pull-2\/4\@desktop { position: relative !important; right: 50% !important; left: auto !important; /* [1] */ } .u-3\/4\@desktop { width: 75% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/4\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 75% !important; } .u-pull-3\/4\@desktop { position: relative !important; right: 75% !important; left: auto !important; /* [1] */ } .u-4\/4\@desktop { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-4\/4\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-4\/4\@desktop { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/5\@desktop { width: 20% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/5\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 20% !important; } .u-pull-1\/5\@desktop { position: relative !important; right: 20% !important; left: auto !important; /* [1] */ } .u-2\/5\@desktop { width: 40% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/5\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 40% !important; } .u-pull-2\/5\@desktop { position: relative !important; right: 40% !important; left: auto !important; /* [1] */ } .u-3\/5\@desktop { width: 60% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/5\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 60% !important; } .u-pull-3\/5\@desktop { position: relative !important; right: 60% !important; left: auto !important; /* [1] */ } .u-4\/5\@desktop { width: 80% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-4\/5\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 80% !important; } .u-pull-4\/5\@desktop { position: relative !important; right: 80% !important; left: auto !important; /* [1] */ } .u-5\/5\@desktop { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-5\/5\@desktop { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-5\/5\@desktop { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-push-none\@desktop { left: auto !important; } .u-pull-none\@desktop { right: auto !important; } } @media (min-width: 81.25em) { .u-1\/1\@wide { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/1\@wide { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-1\/1\@wide { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/2\@wide { width: 50% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/2\@wide { position: relative !important; right: auto !important; /* [1] */ left: 50% !important; } .u-pull-1\/2\@wide { position: relative !important; right: 50% !important; left: auto !important; /* [1] */ } .u-2\/2\@wide { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/2\@wide { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-2\/2\@wide { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/3\@wide { width: 33.33333333% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/3\@wide { position: relative !important; right: auto !important; /* [1] */ left: 33.33333333% !important; } .u-pull-1\/3\@wide { position: relative !important; right: 33.33333333% !important; left: auto !important; /* [1] */ } .u-2\/3\@wide { width: 66.66666667% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/3\@wide { position: relative !important; right: auto !important; /* [1] */ left: 66.66666667% !important; } .u-pull-2\/3\@wide { position: relative !important; right: 66.66666667% !important; left: auto !important; /* [1] */ } .u-3\/3\@wide { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/3\@wide { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-3\/3\@wide { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/4\@wide { width: 25% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/4\@wide { position: relative !important; right: auto !important; /* [1] */ left: 25% !important; } .u-pull-1\/4\@wide { position: relative !important; right: 25% !important; left: auto !important; /* [1] */ } .u-2\/4\@wide { width: 50% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/4\@wide { position: relative !important; right: auto !important; /* [1] */ left: 50% !important; } .u-pull-2\/4\@wide { position: relative !important; right: 50% !important; left: auto !important; /* [1] */ } .u-3\/4\@wide { width: 75% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/4\@wide { position: relative !important; right: auto !important; /* [1] */ left: 75% !important; } .u-pull-3\/4\@wide { position: relative !important; right: 75% !important; left: auto !important; /* [1] */ } .u-4\/4\@wide { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-4\/4\@wide { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-4\/4\@wide { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/5\@wide { width: 20% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/5\@wide { position: relative !important; right: auto !important; /* [1] */ left: 20% !important; } .u-pull-1\/5\@wide { position: relative !important; right: 20% !important; left: auto !important; /* [1] */ } .u-2\/5\@wide { width: 40% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/5\@wide { position: relative !important; right: auto !important; /* [1] */ left: 40% !important; } .u-pull-2\/5\@wide { position: relative !important; right: 40% !important; left: auto !important; /* [1] */ } .u-3\/5\@wide { width: 60% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/5\@wide { position: relative !important; right: auto !important; /* [1] */ left: 60% !important; } .u-pull-3\/5\@wide { position: relative !important; right: 60% !important; left: auto !important; /* [1] */ } .u-4\/5\@wide { width: 80% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-4\/5\@wide { position: relative !important; right: auto !important; /* [1] */ left: 80% !important; } .u-pull-4\/5\@wide { position: relative !important; right: 80% !important; left: auto !important; /* [1] */ } .u-5\/5\@wide { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-5\/5\@wide { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-5\/5\@wide { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-push-none\@wide { left: auto !important; } .u-pull-none\@wide { right: auto !important; } } @media (min-width: 112.5em) { .u-1\/1\@huge { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/1\@huge { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-1\/1\@huge { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/2\@huge { width: 50% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/2\@huge { position: relative !important; right: auto !important; /* [1] */ left: 50% !important; } .u-pull-1\/2\@huge { position: relative !important; right: 50% !important; left: auto !important; /* [1] */ } .u-2\/2\@huge { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/2\@huge { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-2\/2\@huge { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/3\@huge { width: 33.33333333% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/3\@huge { position: relative !important; right: auto !important; /* [1] */ left: 33.33333333% !important; } .u-pull-1\/3\@huge { position: relative !important; right: 33.33333333% !important; left: auto !important; /* [1] */ } .u-2\/3\@huge { width: 66.66666667% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/3\@huge { position: relative !important; right: auto !important; /* [1] */ left: 66.66666667% !important; } .u-pull-2\/3\@huge { position: relative !important; right: 66.66666667% !important; left: auto !important; /* [1] */ } .u-3\/3\@huge { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/3\@huge { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-3\/3\@huge { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/4\@huge { width: 25% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/4\@huge { position: relative !important; right: auto !important; /* [1] */ left: 25% !important; } .u-pull-1\/4\@huge { position: relative !important; right: 25% !important; left: auto !important; /* [1] */ } .u-2\/4\@huge { width: 50% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/4\@huge { position: relative !important; right: auto !important; /* [1] */ left: 50% !important; } .u-pull-2\/4\@huge { position: relative !important; right: 50% !important; left: auto !important; /* [1] */ } .u-3\/4\@huge { width: 75% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/4\@huge { position: relative !important; right: auto !important; /* [1] */ left: 75% !important; } .u-pull-3\/4\@huge { position: relative !important; right: 75% !important; left: auto !important; /* [1] */ } .u-4\/4\@huge { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-4\/4\@huge { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-4\/4\@huge { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-1\/5\@huge { width: 20% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-1\/5\@huge { position: relative !important; right: auto !important; /* [1] */ left: 20% !important; } .u-pull-1\/5\@huge { position: relative !important; right: 20% !important; left: auto !important; /* [1] */ } .u-2\/5\@huge { width: 40% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-2\/5\@huge { position: relative !important; right: auto !important; /* [1] */ left: 40% !important; } .u-pull-2\/5\@huge { position: relative !important; right: 40% !important; left: auto !important; /* [1] */ } .u-3\/5\@huge { width: 60% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-3\/5\@huge { position: relative !important; right: auto !important; /* [1] */ left: 60% !important; } .u-pull-3\/5\@huge { position: relative !important; right: 60% !important; left: auto !important; /* [1] */ } .u-4\/5\@huge { width: 80% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-4\/5\@huge { position: relative !important; right: auto !important; /* [1] */ left: 80% !important; } .u-pull-4\/5\@huge { position: relative !important; right: 80% !important; left: auto !important; /* [1] */ } .u-5\/5\@huge { width: 100% !important; } /** * 1. Reset any leftover or conflicting `left`/`right` values. */ .u-push-5\/5\@huge { position: relative !important; right: auto !important; /* [1] */ left: 100% !important; } .u-pull-5\/5\@huge { position: relative !important; right: 100% !important; left: auto !important; /* [1] */ } .u-push-none\@huge { left: auto !important; } .u-pull-none\@huge { right: auto !important; } } /* ========================================================================== #HEADINGS ========================================================================== */ /** * Redefine all of our basic heading styles against utility classes so as to * allow for double stranded heading hierarchy, e.g. we semantically need an H2, * but we want it to be sized like an H1: * * * */ .u-h1 { font-size: 36px !important; font-size: 2.25rem !important; line-height: 1.16666667 !important; } .u-h2 { font-size: 28px !important; font-size: 1.75rem !important; line-height: 1.28571429 !important; } .u-h3 { font-size: 24px !important; font-size: 1.5rem !important; line-height: 1.25 !important; } .u-h4 { font-size: 20px !important; font-size: 1.25rem !important; line-height: 1.5 !important; } .u-h5 { font-size: 18px !important; font-size: 1.125rem !important; line-height: 1.33333333 !important; } .u-h6 { font-size: 16px !important; font-size: 1rem !important; line-height: 1.5 !important; } /* ========================================================================== #SPACINGS ========================================================================== */ /** * Utility classes to put specific spacing values onto elements. The below loop * will generate us a suite of classes like: * * .u-margin-top {} * .u-padding-left-large {} * .u-margin-right-small {} * .u-padding {} * .u-padding-right-none {} * .u-padding-horizontal {} * .u-padding-vertical-small {} */ .u-padding { padding: 24px !important; } .u-padding-tiny { padding: 6px !important; } .u-padding-small { padding: 12px !important; } .u-padding-large { padding: 48px !important; } .u-padding-huge { padding: 96px !important; } .u-padding-none { padding: 0 !important; } .u-padding-top { padding-top: 24px !important; } .u-padding-top-tiny { padding-top: 6px !important; } .u-padding-top-small { padding-top: 12px !important; } .u-padding-top-large { padding-top: 48px !important; } .u-padding-top-huge { padding-top: 96px !important; } .u-padding-top-none { padding-top: 0 !important; } .u-padding-right { padding-right: 24px !important; } .u-padding-right-tiny { padding-right: 6px !important; } .u-padding-right-small { padding-right: 12px !important; } .u-padding-right-large { padding-right: 48px !important; } .u-padding-right-huge { padding-right: 96px !important; } .u-padding-right-none { padding-right: 0 !important; } .u-padding-bottom { padding-bottom: 24px !important; } .u-padding-bottom-tiny { padding-bottom: 6px !important; } .u-padding-bottom-small { padding-bottom: 12px !important; } .u-padding-bottom-large { padding-bottom: 48px !important; } .u-padding-bottom-huge { padding-bottom: 96px !important; } .u-padding-bottom-none { padding-bottom: 0 !important; } .u-padding-left { padding-left: 24px !important; } .u-padding-left-tiny { padding-left: 6px !important; } .u-padding-left-small { padding-left: 12px !important; } .u-padding-left-large { padding-left: 48px !important; } .u-padding-left-huge { padding-left: 96px !important; } .u-padding-left-none { padding-left: 0 !important; } .u-padding-horizontal { padding-left: 24px !important; padding-right: 24px !important; } .u-padding-horizontal-tiny { padding-left: 6px !important; padding-right: 6px !important; } .u-padding-horizontal-small { padding-left: 12px !important; padding-right: 12px !important; } .u-padding-horizontal-large { padding-left: 48px !important; padding-right: 48px !important; } .u-padding-horizontal-huge { padding-left: 96px !important; padding-right: 96px !important; } .u-padding-horizontal-none { padding-left: 0 !important; padding-right: 0 !important; } .u-padding-vertical { padding-top: 24px !important; padding-bottom: 24px !important; } .u-padding-vertical-tiny { padding-top: 6px !important; padding-bottom: 6px !important; } .u-padding-vertical-small { padding-top: 12px !important; padding-bottom: 12px !important; } .u-padding-vertical-large { padding-top: 48px !important; padding-bottom: 48px !important; } .u-padding-vertical-huge { padding-top: 96px !important; padding-bottom: 96px !important; } .u-padding-vertical-none { padding-top: 0 !important; padding-bottom: 0 !important; } .u-margin { margin: 24px !important; } .u-margin-tiny { margin: 6px !important; } .u-margin-small { margin: 12px !important; } .u-margin-large { margin: 48px !important; } .u-margin-huge { margin: 96px !important; } .u-margin-none { margin: 0 !important; } .u-margin-top { margin-top: 24px !important; } .u-margin-top-tiny { margin-top: 6px !important; } .u-margin-top-small { margin-top: 12px !important; } .u-margin-top-large { margin-top: 48px !important; } .u-margin-top-huge { margin-top: 96px !important; } .u-margin-top-none { margin-top: 0 !important; } .u-margin-right { margin-right: 24px !important; } .u-margin-right-tiny { margin-right: 6px !important; } .u-margin-right-small { margin-right: 12px !important; } .u-margin-right-large { margin-right: 48px !important; } .u-margin-right-huge { margin-right: 96px !important; } .u-margin-right-none { margin-right: 0 !important; } .u-margin-bottom { margin-bottom: 24px !important; } .u-margin-bottom-tiny { margin-bottom: 6px !important; } .u-margin-bottom-small { margin-bottom: 12px !important; } .u-margin-bottom-large { margin-bottom: 48px !important; } .u-margin-bottom-huge { margin-bottom: 96px !important; } .u-margin-bottom-none { margin-bottom: 0 !important; } .u-margin-left { margin-left: 24px !important; } .u-margin-left-tiny { margin-left: 6px !important; } .u-margin-left-small { margin-left: 12px !important; } .u-margin-left-large { margin-left: 48px !important; } .u-margin-left-huge { margin-left: 96px !important; } .u-margin-left-none { margin-left: 0 !important; } .u-margin-horizontal { margin-left: 24px !important; margin-right: 24px !important; } .u-margin-horizontal-tiny { margin-left: 6px !important; margin-right: 6px !important; } .u-margin-horizontal-small { margin-left: 12px !important; margin-right: 12px !important; } .u-margin-horizontal-large { margin-left: 48px !important; margin-right: 48px !important; } .u-margin-horizontal-huge { margin-left: 96px !important; margin-right: 96px !important; } .u-margin-horizontal-none { margin-left: 0 !important; margin-right: 0 !important; } .u-margin-vertical { margin-top: 24px !important; margin-bottom: 24px !important; } .u-margin-vertical-tiny { margin-top: 6px !important; margin-bottom: 6px !important; } .u-margin-vertical-small { margin-top: 12px !important; margin-bottom: 12px !important; } .u-margin-vertical-large { margin-top: 48px !important; margin-bottom: 48px !important; } .u-margin-vertical-huge { margin-top: 96px !important; margin-bottom: 96px !important; } .u-margin-vertical-none { margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================================== #RESPONSIVE-SPACINGS ========================================================================== */ /** * Utility classes enhancing the normal spacing classes by adding responsiveness * to them. By default, there are not responsive spacings defined. You can * generate responsive spacings by adding entries to the following three Sass * maps, e.g.: * * $inuit-responsive-spacing-directions: ( * null: null, * bottom: bottom, * ); * * $inuit-responsive-spacing-properties: ( * "margin": "margin", * ); * * $inuit-responsive-spacing-sizes: ( * "-small": $inuit-global-spacing-unit-small, * ); * * This would bring us the following classes: * * .u-margin-small@mobile {} * .u-margin-small@tablet {} * .u-margin-small@desktop {} * .u-margin-small@wide {} * .u-margin-bottom-small@mobile {} * .u-margin-bottom-small@tablet {} * .u-margin-bottom-small@desktop {} * .u-margin-bottom-small@wide {} * * You can change the generated CSS classes by further extending the Sass maps. * If you want every ‘normal’ spacing (those from `utilities.spacings`) also as * a responsive version, you can just mirror the ‘normal’ spacings: * * $inuit-responsive-spacing-directions: $inuit-spacing-directions !default; * * $inuit-responsive-spacing-properties: $inuit-spacing-properties !default; * * $inuit-responsive-spacing-sizes: $inuit-spacing-sizes !default; * * BUT BE AWARE: This can generate a huge chunk of extra CSS, depending on the * amount of breakpoints you defined. So please check your CSS’ output and * filesize! */ /* stylelint-disable max-nesting-depth */ /* stylelint-enable max-nesting-depth */ /* ========================================================================== #PRINT ========================================================================== */ /** * Very crude, reset-like styles taken from the HTML5 Boilerplate: * https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles * https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282 */ @media print { /** * 1. Black prints faster: http://www.sanbeiji.com/archives/953 */ *, *:before, *:after { background: transparent !important; color: #000 !important; /* [1] */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /** * Don’t show links that are fragment identifiers, or use the `javascript:` * pseudo protocol. */ a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /** * Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* ========================================================================== #HIDE ========================================================================== */ /** * Hide only visually, but have it available for screen readers: * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .u-hidden-visually { border: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } /** * Hide visually and from screen readers. */ .u-hidden { display: none !important; } .o-wrapper__large { max-width: 1000px !important; } .o-wrapper__medium { max-width: 800px !important; }