.clear,.row>div.pod,hr {
    clear: both
}

.articlePreview h3 a,.js .showHide h2.closed a,.js .showHide h3.closed a,.podLink a,a.control.hasControlText,ul.searchmodal li a {
    text-decoration: none
}

.uppercase {
    text-transform: uppercase
}

.italique {
    font-style: italic
}

.normal {
    font-weight: 400
}

.bold {
    font-weight: 700
}

.txtsmall {
    font-size: 80%
}

.ftl-none {
    float: none
}

.ftl-left,.left {
    float: left
}

.ftl-right,.right {
    float: right
}

.small-hidden {
    visibility: hidden
}

.small-show {
    visibility: visible
}

.displaynone,.small-displaynone {
    display: none
}

.displayblock,.small-displayblock {
    display: block
}

.txt-hidden {
    display: none;
    visibility: hidden
}

.arrondi,.block-center,hr {
    display: block
}

.txtleft {
    text-align: left!important
}

.text-align-right,.txtright {
    text-align: right!important
}

.center,.text-center {
    text-align: center!important
}

.border-btm-grey,.border-grey {
    border: 1px solid #d5d5d5
}

.noBorder {
    border: 0
}

.border-left {
    border-left: 1px solid #d5d5d5
}

.border-right {
    border-right: 1px solid #d5d5d5
}

.border-top {
    border-top: 1px solid #d5d5d5
}

.border-bottom {
    border-bottom: 1px solid #d5d5d5
}

.dashed {
    border-top: 1px dashed #d5d5d5
}

.margin-top {
    margin-top: 1em
}

.margin-left {
    margin-left: 1em
}

.margin-right {
    margin-right: 3em
}

.margin-bottom {
    margin-bottom: 0
}

.margin-top-2 {
    margin-top: .5em
}

.margin-left-2 {
    margin-left: 7em
}

.block-center,.center-bloc {
    margin: 0 auto
}

.padding-top {
    padding: 1em 0
}

.padding-right {
    padding-right: 1em
}

.hide-text {
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap
}

.button-2,.times dd {
    white-space: normal
}

.arrondi {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px
}

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

.ptradio {
    padding-top: .5em
}

.neg-mtshalf {
    margin-top: -.5em
}

.neg-mts {
    margin-top: -1em
}

.man {
    margin: 0
}

.mt025 {
    margin: .25em
}

.mt025-top {
    margin: .25em 0
}

.mas {
    margin: 1em
}

.mam {
    margin: 2em
}

.maslr {
    margin: 0 1em
}

.mts {
    margin-top: 1em
}

.mtshalf {
    margin-top: .5em
}

.mbtshalf {
    margin-bottom: .5em
}

.mtm {
    margin-top: 2em
}

.mbn {
    margin-bottom: 0
}

.mtn {
    margin-top: 0
}

.mbs {
    margin-bottom: 1em
}

.mbm {
    margin-bottom: 2em
}

.ml {
    margin-left: 1em
}

.mlhalf {
    margin-left: .5em
}

.ml2 {
    margin-left: 2em
}

.mr {
    margin-right: 1em
}

.mr2 {
    margin-right: 2em
}

.mrhalf {
    margin-right: .5em
}

.phalf {
    padding-right: .5em;
    padding-left: .5em
}

.pl {
    padding-left: 1em
}

.pr {
    padding-right: 1em
}

.pan,.row.pan {
    padding: 0
}

.pas {
    padding: 1em
}

.pam {
    padding: 2em
}

.ptn {
    padding-top: 0
}

.ptnhalf {
    padding-top: .5em
}

.pts {
    padding-top: 1em
}

.ptm {
    padding-top: 2em
}

.pbn {
    padding-bottom: 0
}

.pbs {
    padding-bottom: 1em
}

.pbm {
    padding-bottom: 2em
}

img {
    max-width: 100%
}

small,sub,sup {
    font-size: .9em!important
}

small p {
    line-height: 1.4em
}

hr {
    height: 1px;
    margin: 2em 0;
    color: #d5d5d5;
    border: 0;
    border-bottom: 1px solid #d5d5d5
}

ul.li {
    padding: 0 0 1em;
    font-size: 1em
}

.contentfull {
    width: 100%
}

input:-moz-placeholder {
    color: #5c5c5a
}

::-webkit-input-placeholder {
    color: #5c5c5a
}

::-moz-placeholder {
    color: #5c5c5a
}

:-ms-input-placeholder {
    color: #5c5c5a
}

.titre-2 {
    float: none;
    margin-left: .5em
}

.bleu,.noir {
    color: #000
}

.red {
    color: red
}

.blueclair-txt {
    color: #72c7e7
}

.orangetxt {
    color: #ffb81c
}

.bt-detail,.content h1 a:visited,.content h2 a:visited,.content h3 a:visited,.content h4 a:visited,.content h5 a:visited,.content h6 a:visited,.podContent a:visited,h1 a:visited,h2 a span.small,h2 a:visited,h3 a:visited,h4 a:visited,h5 a:visited,h6 a:visited {
    color: #000
}

h2 a span.small {
    line-height: 2.5em!important
}

.bt-detail {
    float: right;
    position: absolute;
    right: .25em;
    top: 50%;
    height: 2.5em;
    margin-top: -1.25em;
    padding-right: 2.25em;
    padding-top: .55em;
    text-align: right;
    cursor: pointer;
    text-transform: none;
    font-weight: 400
}

.bt-detail.small {
    font-size: 1em;
    margin-right: 1em;
    margin-top: -1.25em;
    font-weight: 400
}

.progressBar .label,.tooltip .tool-content {
    font-size: .875em;
    font-weight: 400
}

.inc-readspeaker {
    background: url(../images/icons/inc-readspeaker.png) no-repeat;
    padding-left: 2em
}

.svg .inc-readspeaker {
    background: url(../images/icons/inc-readspeaker.svg) no-repeat
}

.inc-video {
    background: url(../images/icons/inc-video.png) no-repeat;
    padding-left: 2em
}

.svg .inc-video {
    background: url(../images/icons/inc-video.svg) no-repeat
}

.inbox,.sendbox {
    height: 2.5em;
    width: 4em
}

.inbox {
    background: url(../images/icons/icon-inbox.png) top center no-repeat
}

.svg .inbox {
    background: url(../images/icons/icon-inbox.svg) top center no-repeat
}

.sendbox {
    background: url(../images/icons/icon-sendbox.png) top center no-repeat
}

.svg .sendbox {
    background: url(../images/icons/icon-sendbox.svg) top center no-repeat
}

.icnInfo {
    width: 30px;
    height: 30px;
    background-image: url(../images/icons/icon-advice-info-small.png)
}

.svg .bloc .icnInfo,.svg .content-info .icnInfo {
    background: url(../images/icons/icon-advice-info.svg) 100% .2em/1.6em no-repeat rgba(0,0,0,0)
}

.myagent {
    background: url(../images/icons/myagent.png) 0 1em no-repeat
}

.svg .myagent {
    background: url(../images/icons/myagent.svg) 0 1em/2em no-repeat;
    background-size: 1.75em 1.75em
}

.bt-detail {
    background: url(../images/icons/icon-plus.png) top right no-repeat
}

.svg .bt-detail {
    background: url(../images/icons/icon-plus.svg) 100% .25em/2em no-repeat rgba(0,0,0,0)
}

.bt-detail.true {
    background: url(../images/icons/icon-minus.png) 100% .4em/1.65em auto no-repeat rgba(0,0,0,0)
}

.svg .bt-detail.true {
    background: url(../images/icons/icon-minus.svg) 100% .3em/2em no-repeat rgba(0,0,0,0)
}

.tooltip {
    outline: 0;
    position: relative;
    background-size: 1.66667em 1.66667em;
    background-repeat: no-repeat;
    background-position: 50% 50%
}

.tooltip .tool-content {
    text-transform: none;
    color: #000;
    opacity: 0;
    visibility: hidden;
    width: 250px;
    position: absolute;
    padding: 1em;
    margin: 0 auto
}

.tooltip:hover .tool-content {
    background: #fff;
    border: 1px solid #c3c2c2;
    border-radius: 5px;
    position: absolute;
    left: -5em;
    top: 1em;
    z-index: 99;
    visibility: visible;
    opacity: 1
}

.progressBar {
    margin-bottom: 1.5em;
    margin-top: .4em
}

@media only screen and (max-width: 30em) {
    .progressBar .stage {
        font-size:.75em
    }
}

@media only screen and (max-width: 35em) {
    .progressBar li,.progressBar li:first-child {
        padding:.5em
    }
}

input[type=text],input[type=password],select,textarea {
    max-width: 80%;
    min-width: 44%
}

input[type=checkbox] {
    margin: .15em .5em 0 0;
    float: left
}

ol ul.listform li,ul.listform li {
    padding: 0 0 1em;
    background-image: none;
    font-size: .75em
}

legend {
    left: -9999px;
    position: absolute
}

label {
    display: inline-block;
    min-width: 25%;
    font-size: 1.4em;
    line-height: 1.2857;
    margin-bottom: .5em
}

li label {
    font-size: 1em
}

input,select,textarea {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1.4em;
    line-height: 1.2857em;
    margin: 0
}

input[disabled=disabled],select[disabled=disabled],textarea[disabled=disabled] {
    color: #a7a8aa
}

input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=month],select,textarea {
    border: 2px solid #ccc;
    border-radius: 5px;
    display: block;
    line-height: 1.2857;
    padding: .4em;
    width: 14.5em;
    text-align: left;
    float: left
}

textarea {
    height: 5em;
    float: left
}

button:focus {
    outline: 0
}

input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=number]:focus,input[type=date]:focus,input[type=month]:focus,select:focus,textarea:focus {
    border-color: #72c7e7;
    outline: 0
}

input[type=number] {
    -moz-appearance: textfield
}

ul.searchmodal {
    position: absolute;
    max-height: 30em;
    overflow-x: auto;
    padding: 0 1.4em;
    background: #fff;
    margin: 2.25em 0 1.4em;
    border: 2px solid #d5d5d5;
    border-radius: .63em;
    display: block;
    box-shadow: 0 0 1em 0 rgba(0,0,0,.05)
}

ul.searchmodal li {
    border-bottom: 1px solid #dedede;
    background: 0 0;
    padding: .4em
}

ul.searchmodal li:last-child {
    border: none
}

ul.searchmodal li:hover {
    background-color: #f2faff
}

ul.searchmodal li a {
    color: #000
}

.faq_select_new {
    max-width: 175px
}

.row:first-child {
    border-top: 0
}

.formPod .row div.row.radio,.row {
    border-top: 1px solid #d5d5d5;
    padding: 1.4em
}

.row>div.pod {
    float: none;
    width: 100%
}

.row>div.custom-radio {
    font-size: 1.5em;
    width: 80%
}

.row.radio li {
    background: 0 0;
    overflow: hidden
}

.row.radio li label {
    float: right;
    margin-top: -2px;
    padding-left: 0
}

.doubleInput input[type=text],.row.radio li input {
    float: left
}

.row.textArea label,.row.textArea>div {
    float: none;
    width: 100%
}

.row.textArea textarea {
    width: 100%
}

.row.labelLong label {
    float: none;
    width: auto
}

.doubleInput .spacer {
    clear: both;
    font-weight: 700;
    padding-left: 25px;
    padding-top: 1em;
    text-transform: uppercase
}

.short-label,input.btn-trash {
    padding: 0;
    border: 0;
    display: block
}

.doubleInput input[type=text],.doubleInput input[type=password],.doubleInput input[type=email],.doubleInput input[type=tel],.doubleInput input[type=number],.doubleInput input[type=date],.doubleInput input[type=month],.doubleInput select {
    float: left
}

.short-label {
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    outline: 0;
    overflow: hidden;
    position: absolute;
    width: 1px
}

.bloc-info input[type=text],.bloc-info input[type=password],.bloc-info input[type=email],.bloc-info input[type=tel],.bloc-info input[type=date],.bloc-info select,.bloc-info textarea,.bloc-info textarea.champfiltre {
    float: left;
    font-size: 1em;
    width: 17em;
    max-width: 17em
}

.svg input.btn-trash {
    background: url(../images/icons/trash.svg) 100% 0/1.7em auto no-repeat
}

input.btn-trash {
    background: url(../images/icons/trash.png) top center no-repeat;
    height: 23px;
    text-indent: -1000px;
    width: 20px
}

.error input[type=text],.error input[type=password],.error input[type=email],.error input[type=tel],.error input[type=date],.error select,.error textarea {
    border-color: #cd4848
}

.custom-radio {
    background: url(../images/radio.png) 2px 3px no-repeat;
    display: block;
    margin-right: .5em;
    float: left;
    height: 25px;
    width: 25px;
    position: relative;
    line-height: 1em;
    z-index: 1
}

.custom-radio:hover {
    background: url(../images/radio-hover.png) 2px 3px no-repeat
}

.custom-radio.selected {
    background: url(../images/radio-selected.png) 2px 3px no-repeat
}

.custom-radio input[type=radio] {
    margin: 1px;
    opacity: 0;
    outline: 0;
    position: absolute;
    z-index: 2;
    cursor: pointer
}

p.delete {
    margin: 1em 0 0;
    border-top: 1px dashed #d5d5d5;
    padding-top: 1em;
    text-align: right
}

.button.delete,.button.delete:focus,.button.delete:hover {
    background: url(../images/icons/images/delete-bt.png) 96% center no-repeat #fff
}

.svg .button.delete,.svg .button.delete:focus,.svg .button.delete:hover {
    background-image: url(../images/icons/delete-bt.svg);
    background-size: 1.5em
}

.bloc-info input[type=checkbox] {
    display: block;
    padding: 0 .25em 0 0;
    margin-right: .5em
}

.grid .bloc-info form {
    float: left;
    margin: 0;
    width: 100%
}

.bloc-info label.date {
    display: block;
    float: left;
    font-size: 1.2em;
    padding-top: 1em;
    width: 34%
}

.bloc-info label {
    display: block;
    float: left;
    line-height: 1.75em;
    margin-right: 1em;
    padding: 7px 0;
    width: auto
}

.bloc-info input[type=submit] {
    background: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    float: left;
    margin-top: 20px;
    outline: 0;
    padding: 4px 10px
}

.bloc-info input[type=submit]:hover {
    background-color: #239fdb;
    border-color: #1b7aa9;
    color: #fff
}

.bloc-info .txt-champsaisie {
    float: left;
    font-weight: 700;
    padding: 1.2em 0;
    width: 50%
}

.bloc-info .resulta-champsaisie {
    float: left;
    padding: .5em .4em .5em 0;
    text-align: right;
    width: 28%
}

.row.radio label {
    margin-bottom: 0
}

.row label.label-radio {
    margin: .001em 0;
    width: 88%
}

div.row.radio {
    border-top: 0;
    padding: 1.4em
}

.helpText {
    background: #f2faff;
    font-size: 1em
}

.upload {
    width: 100%
}

div.row.radio .helpControl {
    margin-top: -.15em
}

.gridform .required {
    display: inline-block;
    height: 1.14286em;
    margin-left: .3em;
    position: relative;
    text-indent: -99999px;
    top: -.1em;
    width: 1.14286em
}

.grid label select.ope {
    font-size: 1em;
    float: right;
    margin-top: -.5em
}

div.grid.rembour input[type=date] {
    width: 8em
}

.txt-no-label {
    clear: left;
    padding-top: .5em;
    margin-bottom: 0
}

input.print {
    display: none;
    cursor: pointer
}

.password.w60.block-center {
    width: 100%
}

.password p {
    float: left
}

