@charset "UTF-8";
*, ::before, ::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0
}

html {
    font-size: 62.5%;
    font-family: sans-serif;
    line-height: 1.15;
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-style: scrollbar;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body {
    margin: 0;
    font-family: Graphik, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 1.4rem;
    direction: ltr;
    font-weight: 400;
    line-height: 1.5;
    color: #222222;
    text-align: left;
    background-color: #fafbfc
}

@media (min-width: 576px) {
    body {
        font-size: 1.6rem
    }
}

h1, h2, h3, h4, h5, h6, .h1-like, .h2-like, .h3-like, .h4-like, .h5-like, .h6-like {
    margin-top: 0;
    margin-bottom: .5rem;
    line-height: 1.15
}

abbr[title] {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    border-bottom: 0
}

article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block
}

[tabindex="-1"]:focus {
    outline: none !important
}

p, address, ol, ul, blockquote, dl, pre, dt, dd {
    margin-top: 0;
    margin-bottom: 1rem
}

address {
    font-style: normal;
    line-height: inherit
}

dd {
    margin-top: 0;
    margin-bottom: .5rem;
    line-height: 1.15;
    margin-left: 0
}

dt {
    font-weight: 700
}

ol ol, ol ul, ul ol, ul ul, li ul, li ol, nav ul, nav ol, li p, li .p-like {
    margin-top: 0;
    margin-bottom: 0
}

ul, ol {
    padding-left: 2em
}

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

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

img, table, td, blockquote, pre, code, input, textarea, select, video, svg, iframe {
    max-width: 100%
}

iframe, img, input, select, textarea {
    height: auto
}

img {
    border-style: none;
    height: auto
}

iframe {
    border-style: none
}

svg:not([fill]) {
    fill: currentColor
}

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

table {
    border-collapse: collapse
}

table, .table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    vertical-align: top;
    margin-bottom: 2rem
}

.table {
    display: table;
    border: 1px solid #acb3c2;
    background: transparent
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    border: 0;
    border-top: 1px solid;
    margin: 1rem 0 2rem;
    clear: both;
    padding: 0;
    color: inherit
}

.visuallyhidden, .visually-hidden, .sr-only, .tabs-content-item[aria-hidden="true"] {
    position: absolute !important;
    border: 0 !important;
    height: 1px !important;
    top: auto;
    width: 1px !important;
    margin: -1px;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    word-wrap: normal !important
}

[hidden] {
    display: none !important
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: 0 ease 0 1 normal none running none !important;
        transition: none 0 ease 0 !important
    }
}

[aria-busy="true"] {
    cursor: progress
}

[aria-controls] {
    cursor: pointer
}

[aria-disabled="true"], [disabled] {
    cursor: not-allowed
}

[aria-hidden="false"][hidden] {
    display: initial
}

[aria-hidden="false"][hidden]:not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute
}

a, area, button, [role="button"], input:not([type="range"]), label, select, summary, textarea, [tabindex] {
    -ms-touch-action: manipulation;
    touch-action: manipulation
}

button, input, select, optgroup, textarea {
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    vertical-align: middle
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

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

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    padding: 0;
    border-style: none
}

form, fieldset {
    border: none
}

fieldset {
    margin: 0;
    padding: 0
}

legend, fieldset legend {
    display: table;
    max-width: 100%;
    padding: 0 .5rem;
    border: 0;
    color: inherit;
    white-space: normal;
    font-size: 1.5rem;
    line-height: inherit
}

label {
    display: inline-block;
    margin-bottom: .5rem;
    cursor: pointer
}

textarea {
    overflow: auto;
    vertical-align: top;
    resize: vertical;
    white-space: pre-wrap
}

b, strong {
    font-weight: 700
}

small {
    font-size: 80%
}

a {
    color: #c91111;
    text-decoration: none;
    background-color: transparent
}

a:focus, a:hover, a:active {
    color: #e50000;
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none
}

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
    color: inherit;
    text-decoration: none
}

a:not([href]):not([tabindex]):focus {
    outline: 0
}

figure {
    margin: 0 0 1rem
}

caption {
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: #999999;
    text-align: left;
    caption-side: bottom
}

th {
    text-align: inherit
}

button {
    border-radius: .5rem
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto -webkit-focus-ring-color
}

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

input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
    -webkit-appearance: listbox;
    -moz-appearance: listbox;
    appearance: listbox
}

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

[type="search"] {
    outline-offset: -2px;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
    appearance: button
}

h1, .h1-like {
    font-size: 1.8rem;
    font-weight: 500
}

h2, .h2-like {
    font-size: 1.6rem;
    font-weight: 500
}

h3, .h3-like {
    font-size: 1.4rem;
    font-weight: 500
}

h4, .h4-like {
    font-size: 1.4rem;
    font-weight: 500
}

@media (min-width: 576px) {
    h1, .h1-like {
        font-size: 2rem;
        letter-spacing: -.05rem
    }

    h2, .h2-like {
        font-size: 1.8rem;
        letter-spacing: -.05rem
    }

    h3, .h3-like {
        font-size: 1.6rem
    }

    h4, .h4-like {
        font-size: 1.4rem
    }
}

em, .italic, cite, i, var {
    font-style: italic
}

.flex-container, .flex-container--row, .flex-row, .flex-container--column, .flex-column, .flex-container--row-reverse, .flex-row-reverse, .flex-container--column-reverse, .flex-column-reverse, .d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.flex-item-fluid, .item-fluid {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0;
    flex: 1 1
}

.u-bold {
    font-weight: 700
}

.u-italic {
    font-style: italic
}

.u-normal {
    font-weight: normal;
    font-style: normal
}

.u-uppercase {
    text-transform: uppercase
}

.u-lowercase {
    text-transform: lowercase
}

.u-smaller {
    font-size: .6em
}

