body {
    margin:0; background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
}

/* FONTES */
@font-face {
        font-family: 'maax'; 
        src: url('../FONTES/Maax_Regular/Maax-Regular.eot');
        src: url('../FONTES/Maax_Regular/Maax-Regular.eot?#iefix') format('embedded-opentype'),
            url('../FONTES/Maax_Regular/Maax-Regular.woff2') format('woff2'),
            url('../FONTES/Maax_Regular/Maax-Regular.woff') format('woff'),
            url('../FONTES/Maax_Regular/Maax-Regular.ttf') format('truetype'),
            url('../FONTES/Maax_Regular/Maax-Regular.svg') format('svg');
        }

@font-face {
        font-family: 'maax-bold'; 
        src: url('../FONTES/Maax_Bold/Maax-Bold.eot');
        src: url('../FONTES/Maax_Bold/Maax-Bold.eot?#iefix') format('embedded-opentype'),
            url('../FONTES/Maax_Bold/Maax-Bold.woff2') format('woff2'),
            url('../FONTES/Maax_Bold/Maax-Bold.woff') format('woff'),
            url('../FONTES/Maax_Bold/Maax-Bold.ttf') format('truetype'),
            url('../FONTES/Maax_Bold/Maax-Bold.svg') format('svg');
        }        

@font-face {
        font-family: 'maax-medium'; 
        src: url('../FONTES/Maax_Medium/Maax-Medium.eot');
        src: url('../FONTES/Maax_Medium/Maax-Medium.eot?#iefix') format('embedded-opentype'),
            url('../FONTES/Maax_Medium/Maax-Medium.woff2') format('woff2'),
            url('../FONTES/Maax_Medium/Maax-Medium.woff') format('woff'),
            url('../FONTES/Maax_Medium/Maax-Medium.ttf') format('truetype'),
            url('../FONTES/Maax_Medium/Maax-Medium.svg') format('svg');
        }      
        
        


/* STRUCTURE GENERALE */
        #contientTout {overflow: hidden; position: relative; height: 100vh; width: 100vw;}
        .centerScreen {display: flex; align-items: center; width: 100vw; height: 100vh;}
        #introScreen, #onboardingScreen, #jeuScreen, #newHighScoreScreen, #badgeScreen, #scoreScreen, #credits, #greenitScreen {
            position: absolute;
            -webkit-transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
            -o-transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
            transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        }
        #logoScreen {
            position: absolute;
            -webkit-transition: all 0.2s cubic-bezier(0.77,0.2,0.05,1.0);
            -o-transition: all 0.2s cubic-bezier(0.77,0.2,0.05,1.0);
            transition: all 0.2s cubic-bezier(0.77,0.2,0.05,1.0);
        }


/* CSS GENERALES */
        a {text-decoration: none;}
        .backgroundBleu {background-color: #156EDF;}
        .blanc {color: white;}
        .bleu, .bleu a {color: #156EDF;}
        .centerTxt {text-align: center;}
        .maax {font-family: "maax", Arial, Helvetica, sans-serif; }
        .maaxBold {font-family: "maax-bold", Arial, Helvetica, sans-serif; }
        .maaxMedium {font-family: "maax-medium", Arial, Helvetica, sans-serif; }
        .capitale {text-transform: uppercase;}

        .fontSize_1 {font-size: 1vw;}
        .fontSize_1-5 {font-size: 1.5vw;}
        .fontSize_2 {font-size: 2vw;}
        .fontSize_3 {font-size: 3vw;}
        .fontSize_4 {font-size: 4vw;}
        .fontSize_5 {font-size: 5vw;}
        .fontSize_6 {font-size: 6vw;}
        .fontSize_10 {font-size: 10vw;}

        .lineHeight_1 {line-height: 1;}
        .lineHeight_1-2 {line-height: 1.2;}

        .marginTop_1 {margin-top: 1vw;}
        .marginTop_1-5 {margin-top: 1.5vw;}
        .marginBottom_1 {margin-bottom: 1vw;}
        .marginBottom_30 {margin-bottom:30px}

        .survolCursorPointer:hover {cursor: pointer;}

        .clearfix::after {
            content: "";
            clear: both;
            display: table;
          }
        
        


/* ECRAN ACCUEIL */
        #logoScreen {justify-content: center; flex-wrap: wrap; position: absolute; top:0}
        #logoDellPresent, #flecheintroScreen, #presents {width:100%; text-align: center; opacity: 0;}
        #logoScreen.hide {top:-100vh} 
        #logoDellPresent img {width:40vw}
        #presents {letter-spacing: 0.1vw;}
        #blocAccueil:hover #flecheintroScreen {animation: fleche_bas_anim 0.25s linear 0s infinite alternate; -webkit-animation: fleche_bas_anim 0.25s linear 0s infinite alternate;}


/* ECRAN INTRO */
        #introScreen {
            position: absolute;
            top:0;
            /*top:100%;*/
            display:none;
        }
        #introScreen.show {top:0; display:flex;} 
        #introScreen.hide {position: absolute; top:-100vh}
        #intro { 
            /*width: 1400px;
            height: 900px; */
            max-width: 1400px;
            width: 70%;
            height: auto;
            margin: 0 auto;
        }