.svg .button.blue.no-arrow {
    background-image: none,linear-gradient(to bottom,#e5eaf2,#ccedff);
    width: auto;
    padding: .7em
}

.password .button.yellow {
    margin-top: 1em;
    float: right
}

.password .column4 {
    padding: .5em 0;
    margin: 0
}

.form-questions {
    font-size: 1.4em
}

.form-questions .txt {
    font-weight: 700;
    max-width: 80%
}

.bloc-info-right .errorlist,.form-questions label {
    font-size: 1em
}

.column label input[type=checkbox] {
    display: block;
    float: none;
    margin: 0 auto;
    padding: 0
}

.column label {
    float: none;
    margin-right: 0;
    padding: 0
}

.row:after .helpText,.row:before .helpText {
    background: #ebebeb
}

.helpText.full {
    display: block;
    width: 100%;
    margin-bottom: 1em
}

div .helpText,li .helpText {
    border-bottom: 1px dashed #d5d5d5;
    margin-top: 1em;
    border-top: 1px dashed #d5d5d5;
    padding-top: 1em;
    clear: both
}

.bloc-info {
    border: 1px solid #d5d5d5;
    border-radius: 10px;
    display: table;
    margin-bottom: 1.5em;
    padding: 1em;
    width: 100%
}

.table-responsive .line .column input[name=bban] {
    width: 21em;
    max-width: none
}

.table-responsive {
    display: table;
    position: relative;
    width: 100%;
    background: #e1e7ea;
    font-size: 120%;
    text-align: right;
    vertical-align: baseline;
    border: 1px solid #fff;
    border-right: 0
}

.table-responsive .line {
    background-color: #f1f3f8
}

.table-responsive .line:nth-child(2n) {
    background: #fff
}

.table-responsive .line .column {
    display: table;
    margin-top: .5em;
    font-size: 1em
}

.table-responsive .line.column:nth-child(1) {
    border-left: 1px solid #eee;
    color: #484a4d;
    font-size: 1.2em;
    font-weight: 700
}

.table-responsive .line .column input {
    margin: .5em;
    font-size: 1em;
    height: 2.5em;
    float: right;
    padding: .5em .3em;
    max-width: 8em
}

.table-responsive .line .column input[type=checkbox] {
    min-width: 25%;
    height: 16px;
    width: 16px;
    float: right;
    margin: 0;
    padding: 0
}

.table-responsive .line:last-child .column {
    border-bottom: medium
}

.table-responsive .column {
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    padding: .5em;
    vertical-align: top
}

.table-responsive .column .control,.table-responsive .column:before {
    text-align: left
}

.table-responsive .table-foot,.table-responsive .table-head {
    font-weight: 700
}

.table-responsive .table-head {
    display: table-header-group
}

.table-responsive .table-head .column {
    background: #dbe1ed;
    height: 4.25em
}

.table-responsive .table-foot {
    display: table-footer-group;
    text-align: right
}

.table-responsive .table-foot .column {
    background: #e1e7ea;
    text-align: right
}

.table-responsive .table {
    display: table;
    margin: 10px 0
}

.table-responsive .icnHeading.icnInfo.tooltip {
    height: 1.5em;
    width: 1.5em;
    margin: .25em;
    padding-top: 0
}

.table-responsive .column span.txt {
    width: 60%
}

.table-responsive .table .line>div {
    float: none;
    width: 100%
}

.table-responsive .txtleft {
    vertical-align: middle
}

.table-responsive .total {
    background: #e1e7ea;
    clear: both;
    font-size: 1em;
    font-weight: 700;
    padding: 1em;
    right: 0
}

.table-responsive input {
    text-align: left;
    width: auto
}

.table-responsive p {
    font-size: 1em
}

.table-responsive .new-message {
    color: #000;
    font-weight: 700
}

.table-responsive .new-message .column:first-child {
    background: url(../images/icons/icon-new-message.png) 5px top no-repeat;
    padding-left: 2em
}

.svg .table-responsive .new-message .column:first-child {
    background: url(../images/icons/icon-new-message.svg) 5px top no-repeat;
    border-top: 0
}

.table-responsive input[type=text],.table-responsive input[type=password],.table-responsive select,.table-responsive textarea.champfiltre {
    margin: 0
}

.table-responsive input[type=button] {
    margin: 0 auto;
    cursor: pointer
}

.table-responsive ul {
    margin: 0;
    font-size: 1em
}

.table-responsive ul li {
    margin: 0!important;
    font-size: .9em
}

@media only screen and (max-width: 30em) {
    .table-responsive .tooltip {
        display:block
    }

    .table-responsive .column:first-child.title-responsive,.table-responsive .column:first-child.title-table {
        padding-right: 3.5em
    }

    .table-responsive .column .control {
        display: block;
        width: 74%
    }
}

@media only screen and (min-width: 32em) and (max-width:45em) {
    .table-responsive .column:first-child.title-responsive,.table-responsive .column:first-child.title-table {
        margin-right:4.75em;
        display: block
    }
}

@media only screen and (max-width: 45em) {
    .table-responsive input,.table-responsive select,.table-responsive textarea {
        max-width:50%;
        min-width: 50%;
        width: 50%
    }

    .table-responsive .line .column {
        border-right: 0
    }

    .white.table-responsive {
        border: 1px solid #d5d5d5
    }

    .table-responsive input[type=button] {
        float: right
    }

    .table-responsive {
        margin-bottom: 1em
    }

    .table-responsive .column {
        margin: .5em 0;
        position: relative
    }

    .table-responsive .line .hideline {
        display: none
    }

    .table-responsive .column:first-child {
        border-bottom: none
    }

    .white.table-responsive .line {
        border-top: 1px solid #d5d5d5
    }

    .white.table-responsive,.white.table-responsive .line .showline {
        border-top: none
    }

    .table-responsive .line .column input,.table-responsive .line .column label {
        float: right;
        margin: 0
    }

    .table-responsive .line .showline {
        display: table;
        width: 100%;
        border-top: 1px solid #fff;
        text-align: right
    }

    .table-responsive .column:nth-child(1):before {
        content: "";
        display: none;
        font-weight: 700;
        padding-right: 1em;
        vertical-align: middle
    }

    .table-responsive .total {
        left: 0
    }

    .table-responsive .line .column:last-child,.table-responsive .table {
        border-bottom: medium
    }

    .table-responsive .table-head {
        left: -1000em;
        position: absolute;
        top: -1000em
    }

    .table-responsive .line {
        border: 1px solid #fff
    }

    .table-responsive .line .column:nth-child(1) {
        border-left: medium;
        font-weight: 700
    }

    .table-responsive .line.column:last-child {
        border-right: medium
    }

    .table-responsive .column:first-child,.title-table {
        content: "";
        padding-right: 6em
    }

    .rightmobil,.title-table .rightmobil {
        float: right;
        padding-right: 0
    }

    .table-responsive .column:before {
        width: 50%;
        content: " " attr(data-label) "";
        float: left
    }

    .table-responsive .column.notxt:before {
        content: " " attr(data-label) ""
    }

    .table-responsive .column,.table-responsive .line:last-child .column {
        border-bottom: 0;
        display: table;
        width: 100%;
        border-right: 0
    }

    .table-responsive .head {
        border-bottom: 1px solid #fff
    }

    .table-responsive ul li {
        background: 0 0!important;
        font-size: 1em
    }

    .bloc-accordeon h3 .grid.txtleft .txtright {
        text-align: left!important
    }
}

@media only screen and (min-width: 35em) and (max-width:45em) {
    .table-responsive input[type=text],.table-responsive input[type=password],.table-responsive select,.table-responsive textarea.champfiltre {
        float:right;
        margin: -.5em .5em
    }

    .bt-detail,.table-responsive .column .control {
        font-size: 1.25em
    }

    .table-responsive .column span.txt {
        width: 80%
    }
}

@media only screen and (min-width: 45em) {
    .table-responsive .column,.table-responsive .column:before,.table-responsive .line,.table-responsive .table {
        display:block;
        vertical-align: middle
    }

    .table-responsive .line {
        display: table-row
    }

    .table-responsive .line .column {
        display: table-cell;
        margin-top: 0
    }

    .table-responsive .line .column input,.table-responsive .line .column label {
        margin: 0 auto;
        float: none
    }

    .table-responsive .line .column label {
        display: table
    }

    .table-responsive .column {
        display: table-cell;
        margin-top: 0
    }

    .table-responsive .bt-detail {
        display: none;
        visibility: hidden
    }
}

@media only screen and (min-width: 64em) {
    .table-responsive .column span.txt {
        width:100%
    }

    .table-responsive input[type=button] {
        float: none
    }

    .table-responsive {
        margin: 1em 0
    }
}

.podContent .pod>h2,.podContent .pod>h3 {
    margin: 0 0 1em;
    padding: 0;
    font-size: 2em
}

.pod.noBorder {
    box-shadow: 0 0 0 0 transparent;
    border-radius: 0
}

.pod.noBorder>.podContent {
    padding: 0;
    border-top: 0
}

.podContent.noBorder .pod.noBorder>h2,.podContent.noBorder .pod.noBorder>h3 {
    font-size: 1.8em;
    margin-left: 0;
    margin-right: .7em;
    padding: 0
}

.podContent.noBorder .pod.noBorder h2 {
    font-size: 2.5em;
    margin-bottom: .60869em
}

.podContent.noBorder .pod.noBorder h3 {
    font-size: 2em
}

.podGroup {
    -moz-box-align: stretch;
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    margin: 0 0 0 -2%;
    overflow: auto
}

.podGroup .pod {
    float: left;
    margin-left: 2%;
    width: 48%
}


/*New style for unordered list in pods*/
.pod {
    .podContent {
        ul.unordered-list {
            --distance-from-left: 1.3em;
            font-size: 1rem;
            &:is(.unordered-list--compact) {
                li {
                    padding: 0 26px;
                    margin-bottom: 0.5em;
                    font-size: 0.9rem;
                    padding-left: 0;
                    margin-left: calc(var(--distance-from-left) * 1);

                    &:last-of-type {
                        margin-bottom: 0;
                    }

                    background-image: none;
                    position: relative;
                    &:before {
                        --postion-from-left: -1.105em;
                        --postion-from-top: 0.375em;
                        --disc-dimension: 7px;
                        content: '';
                        position: absolute;
                        left: var(--postion-from-left);
                        top: var(--postion-from-top);
                        background-color: #696969;
                        border-radius: 100%;
                        height: var(--disc-dimension);
                        width: var(--disc-dimension);
                    }
                }
            }
            margin-bottom: 1em;
            ul.unordered-list {
                margin-top: calc(var(--distance-from-left) * 0.5);
                margin-left: calc(var(--distance-from-left) * 1);
            }
        }
    }
}

/*new component pod group no border*/
.podGroup {
    &.podGroup--no-border {
        &[class*='groupOf'] {
            display: grid !important;
            padding: 0;
            margin: 0 0 1em 0;
            grid-template-columns: repeat(1, 1fr);
            margin-bottom: 1em;
            gap: 0;

            @media (width>47em) {
                --cell-space: 1em;
                gap: var(--cell-space);
            }

            .pod {
                --border-radius: 0;
                --unit: 1em;
                border: none;
                width: auto;
                margin: 0;
                border-radius: var(--border-radius);
                box-shadow: none;

                .podContent {
                    border: none;
                }

                & + .pod {
                    position: relative;
                    display: block;
                    margin-top: calc(var(--unit) * 1.5);

                    &:before {
                        --border-width: 1px;
                        content: ' ';
                        position: absolute;
                        width: 100%;
                        left: 0;
                        top: calc(var(--unit) * -0.8);
                        height: var(--border-width);
                        background-color: #bebebe;

                        @media (width>47em) {
                            top: 50%;
                            transform: translateY(-50%);
                            height: 95%;
                            width: var(--border-width);
                            left: calc(var(--unit) * -0.5);
                        }
                    }

                    @media (width>47em) {
                        margin-top: 0;
                    }
                }
            }

            @media (width>47em) {
                &:is(.groupOfTwo) {
                    grid-template-columns: repeat(2, 1fr);
                }

                &:is(.groupOfThree) {
                    grid-template-columns: repeat(3, 1fr);
                }

                &:is(.groupOfFour) {
                    grid-template-columns: repeat(4, 1fr);
                }

                &:is(.groupOfFive) {
                    grid-template-columns: repeat(5, 1fr);
                }
            }
        }
    }
}




.podTopImage {
    margin-bottom: 1.25em;
    min-height: 12em
}

.podSideImage {
    float: right;
    margin-bottom: 0;
    width: 40%;
    min-height: 12em;
    background-repeat: no-repeat;
    background-size: cover
}

.bigpodImage,.grid {
    width: 100%
}

.pod.botAligned {
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    display: flex;
    flex-direction: column
}

.podLink a {
    background: url(../images/icons/list-links.png) 100% center no-repeat;
    padding-right: 20px;
    display: inline-block;
    margin-right: 2em;
    font-weight: 400
}

.pod .formPod>h2,.pod .formPod>h3 {
    margin: 1em
}

.formPod .row div p.result {
    margin: .5em 0 0;
    font-weight: 400
}

.formPod .podContent,.formPod .row {
    border-top: 1px solid #d5d5d5
}

.formPod .row.pbn {
    padding-bottom: 0
}

.bloc-accordeon {
    margin: 0 1.4em 1.4em
}

.bloc-accordeon .img {
    margin-bottom: 1em
}

.js .showHide>h2 {
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 0;
    margin-top: 0
}

.bloc-accordeon:nth-child(odd) h2,.bloc-accordeon:nth-child(odd) h3 {
    background-color: #f1f3f8
}

.bloc-accordeon:nth-child(even) h2,.bloc-accordeon:nth-child(even) h3 {
    background-color: #fff
}

.js .showHide>div {
    padding: 1em
}

.js .showHide .showHideSection {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #ebf8fe;
    border-color: #fff;
    border-image: none;
    border-style: solid;
    border-width: 0 1px 1px;
    margin: 0 -1px -1px
}

.bloc-accordeon .bloc-accordeon:nth-child(odd) .showHide>h3 {
    background: #f1f3f8
}

.bloc-accordeon .bloc-accordeon:nth-child(even) .showHide>h3 {
    background: #fff
}

.bloc-accordeon_parent-style>.showHide>.onerow {
    border: 1px dashed #ccc;
    border-width: 0 1px
}

.js .pod .bloc-accordeon_parent-style>.showHide>h3.closed:first-child {
    border: 1px dashed #ccc;
    border-width: 1px 1px 0;
    background: #e5eaf2
}

@media only screen and (max-width: 35em) {
    .bloc-accordeon-2,.bloc-accordeon-3 {
        display:block;
        visibility: visible
    }

    .bloc-accordeon-2 {
        margin: 0 1.4em 1.4em
    }

    .js .showHide>h2 {
        background-color: #f2f9ff;
        border: 1px solid #fff;
        border-radius: 0;
        margin-top: 0
    }

    .js .showHide .showHideSection {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: #f2f9ff;
        border-color: #fff;
        border-image: none;
        border-style: solid;
        border-width: 0 1px 1px;
        margin: 0 -1px -1px
    }
}

@media only screen and (min-width: 35em) and (max-width:45em) {
    .bloc-accordeon-2,.bloc-accordeon-3 {
        display:block;
        visibility: visible
    }

    .bloc-accordeon-2 {
        margin: 0 1.4em 1.4em
    }

    .js .showHide>h2 {
        background-color: #f2f9ff;
        border: 1px solid #fff;
        border-radius: 0;
        margin-top: 0
    }

    .js .showHide .showHideSection {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        background-color: #f2f9ff;
        border-color: #fff;
        border-image: none;
        border-style: solid;
        border-width: 0 1px 1px;
        margin: 0 -1px -1px
    }
}

/*New show/hide component*/
.showHide {
    &.showHide--custom {
        --minus-icon: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='25px' height='25px' viewBox='0 0 25 25' enable-background='new 0 0 25 25' xml:space='preserve'%3E%3Cg%3E%3Ccircle fill='none' stroke='%23000000' stroke-miterlimit='10' cx='12.438' cy='12.563' r='11.104'/%3E%3Cline fill='none' stroke='%23000000' stroke-width='2' stroke-miterlimit='10' x1='17.063' y1='12.563' x2='7.811' y2='12.563'/%3E%3C/g%3E%3C/svg%3E");
        --plus-icon: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='24.04px' height='24.04px' viewBox='-0.02 -0.02 24.04 24.04' enable-background='new -0.02 -0.02 24.04 24.04' xml:space='preserve'%3E%3Ccircle fill='none' stroke='%23000000' stroke-miterlimit='10' cx='12.073' cy='12.073' r='10.78'/%3E%3Cline fill='none' stroke='%23000000' stroke-width='2' stroke-miterlimit='10' x1='12.073' y1='7.582' x2='12.073' y2='16.564'/%3E%3Cline fill='none' stroke='%23000000' stroke-width='2' stroke-miterlimit='10' x1='16.564' y1='12.073' x2='7.582' y2='12.073'/%3E%3C/svg%3E");
        --icon-global-size: 20px;
        --border-radius: 0;
        --border-style: 1px #d5d5d5 solid;
        --border-transparent: 1px transparent solid;
        --primary-color: #e5edf8;
        --secondary-color: #d5d5d5;
        --main-transition: all 1s;
        border-bottom: none;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        h2.showHide__header[role='button'] {
            cursor: pointer;
            outline: var(--border-style);
            border-radius: 0;
            border-top-left-radius: var(--border-radius);
            border-top-right-radius: var(--border-radius);
            margin-bottom: 0;
            background-color: var(--primary-color);
            position: relative;
            transition: var(--main-transition);
            padding: 1em;
            border: none;
            &:after {
                --icon-size: var(--icon-global-size);
                content: '';
                height: var(--icon-size);
                width: var(--icon-size);
                position: absolute;
                right: 1em;
                top: 50%;
                transform: translatey(-50%);
                background-image: var(--plus-icon);
                background-size: contain;
            }

            &:before {
                content: attr(data-showhide);
                display: block;
                position: absolute;
                right: 2.8em;
                font-weight: 500;
                top: 50%;
                transform: translateY(-50%);
                padding-top: 0.3em;
                font-family: Arial, Helvetica, sans-serif;
                font-weight: 300;
            }
            & + div.showHide__content {
                max-height: 0;
                padding: 0;
                overflow: hidden;
                transition: var(--main-transition);
                border-color: transparent !important;
                border: var(--border-transparent) !important;
            }
            &:hover {
                background-color: var(--secondary-color);
            }
        }
        h2.showHide__header[role='button'].active {
            position: relative;
            outline: var(--border-style) !important;
            border-radius: 0;
            border-top-left-radius: var(--border-radius);
            border-top-right-radius: var(--border-radius);
            transition: var(--main-transition);
            background-color: var(--secondary-color);
            &:after {
                --icon-size: var(--icon-global-size);
                content: '';
                height: var(--icon-size);
                width: var(--icon-size);
                position: absolute;
                top: 50%;
                transform: translatey(-50%);
                background-image: var(--minus-icon);
                background-size: contain;
            }
            &:before {
                font-weight: 600;
            }
            & + div.showHide__content {
                --max-height: 1000px;
                max-height: var(--max-height);
                transition: var(--main-transition);
                border: var(--border-style) !important ;
            }
        }

        & > div {
            .pod {
                &:last-of-type {
                    margin-bottom: 0;
                }
            }
        }
    }
}


.unordered-list.unordered-list--compact {
    li {
        &:last-of-type {
            margin-bottom: 0 !important;
        }
    }
}

.grid {
    display: table
}

.grid form {
    float: none
}

.w15 {
    width: 15%
}

.w20 {
    width: 20%
}

.w25 {
    width: 25%
}

.w30 {
    width: 30%
}

.w32 {
    width: 32%
}

.w33 {
    width: 33.3333%
}

.w35 {
    width: 35%
}

.w40 {
    width: 40%
}

.w50 {
    width: 50%
}

.w60 {
    width: 60%
}

.w80 {
    width: 80%
}

.w90 {
    width: 90%
}

.w100 {
    width: 100%
}

.wauto {
    width: auto!important
}

.columnhalf-1 {
    width: 6.25%
}

.column1 {
    width: 8.33333%
}

.column2 {
    width: 16.6667%
}

.column3 {
    width: 25%
}

.column4 {
    width: 33.3333%
}

.column5 {
    width: 39.5%
}

.column5-5 {
    width: 46.83%
}

.column6 {
    width: 50%
}

.column7 {
    width: 60.5%
}

.column8 {
    width: 66.6667%
}

.column9 {
    width: 75%
}

.column10 {
    width: 83.3333%
}

.column11 {
    width: 91.67%
}

.column12 {
    width: 100%
}

.column1,.column10,.column11,.column12,.column2,.column3,.column4,.column5,.column5-5,.column6,.column7,.column8,.column9,.columnhalf {
    float: left;
    margin: auto
}

@media only screen and (max-width: 45em) {
    .column1,.column10,.column11,.column12,.column2,.column3,.column4,.column5,.column5-5,.column6,.column7,.column8,.column9,.columnhalf {
        display:block;
        width: 100%
    }
}

@media only screen and (max-width: 30em) {
    .column1.last,.column10.last,.column11.last,.column12,.column2.last,.column3.last,.column4.last,.column5-5.last,.column5.last,.column6.last,.column7.last,.column8.last,.column9.last,.columnhalf.last {
        margin:0
    }
}

.col-left-2,.col-right-2 {
    margin-bottom: .5em;
    font-size: 1.4em;
    float: left
}

.col-left,.col-right {
    float: left;
    font-size: 1.4em
}

.col-left {
    border-right: 1px solid #d5d5d5
}

.bloc-info-left,.bloc-info-left-3,.bloc-info-right,.bloc-info-right-3 {
    float: left
}

.bloc-info-left,.bloc-info-left-3 {
    font-weight: 700
}

.col-left .bloc-info-left,.col-right .bloc-info-left {
    font-weight: 700;
    padding: .5em 0 0;
    width: 100%
}

.col-left .bloc-info-right,.col-right .bloc-info-right {
    padding: 0 0 .5em;
    width: 100%
}

.col-left-2 {
    margin-right: 5%;
    width: 45%
}

.col-left-2 .bloc-info-left,.col-right-2 .bloc-info-left {
    padding: .5em 0;
    width: 70%
}

.col-left-2 .bloc-info-right,.col-right-2 .bloc-info-right {
    padding: .5em 0;
    width: 30%
}

.col-right-2 {
    margin-left: 5%;
    width: 45%
}

.col-left-3,.col-right-3 {
    float: left;
    font-size: 1.4em
}

.col-left-3 {
    padding-right: 2%;
    width: 50%
}

.col-right-3 {
    padding-left: 2%;
    width: 22%
}

.col-left-3 .bloc-info-left-3,.col-right-3 .bloc-info-left-3 {
    padding: .5em 0 0;
    width: 100%
}

.col-left-3 .bloc-info-right-3,.col-right-3 .bloc-info-right-3 {
    padding: 0 0 .5em;
    width: 100%
}

.col-right-3 .bloc-info-left-3,.col-right-3 .bloc-info-right-3 {
    text-align: center
}

.col-2 {
    float: left;
    font-size: 1.4em;
    width: 100%
}

.col-2 .bloc-info-left {
    padding: .5em 0;
    width: 31%
}

.col-2 .bloc-info-right {
    padding: .5em 0;
    width: 69%
}

@media only screen and (max-width: 35em) {
    .col-left {
        margin-bottom:.5em;
        padding-bottom: 1em;
        width: 100%;
        border-right: 0
    }

    .col-left.col-left-mobile {
        margin-bottom: 0;
        padding-bottom: 0
    }

    .col-right {
        padding-top: 1em;
        width: 100%
    }

    .col-left-2 {
        font-size: 1.4em;
        padding-right: 2%;
        width: 100%
    }

    .col-left-2 .bloc-info-left {
        padding: .5em 0 0;
        width: 90%
    }

    .col-left-2 .bloc-info-right {
        padding: 0 0 .5em;
        width: 90%
    }

    .col-right-2 {
        font-size: 1.4em;
        margin-left: 0;
        padding-right: 0;
        width: 100%
    }

    .col-right-2 .bloc-info-left {
        padding: .5em 0 0;
        width: 100%
    }

    .col-right-2 .bloc-info-right {
        padding: 0 0 .5em;
        width: 100%
    }

    .col-left-3 .bloc-info-left {
        padding: .5em 0;
        width: 70%
    }

    .col-left-3 .bloc-info-right {
        padding: .5em 0;
        width: 30%
    }

    .col-left-3 {
        font-size: 1.4em;
        padding-right: 0;
        width: 100%
    }

    .col-right-3 {
        font-size: 1.4em;
        padding-left: 0;
        width: 100%
    }

    .col-left-3 .bloc-info-left-3 {
        padding: .5em 0 0;
        width: 100%
    }

    .col-left-3 .bloc-info-right-3 {
        padding: 0;
        width: 100%
    }

    .col-right-3 .bloc-info-left-3 {
        padding: 0;
        text-align: left;
        width: 100%
    }

    .col-right-3 .bloc-info-right-3 {
        padding: 0 0 .5em;
        text-align: left;
        width: 100%
    }

    .col-2 .bloc-info-left {
        padding: 0;
        width: 100%
    }

    .col-2 .bloc-info-right {
        padding-top: 0;
        width: 100%
    }
}

@media only screen and (min-width: 35em) and (max-width:45em) {
    .col-left {
        border-right:0;
        padding-bottom: 1em
    }

    .col-left-3 .bloc-info-left {
        padding: .5em 0;
        width: 70%
    }

    .col-left-3 .bloc-info-right {
        padding: .5em 0;
        width: 30%
    }

    .color3-tab {
        background-color: #e1e7ea;
        border-top: 1px solid #fff;
        width: 100%
    }

    .col-right-3 .bloc-info-left-3 {
        text-align: left
    }

    .col-left-3 {
        font-size: 1.4em;
        padding-right: 0;
        width: 100%
    }

    .col-right-3 {
        font-size: 1.4em;
        padding-left: 0;
        width: 100%
    }

    .col-left-3 .bloc-info-left-3 {
        padding: .5em 0 0;
        width: 100%
    }

    .col-left-3 .bloc-info-right-3,.col-right-3 .bloc-info-left-3 {
        padding: 0;
        width: 100%
    }

    .col-right-3 .bloc-info-right-3 {
        text-align: left;
        padding: 0 0 .5em;
        width: 100%
    }

    .col-2 .bloc-info-left {
        padding: 0;
        width: 100%
    }

    .col-2 .bloc-info-right {
        padding-top: 0;
        width: 100%
    }
}

.border-top .onerow,aside .podContent {
    border-top: 1px solid #d5d5d5
}

@media only screen and (min-width: 45em) {
    .col-left {
        padding-right:2%;
        width: 50%
    }

    .col-right {
        padding-left: 2%;
        width: 50%
    }
}

.innerPageHeader {
    position: relative
}

.innerPageHeader .printBtn {
    position: absolute;
    display: block;
    right: 0;
    top: 0;
    width: 25px;
    height: 25px;
    background: url(../images/print.png) no-repeat;
    background-size: contain;
    margin: 10px 5px 0 0
}

aside .pod.podContent.noBorder img.bigpodImage,aside img.left {
    margin-bottom: 0
}

@media only screen and (max-width: 35em) {
    .innerPageHeader .printBtn {
        display:none
    }
}

aside .pod.podContent.noBorder {
    padding: 0
}

aside .txtblue {
    font-weight: 400
}

aside .pod>h2,aside .pod>h3 {
    margin-bottom: 1em
}

aside .pod h2>span,aside .pod h3>span {
    display: block;
    margin-top: .5em
}

aside p {
    display: block;
    clear: left
}

.arbitrage-prev-nex-title {
    text-align: center;
    color: #fff;
    padding: 8px;
    margin: 0 1em 1.4em;
    font-size: 1.5em;
    background: #4d7cb5;
    background: -moz-linear-gradient(top,#4d7cb5 0,#000 99%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4d7cb5),color-stop(99%,#000));
    background: -webkit-linear-gradient(top,#4d7cb5 0,#000 99%);
    background: -o-linear-gradient(top,#4d7cb5 0,#000 99%);
    background: -ms-linear-gradient(top,#4d7cb5 0,#000 99%);
    background: linear-gradient(to bottom,#4d7cb5 0,#000 99%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d7cb5',endColorstr='#000',GradientType=0)
}

.content-trash {
    float: left;
    margin-left: 8%;
    padding: .5em 0;
    text-align: center;
    width: 17%
}

.articlePreview h3 a:hover {
    text-decoration: underline
}

.button-2,.content .button-2,.grid h4.txtblue,.txtblue {
    text-decoration: none
}

#vidalArticle p.date {
    float: right;
    font-size: 1.25em;
    color: #777
}

#vidalArticle .articlePreview h3 {
    float: left;
    width: 85%
}

.featuredOffers img,.hero {
    width: 100%
}

.featuredOffers p {
    clear: both
}

#hero_page-devis,.editohero {
    -webkit-background-size: cover;
    background-size: cover
}

.hero {
    min-height: 27.5em
}

.cutOutImage,.cutOutImage img {
    min-height: 15em;
    background-repeat: no-repeat
}

.hero>p {
    background: rgba(255,255,255,.75);
    font: 2.8em/1.4 Arial,Helvetica,sans-serif;
    padding: .5em 2.6%;
    left: 0;
    color: #000;
    letter-spacing: -.015em;
    position: absolute;
    top: 0
}

.cutOutImage img {
    background-position: 97% 6em
}

.svg .helpControl.checkbox:focus {
    background-position: .2em .2em
}

.helpControl.checkbox {
    float: left;
    margin: 0 .4em .4em;
    padding: .4em
}

.border-top.onerow.mts.mbs.margin-center.w100,.column4.edito {
    padding-top: 1em
}

p a.button.yellow {
    margin: 1.4em 0
}

.column4.edito {
    padding-bottom: 2em
}

.button.detail,.onerow.operation {
    font-size: 1.4em
}

img.left {
    margin-bottom: 1em;
    margin-right: .5em
}

h2 img.icon,h3 img.icon {
    width: auto;
    height: auto;
    float: left;
    margin-right: .5em;
    margin-bottom: .5em
}

.nbaMessage.homepage {
    margin-top: 0
}

.featuredOffers .bigpodImage,.featuredOffers .podImage {
    margin: 0 0 1.4em
}

#vidalArticle img,.bigpodImage,.podImage {
    margin: 0 0 1.4em 1.4em;
    border: 1px solid #d5d5d5;
    border-radius: .63em;
    float: right
}

.adress-title,.info-box,.suite,.txt,p.oblig {
    float: left
}

.cutOutImage.largeCenter,.largeIcon {
    background-position: center 1.4em;
    background-repeat: no-repeat;
    padding-top: 10em;
    text-align: center
}

.cutOutImage {
    background-position: 97% 6em
}

.formPod .row.radio.bbn {
    border-bottom: none;
    padding-bottom: 0
}

.bloc-info .errorlist,.right a.link-show,.txtupload {
    font-size: .8em
}

.bloc-info ol {
    margin: 0 0 1em
}

.content ol li,.content ul li {
    margin: 0 0 .25em 1.4em;
    padding-bottom: .25em
}

.grid h4.txtblue,.txtblue {
    color: #000;
    word-wrap: break-word;
    font-weight: 700;
    border-bottom: none
}

.onerow {
    clear: both
}

/* Underlined link style */
.link {
    &.link--underlined {
        border-bottom: 1px solid #0087c3;
        font-weight: 600;
        transition: all 0.1s;
        padding: initial;
        padding-bottom: 0.3em;
        &:hover {
            border-bottom: 1px solid rgba(0, 136, 195, 0);
            transition: all 0.1s;
        }
    }
}


.grid h4 {
    color: #333
}

.size-content {
    height: 4.8em
}

.size-botton {
    font-size: 1em;
    margin-bottom: 0
}

.titre-paragraphe {
    font-size: 1.7em
}

.contrat-number,.size-boutton,.text-paragraphe {
    font-size: 1.5em
}

.AH,.AH2,.CH2,.bgbleu,.renfort-pack1 {
    background-color: #000;
    color: #fff
}

.AH1,.CH1,.Confort1,.Confort2,.PODH {
    background-color: #00a9e0;
    color: #fff
}

.renfort-pack1 {
    background-color: #abcf91;
    color: #fff
}

.renfort-pack2 {
    background-color: #077933;
    color: #fff
}

.renfort-pack3 {
    background-color: #235937;
    color: #fff
}

.renfort-pack4 {
    background-color: #265938;
    color: #fff
}

.Eco-Pharma {
    background-color: #efb12f;
    color: #fff
}

.ECO {
    background-color: #e4f6fc
}

.grid h4.txtblue {
    margin-bottom: 1em
}

p.oblig {
    width: 100%;
    display: block;
    text-align: left;
    font-size: 12px
}

.pdfname {
    width: 85%
}

.popup_block {
    position: absolute;
    width: auto;
    border: 4px solid #cecece;
    font-size: .875em;
    background-color: #fff
}

.adress.smallbloc-center {
    margin-bottom: 0;
    border-bottom: 0
}

#boxSearch .pod {
    box-shadow: none
}

.adress .grid.border-bottom {
    border-bottom: 0
}

.adress-title {
    font-weight: 700;
    width: 73%
}

div.adress {
    counter-reset: number
}

.adress ol li {
    list-style-type: none;
    counter-increment: number;
    margin: 0 0 1em;
    border-bottom: 1px solid #d5d5d5
}

.adress p {
    margin-bottom: 1em;
    margin-left: 3em
}

.adress ol li:before {
    content: counter(number,decimal);
    background: #000;
    display: block;
    float: left;
    font-size: 1em;
    font-weight: 700;
    color: #fff;
    margin: 0 .5em .25em 0;
    padding: .25em;
    text-align: center;
    vertical-align: top;
    width: 2em;
    -moz-border-radius: .5em;
    border-radius: .5em
}

.info-box,div.tabGroup.messages>div {
    padding: 1em
}

.column a.pdf,.column li.pdf a {
    background: url(../images/icons/icn-inline-pdf.png) center top no-repeat transparent;
    display: block;
    height: 18px;
    width: 16px
}

.info-box p {
    color: #000;
    text-align: left
}

.info-box,div.tabGroup.messages>ul.tabControls li a {
    text-align: center
}

.info-box {
    position: absolute;
    font-size: .875em;
    font-weight: 400;
    margin-top: 1em;
    margin-left: -.5em;
    width: 100%;
    border: 1px solid #cecece;
    display: none;
    background-color: #fff;
    z-index: 101
}

.svg .suite {
    background: url(../images/icons/suite-horiz.svg) .5em 0 no-repeat
}

.suite {
    background: url(../images/icons/suite-horiz.png) top center no-repeat;
    display: block;
    height: 35px;
    margin: 12% 0 0;
    vertical-align: middle;
    width: 45px
}

a.helptable {
    text-indent: -9999px;
    float: right
}

.helptable {
    background-image: url(../images/icons/icon-advice-info-small.png);
    background-repeat: no-repeat;
    height: 21px;
    width: 22px
}

.info-box .column,.info-box .column.title-table {
    color: #000
}

.info-box .helpControl {
    background-size: 1.4em auto
}

label.gestion {
    font-size: 1em;
    margin-top: -.75em
}

div.tabGroup.messages>ul.tabControls {
    margin-bottom: -1px
}

div.border-grey.message {
    margin-top: 1.3em
}

.bloc-info .table-responsive .line .column input.small,.grid input.small {
    width: 4.5em
}

.bloc-info .table-responsive .line .column input.medium,.grid input.medium {
    width: 10em
}

.title-table {
    color: #000;
    font-weight: 700;
    display: block;
    text-align: left;
    text-transform: uppercase
}

.suiteverti,.txtpack {
    display: inline-block
}

.pack,.suiteverti {
    text-align: center
}

.suiteverti {
    background: url(../images/icons/suite.png) top center no-repeat;
    height: 4.5em;
    margin: 0 auto .5em 0;
    width: 100%
}

p.mentions-internes {
    font-size: 1em;
    margin: 1em
}

.bloc-align-left {
    float: left;
    margin: .5em 0;
    width: 40%
}

.bloc-align-left-form-code {
    float: left;
    margin: .5em 0;
    width: 10%
}

.bloc-buttom-left {
    float: left;
    font-size: 1.4em
}

.button-center {
    float: none;
    font-size: 1.4em
}

.txtpack {
    padding-top: .5em;
    margin: 0 auto
}

.pack {
    display: block;
    float: right;
    font-weight: 700;
    padding: .5em;
    width: 7em
}

.button-2 {
    background: url(../images/arrow-back-france.png) left center no-repeat;
    border: 2px solid #000;
    border-radius: 999em;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    padding: 1em 1em 1em 2em;
    text-align: left
}

.city,.clientName,.formule span,.h_horaire,.t_formule,.t_hub_accueil {
    display: block
}

.button-2:focus,.button-2:hover {
    background-color: #d57b1d;
    border-color: #d57b1d;
    color: #000
}

.button-2.yellow {
    background-color: #ffd400;
    border-color: #ffd400
}

.button-2.yellow:focus,.button-2.yellow:hover {
    background-color: #000;
    border-color: #000;
    color: #fff
}

.bloc-repartition {
    font-size: 1.4em;
    width: 100%
}

.bloc-repartition .bloc-info-repatition {
    float: left;
    font-weight: 700;
    padding: .2em 0;
    width: 100%
}

h2.titre {
    font-size: 1.2em
}

.titre-donut {
    float: left;
    margin-left: 2%;
    width: 48%
}

.donut-legend tbody tr td,.donut-legend tbody tr th,.donut-legend tbody tr:nth-child(2n) td,.donut-legend tbody tr:nth-child(2n) th {
    background-color: #fff
}

.donut-left-titre {
    font-size: 1.6em;
    margin: 1em auto;
    width: 100%
}

.donut-right-titre {
    font-size: 1.6em;
    margin: 1em auto;
    width: 70%
}

.donut-left,.donut-right {
    background-size: 100% auto;
    float: left;
    font-size: 1.2em;
    padding: 2%;
    width: 100%
}

.agent-pod .showHide>h3 {
    border-top: 1px solid #ccc
}

.js .agent-pod .showHide {
    border: none;
    overflow: hidden
}

.js .agent-pod .showHide>h2,.js .agent-pod .showHide>h3>a {
    padding: 0
}

.agent-pod {
    border: 0
}

.message>.table-responsive {
    margin: 1em 0
}

.js .tabGroup>h2,.js .tabGroup>h3 {
    left: -9999em;
    position: absolute;
    top: -9999em
}

.js .showHide>h2,.js .tabGroup>h2 {
    padding: 0 1em
}

.js .tabGroup>div {
    border: 1px solid #d5d5d5;
    border-radius: 0 .63em .63em;
    -moz-border-radius: 0 .63em .63em;
    -webkit-border-radius: 0 .63em .63em .63em
}

.js .tabGroup .tabControls li.open a,.js .tabGroup .tabControls li.open a:hover {
    background: #fff;
    border-bottom-color: #fff;
    text-decoration: none
}

.js .tabGroup .tabControls a {
    background-color: #eeeded;
    border: 1px solid #d5d5d5;
    border-radius: .5em .5em 0 0;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    padding: .7em
}

.js .tabGroup .tabControls li {
    background: 0 center transparent;
    display: table-cell;
    padding: 0 .3em 0 0;
    vertical-align: bottom;
    background-image: none
}

.content-info {
    float: left
}

.info {
    margin-left: .5em;
    margin-top: -8px
}

.info a {
    float: left;
    width: 10%
}

.detailsList {
    border: 0 solid #d5d5d5;
    border-radius: 0;
    padding: 0
}

.montant {
    margin-right: 2em;
    text-align: right
}

.bloc-info-content {
    display: table
}

.bloc-accordeon-2,.bloc-accordeon-3,.visible-mobile {
    display: none;
    visibility: hidden
}

.valid input[type=text],.valid input[type=password],.valid input[type=email],.valid input[type=tel],.valid input[type=number],.valid input[type=date],.valid input[type=month],.valid select,.valid textarea {
    border-color: #59b337
}

.valid {
    background-size: 1.9em auto;
    min-height: 3em
}

div.grid.ope div.valid {
    background: url(../images/icons/progress-tick.png) 96% 6px no-repeat;
    background: linear-gradient(transparent,transparent),url(../images/icons/progress-tick.svg) 96% 0 no-repeat
}

.bloc-info-left.valid,.bloc-info-right.valid {
    background: url(../images/icons/progress-tick.png) 95% 6px no-repeat
}

.svg .bloc-info-left.valid,.svg .bloc-info-right.valid,div.valid {
    background: url(../images/icons/progress-tick.svg) 95% 6px no-repeat
}

.errorPod {
    border: 2px solid #cd4848
}

.errorPod p {
    padding-left: 2.5em
}

.errorMessage,.errorlist {
    clear: both;
    min-height: 2em;
    padding: .5em 0 0 1.5em;
    margin-top: 1.5em
}

.radio .errorlist li {
    padding: .5em 0 0 2.5em
}

li a.helpControl,li a.helpControl:focus {
    border: 0;
    font-size: 1em;
    margin: 0 0 .15em;
    padding: 0;
    background-size: 1.6em auto;
    height: 1.6em;
    width: 1.6em;
    background-position: 0 0
}

.helpText.full h4 {
    font-weight: lighter
}

.montant-mobile {
    float: right;
    text-align: right;
    width: 30%
}

.btn-mobole {
    margin-left: 2em
}

.head-arbitrage {
    font-size: 1.4em;
    margin-bottom: 0
}

.champfiltre {
    float: left;
    width: 13%
}

.date-bloc {
    width: 40%
}

.paiment {
    font-size: 1em;
    margin: 0 .5em;
    padding: 0;
    float: left
}

.paiment .custom-radio {
    height: 1.5em;
    margin: 0;
    width: 1.5em
}

@media only screen and (max-width: 20em) {
    .bloc-buttom-left,.bloc-buttom-right {
        float:left
    }

    .popup_block {
        left: 0;
        top: 50%;
        margin: 0 1em
    }

    div.tabGroup.messages>ul.tabControls {
        margin-bottom: -1px
    }

    .js .tabGroup>div {
        border: 1px solid #d5d5d5;
        border-radius: 0 0 .63em .63em;
        -moz-border-radius: 0 0 .63em .63em;
        -webkit-border-radius: 0 0 .63em .63em
    }

    .js .tabGroup .tabControls a {
        padding: .8em 1.92em
    }
}

@media only screen and (max-width: 30em) {
    .bloc-info input[type=text],.bloc-info input[type=password],.bloc-info input[type=email],.bloc-info input[type=tel],.bloc-info input[type=date],.bloc-info select,.bloc-info textarea,.bloc-info textarea.champfiltre {
        max-width:14.5em;
        width: 14.5em
    }

    p.date {
        padding-bottom: 1em
    }

    .bloc-buttom-left,.bloc-buttom-right {
        margin: 0 .5em 1em 0
    }

    .tooltip:hover .tool-content {
        left: -2em
    }

    .form-questions .txt {
        font-weight: 700;
        max-width: 80%
    }

    div.valid {
        background: url(../images/icons/progress-tick.svg) 100% 0 no-repeat
    }

    error input[type=date],input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=month],select,textarea {
        width: 85%
    }

    .row label.label-radio {
        margin: .001em 0;
        width: 80%
    }

    .row.pbn,.row.radio {
        padding: 1.4em 1.4em 0
    }

    .boxTabLinks,.mainTabs,.staticTabs {
        margin: 1em auto;
        overflow: auto
    }

    .boxTabLinks li,.mainTabs li,.staticTabs li,.svg .boxTabLinks li,.svg .mainTabs li,.svg .staticTabs li {
        background-image: none;
        margin: 0;
        padding: .25em 0;
        width: 100%
    }
}