.u-small {
    font-size: .8em
}

.u-simi {
    font-size: .9em
}

.u-big {
    font-size: 1.2em
}

.u-bigger {
    font-size: 1.5em
}

.u-biggest {
    font-size: 2em
}

.u-txt-wrap {
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto
}

.u-txt-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis
}

.txtleft, .u-txt-left {
    text-align: left
}

.txtright, .u-txt-right {
    text-align: right
}

.txtcenter, .u-txt-center {
    text-align: center
}

.clear, .u-clear {
    clear: both
}

.clearfix::after, .u-clearfix::after {
    content: "";
    display: table;
    clear: both;
    border-collapse: collapse
}

.left .u-left {
    margin-right: auto
}

.right, .u-right {
    margin-left: auto
}

.center, .u-center {
    margin-left: auto;
    margin-right: auto
}

.fl, .u-fl {
    float: left
}

.fr, .u-fr {
    float: right
}

.inbl, .u-inbl {
    display: inline-block;
    vertical-align: top
}

.hidder, .is-hidden, .js-hidden, [hidden] {
    display: none !important
}

.w100 {
    width: 100%
}

.w95 {
    width: 95%
}

.w90 {
    width: 90%
}

.w85 {
    width: 85%
}

.w80 {
    width: 80%
}

.w75 {
    width: 75%
}

.w70 {
    width: 70%
}

.w65 {
    width: 65%
}

.w60 {
    width: 60%
}

.w55 {
    width: 55%
}

.w50 {
    width: 50%
}

.w45 {
    width: 45%
}

.w40 {
    width: 40%
}

.w35 {
    width: 35%
}

.w30 {
    width: 30%
}

.w25 {
    width: 25%
}

.w20 {
    width: 20%
}

.w23 {
    width: 23%
}

.w17 {
    width: 17%
}

.w15 {
    width: 15%
}

.w10 {
    width: 10%
}

.w5 {
    width: 5%
}

.w66 {
    width: calc(100% / 3 * 2)
}

.w33 {
    width: calc(100% / 3)
}

.wauto {
    width: auto
}

.mas {
    margin: 1rem
}

.mam {
    margin: 2rem
}

.pas {
    padding: 1rem
}

.pam {
    padding: 2rem
}

.mts {
    margin-top: 1rem
}

.mtm {
    margin-top: 2rem
}

.mrs {
    margin-right: 1rem
}

.mrm {
    margin-right: 2rem
}

.mbs {
    margin-bottom: 1rem
}

.mbm {
    margin-bottom: 2rem
}

.mls {
    margin-left: 1rem
}

.mlm {
    margin-left: 2rem
}

.pts {
    padding-top: 1rem
}

.ptm {
    padding-top: 2rem
}

.prs {
    padding-right: 1rem
}

.prm {
    padding-right: 2rem
}

.pbs {
    padding-bottom: 1rem
}

.pbm {
    padding-bottom: 2rem
}

.pls {
    padding-left: 1rem
}

.plm {
    padding-left: 2rem
}

.maxs {
    margin: .3rem
}

.paxs {
    padding: .3rem
}

.plrs {
    padding-right: 1rem;
    padding-left: 1rem
}

