/* http://meyerweb.com/eric/tools/css/reset/ 
            v2.0 | 20110126
            License: none (public domain)
    */

    @import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&display=swap');

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        color:var(--darkgrey);
        line-height: 1;
        font-family: 'Open Sans Condensed', sans-serif;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    a:hover{
        text-decoration:none;
    }

    :root {
    --white: rgba(255, 255, 255, 1);
    --whitea: rgba(255, 255, 255, 0.7);
    --blue: #00529B;
    --orange: #F6672C;
    --green: #27AE60;
    --darkgrey: #77787B;
    --middlegrey: #B6B8BB;
    --grey: #E6E6E6;
    --white: #FFFFFF;
    --red: #FF0000;

    --relative: relative;
    --absolute: absolute;
    
    --fs3:0.1875rem;
    --fs4:0.25rem;
    --fs5:0.3125rem;
    --fs6:0.375rem;
    --fs7:0.4375rem;
    --fs8:0.5rem;
    --fs10:0.625rem;
    --fs11:0.6875rem;
    --fs13:0.8125rem;
    --fs14:0.8125rem;
    --fs15:0.9375rem;
    --fs16:1rem;
    --fs17:1.0625rem;
    --fs18:1.125rem;
    --fs19:1.1875rem;
    --fs20:1.25rem;
    --fs22:1.375rem;
    --fs23:1.4375rem;
    --fs24:1.5rem;
    --fs25:1.5625rem;
    --fs26:1.625rem;
    --fs28:1.75rem;
    --fs30:1.875rem;
    --fs31:1.9375rem;
    --fs32:2rem;
    --fs33:2.0625rem;
    --fs34:2.125rem;
    --fs35:2.1875rem;
    --fs40:2.5rem;
    --fs42:2.625rem;
    --fs45:2.8125rem;
    --fs48:3rem;
    --fs50:3.125rem;
    --fs58:3.625rem;
    --fs60:3.75rem;
    --fs64:4rem;
    --fs68:4.25rem;
    --fs80:5rem;
    --fs90:5.625rem;
    --fs100:7.5rem;
    --fs160:10rem;
    --fs200:12.5rem;
    
    --transition:0.5s;
    }

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

    .color-white {
        color: var(--white);
    }
    .color-red {
        color: var(--red);
    }

    .w-full {
        width:100%;
    }

    .w-middle {
        width: 50%;
    }

    .pb17 {
        padding-bottom: var(--fs17);
    }

    .mt20 {
        margin-top: var(--fs20);
    }

    .mt15 {
        margin-top: var(--fs15);
    }

    .mb10 {
        margin-bottom: var(--fs10);
    }

    .mb15 {
        margin-bottom: var(--fs15);
    }

    .mb20 {
        margin-bottom: var(--fs20);
    }

    .mb25 {
        margin-bottom: var(--fs25);
    }

    .mb30 {
        margin-bottom: var(--fs30);
    }

    .mb45 {
        margin-bottom: var(--fs45);
    }

    .mb60 {
        margin-bottom: var(--fs60) !important;
    }

    .pt30 {
        padding-top: var(--fs30);
    }

    .pb30 {
        padding-bottom: var(--fs30);
    }

    .pt60 {
        padding-top: 60px;
    }

    .pb60 {
        margin-bottom: 60px;
    }

    .mt90 {
        margin-top: var(--fs90);
    }

    .mb34 {
        margin-bottom: var(--fs34);
    }

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

    .bg-lightgrey {
        background: var(--grey);
    }

    .p15 {
        padding: var(--fs15);
    }

    .white {
        color: var(--white);
        font-size: var(--fs23);
        font-weight: 700;
    }

    .img-fluid {
        height: auto;
        max-width: 100%;
    }

    .d-flex{
        display: flex;
    }

    .justify-content-between {
        justify-content: space-between;
    }

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

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

    .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    .flex-wrap{
        flex-wrap: wrap;
    }

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

    .bg-blue {
        background: var(--blue);
    }

    @media screen and (max-width: 768px) {
        .md-mb10 {
            margin-bottom:10px;
        }
        .md-mb20 {
            margin-bottom:20px;
        }
        .md-d-none {
            display:none;
        }

        .md-order2 {
            order: 2;
        }
    }

    /* TITLE TYPO */
    .title-ambassador-page {
        color: var(--darkgrey);
        font-size: var(--fs34);
        font-weight: 700;
    }

    .title-ambassador-page + h2 {
        color: var(--darkgrey);
        font-size: var(--fs23);
        margin-top: var(--fs10);
    }

    .title-ambassador-cv {
        color:var(--darkgrey);
        font-size: var(--fs23);
        font-weight: 700;
        margin-bottom: var(--fs10);
    }

    /* STRUCTURE */
    .container-ambassador {
        margin: 0 auto;
        max-width: 1300px;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
    }

    .container-ambassador-inner{
        padding: 0 var(--fs15);
    }

    .col-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-4,
    .col-8 {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }

    @media screen and (max-width: 768px) {
        .col-4,
        .col-8 {
            margin-right: 0;
            flex: 0 0 100%;
            max-width: 100%;
        }

        .aside-col {
            margin-bottom: var(--fs20);
        }
    }

    /* BANNER */
    .banner-ambassador {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        font-weight: 700;
        padding: var(--fs100) var(--fs15);
        background-image: url(../assets/img/background-ambassador.png);
    }

    .banner-ambassador,
    .banner-ambassador h1,
    .banner-ambassador h2 {
        color: var(--white);
    }

    .banner-ambassador h1 {
        font-size: var(--fs68);
        line-height: var(--fs58);
        margin-bottom: var(--fs20);
    }

    .banner-ambassador h2 {
        font-size: var(--fs34);
        line-height: var(--fs28);
    }

    @media screen and (max-width: 576px) {
        .banner-ambassador h1 {
            font-size: var(--fs48);
        }
    
        .banner-ambassador h2 {
            font-size: var(--fs24);
        }
    }

    /* FORM */
    .form-control {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: var(--blue);
        background-color: #fff;
        background-image: none;
        border: none;
        outline: none;
    }

    /* BUTTON */
    .btn {
        border:none;
        cursor: pointer;
        display: inline-block;
        font-size:var(--fs16);
        font-weight:700;
        padding: var(--fs10) var(--fs16);
        text-align:center;
        text-decoration:none;
        text-transform:uppercase;
    }

    .btn.success {
        background: var(--green);
        color: var(--white);
        transition:var(--transition);
    }

    .btn-primary,
    .btn-question {
        color: var(--white);
        background: var(--blue);
        transition:var(--transition);
    }

    .btn-primary:hover,
    .btn-question:hover {
        background: var(--orange);
        color: var(--white);
        transition:var(--transition);
    }

    .btn-question::before {
        content: "<";
        font-size: var(--fs16);
        margin-right: var(--fs10);
    }

    .btn-secondary {
        color: var(--blue);
        background: var(--white);
        border: 1px solid var(--blue);
        transition:var(--transition);
    }

    .btn-secondary:hover {
        color: var(--orange);
        background: var(--white);
        border: 1px solid var(--orange);
        transition:var(--transition);
    }

    .btn-orange {
        background: var(--orange);
        color: var(--white);
        transition:var(--transition);
    }

    .btn-orange:hover {
        background: var(--white);
        color: var(--orange);
        transition:var(--transition);
    }

    .btn-green {
        background: var(--green);
        color: var(--white);
        transition:var(--transition);
    }

    .btn-green:hover {
        opacity: 0.8;
        transition:var(--transition);
    }

    #submit_comments_success {
        cursor: no-drop;
    }

    /* SIDDEBAR */
    .aside-header {
        margin-bottom: var(--fs45);
    }

    .aside-header .title-ambasadeur {
        margin-bottom: var(--fs24);
    }

    .aside-header .title-ambasadeur {
        color:var(--darkgrey);
        font-size: var(--fs23);
        font-weight: 700;
        margin-bottom: var(--fs15);
    }

    .aside-header p {
        font-size: var(--fs19);
        margin-bottom: var(--fs20);
    }

    .content-question {
        height: 785px;
        overflow: hidden;
        position:relative;
    }

    .citation-sidebar{
        display: flex;
        align-items:center
    }

    .citation-sidebar .img {
        align-items: center;
        display: flex;
        height: var(--fs160);
        margin-right: var(--fs20);
        width: 40%;
    }

    .citation-sidebar figcaption {
        color: var(--blue);
        font-size: var(--fs23);
        font-weight: 300;
        width: 60%;
    }

    /* QUESTIONS */

    .question {
        margin-bottom: var(--fs45);
        position:relative;
    }

    .content-question .question:nth-last-child(2) {
        margin-bottom: 0;
    }

    .gradient-question {
        background: rgb(255,255,255);
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%);
        bottom: 0;
        height: var(--fs200);
        left: 0;
        position: absolute;
        width: 100%;
    }

    .question header{
        border-bottom: 1px Solid var(--middlegrey);    
        font-size: var(--fs19);
        margin-bottom: var(--fs14);
        padding-bottom: var(--fs15);
    }

    .titre-question {
        align-items: center;
        display: flex;
        margin-bottom: var(--fs14);
        min-height: 1px;
        position: relative;
        width: 100%;
    }

    .titre-question i{
        margin-right: var(--fs15);
    }

    .titre-question h2 {
        font-size: var(--fs19);
        font-weight: 700;
        line-height: var(--fs25);
    }

    .titre-question h2 span:first-child {
        padding-right: 5px;
    }

    .titre-question h2 span:last-child {
        padding-left: 5px;
    }

    .ambassador-content {
        margin-bottom: var(--fs60);
    }

    .ambassador-content:last-child {
        padding-bottom: var(--fs60);
    }

    .ambassador-content:nth-child(even) {
        background: var(--grey);
        padding: var(--fs60) 0;
    }

    .all-comments .question {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        position: relative;
        width: 100%;
    }

    @media screen and (max-width: 768px) {
        .all-comments .question {
            margin-right: 0;
            flex: 0 0 100%;
            max-width: 100%;
        }
    }

    .text-reponse {
        border-top: 1px Solid var(--middlegrey);
        padding-top: var(--fs15);
    }

    .text-reponse h3 {
        color: var(--blue);
        font-size: var(--fs19);
        font-weight: 300;
        margin-bottom: var(--fs19);
    }

    .ambassador-card {
        background-position: center center;
        background-size: cover;
        margin-bottom: var(--fs20);
        padding: var(--fs40) var(--fs15);
        position: var(--relative);
    }

    .ambassador-card:last-child {
        margin-bottom: var(--fs60);
    }

    .ambassador-card .gradient {
        background: rgb(230,230,230);
        background: linear-gradient(90deg, rgba(230,230,230,0) 0%, rgba(230,230,230,1) 50%);
        height: 100%;
        position: var(--absolute);
        right: 0;
        top: 0;
        width: 100%;
    }

    .ambassador-card .content-ambassador {
        float: right;
        max-width: 500px;
        width: 100%;
    }

    .ambassador-card figure {
        align-items:center;
        display:flex;
        flex-wrap: wrap;
        margin-bottom: var(--fs20);
    }

    .ambassador-card figure,
    .ambassador-card .btn {
        position: var(--relative);
        z-index: 10;
    }

    .ambassador-card figure .img {
        height: var(--fs160);
        margin-right: var(--fs20);
        width: var(--fs160);
    }

    .ambassador-card figure .img img {
        max-width: 100%;
        height: auto;
    }

    .ambassador-card figure figcaption {
        width: 48.9%;
    }

    .ambassador-card figure figcaption .name {
        font-size: var(--fs34);
        font-weight: 300;
        margin-bottom: var(--fs10);
    }

    .ambassador-card figure figcaption .name,
    .ambassador-card figure figcaption .name a {
        color: var(--darkgrey);
    }

    .ambassador-card figure figcaption .function {
        color: var(--blue);
        font-size: var(--fs19);
        font-weight: 700;
        margin-bottom: var(--fs7);
    }

    .ambassador-card figure figcaption .citation {
        color: var(--darkgrey);
        font-size: var(--fs19);
        font-weight: 300;
    }

    @media screen and (max-width: 768px) {
        .ambassador-card figure {
            padding-right: var(--fs40);
        }
    }

    @media screen and (max-width: 589px) {
        .ambassador-card .gradient {
            background: var(--grey);
        }

        .ambassador-card figure {
            padding-right: 0;
        }
    }

    @media screen and (max-width: 489px) {
        .ambassador-card .gradient {
            background: var(--grey);
        }

        .ambassador-card figure figcaption {
            margin-top: var(--fs20);
        }

        .ambassador-card figure figcaption {
            width:100%;
        }
    }

    .filter-ambasadeur {
        background-color: var(--grey);
        border-bottom: 1px solid #ddd;
        position: relative;
        width: 100%;
        height: auto;
    }
    .filter-ambasadeur > button {
        background: none;
        border: none;
        display: block;
        color: var(--darkgrey);
        cursor: pointer;
        font-family: 'Open Sans Condensed', sans-serif;
        font-size: var(--fs23);
        font-weight: 300;
        outline: none;
        padding: 10px 15px;
        -webkit-transition:all 0.2s linear;
        -moz-transition:all 0.2s linear;
        text-align: left;
        transition:all 0.2s linear;
        width: 100%;
    }
    .filter-ambasadeur > button i{
        float: right;
        margin-top: 4px;
    }
    .filter-ambasadeur > button i.fa-plus:before{
        content:"+";
        font-size: var(--fs24);
        line-height:0;
    }
    .filter-ambasadeur > button i.fa-minus:before{
        content:"-";
        font-size: var(--fs24);
        line-height:0;
    }
    .filter-ambasadeur .content-filter{
        display: none;
    }

    .cv-overlay{
        width: 100%;
        height: 50px;
        background: rgba(0,0,0,0.6);
    }
    .cv-overlay .cv-spinner{
        display: flex;
        height: 100%;
    }
    .cv-overlay .fa-spinner{
        margin: auto;
        color: white;
        font-size: 2em;
    }

    .cbx {
        margin: auto;
        -webkit-user-select: none;
        user-select: none;
        cursor: pointer;
      }
      .cbx span {
        display: inline-block;
        vertical-align: middle;
        transform: translate3d(0, 0, 0);
      }
      .cbx span:first-child {
        position: relative;
        width: 18px;
        height: 18px;
        border-radius: 3px;
        transform: scale(1);
        vertical-align: middle;
        border: 1px solid var(--blue);
        transition: all 0.2s ease;
      }
      .cbx span:first-child svg {
        position: absolute;
        top: 3px;
        left: 2px;
        fill: none;
        stroke: var(--blue);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 16px;
        stroke-dashoffset: 16px;
        transition: all 0.3s ease;
        transition-delay: 0.1s;
        transform: translate3d(0, 0, 0);
      }
      .cbx span:first-child:before {
        content: "";
        width: 100%;
        height: 100%;
        background: var(--blue);
        display: block;
        transform: scale(0);
        opacity: 1;
        border-radius: 50%;
      }
      .cbx span:last-child {
        padding-left: 8px;
      }
      .inp-cbx:checked + .cbx span:first-child svg {
        stroke-dashoffset: 0;
      }
      .inp-cbx:checked + .cbx span:first-child:before {
        transform: scale(3.5);
        opacity: 0;
        transition: all 0.6s ease;
      }

      .comment-form .bloc-postid, .comment-form .bloc-submit {
          display:none;
      }

      .question-msg-success a {
          color: var(--white);
          text-decoration:underline;
      }

      question-msg-success a:hover {
        text-decoration:underline;
      }
      
      @keyframes wave {
        50% {
          transform: scale(0.9);
        }
      }