@media only screen and (max-width: 32em) {
    .onerow.operation div {
        width:100%;
        margin: 0 auto;
        padding: 0 0 .5em;
        float: none
    }

    .onerow.operation a.button {
        width: 100%;
        margin: 0;
        display: block
    }

    span.montant {
        text-align: left;
        display: block
    }
}

@media only screen and (min-width: 32em) and (max-width:45em) {
    .onerow.operation div {
        width:50%;
        margin: 0;
        padding: 0 .25em .5em
    }

    .onerow.operation a.button {
        width: 100%
    }
}

@media only screen and (max-width: 35em) {
    .svg .suite {
        background:url(../images/icons/suite.svg) 50% 0 no-repeat transparent;
        background-size: 30% auto
    }

    .suite {
        background: url(../images/icons/suite.png) center top no-repeat;
        display: inline-block;
        height: 35px;
        margin: 0 auto;
        text-align: center;
        background-size: 30% auto;
        width: 100%
    }

    .ope div.valid {
        background: url(../images/icons/progress-tick.png) 70% 6px no-repeat;
        background: linear-gradient(transparent,transparent),url(../images/icons/progress-tick.svg) 70% 0 no-repeat
    }

    #vidalArticle .articlePreview h3 {
        width: 80%;
        clear: both
    }

    .articlePreview img,.podImage {
        width: 100%;
        height: auto
    }

    .hero>p {
        font: 1.8em/1.3 Arial,Helvetica,sans-serif;
        letter-spacing: -.015em;
        padding: .5em 3.4%
    }

    .formPod .row div p.result {
        border-top: 1px dashed #d5d5d5;
        padding-top: .5em;
        font-weight: 400
    }

    .row.radio label:first-child {
        width: 100%;
        padding-bottom: 1em
    }

    .row.radio label {
        float: left;
        margin: 0
    }

    .date-bloc {
        width: 80%
    }

    .row label {
        max-width: 100%
    }

    .titre-2 {
        width: 100%;
        float: left
    }

    .content-info p {
        margin-left: 0;
        text-align: justify
    }

    p.mentions-internes {
        margin: 1em 0
    }

    .margin-left-2,.titre-donut {
        margin-left: 0;
        width: 100%
    }

    .bloc-buttom-right {
        font-size: 1.4em
    }

    .titre-donut {
        float: left
    }

    .donut-left-titre {
        font-size: 1.6em;
        margin: 1em auto;
        width: 80%
    }

    .donut-right-titre {
        font-size: 1.6em;
        margin: 1em auto;
        width: 49%
    }

    .btn-mobile,.btn-mobole {
        margin-left: 0
    }

    .donut-left,.donut-right {
        background-size: 100% auto;
        float: left;
        font-size: 1.2em;
        padding: 2%
    }

    .btn-mobile {
        float: left;
        margin-top: .5em
    }

    .btn-mobileyellow {
        margin: 1em 0;
        float: left
    }

    .margin-bottom,.size-botton {
        margin-bottom: 1em
    }

    .margin-bottom {
        margin-right: 1.4em
    }

    .prix {
        color: #000
    }

    .color3-tab {
        background-color: #e1e7ea;
        border-top: 1px solid #fff;
        width: 100%
    }

    .result,.total {
        border-left: 0 solid #fff;
        font-size: 1.4em;
        font-weight: 700;
        padding: 0
    }

    .montant-mobile {
        float: right;
        text-align: left;
        width: 100%
    }

    .bloc-buttom {
        float: left;
        font-size: 1.4em;
        margin-top: 1em;
        padding-right: 2%
    }

    .btn-mobole {
        float: left;
        margin-top: .5em
    }

    .content-trash {
        float: left;
        margin-left: 8%;
        padding: .5em 0;
        text-align: center;
        width: 17%
    }

    .champfiltre {
        float: left;
        width: 31%
    }

    .size-mobile {
        width: 69%
    }

    .size-mobile-2 {
        width: 74%
    }
}