@media (max-width: 575px) {
    .mod, .col, fieldset {
        display: block !important;
        float: none !important;
        clear: none !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border: 0
    }

    .flex-container, .flex-container--row, .flex-row, .flex-container--column, .flex-column, .flex-container--row-reverse, .flex-row-reverse, .flex-container--column-reverse, .flex-column-reverse {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media (min-width: 359px) {
    [class*=" grid-"], [class^="grid-"] {
        display: -ms-grid;
        display: grid;
        grid-auto-flow: dense
    }

    [class*=" grid-"].has-gutter, [class^="grid-"].has-gutter {
        grid-gap: 1rem
    }

    [class*=" grid-"].has-gutter-l, [class^="grid-"].has-gutter-l {
        grid-gap: 2rem
    }

    [class*=" grid-"].has-gutter-xl, [class^="grid-"].has-gutter-xl {
        grid-gap: 4rem
    }

    .autogrid, .grid {
        display: -ms-grid;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr
    }

    .autogrid.has-gutter, .grid.has-gutter {
        grid-column-gap: 1rem
    }

    .autogrid.has-gutter-l, .grid.has-gutter-l {
        grid-column-gap: 2rem
    }

    .autogrid.has-gutter-xl, .grid.has-gutter-xl {
        grid-column-gap: 4rem
    }
}

[class*="grid-2"] {
    -ms-grid-columns:(1fr) [ 2 ];
    grid-template-columns:repeat(2, 1fr)
}

[class*="grid-3"] {
    -ms-grid-columns:(1fr) [ 3 ];
    grid-template-columns:repeat(3, 1fr)
}

[class*="grid-4"] {
    -ms-grid-columns:(1fr) [ 4 ];
    grid-template-columns:repeat(4, 1fr)
}

[class*="col-1"] {
    grid-column: auto/span 1
}

[class*="row-1"] {
    grid-row: auto/span 1
}

[class*="col-2"] {
    grid-column: auto/span 2
}

[class*="row-2"] {
    grid-row: auto/span 2
}

[class*="col-3"] {
    grid-column: auto/span 3
}

[class*="row-3"] {
    grid-row: auto/span 3
}

[class*="col-4"] {
    grid-column: auto/span 4
}

[class*="row-4"] {
    grid-row: auto/span 4
}

@media (max-width: 767px) {
    [class*="grid-"][class*="-small-1"] {
        -ms-grid-columns:(1fr) [ 1 ];
        grid-template-columns:repeat(1, 1fr)
    }

    [class*="col-"][class*="-small-1"] {
        grid-column: auto/span 1
    }

    [class*="grid-"][class*="-small-2"] {
        -ms-grid-columns:(1fr) [ 2 ];
        grid-template-columns:repeat(2, 1fr)
    }

    [class*="col-"][class*="-small-2"] {
        grid-column: auto/span 2
    }

    [class*="grid-"][class*="-small-3"] {
        -ms-grid-columns:(1fr) [ 3 ];
        grid-template-columns:repeat(3, 1fr)
    }

    [class*="col-"][class*="-small-3"] {
        grid-column: auto/span 3
    }

    [class*="grid-"][class*="-small-4"] {
        -ms-grid-columns:(1fr) [ 4 ];
        grid-template-columns:repeat(4, 1fr)
    }

    [class*="col-"][class*="-small-4"] {
        grid-column: auto/span 4
    }

    [class*="-small-all"] {
        grid-column: 1 / -1
    }
}

.item-first {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1
}

.item-last {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
}

.grid-offset {
    visibility: hidden
}

.col-all {
    grid-column: 1 / -1
}

.row-all {
    grid-row: 1 / -1
}

@media (min-width: 480px) {
    .media {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }

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

    .media-figure--center {
        -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center
    }

    .media--reverse {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse
    }
}

.skip-links {
    position: absolute
}

.skip-links a {
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    padding: .5em;
    background: black;
    color: white;
    text-decoration: none
}

.skip-links a:focus {
    position: static;
    overflow: visible;
    clip: auto
}

a.skip-link {
    padding: 10px 20px;
    top: 32px
}

.table--zebra tbody tr:nth-child(odd) {
    background: #f9dbdb
}

.table caption {
    caption-side: bottom;
    padding: 1rem;
    color: #333;
    font-style: italic;
    text-align: right
}

.table td, .table th {
    padding: .3rem .6rem;
    min-width: 2rem;
    vertical-align: middle;
    border: 1px #acb3c2 dotted;
    text-align: left;
    cursor: default
}

.table thead {
    color: #2d2d2d;
    background: #ddd
}

.table--auto {
    table-layout: auto
}

[type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="submit"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], select, textarea {
    outline: none;
    font-family: inherit;
    font-size: inherit;
    border: 1px solid #c91111;
    border-radius: 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px;
    outline: none;
    color: #2d2d2d;
    vertical-align: middle;
    padding: .5rem 1rem;
    margin: 0;
    -webkit-transition: .25s;
    transition: .25s;
    -webkit-transition-property: background-color, color, border, -webkit-box-shadow;
    transition-property: background-color, color, border, -webkit-box-shadow;
    transition-property: box-shadow, background-color, color, border;
    transition-property: box-shadow, background-color, color, border, -webkit-box-shadow;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.form-icon:focus, .form-input:focus {
    box-shadow: 0 0 4px 0 #c91111;
    -webkit-box-shadow: 0 0 4px 0 #c91111;
    -moz-box-shadow: 0 0 4px 0 #c91111
}

.form-icon:hover, .form-input:hover {
    box-shadow: 0 0 4px 0 #c91111;
    -webkit-box-shadow: 0 0 4px 0 #c91111;
    -moz-box-shadow: 0 0 4px 0 #c91111
}

.form-icon {
    display: inline-block;
    width: 3rem;
    background-color: #c91111;
    color: #fff;
    padding: .5rem 0;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    border: 1px solid #9a1111;
    transition: .25s
}

.form-input {
    margin-left: -5px;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    border: 1px solid #9a1111;
    max-width: 85%
}

@media (max-width: 991px) {
    .formicon {
        display: none
    }
}

[type="submit"] {
    background-color: #333;
    color: #fff;
    cursor: pointer
}

input[readonly] {
    background-color: #c91111;
    color: #fff
}

select {
    padding-right: 2rem;
    border-radius: 0;
    background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E);
    background-position: right .6rem center;
    background-repeat: no-repeat;
    background-size: 1.2rem
}

select::-ms-expand {
    display: none
}

::-webkit-input-placeholder {
    color: #777
}

::-moz-placeholder {
    color: #777
}

:-ms-input-placeholder {
    color: #777
}

::-ms-input-placeholder {
    color: #777
}

::placeholder {
    color: #777
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #777
}

input::-moz-placeholder, textarea::-moz-placeholder {
    color: #777
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #777
}

input::-ms-input-placeholder, textarea::-ms-input-placeholder {
    color: #777
}

input::placeholder, textarea::placeholder {
    color: #777
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

.btn, .button, [type="button"], button, .btn--primary, .button--primary, .btn--success, .button--success, .btn--info, .button--info, .btn--warning, .button--warning, .btn--danger, .button--danger, .btn--inverse, .button--inverse, .btn--ghost, .button--ghost {
    display: inline-block;
    padding: 1rem 1.5rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: .25s;
    transition: .25s;
    -webkit-transition-property: background-color, color, border, -webkit-box-shadow;
    transition-property: background-color, color, border, -webkit-box-shadow;
    transition-property: box-shadow, background-color, color, border;
    transition-property: box-shadow, background-color, color, border, -webkit-box-shadow;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-decoration: none;
    color: #2d2d2d;
    border: none;
    border-radius: .5rem;
    background-color: #e7e9ed;
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    background-image: url(../icon/3dbg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.btn:focus, .button:focus, [type="button"]:focus, button:focus {
    -webkit-tap-highlight-color: transparent
}

.btn--success, .button--success {
    background-color: #0da000;
    color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn--success:active, .btn--success:focus, .btn--success:hover, .button--success:active, .button--success:focus, .button--success:hover {
    background-color: #449d44
}

.btn--warning, .button--warning {
    background-color: #ffbf5f;
    color: #000;
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn--warning:active, .btn--warning:focus, .btn--warning:hover, .button--warning:active, .button--warning:focus, .button--warning:hover {
    background-color: #ec971f
}

.btn--danger, .button--danger {
    background-color: #c91111;
    color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn--danger:active, .btn--danger:focus, .btn--danger:hover, .button--danger:active, .button--danger:focus, .button--danger:hover {
    background-color: #c9302c
}

.btn--ghost, .button--ghost {
    background-color: transparent;
    color: #fff;
    -webkit-box-shadow: 0 0 0 1px #fff inset;
    box-shadow: 0 0 0 1px #fff inset
}

.btn--ghost:active, .btn--ghost:focus, .btn--ghost:hover, .button--ghost:active, .button--ghost:focus, .button--ghost:hover {
    background-color: rgba(0, 0, 0, 0)
}

.btn--small, .button--small {
    padding: .7rem 1rem;
    font-size: .8em
}

.btn--big, .button--big {
    padding: 1.5rem 2rem;
    font-size: 1.4em
}

.btn--block, .button--block {
    width: 100% !important;
    display: block
}

.checkbox {
    border-radius: 4px
}

.radio {
    border-radius: 50%
}

.checkbox, .radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    vertical-align: text-bottom;
    outline: 0;
    cursor: pointer
}

.checkbox ~ label, .radio ~ label {
    cursor: pointer
}

.checkbox::-ms-check, .radio::-ms-check {
    display: none
}

.checkbox {
    width: 2rem;
    height: 2rem;
    -webkit-box-shadow: inset 0 0 0 1px #c91111;
    box-shadow: inset 0 0 0 1px #c91111;
    background-color: #fff;
    -webkit-transition: background-color .15s;
    transition: background-color .15s
}

.checkbox:checked {
    background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%208%208%22%20enable-background%3D%22new%200%200%208%208%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M6.4%2C1L5.7%2C1.7L2.9%2C4.5L2.1%2C3.7L1.4%2C3L0%2C4.4l0.7%2C0.7l1.5%2C1.5l0.7%2C0.7l0.7-0.7l3.5-3.5l0.7-0.7L6.4%2C1L6.4%2C1z%22%20%2F%3E%0A%3C%2Fsvg%3E);
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #c91111
}

.radio {
    width: 2rem;
    height: 2rem;
    background-size: 0 0;
    -webkit-transition: background-size .15s;
    transition: background-size .15s;
    -webkit-box-shadow: inset 0 0 0 1px #c91111;
    box-shadow: inset 0 0 0 1px #c91111;
    background-color: #fff
}

.radio:checked {
    background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%22100%22%20height%3D%22100%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23c91111%22/%3E%3C/svg%3E);
    background-size: 90% 90%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff
}

.tag, .tag--primary, .tag--success, .tag--info, .tag--warning, .tag--danger, .tag--inverse, .tag--ghost, .tag--rouge {
    display: inline-block;
    padding: 3px .5rem;
    vertical-align: baseline;
    white-space: normal;
    color: #2d2d2d;
    border-radius: .5rem;
    background-color: #e7e9ed;
    line-height: 1
}

.tag--primary {
    background-color: #0275D8;
    color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none
}

.tag--success {
    background-color: #0da000;
    color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none
}

.tag--info {
    background-color: #5BC0DE;
    color: #000;
    -webkit-box-shadow: none;
    box-shadow: none
}

.tag--warning {
    background-color: #ffbf5f;
    color: #000;
    -webkit-box-shadow: none;
    box-shadow: none
}

.tag--danger, .tag--rouge {
    background-color: #c91111;
    color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none
}

.tag--inverse {
    background-color: #f9cccc;
    color: #191111;
    -webkit-box-shadow: none;
    box-shadow: none
}

.tag--small {
    font-size: 1.2rem
}

.tag--big {
    font-size: 2rem
}

.tag--block {
    width: 100% !important;
    display: block
}

.tag.disabled, .disabled.tag--primary, .disabled.tag--success, .disabled.tag--info, .disabled.tag--warning, .disabled.tag--danger, .disabled.tag--inverse, .disabled.tag--ghost, .tag--disabled {
    opacity: .5;
    cursor: not-allowed
}

.tag:empty, .tag--primary:empty, .tag--success:empty, .tag--info:empty, .tag--warning:empty, .tag--danger:empty, .tag--inverse:empty, .tag--ghost:empty {
    display: none
}

[class*=grid] .tag--danger {
    display: block
}

.tag--danger a, .tag--danger a:hover, .tag--ghost a, .tag--ghost a:hover, .tag--info a, .tag--info a:hover, .tag--inverse a, .tag--inverse a:hover, .tag--primary a, .tag--primary a:hover, .tag--success a, .tag--success a:hover, .tag--warning a, .tag--warning a:hover, .tag a, .tag a:hover {
    color: unset;
    text-decoration: none
}

.badge, .badge--primary, .badge--success, .badge--info, .badge--warning, .badge--danger, .badge--inverse, .badge--ghost {
    display: inline-block;
    padding: .5rem;
    border-radius: 50%;
    color: #2d2d2d;
    background-color: #e7e9ed;
    line-height: 1
}

.badge::before, .badge--primary::before, .badge--success::before, .badge--info::before, .badge--warning::before, .badge--danger::before, .badge--inverse::before, .badge--ghost::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    padding-top: 100%
}

.badge--danger {
    background-color: #c91111;
    color: #fff
}

.container {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: auto;
    margin-left: auto
}

#header {
    padding: 0
}

.site-header {
    text-align: center;
    margin: 0 auto;
    background-color: #c30a0a;
}

/* @media (max-width: 480px) {
    .site-header {
        background-image: -moz-linear-gradient(0deg, rgba(44, 11, 11, 1) 0%, rgba(201, 17, 17, 1) 40%, rgba(201, 17, 17, 1) 75%, rgba(221, 92, 92, 1) 90%, rgba(201, 17, 17, 1) 100%);
        background-image: -webkit-linear-gradient(0deg, rgba(44, 11, 11, 1) 0%, rgba(201, 17, 17, 1) 45%, rgba(201, 17, 17, 1) 75%, rgba(221, 92, 92, 1) 90%, rgba(201, 17, 17, 1) 100%);
        background-image: linear-gradient(0deg, rgba(44, 11, 11, 1) 0%, rgba(201, 17, 17, 1) 45%, rgba(201, 17, 17, 1) 75%, rgba(221, 92, 92, 1) 90%, rgba(201, 17, 17, 1) 100%);
        background-image: -o-linear-gradient(top, rgba(44, 11, 11, 1) 0%, rgba(201, 17, 17, 1) 45%, rgba(201, 17, 17, 1) 75%, rgba(221, 92, 92, 1) 90%, rgba(201, 17, 17, 1) 100%)
    }
} */

/* @media (min-width: 481px) and (max-width: 1023px) {
    #header {
        background-image: url(../BANDEAUBP.png);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: cover
    }
}

@media (min-width: 1024px) {
    #header {
        background-image: url(../BANDEAUBP.png);
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: cover
    }
} */

#bienvenue {
    color: #fff;
    padding: 0;
    vertical-align: middle;
    font-size: .8em;
    text-align: center
}

.menu .container .flex-container, .menu .container .flex-container--row, .menu .container .flex-row, .menu .container .flex-container--column, .menu .container .flex-column, .menu .container .flex-container--row-reverse, .menu .container .flex-row-reverse, .menu .container .flex-container--column-reverse, .menu .container .flex-column-reverse {
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.show-on-focus {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    top: 0;
    left: 0
}

.show-on-focus:focus {
    z-index: 20;
    background-color: #f2f3f4;
    width: auto;
    height: auto;
    clip: auto
}

.menu {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 99
}

.grad {
    background-color: rgb(226, 227, 228);
    background-image: -moz-linear-gradient(0deg, rgba(181, 176, 176, 1) 0%, rgba(226, 227, 228, 1) 25%, rgba(226, 227, 228, 1) 75%, rgba(255, 255, 255, 1) 90%, rgba(206, 200, 200, 1) 100%);
    background-image: -webkit-linear-gradient(0deg, rgba(181, 176, 176, 1) 0%, rgba(226, 227, 228, 1) 25%, rgba(226, 227, 228, 1) 75%, rgba(255, 255, 255, 1) 90%, rgba(206, 200, 200, 1) 100%);
    background-image: linear-gradient(0deg, rgba(181, 176, 176, 1) 0%, rgba(226, 227, 228, 1) 25%, rgba(226, 227, 228, 1) 75%, rgba(255, 255, 255, 1) 90%, rgba(206, 200, 200, 1) 100%);
    background-image: -o-linear-gradient(top, rgba(181, 176, 176, 1) 0%, rgba(226, 227, 228, 1) 25%, rgba(226, 227, 228, 1) 75%, rgba(255, 255, 255, 1) 90%, rgba(206, 200, 200, 1) 100%)
}

.navigation {
    margin: 3px;
    border-radius: 1.5rem;
    border: solid 1px #c91111
}

.btnNav {
    padding: 0;
    height: 1.6rem;
    width: 2rem;
    font-size: 2em;
    box-sizing: content-box;
    background-image: linear-gradient(to right, currentColor, currentColor);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-color: transparent;
    border: 1rem solid transparent;
    outline: 0;
    color: #c91111;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: .25s cubic-bezier(.17, .67, .89, 1.4);
    transition-property: transform;
    will-change: transform
}

.btnNav:focus {
    outline: 0
}

.btnNav::after, .btnNav::before {
    content: "";
    border-radius: 3px;
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    height: 3px;
    background: currentColor;
    transition: .25s;
    transition-property: transform, top;
    will-change: transform, top
}

.btnNav::before {
    top: 0
}

.btnNav::after {
    bottom: 0
}

.btnNav.active {
    background-image: none
}

.btnNav.active::after, .btnNav.active::before {
    top: 50%
}

.btnNav.active::before {
    transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, 45deg)
}

.btnNav.active::after {
    transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, -45deg)
}

.closeBtn {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #c91111;
    background: #f5f4f3
}



::-moz-focus-inner {
    border: 0;
    border-style: none;
    padding: 0
}

:-moz-focusring {
    outline: 1px dotted ButtonText
}

:-moz-ui-invalid {
    box-shadow: none
}

.menu-desktop {
    color: #c91111
}

.menu-desktop a {
    text-decoration: none;
    font-weight: 500
}

.menu-desktop ul {
    transition: all .3s ease;
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 0;
    list-style-type: none;
    margin-left: auto
}

.menu-desktop li {
    list-style-type: none;
    cursor: pointer;
    display: block;
    padding: 10px 0
}

.menu-desktop ul li i.icon-arrow--down::after {
    background-color: #c91111 !important
}

.menu-desktop li a:after {
    content: "";
    display: block;
    margin: auto;
    height: 2px;
    width: 0;
    background: transparent;
    transition: width .5s ease, background-color .5s ease
}

.menu-desktop li a:hover:after {
    width: 100%;
    background: #c91111
}

.navMenu {
    text-align: left;
    color: #fff;
    background: #c91111;
    position: fixed;
    width: 30%; /* Laisse la largeur à 30% pour les grands écrans */
    height: 100%;
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
    left: 0;
    top: 0;
    padding: 20px;
    overflow-y: auto; /* Permettre le défilement vertical */
    overflow-x: hidden; /* Empêcher le défilement horizontal */
    box-sizing: border-box; /* Inclure padding dans la largeur totale */
}


#navMenu.active {
    transform: translateX(0);
}