/* ECRAN GREENITS */
        #greenitScreen {position: absolute; top:100%}    
        #greenitScreen.show {top:0}   
        #greenitScreen.hide {position: absolute; top:-100vh} 
        #greenitStory {
            max-width: 1400px;
            width: 70%;
            height: auto;
            margin: 0 auto;
            position: relative;
        }
        #greenitStory b {font-family: "maax-bold", Arial, Helvetica, sans-serif; }
        #flecheGreenitStory, #flecheintroScreen {margin-top:3vw;}
        #flecheGreenitStory img, #flecheintroScreen img {width:3vw; height:auto}
        #flecheGreenitStory:hover {cursor: pointer; animation: fleche_bas_anim 0.25s linear 0s infinite alternate; -webkit-animation: fleche_bas_anim 0.25s linear 0s infinite alternate;}

        #greenitsImage {margin-bottom: 2vw;}
        #greenitsImage img {width:25vw}
        

/* ECRAN ONBOARDING */
        #onboardingScreen {position: absolute; top:100%}
        #onboardingScreen.show {top:0}
        #onboardingScreen.hide {position: absolute; top:-100vh}
        #onboarding { 
            /*width: 1400px;
            height: 900px; */
            max-width: 1400px;
            width: 70%;
            height: auto;
            margin: 0 auto;
            position: relative;
        }    
        #txt_onboarding_PC {position: absolute; bottom:14vw; width:100%}
        #onboarding_anim {width: 50%; margin: 0 auto -3vw; position: relative; z-index: 1;}
        #btnOK_onboarding {
            width: 8vw;
            height: 8vw;
            background-image: url(../IMAGES/btnOK.png);
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;
            bottom:3vw;
            left:50%;
            transform: translateX(-50%);
            background-position-x: left;
        }
        #btnOK_onboarding:hover {
            cursor: pointer;
            background-position-x: right;
        }
        
        
/* ECRAN JEU */
        #jeuScreen {position: absolute; top:100%}
        #jeuScreen.show {top:0}
        #jeu { 
            /*width: 1400px;
            height: 900px; */
            max-width: 1400px;
            width: 70%;
            height: auto;
            margin: 0 auto;
        }      
        
/* ECRAN NEW HIGH SCORE */
        #newHighScoreScreen {position: absolute; left:100%; z-index: 1;}
        #newHighScoreScreen.show {left:0}
        #newHighScoreScreen.hide {left:-100vw}
        #newHighScore { 
            /*width: 1400px;
            height: 900px; */
            max-width: 1400px;
            width: 70%;
            height: auto;
            margin: 7vw auto 0;
            position:relative;
        }      
        ::placeholder {
            color: #15509b;
          }    
        #illusCoup {position: absolute; top: -10vw; left:50%; transform: translateX(-50%);  z-index: -1;}  
        #illusCoup img {width:20vw; height: auto;}  

        #inputSpeudo { margin: 2.5vw 0 1vw; text-align: center;}
        input[name="nom"] {
            appearance: none;
            background-color: transparent;
            border: 3px solid #fff;
            font-size: 2.5vw;
            box-sizing: border-box;
            text-align: center;
            width:30vw;
            line-height: 5.5vw;
            display: inline-block;
            padding:0;
            border-radius:0;
          }
        .bigSubmit {
            background-color: white;
            border: 3px solid white;
            font-size: 2.5vw;
            display: inline-block;
            box-sizing: border-box;
            text-align: center;
            width:10vw;
            line-height: 5.5vw;
            margin-left: -5px;
          } 




