@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css);@charset "UTF-8";
/**
  Properties
  -> toutes les variables.
**/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0-modified | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* make sure to set some focus styles for accessibility */
:focus {
  outline: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: content-box;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  max-width: 100%;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */
[hidden] {
  display: none;
}

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-size: 100%; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -ms-text-size-adjust: 100%; /* 2 */
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */
img {
  border: 0; /* 1 */
  -ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */
figure {
  margin: 0;
}

/**
 * Correct margin displayed oddly in IE 6/7.
 */
form {
  margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */
legend {
  border: 0; /* 1 */
  padding: 0;
  white-space: normal; /* 2 */
  *margin-left: -7px; /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */
button,
input,
select,
textarea {
  font-size: 100%; /* 1 */
  margin: 0; /* 2 */
  vertical-align: baseline; /* 3 */
  *vertical-align: middle; /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
  *overflow: visible; /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
  *height: 13px; /* 3 */
  *width: 13px; /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield; /* 1 */ /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
}

/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

html,
button,
input,
select,
textarea {
  color: #222;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

img {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

.text,
.text--light {
  color: #333;
  margin-bottom: 3rem;
}

.text--dark {
  color: white;
  margin-bottom: 3rem;
}

/*
Grid
-> systeme de grille fait maison
*/
.row--gutter {
  margin-left: -10px;
  margin-right: -10px;
}

.row--center {
  align-items: center;
}

[class*=col-] {
  position: relative;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col-1 {
  width: 8.3333333333%;
}

.row--gutter .col-1 {
  width: calc(8.3333333333% * 1 - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

.col-2 {
  width: 16.6666666667%;
}

.row--gutter .col-2 {
  width: calc(8.3333333333% * 2 - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

.col-3 {
  width: 25%;
}

.row--gutter .col-3 {
  width: calc(8.3333333333% * 3 - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

.col-4 {
  width: 33.3333333333%;
}

.row--gutter .col-4 {
  width: calc(8.3333333333% * 4 - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

.col-5 {
  width: 41.6666666667%;
}

.row--gutter .col-5 {
  width: calc(8.3333333333% * 5 - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

.col-6 {
  width: 50%;
}

.row--gutter .col-6 {
  width: calc(8.3333333333% * 6 - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

.col-7 {
  width: 58.3333333333%;
}

.row--gutter .col-7 {
  width: calc(8.3333333333% * 7 - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

.col-8 {
  width: 66.6666666667%;
}

.row--gutter .col-8 {
  width: calc(8.3333333333% * 8 - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

.col-9 {
  width: 75%;
}

.row--gutter .col-9 {
  width: calc(8.3333333333% * 9 - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

.col-10 {
  width: 83.3333333333%;
}

.row--gutter .col-10 {
  width: calc(8.3333333333% * 10 - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

.col-11 {
  width: 91.6666666667%;
}

.row--gutter .col-11 {
  width: calc(8.3333333333% * 11 - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

.col-12 {
  width: 100%;
}

.row--gutter .col-12 {
  width: calc(8.3333333333% * 12 - 20px);
  margin-left: 10px;
  margin-right: 10px;
}

@media (max-width: 1024px) {
  .col-md-1 {
    width: 8.3333333333%;
  }
  .row--gutter .col-md-1 {
    width: calc(8.3333333333% * 1 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-md-2 {
    width: 16.6666666667%;
  }
  .row--gutter .col-md-2 {
    width: calc(8.3333333333% * 2 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-md-3 {
    width: 25%;
  }
  .row--gutter .col-md-3 {
    width: calc(8.3333333333% * 3 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-md-4 {
    width: 33.3333333333%;
  }
  .row--gutter .col-md-4 {
    width: calc(8.3333333333% * 4 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-md-5 {
    width: 41.6666666667%;
  }
  .row--gutter .col-md-5 {
    width: calc(8.3333333333% * 5 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-md-6 {
    width: 50%;
  }
  .row--gutter .col-md-6 {
    width: calc(8.3333333333% * 6 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-md-7 {
    width: 58.3333333333%;
  }
  .row--gutter .col-md-7 {
    width: calc(8.3333333333% * 7 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-md-8 {
    width: 66.6666666667%;
  }
  .row--gutter .col-md-8 {
    width: calc(8.3333333333% * 8 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-md-9 {
    width: 75%;
  }
  .row--gutter .col-md-9 {
    width: calc(8.3333333333% * 9 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-md-10 {
    width: 83.3333333333%;
  }
  .row--gutter .col-md-10 {
    width: calc(8.3333333333% * 10 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-md-11 {
    width: 91.6666666667%;
  }
  .row--gutter .col-md-11 {
    width: calc(8.3333333333% * 11 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-md-12 {
    width: 100%;
  }
  .row--gutter .col-md-12 {
    width: calc(8.3333333333% * 12 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media (max-width: 750px) {
  .col-sm-1 {
    width: 8.3333333333%;
  }
  .row--gutter .col-sm-1 {
    width: calc(8.3333333333% * 1 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-sm-2 {
    width: 16.6666666667%;
  }
  .row--gutter .col-sm-2 {
    width: calc(8.3333333333% * 2 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-sm-3 {
    width: 25%;
  }
  .row--gutter .col-sm-3 {
    width: calc(8.3333333333% * 3 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-sm-4 {
    width: 33.3333333333%;
  }
  .row--gutter .col-sm-4 {
    width: calc(8.3333333333% * 4 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-sm-5 {
    width: 41.6666666667%;
  }
  .row--gutter .col-sm-5 {
    width: calc(8.3333333333% * 5 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-sm-6 {
    width: 50%;
  }
  .row--gutter .col-sm-6 {
    width: calc(8.3333333333% * 6 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-sm-7 {
    width: 58.3333333333%;
  }
  .row--gutter .col-sm-7 {
    width: calc(8.3333333333% * 7 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-sm-8 {
    width: 66.6666666667%;
  }
  .row--gutter .col-sm-8 {
    width: calc(8.3333333333% * 8 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-sm-9 {
    width: 75%;
  }
  .row--gutter .col-sm-9 {
    width: calc(8.3333333333% * 9 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-sm-10 {
    width: 83.3333333333%;
  }
  .row--gutter .col-sm-10 {
    width: calc(8.3333333333% * 10 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-sm-11 {
    width: 91.6666666667%;
  }
  .row--gutter .col-sm-11 {
    width: calc(8.3333333333% * 11 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-sm-12 {
    width: 100%;
  }
  .row--gutter .col-sm-12 {
    width: calc(8.3333333333% * 12 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media (max-width: 413px) {
  .col-xs-1 {
    width: 8.3333333333%;
  }
  .row--gutter .col-xs-1 {
    width: calc(8.3333333333% * 1 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-xs-2 {
    width: 16.6666666667%;
  }
  .row--gutter .col-xs-2 {
    width: calc(8.3333333333% * 2 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-xs-3 {
    width: 25%;
  }
  .row--gutter .col-xs-3 {
    width: calc(8.3333333333% * 3 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-xs-4 {
    width: 33.3333333333%;
  }
  .row--gutter .col-xs-4 {
    width: calc(8.3333333333% * 4 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-xs-5 {
    width: 41.6666666667%;
  }
  .row--gutter .col-xs-5 {
    width: calc(8.3333333333% * 5 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-xs-6 {
    width: 50%;
  }
  .row--gutter .col-xs-6 {
    width: calc(8.3333333333% * 6 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-xs-7 {
    width: 58.3333333333%;
  }
  .row--gutter .col-xs-7 {
    width: calc(8.3333333333% * 7 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-xs-8 {
    width: 66.6666666667%;
  }
  .row--gutter .col-xs-8 {
    width: calc(8.3333333333% * 8 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-xs-9 {
    width: 75%;
  }
  .row--gutter .col-xs-9 {
    width: calc(8.3333333333% * 9 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-xs-10 {
    width: 83.3333333333%;
  }
  .row--gutter .col-xs-10 {
    width: calc(8.3333333333% * 10 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-xs-11 {
    width: 91.6666666667%;
  }
  .row--gutter .col-xs-11 {
    width: calc(8.3333333333% * 11 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
  .col-xs-12 {
    width: 100%;
  }
  .row--gutter .col-xs-12 {
    width: calc(8.3333333333% * 12 - 20px);
    margin-left: 10px;
    margin-right: 10px;
  }
}
/*
-------------------
Responsive (RWD)
-------------------
2018-04-19
-> les mixins peuvent être réutilisées directement dans les classes semantiques de composents BEM.
-> exemple d'utilisation : Desktop only : .sm-md-hidden | Desktop hidden : .sm-md-only
*/
@media (max-width: 750px) {
  .md-only {
    display: none;
  }
}
@media (max-width: 1024px) {
  .md-hidden {
    display: none;
  }
}

@media (max-width: 750px) {
  .md-up-hidden {
    display: none;
  }
}

@media (max-width: 750px) {
  .md-down-hidden {
    display: none;
  }
}
@media (max-width: 1024px) {
  .md-down-hidden {
    display: none;
  }
}

.sm-only {
  display: none;
}
@media (max-width: 750px) {
  .sm-only {
    display: block;
  }
}

@media (max-width: 750px) {
  .sm-hidden {
    display: none;
  }
}

/**
  Default
  -> les comportements qui s'appliquent dessus le reset generique
  -> ne pas utiliser de valeur en dur, pour pouvoir le laisser transportable
**/
* {
  box-sizing: border-box;
}

::-moz-selection {
  background-color: rgba(0, 0, 0, 0.1);
  color: inherit;
}

::selection {
  background-color: rgba(0, 0, 0, 0.1);
  color: inherit;
}

*:focus {
  outline: 1px solid #ff4d55;
}
body.theme-colnum *:focus {
  outline-color: white;
}

html {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  font-size: 10px;
}

body {
  min-height: 100%;
  font-family: "Rubik", arial, sans-serif;
  font-size: 1.5rem;
  color: rgb(51, 51, 51);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: white;
  background-repeat: repeat;
  scroll-behavior: smooth;
}
body.theme-colnum {
  background-color: black;
}

input,
textarea,
select,
button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

strong,
b {
  font-weight: bold;
}

main {
  margin-top: 20px;
}

hgroup, h1, h2, h3, h4 {
  font-family: "Rubik", arial, sans-serif;
  text-transform: uppercase;
  text-rendering: geometricPrecision;
  font-weight: 600;
  line-height: 1.2;
}

body.theme-colnum hgroup:not([class]),
body.theme-colnum h1:not([class]),
body.theme-colnum h2:not([class]),
body.theme-colnum h3:not([class]),
body.theme-colnum h4:not([class]) {
  color: white;
}

h1:not([class]) {
  font-size: 30px;
  margin-bottom: 20px;
}

h2:not([class]) {
  font-size: 24px;
  margin-bottom: 15px;
}

p:not([class]) {
  margin-bottom: 20px;
  line-height: 1.3;
}

body.theme-colnum a:not([class]) {
  color: white;
}
body.theme-colnum a:not([class]):hover, body.theme-colnum a:not([class]):active {
  color: white;
}

/*
Utilities
	-> des utilities semantiques c'est mieux.
	-> les utilities peuvent être utilisés en tant que mixins ou directement dans le markup html
	-> https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
	-> moi-meme : je pense qu'il est necessaire de créer une mixin seulement s'il y a plus que 1 seule déclaration.
*/
[debug] [debug], [class*=col-] [debug] {
  outline-color: orange;
}

/*
-------------------
Textes
-------------------
*/
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

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

.uppercase {
  text-transform: uppercase;
}

.primary {
  color: #ff4d55;
}

.reset {
  text-decoration: none;
  color: inherit;
}

/*
-------------------
Alignements et espacements
-------------------
*/
.spacer {
  height: 40px;
}

.spacer-bottom {
  margin-bottom: 40px;
}

.block-center {
  margin-left: auto;
  margin-right: auto;
}

/*
-------------------
Container
-------------------
*/
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-20 {
  margin-top: 2rem;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.pt-20 {
  padding-top: 2rem;
}

.pb-20 {
  padding-bottom: 2rem;
}

.px-1 {
  padding-left: 5px;
  padding-right: 5px;
}

.px-2 {
  padding-left: 10px;
  padding-right: 10px;
}

.px-3 {
  padding-left: 15px;
  padding-right: 15px;
}

.px-4 {
  padding-left: 20px;
  padding-right: 20px;
}

.px-5 {
  padding-left: 25px;
  padding-right: 25px;
}

.px-6 {
  padding-left: 30px;
  padding-right: 30px;
}

.px-7 {
  padding-left: 35px;
  padding-right: 35px;
}

.px-8 {
  padding-left: 40px;
  padding-right: 40px;
}

.px-9 {
  padding-left: 45px;
  padding-right: 45px;
}

.px-10 {
  padding-left: 50px;
  padding-right: 50px;
}

.px-11 {
  padding-left: 55px;
  padding-right: 55px;
}

.px-12 {
  padding-left: 60px;
  padding-right: 60px;
}

.px-13 {
  padding-left: 65px;
  padding-right: 65px;
}

.px-14 {
  padding-left: 70px;
  padding-right: 70px;
}

.px-15 {
  padding-left: 75px;
  padding-right: 75px;
}

.px-16 {
  padding-left: 80px;
  padding-right: 80px;
}

.px-17 {
  padding-left: 85px;
  padding-right: 85px;
}

.px-18 {
  padding-left: 90px;
  padding-right: 90px;
}

.px-19 {
  padding-left: 95px;
  padding-right: 95px;
}

.px-20 {
  padding-left: 100px;
  padding-right: 100px;
}

.px-21 {
  padding-left: 105px;
  padding-right: 105px;
}

.px-22 {
  padding-left: 110px;
  padding-right: 110px;
}

.px-23 {
  padding-left: 115px;
  padding-right: 115px;
}

.px-24 {
  padding-left: 120px;
  padding-right: 120px;
}

.tt-uc {
  text-transform: uppercase;
}

.ta-j {
  text-align: justify;
}

.translation {
  font-size: 0.45em;
  opacity: 0.75;
  color: #ff4d55;
}
.translation--big {
  font-size: 0.8em;
}

.table, table:not([class]) {
  border: 1px solid #ddd;
  width: 100%;
}
.table thead th, table:not([class]) thead th {
  padding: 5px;
  font-weight: 900;
}
.table tr:nth-child(even), table:not([class]) tr:nth-child(even) {
  background-color: #eee;
}
.table td, table:not([class]) td {
  padding: 12px 20px;
  border: 1px solid #ccc;
  border-width: 1px 0;
}
.table a, table:not([class]) a {
  color: #ff4d55;
  text-decoration: none;
}
body.theme-colnum .table a, body.theme-colnum table:not([class]) a {
  color: #67913D;
}
body.theme-colnum .table a:hover, body.theme-colnum .table a:active, body.theme-colnum table:not([class]) a:hover, body.theme-colnum table:not([class]) a:active {
  color: black;
}

.table--mini thead {
  font-size: 0.9em;
}
.table--mini tbody {
  font-size: 0.9em;
}
.table--mini td {
  padding: 5px;
}

.warning {
  color: white;
  background-color: red !important;
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
.content {
  margin-top: 0;
  /*------------------------------------*\
    #BLOCK
  \*------------------------------------*/
  /*------------------------------------*\
    #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
    #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
    #STATES
  \*------------------------------------*/
}
@media (max-width: 750px) {
  .content {
    padding-top: 60px;
  }
}
@media (max-width: 400px) {
  .content {
    padding-top: 50px;
  }
}

/*
Utilities
	-> des utilities semantiques c'est mieux.
	-> les utilities peuvent être utilisés en tant que mixins ou directement dans le markup html
	-> https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
	-> moi-meme : je pense qu'il est necessaire de créer une mixin seulement s'il y a plus que 1 seule déclaration.
*/
[debug] [debug], [class*=col-] [debug] {
  outline-color: orange;
}

/*
-------------------
Textes
-------------------
*/
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

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

.uppercase {
  text-transform: uppercase;
}

.primary {
  color: #ff4d55;
}

.reset {
  text-decoration: none;
  color: inherit;
}

/*
-------------------
Alignements et espacements
-------------------
*/
.spacer {
  height: 40px;
}

.spacer-bottom {
  margin-bottom: 40px;
}

.block-center {
  margin-left: auto;
  margin-right: auto;
}

/*
-------------------
Container
-------------------
*/
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-20 {
  margin-top: 2rem;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.pt-20 {
  padding-top: 2rem;
}

.pb-20 {
  padding-bottom: 2rem;
}

.px-1 {
  padding-left: 5px;
  padding-right: 5px;
}

.px-2 {
  padding-left: 10px;
  padding-right: 10px;
}

.px-3 {
  padding-left: 15px;
  padding-right: 15px;
}

.px-4 {
  padding-left: 20px;
  padding-right: 20px;
}

.px-5 {
  padding-left: 25px;
  padding-right: 25px;
}

.px-6 {
  padding-left: 30px;
  padding-right: 30px;
}

.px-7 {
  padding-left: 35px;
  padding-right: 35px;
}

.px-8 {
  padding-left: 40px;
  padding-right: 40px;
}

.px-9 {
  padding-left: 45px;
  padding-right: 45px;
}

.px-10 {
  padding-left: 50px;
  padding-right: 50px;
}

.px-11 {
  padding-left: 55px;
  padding-right: 55px;
}

.px-12 {
  padding-left: 60px;
  padding-right: 60px;
}

.px-13 {
  padding-left: 65px;
  padding-right: 65px;
}

.px-14 {
  padding-left: 70px;
  padding-right: 70px;
}

.px-15 {
  padding-left: 75px;
  padding-right: 75px;
}

.px-16 {
  padding-left: 80px;
  padding-right: 80px;
}

.px-17 {
  padding-left: 85px;
  padding-right: 85px;
}

.px-18 {
  padding-left: 90px;
  padding-right: 90px;
}

.px-19 {
  padding-left: 95px;
  padding-right: 95px;
}

.px-20 {
  padding-left: 100px;
  padding-right: 100px;
}

.px-21 {
  padding-left: 105px;
  padding-right: 105px;
}

.px-22 {
  padding-left: 110px;
  padding-right: 110px;
}

.px-23 {
  padding-left: 115px;
  padding-right: 115px;
}

.px-24 {
  padding-left: 120px;
  padding-right: 120px;
}

.tt-uc {
  text-transform: uppercase;
}

.ta-j {
  text-align: justify;
}

.translation {
  font-size: 0.45em;
  opacity: 0.75;
  color: #ff4d55;
}
.translation--big {
  font-size: 0.8em;
}

.table, table:not([class]) {
  border: 1px solid #ddd;
  width: 100%;
}
.table thead th, table:not([class]) thead th {
  padding: 5px;
  font-weight: 900;
}
.table tr:nth-child(even), table:not([class]) tr:nth-child(even) {
  background-color: #eee;
}
.table td, table:not([class]) td {
  padding: 12px 20px;
  border: 1px solid #ccc;
  border-width: 1px 0;
}
.table a, table:not([class]) a {
  color: #ff4d55;
  text-decoration: none;
}
body.theme-colnum .table a, body.theme-colnum table:not([class]) a {
  color: #67913D;
}
body.theme-colnum .table a:hover, body.theme-colnum .table a:active, body.theme-colnum table:not([class]) a:hover, body.theme-colnum table:not([class]) a:active {
  color: black;
}

.table--mini thead {
  font-size: 0.9em;
}
.table--mini tbody {
  font-size: 0.9em;
}
.table--mini td {
  padding: 5px;
}

.warning {
  color: white;
  background-color: red !important;
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
.cta, .cta--primary {
  /*------------------------------------*\
    #BLOCK
  \*------------------------------------*/
  border: 1px solid #ff4d55;
  display: inline-block;
  padding: 10px;
  color: #ff4d55;
  text-decoration: none;
  margin: 15px;
  text-align: center;
  position: relative;
  border-radius: 5px;
  /*------------------------------------*\
    #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
    #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
    #STATES
  \*------------------------------------*/
}
body.theme-colnum .cta, body.theme-colnum .cta--primary {
  color: white;
  border-color: white;
}
.cta--reverse {
  background-color: #ff4d55;
  border-color: white;
  color: white;
}
body.theme-colnum .cta--reverse {
  background-color: #67913D;
}
.cta--is-arrow-down {
  padding-right: 25px;
}
.cta--is-arrow-down:after {
  border: 4px solid transparent;
  border-top: 5px solid #ff4d55;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  right: 10px;
  top: 55%;
  transform: translateY(-50%);
  transition: all 0.1s linear;
  width: 0;
}
body.theme-colnum .cta--is-arrow-down:after {
  border-top-color: white;
}
.cta--is-arrow-right {
  padding-right: 25px;
}
.cta--is-arrow-right:after {
  border: 4px solid transparent;
  border-left: 5px solid #ff4d55;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  right: 10px;
  top: 51%;
  transform: translateY(-50%);
  transition: all 0.1s linear;
  width: 0;
}
body.theme-colnum .cta--is-arrow-right:after {
  border-left-color: white;
}
body.theme-colnum .cta--primary {
  color: white;
  border-color: #222;
  background-color: #222;
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
.navigation {
  /*------------------------------------*\
    #BLOCK
  \*------------------------------------*/
  width: 100%;
  background-color: white;
  color: #000;
  height: 48px;
  transition: height ease-in-out 0.5s;
  /*------------------------------------*\
    #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
    #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
    #STATES
  \*------------------------------------*/
}
@media (max-width: 1024px) {
  .navigation {
    height: 60px;
  }
}
@media (max-width: 400px) {
  .navigation {
    height: 50px;
  }
}
body.theme-colnum .navigation {
  background: #555;
  color: white;
}
@media (max-width: 750px) {
  .navigation {
    position: fixed;
    z-index: 999;
  }
}
.navigation__container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
@media (max-width: 1024px) {
  .navigation__container {
    justify-content: space-between;
  }
}
.navigation__logo {
  display: inline-block;
  height: 100%;
  width: 86px;
  transition: height ease-in-out 0.5s, width ease-in-out 0.5s;
}
@media (max-width: 1024px) {
  .navigation__logo {
    width: 115px;
  }
}
@media (max-width: 750px) {
  .navigation__logo {
    width: 95px;
  }
}
.navigation__logo-link {
  z-index: 999;
  display: inline-block;
  height: 100%;
  width: auto;
  padding: 6px 0;
  transition: height ease-in-out 0.5s, width ease-in-out 0.5s, padding ease-in-out 0.5s;
}
@media (max-width: 750px) {
  .navigation__logo-link {
    padding: 5px 0;
  }
}
@media (max-width: 1024px) {
  .navigation__logo-link {
    width: 115px;
  }
}
.navigation__menu-lists {
  display: flex;
}
.navigation .menu__entry-link {
  color: #555;
}
body.theme-colnum .navigation .menu__entry-link {
  color: white;
}
.navigation__ctas-wrapper {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 750px) {
  .navigation__ctas-wrapper {
    display: none;
  }
}
.navigation__cta {
  color: white;
  border-color: white;
  margin: 0 10px;
}
.navigation__cta:first-child {
  margin-left: 0;
}
.navigation__cta:last-child {
  margin-right: 0;
}
@media (max-width: 750px) {
  .navigation__cta {
    display: block;
    border-bottom: 1px solid #ccc;
    padding: 15px 20px 15px 10px;
    font-size: 21px;
    text-decoration: none;
    margin: 0px;
  }
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
form {
  /*------------------------------------*\
    #BLOCK
  \*------------------------------------*/
  margin: 15px 0;
  font-size: 0;
  /*------------------------------------*\
    #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
    #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
    #STATES
  \*------------------------------------*/
}
form fieldset {
  margin-bottom: 25px;
}
form legend {
  font-size: 18px;
  display: block;
  width: 100%;
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ccc;
}
body.theme-colnum form legend {
  color: white;
}
form label {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
}
body.theme-colnum form label {
  color: white;
}
form input[type=text],
form input[type=date],
form input[type=email],
form input[type=number],
form input[type=integer],
form textarea,
form select,
form button {
  font-size: 18px;
  border: 1px solid #ccc;
  padding: 7.5px 10px;
  color: #000;
  width: 100%;
}
body.theme-colnum form input[type=text],
body.theme-colnum form input[type=date],
body.theme-colnum form input[type=email],
body.theme-colnum form input[type=number],
body.theme-colnum form input[type=integer],
body.theme-colnum form textarea,
body.theme-colnum form select,
body.theme-colnum form button {
  border-color: #919191;
}
form select {
  padding-right: 45px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
  background-position: calc(100% - 20px) 17px, calc(100% - 15px) 17px, calc(100% - 35px) 4px;
  background-size: 5px 5px, 5px 5px, 1px 25px;
  background-repeat: no-repeat;
}
form button {
  background-color: inherit;
  margin: 0 !important;
}
form input[type=checkbox],
form input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}
form input[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}
form input[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}
form .width-half {
  width: calc(50% - 10px);
  margin-right: 10px;
  display: inline-block;
}
form .width-half:nth-child(2) {
  margin-right: 0;
  margin-left: 10px;
}
form label[required]:after {
  content: "*";
  color: red;
}

.form-check {
  position: relative;
  display: block;
  padding-left: 1.7rem;
}

.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: -1.7rem;
}

.form-check-input:disabled ~ .form-check-label, .form-check-input[disabled] ~ .form-check-label {
  color: #6c757d;
}

.form-check-label {
  margin-bottom: 0;
}

.form-check-inline {
  display: inline-flex;
  align-items: center;
  padding-left: 0;
  margin-right: 0.75rem;
}

.form-check-inline .form-check-input {
  position: static;
  margin-top: 0;
  margin-right: 0.3125rem;
  margin-left: 0;
  display: inline-block;
}

.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #007bff;
  background-color: #007bff;
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.custom-radio .custom-control-label::before {
  border-radius: 50%;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
.header {
  /*------------------------------------*\
    #BLOCK
  \*------------------------------------*/
  border: none;
  height: auto;
  /*------------------------------------*\
    #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
    #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
    #STATES
  \*------------------------------------*/
}
@media (max-width: 750px) {
  .header {
    height: 0;
    margin: 0;
    overflow: hidden;
    display: block;
  }
}
body.theme-colnum .header {
  background-color: #67913D;
  border: none;
}
.header__title {
  margin: 15px 0;
}
@media (max-width: 750px) {
  .header__title {
    position: fixed;
    top: 0px;
    text-align: center;
    width: 40%;
    display: flex;
    align-items: center;
    height: 60px;
    line-height: 1.3;
    margin: 0;
    z-index: 999;
    left: 50%;
    transform: translateX(-38%);
  }
}
@media (max-width: 400px) {
  .header__title {
    height: 50px;
    left: 50%;
    transform: translateX(-38%);
  }
}
.header__title-link {
  font-size: 21px;
  font-weight: 900;
  color: #333;
  text-decoration: none;
  display: inline-block;
  width: 100%;
}
body.theme-colnum .header__title-link {
  color: white;
  text-transform: uppercase;
}
@media (max-width: 750px) {
  .header__title-link {
    font-size: 18px;
  }
}
@media (max-width: 400px) {
  .header__title-link {
    font-size: 15px;
  }
}
.header__title-icon {
  width: 22px;
  fill: white;
  margin: 0 10px 0;
  top: 2px;
  position: relative;
}
@media (max-width: 750px) {
  .header__title-icon {
    display: none;
  }
}
@media (max-width: 1024px) {
  .header__title-icon {
    display: none;
  }
}
body.theme-colnum .header__menu {
  display: none;
}
.header__link {
  font-size: 13px;
  font-weight: 900;
  color: #333;
}
.header__link::first-letter {
  text-transform: uppercase;
}
body.theme-colnum .header__link {
  text-transform: uppercase;
  color: white;
}
.header__nav-button {
  margin-left: 10px;
  margin-right: 10px;
}
.header__nav-button:first-child {
  margin-left: 0;
}
.header__nav-button:last-child {
  margin-right: 0;
}
@media (max-width: 750px) {
  .header__nav-button {
    margin-left: 0;
    margin-right: 0;
  }
}
.header__row {
  transition: height ease-in-out 0.5s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
}
@media (max-width: 750px) {
  .header__row {
    flex-direction: column;
    height: auto;
    padding-top: 1rem;
  }
}
.header__delimiter {
  margin: 0;
  border-color: rgba(255, 255, 255, 0.1);
}
@media (max-width: 750px) {
  .header__search {
    order: 99;
  }
}
@media (max-width: 1024px) {
  .header__search {
    order: 99;
    margin-top: 0px;
  }
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
.simple-search {
  display: flex;
  align-items: center;
  position: relative;
  /*------------------------------------*\
    #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
    #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
  #STATES
  \*------------------------------------*/
}
@media (max-width: 750px) {
  .simple-search {
    padding: 15px 10px;
    margin: 0;
    border-bottom: 1px solid #ccc;
  }
}
.simple-search__input {
  border: 0;
  padding: 10px;
  background-color: transparent;
  color: rgb(51, 51, 51);
}
body.theme-colnum .simple-search__input {
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
}
.simple-search__input::-moz-placeholder {
  color: #ccc;
}
.simple-search__input:-ms-input-placeholder {
  color: #ccc;
}
.simple-search__input::placeholder {
  color: #ccc;
}
.simple-search__icon {
  height: 30px;
  width: 40px;
  padding: 0 5px;
  border: 0;
  background: transparent;
}
.simple-search__icon > svg {
  vertical-align: middle;
}
.simple-search__icon > svg > path {
  fill: white;
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
.menu {
  /*------------------------------------*\
    #BLOCK
  \*------------------------------------*/
  /*------------------------------------*\
    #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
    #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
    #STATES
  \*------------------------------------*/
}
.menu__mobile-controller {
  display: none;
}
.menu__mobile-icon {
  display: none;
  width: 47px;
  height: 100%;
  position: relative;
  top: -3px;
  box-sizing: border-box;
  background-color: white;
  font-size: 0;
  z-index: 130;
}
body.theme-colnum .menu__mobile-icon {
  background-color: #555;
  color: white;
}
@media (max-width: 750px) {
  .menu__mobile-icon {
    display: block;
  }
}
.menu__mobile-icon > span {
  display: inline-block;
  width: 40px;
  height: 5px;
  background-color: #ccc;
  margin: 2.5px 5px;
}
.menu__mobile-icon > span:last-child {
  margin-bottom: 0;
}
.menu__lists {
  display: flex;
}
@media (max-width: 750px) {
  .menu__lists {
    display: none;
  }
}
.menu__list {
  padding: 15px 30px;
  position: relative;
}
@media (max-width: 1024px) {
  .menu__list {
    padding: 15px 20px 15px 10px;
  }
}
@media (max-width: 750px) {
  .menu__list {
    font-size: 21px;
    padding: 0;
  }
}
.menu__list:after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - 15px);
  width: 1px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.075);
}
@media (max-width: 750px) {
  .menu__list:after {
    display: none;
  }
}
.menu__list-title {
  text-decoration: none;
  color: #919191;
}
body.theme-colnum .menu__list-title {
  color: white;
}
@media (max-width: 750px) {
  .menu__list-title {
    border-bottom: 1px solid #ccc;
    padding: 15px 20px 15px 10px;
    display: inline-block;
    font-size: 21px;
    width: 100%;
  }
}
.menu__entries {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  min-width: 250px;
  top: 68px;
  left: 0;
  padding: 30px 0 10px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.075);
  transition: visibility 0s ease-in-out 0.2s, opacity 0.2s ease-in-out;
  z-index: 101;
}
body.theme-colnum .menu__entries {
  background-color: rgb(51, 51, 51);
  border: rgb(51, 51, 51) 1px solid;
}
@media (max-width: 750px) {
  .menu__entries {
    visibility: inherit;
    opacity: 1;
    position: relative;
    padding: 0;
    top: inherit;
    background: inherit;
    border: 0;
  }
}
.menu__entries:after {
  content: "";
  position: absolute;
  top: -6px;
  left: 35px;
  width: 12px;
  height: 12px;
  background-color: white;
  transform: rotate(45deg);
  border: 1px solid rgba(0, 0, 0, 0.075);
  border-width: 0 1px 1px 0;
}
body.theme-colnum .menu__entries:after {
  top: -8px;
  background-color: rgb(51, 51, 51);
  border: rgb(51, 51, 51) 1px solid;
}
@media (max-width: 750px) {
  .menu__entries:after {
    display: none;
  }
}
.menu__entries-layout {
  min-width: 250px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.menu__entry-link {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #919191;
}
@media (max-width: 750px) {
  .menu__entry-link {
    color: white;
  }
}
body.theme-colnum .menu__entry-link {
  font-size: 14px;
  font-family: "Rubik", arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  background-color: rgb(51, 51, 51);
}
body.theme-colnum .menu__entry-link:hover {
  color: #67913D;
}
.menu__list-title--has-sub-entries:after {
  border: 4px solid transparent;
  border-top: 5px solid #919191;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  right: 15px;
  top: 55%;
  transform: translateY(-50%);
  transition: all 0.1s linear;
  width: 0;
}
@media (max-width: 750px) {
  .menu__list-title--has-sub-entries:after {
    display: none;
  }
}
@media (max-width: 1024px) {
  .menu__list-title--has-sub-entries:after {
    right: 8px;
  }
}
.menu__list:last-child:after {
  display: none;
}
.menu__list-title--reverse {
  color: white;
}
.menu__entries--reverse:before {
  background-color: white !important;
  border-color: white !important;
}
.menu__entries--has-layout {
  display: flex;
  padding: 0;
}
@media (max-width: 750px) {
  .menu__entries--has-layout {
    display: block;
  }
}
.menu__entries-layout--feature {
  background-color: #555;
}
@media (max-width: 750px) {
  .menu__entries-layout--feature {
    background-color: transparent;
  }
}
body.theme-colnum .menu__entries-layout--feature {
  color: white;
  background-color: #67913D;
}
.menu__entry-link--feature {
  color: white;
}
body.theme-colnum .menu__entry-link--feature {
  color: white;
  background-color: #67913D;
}
body.theme-colnum .menu__entry-link--feature:hover {
  color: rgb(51, 51, 51);
}
.menu--explore {
  margin-top: 1em 0 2em 0;
  font-size: 1rem;
}
body.theme-colnum .menu--explore {
  color: white;
  text-transform: uppercase;
}
.menu--explore__list-title {
  background: none;
  margin-bottom: 1em;
  font-weight: bold;
}
body.theme-colnum .menu--explore__list-title {
  color: white;
  text-transform: uppercase;
}
body.theme-colnum .menu--explore__list-title-link {
  color: white;
  text-transform: uppercase;
  foint-weight: bold;
  font-size: 1em;
  text-decoration: none;
}
.menu--explore__entries {
  background: none;
  margin-bottom: 2rem;
}
.menu--explore__entry {
  margin-bottom: 0.3rem;
}
.menu--explore__entry-link {
  background: none;
  text-decoration: none;
  font-size: 0.8em;
  line-height: 1.3;
}
body.theme-colnum .menu--explore__entry-link {
  color: white;
  text-transform: uppercase;
}
@media (max-width: 750px) {
  .menu__mobile-controller:checked ~ .menu__lists {
    display: flex;
    flex-direction: column;
    position: absolute;
    overflow: auto;
    padding: 60px 0px 20px 0px;
    top: 0;
    left: 0;
    background-color: #555;
    z-index: 120;
    width: 100%;
    height: 100vh;
  }
  .menu__mobile-controller:checked ~ .menu__lists:before {
    z-index: 998;
    height: 60px;
    width: 100%;
    display: block;
    content: " ";
    position: fixed;
    background-color: #555;
    top: 0px;
    border-bottom: 1px solid #ccc;
  }
}
@media (max-width: 400px) {
  .menu__mobile-controller:checked ~ .menu__lists {
    padding: 50px 0px 20px 0px;
  }
  .menu__mobile-controller:checked ~ .menu__lists:before {
    height: 50px;
  }
}
.menu__entry-link:hover, .menu__list-title:hover {
  color: #ff4d55;
}
.menu__entry-link:hover:after, .menu__list-title:hover:after {
  border-top-color: #ff4d55;
}
.menu__list-title--reverse:hover {
  color: #ccc;
}
.menu__list-title--reverse:hover:after {
  border-top-color: #ccc;
}
.menu__list:hover .menu__entries {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
.cards {
  /*------------------------------------*\
    #BLOCK
  \*------------------------------------*/
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  justify-content: center;
  /*------------------------------------*\
    #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
    #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
    #STATES
  \*------------------------------------*/
}
.cards__item {
  display: flex;
  z-index: 1;
  transition: transform 0.2s 0s;
}
.cards--featured {
  margin: 0;
  background-color: #000;
}
.cards--featured .row {
  justify-content: center;
}
.cards__item:hover {
  transform: scale(1.06);
  z-index: 999;
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
.card {
  /*------------------------------------*\
    #BLOCK
  \*------------------------------------*/
  text-align: left;
  border-radius: 5px;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.075);
  margin: 10px 0;
  display: flex;
  width: 100%;
  /*------------------------------------*\
    #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
    #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
    #STATES
  \*------------------------------------*/
}
body.theme-colnum .card {
  border-color: #333;
}
.card__wrapper-link {
  text-decoration: none;
  color: #ff4d55;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
body.theme-colnum .card__wrapper-link {
  color: #333;
  background-color: #fff;
}
.card__image {
  width: 100%;
  height: 185px;
  -o-object-fit: cover;
     object-fit: cover;
  text-align: center;
  background-image: url(/images/icon-image-solid.svg?7231f1c2e2bd9952100f9f996b87c7f1);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 35% auto;
  background-color: rgba(0, 0, 0, 0.22);
}
.card__content {
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.card__title {
  color: #ff4d55;
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 30px;
  font-family: "Rubik", arial, sans-serif;
  text-transform: none;
  text-rendering: optimizeLegibility;
  font-weight: 400;
  line-height: 1.3;
}
body.theme-colnum .card__title {
  color: #666;
  font-family: "Rubik", arial, sans-serif;
  text-transform: uppercase;
  text-rendering: geometricPrecision;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
}
.card__producer {
  font-size: 15px;
  line-height: 1.5;
  padding-bottom: 20px;
  flex-grow: 1;
}
body.theme-colnum .card__producer {
  color: white;
}
.card__state {
  padding-bottom: 10px;
}
.card--featured {
  border-radius: 0;
  margin: 0;
}
body.theme-colnum .card--featured {
  border-color: #0b243a;
  border-width: 1px;
  border-style: solid;
}
.card--featured .card__image {
  height: 160px;
}
@media (max-width: 750px) {
  .card--featured .card__image {
    height: 95px;
  }
}
.card--featured .card__content {
  padding: 10px;
}
.card--featured .card__title {
  font-size: 15px;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card .fa {
  color: #ff4d55;
  margin-right: 5px;
}
body.theme-colnum .card .fa {
  color: #333;
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
.single {
  /*------------------------------------*\
    #BLOCK
  \*------------------------------------*/
  /*------------------------------------*\
    #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
    #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
    #STATES
  \*------------------------------------*/
}
.single__carousel {
  min-width: 100%;
  background-color: #eee;
  text-align: center;
  margin-bottom: 30px;
  font-size: 0;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: hidden;
  position: relative;
}
body.theme-colnum .single__carousel {
  background-color: rgba(0, 0, 0, 0.8);
}
.single__carousel-item {
  position: relative;
  display: inline-block;
  margin: 2.5px;
  display: inline-block;
  height: 100%;
}
.single__carousel-item-image {
  height: 300px;
  width: auto;
  display: inline-block;
}
@media (max-width: 1024px) {
  .single__carousel-item-image {
    height: 237px;
  }
}
.single__carousel-item-legend {
  position: absolute;
  bottom: 4%;
  right: 0;
  font-size: 12px;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px;
}
.single__subheader-wrapper {
  padding-bottom: 25px;
}
.single__advertisment-wrapper {
  position: relative;
}
.single__advertisment-wrapper img {
  max-width: 100%;
}
.single__breadcrumb {
  margin-bottom: 30px;
  color: #999;
}
.single__breadcrumb-entry {
  color: #999;
  text-decoration: none;
}
.single__title {
  font-size: 40px;
  color: #ff4d55;
  margin-bottom: 30px;
}
body.theme-colnum .single__title {
  color: white;
  font-family: "Rubik", arial, sans-serif;
  text-transform: uppercase;
  text-rendering: geometricPrecision;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
}
.single__role {
  font-size: 17px;
  color: #999;
  margin-bottom: 3px;
  line-height: 1.3;
}
.single__role-name {
  color: #ff4d55;
  text-decoration: none;
}
body.theme-colnum .single__role-name {
  color: white;
}
.single__metas-wrapper {
  margin-top: 20px;
  font-size: 17px;
  margin-bottom: 30px;
}
.single__meta {
  margin-right: 20px;
  color: rgb(51, 51, 51);
}
body.theme-colnum .single__meta {
  color: white;
}
.single__meta .fa {
  color: #ff4d55;
  margin-right: 5px;
}
body.theme-colnum .single__meta .fa {
  color: white;
}
.single__status {
  display: flex;
  margin-bottom: 30px;
}
.single__status-step {
  border: 1px solid #ccc;
  border-right-width: 0;
  padding: 10px;
  text-align: center;
  color: #999;
}
.single__complementary-wrapper {
  padding: 40px 15px 40px 15px;
  background-color: #f9f9f9;
  overflow: hidden;
}
body.theme-colnum .single__complementary-wrapper {
  background-color: #666;

}
.single__complementary-block {
  background-color: white;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 25px;
  margin-bottom: 40px;
}
.single__complementary-block > p:not([class]) {
  color: #333;
}
.single__complementary-block > p:not([class]) a:not([class]), .single__complementary-block > p:not([class]) a:not([class]):active {
  color: #67913D;
  font-weight: bold;
}
.single__complementary-block > p:not([class]) a:not([class]):hover, .single__complementary-block > p:not([class]) a:not([class]):visited:hover {
  color: black;
}
.single__complementary-block > p:not([class]) a:not([class]):visited {
  color: black;
}
.single__complementary-block-title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}
.single__complementary-block-title > .fa {
  color: #ff4d55;
  margin-right: 10px;
}
body.theme-colnum .single__complementary-block-title > .fa {
  color: #67913D;
}
.single__complementary-block-link {
  font-weight: bold;
}
.single__complementary-block-link, .single__complementary-block-link:active {
  color: #67913D;
}
.single__complementary-block-link:hover, .single__complementary-block-link:visited:hover {
  color: black;
}
.single__complementary-block-link:visited {
  color: black;
}
.single__complementary-block-link--article {
  display: inline-block;
  padding-left: 10px;
  text-decoration: none;
  font-weight: normal;
  margin-bottom: 1em;
}
.single__complementary-block-link--article::last-child {
  margin-bottom: 0;
}
body.theme-colnum .single__complementary-block-link--article {
  border-left: #67913D solid 2px;
}
.single__complementary-block-link--article, .single__complementary-block-link--article:active {
  text-decoration: none;
}
body.theme-colnum .single__complementary-block-link--article, body.theme-colnum .single__complementary-block-link--article:active {
  color: #555;
}
.single__complementary-block-link--article:hover, .single__complementary-block-link--article:visited:hover {
  text-decoration: underline;
  cursor: pointer;
}
body.theme-colnum .single__complementary-block-link--article:hover, body.theme-colnum .single__complementary-block-link--article:visited:hover {
  color: #555;
}
body.theme-colnum .single__complementary-block-link--article:visited {
  color: rgba(85, 85, 85, 0.7);
}
.single__complementary-block-content {
  line-height: 1.45;
}
.single__complementary-block-content hr {
  background-color: transparent;
  border: 0;
  margin-bottom: 2.5px;
}
.single__complementary-block-content-layout {
  display: flex;
  align-items: flex-start;
}
.single__complementary-block-content-layout > .fa, .single__complementary-block-content-layout > .fab {
  text-align: center;
  margin-right: 5px;
  margin-top: 5px;
  width: 18px;
  font-size: 14px;
}
body.theme-colnum .single__complementary-block-content-layout a:not([class]), body.theme-colnum .single__complementary-block-content-layout a:not([class]):active {
  color: #67913D;
  font-weight: bold;
}
body.theme-colnum .single__complementary-block-content-layout a:not([class]):hover, body.theme-colnum .single__complementary-block-content-layout a:not([class]):visited:hover {
  color: black;
}
body.theme-colnum .single__complementary-block-content-layout a:not([class]):visited {
  color: black;
}
.single__complementary-block__list {
  text-align: left;
}
.single__complementary-block__list-item {
  margin: 15px 0;
}
.single__complementary-block__list-link {
  text-decoration: none;
  display: inline-block;
  color: #333;
  padding-left: 10px;
  line-height: 1.2;
  border-left: 2px solid #ff4d55;
}
body.theme-colnum .single__complementary-block__list-link {
  border-color: #67913D;
}
.single__complementary-sidebar-wrapper {
  overflow: hidden;
  position: relative;
}
.single__complementary-sidebar-wrapper img {
  max-width: 100%;
}
.single__status-step--is-active {
  background-color: #ff4d55;
  color: white;
}
body.theme-colnum .single__status-step--is-active {
  background-color: #67913D;
}
.single__status-step:last-child {
  border-right-width: 1px;
}
.single__breadcrumb-entry:hover {
  color: #ff4d55;
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
.footer {
  /*------------------------------------*\
  #BLOCK
  \*------------------------------------*/
  background-color: #261e1e;
  padding: 30px 0;
  font-size: 11px;
  /*------------------------------------*\
  #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
  #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
  #STATES
  \*------------------------------------*/
}
body.theme-colnum .footer {
  background: url("http://www.lienmultimedia.com/squelettes/images/footer-border.png") no-repeat 0 top #232323;
}
.footer__list-wrapper {
  border-left: 2px solid #333;
  padding: 0 10px;
  margin-bottom: 2.5em;
}
.footer__list-title {
  color: #666;
  text-transform: uppercase;
  margin-bottom: 20px;
}
body.theme-colnum .footer__list-title {
  font-weight: bold;
  margin: 0 0 10px;
}
.footer__list li {
  padding: 3px 0 2px 0;
  line-height: 1.5;
}
.footer__list li a {
  color: #ccc;
  text-decoration: none;
}
.footer__copyright {
  padding: 25px 0 0;
  color: #666;
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
.category {
  /*------------------------------------*\
    #BLOCK
  \*------------------------------------*/
  /*------------------------------------*\
    #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
    #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
    #STATES
  \*------------------------------------*/
}
.category ~ .category {
  margin-top: 50px;
}
.category__description {
  color: #999;
  font-size: 20px;
  line-height: 1.3;
}
.category__title {
  font-size: 30px;
  margin-bottom: 20px;
}
body.theme-colnum .category__title {
  color: white;
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
.explore {
  /*------------------------------------*\
    #BLOCK
  \*------------------------------------*/
  padding: 2em 0 0 0;
  border: none;
  height: auto;
  /*------------------------------------*\
    #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
    #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
    #STATES
  \*------------------------------------*/
}
@media (max-width: 750px) {
  .explore {
    height: 0;
    margin: 0;
    overflow: hidden;
    display: block;
  }
}
.explore__row {
  height: auto;
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
.about {
  /*------------------------------------*\
    #BLOCK
  \*------------------------------------*/
  /*------------------------------------*\
    #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
    #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
    #STATES
  \*------------------------------------*/
}

/*_   _   _
 / \ / \ / \
( B | E | M )
 \_/ \_/ \_/
 - Blocks................block properties only.
 - Elems................elements' Block.
 - Modifiers............modify the aspect of Element.
 - States...............hover, focus, active or class for temporary state.
*/
.offers {
  /*------------------------------------*\
    #BLOCK
  \*------------------------------------*/
  margin-top: 40px;
  margin-bottom: 50px;
  /*------------------------------------*\
    #ELEMENTS
  \*------------------------------------*/
  /*------------------------------------*\
      #MODIFIERS
  \*------------------------------------*/
  /*------------------------------------*\
    #STATES
  \*------------------------------------*/
}
.offers__title {
  font-size: 40px;
  margin-bottom: 40px;
}
body.theme-colnum .offers__title {
  color: white;
}
.offers__block {
  margin: 20px 0;
}
.offers__block-title {
  font-size: 25px;
  margin-bottom: 0px;
  color: #ff4d55;
  font-weight: 600;
}
body.theme-colnum .offers__block-title {
  color: white;
}
.offers__block-card-wrapper {
  display: flex;
  justify-content: center;
}
.offers__block-card {
  flex-basis: 100%;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 7px;
  margin: 50px 10px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
body.theme-colnum .offers__block-card {
  color: white;
}
.offers__block-card-title {
  font-size: 30px;
  margin-bottom: 20px;
}
.offers__block-card-price {
  color: #bbb;
  font-size: 35px;
  margin-bottom: 15px;
}
.offers__block-card-price span {
  display: block;
  font-size: 50%;
}
.offers__block-card-content {
  line-height: 1.3;
  margin-bottom: 15px;
  flex-grow: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
}