#navMenu {
    transform: translateX(-100%);
}

.closeBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: white; /* Fond blanc pour le bouton */
    border: 1px solid #ffffff; /* Bordure bleue */
    border-radius: 6px; /* Légère courbure des bords */
    font-size: 16px; /* Taille de la croix plus petite */
    cursor: pointer;
    color: #b02e2e; /* Couleur de la croix */
    width: 30px; /* Largeur du bouton réduite */
    height: 30px; /* Hauteur du bouton réduite */
    display: flex;
    align-items: center;
    justify-content: center; /* Centre la croix à l'intérieur du bouton */
}

.closeBtn:hover {
    background-color: #f5f5f5; /* Légère teinte grise au survol */
    color: #ff0000; /* Change la couleur de la croix au survol */
}

.navMenu ul {
    list-style-type: none; /* Supprimer les puces des listes */
    padding: 0;
    margin: 0;
}

.navbutton {
    position: fixed; /* Assure que le bouton est toujours visible */
    top: 10px;
    right: 10px;
    z-index: 1001; /* Assure que le bouton est au-dessus du contenu */
}

.navMenu li {
    margin-bottom: 15px;
}

.navMenu a {
    color: white;
    text-decoration: none; /* Désactiver le soulignement par défaut */
    font-size: 18px;
    word-wrap: break-word; /* Évite les débordements de mots trop longs */
}