/* ECRAN BADGE */
        #badgeScreen {position: absolute; left:100%; z-index: 1;}
        #badgeScreen.show {left:0}
        #badgeScreen.hide {left:-100vw}
        #badge, #infoBadge { height:100%; display: flex; align-items: center; justify-content: center; position: relative;}  
        #badge {width:calc(50% - 2vw); }  
        #infoBadge {width:calc(50% + 2vw); }  
         
        #badge {background-color:white}  
        .contientBadge:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: calc(-2vw + 2px);
            width: 2vw;
            height: 100%;
            background-image: url(../IMAGES/motifRond_droit.png);
            background-repeat: repeat-y;
            background-size: 2vw;
            border-right: 1px solid #156EDF;
            /* box-shadow: inset 0px 0px 0px 10px red; */
            box-sizing: border-box;
        }  
        
        .contientBadge {width:80%; max-width: 630px; text-align: center; overflow: hidden;}
        .contientBadge img{width: calc(200% - 4vw); height: auto; }

        .contientInfosBadge { width: 80%; margin: 0 auto;}
        #txt_greenitsSaved {margin-bottom:40px}
        .customize_badge {margin-top:40px}

        #flecheNavDroite {position: fixed; bottom: 2.5vw; right: 2.5vw; width: 10vw; opacity: 0; display:none; text-align: right;}
        #flecheNavDroite:hover {cursor: pointer; animation: fleche_droite_anim 0.25s linear 0s infinite alternate; -webkit-animation: fleche_droite_anim 0.25s linear 0s infinite alternate;}
        #flecheNavDroite.show {display:block}
        #flecheNavDroite img {width:60%; height: auto;}

        #downloadBadgeBtn {margin-top:2vw}

        #inputSpeudoBadge {
            width: 26vw;
            margin: 0 auto;
            height: 5vw;
        }
        #inputSpeudoBadge input[name="nom"] {
            appearance: none;
            background-color: transparent;
            border: 3px solid #fff;
            font-size: 2vw;
            box-sizing: border-box;
            text-align: center;
            width:20vw;
            line-height: 1.5;
            /*display: inline-block;*/
            padding:0;
            float:left;
            height: 100%;
          }
        #inputSpeudoBadge .bigSubmit {
            background-color: white;
            border: 3px solid white;
            font-size: 2vw;
            /*display: inline-block;*/
            box-sizing: border-box;
            text-align: center;
            width:6vw;
            line-height: 5vw;
            margin-left: -5px;
            float:left;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          } 
        #submit_NomBadge img {
            height: 3vw;
            width: auto;
        }
        .shareSoMe img {
            width: 3vw;
            display: inline-block;
            height: auto;
            margin: 0 0.5vw;
          }