@media only screen and (min-width: 35em) {
    .podImage {
        width:50%;
        height: auto
    }

    #vidalArticle img,.articlePreview img {
        height: auto;
        width: 48%
    }

    .rembour .column3 {
        width: 50%
    }

    div.grid.ope div.valid,div.grid.rembour div.valid {
        background: url(../images/icons/progress-tick.png) 96% 12px no-repeat;
        background: linear-gradient(transparent,transparent),url(../images/icons/progress-tick.svg) 98% 12px no-repeat
    }

    .row.radio ul {
        padding: 0
    }

    .row>div {
        float: left;
        width: 58%
    }

    .hero>p {
        margin: .5em;
        padding: .5em 2.6%;
        width: 45%
    }

    .row .fauxLabel,.row label {
        margin: 1px
    }
}

@media only screen and (min-width: 35em) and (max-width:55em) {
    div.grid.rembour input[type=date] {
        width:7em
    }

    div.grid.rembour div.valid {
        background: url(../images/icons/progress-tick.png) 70% 12px no-repeat;
        background: linear-gradient(transparent,transparent),url(../images/icons/progress-tick.svg) 70% 12px no-repeat
    }

    .bloc-info .table-responsive .line .column input.small,.grid input.small {
        width: 5em
    }

    .bloc-info .table-responsive .line .column input.medium,.grid input.medium {
        width: 10em
    }

    div.valid {
        background: url(../images/icons/progress-tick.svg) 80% 0 no-repeat
    }
}

@media only screen and (max-width: 45em) {
    label.gestion {
        float:left;
        width: 100%;
        margin: -.75em -4em 1em 1em
    }

    .grid label select.ope {
        float: left
    }

    figcaption.legend h4 {
        width: 100%;
        float: none;
        margin-bottom: .25em
    }

    figcaption.legend ul li {
        display: block;
        float: none;
        margin: .5em 0
    }

    .js .section-nav,.js nav {
        margin-top: -66px
    }

    #vidalArticle .articlePreview h3 {
        width: 100%
    }

    .featuredOffers ul {
        display: block;
        float: left
    }

    .featuredOffers ul,p {
        margin: .7em 0;
        clear: both
    }

    .column label input[type=checkbox] {
        margin-right: .5em
    }

    .column a.pdf,.column li.pdf a {
        float: right
    }

    input.btn-trash {
        float: left
    }

    .transition-start {
        top: 100px
    }

    .transition-stop {
        top: 0;
        position: absolute
    }

    #vidalArticle p.date {
        float: left;
        margin-bottom: 1em;
        clear: left
    }

    .podLink a {
        margin-right: 1em;
        clear: left
    }

    .edito {
        padding-left: 0;
        padding-right: 0
    }

    .formPod {
        border-radius: 0;
        border-left: 0;
        border-right: 0
    }
}

@media only screen and (min-width: 38em) {
    .featuredOffers ul {
        width:49%;
        float: right;
        clear: none
    }
}

@media only screen and (min-width: 35em) and (max-width:45em) {
    .margin-bottom,.size-botton {
        margin-bottom:1em
    }

    .form-questions .txt {
        max-width: 90%
    }

    .featuredOffers .podImage {
        clear: left
    }

    .popup_block {
        left: 20%;
        top: 50%
    }

    .mainTabs li a {
        font-size: .9em
    }

    .pdfname {
        width: 75%
    }

    .margin-left-2 {
        margin-left: 0;
        width: 100%
    }

    .bloc-buttom-right {
        float: right;
        font-size: 1.4em;
        margin-left: 1em
    }

    .btn-mobile {
        float: left;
        margin-left: 0;
        margin-top: .5em
    }

    .margin-bottom {
        margin-right: 1.4em
    }

    .prix {
        color: #000
    }

    .result,.total {
        border-left: 0 solid #fff;
        font-size: 1.4em;
        font-weight: 700;
        padding: 0
    }

    .montant-mobile {
        float: right;
        text-align: left;
        width: 100%
    }

    .bloc-buttom {
        float: left;
        font-size: 1.4em;
        margin-top: 1em;
        padding-right: 2%
    }

    .btn-mobole {
        float: left;
        margin-top: .5em
    }

    .content-trash {
        float: left;
        margin-left: 8%;
        padding: .5em 0;
        text-align: right;
        width: 17%
    }
}

@media only screen and (min-width: 45em) {
    div.grid.ope .button.yellow {
        margin-left:1em;
        float: left
    }

    div.grid.ope {
        width: 90%;
        margin: 0 auto
    }

    .password,div.grid.ope p {
        text-align: right
    }

    .last ol.adress {
        padding-left: 1em;
        padding-right: 0;
        border-right: 0
    }

    ol.adress {
        padding-right: 1em;
        border-right: 1px solid #cecece
    }

    .adress .column6 .last p {
        margin-left: 1em
    }

    .adress ol li {
        border-bottom: none
    }

    .featuredOffers ul {
        width: 100%
    }

    .articlePreview img {
        width: 33%
    }

    .podImage {
        width: 48%
    }

    .featuredOffers>div {
        position: relative;
        margin-bottom: 1.4em
    }

    .featuredOffers p.bottom {
        position: absolute;
        bottom: 0
    }

    .popup_block {
        left: 25%;
        top: 50%
    }

    .medium-hidden {
        visibility: hidden
    }

    .medium-displaynone {
        display: none
    }

    .medium-show {
        visibility: visible
    }

    .medium-displayblock {
        display: block
    }

    .titre-2 {
        float: none
    }

    .row-neg {
        margin-top: -2em
    }

    .smallbloc-center {
        border-right: 1px solid #d5d5d5;
        border-bottom: 0
    }

    .column a.pdf,.column li.pdf a {
        margin: 0 auto
    }

    .column label input[type=checkbox] {
        float: none;
        margin: 0 auto
    }

    a.pdf.pdfright {
        float: right
    }

    .table-head .column {
        text-align: center;
        vertical-align: middle
    }

    .columnborder-bottom {
        border-bottom: 1px solid #cecece
    }

    .t-foot .column {
        background: #e1e7ea;
        font-weight: 700;
        padding: 1em;
        vertical-align: top
    }
}

@media only screen and (min-width: 45em) and (max-width:55em) {
    div.grid.ope div.valid {
        background:url(../images/icons/progress-tick.png) 76% 6px no-repeat;
        background: linear-gradient(transparent,transparent),url(../images/icons/progress-tick.svg) 75% 0 no-repeat
    }
}

@media only screen and (min-width: 45em) and (max-width:64em) {
    div.grid.rembour .column5 {
        width:100%
    }

    div.grid.ope .column4 input[type=password] {
        width: 8em
    }
}

@media only screen and (min-width: 55em) {
    div.grid.ope div.valid {
        background:url(../images/icons/progress-tick.png) 96% 6px no-repeat;
        background: linear-gradient(transparent,transparent),url(../images/icons/progress-tick.svg) 98% 0 no-repeat
    }

    div.grid.ope .column4 input[type=password] {
        width: 8em
    }

    div.grid.ope {
        width: 90%;
        margin: 0 auto
    }

    div.valid {
        background: url(../images/icons/progress-tick.svg) 80% 0 no-repeat
    }

    .popup_block {
        left: 25%;
        top: 40%
    }

    .grid h4.txtblue {
        margin-bottom: 1em;
        border: 0
    }

    .titre-2 {
        float: left;
        margin-left: .5em
    }

    div.total.mobile {
        display: none
    }

    .pdfname {
        display: table;
        float: left;
        width: 75%
    }
}

@media only screen and (min-width: 64em) {
    .rembour .column3 {
        width:30%
    }

    .rembour .column5 {
        margin-top: .5em
    }

    div.grid.ope {
        width: 90%;
        margin: 0 auto
    }

    div.grid.ope .column4 input[type=password] {
        width: 11em
    }

    div.grid.rembour div.valid {
        background: url(../images/icons/progress-tick.png) 88% 15px no-repeat;
        background: linear-gradient(transparent,transparent),url(../images/icons/progress-tick.svg) 89% 12px no-repeat
    }

    .form-questions .txt {
        max-width: 94%
    }

    .svg div.valid {
        background: url(../images/icons/progress-tick.svg) 80% 0 no-repeat
    }

    .svg .bloc-info-left.valid,.svg.bloc-info-right {
        background: url(../images/icons/progress-tick.svg) 70% 0 no-repeat
    }

    .bloc-info-left.valid,.bloc-info-right.valid,div.valid {
        background: url(../images/icons/progress-tick.png) 80% 6px no-repeat
    }

    .errorlist li,.svg .errorlist li {
        font-size: 14px
    }

    .formPod .row div p.result {
        max-width: 62%
    }

    div.valid p {
        background: 0 0
    }

    .popup_block {
        left: 30%;
        top: 50%
    }

    .min-height-content {
        height: 225px
    }

    div.labelradio label {
        border: 1px solid red;
        clear: both;
        width: auto;
        text-align: left
    }

    .row>div.custom-radio {
        width: 54%;
        float: right;
        margin-left: 0
    }

    .password p {
        float: right;
        margin-top: .75em
    }

    .password .button.yellow {
        margin-top: -.4em;
        float: left
    }

    .password .column4 {
        padding: 1em
    }

    .pdfname {
        width: 80%
    }

    input.print {
        background: url(../images/icons/print.png) 50% 50%/100% no-repeat;
        border: 0;
        display: block;
        height: 28px;
        text-indent: -1000px;
        width: 28px
    }

    .svg input.print {
        background: url(../images/icons/print.svg) 50% 0/28px auto no-repeat rgba(0,0,0,0)
    }

    .t-foot.twolines {
        height: 5em;
        vertical-align: baseline
    }

    .columnborder-right {
        border-right: 1px solid #cecece
    }
}