.navMenu a:hover {
    color: #f5f5f5; /* Couleur discrète au survol pour indiquer un lien cliquable */
}

/* TITRES (Section Title) */
.navMenu .section-title {
    font-size: 22px; /* Taille plus grande pour les titres */
    font-weight: bold; /* Texte en gras pour les titres */
    color: #ffffff; /* Couleur blanche sobre pour les titres */
    margin-bottom: 10px; /* Espacement en bas pour aérer */
    border-bottom: 1px solid #fff; /* Légère ligne blanche en dessous pour séparer */
    padding-bottom: 5px;
}

/* INFORMATIONS */
.navMenu .info-text {
    font-size: 15px;
    opacity: 90%;
    color: #f5f5f5; /* Couleur discrète pour les informations */
    margin-bottom: 15px; /* Espacement entre les blocs d'information */
    line-height: 1.5; /* Espacement entre les lignes pour plus de lisibilité */
}

.MenuContent {
    width: 100%; /* Ajuste pour remplir la largeur disponible sans débordement */
    height: auto; /* Supprime la hauteur fixe */
    max-height: 100%; /* S'assure qu'il ne dépasse pas la taille de l'écran */
    overflow-y: auto; /* Permettre le défilement si le contenu dépasse */
}

.navMenu .MenuContent ul li, .navMenu .MenuContent ul ul, .navMenu .MenuContent ul ul ul li {
    list-style-type: none;
    padding: 3px 1rem;
}

