/**
 * Mediaqueries following the mobile-first method
 * CSS are set from mobile first, then rules are extented to:
 * - small devices (e.g. tablets in portrait orientation) : 600 to 799px
 * - medium devices (e.g. low cost laptops) : 800px to 1023px
 * - classic resolutions (high-end tablets, computers, etc.) : 1024px and above
 * - large breakpoint is designed to suit FHD, QHD, UHD and resolutions above
 */
/* ====== SETTINGS ====== */
/* --- used to set up the content widths --- */
/* ====== QUERIES ====== */
/* --- medium screens, from 600px --- */
/* --- only medium-low screens, from 600px to 799px --- */
/* --- only medium-high screens, from 800px to 1023px --- */
/* --- large screens, from 1024px --- */
/* --- wider screens, from 1280px --- */
@font-face {
    font-family: wbx-regular-font;
    src: url(../fonts/roboto/roboto-regular-webfont.woff2) format("woff2"), url(../fonts/roboto/roboto-regular-webfont.woff) format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: wbx-light-font;
    src: url("../fonts/roboto/roboto-light-webfont.woff2") format("woff2"), url("../fonts/roboto/roboto-light-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: wbx-bold-font;
    src: url("../fonts/roboto/roboto-bold-webfont.woff2") format("woff2"), url("../fonts/roboto/roboto-bold-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: wbx-medium-font;
    src: url("../fonts/roboto/roboto-medium-webfont.woff2") format("woff2"), url("../fonts/roboto/roboto-medium-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

/**
   * Colors used across the website
   * ------------------------------
   * [1]
   * First give them a name using appropriate tool :
   * http://www.color-blindness.com/color-name-hue/
   * If two colors get the same name, use the built-in Sass functions :
   * darken($color-name, xx%)
   * lighten($color-name, xx%)
   *
   * [2]
   * Then, assign colors to their exact role, to allow easy updates
   */
/* ====== [1] NAMES ====== */
/* ====== [2] ASSIGNMENTS ====== */
/* --- global --- */
/* --- header --- */
/* --- footer --- */
/* --- form --- */
/* -- ctas --- */
/**
   * Utility Namespaces
   * ------------------
   * Single responsability rules having very specific and targeted tasks
   * Text alignment or positioning, font-sizing, clearfix, etc.
   *
   * One step away from inline-styling, use sparingly!
   * Can carry "!important" declaration to override less specific rules
   * Shouldn't be modified after having been written, could be used anywhere
   */
/* ====== SHOW/HIDE ====== */
/* --- hidden everywhere --- */
.is-hidden {
    display: none !important;
}

/* --- hidden on small screens only, display blocks on wider screens --- */
.is-shown-block-medium-high {
    display: none !important;
}

@media only screen and (min-width: 50em) and (max-width: 63.99em) {
    .is-shown-block-medium-high {
        display: block !important;
    }
}

@media only screen and (min-width: 64em) {
    .is-shown-block-medium-high {
        display: block !important;
    }
}

/* --- no rules for small screens, hidden on every other screens --- */
@media only screen and (min-width: 37.5em) {
    .is-hidden-medium {
        display: none !important;
    }
}

/* --- hidden on mobile/tablet, flexbox on larger screens --- */
.is-shown-flex-medium {
    display: none !important;
}

@media only screen and (min-width: 37.5em) {
    .is-shown-flex-medium {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }
}

/* --- restrain element to its parent's width  --- */
.is-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

/* --- displays an element as block and centers it --- */
.is-centered-block {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* ====== TEXT TRANSFORMATIONS ====== */
/* --- aligns text to center --- */
.is-text-centered {
    text-align: center;
}

.is-text-lefted {
    text-align: left;
}

.is-text-righted {
    text-align: right;
}

/* --- sets uppercase --- */
.is-uppercase {
    text-transform: uppercase;
}

/**
   * Modern minimal "reset" using box-sizing
   * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
   *
   * And for deeper (but safe) normalizing/resetting CSS, I'm using Normalize.css
   * The call is made directly from HTML to allow easy update of the vendor
   * https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
   */
html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

/* ====== GLOBAL STYLES USED ACROSS THE WEBSITE ====== */
html {
    font-size: 62.5%;
    font-family: wbx-regular-font;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #121212;
}

body {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dd,
dt,
span,
a {
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 0.6px;
    color: #121212;
    margin: 0;
}

b,
strong,
.bold {
    font-family: wbx-bold-font;
}

a:link {
    text-decoration: none;
}

a:visited {
    color: #121212;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

p:not(:last-child) {
    margin-bottom: 1.5rem;
}

ol,
ul {
    list-style-type: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

dl {
    margin-top: 0;
    margin-bottom: 0;
}

dl dd {
    margin-left: 0;
}

.container {
    max-width: 128rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

@media only screen and (min-width: 37.5em) {
    .container {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

.header {
    background-color: #121212;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.header .logos {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 2rem;
    max-height: calc(71px * 2 + 1rem);
}

@media only screen and (min-width: 37.5em) {
    .header .logos {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 3rem;
    }
}

@media only screen and (min-width: 64em) {
    .header .logos {
        margin-bottom: 4rem;
    }
}

.header .logos .wonderbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.header .logos .wonderbox img:not(:last-child) {
    margin-right: 1rem;
}

.header .logos .wonderbox img {
    max-height: 71px;
}

.header .logos .partenaire {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.header .logos .partenaire img:not(:last-child) {
    margin-right: 1rem;
}

.header .logos .partenaire img {
    max-height: 71px;
}

.header p {
    color: #ffffff;
}

@media only screen and (min-width: 37.5em) {
    .header p {
        font-size: 1.7rem;
    }
}

body {
    background-color: #ffffff;
}

.banner {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 4rem;
}

h1 {
    font-size: 2.4rem;
    margin-bottom: 2rem;
}

h2 {
    font-size: 2.1rem;
    margin-bottom: 1.8rem;
}

h3 {
    font-size: 1.8rem;
    margin-bottom: 1.6rem;
}

ul {
    margin-bottom: 2rem;
    margin-left: 2rem;
    list-style-type: disc;
}

ul li {
    margin-bottom: 2rem;
    color: var(--primary);
}

ul li span {
    color: #121212;
}

.activity-code {
    text-align: center;
    font-size: 2rem;
    color: var(--primary);
    margin-top: 5rem;
    margin-bottom: 5rem;
    word-wrap: break-word;
}

@media only screen and (min-width: 37.5em) {
    .activity-code {
        font-size: 3rem;
    }
}

@media only screen and (min-width: 64em) {
    .activity-code {
        font-size: 4rem;
    }
}

ol.steps {
    counter-reset: steps;
}

ol.steps li {
    counter-increment: steps;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 3rem;
}

ol.steps li::before {
    content: counter(steps);
    font-size: 5rem;
    font-family: wbx-light-font;
    color: var(--primary);
    margin-right: 2rem;
    line-height: 1;
}

.content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 2rem;
}

@media only screen and (min-width: 37.5em) {
    .content {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}

.content div {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

@media only screen and (min-width: 37.5em) {
    .content .explanations {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 70%;
        flex: 1 0 70%;
        padding-right: 5rem;
    }
}

.content .illustration img {
    margin-left: auto;
    margin-right: auto;
}

.form {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: var(--primary);
}

.form .title {
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    font-family: wbx-light-font;
    margin-bottom: 3rem;
}

@media only screen and (min-width: 37.5em) {
    .form .title {
        font-size: 3rem;
    }
}

@media only screen and (min-width: 37.5em) {
    .form form {
        width: 75%;
        padding-top: 5rem;
        padding-bottom: 5rem;
        margin-left: auto;
        margin-right: auto;
    }
}

.form form ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media only screen and (min-width: 37.5em) {
    .form form ul li {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

.form form ul li:not(:last-child) {
    margin-bottom: 2.2rem;
}

.form form ul li:last-child {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.form form ul li .label {
    color: #ffffff;
    margin-bottom: 0.8rem;
    padding-right: 2rem;
}

@media only screen and (min-width: 37.5em) {
    .form form ul li .label {
        margin-bottom: 0;
        -webkit-box-flex: 1;
        -ms-flex: 1 0 40%;
        flex: 1 0 40%;
        font-size: 1.7rem;
    }
}

.form form ul li .label a {
    color: #ffffff;
    text-decoration: underline;
}

.form form ul li .label small {
    display: block;
    font-size: 1.25rem;
    line-height: 1.2;
    margin-top: 5px;
}

.form form ul li .input {
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #ffffff;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
    font-family: wbx-medium-font;
}

@media only screen and (min-width: 37.5em) {
    .form form ul li .input {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 60%;
        flex: 1 0 60%;
    }
}

.form form ul li.has-checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 3rem;
}

@media only screen and (min-width: 37.5em) {
    .form form ul li.has-checkbox {
        margin-top: 5rem;
    }
}

.form form ul li.has-checkbox input[type='checkbox'] {
    margin-right: 2rem;
}

.form form ul li.has-checkbox .label {
    margin-bottom: 0;
}

.form form ul li.special-input {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.form form ul li.special-input .label {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    margin-bottom: 3rem;
}

.form form ul li.special-input ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin-left: 0;
    margin-bottom: 0;
    width: 100%;
}

.form form ul li.special-input ul li {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    -ms-flex-preferred-size: 166px;
    padding: 0 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #ffffff;
    min-height: 500px;
    height: 500px;
}

.form form ul li.special-input ul li:not(:last-child) {
    margin-bottom: 40px;
}

.form form ul li.special-input ul li:hover {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}

.form form ul li.special-input ul li:hover>* {
    cursor: pointer;
}

.form form ul li.special-input ul li input {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    margin: 0;
}

.form form ul li.special-input ul li label {
    font-size: 1.3rem;
    max-width: 100%;
}

.form form ul li.special-input ul li label.photo {
    padding: 15px 0;
}

.form form ul li.special-input ul li label img {
    display: block;
    max-width: 100%;
    height: auto;
}

.form form ul li.special-input ul.sor li {
    min-height: 150px;
    height: 150px;
}

.form form .submit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 57px;
    margin-top: 5rem;
    border: 1px solid #fff;
    background-color: var(--primary);
    text-transform: uppercase;
    color: #ffffff;
    font-size: 1.8rem;
    font-family: wbx-bold-font;
}

.ctas {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: var(--primary);
}

.ctas .title {
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    font-family: wbx-light-font;
    margin-bottom: 5rem;
}

@media only screen and (min-width: 37.5em) {
    .ctas .title {
        font-size: 3rem;
    }
}

.ctas ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-left: 0;
}

@media only screen and (min-width: 37.5em) {
    .ctas ul {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

.ctas ul li {
    margin-bottom: 2rem;
}

@media only screen and (min-width: 37.5em) {
    .ctas ul li {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 50%;
        flex: 1 1 50%;
    }

    .ctas ul li:not(:last-child) {
        margin-right: 5rem;
    }
}

.ctas ul li .link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    min-height: 57px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid #fff;
    background-color: var(--primary);
    text-transform: uppercase;
    color: #ffffff;
    font-size: 1.8rem;
    font-family: wbx-bold-font;
}

.footer {
    background-color: #121212;
    padding: 5rem 0;
}

.footer p,
.footer a {
    color: #ffffff;
}

@media only screen and (min-width: 37.5em) {

    .footer p,
    .footer a {
        font-size: 1.7rem;
    }
}

.footer .links {
    margin-top: 5rem;
    text-align: center;
}

.footer .links a {
    text-decoration: underline;
}