.h_horaire,.podContent {
    border-top: 1px solid #d5d5d5
}

.fd_client .row.enveloppeOK,.fd_client .row:first-child.enveloppeOK {
    background: url(../images/icons/letter_ok.png) 1% 28% no-repeat;
    padding-left: 7em;
    background-size: 4.2em
}

.fd_client .row.enveloppeKO,.fd_client .row:first-child.enveloppeKO {
    background: url(../images/icons/letter_ko.png) 1% 28% no-repeat;
    padding-left: 7em;
    background-size: 4.2em
}

.fd_client .row.echangeOK,.fd_client .row:first-child.echangeOK {
    background: url(../images/icons/echange_ok.png) 1% 35% no-repeat;
    padding-left: 7em;
    background-size: 4.7em
}

.fd_client .row.echangeKO,.fd_client .row:first-child.echangeKO {
    background: url(../images/icons/echange_ko.png) 1% 35% no-repeat;
    padding-left: 7em;
    background-size: 4.7em
}

.welcome {
    background: #333
}

ol.counter {
    counter-reset: liste;
    margin-bottom: 1em
}

.counter li {
    list-style-type: none;
    counter-increment: liste
}

.counter li:before {
    content: counter(liste);
    margin-right: 8px;
    vertical-align: top;
    color: #000;
    font-weight: 700;
    font-size: 1.5em;
    line-height: .875em
}

.clientName {
    color: #fff;
    font-size: 2.3em;
    padding: 5px 0
}

.t0 .content,.t0 .main {
    margin: 1em 1.25% 0;
    width: 97.5%
}

.fd_client {
    background: url(../images/fd_conducteur_mini.jpg) top center no-repeat fixed
}

.fd_agent {
    background: url(../images/fd_voiture_mini.jpg) top center no-repeat fixed
}

.fd_epargne {
    background: url(../images/fd_epargne_mini.jpg) bottom left no-repeat fixed
}

.fd_epargne1 {
    background: url(../images/fd_epargne1_mini.jpg) top center no-repeat fixed!important
}

.fd_epargne2 {
    background: url(../images/fd_epargne2_mini.jpg) top center no-repeat fixed!important
}

.fd_epargneafer {
    background: top center no-repeat fixed #fff!important
}

.fd_gav1 {
    background: url(../images/fd_gav1_mini.jpg) top center no-repeat fixed!important
}

.fd_gav2 {
    background: url(../images/fd_gav2_mini.jpg) top center no-repeat fixed!important
}

.fd_scolaire {
    background: url(../images/fd_scolaire_mini.jpg) top center no-repeat fixed!important
}

.fd_prevention1 {
    background: url(../images/fd_prevention1_mini.jpg) top center no-repeat fixed!important
}

.fd_prevention2 {
    background: url(../images/fd_prevention2_mini.jpg) top center no-repeat fixed!important
}

.fd_sante1 {
    background: url(../images/fd_sante1_mini.jpg) top center no-repeat fixed!important
}

.fd_sante2 {
    background: url(../images/fd_sante2_mini.jpg) top center no-repeat fixed!important
}

.fd_agent .page,.fd_client .page {
    background: 0 0
}

.fd_agent h1,.fd_client h1 {
    color: #000
}

.fd_agent .podContent .pod>h2,.fd_client .podContent .pod>h2 {
    border-bottom: 1px dashed #ccc;
    color: #333;
    font-size: 2.4em;
    font-weight: 700;
    padding: 0 0 10px 15px
}

@media only screen and (min-width: 35em) {
    .fd_agent .podContent .pod>h2,.fd_client .podContent .pod>h2 {
        margin-bottom:1.5em
    }
}

.fd_agent .progressBar .label,.fd_client .progressBar .label {
    display: block;
    font-size: .875em;
    font-weight: 400;
    left: 50%;
    margin: 0 0 0 -75px;
    position: absolute;
    text-align: center;
    top: 30px;
    width: 150px
}

.fd_agent .content .progressBar ol li,.fd_agent .content .progressBar ul li,.fd_client .content .progressBar ol li,.fd_client .content .progressBar ul li {
    height: 68px;
    margin: 0 0 .25em 1.4em;
    padding-bottom: .25em;
    position: relative
}

.podhub2 {
    margin-bottom: 0;
    margin-top: 2.8em;
    position: relative
}

.beneficiares {
    float: left;
    width: 70%
}

.t_formule,.t_hub_accueil {
    vertical-align: middle
}

.column12.pas.t_formule {
    padding: 0;
    position: relative
}

.cotisation,.formule {
    position: absolute;
    vertical-align: middle
}

.formule {
    background: #fff;
    font-size: 2.4em;
    font-weight: 700;
    left: 2%;
    line-height: 15px;
    max-width: 320px;
    padding: 0 2%;
    top: -8px
}

.cotisation span,.formule span {
    font-size: 13px;
    font-weight: 400
}

.formule span {
    padding: 8px 0 0
}

.cotisation span {
    float: right;
    padding: 8px 0 0 10px
}

.cotisation {
    background: #000;
    color: #fff;
    font-size: 2.4em;
    padding: .3% 1.2%;
    right: 3%;
    top: -20px;
    border-radius: .625em
}

.cotisation_offert {
    font-size: 2.2em;
    top: -18px
}

.p_formule {
    clear: both;
    font-size: 14px;
    padding: 20px 0 0 10px
}

.p_beneficiaire,.p_date,.p_produit,.p_reglement,.p_vehicule {
    background-image: url(../images/pictos_hub.png);
    float: left;
    height: 40px;
    margin: 0 4%;
    width: 40px
}

.p_formule .p_vehicule {
    background-position: 0 40px
}

.p_formule .p_produit {
    background-position: 0 80px
}

.p_formule .p_reglement {
    background-position: 0 120px;
    margin: 0 4% 0 15%
}

.p_formule .p_date {
    background-position: 0 0;
    margin: 0 4% 0 15%
}

.p_formule .p_beneficiaire {
    background: url(../images/icons/icon-life.png) no-repeat!important
}

.p_formule .p_formule_pdate {
    height: 0;
    margin-left: 5px;
    width: 40%
}

.p_formule_rcscolaire {
    margin-left: 25px
}

ul.formule_offre {
    margin: 0 0 0 15%
}

ul.formule_offre li {
    background: 0 0;
    font-size: .7em!important;
    margin: 0
}

.podoption {
    margin-top: 2%;
    position: relative;
    width: 45%
}

.podoption h4 {
    background: #fff;
    color: #333;
    font-size: 16px;
    margin: -20px 0 0;
    padding: 0 0 0 10px;
    width: 85px
}

.podoption ul {
    margin: 10px 0 5px 20px
}

.podoption ol li,.podoption ul li {
    background-image: none;
    margin: 0;
    padding: 0
}

.h_col1,.h_col2 {
    display: inline-block;
    font-size: 13px;
    margin-top: 5px;
    vertical-align: top
}

.h_color_b,.h_color_w {
    display: block;
    padding: 0 0 0 2px;
    height: 40px
}

.h_color_b {
    background: #f1f3f8
}

.h_col1 {
    border-right: 1px solid #d5d5d5;
    margin-right: 3px;
    padding: 0 3px 0 0;
    width: 25%
}

.h_col2 {
    min-width: 100px;
    width: 70%
}

.podContent {
    padding: 1.4em
}

.bloc-buttom-right {
    float: right;
    font-size: 1.4em;
    margin-left: 1em
}

.fd_agent aside .pod,.fd_client aside .pod {
    width: 98%
}

.fd_client footer .wrapper {
    background: #fff
}

.fd_client .row {
    padding: .8em 1.4em
}

.fd_client .podlire .bloc-accordeon {
    margin: 0 1.4em .4em;
    position: relative
}

.podconsentement ul li {
    background: 0 0
}

.fd_client .podlire .showHide {
    border: 0
}

.fd_client .podlire .showHide>h3 {
    border-top: 0 dashed #fff;
    margin: 0 3em;
    padding: 0
}

.fd_client .podlire .showHide h3.closed a,.fd_client .podlire .showHide>h3 a {
    background-image: none
}

.fd_client .podlire .showHide .showHideSection,.fd_client .podlire .showHide.formPod>h3.closed:first-child,.fd_client .podlire .showHide:first-child>h3.closed:first-child,.fd_client .podlire .showHide>div,.fd_client .podlire .showHide>h3.closed,.fd_client .podlire .showHidePod .showHide:first-child>h3.closed:first-child {
    border-color: transparent
}

.fd_client .podlire .showHide>h3.closed,.fd_client .podlire .showHide>h3:hover {
    background-color: transparent
}

.fd_client .podlire .showHide>h3 .p_puce {
    background-image: url(../images/readmore.png);
    background-position: 0 0;
    height: 14px;
    position: absolute;
    width: 17px;
    -webkit-transition-property: color;
    -webkit-transition-duration: 2s;
    -moz-transition-property: all;
    -moz-transition-duration: 2s;
    transition-property: all;
    transition-duration: 1s;
    top: 11px;
    right: 10px
}

.fd_client .podlire .off .showHide>h3 .p_puce,.fd_client .podlire .showHide>h3:hover .p_puce {
    -webkit-transition-property: color;
    -webkit-transition-duration: 2s;
    -moz-transition-property: all;
    -moz-transition-duration: 2s
}

.fd_client .podlire .showHide>h3:hover .p_puce {
    transition-property: all;
    transition-duration: 1s
}

.fd_client .podlire .off .showHide>h3.closed .p_puce {
    background-image: url(../images/readmoreoff.png)
}

.fd_client .podlire .off .showHide>h3 .p_puce {
    background-image: url(../images/readmoreoff.png);
    background-position: 0 0;
    height: 14px;
    position: absolute;
    width: 17px;
    transition-property: all;
    transition-duration: 1s;
    top: 11px;
    right: 10px
}

.fd_client .podlire .off .showHide>h3:hover .p_puce {
    background-position: 0 0;
    -webkit-transition-property: color;
    -webkit-transition-duration: 2s;
    -moz-transition-property: all;
    -moz-transition-duration: 2s;
    transition-property: all;
    transition-duration: 1s
}

.fd_client .podlire .showHide>h3.closed .p_puce {
    background-image: url(../images/readless.png);
    background-position: 0 0
}

.fd_client .podlire .showHide>h3:hover .p_puce {
    background-position: 0 -40px
}

.v {
    background-position: center 0;
    float: left;
    height: 40px;
    margin: -.7em 5px 0 -.7em;
    width: 45px
}

.fd_client div.valid {
    background: url(../images/icons/progress-tick.svg) 100% 0 no-repeat
}

.fd_client .podlire .valid {
    background-image: none
}

.valid .v {
    background-image: url(../images/bt_lire_ok.png);
    background-color: #ffda0a
}

.podlire .showHide .hasControlText {
    margin: 0;
    padding: 0;
    width: 100%
}

.fd_client .podlire .showHide {
    display: inline-block;
    margin: 0;
    width: 100%
}

.fd_client .podlire .showHide>div.onerow {
    padding: 0
}

.fd_client .podlire .showHide>div.onerow .pod {
    margin: 20px 0 0;
    padding: 10px;
    overflow: hidden
}

.fd_client .podlire .bloc-accordeon .helpControl {
    position: absolute;
    right: 0;
    top: 5px
}

.fd_client .podlire .stage {
    background: #e0e6e6;
    border: 1px solid #a4aeb5;
    border-radius: 1em;
    display: block;
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1em;
    margin: .2em 0;
    padding: .41em;
    position: absolute;
    text-align: center;
    vertical-align: top;
    width: 1.925em
}

.fd_client .podlire .bloc-accordeon .showHide h3 a.control .column12,.fd_client .podlire .bloc-accordeon.off .showHide h3 a.control .column12 {
    box-shadow: 0 0 .5em 0 rgba(0,0,0,.05);
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: .7em 0 .7em .7em;
    text-decoration: none;
    white-space: normal;
    text-align: left;
    height: 40px;
    font-weight: 700;
    position: relative
}

.fd_client .podlire .bloc-accordeon.off .showHide h3 a.control .column12 {
    background-image: url(../images/bt_lire_off.png);
    border: 1px solid #d5d5d5;
    border-radius: .5em;
    color: #666;
    -webkit-transition-property: color;
    -webkit-transition-duration: 2s;
    -moz-transition-property: all;
    -moz-transition-duration: 2s;
    transition-property: all;
    transition-duration: 1s
}

.fd_client .podlire .bloc-accordeon.off .showHide h3 a.control .column12:hover {
    background-position: 0 0
}

.fd_client .podlire .bloc-accordeon .showHide h3 a.control .column12 {
    background-image: url(../images/bt_lire.png);
    border: 1px solid #d5d5d5;
    border-radius: .5em;
    color: #000;
    -webkit-transition-property: color;
    -webkit-transition-duration: 2s;
    -moz-transition-property: all;
    -moz-transition-duration: 2s;
    transition-property: all;
    transition-duration: 1s
}

.fd_client .podlire .bloc-accordeon .showHide h3 a.control .column12:hover {
    background-position: 0 -40px
}

.b_lu-accepter {
    margin: 10px 0 0
}

.b_lu-accepter .button.disabled,.b_lu-accepter .button.grey,.b_lu-accepter .button.grey:hover,.b_lu-accepter .button.yellow,.b_lu-accepter .button.yellow:hover {
    background-image: none;
    padding: .7em;
    margin-bottom: .5em
}

.b_cg {
    border-top: 1px dashed #ccc;
    margin: 15px 0 .25em 1.4em;
    padding: 15px 0 0 2.4em
}

.podcodeSms {
    background: #f2faff
}

.fd_client .img_client img {
    margin: 0 auto
}

.table-reponsive-col {
    margin-bottom: 1em
}

.table-reponsive-col .col1 {
    background-color: #d2e6ef;
    clear: both;
    font-size: 12px;
    font-weight: 700;
    height: 4.23em;
    padding: 18px 0 0;
    width: 100%
}

.table-reponsive-col .col2 {
    background-color: #e5f6ff;
    clear: both;
    display: block;
    font-size: 12px;
    height: 3em;
    margin: .2% 0 0;
    padding: 8px 0 0;
    width: 100%
}

.table-reponsive-col .table-reponsive-b1,.table-reponsive-col .table-reponsive-b2 {
    float: left;
    margin: 0 .2% 0 0;
    width: 9.8%
}

.table-reponsive-col .table-reponsive-b3 {
    float: left;
    margin: 0 .2% 0 0;
    width: 49.8%
}

.table-reponsive-col .table-reponsive-b4 {
    float: left;
    width: 30%
}

.form_cb input {
    width: 21.5em
}

.form_cb .row label {
    width: 30%
}

.form_cb .row>div {
    width: 68%
}

.cancelBtnBox {
    display: none
}

.svg .logo,header .wrapper {
    background-image: none!important
}

.logo>a,.logo>a img,.svg .logo>a {
    background-color: transparent!important
}

.upload_item {
    min-height: 280px
}

.fichiers_uploads {
    background: #f1f1f1;
    padding: 10px 0
}

.fichiers_uploads img {
    height: 80%;
    max-height: 200px;
    max-width: 190px;
    vertical-align: middle
}

.fichiers_uploads .column12,.fichiers_uploads .column4 {
    height: 230px;
    margin-bottom: 1%;
    padding: 2%;
    text-align: center;
    line-height: 200px
}

.fichiers_uploads .element {
    position: relative
}

.fichiers_uploads .element a.delete {
    height: 25px;
    position: absolute;
    right: 0;
    top: 0;
    width: 25px
}

.fichiers_uploads .element a.delete:hover {
    filter: alpha(opacity=80);
    -moz-opacity: .8;
    -khtml-opacity: .8;
    opacity: .8
}

.fichiers_uploads .element a.delete img {
    max-height: none;
    vertical-align: top
}

@media only screen and (max-width: 70em) {
    .h_col1 {
        width:27%
    }

    .h_col2 {
        width: 69%
    }

    .fd_client .img_client img {
        margin: 2% 0 0
    }

    .h_color_b,.h_color_w {
        height: 40px
    }
}

@media only screen and (max-width: 65em) {
    .p_formule_rcscolaire {
        margin-left:0
    }

    .h_col1 {
        width: 35%
    }

    .h_col2 {
        width: 60%
    }

    .h_color_b,.h_color_w {
        height: 60px
    }

    .podhub3 {
        background: 0 0
    }

    .podhub3 .column8 {
        width: 100%
    }

    .podhub2 textarea {
        float: none
    }

    .form_cb input {
        width: 20.5em
    }
}

@media only screen and (max-width: 60em) {
    .p_formule_rcscolaire {
        margin-left:0
    }
}

@media only screen and (max-width: 54.95em) {
    .p_formule_rcscolaire {
        margin-left:0
    }

    .h_color_b,.h_color_w {
        height: auto
    }

    .h_col1 {
        width: 25%
    }

    .h_col2 {
        width: 72%
    }

    .fd_agent .content .progressBar ol li,.fd_agent .content .progressBar ul li,.fd_client .content .progressBar ol li,.fd_client .content .progressBar ul li {
        height: auto;
        padding-bottom: .76em
    }

    .clientName {
        padding: 5px 3%
    }

    .form_cb .row label {
        width: 25%
    }

    .form_cb .row>div {
        width: 63%
    }
}