/* ECRAN SCORE */
        #scoreScreen {position: absolute; left:100%; z-index: 1;}
        #scoreScreen.show {left:0}
        #scoreScreen.hide {right:-100vw}
        #scoreScreen.quit {top:-100vw}
        #score, #replay {height:100%; display: flex; align-items: center; justify-content: center;}    
        #replay {background-color:white; width:calc(50% - 2vw); position: relative;} 
        #score {width:calc(50% + 2vw); }  
        .contientInfosReplay:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: calc(-2vw + 2px);
            width: 2vw;
            height: 100%;
            background-image: url(../IMAGES/motifRond_gauche.png);
            background-repeat: repeat-y;
            background-size: 2vw;
            border-left: 1px solid #156EDF;
            box-sizing: border-box;
        }  
        .contientscore { width: 80%; margin: 0 auto;}

        #flecheNavGauche {position: fixed; bottom: 2.5vw; left: 2.5vw; width: 10vw; opacity: 0; display: none; text-align: left;}
        #flecheNavGauche:hover {cursor: pointer; animation: fleche_gauche_anim 0.25s linear 0s infinite alternate; -webkit-animation: fleche_gauche_anim 0.25s linear 0s infinite alternate;}
        #flecheNavGauche.show {display:block}        

        #flecheNavGauche img {width:60%; height: auto;}

        table {border-collapse: collapse;}
        table td.celullePosition {width:10%; text-align: left;}
        table td.celulleNom {width:60%; text-align: left;}
        table td.celulleScore {width:30%; text-align: right;}
        table td {border-bottom: 1px solid #fff; padding: 0.5vw 0}

        .contientInfosReplay {width:80%; margin:0 auto}
        .contientBtnReplay {text-align: center; margin-top:3vw}
        #btn_replay span {display: inline-block; -webkit-transition: all 0.4s cubic-bezier(0.77,0.2,0.05,1.0); -o-transition: all 0.4s cubic-bezier(0.77,0.2,0.05,1.0); transition: all 0.4s cubic-bezier(0.77,0.2,0.05,1.0);}
        #btn_replay:hover span:nth-child(2) {transform: translateY(7px);}
        #btn_replay:hover span:nth-child(3) {transform: translateY(-15px);}
        #btn_replay:hover span:nth-child(5) {transform: translateY(10px);}
        #btn_replay:hover span:nth-child(6) {transform: translateY(-5px);}

        #imagePersoScore {margin-bottom:2vw}
        #imagePersoScore img {width: 40%;}


/* PANNEAU CREDITS */
        #credits { display:none; position : fixed; top:0; left:0; width: 100vw; height: 100vh; z-index: 101; opacity: 0; align-items: center;}
        #credits.fontSize_2 {font-size: 3vh;}
        #credits.show {display:flex; opacity: 1; }
        #credits ul {margin:0 auto; padding:0}
        #credits li {list-style: none; line-height: 1.2;}
        #credits b {font-family: "maax-bold", Arial, Helvetica, sans-serif;}

        .close-button {
            height: 51px;
            width: 51px;
            position: absolute;
            box-sizing: border-box;
            line-height: 80px;
            display: inline-block;
            top:2vw;
            right:2vw;
            background-image: url(../IMAGES/fondClose.png);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .close-button:before, .close-button:after {
            transform: rotate(-45deg);
            content: '';
            position: absolute;
            top: 33px;
            left: 48px;
            margin-top: -25px;
            margin-left: -25px;
            display: block;
            height: 35px;
            width: 5px;
            background-color: #156EDF;
            transition: all 0.2s ease-out;
            }
        
        .close-button:after {
            transform: rotate(45deg);
        }
        
        .close-button:hover:before, .close-button:hover:after  {
            transform: rotate(90deg);
        }
            

/* PANEL LANDSCAPE */ 
        #panelLandscape {position:fixed; top:0; left:0; width:100vw; height: 100vh; align-items: center; justify-content: center; z-index: 50; text-align: center; display:none}
        #panelLandscape .contenuLandscape {padding:0 15vw}
        #panelLandscape img {display: block; margin: 5vw auto; width:50%}

        @media (orientation: portrait) and (max-width : 480px) {
            #panelLandscape {
                display:flex;
            }
        }

/* LOGO DELL INTERFACE */ 
        #logoDell {
            position: fixed;
            bottom: 1vw;
            left: 1vw;
            z-index: 100;
            width: 10vw;
            height: auto;
            -webkit-transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
            -o-transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
            transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        }
        #logoDell.hide {
            bottom: -100vw;
        }
        #logoDell .st0{fill:#156EDF;}
        #logoDell.blanc .st0 {fill:#ffffff;}

/* BOUTON CREDITS INTERFACE */ 
        #btnCredits {
            position: fixed;
            bottom: 1vw;
            right: 4vw;
            z-index: 100;
            width: 3.5vw;
            height: auto;
            -webkit-transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
            -o-transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
            transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        }
        #btnCredits.hide {
            bottom: -100vw;
        }
        #btnCredits:hover {
            cursor: pointer;
        }
        #btnCredits .st0{fill:#156EDF;}   
        #btnCredits.blanc .st0 {fill:#ffffff;}     