.navMenu .MenuContent ul li a:after {
    content: "";
    display: block;
    margin: auto;
    height: 2px;
    width: 0;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}

.navMenu .MenuContent ul li a:hover:after {
    width: 100%;
    background: #fff; /* Soulignement personnalisé au survol */
}

/* Section d'accueil et de recherche */
.navMenu .special-section {
    margin-bottom: 30px; /* Ajouter de l'espace après ces sections */
    font-size: 20px; /* Taille de police plus grande pour l'accueil */
}

.navMenu .special-section a {
    color: #ffffff; /* Couleur différente pour l'accueil */
    font-weight: bold; /* Mettre en gras pour plus de distinction */
}

.navMenu .search-form {
    display: flex;
    flex-direction: column; /* Aligner en colonne pour placer le label au-dessus */
    margin-bottom: 20px; /* Ajouter de l'espace après la recherche */
    width: 100%;
}

.navMenu .search-form label {
    display: block; /* Assure que le label est visible */
    color: #ffffff; /* Couleur blanche pour le label "Rechercher" */
    margin-bottom: 5px; /* Espace entre le label et l'input */
    font-size: 16px; /* Ajuster la taille de la police */
}

.navMenu .search-form .input-wrapper {
    display: flex;
    width: 100%;
    align-items: center; /* Aligner l'input et le bouton de recherche sur la même ligne */
}

.navMenu .search-form input {
    padding: 8px;
    font-size: 16px;
    width: 85%; /* Ajuster la largeur du champ de recherche */
    margin-right: 10px; /* Espace entre le champ et le bouton */
    border-radius: 4px;
    border: 1px solid #ccc;
}

.navMenu .search-form button {
    padding: 8px;
    background-color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    width: 40px;
    height: 40px; /* Assurer que le bouton soit carré */
    display: flex;
    align-items: center;
    justify-content: center; /* Centre l'icône dans le bouton */
}

.navMenu .search-form button svg {
    fill: #c91111; /* Changer la couleur de l'icône de recherche */
}

.navMenu .search-form button:hover {
    background-color: #f0f0f0;
}

@media (max-width: 767px) {
    .navMenu {
        width: 100%; /* Pleine largeur sur mobile */
    }

    .MenuContent {
        width: 100%; /* S'adapte à la largeur du menu sur mobile */
    }
}



.menu {
    height: 45px
}

.menu .site-logo {
    padding: 0;
    margin: auto 0
}

.menu .site-logo img {
    max-height: 45px;
    max-width: 100%
}

.menu .site-logo amp-img img {
    max-height: 60px
}

.centerv {
    vertical-align: middle;
    margin-top: auto;
    margin-bottom: auto
}

.menu-mobile, .menu-messenger, .menu-panier {
    padding: 6px 0 0;
    font-size: 2rem
}

@media (max-width: 991px) {
    .container {
        padding-right: 10px;
        padding-left: 10px;
        max-width: 990px
    }

    .menu-desktop {
        display: none
    }

    #navLateral ul {
        display: flex;
        flex-direction: row
    }

    #navLateral {
        width: 100%;
        top: auto;
        bottom: 0;
        box-sizing: border-box
    }

    #navLateral ul {
        flex-direction: row;
        box-sizing: border-box
    }

    #navLateral ul li {
        padding: 0 10px
    }
}

