html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}

a:active,
a:hover {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

h1 {
    margin: 0.67em 0;
    font-size: 2em;
}

mark {
    color: #000;
    background: #ff0;
}

small {
    font-size: 80%;
}

sub,
sup {
    vertical-align: baseline;
    position: relative;
    font-size: 75%;
    line-height: 0;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

input {
    line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

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

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

fieldset {
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
    border: 1px solid #c0c0c0;
}

legend {
    padding: 0;
    border: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: bold;
}

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

td,
th {
    padding: 0;
}

.skip-menu-link,
.skip-content-link {
    z-index: 100;
    position: fixed;
    top: 6px;
    left: 6px;
    background-color: #ffffff;
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.skip-menu-link:focus,
.skip-content-link:focus {
    overflow: visible;
    clip: auto;
    width: auto;
    height: auto;
    margin: 0;
}

input,
button,
a,
select,
textarea {
    outline: none;
}

[data-state="keyboard"] input:focus, [data-state="keyboard"]
button:focus, [data-state="keyboard"]
a:focus, [data-state="keyboard"]
select:focus, [data-state="keyboard"]
textarea:focus {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000, 0 0 0 4px #fff !important;
}

[data-state="keyboard"] p > a:focus {
    text-decoration: none;
    background-color: #ffffff;
}

html {
    box-sizing: border-box;
    overflow-x: hidden;
}

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

img {
    box-sizing: content-box;
}

body {
    overflow-x: hidden;
    min-width: 1304px;
    font-family: Geomanist, "Arial", sans-serif;
    color: #1d1d1b;
    background-color: #ffffff;
    min-height: 100vh;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}

@media (max-width: 1304px) {
    body {
        min-width: 0;
    }
}

.page-content {
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-bottom: 56px;
}

img,
svg,
iframe {
    max-width: 100%;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

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

textarea {
    resize: vertical;
}

blockquote {
    margin: 0;
    padding: 0;
}

hr {
    margin: 2em 0;
    border-top: 0;
    border-bottom: 1px solid #D7E3E5;
}

hr.is-hidden {
    display: block;
    border-bottom-color: transparent;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav ul li {
    margin: 0;
    padding: 0;
}

nav a {
    text-decoration: none;
}

code,
kbd,
pre,
samp {
    font-size: 1rem;
}

::-moz-selection,
::-moz-selection {
    color: #fff;
    background: #000;
    text-shadow: none;
}

::selection,
::-moz-selection {
    color: #fff;
    background: #000;
    text-shadow: none;
}

.is-mirrored {
    display: inline-block;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.inline-block {
    font-size: 0;
}

.inline-block > * {
    display: inline-block;
    font-size: 1rem;
}

.visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
    line-height: 0;
}

.clearfix:after {
    clear: both;
}

.svg-fallback {
    display: none;
}

.no-svg .svg-fallback {
    display: inline;
}

.icon-wrapper {
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}

.no-svg .icon-wrapper {
    display: inline;
}

.iframe-wrapper {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 56.25%;
}

.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

html:not(.ie) .iframe-wrapper iframe {
    height: 100%;
}

.map-wrapper.is-locked iframe {
    pointer-events: none;
}

.table {
    display: table;
    width: 100%;
}

.tr {
    display: table-row;
}

.td,
.th {
    display: table-cell;
}

.is-hidden {
    display: none;
}

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

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

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

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

.is-bold {
    font-weight: bold;
}

.is-italic {
    font-style: italic;
}

.is-underline {
    text-decoration: underline;
}

.float-left-content {
    float: left;
    margin-top: 3px;
    margin-right: 30px;
    margin-bottom: 3px;
}

.float-right-content {
    float: right;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 30px;
}

.p-t-30 {
    padding-top: 30px;
}

.p-t-40 {
    padding-top: 40px;
}

.p-t-60 {
    padding-top: 60px;
}

.p-t-96 {
    padding-top: 96px;
}

.p-b-30 {
    padding-bottom: 30px;
}

.p-b-42 {
    padding-bottom: 42px;
}

.p-b-60 {
    padding-bottom: 60px;
}

.p-b-74 {
    padding-bottom: 74px;
}

.p-b-94 {
    padding-bottom: 94px;
}

.m-t-neg-92 {
    margin-top: -92px;
}

.m-t-neg-100 {
    margin-top: -100px;
}

.bg-lightblue {
    background-color: #D7E3E5;
}

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

@font-face {
    font-family: "Geomanist";
    font-weight: 300;
    font-style: normal;
    src: url("../fonts/geomanist/geomanist-book-webfont.woff2") format("woff2"), url("../fonts/geomanist/geomanist-book-webfont.woff") format("woff");
}

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

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

@media print {
    * {
        color: #000 !important;
        background: transparent !important;
        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) ")";
    }
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    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;
    }
}

h1, .h1 {
    font-family: Geomanist;
    font-weight: 200;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    font-size: 3rem;
    line-height: 3rem;
    color: #1d1d1b;
    margin-top: 0rem;
    margin-right: 0rem;
    margin-bottom: 2rem;
    margin-left: 0rem;
}

h2, .h2 {
    font-family: Geomanist;
    font-weight: 200;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    font-size: 2.875rem;
    line-height: 3.375rem;
    color: #1d1d1b;
    margin-top: 0rem;
    margin-right: 0rem;
    margin-bottom: 2rem;
    margin-left: 0rem;
}

h3, .h3 {
    font-family: Geomanist;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    font-size: 1.5rem;
    line-height: 1.8125rem;
    color: #1d1d1b;
    margin-top: 0rem;
    margin-right: 0rem;
    margin-bottom: 1.25rem;
    margin-left: 0rem;
}

h4, .h4 {
    font-family: Geomanist;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    font-size: 1rem;
    line-height: 1rem;
    color: #1d1d1b;
    margin-top: 1.125rem;
    margin-right: 0rem;
    margin-bottom: 1.125rem;
    margin-left: 0rem;
}

h5, .h5 {
    font-family: Geomanist;
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8125rem;
    line-height: 0.8125rem;
    color: #1d1d1b;
    margin-top: 0.9375rem;
    margin-right: 0rem;
    margin-bottom: 0.9375rem;
    margin-left: 0rem;
}

h6, .h6 {
    font-family: Geomanist;
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.6875rem;
    line-height: 0.6875rem;
    color: #1d1d1b;
    margin-top: 0.75rem;
    margin-right: 0rem;
    margin-bottom: 0.75rem;
    margin-left: 0rem;
}

p, .p {
    font-family: Geomanist;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #3c3c3a;
    margin-top: 0rem;
    margin-right: 0rem;
    margin-bottom: 1.125rem;
    margin-left: 0rem;
}

a, .a {
    font-family: Geomanist;
    font-weight: 400;
    font-style: normal;
    text-decoration: underline;
    text-transform: none;
    font-size: inherit;
    line-height: inherit;
    color: #1d1d1b;
    margin-top: 0rem;
    margin-right: 0rem;
    margin-bottom: 0rem;
    margin-left: 0rem;
}

ul, .ul {
    font-family: Geomanist;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    font-size: inherit;
    line-height: inherit;
    color: #1d1d1b;
    margin-top: 1.125rem;
    margin-right: 0rem;
    margin-bottom: 0rem;
    margin-left: 2.5rem;
}

ol, .ol {
    font-family: Geomanist;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    font-size: inherit;
    line-height: inherit;
    color: #1d1d1b;
    margin-top: 1.125rem;
    margin-right: 0rem;
    margin-bottom: 0rem;
    margin-left: 2.5rem;
}

li, .li {
    font-family: Geomanist;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    font-size: 1rem;
    line-height: 1.25rem;
    color: #1d1d1b;
    margin-top: 1.125rem;
    margin-right: 0rem;
    margin-bottom: 1.125rem;
    margin-left: 0rem;
}

strong, .strong {
    font-family: Geomanist;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    font-size: inherit;
    line-height: inherit;
    color: #1d1d1b;
    margin-top: 0rem;
    margin-right: 0rem;
    margin-bottom: 0rem;
    margin-left: 0rem;
}

em, .em {
    font-family: Geomanist;
    font-weight: 400;
    font-style: italic;
    text-decoration: none;
    text-transform: none;
    font-size: inherit;
    line-height: inherit;
    color: #1d1d1b;
    margin-top: 0rem;
    margin-right: 0rem;
    margin-bottom: 0rem;
    margin-left: 0rem;
}

.intro {
    font-family: Geomanist;
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    font-size: 1.375rem;
    line-height: 1.75rem;
    color: #1d1d1b;
    margin-top: 1.125rem;
    margin-right: 0rem;
    margin-bottom: 1.125rem;
    margin-left: 0rem;
}

.blockquote {
    font-family: Geomanist;
    font-weight: 300;
    font-style: italic;
    text-decoration: none;
    text-transform: none;
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: #1d1d1b;
    margin-top: 1.125rem;
    margin-right: 2.5rem;
    margin-bottom: 1.125rem;
    margin-left: 2.5rem;
}

.default table {
    border-radius: 10px;
    overflow: hidden;
}

.default table tr {
    border-top: 1px solid #d7e3e5;
    border-bottom: 1px solid #d7e3e5;
}

.default table th {
    height: 65px;
    font-weight: 300;
    background-color: #305057;
    color: white;
}

.default table th,
.default table td {
    padding: 1rem;
    text-align: left;
    border: none;
}

.default table th:first-child,
.default table td:first-child {
    padding-left: 1rem;
}

.default table th:last-child,
.default table td:last-child {
    padding-right: 1rem;
    font-weight: 500;
    text-align: right;
}

.default table td.v-odd.h-odd, .default table td.v-even.h-even {
    background-color: #F2F2F2;
    border-bottom: 1px solid #ffffff;
    border-left: none;
    border-right: none;
    border-top: none;
}

.default table td.v-odd.h-even {
    background-color: #EAEAEA;
    border-bottom: 1px solid #ffffff;
    border-left: none;
    border-right: none;
    border-top: none;
}

.default table td.v-even.h-odd {
    background-color: #F8F8F8;
    border-bottom: 1px solid #ffffff;
    border-left: none;
    border-right: none;
    border-top: none;
}

.footer-navigation {
    padding: 60px 0;
    background: #f3f7f7;
}

.footer-navigation .l-page-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

@media (max-width: 767px) {
    .footer-navigation .l-page-wrapper {
        -webkit-flex-flow: row wrap;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
    }
}

.footer-info {
    padding: 21px 0;
    background: #D7E3E5;
}

.footer-info .l-page-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

@media (max-width: 767px) {
    .footer-info .l-page-wrapper {
        -webkit-flex-flow: row wrap;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
    }
}

.footer-info .copyrights,
.footer-info .trademark {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 18px;
    line-height: 1.125rem;
}

.footer-info .copyrights {
    margin-right: 16px;
}

@media (max-width: 767px) {
    .footer-info .copyrights {
        -webkit-order: 2;
            -ms-flex-order: 2;
                order: 2;
    }
}

@media (max-width: 767px) {
    .footer-info .trademark {
        -webkit-order: 1;
            -ms-flex-order: 1;
                order: 1;
    }
}

.grid {
    margin: 0;
    font-size: 0;
}

.grid > .grid-wrapper {
    position: relative;
    margin: 0 -16px;
}

.grid > .grid-wrapper:before, .grid > .grid-wrapper:after {
    content: "";
    height: 1px;
    display: block;
}

.grid > .grid-wrapper:before {
    margin-bottom: -9px;
}

.grid > .grid-wrapper:after {
    margin-top: -9px;
}

.ie .grid > .grid-wrapper {
    margin: 0 -16px;
}

.grid > .grid-wrapper > [class^="col"] {
    display: inline-block;
    vertical-align: top;
    margin: 8px 16px;
    font-size: 1rem;
    transition: all, 150ms;
}

.grid > .grid-wrapper > .col-1-1 {
    width: calc(100% / 1 * 1 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-1-1-mobile {
        width: calc(100% / 1 * 1 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-1-tablet {
        width: calc(100% / 1 * 1 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-1-1-desktop {
        width: calc(100% / 1 * 1 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-1-mobile-tablet {
        width: calc(100% / 1 * 1 - 32px);
    }
}

.grid > .grid-wrapper > .col-1-2 {
    width: calc(100% / 2 * 1 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-1-2-mobile {
        width: calc(100% / 2 * 1 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-2-tablet {
        width: calc(100% / 2 * 1 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-1-2-desktop {
        width: calc(100% / 2 * 1 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-2-mobile-tablet {
        width: calc(100% / 2 * 1 - 32px);
    }
}

.grid > .grid-wrapper > .col-2-2 {
    width: calc(100% / 2 * 2 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-2-2-mobile {
        width: calc(100% / 2 * 2 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-2-tablet {
        width: calc(100% / 2 * 2 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-2-2-desktop {
        width: calc(100% / 2 * 2 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-2-mobile-tablet {
        width: calc(100% / 2 * 2 - 32px);
    }
}

.grid > .grid-wrapper > .col-1-3 {
    width: calc(100% / 3 * 1 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-1-3-mobile {
        width: calc(100% / 3 * 1 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-3-tablet {
        width: calc(100% / 3 * 1 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-1-3-desktop {
        width: calc(100% / 3 * 1 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-3-mobile-tablet {
        width: calc(100% / 3 * 1 - 32px);
    }
}

.grid > .grid-wrapper > .col-2-3 {
    width: calc(100% / 3 * 2 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-2-3-mobile {
        width: calc(100% / 3 * 2 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-3-tablet {
        width: calc(100% / 3 * 2 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-2-3-desktop {
        width: calc(100% / 3 * 2 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-3-mobile-tablet {
        width: calc(100% / 3 * 2 - 32px);
    }
}

.grid > .grid-wrapper > .col-3-3 {
    width: calc(100% / 3 * 3 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-3-3-mobile {
        width: calc(100% / 3 * 3 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-3-tablet {
        width: calc(100% / 3 * 3 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-3-3-desktop {
        width: calc(100% / 3 * 3 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-3-mobile-tablet {
        width: calc(100% / 3 * 3 - 32px);
    }
}

.grid > .grid-wrapper > .col-1-4 {
    width: calc(100% / 4 * 1 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-1-4-mobile {
        width: calc(100% / 4 * 1 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-4-tablet {
        width: calc(100% / 4 * 1 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-1-4-desktop {
        width: calc(100% / 4 * 1 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-4-mobile-tablet {
        width: calc(100% / 4 * 1 - 32px);
    }
}

.grid > .grid-wrapper > .col-2-4 {
    width: calc(100% / 4 * 2 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-2-4-mobile {
        width: calc(100% / 4 * 2 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-4-tablet {
        width: calc(100% / 4 * 2 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-2-4-desktop {
        width: calc(100% / 4 * 2 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-4-mobile-tablet {
        width: calc(100% / 4 * 2 - 32px);
    }
}

.grid > .grid-wrapper > .col-3-4 {
    width: calc(100% / 4 * 3 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-3-4-mobile {
        width: calc(100% / 4 * 3 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-4-tablet {
        width: calc(100% / 4 * 3 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-3-4-desktop {
        width: calc(100% / 4 * 3 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-4-mobile-tablet {
        width: calc(100% / 4 * 3 - 32px);
    }
}

.grid > .grid-wrapper > .col-4-4 {
    width: calc(100% / 4 * 4 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-4-4-mobile {
        width: calc(100% / 4 * 4 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-4-tablet {
        width: calc(100% / 4 * 4 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-4-4-desktop {
        width: calc(100% / 4 * 4 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-4-mobile-tablet {
        width: calc(100% / 4 * 4 - 32px);
    }
}

.grid > .grid-wrapper > .col-1-5 {
    width: calc(100% / 5 * 1 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-1-5-mobile {
        width: calc(100% / 5 * 1 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-5-tablet {
        width: calc(100% / 5 * 1 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-1-5-desktop {
        width: calc(100% / 5 * 1 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-5-mobile-tablet {
        width: calc(100% / 5 * 1 - 32px);
    }
}

.grid > .grid-wrapper > .col-2-5 {
    width: calc(100% / 5 * 2 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-2-5-mobile {
        width: calc(100% / 5 * 2 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-5-tablet {
        width: calc(100% / 5 * 2 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-2-5-desktop {
        width: calc(100% / 5 * 2 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-5-mobile-tablet {
        width: calc(100% / 5 * 2 - 32px);
    }
}

.grid > .grid-wrapper > .col-3-5 {
    width: calc(100% / 5 * 3 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-3-5-mobile {
        width: calc(100% / 5 * 3 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-5-tablet {
        width: calc(100% / 5 * 3 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-3-5-desktop {
        width: calc(100% / 5 * 3 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-5-mobile-tablet {
        width: calc(100% / 5 * 3 - 32px);
    }
}

.grid > .grid-wrapper > .col-4-5 {
    width: calc(100% / 5 * 4 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-4-5-mobile {
        width: calc(100% / 5 * 4 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-5-tablet {
        width: calc(100% / 5 * 4 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-4-5-desktop {
        width: calc(100% / 5 * 4 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-5-mobile-tablet {
        width: calc(100% / 5 * 4 - 32px);
    }
}

.grid > .grid-wrapper > .col-5-5 {
    width: calc(100% / 5 * 5 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-5-5-mobile {
        width: calc(100% / 5 * 5 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-5-tablet {
        width: calc(100% / 5 * 5 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-5-5-desktop {
        width: calc(100% / 5 * 5 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-5-mobile-tablet {
        width: calc(100% / 5 * 5 - 32px);
    }
}

.grid > .grid-wrapper > .col-1-6 {
    width: calc(100% / 6 * 1 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-1-6-mobile {
        width: calc(100% / 6 * 1 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-6-tablet {
        width: calc(100% / 6 * 1 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-1-6-desktop {
        width: calc(100% / 6 * 1 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-6-mobile-tablet {
        width: calc(100% / 6 * 1 - 32px);
    }
}

.grid > .grid-wrapper > .col-2-6 {
    width: calc(100% / 6 * 2 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-2-6-mobile {
        width: calc(100% / 6 * 2 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-6-tablet {
        width: calc(100% / 6 * 2 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-2-6-desktop {
        width: calc(100% / 6 * 2 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-6-mobile-tablet {
        width: calc(100% / 6 * 2 - 32px);
    }
}

.grid > .grid-wrapper > .col-3-6 {
    width: calc(100% / 6 * 3 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-3-6-mobile {
        width: calc(100% / 6 * 3 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-6-tablet {
        width: calc(100% / 6 * 3 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-3-6-desktop {
        width: calc(100% / 6 * 3 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-6-mobile-tablet {
        width: calc(100% / 6 * 3 - 32px);
    }
}

.grid > .grid-wrapper > .col-4-6 {
    width: calc(100% / 6 * 4 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-4-6-mobile {
        width: calc(100% / 6 * 4 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-6-tablet {
        width: calc(100% / 6 * 4 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-4-6-desktop {
        width: calc(100% / 6 * 4 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-6-mobile-tablet {
        width: calc(100% / 6 * 4 - 32px);
    }
}

.grid > .grid-wrapper > .col-5-6 {
    width: calc(100% / 6 * 5 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-5-6-mobile {
        width: calc(100% / 6 * 5 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-6-tablet {
        width: calc(100% / 6 * 5 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-5-6-desktop {
        width: calc(100% / 6 * 5 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-6-mobile-tablet {
        width: calc(100% / 6 * 5 - 32px);
    }
}

.grid > .grid-wrapper > .col-6-6 {
    width: calc(100% / 6 * 6 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-6-6-mobile {
        width: calc(100% / 6 * 6 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-6-6-tablet {
        width: calc(100% / 6 * 6 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-6-6-desktop {
        width: calc(100% / 6 * 6 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-6-6-mobile-tablet {
        width: calc(100% / 6 * 6 - 32px);
    }
}

.grid > .grid-wrapper > .col-1-7 {
    width: calc(100% / 7 * 1 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-1-7-mobile {
        width: calc(100% / 7 * 1 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-7-tablet {
        width: calc(100% / 7 * 1 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-1-7-desktop {
        width: calc(100% / 7 * 1 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-7-mobile-tablet {
        width: calc(100% / 7 * 1 - 32px);
    }
}

.grid > .grid-wrapper > .col-2-7 {
    width: calc(100% / 7 * 2 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-2-7-mobile {
        width: calc(100% / 7 * 2 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-7-tablet {
        width: calc(100% / 7 * 2 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-2-7-desktop {
        width: calc(100% / 7 * 2 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-7-mobile-tablet {
        width: calc(100% / 7 * 2 - 32px);
    }
}

.grid > .grid-wrapper > .col-3-7 {
    width: calc(100% / 7 * 3 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-3-7-mobile {
        width: calc(100% / 7 * 3 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-7-tablet {
        width: calc(100% / 7 * 3 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-3-7-desktop {
        width: calc(100% / 7 * 3 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-7-mobile-tablet {
        width: calc(100% / 7 * 3 - 32px);
    }
}

.grid > .grid-wrapper > .col-4-7 {
    width: calc(100% / 7 * 4 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-4-7-mobile {
        width: calc(100% / 7 * 4 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-7-tablet {
        width: calc(100% / 7 * 4 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-4-7-desktop {
        width: calc(100% / 7 * 4 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-7-mobile-tablet {
        width: calc(100% / 7 * 4 - 32px);
    }
}

.grid > .grid-wrapper > .col-5-7 {
    width: calc(100% / 7 * 5 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-5-7-mobile {
        width: calc(100% / 7 * 5 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-7-tablet {
        width: calc(100% / 7 * 5 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-5-7-desktop {
        width: calc(100% / 7 * 5 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-7-mobile-tablet {
        width: calc(100% / 7 * 5 - 32px);
    }
}

.grid > .grid-wrapper > .col-6-7 {
    width: calc(100% / 7 * 6 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-6-7-mobile {
        width: calc(100% / 7 * 6 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-6-7-tablet {
        width: calc(100% / 7 * 6 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-6-7-desktop {
        width: calc(100% / 7 * 6 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-6-7-mobile-tablet {
        width: calc(100% / 7 * 6 - 32px);
    }
}

.grid > .grid-wrapper > .col-7-7 {
    width: calc(100% / 7 * 7 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-7-7-mobile {
        width: calc(100% / 7 * 7 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-7-7-tablet {
        width: calc(100% / 7 * 7 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-7-7-desktop {
        width: calc(100% / 7 * 7 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-7-7-mobile-tablet {
        width: calc(100% / 7 * 7 - 32px);
    }
}

.grid > .grid-wrapper > .col-1-8 {
    width: calc(100% / 8 * 1 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-1-8-mobile {
        width: calc(100% / 8 * 1 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-8-tablet {
        width: calc(100% / 8 * 1 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-1-8-desktop {
        width: calc(100% / 8 * 1 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-8-mobile-tablet {
        width: calc(100% / 8 * 1 - 32px);
    }
}

.grid > .grid-wrapper > .col-2-8 {
    width: calc(100% / 8 * 2 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-2-8-mobile {
        width: calc(100% / 8 * 2 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-8-tablet {
        width: calc(100% / 8 * 2 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-2-8-desktop {
        width: calc(100% / 8 * 2 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-8-mobile-tablet {
        width: calc(100% / 8 * 2 - 32px);
    }
}

.grid > .grid-wrapper > .col-3-8 {
    width: calc(100% / 8 * 3 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-3-8-mobile {
        width: calc(100% / 8 * 3 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-8-tablet {
        width: calc(100% / 8 * 3 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-3-8-desktop {
        width: calc(100% / 8 * 3 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-8-mobile-tablet {
        width: calc(100% / 8 * 3 - 32px);
    }
}

.grid > .grid-wrapper > .col-4-8 {
    width: calc(100% / 8 * 4 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-4-8-mobile {
        width: calc(100% / 8 * 4 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-8-tablet {
        width: calc(100% / 8 * 4 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-4-8-desktop {
        width: calc(100% / 8 * 4 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-8-mobile-tablet {
        width: calc(100% / 8 * 4 - 32px);
    }
}

.grid > .grid-wrapper > .col-5-8 {
    width: calc(100% / 8 * 5 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-5-8-mobile {
        width: calc(100% / 8 * 5 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-8-tablet {
        width: calc(100% / 8 * 5 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-5-8-desktop {
        width: calc(100% / 8 * 5 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-8-mobile-tablet {
        width: calc(100% / 8 * 5 - 32px);
    }
}

.grid > .grid-wrapper > .col-6-8 {
    width: calc(100% / 8 * 6 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-6-8-mobile {
        width: calc(100% / 8 * 6 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-6-8-tablet {
        width: calc(100% / 8 * 6 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-6-8-desktop {
        width: calc(100% / 8 * 6 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-6-8-mobile-tablet {
        width: calc(100% / 8 * 6 - 32px);
    }
}

.grid > .grid-wrapper > .col-7-8 {
    width: calc(100% / 8 * 7 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-7-8-mobile {
        width: calc(100% / 8 * 7 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-7-8-tablet {
        width: calc(100% / 8 * 7 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-7-8-desktop {
        width: calc(100% / 8 * 7 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-7-8-mobile-tablet {
        width: calc(100% / 8 * 7 - 32px);
    }
}

.grid > .grid-wrapper > .col-8-8 {
    width: calc(100% / 8 * 8 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-8-8-mobile {
        width: calc(100% / 8 * 8 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-8-8-tablet {
        width: calc(100% / 8 * 8 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-8-8-desktop {
        width: calc(100% / 8 * 8 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-8-8-mobile-tablet {
        width: calc(100% / 8 * 8 - 32px);
    }
}

.grid > .grid-wrapper > .col-1-9 {
    width: calc(100% / 9 * 1 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-1-9-mobile {
        width: calc(100% / 9 * 1 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-9-tablet {
        width: calc(100% / 9 * 1 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-1-9-desktop {
        width: calc(100% / 9 * 1 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-9-mobile-tablet {
        width: calc(100% / 9 * 1 - 32px);
    }
}

.grid > .grid-wrapper > .col-2-9 {
    width: calc(100% / 9 * 2 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-2-9-mobile {
        width: calc(100% / 9 * 2 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-9-tablet {
        width: calc(100% / 9 * 2 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-2-9-desktop {
        width: calc(100% / 9 * 2 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-9-mobile-tablet {
        width: calc(100% / 9 * 2 - 32px);
    }
}

.grid > .grid-wrapper > .col-3-9 {
    width: calc(100% / 9 * 3 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-3-9-mobile {
        width: calc(100% / 9 * 3 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-9-tablet {
        width: calc(100% / 9 * 3 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-3-9-desktop {
        width: calc(100% / 9 * 3 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-9-mobile-tablet {
        width: calc(100% / 9 * 3 - 32px);
    }
}

.grid > .grid-wrapper > .col-4-9 {
    width: calc(100% / 9 * 4 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-4-9-mobile {
        width: calc(100% / 9 * 4 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-9-tablet {
        width: calc(100% / 9 * 4 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-4-9-desktop {
        width: calc(100% / 9 * 4 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-9-mobile-tablet {
        width: calc(100% / 9 * 4 - 32px);
    }
}

.grid > .grid-wrapper > .col-5-9 {
    width: calc(100% / 9 * 5 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-5-9-mobile {
        width: calc(100% / 9 * 5 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-9-tablet {
        width: calc(100% / 9 * 5 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-5-9-desktop {
        width: calc(100% / 9 * 5 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-9-mobile-tablet {
        width: calc(100% / 9 * 5 - 32px);
    }
}

.grid > .grid-wrapper > .col-6-9 {
    width: calc(100% / 9 * 6 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-6-9-mobile {
        width: calc(100% / 9 * 6 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-6-9-tablet {
        width: calc(100% / 9 * 6 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-6-9-desktop {
        width: calc(100% / 9 * 6 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-6-9-mobile-tablet {
        width: calc(100% / 9 * 6 - 32px);
    }
}

.grid > .grid-wrapper > .col-7-9 {
    width: calc(100% / 9 * 7 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-7-9-mobile {
        width: calc(100% / 9 * 7 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-7-9-tablet {
        width: calc(100% / 9 * 7 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-7-9-desktop {
        width: calc(100% / 9 * 7 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-7-9-mobile-tablet {
        width: calc(100% / 9 * 7 - 32px);
    }
}

.grid > .grid-wrapper > .col-8-9 {
    width: calc(100% / 9 * 8 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-8-9-mobile {
        width: calc(100% / 9 * 8 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-8-9-tablet {
        width: calc(100% / 9 * 8 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-8-9-desktop {
        width: calc(100% / 9 * 8 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-8-9-mobile-tablet {
        width: calc(100% / 9 * 8 - 32px);
    }
}

.grid > .grid-wrapper > .col-9-9 {
    width: calc(100% / 9 * 9 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-9-9-mobile {
        width: calc(100% / 9 * 9 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-9-9-tablet {
        width: calc(100% / 9 * 9 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-9-9-desktop {
        width: calc(100% / 9 * 9 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-9-9-mobile-tablet {
        width: calc(100% / 9 * 9 - 32px);
    }
}

.grid > .grid-wrapper > .col-1-10 {
    width: calc(100% / 10 * 1 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-1-10-mobile {
        width: calc(100% / 10 * 1 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-10-tablet {
        width: calc(100% / 10 * 1 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-1-10-desktop {
        width: calc(100% / 10 * 1 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-10-mobile-tablet {
        width: calc(100% / 10 * 1 - 32px);
    }
}

.grid > .grid-wrapper > .col-2-10 {
    width: calc(100% / 10 * 2 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-2-10-mobile {
        width: calc(100% / 10 * 2 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-10-tablet {
        width: calc(100% / 10 * 2 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-2-10-desktop {
        width: calc(100% / 10 * 2 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-10-mobile-tablet {
        width: calc(100% / 10 * 2 - 32px);
    }
}

.grid > .grid-wrapper > .col-3-10 {
    width: calc(100% / 10 * 3 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-3-10-mobile {
        width: calc(100% / 10 * 3 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-10-tablet {
        width: calc(100% / 10 * 3 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-3-10-desktop {
        width: calc(100% / 10 * 3 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-10-mobile-tablet {
        width: calc(100% / 10 * 3 - 32px);
    }
}

.grid > .grid-wrapper > .col-4-10 {
    width: calc(100% / 10 * 4 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-4-10-mobile {
        width: calc(100% / 10 * 4 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-10-tablet {
        width: calc(100% / 10 * 4 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-4-10-desktop {
        width: calc(100% / 10 * 4 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-10-mobile-tablet {
        width: calc(100% / 10 * 4 - 32px);
    }
}

.grid > .grid-wrapper > .col-5-10 {
    width: calc(100% / 10 * 5 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-5-10-mobile {
        width: calc(100% / 10 * 5 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-10-tablet {
        width: calc(100% / 10 * 5 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-5-10-desktop {
        width: calc(100% / 10 * 5 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-10-mobile-tablet {
        width: calc(100% / 10 * 5 - 32px);
    }
}

.grid > .grid-wrapper > .col-6-10 {
    width: calc(100% / 10 * 6 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-6-10-mobile {
        width: calc(100% / 10 * 6 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-6-10-tablet {
        width: calc(100% / 10 * 6 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-6-10-desktop {
        width: calc(100% / 10 * 6 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-6-10-mobile-tablet {
        width: calc(100% / 10 * 6 - 32px);
    }
}

.grid > .grid-wrapper > .col-7-10 {
    width: calc(100% / 10 * 7 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-7-10-mobile {
        width: calc(100% / 10 * 7 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-7-10-tablet {
        width: calc(100% / 10 * 7 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-7-10-desktop {
        width: calc(100% / 10 * 7 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-7-10-mobile-tablet {
        width: calc(100% / 10 * 7 - 32px);
    }
}

.grid > .grid-wrapper > .col-8-10 {
    width: calc(100% / 10 * 8 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-8-10-mobile {
        width: calc(100% / 10 * 8 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-8-10-tablet {
        width: calc(100% / 10 * 8 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-8-10-desktop {
        width: calc(100% / 10 * 8 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-8-10-mobile-tablet {
        width: calc(100% / 10 * 8 - 32px);
    }
}

.grid > .grid-wrapper > .col-9-10 {
    width: calc(100% / 10 * 9 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-9-10-mobile {
        width: calc(100% / 10 * 9 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-9-10-tablet {
        width: calc(100% / 10 * 9 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-9-10-desktop {
        width: calc(100% / 10 * 9 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-9-10-mobile-tablet {
        width: calc(100% / 10 * 9 - 32px);
    }
}

.grid > .grid-wrapper > .col-10-10 {
    width: calc(100% / 10 * 10 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-10-10-mobile {
        width: calc(100% / 10 * 10 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-10-10-tablet {
        width: calc(100% / 10 * 10 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-10-10-desktop {
        width: calc(100% / 10 * 10 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-10-10-mobile-tablet {
        width: calc(100% / 10 * 10 - 32px);
    }
}

.grid > .grid-wrapper > .col-1-11 {
    width: calc(100% / 11 * 1 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-1-11-mobile {
        width: calc(100% / 11 * 1 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-11-tablet {
        width: calc(100% / 11 * 1 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-1-11-desktop {
        width: calc(100% / 11 * 1 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-11-mobile-tablet {
        width: calc(100% / 11 * 1 - 32px);
    }
}

.grid > .grid-wrapper > .col-2-11 {
    width: calc(100% / 11 * 2 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-2-11-mobile {
        width: calc(100% / 11 * 2 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-11-tablet {
        width: calc(100% / 11 * 2 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-2-11-desktop {
        width: calc(100% / 11 * 2 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-11-mobile-tablet {
        width: calc(100% / 11 * 2 - 32px);
    }
}

.grid > .grid-wrapper > .col-3-11 {
    width: calc(100% / 11 * 3 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-3-11-mobile {
        width: calc(100% / 11 * 3 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-11-tablet {
        width: calc(100% / 11 * 3 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-3-11-desktop {
        width: calc(100% / 11 * 3 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-11-mobile-tablet {
        width: calc(100% / 11 * 3 - 32px);
    }
}

.grid > .grid-wrapper > .col-4-11 {
    width: calc(100% / 11 * 4 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-4-11-mobile {
        width: calc(100% / 11 * 4 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-11-tablet {
        width: calc(100% / 11 * 4 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-4-11-desktop {
        width: calc(100% / 11 * 4 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-11-mobile-tablet {
        width: calc(100% / 11 * 4 - 32px);
    }
}

.grid > .grid-wrapper > .col-5-11 {
    width: calc(100% / 11 * 5 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-5-11-mobile {
        width: calc(100% / 11 * 5 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-11-tablet {
        width: calc(100% / 11 * 5 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-5-11-desktop {
        width: calc(100% / 11 * 5 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-11-mobile-tablet {
        width: calc(100% / 11 * 5 - 32px);
    }
}

.grid > .grid-wrapper > .col-6-11 {
    width: calc(100% / 11 * 6 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-6-11-mobile {
        width: calc(100% / 11 * 6 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-6-11-tablet {
        width: calc(100% / 11 * 6 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-6-11-desktop {
        width: calc(100% / 11 * 6 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-6-11-mobile-tablet {
        width: calc(100% / 11 * 6 - 32px);
    }
}

.grid > .grid-wrapper > .col-7-11 {
    width: calc(100% / 11 * 7 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-7-11-mobile {
        width: calc(100% / 11 * 7 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-7-11-tablet {
        width: calc(100% / 11 * 7 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-7-11-desktop {
        width: calc(100% / 11 * 7 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-7-11-mobile-tablet {
        width: calc(100% / 11 * 7 - 32px);
    }
}

.grid > .grid-wrapper > .col-8-11 {
    width: calc(100% / 11 * 8 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-8-11-mobile {
        width: calc(100% / 11 * 8 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-8-11-tablet {
        width: calc(100% / 11 * 8 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-8-11-desktop {
        width: calc(100% / 11 * 8 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-8-11-mobile-tablet {
        width: calc(100% / 11 * 8 - 32px);
    }
}

.grid > .grid-wrapper > .col-9-11 {
    width: calc(100% / 11 * 9 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-9-11-mobile {
        width: calc(100% / 11 * 9 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-9-11-tablet {
        width: calc(100% / 11 * 9 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-9-11-desktop {
        width: calc(100% / 11 * 9 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-9-11-mobile-tablet {
        width: calc(100% / 11 * 9 - 32px);
    }
}

.grid > .grid-wrapper > .col-10-11 {
    width: calc(100% / 11 * 10 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-10-11-mobile {
        width: calc(100% / 11 * 10 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-10-11-tablet {
        width: calc(100% / 11 * 10 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-10-11-desktop {
        width: calc(100% / 11 * 10 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-10-11-mobile-tablet {
        width: calc(100% / 11 * 10 - 32px);
    }
}

.grid > .grid-wrapper > .col-11-11 {
    width: calc(100% / 11 * 11 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-11-11-mobile {
        width: calc(100% / 11 * 11 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-11-11-tablet {
        width: calc(100% / 11 * 11 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-11-11-desktop {
        width: calc(100% / 11 * 11 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-11-11-mobile-tablet {
        width: calc(100% / 11 * 11 - 32px);
    }
}

.grid > .grid-wrapper > .col-1-12 {
    width: calc(100% / 12 * 1 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-1-12-mobile {
        width: calc(100% / 12 * 1 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-12-tablet {
        width: calc(100% / 12 * 1 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-1-12-desktop {
        width: calc(100% / 12 * 1 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-1-12-mobile-tablet {
        width: calc(100% / 12 * 1 - 32px);
    }
}

.grid > .grid-wrapper > .col-2-12 {
    width: calc(100% / 12 * 2 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-2-12-mobile {
        width: calc(100% / 12 * 2 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-12-tablet {
        width: calc(100% / 12 * 2 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-2-12-desktop {
        width: calc(100% / 12 * 2 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-2-12-mobile-tablet {
        width: calc(100% / 12 * 2 - 32px);
    }
}

.grid > .grid-wrapper > .col-3-12 {
    width: calc(100% / 12 * 3 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-3-12-mobile {
        width: calc(100% / 12 * 3 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-12-tablet {
        width: calc(100% / 12 * 3 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-3-12-desktop {
        width: calc(100% / 12 * 3 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-3-12-mobile-tablet {
        width: calc(100% / 12 * 3 - 32px);
    }
}

.grid > .grid-wrapper > .col-4-12 {
    width: calc(100% / 12 * 4 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-4-12-mobile {
        width: calc(100% / 12 * 4 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-12-tablet {
        width: calc(100% / 12 * 4 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-4-12-desktop {
        width: calc(100% / 12 * 4 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-4-12-mobile-tablet {
        width: calc(100% / 12 * 4 - 32px);
    }
}

.grid > .grid-wrapper > .col-5-12 {
    width: calc(100% / 12 * 5 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-5-12-mobile {
        width: calc(100% / 12 * 5 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-12-tablet {
        width: calc(100% / 12 * 5 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-5-12-desktop {
        width: calc(100% / 12 * 5 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-5-12-mobile-tablet {
        width: calc(100% / 12 * 5 - 32px);
    }
}

.grid > .grid-wrapper > .col-6-12 {
    width: calc(100% / 12 * 6 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-6-12-mobile {
        width: calc(100% / 12 * 6 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-6-12-tablet {
        width: calc(100% / 12 * 6 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-6-12-desktop {
        width: calc(100% / 12 * 6 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-6-12-mobile-tablet {
        width: calc(100% / 12 * 6 - 32px);
    }
}

.grid > .grid-wrapper > .col-7-12 {
    width: calc(100% / 12 * 7 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-7-12-mobile {
        width: calc(100% / 12 * 7 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-7-12-tablet {
        width: calc(100% / 12 * 7 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-7-12-desktop {
        width: calc(100% / 12 * 7 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-7-12-mobile-tablet {
        width: calc(100% / 12 * 7 - 32px);
    }
}

.grid > .grid-wrapper > .col-8-12 {
    width: calc(100% / 12 * 8 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-8-12-mobile {
        width: calc(100% / 12 * 8 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-8-12-tablet {
        width: calc(100% / 12 * 8 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-8-12-desktop {
        width: calc(100% / 12 * 8 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-8-12-mobile-tablet {
        width: calc(100% / 12 * 8 - 32px);
    }
}

.grid > .grid-wrapper > .col-9-12 {
    width: calc(100% / 12 * 9 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-9-12-mobile {
        width: calc(100% / 12 * 9 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-9-12-tablet {
        width: calc(100% / 12 * 9 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-9-12-desktop {
        width: calc(100% / 12 * 9 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-9-12-mobile-tablet {
        width: calc(100% / 12 * 9 - 32px);
    }
}

.grid > .grid-wrapper > .col-10-12 {
    width: calc(100% / 12 * 10 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-10-12-mobile {
        width: calc(100% / 12 * 10 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-10-12-tablet {
        width: calc(100% / 12 * 10 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-10-12-desktop {
        width: calc(100% / 12 * 10 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-10-12-mobile-tablet {
        width: calc(100% / 12 * 10 - 32px);
    }
}

.grid > .grid-wrapper > .col-11-12 {
    width: calc(100% / 12 * 11 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-11-12-mobile {
        width: calc(100% / 12 * 11 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-11-12-tablet {
        width: calc(100% / 12 * 11 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-11-12-desktop {
        width: calc(100% / 12 * 11 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-11-12-mobile-tablet {
        width: calc(100% / 12 * 11 - 32px);
    }
}

.grid > .grid-wrapper > .col-12-12 {
    width: calc(100% / 12 * 12 - 32px);
}

@media (max-width: 767px) {
    .grid > .grid-wrapper > [class^="col"].col-12-12-mobile {
        width: calc(100% / 12 * 12 - 32px);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-12-12-tablet {
        width: calc(100% / 12 * 12 - 32px);
    }
}

@media (min-width: 1024px) {
    .grid > .grid-wrapper > [class^="col"].col-12-12-desktop {
        width: calc(100% / 12 * 12 - 32px);
    }
}

@media (max-width: 1023px) {
    .grid > .grid-wrapper > [class^="col"].col-12-12-mobile-tablet {
        width: calc(100% / 12 * 12 - 32px);
    }
}

.l-header {
    background: #1d1d1b;
}

.l-header .l-page-wrapper-large {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding-top: 22px;
    padding-bottom: 22px;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

@media (max-width: 1280px) {
    .l-header .l-page-wrapper-large {
        height: 118px;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-align-items: flex-start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .l-header .l-page-wrapper-large {
        height: auto;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }
}

.l-page-wrapper {
    position: relative;
    max-width: 1304px;
    width: 100%;
    margin: 0 auto;
    padding: 0 32px;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .l-page-wrapper {
        padding: 0 30px;
    }
}

@media (max-width: 767px) {
    .l-page-wrapper {
        padding: 0 20px;
    }
}

.is-zoomed .l-page-wrapper {
    margin: 0 32px;
}

.l-page-wrapper-large {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
}

@media (max-width: 767px) {
    .l-page-wrapper-large {
        padding: 0 15px;
    }
}

.l-page-wrapper-medium {
    position: relative;
    max-width: 1092px;
    width: 100%;
    margin: 0 auto;
    padding: 0 32px;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .l-page-wrapper-medium {
        padding: 0 30px;
    }
}

@media (max-width: 767px) {
    .l-page-wrapper-medium {
        padding: 0 20px;
    }
}

.l-page-wrapper-small {
    position: relative;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 0 32px;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .l-page-wrapper-small {
        padding: 0 30px;
    }
}

@media (max-width: 767px) {
    .l-page-wrapper-small {
        padding: 0 20px;
    }
}

.l-content-section {
    position: relative;
}

.l-fullwidth {
    position: relative;
    left: 50%;
    width: 100vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.l-block-content,
.l-block-sidebar {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 100%;
    font-size: 1rem;
}

.is-two-columns .l-block-content {
    width: calc(100% - 240px);
}

.is-two-columns .l-block-sidebar {
    width: 240px;
    padding-left: 20px;
}

.box-desabonnement-confirmation {
    margin-top: 100px;
    margin-bottom: 80px;
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.box-desabonnement-confirmation > p {
    text-align: center;
}

.box-desabonnement {
    margin-top: 100px;
    margin-bottom: 80px;
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-content: center;
        -ms-flex-line-pack: center;
            align-content: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.box-desabonnement > form {
    max-width: 600px;
}

.box-desabonnement > form label {
    margin-bottom: 20px;
}

.box-desabonnement > form input[type=text] {
    margin-bottom: 30px;
}

.action-blocks {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    margin-left: -16px;
    margin-right: -16px;
}

@media (max-width: 767px) {
    .action-blocks {
        -webkit-flex-flow: row wrap;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
    }
}

.action-block {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 80px 20px;
    margin: 0 16px;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

@media (max-width: 1023px) {
    .action-block {
        padding: 80px 10px;
    }
}

@media (max-width: 767px) {
    .action-block {
        padding: 40px 0;
    }
}

.action-block:last-child {
    margin-right: 0;
}

.action-block p {
    text-align: center;
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
}

@media (max-width: 767px) {
    .action-block p {
        width: 100%;
    }
}

.action-block-icon {
    margin-bottom: 16px;
    height: 90px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
}

.action-block-title {
    width: 100%;
    margin-bottom: 8px;
    font-weight: 500;
    text-align: center;
    color: #3c3c3a;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 29px;
    line-height: 1.8125rem;
}

.badge-home {
    position: relative;
    margin-bottom: 42px;
    background: url("../svg/originals/banniere-accueil-haut.svg") center bottom no-repeat;
    background-size: 100%;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

@media (max-width: 767px) {
    .badge-home {
        max-width: 300px;
        margin: 0 auto 42px auto;
    }
}

.badge-home:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 60%;
}

@media (max-width: 767px) {
    .badge-home:before {
        padding-top: 70%;
    }
}

.badge-home > .badge-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.badge {
    position: relative;
    background: url("../svg/originals/banniere-grosse.svg") center top no-repeat;
    background-size: contain;
}

.badge:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 77.55102%;
}

.badge > .badge-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.badge-title {
    padding-top: 20%;
    font-weight: 300;
    text-align: center;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 26px;
    font-size: 1.625rem;
    line-height: 40px;
    line-height: 2.5rem;
}

@media (max-width: 400px) {
    .badge-title {
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 32px;
        line-height: 2rem;
    }
}

.badge-home .badge-title {
    position: absolute;
    top: 50%;
    left: 50%;
    padding-top: 0;
    padding-bottom: 20px;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 30px;
    line-height: 1.875rem;
}

@media (max-width: 1140px) {
    .badge-home .badge-title {
        font-size: 18px;
        font-size: 1.125rem;
        line-height: 24px;
        line-height: 1.5rem;
    }
}

@media (max-width: 1023px) {
    .badge-home .badge-title {
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 30px;
        line-height: 1.875rem;
    }
}

.box {
    width: 100%;
    padding: 21px 30px;
    border-radius: 4px;
    background: #ffffff;
}

.home-header .box {
    max-width: 880px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .home-header .box {
        padding: 21px 20px;
    }
}

.box.box-lightblue {
    background: #D7E3E5;
}

.box h2 {
    font-weight: 500;
    color: #1d1d1b;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 32px;
    line-height: 2rem;
}

.box p {
    font-weight: normal;
    color: #3c3c3a;
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.box p:last-child {
    margin-bottom: 0;
}

.box-with-action {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

@media (max-width: 767px) {
    .box-with-action {
        -webkit-flex-flow: row wrap;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
    }
}

.box-with-action p {
    font-weight: 200;
    color: #1d1d1b;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.box-with-action p strong {
    font-weight: 500;
    color: #1d1d1b;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.box-with-action p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .box-with-action p:last-child {
        margin-bottom: 32px;
    }
}

.box-with-action .box-action {
    margin-left: 30px;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

@media (max-width: 767px) {
    .box-with-action .box-action {
        margin-left: 0;
        -webkit-flex-shrink: 1;
            -ms-flex-negative: 1;
                flex-shrink: 1;
    }
}

.breadcrumb .breadcrumb-element {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

.breadcrumb .breadcrumb-element + .breadcrumb-element:before {
    content: "\0203A";
    margin: 0 0.5em;
    font-weight: bold;
}

.breadcrumb a,
.breadcrumb .breadcrumb-element:before {
    display: inline-block;
    vertical-align: middle;
}

.btn {
    display: inline-block;
    padding: 9px 16px 7px;
    font-weight: 300;
    text-decoration: none;
    color: #ffffff;
    border: 0;
    border-radius: 4px;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.btn + .btn {
    margin-left: 12px;
}

.btn-blue {
    background-color: #00abe4;
}

.btn-blue:hover, .btn-blue:focus {
    background-color: #2CB3E6;
}

.btn-blue:active, .btn-blue.btn-active {
    background-color: #007dad;
}

.btn-blue.btn-disabled {
    background-color: #c4c4c4;
}

.btn-turquoise {
    background: #00ADBA;
}

.btn-turquoise:hover, .btn-turquoise:focus {
    background-color: #2CB5C0;
}

.btn-turquoise:active, .btn-turquoise.btn-active {
    background-color: #007F89;
}

.btn-turquoise.btn-disabled {
    background-color: #c2c2c2;
}

.btn-darkblue {
    background: #305057;
}

.btn-darkblue:hover, .btn-darkblue:focus {
    background-color: #4F686D;
}

.btn-darkblue:active, .btn-darkblue.btn-active {
    background-color: #22383D;
}

.btn-darkblue.btn-disabled {
    background-color: #ACACAC;
}

.btn-lightblue {
    color: #1d1d1b;
    background: #D7E3E5;
}

.btn-lightblue:hover, .btn-lightblue:focus {
    background-color: #DAE5E7;
}

.btn-lightblue:active, .btn-lightblue.btn-active {
    background-color: #A2ACAE;
}

.btn-lightblue.btn-disabled {
    background-color: #F0F0F0;
}

.btn-almostgrey {
    color: #1d1d1b;
    background: #EBF1F2;
}

.btn-almostgrey:hover, .btn-almostgrey:focus {
    background-color: #EDF1F2;
}

.btn-almostgrey:active, .btn-almostgrey.btn-active {
    background-color: #B4B8B9;
}

.btn-almostgrey.btn-disabled {
    background-color: #F7F7F7;
}

.btn-yellow {
    color: #1d1d1b;
    background-color: #EECE23;
}

.btn-yellow:hover, .btn-yellow:focus {
    background-color: #2CB3E6;
}

.btn-yellow:active, .btn-yellow.btn-active {
    background-color: #007dad;
}

.btn-yellow.btn-disabled {
    background-color: #c4c4c4;
}

.btn-dashboard {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    color: #1d1d1b;
    background: #3c3c3a;
}

.btn-dashboard:hover, .btn-dashboard:focus {
    background-color: #2CB3E6;
}

.btn-dashboard:active, .btn-dashboard.btn-active {
    background-color: #007dad;
}

.btn-dashboard.btn-disabled {
    background-color: #c4c4c4;
}

.btn-logout {
    background: #E30613;
}

.btn-logout:hover, .btn-logout:focus {
    background-color: #2CB5C0;
}

.btn-logout:active, .btn-logout.btn-active {
    background-color: #007F89;
}

.btn-logout.btn-disabled {
    background-color: #c2c2c2;
}

.btn-small {
    padding: 7px 16px 6px;
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.btn-large {
    padding: 13px 24px 11px;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.btn-icon {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

.btn-icon .icon-wrapper {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    margin-top: -2px;
    margin-right: 6px;
}

.btn-group {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

@media (max-width: 767px) {
    .btn-group {
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-align-items: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-align-content: center;
            -ms-flex-line-pack: center;
                align-content: center;
    }
}

.btn-group .btn {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    font-weight: 500;
    text-align: center;
    border-radius: 0;
}

.btn-group .btn:hover {
    color: inherit;
}

.btn-group .btn:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.btn-group .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.btn-group .btn + .btn {
    margin-left: 1px;
}

.btn-geo {
    width: 45px;
    height: 45px;
    padding: 0;
    border: solid 1px #D7E3E5;
    border-radius: 50%;
    background: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.btn-geo:hover {
    border: solid 1px #789BA1;
}

.btn-listview,
.btn-mapview {
    height: 45px;
    padding: 12px 20px 10px;
    background: #D7E3E5;
}

.btn-listview:hover, .btn-listview:focus,
.btn-mapview:hover,
.btn-mapview:focus {
    background-color: #DAE5E7;
}

.btn-listview:active, .btn-listview.btn-active,
.btn-mapview:active,
.btn-mapview.btn-active {
    background-color: #305057;
}

.btn-listview:active svg, .btn-listview.btn-active svg,
.btn-mapview:active svg,
.btn-mapview.btn-active svg {
    fill: #ffffff;
}

.btn-listview.btn-disabled,
.btn-mapview.btn-disabled {
    background-color: #F0F0F0;
}

.btn-details {
    margin-bottom: 20px;
}

.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.lightbox .lightbox-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background: #ffffff;
    padding: 3rem;
    z-index: 200;
    border-radius: 15px;
}

.lightbox .lightbox-wrapper ul {
    overflow: scroll;
    margin: 0;
    padding-left: 20px;
    height: calc(100% - 50px);
}

.lightbox .lightbox-wrapper .lightbox-close-button {
    position: absolute;
    top: 3rem;
    right: 3rem;
    font-size: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: none;
    border: none;
}

.lightbox .lightbox-wrapper .lightbox-close-button:after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("../svg/originals/icon-close.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.card {
    position: relative;
    border: solid 1px #D7E3E5;
    border-radius: 4px;
    height: 100%;
}

.card.featured-card {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

@media (max-width: 767px) {
    .card.featured-card {
        -webkit-flex-flow: row wrap;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
    }
}

.card.card-no-border {
    border: 0;
    border-radius: 0;
}

.card .lightbox-wrapper {
    width: 500px;
    height: 500px;
}

.card-image img {
    width: 100%;
    height: auto;
}

.featured-card .card-image {
    width: 50%;
    padding-right: 1rem;
}

@media (max-width: 767px) {
    .featured-card .card-image {
        width: 100%;
        padding-right: 0;
    }
}

.card-content {
    padding: 24px 22px;
}

.featured-card .card-content {
    width: 50%;
}

@media (max-width: 767px) {
    .featured-card .card-content {
        width: 100%;
    }
}

.card-content p {
    font-weight: normal;
    color: #3c3c3a;
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.card-content p.small {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 28px;
    line-height: 1.75rem;
}

.card-no-border .card-content {
    padding: 24px 0;
}

.card-title {
    margin: 0 0 18px;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 32px;
    line-height: 2rem;
    font-weight: 200;
}

.card-title.featured {
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 42px;
    line-height: 2.625rem;
}

.card-no-border .card-title {
    font-weight: 300;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.card-tag {
    display: inline-block;
    position: relative;
    margin-top: 19px;
    margin-left: 19px;
    padding: 4px 11px 5px;
    font-weight: normal;
    text-transform: uppercase;
    color: #ffffff;
    border-radius: 100px;
    background: #E24301;
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 16px;
    line-height: 1rem;
}

.card-has-image .card-tag {
    margin-top: 0;
    margin-left: 0;
    position: absolute;
    top: 19px;
    left: 19px;
}

.cartes .row .box {
    height: 100%;
    padding: 0;
}

.cartes .row .box > div {
    border-radius: 4px;
}

.cartes .page-content .infos {
    margin-bottom: 15px;
}

.cartes .page-content .infos p {
    margin: 0;
}

@media (max-width: 767px) {
    .cartes .page-content .cards {
        overflow-x: scroll;
        position: relative;
    }
}

.cartes .page-content .cards .lightbox-close-button {
    display: none;
}

.cartes .page-content .cards ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 767px) {
    .cartes .page-content .cards ul {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row nowrap;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        overflow-x: scroll;
    }
}

.cartes .page-content .cards li {
    position: relative;
    margin: 1em 0;
}

@media (max-width: 767px) {
    .cartes .page-content .cards li {
        margin: 1em 1em 1em 0;
        max-width: calc(33% - 1em);
        min-width: 180px;
        -webkit-flex: 1;
            -ms-flex: 1;
                flex: 1;
        cursor: pointer;
        position: relative;
        overflow-x: scroll;
    }
}

.cartes .page-content .cards li:after {
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 63%;
    border-radius: 8px;
    background: radial-gradient(circle, #3c565a 0%, #1d1d1b 100%);
    background-position: bottom left;
    background-size: 150%;
}

.cartes .page-content .cards li.new-card:after {
    border: 1px dashed #717C7D;
    background: none;
}

.cartes .page-content .cards li.new-card .card-wrapper {
    height: 100%;
    width: 100%;
    padding: 0;
}

.cartes .page-content .cards li.new-card a {
    color: #789BA1;
    text-align: center;
    width: 100%;
    height: 100%;
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 16px;
    line-height: 1rem;
    font-weight: 300;
    text-transform: uppercase;
}

.cartes .page-content .cards li.new-card a .inner-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.cartes .page-content .cards li.new-card a .icon-wrapper {
    display: inline-block;
    position: relative;
    background: #305057;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.cartes .page-content .cards li.new-card a .text-wrapper {
    display: block;
    margin-top: 8px;
}

.cartes .page-content .cards li.new-card a svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    fill: white;
}

.cartes .page-content .cards li .card-wrapper {
    position: absolute;
    bottom: 0;
    padding: 12px;
}

.cartes .page-content .cards li p {
    margin: 0;
}

.cartes .page-content .cards li .cardholder {
    color: #fff;
    font-size: 16px;
    font-size: 1rem;
    line-height: 19px;
    line-height: 1.1875rem;
}

.cartes .page-content .cards li .cardnumber {
    color: #ddd;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 18px;
    line-height: 1.125rem;
}

.cartes .page-content .account-infos,
.cartes .page-content .card-replacement,
.cartes .page-content .card-lost {
    margin: 1em 0;
    padding: 40px;
    border: 1px solid #d7e3e5;
    border-radius: 4px;
    background-color: #ebf1f2;
}

.cartes .page-content .account-infos ul,
.cartes .page-content .card-replacement ul,
.cartes .page-content .card-lost ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cartes .page-content .account-infos li,
.cartes .page-content .card-replacement li,
.cartes .page-content .card-lost li {
    position: relative;
    vertical-align: middle;
    border: 1px solid #EBF1F2;
    border-radius: 2px;
    background-color: #FFFFFF;
    display: inline-block;
}

.cartes .page-content .account-infos label,
.cartes .page-content .account-infos input,
.cartes .page-content .card-replacement label,
.cartes .page-content .card-replacement input,
.cartes .page-content .card-lost label,
.cartes .page-content .card-lost input {
    display: inline-block;
    vertical-align: middle;
    line-height: 36px;
}

.cartes .page-content .account-infos input,
.cartes .page-content .card-replacement input,
.cartes .page-content .card-lost input {
    margin: 0 10px;
}

.cartes .page-content .account-infos label,
.cartes .page-content .card-replacement label,
.cartes .page-content .card-lost label {
    margin: 0 10px;
    cursor: pointer;
}

@media (max-width: 1023px) {
    .cartes .page-content .account-infos label span,
    .cartes .page-content .card-replacement label span,
    .cartes .page-content .card-lost label span {
        line-height: 26px;
        display: block;
    }
}

.cartes .page-content .account-infos label:before,
.cartes .page-content .card-replacement label:before,
.cartes .page-content .card-lost label:before {
    content: '';
    display: inline;
    height: 36px;
    position: absolute;
    top: 0;
    left: 34px;
    border-right: 1px solid #D7E3E5;
    margin: 0 5px;
}

@media (max-width: 1023px) {
    .cartes .page-content .account-infos label:before,
    .cartes .page-content .card-replacement label:before,
    .cartes .page-content .card-lost label:before {
        height: 54px;
    }
}

.cartes .page-content .account-infos .lightbox-close-button,
.cartes .page-content .card-replacement .lightbox-close-button,
.cartes .page-content .card-lost .lightbox-close-button {
    display: none;
}

@media (max-width: 767px) {
    #btn-nouv-carte-oui, #btn-nouv-carte-non {
        margin: 5px;
    }
}

.lightbox-wrapper {
    width: 78%;
}

.alert-wrapper {
    padding: 24px 30px;
    border: 1px solid #988104;
    border-radius: 4px 4px 0 0;
    background-color: #fff3a5;
}

@media (max-width: 767px) {
    .alert-wrapper {
        padding: 1em;
    }
}

.alert-wrapper p {
    font-weight: 200;
    color: #1d1d1b;
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.alert-wrapper p strong {
    font-weight: 500;
    color: #1d1d1b;
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.alert-wrapper p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .alert-wrapper.box-with-action p:last-child {
        margin-bottom: 32px;
    }
}

.action-wrapper {
    border-right: 1px solid #D7E3E5;
    border-bottom: 1px solid #D7E3E5;
    border-left: 1px solid #D7E3E5;
    border-radius: 0 0 4px 4px;
    background-color: #ffffff;
}

.action-wrapper > div {
    padding: 3em;
}

@media (max-width: 767px) {
    .action-wrapper > div {
        padding: 1em;
    }
}

.action-wrapper h2 {
    font-weight: 500;
    font-size: 32px;
    font-size: 2rem;
    line-height: 38px;
    line-height: 2.375rem;
}

.action-wrapper h3 {
    font-weight: 500;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 29px;
    line-height: 1.8125rem;
}

.action-wrapper p {
    color: #789BA1;
}

.action-wrapper .checkbox-field {
    width: auto;
    margin-bottom: 1em;
}

.action-wrapper .btn {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    white-space: nowrap;
}

.existing-member {
    border-right: 1px solid #D7E3E5;
}

.become-member,
.complete-inscription {
    padding: 1em;
}

.forgot-password {
    float: right;
    color: #00abe4;
}

.contact [class^="col-"] {
    margin-bottom: 0;
}

.contact-main h2 {
    font-weight: 200;
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 48px;
    line-height: 3rem;
    margin-bottom: 16px;
}

.contact-main p {
    font-weight: 200;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 36px;
    line-height: 2.25rem;
}

.contact-side p {
    margin-bottom: 16px;
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.credit {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 20px;
}

.credit p {
    max-width: 100%;
    text-align: center;
    color: #305057;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 29px;
    line-height: 1.8125rem;
}

.credit p strong {
    color: #305057;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 29px;
    line-height: 1.8125rem;
}

.credit-icon {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 90px;
    margin-bottom: 20px;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
}

.credit-text {
    width: 100%;
}

.dashboard-nav {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #f3f7f7;
}

.dashboard-nav:after {
    content: '';
    display: block;
    z-index: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 3px solid #D7E3E5;
}

.dashboard-nav h2 {
    margin-top: 24px;
    margin-bottom: 0;
    color: #1d1d1b;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 29px;
    line-height: 1.8125rem;
}

.dashboard-nav ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-nav li {
    display: inline-block;
    position: relative;
    margin: 0;
    margin-right: 20px;
    padding: 20px 0;
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
    line-height: 1.25rem;
}

@media (max-width: 350px) {
    .dashboard-nav li {
        margin-right: 17px;
    }
}

.dashboard-nav li a {
    text-decoration: none;
    color: #789BA1;
}

.dashboard-nav li a.active {
    font-weight: 500;
    color: #305057;
}

.dashboard-nav li a.active:after {
    content: '';
    display: block;
    z-index: 1;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-bottom: 3px solid #305057;
}

.dashboard .h3 {
    margin: 0;
    padding: 1rem;
    border-top: 1px solid #d7e3e5;
    border-right: 1px solid #d7e3e5;
    border-left: 1px solid #d7e3e5;
    border-radius: 4px 4px 0 0;
}

.dashboard .h4 {
    margin-bottom: 0.5em;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.4;
}

.dashboard .row .box {
    height: 100%;
    padding: 0;
}

.dashboard .row .box > div {
    border-radius: 4px;
}

.dashboard .balance {
    position: relative;
    overflow: hidden;
    height: 180px !important;
    background-color: #00abe4;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

.dashboard .balance .egal {
    z-index: 2;
    display: block;
    z-index: 100;
    position: absolute;
    left: 50%;
    font-weight: 500;
    color: #305057;
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 43px;
    line-height: 2.6875rem;
}

@media (max-width: 400px) {
    .dashboard .balance .egal {
        -webkit-transform: translateX(50%);
                transform: translateX(50%);
    }
}

.dashboard .balance .egal:before {
    content: '=';
    display: block;
}

@media (max-width: 400px) {
    .dashboard .balance .egal:before {
        font-size: 24px;
        font-size: 1.5rem;
        line-height: 1.4;
    }
}

.dashboard .balance .points,
.dashboard .balance .dollars {
    position: relative;
}

.dashboard .balance .points::before,
.dashboard .balance .dollars::before {
    content: "";
    display: block;
    padding-top: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background-color: #039dd0;
    border-radius: 50%;
    width: 100%;
}

.dashboard .balance .points .text-wrapper,
.dashboard .balance .dollars .text-wrapper {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    z-index: 2;
    padding: 45px;
}

.dashboard .balance .points .text-wrapper p,
.dashboard .balance .dollars .text-wrapper p {
    margin: 0;
    white-space: nowrap;
}

.dashboard .balance .points .text-wrapper p:first-child,
.dashboard .balance .dollars .text-wrapper p:first-child {
    font-weight: 500;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 43px;
    line-height: 2.6875rem;
}

@media (max-width: 400px) {
    .dashboard .balance .points .text-wrapper p:first-child,
    .dashboard .balance .dollars .text-wrapper p:first-child {
        font-size: 22px;
        font-size: 1.375rem;
        line-height: 1.4;
    }
}

.dashboard .balance .points .text-wrapper p:last-child,
.dashboard .balance .dollars .text-wrapper p:last-child {
    text-transform: uppercase;
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 16px;
    line-height: 1rem;
}

.dashboard .balance .points {
    -webkit-transform: translateX(-15px);
            transform: translateX(-15px);
}

.dashboard .balance .points .text-wrapper {
    padding: 30px;
}

.dashboard .balance .dollars {
    -webkit-transform: translateX(15px);
            transform: translateX(15px);
}

.dashboard .earned,
.dashboard .spent {
    position: relative;
    overflow: hidden;
    height: calc(100% - 52px);
    min-height: 180px;
}

.dashboard .earned .circle,
.dashboard .spent .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.dashboard .earned .circle:before,
.dashboard .spent .circle:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding-bottom: 100%;
    border-radius: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

.dashboard .earned .text-wrapper,
.dashboard .spent .text-wrapper {
    position: relative;
    top: 50%;
    padding: 2em;
    white-space: nowrap;
    text-align: center;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

.dashboard .earned .text-wrapper p,
.dashboard .spent .text-wrapper p {
    margin: 0;
}

.dashboard .earned .text-wrapper p:first-child,
.dashboard .spent .text-wrapper p:first-child {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 43px;
    line-height: 2.6875rem;
}

.dashboard .earned .text-wrapper p:last-child,
.dashboard .spent .text-wrapper p:last-child {
    text-transform: uppercase;
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 16px;
    line-height: 1rem;
}

.dashboard .earned {
    background-color: #00ADBA;
}

.dashboard .earned .circle:before {
    background-color: #039eaa;
}

.dashboard .spent {
    background-color: #FF8F00;
}

.dashboard .spent .circle:before {
    background-color: #e88303;
}

.dashboard .cards-wrapper ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard .cards-wrapper li {
    margin: 0;
    background: radial-gradient(circle, #3c565a 0%, #1d1d1b 100%);
    background-position: top left;
    background-size: 200%;
}

.dashboard .cards-wrapper li:last-child {
    background: none;
}

.dashboard .cards-wrapper li .card-wrapper {
    min-height: 117px;
    padding: 2em;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-radius: 0 0 15px 15px;
    background: radial-gradient(circle, #3c565a 0%, #1d1d1b 100%);
    background-position: top left;
    background-size: 200%;
}

.dashboard .cards-wrapper li .card-wrapper.single-card {
    min-height: 234px;
}

.dashboard .cards-wrapper li p {
    margin: 0;
}

.dashboard .cards-wrapper li .cardholder {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 29px;
    line-height: 1.8125rem;
}

.dashboard .cards-wrapper li .cardnumber {
    color: #ddd;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 23px;
    line-height: 1.4375rem;
}

.dashboard .transactions-wrapper {
    height: calc(100% - 79px);
}

.dashboard .transactions-wrapper table {
    width: 100%;
}

.dashboard .transactions-wrapper table tr {
    height: 65px;
    border: 1px solid #d7e3e5;
}

.dashboard .transactions-wrapper table th {
    font-weight: 300;
}

.dashboard .transactions-wrapper table th,
.dashboard .transactions-wrapper table td {
    padding: 1rem 0.4rem;
    text-align: left;
    border: none;
}

.dashboard .transactions-wrapper table th:first-child,
.dashboard .transactions-wrapper table td:first-child {
    padding-left: 1rem;
}

.dashboard .transactions-wrapper table th:last-child,
.dashboard .transactions-wrapper table td:last-child {
    padding-right: 1rem;
    font-weight: 500;
    text-align: right;
}

.dashboard .transactions-wrapper table .cell-mp {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 20px;
    line-height: 1.25rem;
}

@media (max-width: 767px) {
    .dashboard .transactions-wrapper table .icon-wrapper {
        display: none;
    }
}

.dashboard .transactions-wrapper table .bonus {
    color: #00abe4;
}

.dashboard .page-content p {
    color: #ffffff;
}

.dashboard .page-content .btn {
    margin-top: 16px;
}

table.dataTable.collapsed > tbody > tr:not(.child) > td:first-child,
table.dataTable.collapsed > tbody > tr:not(.child) > th:first-child {
    position: relative;
    padding-left: 40px;
    cursor: pointer;
}

table.dataTable.collapsed > tbody > tr:not(.child) > td:first-child:before,
table.dataTable.collapsed > tbody > tr:not(.child) > th:first-child:before {
    content: '+';
    display: block;
    position: absolute;
    top: 50%;
    left: 10px;
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    font-family: 'Courier New', Courier, monospace;
    line-height: 18px;
    text-align: center;
    color: white;
    border-radius: 16px;
    background-color: #50AF47;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}

table.dataTable.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.collapsed > tbody > tr.parent > th:first-child:before {
    content: '-';
    background-color: #E30613;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background: none;
    position: relative;
}

table.dataTable thead span.sort-icon {
    display: inline-block;
    margin-left: 5px;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

table.dataTable thead .sorting span.sort-icon {
    background-image: url("/assets/img/sort_both.png");
}

table.dataTable thead .sorting_asc span.sort-icon {
    background-image: url("/assets/img/sort_asc.png");
}

table.dataTable thead .sorting_desc span.sort-icon {
    background-image: url("/assets/img/sort_desc.png");
}

table.dataTable thead .sorting_asc_disabled span.sort-icon {
    background-image: url("/assets/img/sort_asc_disabled.png");
}

table.dataTable thead .sorting_desc_disabled span.sort-icon {
    background-image: url("/assets/img/sort_desc_disabled.png");
}

table.dataTable.nowrap th, table.dataTable.nowrap td {
    white-space: nowrap;
}

table.dataTable ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

table.dataTable ul .dtr-title {
    font-weight: 500;
}

table.dataTable ul .dtr-title:after {
    content: ':';
    display: inline;
}

#transaction-table_length {
    display: inline-block;
    float: left;
}

#transaction-table_filter {
    display: none;
}

#transaction-table_info {
    margin: 15px 0 10px 0;
    text-align: left;
}

#transaction-table_paginate {
    text-align: left;
}

#transaction-table_paginate a {
    cursor: pointer;
}

#transaction-table_paginate .paginate_button,
#transaction-table_paginate .ellipsis {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    margin: 0 2px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #305057;
    border-radius: 50%;
    background-color: #d7e3e5;
}

#transaction-table_paginate .paginate_button.current,
#transaction-table_paginate .ellipsis.current {
    color: #ffffff;
    background-color: #789ba1;
}

#transaction-table_paginate .paginate_button.disabled,
#transaction-table_paginate .ellipsis.disabled {
    display: none;
}

#transaction-table_paginate .paginate_button.previous, #transaction-table_paginate .paginate_button.next,
#transaction-table_paginate .ellipsis.previous,
#transaction-table_paginate .ellipsis.next {
    width: auto;
    text-decoration: underline;
    background: none;
}

.echange-details {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-bottom: 169px;
    padding-top: 27px;
}

@media (max-width: 500px) {
    .echange-details {
        margin-bottom: 80px;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
}

.echange-qty {
    margin-right: 20px;
    font-weight: 500;
    text-align: center;
    color: #305057;
    font-size: 70px;
    font-size: 4.375rem;
    line-height: 83px;
    line-height: 5.1875rem;
}

@media (max-width: 400px) {
    .echange-qty {
        font-size: 60px;
        font-size: 3.75rem;
        line-height: 65px;
        line-height: 4.0625rem;
    }
}

.echange-qty div {
    font-weight: normal;
    text-transform: uppercase;
    color: #789BA1;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 24px;
    line-height: 1.5rem;
}

@media (max-width: 400px) {
    .echange-qty div {
        font-size: 16px;
        font-size: 1rem;
        line-height: 20px;
        line-height: 1.25rem;
    }
}

.echange-equal {
    font-weight: 500;
    color: #E24301;
    font-size: 70px;
    font-size: 4.375rem;
    line-height: 83px;
    line-height: 5.1875rem;
}

@media (max-width: 400px) {
    .echange-equal {
        font-size: 60px;
        font-size: 3.75rem;
        line-height: 65px;
        line-height: 4.0625rem;
    }
}

.echange-milles {
    margin-left: 32px;
    font-weight: 500;
    text-align: center;
    color: #305057;
    font-size: 70px;
    font-size: 4.375rem;
    line-height: 83px;
    line-height: 5.1875rem;
}

@media (max-width: 400px) {
    .echange-milles {
        font-size: 60px;
        font-size: 3.75rem;
        line-height: 65px;
        line-height: 4.0625rem;
        margin-left: 20px;
    }
}

.echange {
    position: relative;
}

.echange-image {
    position: absolute;
    top: -80px;
    right: 53px;
}

@media (max-width: 1023px) {
    .echange-image {
        right: -50px;
    }
}

@media (max-width: 767px) {
    .echange-image {
        top: -60px;
        right: -140px;
    }
}

@media (max-width: 600px) {
    .echange-image {
        top: -60px;
        -webkit-transform: scale(0.6);
                transform: scale(0.6);
    }
}

@media (max-width: 540px) {
    .echange-image {
        display: none;
    }
}

.faq-question {
    border: solid 1px #D7E3E5;
}

.faq-question:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.faq-question:last-child {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.faq-question + .faq-question {
    border-top: 0;
}

.faq-question .folder {
    border-bottom: solid 1px #D7E3E5;
}

.faq-question .folder:last-child {
    border-bottom: 0;
}

.faq-question .folder.is-active .folder-trigger:after {
    background: #305057 url("../svg/originals/icon-chevronUp.svg") center center no-repeat;
}

.faq-question .folder-trigger {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 24px 72px 24px 32px;
    font-weight: 300;
    text-align: left;
    border: 0;
    background: none;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 24px;
    line-height: 1.5rem;
}

@media (max-width: 767px) {
    .faq-question .folder-trigger {
        padding: 24px 60px 24px 24px;
        font-size: 16px;
        font-size: 1rem;
        line-height: 20px;
        line-height: 1.25rem;
    }
}

.faq-question .folder-trigger:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 24px);
    right: 12px;
    width: 48px;
    height: 48px;
    border-radius: 100px;
    background: #305057 url("../svg/originals/icon-chevronDown.svg") center center no-repeat;
}

@media (max-width: 767px) {
    .faq-question .folder-trigger:after {
        top: calc(50% - 18px);
        width: 36px;
        height: 36px;
    }
}

.faq-question .folder-content {
    display: none;
    padding: 0 32px 24px;
    font-size: 16px;
    font-size: 1rem;
    line-height: 30px;
    line-height: 1.875rem;
}

@media (max-width: 767px) {
    .faq-question .folder-content {
        padding: 0 24px 24px;
    }
}

.faq-group {
    margin-bottom: 56px;
}

.faq-group + h2 {
    margin-top: 56px;
}

@media (max-width: 767px) {
    .faq-group + h2 {
        margin-top: 32px;
    }
}

.faq-group + p {
    margin-top: 24px;
}

.faq-group-title {
    font-size: 46px;
    font-size: 2.875rem;
    line-height: 54px;
    line-height: 3.375rem;
}

@media (max-width: 767px) {
    .faq-group-title {
        margin-bottom: 1rem;
        font-size: 24px;
        font-size: 1.5rem;
        line-height: 32px;
        line-height: 2rem;
    }
}

.featured-contest {
    padding: 30px 32px 38px;
    border-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background: #ffffff;
}

@media (max-width: 767px) {
    .featured-contest {
        border-top-right-radius: 4px;
        border-bottom-left-radius: 0;
    }
}

.featured-contest-title {
    color: #3c3c3a;
    font-size: 54px;
    font-size: 3.375rem;
    line-height: 60px;
    line-height: 3.75rem;
}

@media (max-width: 1023px) {
    .featured-contest-title {
        font-size: 40px;
        font-size: 2.5rem;
        line-height: 48px;
        line-height: 3rem;
    }
}

.featured-contest-image {
    box-shadow: 0 2px 12px 0 rgba(48, 80, 87, 0.2);
}

.featured-contest-image img {
    border-radius: 4px;
    width: 100%;
    max-width: none;
}

@media (max-width: 767px) {
    .featured-contest-image img {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

.container-fluid,
.container {
    margin-right: auto;
    margin-left: auto;
}

.container-fluid {
    padding-right: 2rem;
    padding-left: 2rem;
}

.row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    box-sizing: border-box;
    margin-right: -1rem;
    margin-left: -1rem;
    -webkit-flex: 0 1 auto;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

.row.reverse {
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
}

.col.reverse {
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}

[class^="col-"] {
    margin-bottom: 2rem;
}

.row.no-col-margin [class^="col-"] {
    margin-bottom: 0;
}

.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
    box-sizing: border-box;
    padding-right: 1rem;
    padding-left: 1rem;
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}

.col-xs {
    max-width: 100%;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
}

.col-xs-1 {
    max-width: 8.33333333%;
    -webkit-flex-basis: 8.33333333%;
        -ms-flex-preferred-size: 8.33333333%;
            flex-basis: 8.33333333%;
}

.col-xs-2 {
    max-width: 16.66666667%;
    -webkit-flex-basis: 16.66666667%;
        -ms-flex-preferred-size: 16.66666667%;
            flex-basis: 16.66666667%;
}

.col-xs-3 {
    max-width: 25%;
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
}

.col-xs-4 {
    max-width: 33.33333333%;
    -webkit-flex-basis: 33.33333333%;
        -ms-flex-preferred-size: 33.33333333%;
            flex-basis: 33.33333333%;
}

.col-xs-5 {
    max-width: 41.66666667%;
    -webkit-flex-basis: 41.66666667%;
        -ms-flex-preferred-size: 41.66666667%;
            flex-basis: 41.66666667%;
}

.col-xs-6 {
    max-width: 50%;
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
}

.col-xs-7 {
    max-width: 58.33333333%;
    -webkit-flex-basis: 58.33333333%;
        -ms-flex-preferred-size: 58.33333333%;
            flex-basis: 58.33333333%;
}

.col-xs-8 {
    max-width: 66.66666667%;
    -webkit-flex-basis: 66.66666667%;
        -ms-flex-preferred-size: 66.66666667%;
            flex-basis: 66.66666667%;
}

.col-xs-9 {
    max-width: 75%;
    -webkit-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
            flex-basis: 75%;
}

.col-xs-10 {
    max-width: 83.33333333%;
    -webkit-flex-basis: 83.33333333%;
        -ms-flex-preferred-size: 83.33333333%;
            flex-basis: 83.33333333%;
}

.col-xs-11 {
    max-width: 91.66666667%;
    -webkit-flex-basis: 91.66666667%;
        -ms-flex-preferred-size: 91.66666667%;
            flex-basis: 91.66666667%;
}

.col-xs-12 {
    max-width: 100%;
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
}

.col-xs-offset-0 {
    margin-left: 0;
}

.col-xs-offset-1 {
    margin-left: 8.33333333%;
}

.col-xs-offset-2 {
    margin-left: 16.66666667%;
}

.col-xs-offset-3 {
    margin-left: 25%;
}

.col-xs-offset-4 {
    margin-left: 33.33333333%;
}

.col-xs-offset-5 {
    margin-left: 41.66666667%;
}

.col-xs-offset-6 {
    margin-left: 50%;
}

.col-xs-offset-7 {
    margin-left: 58.33333333%;
}

.col-xs-offset-8 {
    margin-left: 66.66666667%;
}

.col-xs-offset-9 {
    margin-left: 75%;
}

.col-xs-offset-10 {
    margin-left: 83.33333333%;
}

.col-xs-offset-11 {
    margin-left: 91.66666667%;
}

.start-xs {
    text-align: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

.center-xs {
    text-align: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.end-xs {
    text-align: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.top-xs {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.middle-xs {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

.bottom-xs {
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
}

.around-xs {
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
}

.between-xs {
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.first-xs {
    -webkit-order: -1;
        -ms-flex-order: -1;
            order: -1;
}

.last-xs {
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
}

@media only screen and (min-width: 48em) {
    .container {
        width: 49rem;
    }
    .col-sm,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-offset-0,
    .col-sm-offset-1,
    .col-sm-offset-2,
    .col-sm-offset-3,
    .col-sm-offset-4,
    .col-sm-offset-5,
    .col-sm-offset-6,
    .col-sm-offset-7,
    .col-sm-offset-8,
    .col-sm-offset-9,
    .col-sm-offset-10,
    .col-sm-offset-11,
    .col-sm-offset-12 {
        box-sizing: border-box;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }
    .col-sm {
        max-width: 100%;
        -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        -webkit-flex-basis: 0;
            -ms-flex-preferred-size: 0;
                flex-basis: 0;
    }
    .col-sm-1 {
        max-width: 8.33333333%;
        -webkit-flex-basis: 8.33333333%;
            -ms-flex-preferred-size: 8.33333333%;
                flex-basis: 8.33333333%;
    }
    .col-sm-2 {
        max-width: 16.66666667%;
        -webkit-flex-basis: 16.66666667%;
            -ms-flex-preferred-size: 16.66666667%;
                flex-basis: 16.66666667%;
    }
    .col-sm-3 {
        max-width: 25%;
        -webkit-flex-basis: 25%;
            -ms-flex-preferred-size: 25%;
                flex-basis: 25%;
    }
    .col-sm-4 {
        max-width: 33.33333333%;
        -webkit-flex-basis: 33.33333333%;
            -ms-flex-preferred-size: 33.33333333%;
                flex-basis: 33.33333333%;
    }
    .col-sm-5 {
        max-width: 41.66666667%;
        -webkit-flex-basis: 41.66666667%;
            -ms-flex-preferred-size: 41.66666667%;
                flex-basis: 41.66666667%;
    }
    .col-sm-6 {
        max-width: 50%;
        -webkit-flex-basis: 50%;
            -ms-flex-preferred-size: 50%;
                flex-basis: 50%;
    }
    .col-sm-7 {
        max-width: 58.33333333%;
        -webkit-flex-basis: 58.33333333%;
            -ms-flex-preferred-size: 58.33333333%;
                flex-basis: 58.33333333%;
    }
    .col-sm-8 {
        max-width: 66.66666667%;
        -webkit-flex-basis: 66.66666667%;
            -ms-flex-preferred-size: 66.66666667%;
                flex-basis: 66.66666667%;
    }
    .col-sm-9 {
        max-width: 75%;
        -webkit-flex-basis: 75%;
            -ms-flex-preferred-size: 75%;
                flex-basis: 75%;
    }
    .col-sm-10 {
        max-width: 83.33333333%;
        -webkit-flex-basis: 83.33333333%;
            -ms-flex-preferred-size: 83.33333333%;
                flex-basis: 83.33333333%;
    }
    .col-sm-11 {
        max-width: 91.66666667%;
        -webkit-flex-basis: 91.66666667%;
            -ms-flex-preferred-size: 91.66666667%;
                flex-basis: 91.66666667%;
    }
    .col-sm-12 {
        max-width: 100%;
        -webkit-flex-basis: 100%;
            -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
    }
    .col-sm-offset-0 {
        margin-left: 0;
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-sm-offset-3 {
        margin-left: 25%;
    }
    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-sm-offset-6 {
        margin-left: 50%;
    }
    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-sm-offset-9 {
        margin-left: 75%;
    }
    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }
    .start-sm {
        text-align: start;
        -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }
    .center-sm {
        text-align: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .end-sm {
        text-align: end;
        -webkit-justify-content: flex-end;
            -ms-flex-pack: end;
                justify-content: flex-end;
    }
    .top-sm {
        -webkit-align-items: flex-start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .middle-sm {
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .bottom-sm {
        -webkit-align-items: flex-end;
            -ms-flex-align: end;
                align-items: flex-end;
    }
    .around-sm {
        -webkit-justify-content: space-around;
            -ms-flex-pack: distribute;
                justify-content: space-around;
    }
    .between-sm {
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .first-sm {
        -webkit-order: -1;
            -ms-flex-order: -1;
                order: -1;
    }
    .last-sm {
        -webkit-order: 1;
            -ms-flex-order: 1;
                order: 1;
    }
}

@media only screen and (min-width: 64em) {
    .container {
        width: 65rem;
    }
    .col-md,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-offset-0,
    .col-md-offset-1,
    .col-md-offset-2,
    .col-md-offset-3,
    .col-md-offset-4,
    .col-md-offset-5,
    .col-md-offset-6,
    .col-md-offset-7,
    .col-md-offset-8,
    .col-md-offset-9,
    .col-md-offset-10,
    .col-md-offset-11,
    .col-md-offset-12 {
        box-sizing: border-box;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }
    .col-md {
        max-width: 100%;
        -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        -webkit-flex-basis: 0;
            -ms-flex-preferred-size: 0;
                flex-basis: 0;
    }
    .col-md-1 {
        max-width: 8.33333333%;
        -webkit-flex-basis: 8.33333333%;
            -ms-flex-preferred-size: 8.33333333%;
                flex-basis: 8.33333333%;
    }
    .col-md-2 {
        max-width: 16.66666667%;
        -webkit-flex-basis: 16.66666667%;
            -ms-flex-preferred-size: 16.66666667%;
                flex-basis: 16.66666667%;
    }
    .col-md-3 {
        max-width: 25%;
        -webkit-flex-basis: 25%;
            -ms-flex-preferred-size: 25%;
                flex-basis: 25%;
    }
    .col-md-4 {
        max-width: 33.33333333%;
        -webkit-flex-basis: 33.33333333%;
            -ms-flex-preferred-size: 33.33333333%;
                flex-basis: 33.33333333%;
    }
    .col-md-5 {
        max-width: 41.66666667%;
        -webkit-flex-basis: 41.66666667%;
            -ms-flex-preferred-size: 41.66666667%;
                flex-basis: 41.66666667%;
    }
    .col-md-6 {
        max-width: 50%;
        -webkit-flex-basis: 50%;
            -ms-flex-preferred-size: 50%;
                flex-basis: 50%;
    }
    .col-md-7 {
        max-width: 58.33333333%;
        -webkit-flex-basis: 58.33333333%;
            -ms-flex-preferred-size: 58.33333333%;
                flex-basis: 58.33333333%;
    }
    .col-md-8 {
        max-width: 66.66666667%;
        -webkit-flex-basis: 66.66666667%;
            -ms-flex-preferred-size: 66.66666667%;
                flex-basis: 66.66666667%;
    }
    .col-md-9 {
        max-width: 75%;
        -webkit-flex-basis: 75%;
            -ms-flex-preferred-size: 75%;
                flex-basis: 75%;
    }
    .col-md-10 {
        max-width: 83.33333333%;
        -webkit-flex-basis: 83.33333333%;
            -ms-flex-preferred-size: 83.33333333%;
                flex-basis: 83.33333333%;
    }
    .col-md-11 {
        max-width: 91.66666667%;
        -webkit-flex-basis: 91.66666667%;
            -ms-flex-preferred-size: 91.66666667%;
                flex-basis: 91.66666667%;
    }
    .col-md-12 {
        max-width: 100%;
        -webkit-flex-basis: 100%;
            -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
    }
    .col-md-offset-0 {
        margin-left: 0;
    }
    .col-md-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-md-offset-3 {
        margin-left: 25%;
    }
    .col-md-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-md-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-md-offset-6 {
        margin-left: 50%;
    }
    .col-md-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-md-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-md-offset-9 {
        margin-left: 75%;
    }
    .col-md-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-md-offset-11 {
        margin-left: 91.66666667%;
    }
    .start-md {
        text-align: start;
        -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }
    .center-md {
        text-align: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .end-md {
        text-align: end;
        -webkit-justify-content: flex-end;
            -ms-flex-pack: end;
                justify-content: flex-end;
    }
    .top-md {
        -webkit-align-items: flex-start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .middle-md {
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .bottom-md {
        -webkit-align-items: flex-end;
            -ms-flex-align: end;
                align-items: flex-end;
    }
    .around-md {
        -webkit-justify-content: space-around;
            -ms-flex-pack: distribute;
                justify-content: space-around;
    }
    .between-md {
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .first-md {
        -webkit-order: -1;
            -ms-flex-order: -1;
                order: -1;
    }
    .last-md {
        -webkit-order: 1;
            -ms-flex-order: 1;
                order: 1;
    }
}

@media only screen and (min-width: 75em) {
    .container {
        width: 76rem;
    }
    .col-lg,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-offset-0,
    .col-lg-offset-1,
    .col-lg-offset-2,
    .col-lg-offset-3,
    .col-lg-offset-4,
    .col-lg-offset-5,
    .col-lg-offset-6,
    .col-lg-offset-7,
    .col-lg-offset-8,
    .col-lg-offset-9,
    .col-lg-offset-10,
    .col-lg-offset-11,
    .col-lg-offset-12 {
        box-sizing: border-box;
        padding-right: 1rem;
        padding-left: 1rem;
        -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }
    .col-lg {
        max-width: 100%;
        -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        -webkit-flex-basis: 0;
            -ms-flex-preferred-size: 0;
                flex-basis: 0;
    }
    .col-lg-1 {
        max-width: 8.33333333%;
        -webkit-flex-basis: 8.33333333%;
            -ms-flex-preferred-size: 8.33333333%;
                flex-basis: 8.33333333%;
    }
    .col-lg-2 {
        max-width: 16.66666667%;
        -webkit-flex-basis: 16.66666667%;
            -ms-flex-preferred-size: 16.66666667%;
                flex-basis: 16.66666667%;
    }
    .col-lg-3 {
        max-width: 25%;
        -webkit-flex-basis: 25%;
            -ms-flex-preferred-size: 25%;
                flex-basis: 25%;
    }
    .col-lg-4 {
        max-width: 33.33333333%;
        -webkit-flex-basis: 33.33333333%;
            -ms-flex-preferred-size: 33.33333333%;
                flex-basis: 33.33333333%;
    }
    .col-lg-5 {
        max-width: 41.66666667%;
        -webkit-flex-basis: 41.66666667%;
            -ms-flex-preferred-size: 41.66666667%;
                flex-basis: 41.66666667%;
    }
    .col-lg-6 {
        max-width: 50%;
        -webkit-flex-basis: 50%;
            -ms-flex-preferred-size: 50%;
                flex-basis: 50%;
    }
    .col-lg-7 {
        max-width: 58.33333333%;
        -webkit-flex-basis: 58.33333333%;
            -ms-flex-preferred-size: 58.33333333%;
                flex-basis: 58.33333333%;
    }
    .col-lg-8 {
        max-width: 66.66666667%;
        -webkit-flex-basis: 66.66666667%;
            -ms-flex-preferred-size: 66.66666667%;
                flex-basis: 66.66666667%;
    }
    .col-lg-9 {
        max-width: 75%;
        -webkit-flex-basis: 75%;
            -ms-flex-preferred-size: 75%;
                flex-basis: 75%;
    }
    .col-lg-10 {
        max-width: 83.33333333%;
        -webkit-flex-basis: 83.33333333%;
            -ms-flex-preferred-size: 83.33333333%;
                flex-basis: 83.33333333%;
    }
    .col-lg-11 {
        max-width: 91.66666667%;
        -webkit-flex-basis: 91.66666667%;
            -ms-flex-preferred-size: 91.66666667%;
                flex-basis: 91.66666667%;
    }
    .col-lg-12 {
        max-width: 100%;
        -webkit-flex-basis: 100%;
            -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
    }
    .col-lg-offset-0 {
        margin-left: 0;
    }
    .col-lg-offset-1 {
        margin-left: 8.33333333%;
    }
    .col-lg-offset-2 {
        margin-left: 16.66666667%;
    }
    .col-lg-offset-3 {
        margin-left: 25%;
    }
    .col-lg-offset-4 {
        margin-left: 33.33333333%;
    }
    .col-lg-offset-5 {
        margin-left: 41.66666667%;
    }
    .col-lg-offset-6 {
        margin-left: 50%;
    }
    .col-lg-offset-7 {
        margin-left: 58.33333333%;
    }
    .col-lg-offset-8 {
        margin-left: 66.66666667%;
    }
    .col-lg-offset-9 {
        margin-left: 75%;
    }
    .col-lg-offset-10 {
        margin-left: 83.33333333%;
    }
    .col-lg-offset-11 {
        margin-left: 91.66666667%;
    }
    .start-lg {
        text-align: start;
        -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }
    .center-lg {
        text-align: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .end-lg {
        text-align: end;
        -webkit-justify-content: flex-end;
            -ms-flex-pack: end;
                justify-content: flex-end;
    }
    .top-lg {
        -webkit-align-items: flex-start;
            -ms-flex-align: start;
                align-items: flex-start;
    }
    .middle-lg {
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }
    .bottom-lg {
        -webkit-align-items: flex-end;
            -ms-flex-align: end;
                align-items: flex-end;
    }
    .around-lg {
        -webkit-justify-content: space-around;
            -ms-flex-pack: distribute;
                justify-content: space-around;
    }
    .between-lg {
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .first-lg {
        -webkit-order: -1;
            -ms-flex-order: -1;
                order: -1;
    }
    .last-lg {
        -webkit-order: 1;
            -ms-flex-order: 1;
                order: 1;
    }
}

.form-home-registration {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
}

.form-home-registration .radio-group {
    width: 20%;
    min-width: 117px;
    margin-right: 16px;
    margin-bottom: 32px;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.form-home-registration .radio-field {
    background: #ffffff;
}

.form-home-registration .name-group {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

@media (max-width: 1023px) {
    .form-home-registration .name-group {
        width: 100%;
        -webkit-flex-flow: row wrap;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
    }
}

.form-home-registration .field {
    margin-right: 16px;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

@media (max-width: 1023px) {
    .form-home-registration .field {
        width: 100%;
        margin-right: 0;
        -webkit-flex: auto;
            -ms-flex: auto;
                flex: auto;
    }
}

.form-home-registration .field + .field {
    margin: 0;
}

.form-home-registration .field + .field:last-child {
    margin-bottom: 32px;
}

.form-home-registration .text-field {
    margin-bottom: 32px;
}

.form-home-registration .text-field:last-child {
    margin-bottom: 32px;
}

.form-home-registration .text-field label {
    color: #ffffff;
}

.form-home-registration .text-field input {
    color: #1d1d1b;
    background: #ffffff;
}

.form-home-registration .text-field input::-webkit-input-placeholder {
    color: #789BA1;
}

.form-home-registration .text-field input:-ms-input-placeholder {
    color: #789BA1;
}

.form-home-registration .text-field input::placeholder {
    color: #789BA1;
}

.form-home-registration .form-actions {
    width: 100%;
    margin-top: 0;
}

.form {
    padding: 8px 0 40px;
}

.field {
    position: relative;
}

.field + .field {
    margin: 1em 0;
}

.field + .field:last-child {
    margin-bottom: 0;
}

#add_number {
    margin-top: 1em;
}

fieldset {
    padding: 0;
    border: 0;
}

fieldset .error-message-explanation span {
    top: 0;
    padding: 3px 8px 2px;
}

label {
    display: block;
    margin-bottom: 4px;
}

label.err {
    color: red;
}

label.err:empty {
    display: none;
}

input,
textarea {
    display: block;
    z-index: 1;
    position: relative;
    padding: 13px 16px 11px;
    color: #1d1d1b;
    border: 1px solid #D7E3E5;
    border-radius: 2px;
    background: none;
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
    line-height: 1.25rem;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #789BA1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #789BA1;
}

input::placeholder,
textarea::placeholder {
    color: #789BA1;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
}

.select-wrapper {
    display: block;
    z-index: 1;
    position: relative;
    padding: 11px 16px 10px;
    color: #1d1d1b;
    border: 1px solid #D7E3E5;
    border-radius: 2px;
    background: none;
}

.select-wrapper select {
    width: 100%;
}

select {
    color: #1d1d1b;
    border: 0;
    background: none;
    font-size: 16px;
    font-size: 1rem;
    line-height: 20px;
    line-height: 1.25rem;
}

textarea {
    width: 100%;
    min-height: 150px;
}

input[type="file"] {
    display: block;
    font-size: 16px;
    font-size: 1rem;
    line-height: 16px;
    line-height: 1rem;
}

.radio-group .radio-field + .radio-field {
    margin-top: 8px;
}

.radio-group.horizontal {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.radio-group.horizontal .radio-field {
    width: auto;
}

.radio-group.horizontal .radio-field + .radio-field {
    margin-top: 0;
    margin-left: 12px;
}

.radio-field,
.checkbox-field {
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0 0 0 32px;
    border: 1px solid #D7E3E5;
    border-radius: 2px;
}

.radio-field label,
.checkbox-field label {
    display: inline-block;
    margin: 0;
    padding: 5px 8px;
    border-left: 1px solid #D7E3E5;
}

.radio-field input,
.checkbox-field input {
    position: absolute;
    top: 8px;
    left: 9px;
}

.radio-field + .checkbox-field,
.checkbox-field + .checkbox-field {
    margin-top: 19px;
}

.date-input {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.date-input .date-day,
.date-input .date-month {
    margin-right: 8px;
}

.date-input > input {
    min-width: 0;
}

.phone-field {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

.phone-field .phone-input {
    width: 65%;
    margin-right: 8px;
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;
}

.phone-field .phone-type-input {
    width: 32%;
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;
}

.phone-field .phone-type-input .select-wrapper {
    padding: 11px 16px 10px;
}

.phone-field .phone-type-input select {
    width: 100%;
}

.phone-field .phone-delete .btn {
    display: block;
    position: absolute;
    top: 34px;
    right: -24px;
    padding: 0;
    background: none;
    cursor: pointer;
}

.phone-field:first-child .phone-delete {
    display: none;
}

.phone-field p:last-child {
    width: 100%;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.insurance-field {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 16px;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

.insurance-field-title {
    min-width: 160px;
    margin-right: 16px;
    margin-bottom: 4px;
}

@media (max-width: 600px) {
    .insurance-field-title {
        width: 100%;
        margin-bottom: 16px;
    }
}

.insurance-field-date {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-right: 16px;
    margin-left: 16px;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

@media (max-width: 600px) {
    .insurance-field-date {
        margin-bottom: 16px;
        margin-left: 0;
    }
}

.insurance-field-date label {
    margin-right: 8px;
}

.insurance-field-date input {
    max-width: 100px;
}

.format,
.required {
    font-size: 0.8em;
    opacity: 0.6;
}

.format {
    display: block;
    padding-bottom: 5px;
    font-style: italic;
}

.form-actions {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.form-actions .btn + .btn {
    margin-left: 12px;
}

.errors p {
    font-weight: bold;
}

.errors ul {
    margin-bottom: 20px;
    padding: 0;
    list-style-type: none;
}

.errors ul li:before {
    display: none;
}

.errors a {
    text-decoration: none;
    color: #ca0003;
}

.errors a:before {
    content: "- ";
}

.errors a:hover {
    text-decoration: underline;
}

.field.is-error input[type="text"],
.field.is-error input[type="file"],
.field.is-error .radio-field-wrapper,
.field.is-error .checkbox-field-wrapper,
.field.is-error textarea,
.field.is-error select {
    border: 1px solid #ca0003;
    border-top-left-radius: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.error-message {
    color: #ca0003;
}

.fields .error-message-explanation {
    display: block;
}

.fields .error-message-explanation span {
    display: inline-block;
    position: relative;
    padding: 3px 8px 5px;
    font-size: 0.9em;
    color: #fff;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: #ca0003;
}

.fields .error-message-explanation + .error-message-explanation span {
    border-top-left-radius: 0;
}

.lbo-aif {
    display: block;
    position: relative;
    padding: 8px 0 2px 25px;
}

.lbo-aif .btn-supprimer {
    display: block;
    position: absolute;
    top: 60%;
    left: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #1d1d1b;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.lbo-aif .btn-supprimer:before {
    content: "x";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 14px;
    line-height: 0.875rem;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.alert.alert-danger {
    color: red;
}

.alert.alert-danger .checkbox-field,
.alert.alert-danger .radio-field {
    border: 1px solid red;
}

.alert.alert-danger input[type="email"],
.alert.alert-danger input[type="password"],
.alert.alert-danger input[type="text"] {
    border: 1px solid red;
}

.alert.alert-danger .select-wrapper {
    border-color: red;
}

p.alert.alert-danger {
    line-height: 1.5rem;
}

.logo {
    margin-right: 5%;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

@media (max-width: 767px) {
    .logo {
        width: 55px;
        height: 37px;
    }
}

.logo-footer {
    width: 100%;
    max-width: 127px;
    margin-right: 48px;
}

@media (max-width: 767px) {
    .logo-footer {
        max-width: none;
        margin-right: 0;
        margin-bottom: 32px;
    }
}

.member-register-card .page-content {
    margin-top: 4em;
}

.member-register-card .alert-wrapper {
    border-radius: 4px;
}

.message {
    width: 100%;
    margin-bottom: 16px;
    padding: 21px 30px;
    border: solid 1px #3C9E31;
    border-radius: 4px;
    background: #D0FFCB;
}

.message p {
    margin-bottom: 0;
    font-weight: normal;
    color: #3c3c3a;
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.message.warning {
    border: solid 1px #ff3b43;
    background: #ffe2e4;
}

.nav-footer {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

@media (max-width: 767px) {
    .nav-footer {
        margin-bottom: 32px;
        -webkit-flex-flow: row wrap;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
    }
}

@media (max-width: 767px) {
    .nav-footer .nav-footer-primary {
        margin-bottom: 16px;
    }
}

.nav-footer .nav-footer-primary,
.nav-footer .nav-footer-secondary {
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: 50%;
    padding: 0 16px;
}

@media (max-width: 767px) {
    .nav-footer .nav-footer-primary,
    .nav-footer .nav-footer-secondary {
        width: 100%;
        padding: 0;
    }
}

.nav-footer ul {
    margin: 0 0 16px;
    padding: 0;
}

.nav-footer ul:last-child {
    margin-bottom: 0;
}

.nav-footer li {
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.nav-footer li:last-child {
    margin-bottom: 0;
}

.nav-footer a {
    text-decoration: none;
    color: #305057;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 23px;
    line-height: 1.4375rem;
}

.nav-footer a:hover {
    text-decoration: underline;
}

.nav-icons {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    margin-bottom: 64px;
    padding: 0 16px;
    border: solid 1px #D7E3E5;
    border-radius: 4px;
    background: #ffffff;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

@media (max-width: 1023px) {
    .nav-icons {
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
}

@media (max-width: 600px) {
    .nav-icons {
        padding: 16px 0;
    }
}

.nav-icon {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 32px 16px 28px;
    text-decoration: none;
    -webkit-flex-flow: column wrap;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    width: calc(100%/6);
}

.nav-icon .icon-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 90px;
    margin-bottom: 20px;
    -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

@media (max-width: 600px) {
    .nav-icon .icon-wrapper {
        margin-bottom: 8px;
    }
}

@media (max-width: 1023px) {
    .nav-icon {
        width: calc(100%/3);
    }
}

@media (max-width: 600px) {
    .nav-icon {
        width: 50%;
        padding: 0;
    }
}

.nav-icon-label {
    width: 100%;
    text-align: center;
    color: #1d1d1b;
    font-size: 16px;
    font-size: 1rem;
    line-height: 19px;
    line-height: 1.1875rem;
}

.nav-primary {
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

@media (max-width: 1280px) {
    .nav-primary {
        width: calc(95% - 110px);
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-order: 2;
            -ms-flex-order: 2;
                order: 2;
    }
}

@media (max-width: 767px) {
    .nav-primary {
        -webkit-flex: 1;
            -ms-flex: 1;
                flex: 1;
        -webkit-flex-basis: 100%;
            -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
        margin-top: 0;
    }
}

.nav-primary ul {
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

@media (max-width: 767px) {
    .nav-primary ul {
        margin-top: 20px;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
}

.nav-primary li {
    padding: 2px 12px;
}

@media (max-width: 767px) {
    .nav-primary li {
        text-align: center;
        margin-right: 10px;
        padding: 2px 5px;
    }
}

.nav-primary li:last-child {
    margin-right: 0;
}

.nav-primary li.active {
    border: solid 1px rgba(120, 155, 161, 0.7);
    border-radius: 4px;
}

.nav-primary a {
    font-weight: 300;
    color: #ffffff;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 25px;
    line-height: 1.5625rem;
}

@media (max-width: 767px) {
    .nav-primary a {
        font-size: 16px;
        font-size: 1rem;
        line-height: 22px;
        line-height: 1.375rem;
    }
}

.nav-primary a:hover {
    color: #afc7cb;
}

.nav-secondary {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

@media (max-width: 1280px) {
    .nav-secondary {
        width: calc(95% - 110px);
        -webkit-order: 1;
            -ms-flex-order: 1;
                order: 1;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
}

@media (max-width: 767px) {
    .nav-secondary {
        width: calc(95% - 55px);
    }
    .nav-secondary .toplevel {
        -webkit-order: 2;
            -ms-flex-order: 2;
                order: 2;
    }
    .nav-secondary .btn-group {
        -webkit-order: 1;
            -ms-flex-order: 1;
                order: 1;
    }
    .nav-secondary .btn-group a {
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        font-size: 12px;
        font-size: 0.75rem;
        line-height: 14px;
        line-height: 0.875rem;
    }
}

.nav-secondary ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

@media (max-width: 767px) {
    .nav-secondary ul {
        display: none;
        position: absolute;
        background: #ffffff;
    }
    .nav-secondary ul a {
        color: #1d1d1b;
    }
}

.nav-secondary li {
    margin-right: 10px;
    padding: 6px 11px;
}

.nav-secondary li.active {
    border: solid 1px rgba(120, 155, 161, 0.7);
    border-radius: 4px;
}

.nav-secondary a {
    font-weight: normal;
    color: #e9e9e9;
    font-size: 16px;
    font-size: 1rem;
    line-height: 19px;
    line-height: 1.1875rem;
}

.nav-secondary a.btn {
    color: #ffffff;
}

.nav-secondary a:hover {
    color: #afc7cb;
}

.nav-secondary .burger-wrapper {
    position: relative;
    margin-left: 10px;
}

@media (max-width: 1280px) {
    .nav-secondary .burger-wrapper {
        margin-left: 0;
        -webkit-order: 0;
            -ms-flex-order: 0;
                order: 0;
    }
}

@media (max-width: 767px) {
    .nav-secondary .burger-wrapper {
        margin-left: 10px;
        -webkit-order: 2;
            -ms-flex-order: 2;
                order: 2;
    }
}

.nav-secondary .hamburger {
    display: none;
}

@media (max-width: 767px) {
    .nav-secondary .hamburger {
        display: block;
        position: relative;
        width: 29px;
        height: 25px;
        cursor: pointer;
    }
    .nav-secondary .hamburger span {
        display: block;
        position: absolute;
        right: 0;
        width: 100%;
        height: 2px;
        opacity: 1;
        background: #ffffff none repeat scroll 0 0;
        transition: all 0.25s ease-in-out 0s;
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    .nav-secondary .hamburger span:nth-child(1) {
        margin-top: 0;
    }
    .nav-secondary .hamburger span:nth-child(2) {
        margin-top: 11px;
        margin-right: 0;
    }
    .nav-secondary .hamburger span:nth-child(3) {
        margin-top: 22px;
    }
    .nav-secondary .hamburger.opened span:nth-child(1) {
        margin-top: 11px;
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
    }
    .nav-secondary .hamburger.opened span:nth-child(2) {
        right: -75px;
        opacity: 0;
    }
    .nav-secondary .hamburger.opened span:nth-child(3) {
        margin-top: 12px;
        -webkit-transform: rotate(-135deg);
                transform: rotate(-135deg);
    }
    .nav-secondary .hamburger.opened ~ ul {
        display: block;
        top: 30px;
        right: 0;
        border-radius: 4px;
    }
    .nav-secondary .hamburger.opened ~ ul li {
        margin: 0;
        padding: 4px 12px;
    }
}

.nav-social-block {
    margin-left: auto;
}

@media (max-width: 767px) {
    .nav-social-block {
        width: 100%;
    }
}

.nav-social-label {
    margin-top: 0;
    font-weight: 500;
    color: #305057;
    font-size: 16px;
    font-size: 1rem;
    line-height: 23px;
    line-height: 1.4375rem;
}

.nav-social {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-social li {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    margin: 0 10px 0 0;
    padding: 0;
}

.nav-social li:last-child {
    margin-right: 0;
}

.nav-social a:hover {
    opacity: 0.8;
}

.nav-main .toplevel {
    font-size: 0;
}

.nav-main .toplevel-item {
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    margin: 0;
    font-size: 1rem;
}

.nav-main .toplevel-item:last-child .sublevel {
    right: 0;
    left: auto;
}

.nav-main .toplevel-item:hover .sublevel {
    display: block;
}

.nav-main a {
    display: block;
    padding: 10px 15px;
    background-color: #efefef;
}

.nav-main a:hover {
    text-decoration: none;
    background-color: #d6d6d6;
}

.nav-main .sublevel {
    display: none;
    z-index: 1;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
}

.nav-main .sublevel .sublevel-item {
    display: block;
    margin: 0;
}

.nav-main .sublevel .sublevel-item-wrap > a {
    white-space: nowrap;
}

.nav-main.is-fullwidth .toplevel-item {
    display: table-cell;
    width: 1304px;
}

section.details {
    background: #f3f7f7;
}

section.details h2 {
    text-align: center;
}

section.details ul {
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

section.details ul li {
    display: block;
    float: left;
    box-sizing: border-box;
    width: calc(100% / 3);
    margin: 0;
    padding: 0 2em;
    text-align: center;
}

@media screen and (max-width: 766px) {
    section.details ul > li {
        float: none;
        width: 100%;
    }
}

section.details ul .mini-eko {
    width: 50px;
    margin-bottom: 20px;
}

section.details ul h4 {
    font-size: 2em;
    line-height: 1.5;
    text-transform: none;
}

section.details ul h5 {
    margin: 1em auto 10px;
    font-size: 1rem;
    text-transform: none;
}

section.details ul ul li {
    float: none;
    width: 100%;
}

section.details ul ul li p {
    width: 500px;
    margin: 0;
    margin: 0 0 0 -145px;
    padding-bottom: 20px;
    font-size: 3.25em;
    line-height: 1;
    text-align: center;
    color: #e24301;
}

@media screen and (min-width: 447px) and (max-width: 766px) {
    section.details ul ul li p {
        width: 100%;
        margin: 0;
    }
}

section.details ul ul li p span {
    display: inline-block;
    padding: 0 10px;
}

section.details ul ul li p strong {
    display: inline-block;
    position: relative;
    padding: 0 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #305057;
}

section.details ul ul li p strong em {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
    font-family: "Geomanist Regular", Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
}

section.nouveau {
    background: #D7E3E5;
    padding: 2em 1em;
}

section.nouveau h2 {
    text-transform: none;
    font-size: 2em;
    text-align: center;
    margin: 1rem 0 1em 0;
}

section.nouveau p {
    max-width: 500px;
    margin: 0 auto 1em auto;
    text-align: center;
}

.offers .page-content {
    padding-top: 80px;
}

l-footer.page-content {
    padding-bottom: 80px;
}

l-footer.page-content.over-header {
    margin-top: -100px;
}

.barcode {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 100vh;
}

.barcode header {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.barcode #barcode {
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.barcode footer {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.page-header {
    padding: 40px 0 140px;
    background: #789BA1 url("../svg/originals/back-entete.svg") top left no-repeat;
}

.page-header h1 {
    margin-bottom: 0;
    font-weight: normal;
    color: #ffffff;
    font-size: 72px;
    font-size: 4.5rem;
    line-height: 86px;
    line-height: 5.375rem;
}

@media (max-width: 767px) {
    .page-header h1 {
        font-size: 48px;
        font-size: 3rem;
        line-height: 58px;
        line-height: 3.625rem;
    }
}

.page-header.home-header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 660px;
    padding: 0;
    background: #789BA1;
}

@media (max-width: 1023px) {
    .page-header.home-header {
        background-position: 50%;
    }
}

.page-header.home-header .l-page-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 40px;
    -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.ie .page-header.home-header {
    height: 660px;
}

.page-header.home-header h1 {
    max-width: 100%;
    margin-bottom: 16px;
    font-weight: 300;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 6px 12px rgba(0, 0, 0, 0.24);
    font-size: 114px;
    font-size: 7.125rem;
    line-height: 138px;
    line-height: 8.625rem;
}

@media (max-width: 1023px) {
    .page-header.home-header h1 {
        font-size: 96px;
        font-size: 6rem;
        line-height: 96px;
        line-height: 6rem;
    }
}

@media (max-width: 767px) {
    .page-header.home-header h1 {
        font-size: 72px;
        font-size: 4.5rem;
        line-height: 72px;
        line-height: 4.5rem;
    }
}

.page-header.home-header.bg0 {
    background: url("/assets/img/hero-banner-1.jpg") top center no-repeat;
    background-size: cover;
}

.page-header.home-header.bg1 {
    background: url("/assets/img/hero-banner-2.jpg") top center no-repeat;
    background-size: cover;
}

.page-header.has-bg-image {
    background: url("/assets/img/Offres&Concours_header_Accueil.jpg") center center no-repeat;
    background-size: cover;
}

.page-header.registration {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 82px 0 35px;
    background: #789BA1 url("/assets/img/devenir-membre.png") top right no-repeat;
    background-size: contain;
}

.page-header.registration .l-page-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.page-header.registration h1 {
    max-width: 740px;
    margin-bottom: 0;
    font-weight: 200;
    color: #ffffff;
    font-size: 42px;
    font-size: 2.625rem;
    line-height: 48px;
    line-height: 3rem;
}

@media (max-width: 767px) {
    .page-header.registration h1 {
        font-size: 36px;
        font-size: 2.25rem;
        line-height: 42px;
        line-height: 2.625rem;
    }
}

.page-header.registration h1 strong {
    color: inherit;
}

.pagination .pagination-element {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

.pagination .pagination-element + .pagination-element {
    margin-left: 10px;
}

.pagination a {
    display: inline-block;
    vertical-align: middle;
}

.partner-logo {
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0;
    padding-bottom: 30px;
}

.partners-search {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 21px 32px;
    border: solid 1px #D7E3E5;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: #ffffff;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

@media (max-width: 767px) {
    .partners-search {
        padding: 21px 16px;
    }
}

@media (max-width: 400px) {
    .partners-search {
        padding: 21px 10px;
    }
}

.partners-search .btn-geo {
    margin-right: 12px;
}

@media (max-width: 767px) {
    .partners-search .btn-geo {
        margin: 0;
    }
}

.partners-search .btn-group {
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.partners-search .btn-group .btn {
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.partners-search .select-wrapper {
    min-width: 215px;
    max-width: 286px;
    margin-right: 12px;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

@media (max-width: 767px) {
    .partners-search .select-wrapper {
        max-width: none;
        margin-right: 0;
        margin-bottom: 5px;
        -webkit-flex-basis: 100%;
            -ms-flex-preferred-size: 100%;
                flex-basis: 100%;
    }
}

.partners-search .postalcode-input {
    width: 90px;
    margin-right: 12px;
}

@media (max-width: 767px) {
    .partners-search .postalcode-input {
        width: calc(100% - 57px);
        margin-bottom: 5px;
    }
}

.partners-search .btn-refresh {
    margin-left: 0;
    margin-right: 10px;
    padding: 13px 24px 12px;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 20px;
    line-height: 1.25rem;
}

.partners-map .map {
    position: relative;
}

.partners-map .map:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 62.52019%;
}

@media (max-width: 767px) {
    .partners-map .map:before {
        padding-top: 150%;
    }
}

.partners-map .map > .wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.partners-list .partner {
    padding: 39px 0;
    border-right: solid 1px #D7E3E5;
    border-bottom: solid 1px #D7E3E5;
    border-left: solid 1px #D7E3E5;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
}

.partners-list .partner [class^="col-"] {
    margin-bottom: 0;
}

.partners-list .partner .partner-logo {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0 16px;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

@media (max-width: 767px) {
    .partners-list .partner .partner-logo {
        margin-top: 0;
        -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }
}

.partners-list .partner .partner-logo .icon-wrapper {
    margin-right: 5px;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
}

.partners-list .partner .partner-logo .icon-wrapper:last-child {
    margin-right: 0;
}

.partners-list .partner:last-child {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.partners-list .partner .marker {
    display: none;
}

.partner-data {
    color: #1d1d1b;
}

@media (max-width: 767px) {
    .partner-data {
        padding-left: 16px;
    }
}

.partner-data p {
    margin: 0;
    font-weight: 200;
    font-size: 16px;
    font-size: 1rem;
    line-height: 30px;
    line-height: 1.875rem;
}

.partner-data .web-link {
    margin-left: 16px;
    font-weight: 500;
    text-decoration: none;
    color: #00abe4;
}

@media (max-width: 767px) {
    .partner-data .web-link {
        display: block;
        margin-left: 0;
    }
}

.partner-data .map-link {
    font-weight: 200;
    color: #1d1d1b;
}

.partner-data .icon-itinerary {
    margin-left: 8px;
}

.partner-data .icon-itinerary svg {
    fill: #305057;
}

.gm-style-iw .sl_bubble_logo {
    position: relative;
    float: left;
    padding-right: 0;
    text-align: center;
    border: 0 solid black;
}

.gm-style-iw .sl_bubble_description {
    position: relative;
    float: left;
    max-width: 150px;
    margin-left: 12px;
    border: 0 solid black;
}

.gm-style-iw .title {
    display: block;
    font-weight: bold;
}

.popup-wrapper {
    position: relative;
    cursor: help;
}

.popup-wrapper:hover .popup-text {
    display: block;
}

.popup-text {
    display: none;
    z-index: 99;
    position: absolute;
    bottom: 35px;
    left: 50%;
    width: 200px;
    padding: 1em 1.5em;
    font-weight: 400;
    white-space: initial;
    text-align: left;
    color: white;
    border-radius: 8px;
    background-color: rgba(29, 29, 27, 0.85);
    box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.12);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 18px;
    line-height: 1.125rem;
}

.popup-text:before {
    content: '';
    display: block;
    position: absolute;
    bottom: -8px;
    left: calc(50% - 8px);
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: rgba(29, 29, 27, 0.85) transparent transparent transparent;
}

.popup-text:hover {
    display: block;
}

.popup-password {
    display: block;
    z-index: 20;
    position: absolute;
    top: 8px;
    left: calc(100% + 10px);
    width: 300px;
    padding: 16px;
    font-weight: 400;
    color: #ffffff;
    background: #1d1d1b;
    box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.12);
}

@media (max-width: 1023px) {
    .popup-password {
        top: calc(100% + 10px);
        left: auto;
    }
}

@media (max-width: 767px) {
    .popup-password {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 10px;
    }
}

.popup-password p {
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 16px;
    font-size: 1rem;
    line-height: 19px;
    line-height: 1.1875rem;
}

.popup-password p:last-child {
    margin-bottom: 0;
}

.popup-password:before {
    content: '';
    display: block;
    position: absolute;
    top: calc(50% - 8px);
    left: -8px;
    border-width: 8px 8px 8px 0;
    border-style: solid;
    border-color: transparent #1d1d1b transparent transparent;
}

@media (max-width: 1023px) {
    .popup-password:before {
        top: -8px;
        left: calc(50% - 8px);
        border-width: 0 8px 8px 8px;
        border-style: solid;
        border-color: transparent transparent #1d1d1b transparent;
    }
}

.profil .infos p {
    margin: 0;
}

.promo {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 314px;
    padding: 22px 30px 32px;
    border-radius: 4px;
    background: #EBF1F2;
    -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
}

.promo p {
    max-width: 100%;
    text-align: center;
    color: #305057;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.promo-title {
    max-width: 100%;
    font-weight: 300;
    text-align: center;
    color: #1d1d1b;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 29px;
    line-height: 1.8125rem;
}

@media (max-width: 400px) {
    .promo-title {
        margin: 16px 0;
    }
}

.promo-details {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.promo-qty {
    margin-right: 32px;
    font-weight: 500;
    text-align: center;
    color: #305057;
    font-size: 53px;
    font-size: 3.3125rem;
    line-height: 64px;
    line-height: 4rem;
}

@media (max-width: 400px) {
    .promo-qty {
        font-size: 40px;
        font-size: 2.5rem;
        line-height: 50px;
        line-height: 3.125rem;
    }
}

.promo-equal {
    font-weight: 500;
    color: #E24301;
    font-size: 53px;
    font-size: 3.3125rem;
    line-height: 64px;
    line-height: 4rem;
}

@media (max-width: 400px) {
    .promo-equal {
        font-size: 40px;
        font-size: 2.5rem;
        line-height: 50px;
        line-height: 3.125rem;
    }
}

.promo-milles {
    margin-left: 20px;
    font-weight: 500;
    text-align: center;
    color: #305057;
    font-size: 53px;
    font-size: 3.3125rem;
    line-height: 64px;
    line-height: 4rem;
}

@media (max-width: 400px) {
    .promo-milles {
        font-size: 40px;
        font-size: 2.5rem;
        line-height: 50px;
        line-height: 3.125rem;
    }
}

.promo-milles div {
    font-weight: normal;
    text-transform: uppercase;
    color: #789BA1;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 18px;
    line-height: 1.125rem;
}

.registration-form h2 {
    font-size: 46px;
    font-size: 2.875rem;
    line-height: 54px;
    line-height: 3.375rem;
}

@media (max-width: 767px) {
    .registration-form h2 {
        font-size: 32px;
        font-size: 2rem;
        line-height: 48px;
        line-height: 3rem;
    }
}

.registration-header {
    border-bottom: solid 3px #D7E3E5;
    background: #f3f7f7;
}

.registration-header .other-links {
    padding-top: 30px;
}

.registration-header .other-links p {
    color: #3c3c3a;
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.registration-header .other-links p strong {
    color: #3c3c3a;
}

.registration-header .other-links p a {
    color: #0075a7;
}

.registration-header .row > * {
    margin-bottom: 0;
}

.registration-nav-item {
    padding-top: 30px;
    padding-bottom: 12px;
    font-weight: normal;
    text-decoration: none;
    color: #3c3c3a;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 29px;
    line-height: 1.8125rem;
}

.registration-nav-item span {
    display: block;
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.registration-nav-item:hover, .registration-nav-item.active {
    position: relative;
    color: #305057;
}

.registration-nav-item:hover:after, .registration-nav-item.active:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -3px;
    left: 1rem;
    width: calc(100% - 2rem);
    height: 3px;
    background: #305057;
}

.section-banner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 48px;
    -webkit-flex-flow: row nowrap;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
}

@media (max-width: 767px) {
    .section-banner {
        margin-bottom: 18px;
    }
}

.section-banner .section-banner-title {
    padding: 60px 32px 28px;
    font-weight: 200;
    border-bottom-left-radius: 4px;
    background: #00abe4;
}

@media (max-width: 767px) {
    .section-banner .section-banner-title {
        padding: 40px 22px 18px;
    }
}

.section-banner .section-banner-title h2 {
    margin-bottom: 0;
    color: #ffffff;
    font-size: 46px;
    font-size: 2.875rem;
    line-height: 54px;
    line-height: 3.375rem;
}

@media (max-width: 767px) {
    .section-banner .section-banner-title h2 {
        font-size: 32px;
        font-size: 2rem;
        line-height: 38px;
        line-height: 2.375rem;
    }
}

@media (max-width: 400px) {
    .section-banner .section-banner-title h2 {
        font-size: 24px;
        font-size: 1.5rem;
        line-height: 28px;
        line-height: 1.75rem;
    }
}

@media (max-width: 340px) {
    .section-banner .section-banner-title h2 {
        font-size: 22px;
        font-size: 1.375rem;
        line-height: 26px;
        line-height: 1.625rem;
    }
}

.section-banner .section-banner-logo {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    max-width: 200px;
    padding: 32px 20px;
    border-bottom-right-radius: 4px;
    background: #ffffff;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
}

@media (max-width: 767px) {
    .section-banner .section-banner-logo {
        max-width: 137px;
        padding: 27px 20px;
    }
}

.section-nouveau-programme {
    padding-bottom: 90px;
    background: #D7E3E5;
}

.section-nouveau-programme h2 {
    margin-top: 46px;
    margin-bottom: 16px;
    font-weight: 200;
    color: #1d1d1b;
    font-size: 46px;
    font-size: 2.875rem;
    line-height: 54px;
    line-height: 3.375rem;
}

.section-nouveau-programme p {
    font-weight: 200;
    color: #3c3c3a;
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 32px;
    line-height: 2rem;
}

.section-accumulez-et-echangez {
    background: #EBF1F2;
}

.section-accumulez-et-echangez h2 {
    font-weight: 200;
    color: #1d1d1b;
    font-size: 46px;
    font-size: 2.875rem;
    line-height: 54px;
    line-height: 3.375rem;
}

.section-accumulez-et-echangez p {
    color: #3c3c3a;
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
}

.section-offres-et-concours {
    position: relative;
    overflow: hidden;
    min-height: 660px;
}

.section-offres-et-concours .no-padding-right {
    padding-right: 0;
}

@media (max-width: 767px) {
    .section-offres-et-concours .no-padding-right {
        padding-right: 1rem;
        margin-bottom: 0;
    }
}

.section-offres-et-concours .no-padding-left {
    padding-left: 0;
}

@media (max-width: 767px) {
    .section-offres-et-concours .no-padding-left {
        padding-left: 1rem;
    }
}

.section-offres-et-concours:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    background: url("/assets/img/beach-blur.jpg") center center no-repeat;
    background-size: cover;
    -webkit-filter: blur(5px);
            filter: blur(5px);
}

.section-offres-et-concours:after {
    content: "";
    z-index: -1;
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    background-color: rgba(48, 80, 87, 0.12);
}

.section-inscrivez-vous {
    padding: 120px 0;
    background: #E24301 url("../svg/originals/back-inscription.svg") top left no-repeat;
}

@media (max-width: 767px) {
    .section-inscrivez-vous {
        padding: 60px 0;
    }
}

.section-inscrivez-vous h2 {
    color: #ffffff;
    font-size: 34px;
    font-size: 2.125rem;
    line-height: 42px;
    line-height: 2.625rem;
}

.section-title {
    margin-bottom: 32px;
    font-weight: 200;
    color: #1d1d1b;
    font-size: 46px;
    font-size: 2.875rem;
    line-height: 56px;
    line-height: 3.5rem;
}

@media (max-width: 767px) {
    .section-title {
        font-size: 40px;
        font-size: 2.5rem;
        line-height: 50px;
        line-height: 3.125rem;
    }
}

.spotlight {
    padding: 68px 0;
    background: #00abe4 url("../svg/originals/back-acc-echanger.svg") center left no-repeat;
    background-size: cover;
}

.spotlight .spotlight-title {
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    font-size: 46px;
    font-size: 2.875rem;
    line-height: 64px;
    line-height: 4rem;
}

@media (max-width: 767px) {
    .spotlight .spotlight-title {
        font-size: 36px;
        font-size: 2.25rem;
        line-height: 42px;
        line-height: 2.625rem;
    }
}

.spotlight .spotlight-content {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;
    font-weight: 300;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 34px;
    line-height: 2.125rem;
}

@media (max-width: 767px) {
    .spotlight .spotlight-content {
        font-size: 16px;
        font-size: 1rem;
        line-height: 22px;
        line-height: 1.375rem;
    }
}

.steps-wrapper {
    position: relative;
}

.steps-wrapper::before {
    content: "";
    display: inline-block;
    z-index: -1;
    position: absolute;
    top: calc(50% - 1px);
    width: 100%;
    height: 1px;
    background: #D7E3E5;
}

.steps {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: 100%;
    margin: 70px 0;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.steps .step {
    position: relative;
}

.steps .step.active .step-number {
    color: #ffffff;
    background: #789BA1;
}

.steps .step.done .step-number {
    color: #ffffff;
    background: #00ADBA;
}

.steps .step.done .icon-wrapper {
    margin-top: -2px;
}

.steps .step:first-of-type .step-label {
    right: auto;
    left: 0;
    text-align: left;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

.steps .step:last-of-type .step-label {
    right: 0;
    left: auto;
    text-align: right;
    -webkit-transform: translateX(0);
            transform: translateX(0);
}

.steps .step-number {
    display: block;
    width: 39px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    color: #305057;
    border-radius: 50%;
    background: #D7E3E5;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 39px;
    line-height: 2.4375rem;
}

.steps .step-label {
    position: absolute;
    top: 100%;
    left: 50%;
    padding-top: 16px;
    text-align: center;
    color: #789BA1;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.4;
}

.transactions select {
    width: 259px;
    height: 40px;
    color: #789ba1;
    border: 1px solid #d7e3e5;
    border-radius: 2px;
    background-color: #fff;
}

.transactions .btn-print {
    float: right;
}

@media (max-width: 767px) {
    .transactions .btn-print {
        float: none;
    }
}

.transactions table {
    border-style: hidden;
    /* hide standard table (collapsed) border */
    border-radius: 4px;
    box-shadow: 0 0 0 1px #d7e3e5;
    /* this draws the table border  */
    border-collapse: collapse;
}

.transactions table tr {
    height: 65px;
    border: 1px solid #d7e3e5;
}

.transactions table th {
    font-weight: 300;
}

.transactions table th,
.transactions table td {
    padding: 1rem 0.4rem;
    text-align: left;
    border: none;
}

.transactions table th:first-child,
.transactions table td:first-child {
    padding-left: 1rem;
}

.transactions table th:last-child {
    padding-right: 2rem;
    font-weight: bold;
    text-align: right;
}

.transactions table td:last-child {
    padding-right: 1rem;
    font-weight: bold;
    text-align: right;
}

.transactions table .cell-mp {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 20px;
    line-height: 1.25rem;
}

.transactions table td.child {
    text-align: left;
}

@media (max-width: 767px) {
    .transactions table .icon-wrapper {
        display: none;
    }
}

.transactions table .bonus {
    color: #00abe4;
}

.transactions table.dataTable {
    visibility: visible;
}

.transactions .pager ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.transactions .pager li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.transactions .pager li a {
    display: block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #305057;
    border-radius: 50%;
    background-color: #d7e3e5;
}

.transactions .pager li a.active {
    color: #ffffff;
    background-color: #789ba1;
}