@media only screen and (max-width: 50em) {
    .p_formule_rcscolaire {
        margin-left:0
    }

    .fd_client {
        background: url(../images/fd_conducteur_mini.jpg) top left no-repeat fixed
    }

    .fd_epargne {
        background: url(../images/fd_epargne_mini.jpg) bottom left no-repeat fixed
    }

    .podhub {
        background: 0 0
    }

    .podoption {
        width: 100%
    }

    .formule {
        font-size: 2.3em;
        padding: 0
    }

    .form_cb input {
        width: 20.2em
    }
}

@media only screen and (max-width: 35em) {
    .p_formule_rcscolaire {
        margin-left:0
    }

    div.formule {
        padding-top: .5em;
        margin-bottom: .25em
    }

    .p_formule {
        padding: 0
    }

    ol.counter {
        margin: 0 0 .25em -1em
    }
}

@media only screen and (max-width: 45em) {
    .p_formule_rcscolaire {
        margin-left:0
    }

    ul.formule_offre {
        margin-left: 12%
    }

    .fd_client .podlire .bloc-accordeon .showHide h3 a.control .column12 {
        line-height: 22px
    }

    .fd_client .podlire .stage {
        display: none
    }

    .fd_client .podlire .showHide>h3 {
        margin: 0 3em 0 0
    }

    .p_formule .p_reglement {
        background-position: 0 120px;
        margin: 0 4%
    }

    .p_formule .p_date {
        background-position: 0 0;
        margin: 0 4%
    }

    .fd_client .table-reponsive-col .table-reponsive-b1,.fd_client .table-reponsive-col .table-reponsive-b2,.fd_client .table-reponsive-col .table-reponsive-b3,.fd_client .table-reponsive-col .table-reponsive-b4 {
        width: 100%
    }

    .table-reponsive-col .col1,.table-reponsive-col .col2 {
        clear: none;
        display: inline-block;
        float: left;
        height: 4.23em;
        margin: 1px 0 0;
        padding: 18px 0 0;
        width: 50%
    }

    .form_cb .row label,.form_cb .row>div {
        display: block;
        width: 100%
    }

    .form_cb input {
        width: 100%
    }

    .beneficiares {
        width: 80%
    }

    .groupOfThree .podContent {
        width: 100%
    }

    .upload_item {
        min-height: auto
    }
}

@media only screen and (max-width: 35em) {
    .p_formule_rcscolaire {
        margin-left:0
    }

    .cotisation,.formule {
        position: static;
        margin: .5em
    }

    ul.formule_offre {
        margin-left: 12%
    }

    .fd_agent .content .progressBar ol li,.fd_agent .content .progressBar ul li,.fd_client .content .progressBar ol li,.fd_client .content .progressBar ul li {
        height: auto;
        padding-bottom: .5em
    }

    .podconsentement ol li,.podconsentement ul li {
        margin: 0 0 .25em;
        padding: 0
    }

    .b_cg {
        margin: 15px 0 .25em;
        padding: 15px 0 0
    }
}

@media only screen and (max-width: 30em) {
    .p_formule_rcscolaire {
        margin-left:0
    }

    .h_color_b,.h_color_w {
        height: 40px
    }

    .cotisation span,.formule span {
        float: none
    }

    .fd_agent .content .progressBar ol li,.fd_agent .content .progressBar ul li,.fd_client .content .progressBar ol li,.fd_client .content .progressBar ul li {
        height: auto;
        padding-bottom: .6em
    }

    .table-reponsive-col .col1,.table-reponsive-col .col2 {
        clear: none;
        display: inline-block;
        float: left;
        height: 4.23em;
        margin: 1px 0 0;
        padding: 18px 0 0;
        width: 100%
    }

    .beneficiares {
        width: 60%
    }

    input[type=file] {
        width: 85%
    }

    .cotisation {
        margin-top: 5px
    }

    .fichiers_uploads .column4 {
        height: auto;
        line-height: normal
    }

    .fichiers_uploads {
        padding: 10px 0
    }
}

@media only screen and (max-width: 20em) {
    .p_formule_rcscolaire {
        margin-left:0
    }

    .h_color_b,.h_color_w {
        height: 40px
    }

    .h_col1 {
        width: 35%
    }

    .h_col2 {
        width: 60%
    }

    .fichiers_uploads img {
        max-width: 150px
    }
}

.podTitre {
    font: 24px Arial,Helvetica,sans-serif;
    color: #333
}

#toolbar input[type=text] {
    max-width: 35%;
    min-width: 35%
}

#pageCount {
    max-width: 40%;
    min-width: 5%
}

.lineSeparator {
    border-top: 1px solid #d5d5d5!important
}

.nolineSeparator {
    border-top: 0!important
}

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto
}

.validation-summary-errors ul,.warninglist {
    background: url(../images/icons/icon-advice-info-small.png) 0 3px no-repeat;
    padding: .5em 0 0 2em;
    min-height: 29px;
    clear: both
}

.svg .validation-summary-errors ul,.svg .warninglist {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSI5MCIgdmlld0JveD0iLTEuODEwNTQ2OSAtMS43NzI0NjA5IDMwIDMwIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMS44MTA1NDY5IC0xLjc3MjQ2MDkgMzAgMzAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iaW5mby02LWljb25fMl8iIHkxPSIyNi40NDQiIHkyPSIwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDI9IjAiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzIwNTRhNSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzI5NmNkNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGZpbGw9InVybCgjaW5mby02LWljb25fMl8pIiBkPSJtMTMuMjIyNywyLjU2NzRjNS44ODc3LDAgMTAuNjU0Myw0Ljc2NTEgMTAuNjU0MywxMC42NTQ4IDAsNS44ODgyLTQuNzY1NiwxMC42NTQ4LTEwLjY1NDMsMTAuNjU0OHMtMTAuNjU1My00Ljc2NDYtMTAuNjU1My0xMC42NTQ4YzAtNS44ODg3IDQuNzY0Ni0xMC42NTQ4IDEwLjY1NTMtMTAuNjU0OG0wLTIuNTY3NGMtNy4zMDI3LDAtMTMuMjIyNyw1LjkxOTktMTMuMjIyNywxMy4yMjIyczUuOTE5OSwxMy4yMjIyIDEzLjIyMjcsMTMuMjIyMmM3LjMwMTgsMCAxMy4yMjE3LTUuOTE5OSAxMy4yMjE3LTEzLjIyMjJzLTUuOTE5OS0xMy4yMjIyLTEzLjIyMTctMTMuMjIyMnptLS4yMjE3LDIwLjY1NTNjLTEuODA5NiwuNjM2Ny0zLjMwMjctLjA5MzgtMy4wMDI5LTEuODMyIC4yOTk4LTEuNzQwMiAyLjAxNzYtNS40NjI5IDIuMjYyNy02LjE2NjUgLjI0NTEtLjcwNDYtLjIyNDYtLjg5NzUtLjcyODUtLjYxMTMtLjI5LC4xNjc1LS43MjE3LC41MDM0LTEuMDkxOCwuODMwMS0uMTAyNS0uMjA3LS4yNDcxLS40NDM4LS4zNTY0LS42Njk5IC42MDQ1LS42MDU1IDEuNjE2Mi0xLjQxOCAyLjgxMTUtMS43MTE5IDEuNDI4Ny0uMzUzIDMuODE4NCwuMjEwNCAyLjc5MSwyLjk0MzQtLjczMjQsMS45NDY4LTEuMjUxLDMuMjkwNS0xLjU3NzEsNC4yOTE1LS4zMjcxLDEuMDAxIC4wNjA1LDEuMjEgLjYzMjgsLjgyMTMgLjQ0NjMtLjMwNDcgLjkyMTktLjcxOTcgMS4yNzE1LTEuMDQyIC4xNjExLC4yNjI3IC4yMTI5LC4zNDY3IC4zNzMsLjY0NzUtLjYwNjQsLjYyMTEtMi4xODk1LDIuMDcyMy0zLjM4NTcsMi41em0zLjc1Mi0xMi4wNDY0Yy0uODIxMywuNjk5Mi0yLjAzODEsLjY4MzYtMi43MTk3LS4wMzM3LS42Nzk3LS43MTgzLS41NjY0LTEuODY2NyAuMjU0OS0yLjU2NDkgLjgyMTMtLjY5OTcgMi4wMzgxLS42ODUxIDIuNzE4NywuMDMzMiAuNjgwNywuNzE3MyAuNTY4NCwxLjg2NTctLjI1MzksMi41NjU0eiIvPjwvc3ZnPg==);
    background-size: 1.9em
}

.warninglist {
    margin-top: .4em
}

.svg .warninglist li,.warninglist li {
    background: 0 0;
    padding: 0
}

.progressBar .navoff {
    background: grey;
    color: #fff
}

.progressBar .navoff .progressWrapper .stage:after {
    border-bottom: 1.5em solid transparent;
    border-left: 1.2em solid grey;
    border-top: 1.5em solid transparent;
    content: " ";
    display: block;
    right: -1.78em;
    position: absolute;
    top: -.75em;
    z-index: 4;
    border-bottom-width: 2.3em;
    border-top-width: 2.3em
}

.progressBar .navoff .stage {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSI5MCIgdmlld0JveD0iLTEuODEwNTQ2OSAtMS43NzI0NjA5IDMwIDMwIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMS44MTA1NDY5IC0xLjc3MjQ2MDkgMzAgMzAiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iaW5mby02LWljb25fMl8iIHkxPSIyNi40NDQiIHkyPSIwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDI9IjAiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzIwNTRhNSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzI5NmNkNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGZpbGw9InVybCgjaW5mby02LWljb25fMl8pIiBkPSJtMTMuMjIyNywyLjU2NzRjNS44ODc3LDAgMTAuNjU0Myw0Ljc2NTEgMTAuNjU0MywxMC42NTQ4IDAsNS44ODgyLTQuNzY1NiwxMC42NTQ4LTEwLjY1NDMsMTAuNjU0OHMtMTAuNjU1My00Ljc2NDYtMTAuNjU1My0xMC42NTQ4YzAtNS44ODg3IDQuNzY0Ni0xMC42NTQ4IDEwLjY1NTMtMTAuNjU0OG0wLTIuNTY3NGMtNy4zMDI3LDAtMTMuMjIyNyw1LjkxOTktMTMuMjIyNywxMy4yMjIyczUuOTE5OSwxMy4yMjIyIDEzLjIyMjcsMTMuMjIyMmM3LjMwMTgsMCAxMy4yMjE3LTUuOTE5OSAxMy4yMjE3LTEzLjIyMjJzLTUuOTE5OS0xMy4yMjIyLTEzLjIyMTctMTMuMjIyMnptLS4yMjE3LDIwLjY1NTNjLTEuODA5NiwuNjM2Ny0zLjMwMjctLjA5MzgtMy4wMDI5LTEuODMyIC4yOTk4LTEuNzQwMiAyLjAxNzYtNS40NjI5IDIuMjYyNy02LjE2NjUgLjI0NTEtLjcwNDYtLjIyNDYtLjg5NzUtLjcyODUtLjYxMTMtLjI5LC4xNjc1LS43MjE3LC41MDM0LTEuMDkxOCwuODMwMS0uMTAyNS0uMjA3LS4yNDcxLS40NDM4LS4zNTY0LS42Njk5IC42MDQ1LS42MDU1IDEuNjE2Mi0xLjQxOCAyLjgxMTUtMS43MTE5IDEuNDI4Ny0uMzUzIDMuODE4NCwuMjEwNCAyLjc5MSwyLjk0MzQtLjczMjQsMS45NDY4LTEuMjUxLDMuMjkwNS0xLjU3NzEsNC4yOTE1LS4zMjcxLDEuMDAxIC4wNjA1LDEuMjEgLjYzMjgsLjgyMTMgLjQ0NjMtLjMwNDcgLjkyMTktLjcxOTcgMS4yNzE1LTEuMDQyIC4xNjExLC4yNjI3IC4yMTI5LC4zNDY3IC4zNzMsLjY0NzUtLjYwNjQsLjYyMTEtMi4xODk1LDIuMDcyMy0zLjM4NTcsMi41em0zLjc1Mi0xMi4wNDY0Yy0uODIxMywuNjk5Mi0yLjAzODEsLjY4MzYtMi43MTk3LS4wMzM3LS42Nzk3LS43MTgzLS41NjY0LTEuODY2NyAuMjU0OS0yLjU2NDkgLjgyMTMtLjY5OTcgMi4wMzgxLS42ODUxIDIuNzE4NywuMDMzMiAuNjgwNywuNzE3MyAuNTY4NCwxLjg2NTctLjI1MzksMi41NjU0eiIvPjwvc3ZnPg==) center center no-repeat #a9a9a9;
    border-color: #333;
    color: #333
}

#consentementText label {
    min-width: 100%
}

.ng-cloak,.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak] {
    display: none!important
}

#loading-bar-spinner {
    display: block;
    position: absolute;
    z-index: 10002;
    top: 2px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5)
}

#loading-bar-spinner .spinner-icon {
    width: 100px!important;
    height: 100px!important;
    border: 2px solid transparent;
    border-top-color: #29d;
    border-left-color: #29d;
    border-radius: 50%;
    left: calc(-50px + 50%);
    position: absolute;
    top: 41%;
    -webkit-animation: loading-bar-spinner .8s linear infinite;
    -moz-animation: loading-bar-spinner .8s linear infinite;
    -ms-animation: loading-bar-spinner .8s linear infinite;
    -o-animation: loading-bar-spinner .8s linear infinite;
    animation: loading-bar-spinner .8s linear infinite
}

#loading-bar {
    pointer-events: all;
    z-index: 99999;
    border: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: wait;
    position: fixed;
    background-color: rgba(0,0,0,.6)
}

.label {
    color: #000
}

.progressBar .navon .label {
    color: #fff
}

.divVisionneuse input[type=text] {
    max-width: 7%!important;
    min-width: 25px!important
}

.divVisionneuse label {
    min-width: 5%
}

#pageCount {
    float: left;
    font-size: 15px;
    margin: 5px 0 0 4px
}

.block-benf-anim.ng-enter {
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    position: relative;
    opacity: 0;
    top: 20px;
    left: 5px
}

.block-benf-anim.ng-enter.ng-enter-active {
    top: 0;
    left: 0;
    opacity: 1
}

.block-benf-anim.ng-leave {
    -webkit-transition: .4s cubic-bezier(.25,.25,.75,.75) all;
    -moz-transition: .4s cubic-bezier(.25,.25,.75,.75) all;
    -ms-transition: .4s cubic-bezier(.25,.25,.75,.75) all;
    -o-transition: .4s cubic-bezier(.25,.25,.75,.75) all;
    transition: .4s cubic-bezier(.25,.25,.75,.75) all;
    opacity: 1
}

.block-benf-anim.ng-leave.ng-leave-active {
    opacity: 0
}

.register-login-links {
    margin-top: 1em
}

.register-login-links .agencyName {
    color: #000!important
}

header .logo {
    background-image: none!important;
    max-width: 50%!important;
    float: left!important
}

.ccpane .ccbackg {
    background-color: #000!important
}

.afer header {
    background-color: #fff;
    background-image: none;
    padding: 1.5%
}

.afer .welcome {
    background: #1e5d88;
    display: none
}

.afer .docusign {
    width: 100%!important
}

.afer .docusign .content {
    width: 100%
}

.afer .progressBar {
    border-radius: 0;
    box-shadow: none
}

.afer .progressBar .stage {
    background-color: #fff
}

.afer .progressBar .navon .progressWrapper .stage:after {
    border-left: 1.2em solid #1e5d88;
    right: -2.35em;
    top: -1.35em
}

.afer .navon .progressWrapper:after,.afer .navon .progressWrapper:before,.afer .progressBar .navtodo .progressWrapper:after,.afer .progressBar .navtodo .progressWrapper:before {
    top: -1.5em;
    left: -1.35em
}

.afer .progressBar .navon {
    background: #1e5d88;
    padding: 20px 18px
}

.afer .progressBar .navdone,.afer .progressBar .navtodo {
    padding: 20px 18px
}

.afer .progressWrapper {
    position: relative;
    top: 0
}

.afer .progressWrapper .label {
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    margin: 0
}

.afer h2.feature {
    background-color: #fff;
    background-image: none;
    border: 0;
    padding: 20px 0;
    font-size: 28px;
    font-weight: 500;
    color: #1e5d88
}

.afer #main.docusign>h1 {
    color: #1e5d88;
    padding: 20px 0;
    margin-bottom: 0
}

.afer .docusign .content>.pod {
    border: 0;
    box-shadow: none
}

.afer .docusign .content>.pod>.podContent {
    padding: 0
}

.afer .content .button-2 {
    padding: .7em 1em;
    text-transform: uppercase;
    background: 0 0;
    border: 1px solid #cedfe6;
    color: #0087c3;
    border-radius: 10px
}

.afer .content .button.yellow {
    padding: .7em 1em;
    text-transform: uppercase;
    color: #fff;
    background: #39994f;
    border: 1px solid #39994f;
    border-radius: 10px
}

.afer .logo {
    display: inline-block;
    height: 40px;
    width: 132px
}

#l-fr-stamp-abeille {
    padding: 0!important
}

.stamp-mobile .a-heading--3,.stamp-mobile h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4em;
    margin-bottom: 0;
    margin-top: 0
}

.stamp-mobile a span {
    margin: 0
}

.stamp-mobile {
    border: 0;
    background-image: url(../images/stampbar/bg_ailes.svg);
    background-repeat: no-repeat;
    background-size: 130%;
    background-position: 800px -200px;
    margin: 0 auto;
    padding: 10px 1.25em
}

.stamp-mobile .wrapper {
    flex-direction: row;
    text-align: left;
    display: flex;
    align-items: center;
    align-content: center;
    margin: 0 auto;
    padding: 0;
    width: 100%
}

.stamp-mobile img {
    border: 0;
    display: block;
    margin-left: 20px;
    max-width: 100px;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s;
    transition: .2s
}

@media(max-width: 60em) {
    .stamp-mobile {
        background-image:url(../images/stampbar/bg_ailes.svg);
        background-repeat: no-repeat;
        background-size: 200%;
        background-position: 180px -100px
    }
}