@media (min-width: 992px) {
    .menu-mobile {
        display: none
    }

    #navLateral ul {
        display: flex;
        flex-direction: column
    }

    #navLateral {
        right: 0;
        top: auto;
        bottom: 5%
    }

    #navLateral ul {
        flex-direction: column
    }

    #navLateral ul li {
        padding: 10px 0
    }

    .container {
        padding-right: 10px;
        padding-left: 10px;
        max-width: 1170px
    }
}

@media (min-width: 1360px) {
    .container {
        padding-right: 10px;
        padding-left: 10px;
        max-width: 1360px
    }
}

.menu-search {
    padding: 8px 0 0
}

.menu .menu-desktop .menu-search .search-submit {
    display: block;
    padding-bottom: .5rem
}

.search-field {
    line-height: 1;
    flex-grow: 1
}

.search-field input[type=submit]:hover {
    background-color: transparent
}

.search-field .widget-search {
    width: 100%
}

.search-field input[type=search] {
    background-color: #fff
}

.menu-desktop .menu-search {
    width: 100%;
    position: relative;
    display: flex
}

.menu-desktop .search-field {
    direction: ltr;
    height: 30px;
    word-break: break-word;
    margin: 0;
    padding-left: 12px;
    box-sizing: border-box;
    line-height: 1;
    flex-grow: 1;
    display: inline-block;
    border: 1px solid #222;
    border-right: none;
    border-radius: 10px 0 0 10px;
    outline: none;
    transition: all .3s ease;
    appearance: none;
    width: 100%;
    background-color: #fafbfc;
    height: 30px;
    font-size: 14px
}

.menu-desktop .search-submit {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-block;
    border: 1px solid #222;
    border-left: none;
    border-radius: 0 10px 10px 0;
    outline: none;
    background: #c91111;
    text-align: center;
    color: #fff;
    fill: #fff;
    cursor: pointer;
    font-size: 20px
}

#navLateral {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background: rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    position: fixed;
    z-index: 91;
    transition: all .5s;
    opacity: .75
}

.grow {
    transition: all .2s ease-in-out
}

.grow:hover {
    transform: scale(1.1)
}

#navLateral ul {
    transition: all .3s ease;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    list-style-type: none
}

#navLateral li {
    list-style-type: none;
    color: #c91111;
    background-color: #fff;
    cursor: pointer;
    display: block;
    border-radius: 10px
}

#navLateral ul li:hover {
    opacity: 1
}

body, .maincontent {
    scroll-behavior: smooth
}

#maincontentid {
    scroll-behavior: smooth;
    padding-top: 1rem
}

.subnav {
    float: left;
    overflow: hidden
}

.subnav-content {
    display: none;
    position: absolute;
    padding: 2px 5px;
    background-color: #c91111;
    z-index: 100;
    border-radius: 5px 5px 10px 10px
}

.subnav-content a {
    float: left;
    color: #fff;
    text-decoration: none
}

.subnav-content a:hover {
    background-color: #f2f3f4;
    color: #C91111
}

.subnav:hover .subnav-content {
    display: block
}

.grilled {
    background: #fff;
    -webkit-border-top-left-radius: 2rem;
    -webkit-border-top-right-radius: 2rem;
    -webkit-border-bottom-right-radius: 1rem;
    -webkit-border-bottom-left-radius: 1rem;
    -moz-border-radius-topleft: 2rem;
    -moz-border-radius-topright: 2rem;
    -moz-border-radius-bottomright: 1rem;
    -moz-border-radius-bottomleft: 1rem;
    border-radius: 2rem 2rem 1rem 1rem;
    border: 1px dotted #c91111
}

@media (max-width: 480px) {
    [class*="major"] {
        grid-column: auto/span 2
    }
}

#ancreur {
    height: 15rem;
    overflow-y: scroll;
    padding-left: 1rem;
    border: solid 1px #c91111; 
}

#ancreur a {
    text-decoration: none;
    color: #555555
}

#ancreur a:hover {
    color: #e50000;
    text-decoration: underline
}

.paside {
    padding: 2rem 3rem
}

section {
    margin-top: .5rem
}

.txt-index a {
    text-decoration: none
}

.img-index {
    margin-bottom: 1rem
}

.color-vert {
    color: #11c911
}

.color-rouge {
    color: #c91111
}

.dewrap {
    white-space: normal !important
}

.color-orange {
    color: #ffbf5f
}

.color-orange a, .color-orange a:hover {
    color: unset;
    text-decoration: none
}

.color-gris {
    color: #ccc
}

.color-gris a {
    color: unset;
    text-decoration: none
}

.ariane {
    padding: 0;
    line-height: 2
}

.ariane li, .ariane ol {
    float: left;
    list-style-type: none;
    text-transform: capitalize;
    min-width: 4em;
    padding: 0 .8em .8em 0
}

.ariane li a {
    color: #555555;
    text-decoration: none;
    display: inline-block
}

.ariane li a:active, .ariane li a:focus, .ariane li a:hover {
    color: #e50000;
    text-decoration: underline
}

.ariane .subnav-content {
    background-color: #f2f3f4
}

.ariane li a span.toolrouge {
    display: none;
    color: #fff;
    background: rgba(201, 17, 17, 1);
    padding: 8px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    width: auto;
    text-align: center;
    position: absolute;
    z-index: 10
}

.ariane li a:hover span.toolrouge {
    display: block
}

.tri input[type="radio"] {
    display: none
}