/* BOUTON SON INTERFACE */ 
        #btnSon {
            position: fixed;
            bottom: 1vw;
            right: 1vw;
            z-index: 100;
            width: 2.5vw;
            height: auto;
            -webkit-transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
            -o-transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
            transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
           /* display: none;   POUR LE MOMENT */
        }
        #btnSon.hide {
            bottom: -100vw;
        }
        #btnSon .st0{fill:#156EDF;}
        #btnSon.blanc .st0 {fill:#ffffff;}   
        #btnSon #ondeSon {opacity:0}
        #btnSon.off #ondeSon {opacity:1}
        #btnSon.off #croixSon {opacity:0}




/* PANNEAU INSTALLATION */
        #installScreen {
            display: none;
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: #333;
            font-family: '"Helvetica Neue", Helvetica, Arial, sans-serif';
            z-index: 10000;
            font-size: 16px;
            color:#156EDF;
        }
       #overlayInstallScreen {position:fixed; top:0; left :0; background-color:#156EDF; opacity: 0.8; z-index: 999; width:100vw; height: 100vh; display: none;}
       #overlayInstallScreen.show {display: block;}

        #installScreen.show {display:inline-block}
                
        #install {
            padding: 30px;
            background: #ffffff;
            width: 280px;
            border-radius: 7px;
            box-sizing: border-box;
        }

        #install .txt_install {line-height: 1.2;}
        #install .txt_itsEasy {line-height: 20px;}
        
       
        
        #arrowOuter {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        
        #arrowInner {
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 20px solid #ffffff;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -19px;
        }
        
        #closeInstall{
            position: absolute;
            top: 0;
            right: 0;
            width: 16px;
            height: 16px;
            padding: 5px;
            cursor: pointer;
        }
         
        


/* ANIMATION LOADING SUR BOUTON HIGH SCORE */
      .lds-ellipsis {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 2.5vw;
        }
        .lds-ellipsis div {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #156EDF;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
        }
        .lds-ellipsis div:nth-child(1) {
        left: 8px;
        animation: lds-ellipsis1 0.6s infinite;
        }
        .lds-ellipsis div:nth-child(2) {
        left: 8px;
        animation: lds-ellipsis2 0.6s infinite;
        }
        .lds-ellipsis div:nth-child(3) {
        left: 32px;
        animation: lds-ellipsis2 0.6s infinite;
        }
        .lds-ellipsis div:nth-child(4) {
        left: 56px;
        animation: lds-ellipsis3 0.6s infinite;
        }
        @keyframes lds-ellipsis1 {
            0% {
                transform: scale(0);
            }
            100% {
                transform: scale(1);
            }
            }
            @keyframes lds-ellipsis3 {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(0);
            }
            }
            @keyframes lds-ellipsis2 {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(24px, 0);
            }
        }

        @keyframes lds-ellipsis1-Mob {
            0% {
                transform: scale(0);
            }
            100% {
                transform: scale(1);
            }
            }
            @keyframes lds-ellipsis3-Mob {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(0);
            }
            }
            @keyframes lds-ellipsis2-Mob {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(9px, 0);
            }
        }

/* ANIMATION FLECHE BASSE */
@-webkit-keyframes fleche_bas_anim {
    0% { -webkit-transform: translate(0px, 0px) ; }
    100% { -webkit-transform: translate(0px, 20px);  }
}
@-moz-keyframes fleche_bas_anim {
    0% { -moz-transform: 0 0; }
    100% { -moz-transform: 0 20px; }
}  

/* ANIMATION FLECHE DROITE */
    @-webkit-keyframes fleche_droite_anim {
        0% { -webkit-transform: translate(0px, 0px) ; }
        100% { -webkit-transform: translate(20px, 0px);  }
    }
    @-moz-keyframes fleche_droite_anim {
        0% { -moz-transform: 0 0; }
        100% { -moz-transform: 20px 0; }
    }       