@media(max-width: 35em) {
    .stamp-mobile .a-heading--3 {
        font-size:16px
    }

    .stamp-mobile {
        background-image: url(../images/stampbar/bg_ailes.svg);
        background-repeat: no-repeat;
        background-size: 200%;
        background-position: 130px -90px
    }

    .stamp-mobile a span {
        flex: 1
    }

    .stamp-mobile img {
        display: block;
        margin: 0 0 0 auto
    }
}

/* MAM Responsive beahviour START */

@media only screen and (max-width: 68.5em) {
    .main {
        margin: 0 !important;
        padding: 1em;
    }

    .afer #main.docusign > h1 {
        padding: 0 !important;
        margin-bottom: 0.5em;
    }

    iframe {
        height: 70vh !important;
    }

    .afer .logo {
        margin-top: 1em;
        margin-left: 1em;
    }

    .bloc-buttom-left {
        margin-top: 0.5em;
        margin-left: 1em;
    }

    .bloc-buttom-right {
        margin-top: 0.5em;
        margin-right: 1em;
    }

    footer[role=contentinfo] .wrapper .site-info {
        margin-bottom: 0;
    }

    .fd_client .progressBar {
        width: 100% !important;
    }
    .fd_client .progressBar ol {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }
    .fd_client .progressBar ol li {
        width: 100% !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
    }
    .fd_client .progressBar ol li .progressWrapper {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .fd_client .progressBar ol li .progressWrapper .label {
        width: initial !important;
    }
    .fd_client .podContent img {
        margin: 0.5em;
    }
    .fd_client .podContent .podGroup {
        padding: 1em !important;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .fd_client .podContent .podGroup .pod {
        margin-top: 1.5em !important;
        width: 100%;
        margin: 0;
    }
    .fd_client form {
        padding: 1em;
    }

    li.external a {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='90' xmlns='http://www.w3.org/2000/svg' height='90' viewBox='-4 -3.7412109 30 30' xmlns:xlink='http://www.w3.org/1999/xlink' enable-background='new -4 -3.7412109 30 30'%3E%3Cdefs%3E%3ClinearGradient id='SVGID_2_' y1='22.259' y2='4.259' gradientUnits='userSpaceOnUse' x2='0'%3E%3Cstop offset='0' stop-color='%232054a5'/%3E%3Cstop offset='1' stop-color='%23296cd4'/%3E%3C/linearGradient%3E%3ClinearGradient gradientTransform='matrix(0 -1 -1 0 -20.64417 -20.87047)' id='SVGID_3_' y1='-34.669' y2='-38.645' gradientUnits='userSpaceOnUse' x2='0'%3E%3Cstop offset='0' stop-color='%232054a5'/%3E%3Cstop offset='1' stop-color='%23296cd4'/%3E%3C/linearGradient%3E%3ClinearGradient gradientTransform='matrix(.6901 .7237 -.7237 .6901 40.83707 307.62192)' id='SVGID_1_' y1='-182.531' y2='-198.531' gradientUnits='userSpaceOnUse' x2='0'%3E%3Cstop offset='0' stop-color='%232054a5'/%3E%3Cstop offset='1' stop-color='%23296cd4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23SVGID_1_)' d='m12.8027,0c-.3125-.0078-.5742,.2402-.582,.5518l-.041,1.584c-.0078,.3115 .2402,.5732 .5527,.5811l4.2803,.1133c.3115,.0078 .3818,.1904 .1572,.4062l-7.1182,6.7861c-.2256,.2158-.2344,.5762-.019,.8018l1.2036,1.2627c.2148,.2256 .5757,.2344 .8008,.0186l7.1182-6.7861c.2256-.2158 .4053-.1367 .3975,.1748l-.0908,4.2812c-.0068,.3115 .2432,.5723 .5547,.5791l1.583,.0332c.3125,.0068 .5723-.2422 .5791-.5537l.1924-9.0156c.0068-.3115-.2422-.5732-.5547-.5811l-9.0137-.2373z'/%3E%3Cpath fill='url(%23SVGID_2_)' d='m15,13.7783v4.8809c0,.4941-.1777,.5996-.6729,.5996h-10.7998c-.4951,0-.5273-.1055-.5273-.5996v-10.8008c0-.4951 .0322-.5996 .5273-.5996 0,0 4.3613,0 6.0859,0 .1626,0 .3921-.04 .6006-.1982 .7866-.5957 1.8047-1.752 2.4209-2.3682 .2031-.2041 .0957-.4336-.1523-.4336-2.3887,0-8.5552,0-8.5552,0-2.2051,0-3.9272,1.7939-3.9272,4v10c0,2.2051 1.7222,4 3.9272,4h10.0005c2.2051,0 4.0723-1.7949 4.0723-4v-7.0205l-3,2.54z'/%3E%3Cpath fill='url(%23SVGID_3_)' d='m14.4492,21.1299c.4941,0 .5508-1.0322 .5508-1.5273 0,0 0-5.3613 0-7.0859 0-.1631 .0625-.416 .2461-.6006 .7285-.7285 1.7285-1.8047 2.3447-2.4209 .2041-.2041 .4092-.0967 .4092,.1514 0,2.3896 0,8.5557 0,8.5557 0,2.2051-1.7695,3.9277-3.9756,3.9277'/%3E%3C/svg%3E");
    }

    .afer .navon .progressWrapper:after, .afer .navon .progressWrapper:before, .afer .progressBar .navtodo .progressWrapper:after, .afer .progressBar .navtodo .progressWrapper:before {
        display: none !important;
    }

    .afer .progressBar .navon, .afer .progressBar .navtodo, .afer .progressBar .navdone {
        padding: 1.5em !important;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .afer .progressBar .navon .progressWrapper .label, .afer .progressBar .navtodo .progressWrapper .label, .afer .progressBar .navdone .progressWrapper .label {
        display: none;
    }
}

/* MAM Responsive beahviour END */


/* new upload page */

/* Resets START */

@font-face {
    font-family: 'Lato';
    src: url("../fonts/Lato/Lato-Regular.eot");
    src: url("../fonts/Lato/Lato-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Lato/Lato-Regular.woff2") format("woff2"), url("../fonts/Lato/Lato-Regular.woff") format("woff"), url("../fonts/Lato/Lato-Regular.svg#Lato-Regular") format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url("../fonts/Lato/Lato-Bold.eot");
    src: url("../fonts/Lato/Lato-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Lato/Lato-Bold.woff2") format("woff2"), url("../fonts/Lato/Lato-Bold.woff") format("woff"), url("../fonts/Lato/Lato-Bold.svg#Lato-Bold") format("svg");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url("../fonts/Lato/Lato-Black.eot");
    src: url("../fonts/Lato/Lato-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/Lato/Lato-Black.woff2") format("woff2"), url("../fonts/Lato/Lato-Black.woff") format("woff"), url("../fonts/Lato/Lato-Black.svg#Lato-Black") format("svg");
    font-weight: 900;
    font-style: normal;
}

body{
    font: 'Lato', 'Arial', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #1e5d88;
    font-family: 'Lato', 'Arial', sans-serif !important;
}

p, a {
    font-family: 'Lato', 'Arial', sans-serif !important;
}

.afer .content .button.yellow {
    color: #FFF !important;
}

a:link, a:visited {
    color: #1E5D88 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #d5d5d5;
}

form {
    padding: 0 !important;
}

/* Resets END */

/* Utility classes START */

.pls {
    padding-left: 1em;
}

.plm {
    padding-left: 2em
}

.prs {
    padding-right: 1em;
}

.prm {
    padding-right: 2em
}

.mxw810 {
    max-width: 810px;
}

.modal-content--w50 {
    max-width: 650px;
}

@media screen and (max-width: 47em) {
    .display-none--mobile {
        display: none;
    }
}

/* Utility classes END */

/* Flexbox classes START */

.d-flex {
    display: flex;
}

.d-flex--inline-flex {
    display: inline-flex
}

.d-flex--justify-content-center {
    justify-content: center;
}

.d-flex--justify-content-start {
    justify-content: flex-start;
}

.d-flex--justify-content-end {
    justify-content: flex-end;
}

.d-flex--justify-content-space-between {
    justify-content: space-between;
}

.d-flex--justify-content-space-around {
    justify-content: space-around;
}

.d-flex--align-items-center {
    align-items: center;
}

.d-flex--align-items-start {
    align-items: flex-start;
}

.d-flex--align-items-end {
    align-items: flex-end;
}

.d-flex--align-items-stretch {
    align-items: stretch;
}

.d-flex--flex-direction-column {
    flex-direction: column;
}

.d-flex--align-self-start {
    align-self: flex-start;
}

.d-flex--flex-direction-row-reverse {
    flex-direction: row-reverse;
}

.d-flex--flex-wrap {
    flex-wrap: wrap;
}

.d-flex--flex-nowrap {
    flex-wrap: nowrap;
}

.d-flex--flex-0 {
    flex: 0;
}

.d-flex--flex-1 {
    flex: 1;
}

.d-flex--flex--2 {
    flex: 2;
}
/* Flexbox classes END */

/* Grid classes START */

.d-grid {
    display: grid;

}

.d-grid--cols-1 {
    grid-template-columns: repeat(1, auto);
}

.d-grid--cols-2 {
    grid-template-columns: repeat(2, auto);
}

.d-grid--cols-3 {
    grid-template-columns: repeat(3, auto);
}

.d-grid--cols-4 {
    grid-template-columns: repeat(4, auto);
}

.d-grid--cols-5 {
    grid-template-columns: repeat(5, auto);
}

.d-grid--cols-6 {
    grid-template-columns: repeat(6, auto);
}

@media screen and (min-width: 35em) {
    .d-grid--desktop-cols-1 {
        grid-template-columns: repeat(1, auto);
    }

    .d-grid--desktop-cols-2 {
        grid-template-columns: repeat(2, auto);
    }

    .d-grid--desktop-cols-3 {
        grid-template-columns: repeat(3, auto);
    }

    .d-grid--desktop-cols-4 {
        grid-template-columns: repeat(4, auto);
    }

    .d-grid--desktop-cols-5 {
        grid-template-columns: repeat(5, auto);
    }

    .d-grid--desktop-cols-6 {
        grid-template-columns: repeat(6, auto);
    }
}

.d-grid--grid-column-full-width {
    grid-column: 1 / -1;
}

/* Grid classes END */

/* Information card policy message START */

.svg .policyMessage.policyMessage--information-card {
    background-image: none;
    margin-bottom: 2em;
}

.policyMessage.policyMessage--information-card {
    border: 1px solid #D5D5D5;
    border-radius: 0;
}

.policyMessage.policyMessage--information-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2em;
}

.policyMessage.policyMessage--information-card .policyMessage__content .policyMessage__content--title {
    color: #1E5D88;
    text-align: center;
}

.policyMessage.policyMessage--information-card .policyMessage__icon {
    text-align: center;
}

.policyMessage.policyMessage--information-card .policyMessage__icon img{
    width: 60%;
}


@media screen and (min-width: 47em) {
    .policyMessage.policyMessage--information-card {
        flex-direction: row;
    }

    .policyMessage.policyMessage--information-card .policyMessage__icon {
        margin-right: 2em;
    }

    .policyMessage.policyMessage--information-card .policyMessage__icon img{
        width: 100%;
    }

    .policyMessage.policyMessage--information-card .policyMessage__content .policyMessage__content--title{
        text-align: left;
    }
}

/* Information-card policy message END */

/* Pod card START */

.pod.pod--card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 0;
    margin-bottom: 2.5em;
    box-shadow: none
}

.pod.pod--card.pod--card--reverse {
    flex-direction: row-reverse;
}

.pod.pod--card .podContent:first-of-type {
    min-height: 0;
}

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

    .pod.pod--card {
        flex-direction: row;
    }

    .pod.pod--card .podContent:first-of-type {
        max-width: 35em;
        min-height: 29em;
        padding: 4em 2em;
        align-self: stretch;
    }
}

.bg-light-blue {
    background-color: #E5F4FF;
}

.pod.pod--card .podContent:first-of-type {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2em;
}

.pod.pod--card .podContent .podContent__inner {
    text-align: center;
}

.pod.pod--card .podContent .podContent__inner .unordered-list{
    li {
        font-size :0.9em;
        margin-bottom : 1em;
        font-family: 'Lato', 'Arial', sans-serif;
        list-style-type :square;
        &::marker {
            font-size: 1.2em !important;
            color :#1e5d88;
        }
    }
}


@media screen and (max-width: 47em) {
    .pod.pod--card .podContent .podContent__inner h3{
        margin-bottom: 0;
    }
}

.pod.pod.pod--card .podContent:last-of-type {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2em;
}

label.blue {
    background-color: #1E5D88 !important;
    transition: background-color 100ms ease;
    border-color: transparent;
    color: #fff;
}

label.blue:hover {
    background-color: #0087c3 !important;
}

label.file-input {
    padding: .7em 1em;
    text-transform: uppercase;
    background: 0 0;
    border: 1px solid #cedfe6;
    border-radius: 10px;
    font-family: 'Lato', 'Arial', sans-serif !important;
    letter-spacing: 0.56px;
    cursor: pointer;
}

input[type="file"] {
    display: none;
}


/* Pod card END */

a.button.yellow.disabled[disabled] {
    background-color: #F0F0F0 !important;
    background-image: none !important;
    border-color: #F0F0F0 !important;
    color:  #aaa!important;
    cursor: not-allowed;
}

/* Upload doc + vignette START */

.podContent__upload-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 2em;
    margin-bottom: 2.5em;
    width: 100%;
    max-width: 100%;;
}

@media screen and (min-width: 47em) {
    .podContent__upload-container:not(:has(> .vignette)) {
        margin-top: -3em;
    }
}

.vignette {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 1em;
    background-color: #f9f9f9;
    max-width: 39em;
    min-height: 15em;
    width: 100%;
    line-height: 2.2em
}

.vignette .vignette-thumbnail {
    background-color: #d9d9d9;
    margin-bottom: 1em;
    width: 150px;
    height: 150px;
}