.tri label {
    text-align: center;
    letter-spacing: -1px;
    background-color: #0da000;
    color: white;
    /* border: solid 2px #0da000; */
    cursor: pointer;
    margin: 0 4px;
    border-radius: 0.5em/50%;
    padding: 2px 0.5em 2px 0;
    background-image: url(../icon/3dbg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.tri label:hover {
    /* Ce qu'on aurait aimer faire :
    background-color: #0da000; */
    background-color: #c91111;
    color: #fff
}

.tri input[type="radio"]:checked + label {
    /* background: #0da000; */
    background: #c91111;
    border: 0 !important;
    color: #fff;
    background-image: url(../icon/3dbg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%
}

/*== ASPECT ratio */
[style*="--aspect-ratio"] > :first-child {
    width: 100%
}

[style*="--aspect-ratio"] > img {
    height: auto
}

@supports (--custom:property) {
    [style*="--aspect-ratio"] {
        position: relative;
    }

    [style*="--aspect-ratio"]::before {
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--aspect-ratio)));
    }

    [style*="--aspect-ratio"] > :first-child {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }
}

::selection {
    background: #f9cccc;
    color: #191111
}

::-moz-selection {
    background: #f9cccc;
    color: #191111
}

.blue500 {
    background-color: #0275d8
}

.rouge500 {
    background-color: #c91111
}

.head500 {
    background-color: #ddd
}

.fadette {
    font-family: monospace, "Lucida Sans Typewriter", "Lucida Typewriter", "DejaVu Sans Mono", Courier
}

.fadette table {
    table-layout: auto
}

.fadette table th {
    border-bottom: 1px dashed #666
}

.fadette table tfoot {
    border-top: 1px dashed #666
}

.nocut {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.iscut {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text
}

.boxcnx {
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;
    background-color: #efefef;
    border: 1px #c91111 dotted
}

.boxcnx-in {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1rem;
    padding-bottom: 1rem
}

.boxcnx-in label {
    margin-bottom: 0;
    vertical-align: top
}

.hrcnx {
    margin: 5px 0;
    border: 0 dotted;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f0, #c91111, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #c91111, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #c91111, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #c91111, #f0f0f0)
}

@font-face {
    font-family: 'azmotors';
    src: url(font/azmotors.eot);
    src: url(font/azmotors.eot) format("embedded-opentype"), url(font/azmotors.woff2) format("woff2"), url(font/azmotors.woff) format("woff"), url(font/azmotors.ttf) format("truetype"), url(font/azmotors.svg) format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

[class^="k-"]:before, [class*=" k-"]:before {
    font-family: "azmotors";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    font-size: 120%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.k-check-circle1:before {
    content: '\e99d'
}

.k-azmotors:before {
    content: '\e959';
    font-size: 140%
}

.k-arrow-alt-circle-left:before {
    content: '\e957'
}

.k-KYMCO:before {
    content: '\e95d'
}

.k-quad:before {
    content: '\e960'
}

.k-HYTRACK:before {
    content: '\e95a'
}

.k-ROYALENDFIELD:before {
    content: '\e95e'
}

.k-gift-nice:before {
    content: '\e93d'
}

.k-search:before {
    content: '\e91f'
}

.k-envelope:before {
    content: '\e9a6'
}

.k-envelope1:before {
    content: '\e9a7'
}

.k-shield-alt:before {
    content: '\e994'
}

.k-professionnel:before {
    content: '\e9a4'
}

.k-portrait:before {
    content: '\e976'
}

.k-address-card1:before {
    content: '\e975'
}

.k-round-contact_phone:before {
    content: '\e94d'
}

.k-phone-volume:before {
    content: '\e931'
}

.k-globe-europe:before {
    content: '\e993'
}

.k-round-contact_mail:before {
    content: '\e94c'
}

.k-gears1:before {
    content: '\e801'
}

.k-history:before {
    content: '\e918'
}

.k-truck-loading:before {
    content: '\e992'
}

.k-cart-plus:before {
    content: '\e921'
}

.k-tools1:before {
    content: '\e9b2'
}

.k-engrenage:before {
    content: '\e9b0'
}

.k-sku-1:before {
    content: '\e92a'
}

.k-tools1:before {
    content: '\e9b2'
}

.k-clipboard-check:before {
    content: '\e9a1'
}

.k-livraison-rapide:before {
    content: '\e986'
}

.k-minus-square1:before {
    content: '\e999'
}

.k-plus-square1:before {
    content: '\e998'
}

.k-paiement-securise1:before {
    content: '\e97d'
}

.k-colis-load:before {
    content: '\e93c'
}

.k-file-text-o:before {
    content: '\f0f6'
}

.k-file-pdf:before {
    content: '\eadf'
}

.k-screwdriver1:before {
    content: '\e9b1'
}

.k-wrench:before {
    content: '\f0ad'
}

.k-tools:before {
    content: '\e9af'
}

.k-cogs-gears:before {
    content: '\f085'
}

.k-tag-blank:before {
    content: '\e930'
}

.k-comment-dots1:before {
    content: '\e939'
}

.zoom {
    position: absolute;
    top: .5em;
    right: .5em;
    z-index: 9;
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 100%;
    box-sizing: content-box;
    background-color: #c91111;
    color: #fff
}

.modal {
    display: none;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(119, 0, 0);
    background-color: rgba(119, 0, 0, 0.4)
}

.modal-content {
    position: relative;
    top: 10vh;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation-name: animatetop;
    animation-duration: .4s
}

.modal-header, .modal-footer {
    padding: 2px 16px;
    background-color: #c91111;
    color: white
}

.modal-body {
    padding: 2px 16px
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

.close {
    float: right;
    font-size: 28px;
    font-weight: bold
}

.close:hover, .close:focus {
    color: #666;
    text-decoration: none;
    cursor: pointer
}

#LesRelaisColis {
    width: 100%;
    border: 0
}

.divy::after {
    border: 1px dotted #000
}