/* ANIMATION FLECHE GAUCHE */
    @-webkit-keyframes fleche_gauche_anim {
        0% { -webkit-transform: translate(0px, 0px) ; }
        100% { -webkit-transform: translate(-20px, 0px);  }
    }
    @-moz-keyframes fleche_gauche_anim {
        0% { -moz-transform: 0 0; }
        100% { -moz-transform: -20px 0; }
    }    


/* Ecran très large > 2000
-------------------------------------------------------------- */
@media (min-width: 2000px) {
    #txt_onboarding_PC {bottom:12vw}
    #txt_onboarding_PC.fontSize_2 {font-size: 1.5vw;}
}


/* < 1300
-------------------------------------------------------------- */
@media (max-width: 1300px) {
    .lds-ellipsis {
        width: 32px;
    }

    .lds-ellipsis div {
        width: 6px;
        height: 6px;
    }
    .lds-ellipsis div:nth-child(1) {
        left: 3px;
        animation: lds-ellipsis1-Mob 0.6s infinite;
        }
        .lds-ellipsis div:nth-child(2) {
        left: 3px;
        animation: lds-ellipsis2-Mob 0.6s infinite;
        }
        .lds-ellipsis div:nth-child(3) {
        left: 12px;
        animation: lds-ellipsis2-Mob 0.6s infinite;
        }
        .lds-ellipsis div:nth-child(4) {
        left: 21px;
        animation: lds-ellipsis3-Mob 0.6s infinite;
        }
}


/* < 1080
-------------------------------------------------------------- */

@media (max-width: 1080px) {
    .fontSize_1 {font-size: 2vw;}
    .fontSize_1-5 {font-size: 2.5vw;}
    .fontSize_2 {font-size: 4vw;}
    .fontSize_5 {font-size: 7vw; line-height:1}

    .contientInfosBadge .fontSize_1 {font-size: 1.2vw;}
    .contientInfosBadge .fontSize_2 {font-size: 2.2vw;}
    .contientInfosBadge .fontSize_4 {font-size: 4.2vw;}
    .contientInfosBadge .fontSize_5 {font-size: 5.2vw;}
    #txt_greenitsSaved.fontSize_1-5 {font-size: 1.6vw;}
    #txt_onboarding_PC.fontSize_2 {font-size: 2vw;}
    table td.fontSize_2 {font-size: 2.2vw;}
    table td.fontSize_1-5 {font-size: 2vw;}
    #btncredits.fontSize_1 {font-size: 1.2vw;}
    #credits.fontSize_2 {font-size: 3vh;}
    #txt_dispositif.fontSize_2 {font-size: 2vw;}

    #greenitScreen .fontSize_2 {font-size: 2vw;}
}        


/* < 768
-------------------------------------------------------------- */
@media (max-width: 768px) {
    .close-button {
        height: 36px;
        width: 36px;
        position: absolute;
        box-sizing: border-box;
        line-height: 80px;
        display: inline-block;
        top: 2vw;
        right: 2vw;
        background-image: url(../IMAGES/fondClose.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .close-button:before, .close-button:after {
        transform: rotate(-45deg);
        content: '';
        position: absolute;
        top: 33px;
        left: 48px;
        margin-top: -27px;
        margin-left: -32px;
        display: block;
        height: 25px;
        width: 4px;
        background-color: #156EDF;
        transition: all 0.2s ease-out;
    }

    .close-button:after {
        transform: rotate(45deg);
    }
}

/* WIDE SCREEN > 21:9
-------------------------------------------------------------- */

@media screen and (min-aspect-ratio: 21/9) { 
    #intro, #onboarding {
        max-width: 1400px;
        width: 50%;
    }
    #txt_onboarding_PC{
        width: auto;
        padding:0 4vw;
        bottom:20vh;
    }
    #btnOK_onboarding {
        width: 5vw;
        height: 5vw;
        bottom: 2vw;
    }
 }

@media screen and (min-aspect-ratio: 239/100) { 
    #intro, #onboarding {
        max-width: 1400px;
        width: 50%;
    }
    #txt_onboarding_PC{
        width: auto;
        padding:0 4vw;
        bottom:20vh;
    }
    #btnOK_onboarding {
        width: 5vw;
        height: 5vw;
        bottom: 2vw;
    }
 }