.vignette .vignette-thumbnail img {
    display: block;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

@media screen and (min-width: 47em) {
    .vignette {
        flex-direction:row;
        justify-content: flex-start;
        align-items: stretch
    }

    .vignette .vignette-thumbnail {
        margin-bottom: 0
    }

    .podContent__upload-container .vignette .vignette-content {
        margin-left: 1em;
    }
}

.vignette .vignette-thumbnail {
    flex-shrink: 0
}

.vignette .vignette-content {
    word-break: break-all;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media screen and (min-width: 71em) {
    .podContent__upload-container {
        grid-template-columns:repeat(2,1fr);
        max-width: 100%;
        column-gap: 2em
    }

    .podContent__upload-container .vignette .vignette-content {
        justify-content: space-between
    }
}

/* Upload doc + vignette END */

/* Upload files message START */

.podContent__upload-container .upload-files-message {
    padding: 0.4em 3.5em;
    position: relative;
    grid-column: 1 / -1;
}

.podContent__upload-container .upload-files-message--success {
    background-color: #EDF5EA;
}

.podContent__upload-container .upload-files-message--success::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.5em;
    transform: translateY(-50%);
    width: 2em;
    height: 2em;
    background-image: url("../images/icons/upload/icon-small-valid.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.podContent__upload-container .upload-files-message--warning {
    background-color: #FFF5E5;
}

.podContent__upload-container .upload-files-message--warning::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.5em;
    transform: translateY(-50%);
    width: 2em;
    height: 2em;
    background-image: url("../images/icons/upload/icon-small-alerte.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.podContent__upload-container .upload-files-message--error {
    background-color: #F8E9E9;
}

.podContent__upload-container .upload-files-message--error::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.5em;
    transform: translateY(-50%);
    width: 2em;
    height: 2em;
    background-image: url("../images/icons/upload/icon-small-invalid.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Upload files message END */

/* Icons START */
.icon  {
    position: relative;
}

.icon.icon--delete::before {
    content: "";
    position: absolute;
    bottom: 0.2em;
    left: -0.2em;
    width: 1.8em;
    height: 1.9em;
    background-image: url("../images/icons/upload/icon-trash-black.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.icon.icon--valid::before {
    content: "";
    position: absolute;
    transform: translateY(-50%);
    left: -9px;
    width: 2em;
    height: 2em;
    background-image: url("../images/icons/upload/icon-small-valid.svg");
    background-size: contain;
    background-repeat: no-repeat;
}


.icon.icon--invalid::before {
    content: "";
    position: absolute;
    transform: translateY(-50%);
    left: -9px;
    width: 2em;
    height: 2em;
    background-image: url("../images/icons/upload/icon-small-invalid.svg");
    background-size: contain;
    background-repeat: no-repeat;
}
/* Icons END */

/* Thumbnail container START */

.pod.pod--recommandations {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2em;
}

@media screen and (min-width: 47em) {
    .pod.pod--recommandations {
        flex-direction: row-reverse;
    }

    .pod.pod--recommandations > .podContent:first-of-type {
        max-width: 60%;
    }
}

.podContent.podContent__thumbnail-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2em;
    margin-top: -2em;
    width: 100%;
    box-sizing: border-box;
}

.podContent.podContent__thumbnail-container img {
    width: 90%;
    height: auto;
}

.podContent.podContent__thumbnail-container .icon.icon--valid + img {
    border: 1px solid #4EA90C;
}

.podContent.podContent__thumbnail-container .icon.icon--invalid + img {
    border: 1px solid #CA0600;
}

.podContent.podContent__thumbnail-container img + p {
    width: 90%;
    margin-top: 0.25em;
}

@media screen and (min-width: 35em) and (max-width: 47em) {
    .podContent.podContent__thumbnail-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (min-width: 47em) {
    .podContent.podContent__thumbnail-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .podContent.podContent__thumbnail-container img + p {
        margin-top: 0.5em;
    }

    .podContent.podContent__thumbnail-container img {
        width: 70%;
        height: auto;
    }
}


/* Thumbnail container END */

/* List styles START */

.content ul li {
    margin: 0 0 0.25em 1.25em;
    background-image: unset;
    padding: 0;
    list-style-type: square;
}

/* List styles END */

/* Progress bar afercom START */
/* html body .wrapper #main .progressBar {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 30px;
    margin-top: 30px;
    overflow: hidden;
}

html body .wrapper #main .progressBar li {
    background-color: #fff;
}

html body .wrapper #main .progressBar li:before {
    content: none;
}

html body .wrapper #main .progressBar li.navdone,
html body .wrapper #main .progressBar li.navon,
html body .wrapper #main .progressBar li.navtodo {
    padding: 10px;
    -webkit-transition: background .25s ease-in-out;
    -o-transition: background .25s ease-in-out;
    transition: background .25s ease-in-out;
}

html body .wrapper #main .progressBar li.navdone .progressWrapper:before,
html body .wrapper #main .progressBar li.navdone .progressWrapper:after,
html body .wrapper #main .progressBar li.navon .progressWrapper:before,
html body .wrapper #main .progressBar li.navon .progressWrapper:after,
html body .wrapper #main .progressBar li.navtodo .progressWrapper:before,
html body .wrapper #main .progressBar li.navtodo .progressWrapper:after {
    border: none;
    display: none;
}

html body .wrapper #main .progressBar li.navdone .progressWrapper a.displayblock,
html body .wrapper #main .progressBar li.navdone .progressWrapper header .top-menu ul li.profil-infos label.displayblock,
html body header .top-menu ul li.profil-infos .wrapper #main .progressBar li.navdone .progressWrapper label.displayblock,
html body .wrapper #main .progressBar li.navon .progressWrapper a.displayblock,
html body .wrapper #main .progressBar li.navon .progressWrapper header .top-menu ul li.profil-infos label.displayblock,
html body header .top-menu ul li.profil-infos .wrapper #main .progressBar li.navon .progressWrapper label.displayblock,
html body .wrapper #main .progressBar li.navtodo .progressWrapper a.displayblock,
html body .wrapper #main .progressBar li.navtodo .progressWrapper header .top-menu ul li.profil-infos label.displayblock,
html body header .top-menu ul li.profil-infos .wrapper #main .progressBar li.navtodo .progressWrapper label.displayblock {
    cursor: pointer;
    text-decoration: none;
}

html body .wrapper #main .progressBar li.navdone .progressWrapper a.displayblock:hover .label,
html body .wrapper #main .progressBar li.navdone .progressWrapper header .top-menu ul li.profil-infos label.displayblock:hover .label,
html body header .top-menu ul li.profil-infos .wrapper #main .progressBar li.navdone .progressWrapper label.displayblock:hover .label,
html body .wrapper #main .progressBar li.navon .progressWrapper a.displayblock:hover .label,
html body .wrapper #main .progressBar li.navon .progressWrapper header .top-menu ul li.profil-infos label.displayblock:hover .label,
html body header .top-menu ul li.profil-infos .wrapper #main .progressBar li.navon .progressWrapper label.displayblock:hover .label,
html body .wrapper #main .progressBar li.navtodo .progressWrapper a.displayblock:hover .label,
html body .wrapper #main .progressBar li.navtodo .progressWrapper header .top-menu ul li.profil-infos label.displayblock:hover .label,
html body header .top-menu ul li.profil-infos .wrapper #main .progressBar li.navtodo .progressWrapper label.displayblock:hover .label {
    text-decoration: none;
}

html body .wrapper #main .progressBar li.navdone .progressWrapper .stage,
html body .wrapper #main .progressBar li.navon .progressWrapper .stage,
html body .wrapper #main .progressBar li.navtodo .progressWrapper .stage {
    background-color: transparent;
    background-position: center center !important;
    background-size: 15px 15px !important;
    border-radius: 999em;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 0;
    margin-right: 5px;
    margin-top: 0;
    padding: 0;
    -webkit-transition: background .25s ease-in-out, border .25s ease-in-out, color .25s ease-in-out;
    -o-transition: background .25s ease-in-out, border .25s ease-in-out, color .25s ease-in-out;
    transition: background .25s ease-in-out, border .25s ease-in-out, color .25s ease-in-out;
    width: 24px;
}

html body .wrapper #main .progressBar li.navdone .progressWrapper .label,
html body .wrapper #main .progressBar li.navon .progressWrapper .label,
html body .wrapper #main .progressBar li.navtodo .progressWrapper .label {
    display: inline-block;
    font-size: 15px;
}

html body .wrapper #main .progressBar li.navdone {
    background-color: rgba(128, 185, 74, 0.8);
    cursor: pointer;
}

html body .wrapper #main .progressBar li.navdone:hover {
    background-color: #80B94A;
}

html body .wrapper #main .progressBar li.navdone:hover .stage {
    background-color: #fff !important;
    background-image: url(../images/icons/progress-tick.svg) !important;
    border-color: #fff !important;
}

html body .wrapper #main .progressBar li.navdone:hover .label {
    text-decoration: none;
}

html body .wrapper #main .progressBar li.navdone .stage {
    background-image: url(../images/icons/progress-tick-white.svg);
    border-color: rgba(255, 255, 255, 0.5);
}

html body .wrapper #main .progressBar li.navdone .stage:after {
    content: none;
}

html body .wrapper #main .progressBar li.navdone .label {
    color: #fff !important;
    text-decoration: underline;
}

html body .wrapper #main .progressBar li.navon {
    background-color: #80B94A;
}

html body .wrapper #main .progressBar li.navon .progressWrapper .stage {
    background-color: #fff;
    border-color: #fff;
    color: #39994F;
}

html body .wrapper #main .progressBar li.navon .progressWrapper .stage:after {
    border-bottom-width: 1.5em;
    border-left-color: #80B94A;
    border-left-width: 0.5em;
    border-top-width: 1.5em;
    border-right-width: 0.5em;
    right: -17px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: border .25s ease-in-out;
    -o-transition: border .25s ease-in-out;
    transition: border .25s ease-in-out;
}

html body .wrapper #main .progressBar li.navon .progressWrapper .label {
    text-decoration: none;
}

html body .wrapper #main .progressBar li.navtodo:hover .stage {
    background-color: #39994F;
    border-color: #39994F;
    color: #fff;
}

html body .wrapper #main .progressBar li.navtodo .stage {
    border-color: #C9C9C9;
    color: #939393;
}

html body .wrapper #main .progressBar li.navtodo .label {
    color: #39994F;
} */
/* Progress bar afercom END */

/* Policy message afercom START */

html body .policyMessage.af-notification {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    background: #fff;
    border: 1px solid #39994F;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 30px;
    margin-top: 0;
    min-height: 54px;
    padding: 15px 0 !important;
    position: relative;
    border-radius: 0 !important;
}

html body .policyMessage.af-notification:after,
html body .policyMessage.af-notification:before {
    bottom: -1px;
    content: '';
    left: -1px;
    position: absolute;
    top: -1px;
    width: 60px;
}

html body .policyMessage.af-notification:after {
    background: transparent url("../images/icons/upload/icon-info-white.svg") no-repeat;
    background-position: center center;
    background-size: 36px 36px;
}

html body .policyMessage.af-notification:before {
    background-color: #39994F;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

html body .policyMessage.af-notification.amber {
    background: #FFF !important;
    border: 1px solid #F18F01 !important;
}

html body .policyMessage.af-notification.amber:before {
    background-color: #F18F01;
}

html body .policyMessage.af-notification.important {
    background: #fff !important;
    border: 1px solid #BD1E1E !important;
}

html body .policyMessage.af-notification.important:before {
    background-color: #BD1E1E;
}

html body .policyMessage.af-notification.neutral {
    background: #fff !important;
    border: 1px solid #CEDFE6 !important;
}

html body .policyMessage.af-notification.neutral:before {
    background-color: #CEDFE6;
}

html body .policyMessage.af-notification>* {
    margin-left: auto;
    max-width: -webkit-calc(100% - 60px);
    max-width: calc(100% - 60px);
    overflow: hidden;
    padding: 0 20px !important;
}

html body .policyMessage.af-notification>*:first-child {
    border-top-right-radius: 15px;
}

html body .policyMessage.af-notification>*:last-child {
    border-bottom-right-radius: 15px;
}

html body .policyMessage.af-notification>* p:last-child {
    margin-bottom: 0;
}

html body .policyMessage.af-notification .podContent {
    background-image: none;
    height: auto;
    min-height: auto !important;
    width: 100%;
}

html body .policyMessage.af-notification .podContent.center {
    text-align: left;
}

html body .policyMessage.af-notification .podContent p {
    border: 0;
    border-left: 0;
    max-width: 100%;
    padding: 0;
    width: 100%;
}

html body .policyMessage.af-notification .podContent p+p {
    margin-top: 5px;
}

/*---------------------------------------------------------------------------------------
MODAL
--------------------------------------------------------------------------------------- */


/*modal*/


/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */

.modal {
    z-index: 99998;
    height: 100%;
    width: 150%;
    background: rgba( 255, 255, 255, .8) url('../images/global/spinner.gif') 50% 50% no-repeat;
}


/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */

body.loading {
    overflow: hidden;
}


/* Anytime the body has the loading class, our
   modal element will be visible */

body.loading .modal {
    display: block;
}


/*/**
 * Modal styles
 * 1. Include a `display: none;` hack for IE9
 * 2. Position the modal off screen, using 3D hardware
 * acceleration where supported
 */

.modalbox {
    z-index: 99998;
    height: 100%;
    transition: opacity 0.2s;
}

.modalbox {
    .modal-content {
        position: fixed;
    }
}

.modalbox {
    .modal-content {
        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            h2.feature {
                margin-left: 1em;
                width: calc(100% - 6em);
                font-family: 'Lato', 'Arial', sans-serif;
                text-transform: uppercase;
                font-size: 2em;
                font-weight: 600;
                letter-spacing: 2px;
                & + p {
                    margin: 0;
                    padding: 0;
                    margin-left: auto;
                }
            }
            a.closeModal[type='button'] {
                --icon: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3C!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Calque_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 51.2 50.8' style='enable-background:new 0 0 51.2 50.8;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:%23FFFFFF;} %3C/style%3E%3Cg%3E%3Cg%3E%3Cpath class='st0' d='M23.2,25.4L0.5,48.1c-0.6,0.6-0.6,1.7,0,2.3c0.3,0.3,0.7,0.5,1.1,0.5c0.4,0,0.8-0.2,1.1-0.5l22.8-22.8 l22.8,22.8c0.3,0.3,0.7,0.5,1.1,0.5c0.4,0,0.8-0.2,1.1-0.5c0.6-0.6,0.6-1.6,0-2.3L28,25.4L50.7,2.7c0.6-0.6,0.6-1.6,0-2.3 c-0.6-0.6-1.6-0.6-2.3,0L25.6,23.3L2.7,0.5c-0.6-0.6-1.6-0.6-2.3,0s-0.6,1.6,0,2.3L23.2,25.4z M23.2,25.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
                --btn-width: 6em;
                --icon-size: 2em;
                --btn-backgroung-color: #80b94a;
                height: var(--btn-width) !important;
                width: var(--btn-width) !important;
                min-width: var(--btn-width) !important;
                border-radius: 0;
                top: 0;
                right: 0;
                background: var(--btn-backgroung-color) var(--icon) no-repeat center center;
                background-size: var(--icon-size);
                border-radius: 0;
                text-align: center;
                text-decoration: none;
                border: none;
                text-indent: -10000em;
                padding: 0;
                margin: 0;
            }
        }
    }
}
.modal-footer {
    .button.yellow {
        --padding-v: 0.9em;
        --padding-h: 1.5em;
        --btn-color: #39994f;
        --txt-color: #fff;
        padding: var(--padding-v) var(--padding-h);
        text-align: center;
        text-transform: uppercase;
        color: var(--txt-color) !important;
        background: var(--btn-color);
        border: 1px solid var(--btn-color);
        margin: 0;
        border-radius: 10px;
        background-image: none;
        &:hover {
            background-image: inherit;
            background-color: var(--btn-color);
            border: 1px solid var(--btn-color);
        }
    }
}

/* Modal overlay, only visible when modal becomes a popup */

.nav-active {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: hsla(0, 0%, 0%, 0.5);
    content: "";
}

.modalbox:before {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: hsla(0, 0%, 0%, 0.5);
    content: "";
}

/**
 * 1. Include a `display: block;` hack for IE9
 * 2. Move the modal into view
 */

.modalbox:target {
    display: block\9;
    /* 1 */
    outline: none;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    transform: translate(0, 0);
    /* 2 */
}

.modalbox.showTheBox {
    display: block\9;
    /* 1 */
    outline: none;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    transform: translate(0, 0);
    /* 2 */
}

.modal-content {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 11;
    overflow: scroll;
    padding: 20px;
    width: auto;
    background-color: #fff;
}

.modal-content-info {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 11;
    overflow: scroll;
    padding: 20px;
    width: auto;
    height: 100%;
    background-color: #fff;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #D5D5D5;
    padding: 1em 0 !important;
    background-color: #39994F !important;
    overflow: hidden;
}

.modal-title,
.modal-close {
    /*display: table-cell;*/
    display: block;
    float: right;
    /* vertical-align: middle; */
}

.modal-header h2.feature {
    display: inline-block;
    width: 100%;
    background: none;
    border: none;
    font-size: 2em;
    color: #FFF;
    margin: 0;
}

.modal-title {
    margin: 0 0 20px;
    font-size: 1.333rem;
}

.modal-close {
    font-family: Arial, Helvetica, sans-serif;
    width: 49px;
    height: 49px;
    max-height: 49px;
    border-radius: 3px;
    border: 1px solid #dedede;
    background-color: #fff;
    /*color: #686868;*/
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    font-size: 3em;
    line-height: 1.75em;
}

.modal-close:hover {
    text-decoration: none;
    cursor: pointer;
}

.modal-content {
    top: 10%;
    right: 5%;
    left: 5%;
    max-width: 124em;
    max-height: 90%;
    width: 90%;
    height: 80%;
    overflow-y: hidden;
    overflow-x: hidden;
    margin: 0 auto 5em auto;
    padding: 0;
    border-radius: 3px;
    box-shadow: 0 0 20px hsla(0, 0%, 0%, 0.35);
    background-color: #fff;
    margin-bottom: 8em;
}



.modal-content-info {
    top: 5%;
    right: 5%;
    left: 5%;
    max-width: 124em;
    max-height: 80%;
    width: 90%;
    height: 80%;
    overflow-y: hidden;
    overflow-x: hidden;
    margin: 0 auto 5em auto;
    padding: 0;
    border-radius: 3px;
    box-shadow: 0 0 20px hsla(0, 0%, 0%, 0.35);
    background-color: #fff;
    overflow-y: hidden;
    overflow-x: hidden;
}


/* 1. Push down to make room for `.modal-header` */

.modal-body {
    margin-bottom: auto;
    height: 100%;
    left: 0;
    width: 100%;
    overflow-x: hidden;
    padding: 1em 2em;
}

.modal-body > .podContent {
    height: auto !important;
}

.modal-footer {
    width: 100%;
    height: auto;
    background-color: #fff;
    bottom: 0;
    font-size: 100%;
    margin-bottom: 0;
    border: 0 !important;
}

.modal-footer > .bloc-buttom-left,
.modal-footer > .bloc-buttom-right,
.modal-footer > .bloc-buttom-left a,
.modal-footer > .bloc-buttom-right a  {
    width: 100%;
}

.modalbox footer {
    padding: 1.4em 2em;
}

@media only screen and (min-width: 35em) {
    .modalbox footer:first-child {
        margin-right: auto;
    }

    .modal-content.modal-content--hauto {
        height: auto !important;
    }

    .modal-footer > .bloc-buttom-left, .modal-footer > .bloc-buttom-right {
        width: initial;
    }
}



/*---------------------------------------------------------------------------------------
MEDIA QUERIES FOR SMALL SIZE
--------------------------------------------------------------------------------------- */

@media only screen and (max-width: 35em) {
    .modal-header h2.feature {
        width: 83%;
    }
    .modal-close {
        height: 40px;
        width: 40px;
        display: inline-block;
        /*line-height:1.45em; */
    }

    .modal-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .modal-footer > * {
        margin: 0.5em auto;
    }
}

@media only screen and (min-width: 35em) and (max-width: 47em) {
    .modal-header h2.feature {
        width: 89%;
    }
}



/*---------------------------------------------------------------------------------------
MEDIA QUERIES FOR MEDIUM SIZE
--------------------------------------------------------------------------------------- */

@media only screen and (min-width: 50em) and (max-width: 68.5em) {
    .modal-header h2.feature {
        width: 90%;
    }
}


/*---------------------------------------------------------------------------------------
MEDIA QUERIES FOR MEDIUM SIZE AND LARGE SIZE
--------------------------------------------------------------------------------------- */

@media only screen and (min-width: 68.5em) {
    .modal-header h2.feature {
        width: 95%;
    }
    .modalbox footer {
        padding-top: 1.4em;
    }
    .modal-content {
        top: 5%;
        right: 5%;
        left: 5%;
        overflow-y: hidden;
        overflow-x: hidden;
        height: 100%;
        margin: 0 auto 5em auto;
        padding: 0;
        border-radius: 3px;
        box-shadow: 0 0 20px hsla(0, 0%, 0%, 0.35);
        background-color: #fff;
    }
    .modal-content.modal-content--w50 {
        width: 50% !important;
    }
    .modal-content-info {
        top: 30%;
        right: 20%;
        left: 20%;
        max-width: 124em;
        max-height: 50%;
        width: 50%;
        height: 30%;
        overflow-y: hidden;
        overflow-x: hidden;
        margin: 0 auto 5em auto;
        padding: 0;
        border-radius: 3px;
        box-shadow: 0 0 20px hsla(0, 0%, 0%, 0.35);
        background-color: #fff;
        overflow-y: hidden;
        overflow-x: hidden;
    }
}


/*---------------------------------------------------------------------------------------
LOADING INLIINE
--------------------------------------------------------------------------------------- */

.loading-inline {
    text-indent: -999999px;
    background-image: url('../images/global/spinner.gif');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 1em;
    display: inline-block;
    height: 1em;
    width: 4em;
}