/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

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

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

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

* {
    -webkit-touch-callout: none;
    -moz-touch-callout: none;
    -o-touch-callout: none;
    touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;    
}

canvas{
    outline: none;
}




/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/*--------------------------------------------------------------------*/
/*---------------------------TEMPORAIRE-------------------------------*/
/*--------------------------------------------------------------------*/

#headerTEST{
    position: relative;
    width: 100%;
    height: 50px;
    background-color: rgb(34,34,34);
}

#headerTEST img{
    position: absolute;
    left:50%;
    top:50%;
    height: 50%;
    transform:translate(-50%,-50%);
}

#footerTEST{
    position: relative;
    width: 100%;
    height: 100px;
    background-color: rgb(34,34,34);
}

#footerTEST img{
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

.popUpMobile{
    display:none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
}

.popUpMobile_content{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align: center;
}

.popUpMobile_content img{
        width:170px;
}


/*------------------------------------*/

h2{
    font-family: 'MauronMusy';
    font-size: 10px;
    letter-spacing: 2px;
    color: white;
}

p{
    font-size: 10px;
    letter-spacing: 1.1px;
    line-height: 1.2em;
    font-family: 'SuisseBPIntl Light';
    color: white;
}

.fontBleue{
    color:rgb(24,227,241);
    /*color:rgb(118,228,236);*/
}

.text_desktop{
    display: block;
}

.text_mobile{
    display: none;
}

/*--------------GENERAL---------------*/

#USERGUIDE_container{    
    width: 100%;
    height: 869px;
    overflow: hidden;
    background-color: rgb(10,10,10);
}

#USERGUIDE_main{
    position: relative;
    top:0;
    left:0;
    width: 100%;
    height: 100%;    
}

.USERGUIDE_bg{
    float: left;
}

#USERGUIDE_bg_left{
    /*background-image: url("../img/background_0.jpg");*/
    background-size: cover;
    position:relative;
}

#USERGUIDE_bg_left_00{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    /*background-image: url("../img/background_0.jpg");*/
    background-size: cover; 
    transition:opacity 1s; 
    opacity: 0;
}

#USERGUIDE_bg_left_01{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    /*background-image: url("../img/background_0.jpg");*/
    background-size: cover; 
    transition:opacity 1s; 
    opacity: 0;
}

#USERGUIDE_bg_left_02{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    /*background-image: url("../img/background_0.jpg"); */
    background-size: cover; 
    transition:opacity 1s; 
    opacity: 0;
}

#USERGUIDE_bg_left_03{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    /*background-image: url("../img/background_0.jpg"); */
    background-size: cover; 
    transition:opacity 1s; 
    opacity: 0;
}

#USERGUIDE_bg_left_04{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    /*background-image: url("../img/background_0.jpg"); */
    background-size: cover; 
    transition:opacity 1s; 
    opacity: 0;
}

#USERGUIDE_bg_left_05{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    /*background-image: url("../img/background_0.jpg"); */
    background-size: cover; 
    transition:opacity 1s; 
    opacity: 0;
}

#USERGUIDE_bg_left_06{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    /*background-image: url("../img/background_0.jpg"); */
    background-size: cover; 
    transition:opacity 1s; 
    opacity: 0;
}

#USERGUIDE_bg_left_07{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    /*background-image: url("../img/background_0.jpg"); */
    background-size: cover; 
    transition:opacity 1s; 
    opacity: 0;
}

#USERGUIDE_bg_left_08{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    /*background-image: url("../img/background_0.jpg"); */
    background-size: cover; 
    transition:opacity 1s; 
    opacity: 0;
}

#USERGUIDE_bg_left_09{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    /*background-image: url("../img/background_0.jpg"); */
    background-size: cover; 
    transition:opacity 1s; 
    opacity: 0;
}

#USERGUIDE_bg_left_10{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    /*background-image: url("../img/background_0.jpg"); */
    background-size: cover; 
    transition:opacity 1s; 
    opacity: 0;
}

#USERGUIDE_bg_right{
    background-color: rgb(10,10,10);   
}

#USERGUIDE_bg_gradient{
    position: absolute;
    top:0;
    left:0;    
}

/*--------------MENU ZOOM----------*/

#USERGUIDE_menuZoom{
    position: absolute;
    top:30%;
    left:0;
    width: 40px;
    height: 150px;
    /*background-color: rgba(255,0,0,0.5);*/
    transform:translate(0,-50%);
    display: none;
}

.btZoom{
    position: absolute;
    width: 100%;
    height: 40px;
    cursor:pointer;
   
}

#btZoom_Moins{
    top: 0;
    /*background-color: rgba(0,255,0,0.5);*/
}

#btZoom_Reset{
    top: 50%;  
    transform:translate(0,-50%);  
}

#btZoom_Plus{
    bottom: 0;
    /*background-color: rgba(0,0,255,0.5);*/
}

.flecheSlider_contener{
    position: absolute;
    top:50%;
    left:50%;
    width: 30px;
    height: 30px;
    border:solid 1px rgb(100,100,100);
    transform:translate(-50%,-50%);
}

.flecheSlider_contener span{
    position: absolute;
    top:50%;
    left:50%;   
    transform:translate(-50%,-50%);
    color:white;
    font-family: 'MauronMusy';
    font-size: 10px;
}



#titreMontre{
    opacity: 1;
    transition: opacity 1s;
}

#btAccueil{
    opacity: 0;
    position: absolute;
    left:50px;
    cursor: pointer;
    transition: opacity 1s;
}

.btAccueil_ACTIF #titreMontre{
    opacity: 0!important;
}

.btAccueil_ACTIF #btAccueil{
    opacity: 1!important;
}

.decoTexte{      
    font-family: 'MauronMusy';
    color:rgba(255,255,255,0.75);
    font-size: 12px;    
    letter-spacing: 2px;
    white-space:nowrap;
    margin-top: 25px;
    margin-left: 50px;
    margin-right: 50px;
    transform:translate(0,-50%);
}

.decoNoir{
    color:rgba(0,0,0,0.75)!important;
}



/*--------------LOADER-------------*/

#bloc_LOADER{
    position: absolute;
    width:100%;
    height: 100%;
    top:0;
    left:0;
    background-color: rgba(0,0,0,1);
    opacity: 1;
    transition:opacity 3s;
}

#blocTextLoader{
    position: absolute;
    width: 300px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

}

.texteLoader_sousPartie{
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.texteLoader_sousPartie img{
    width: 100%;
    vertical-align: initial;
}



#blocGIF{
    position: relative;
    width: 100%;
    height: 200px;
}

#gifLoader{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.bloc_LOADER_OFF{
    opacity: 0!important;
}

#loaderText{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

    font-family: 'MauronMusy';
    color:white;
    text-align: center;
    /*line-height: 15px;*/
}

/*---------------MENU MOBILE------------*/

.moveBySlide{
    transition: left 0s!important;
}

#USERGUIDE_menuMobile{
    position: absolute;
    width:100%;
    height: 50px;
    bottom:10px;
    left:0;
    cursor: pointer;
    /*background-color: rgba(255,0,0,0.5);*/
}

.FlecheMenuMobile{
    bottom:30px;
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: rgba(255,0,0,0);
    cursor: pointer;
    opacity: 1;
    transition: opacity 1s;
}

.FlecheHidden{
    opacity: 0!important;
}

#FlecheMenuMobile_Gauche{
    left:40px;
}

#FlecheMenuMobile_Gauche .FlecheMenuMobile_Shape{
    width: 0;
    height: 0;    
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;    
    border-right: 5px solid white;
}

.FlecheMenuMobile_Shape_Contener{
    position: absolute;
    top:50%;
    left:50%;
    width: 25px;
    height: 15px;
    transform: translate(-50%,-50%);
    background-color: rgb(11,11,11)
}

.FlecheMenuMobile_Shape{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);

   
}

#FlecheMenuMobile_Droite{
    right:40px;
}

#FlecheMenuMobile_Droite .FlecheMenuMobile_Shape{
    width: 0;
    height: 0;    
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;    
    border-left: 5px solid white;
}

.FlecheTexteMobile{
    bottom:195px;
    position: absolute;
    width: 40px;
    height: 50px;
    background-color: rgba(255,0,0,0);
    cursor: pointer;
    opacity: 1;
    transition: opacity 1s;
}

.FlecheTexteMobile_Shape{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);    
}

#FlecheTexteMobile_Gauche{
    left:0px;
}

#FlecheTexteMobile_Gauche .FlecheTexteMobile_Shape{
    left:14%;
    width: 0;
    height: 0;    
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;    
    border-right: 10px solid rgba(255,255,255,0.25);
}

#FlecheTexteMobile_Droite{
    right:15px;
}

#FlecheTexteMobile_Droite .FlecheTexteMobile_Shape{
    width: 0;
    height: 0;    
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;    
    border-left: 10px solid white;
}




#menuMobile_fdHaut{
    width: 100%;
    height: 50%;
    background-color: rgba(0,0,0,0);
}

#menuMobile_fdBas{
    width: 100%;
    height: 50%;   
    background: linear-gradient(rgba(2,22,32,0.5), rgba(2,22,32,0)); 
}

#titreMenuMobile{
    position: absolute;
    top:0px;
    left:15%;
    width:70%;
    height: 25px;

    font-family: 'MauronMusy';
    font-size: 8px;  
    line-height: 25px;  
    letter-spacing: 1px;
    text-align: center;
    color: rgba(255,255,255,0.5); 
}

#contenerSlider{
    position: absolute;
    top:25px;
    left:0%;
    width:100%;
    height: 30px;
    overflow: hidden;
    border-top: solid 1px white;
}

.btSlider{
    position: absolute;
    top:0;
    width: 15%;
    height: 50px;
    cursor: pointer;
    /*background-color: rgba(255,0,0,0.5);*/
}

#btSlider_gauche{
    left:0;
}

#btSlider_droite{
    right:0;
}

.flecheSlider{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width: 10px;
    height: 10px;
    
}

#flecheSliderGauche{
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;   
    border-right:5px solid rgba(255,255,255,0.5); 
}

#flecheSliderDroite{
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;   
    border-left:5px solid rgba(255,255,255,0.5); 
}

#sliderMenuMobile{
    position: relative;    
    width: 200%;
    height: 100%;    
    left:25%;  
    transition:left 0.5s cubic-bezier(0.655, 0.000, 0.020, 1.005); 
}

.animSlider{
    transition:left 1s cubic-bezier(0.655, 0.000, 0.020, 1.005)!important;
}

.titreSlider{
    font-family: 'MauronMusy';
    font-size: 10px;  
    line-height: 25px;  
    text-align: center;
    color: white;    
    width: 25%;
    height: 100%;
    float: left;
    position: relative;
}

.titreSlider_hyphen{
    position: absolute;
    top:0;
    left:50%;
    width: 1px;
    height: 8px;
    background-color: rgb(255,255,255);
}

.titreSlider span{
    position: absolute;
    left:50%;
    bottom:0%;
    transform:translate(-50%,0);
    transition:opacity 1s;
    line-height: 10px;
    font-size: 9px;
    width:100%;
}




/*--------------MENU---------------*/

#USERGUIDE_menu{
    position: absolute;
    top:50%;        
    left:-30px; 
    transform: rotate(90deg);

    display: none;
}

.USERGUIDE_menu_OUVERT{
    display: block!important;
}

#USERGUIDE_graduation{
    transition :transform 0.5s; 
    transform-origin: center; 
}

.boutonMenu{
    position: absolute;
    top:0;
    left:0;
    width: 200px;    
    color: white;
    transform-origin: left;
    cursor:pointer;   
    font-family: 'MauronMusy';
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;

    transition :opacity 0.5s; 
}

.boutonInactif{
    opacity: 0.2;    
}

/*-------------------------------*/

.rayon{
    position: absolute;  
    transform-origin: left;  
}

.trait_contener{
    width:20px;
    height: 3px;
    transform: translate(100px,0);
}

.trait{
    width:20px;
    height: 3px;
    background-color: rgb(255,255,255);   
}

#traitFocus{
    /*background-color: rgb(255,0,0);*/
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;  
    border-left: 10px solid white;
    transform: translate(0,-50%) scaleX(3);
}

.soustrait{
    width:10px;
    height: 2px;
    background-color: rgb(255,255,255);   
}

#btMenu_00{
    /*position: absolute;
    border: 1px solid white;
    border-radius: 100%;
    width: 150px;
    height: 150px;
    cursor:pointer; 
    transform: translate(-50%,-50%);
    transition: background-color 0.5s,width 0.5s,height 0.5s;
    background-color: rgba(255,255,255,0);*/
}

.btMenu_00_OVER{
    /*background-color: rgba(255,255,255,1)!important;*/
}

.btMenu_00_inactif{
    /*width: 100px!important;
    height: 100px!important;
    cursor:default!important;*/
}

/*-------------------------------------*/

#btMenu_01{
    /*transform: translate(45px, -50%) rotate(59deg);*/
    transform: translate(45px, -50%) rotate(-331deg);
}

#btMenu_01_contener{
    /*transform: rotate(210deg);*/
    transform: rotate(240deg);
}

/*-------------------*/

#btMenu_02{
    /*transform: translate(45px, -50%) rotate(-331deg);*/
    transform: translate(45px, -50%) rotate(-360deg);

}

#btMenu_02_contener{
    /*transform: rotate(240deg);*/
    transform: rotate(270deg);
}

/*-------------------*/

#btMenu_03{
    /*transform: translate(45px, -50%) rotate(-360deg);*/
    transform: translate(45px, -50%) rotate(-31deg);
}

#btMenu_03_contener{
    /*transform: rotate(270deg);*/
    transform: rotate(300deg);
}

/*-------------------*/

#btMenu_04{
    /*transform: translate(45px, -50%) rotate(-31deg);*/
}

#btMenu_04_contener{
    /*transform: rotate(300deg);*/
}

/*-------------------*/

#btMenu_05{
    /*transform: translate(45px, -50%) rotate(-61deg);*/
}

#btMenu_05_contener{
    /*transform: rotate(330deg);*/
}

/*---------------------------------*/



/*---------------------------------*/

#trait_1deg{
    transform: rotate(6deg);
}

#trait_2deg{
    transform: rotate(12deg);
}

#trait_3deg{
    transform: rotate(18deg);
}

#trait_4deg{
    transform: rotate(24deg);
}

#trait_5deg{
    transform: rotate(30deg);
}

/*-------------------------------*/

#trait_6deg{
    transform: rotate(36deg);
}

#trait_7deg{
    transform: rotate(42deg);
}

#trait_8deg{
    transform: rotate(48deg);
}

#trait_9deg{
    transform: rotate(54deg);
}

#trait_10deg{
    transform: rotate(60deg);
}

/*-------------------------------*/

#trait_11deg{
    transform: rotate(66deg);
}

#trait_12deg{
    transform: rotate(72deg);
}

#trait_13deg{
    transform: rotate(78deg);
}

#trait_14deg{
    transform: rotate(84deg);
}

#trait_15deg{
    transform: rotate(90deg);
}

/*-------------------------------*/

#trait_16deg{
    transform: rotate(96deg);
}

#trait_17deg{
    transform: rotate(102deg);
}

#trait_18deg{
    transform: rotate(108deg);
}

#trait_19deg{
    transform: rotate(114deg);
}

#trait_20deg{
    transform: rotate(120deg);
}

/*-------------------------------*/

#trait_21deg{
    transform: rotate(126deg);
}

#trait_22deg{
    transform: rotate(132deg);
}

#trait_23deg{
    transform: rotate(138deg);
}

#trait_24deg{
    transform: rotate(144deg);
}

#trait_25deg{
    transform: rotate(150deg);
}

/*-------------------------------*/

#trait_26deg{
    transform: rotate(156deg);
}

#trait_27deg{
    transform: rotate(162deg);
}

#trait_28deg{
    transform: rotate(168deg);
}

#trait_29deg{
    transform: rotate(174deg);
}

#trait_30deg{
    transform: rotate(180deg);
}

/*-------------------------------*/

#trait_31deg{
    transform: rotate(186deg);
}

#trait_32deg{
    transform: rotate(192deg);
}

#trait_33deg{
    transform: rotate(198deg);
}

#trait_34deg{
    transform: rotate(204deg);
}

#trait_35deg{
    transform: rotate(210deg);
}

/*-------------------------------*/

#trait_36deg{
    transform: rotate(216deg);
}

#trait_37deg{
    transform: rotate(222deg);
}

#trait_38deg{
    transform: rotate(228deg);
}

#trait_39deg{
    transform: rotate(234deg);
}

#trait_40deg{
    transform: rotate(240deg);
}

/*-------------------------------*/

#trait_41deg{
    transform: rotate(246deg);
}

#trait_42deg{
    transform: rotate(252deg);
}

#trait_43deg{
    transform: rotate(258deg);
}

#trait_44deg{
    transform: rotate(264deg);
}

#trait_45deg{
    transform: rotate(270deg);
}

/*-------------------------------*/

#trait_46deg{
    transform: rotate(276deg);
}

#trait_47deg{
    transform: rotate(282deg);
}

#trait_48deg{
    transform: rotate(288deg);
}

#trait_49deg{
    transform: rotate(294deg);
}

#trait_50deg{
    transform: rotate(300deg);
}

/*-------------------------------*/

#trait_51deg{
    transform: rotate(306deg);
}

#trait_52deg{
    transform: rotate(312deg);
}

#trait_53deg{
    transform: rotate(318deg);
}

#trait_54deg{
    transform: rotate(324deg);
}

#trait_55deg{
    transform: rotate(330deg);
}

/*-------------------------------*/

#trait_56deg{
    transform: rotate(336deg);
}

#trait_57deg{
    transform: rotate(342deg);
}

#trait_58deg{
    transform: rotate(348deg);
}

#trait_59deg{
    transform: rotate(354deg);
}




/*-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------*/

#contenerMontre{
    position: absolute;
    top:0;   
    transition:left 1s cubic-bezier(0.860, 0.000, 0.070, 1.000),top 1s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}

#contenerMontre canvas{
    
}

/*-------------------SOUS MENU----------------------*/

.USERGUIDE_sousMenu{
    position: absolute;
    right:0;    
    width:48px;
    display: none;
}

.USERGUIDE_sousMenu_OUVERT{
    display: block;     
}

.btSousMenu_container{    
    width: 100%; 
    height: 12px;
    margin-bottom: 5px;
    cursor: pointer;
    display: none;
}

.btSousMenu_ACTIF{
    cursor: default;
}

.btSousMenu_ACTIF span{
    opacity: 1!important    
}

.btSousMenu_container span{
    float: left;
    font-family: 'MauronMusy';
    font-size: 8px;
    width: 50%;
    opacity: 0.4;
    color:white;
    transition: opacity 0.5s;
}

.hyphenSousMenu_container{
    position: relative;
    float: left;
    width: 50%; 
    height: 100%; 
}

.hyphenSousMenu{   
    position: absolute;
    bottom: 40%;
    right: 0;       
    width: 50%;
    border-bottom: 1px solid black;
    transition: width 0.5s;
}

.btSousMenu_ACTIF .hyphenSousMenu{
    width: 100%!important;   
}

.sousMenuFleche_bouton{
    width: 100%;
    height: 60px;
    margin-bottom: 1px;
    cursor: pointer;
    display: none;
}

.sousMenuFleche_container{
    position: relative;
    top:50%;
    left:50%;
    width: 16px;
    height: 25px;
    transform:translate(-50%,-50%);
}

.sousMenuFlecheHaut{
    position: absolute;
    left:50%;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;  
    border-bottom: 5px solid white;
    transform: translate(-50%,0);
}

.sousMenuFlecheBas{
    position: absolute;
    left:50%;
    top:20px;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;  
    border-top: 5px solid white;
    transform: translate(-50%,0);
}

.sousMenuFlecheBras{
    position: absolute;
    left:50%;
    width:1px;
    height: 25px;
    background-color: white;
    transform: translate(-50%,0);
}


/*---------------------TEXTE----------------------*/

.USERGUIDE_mainTexteContener{
    position: absolute;   
    padding: 5px 10px;
    background-color: rgba(11,11,11,0.8);
}

.USERGUIDE_sliderContener_sectionTexteContener{
    display: none;
    position: relative;
    opacity: 0;
    transition: opacity 1s;
}

.sliderContener_ANIM{
    opacity: 1!important;
}

/*----------slider mobile----------*/

.USERGUIDE_slider_sectionTexteContener{
    position: absolute;
    transition: left 0.5s;  
      
}

.USERGUIDE_slider_sectionTexteContener p{
    padding-right: 20px;
}

#blocTexte_01 .USERGUIDE_slider_sectionTexteContener{
    width: 600%;
}

#blocTexte_01 .USERGUIDE_sectionTexteContener{
    float: left;
    width: 16.66%;
}

#blocTexte_02 .USERGUIDE_slider_sectionTexteContener{
    width: 900%;
}

#blocTexte_02 .USERGUIDE_sectionTexteContener{
    float: left;
    width: 11.11%;
}

#blocTexte_03 .USERGUIDE_slider_sectionTexteContener{
    width: 700%;
}

#blocTexte_03 .USERGUIDE_sectionTexteContener{
    float: left;
    width: 14.285%;
}

/*--------------------------------*/

.USERGUIDE_sectionTexteContener{   
    display: block;
}

.sectionTexteContener_ACTIF{
    display: block;
}



.USERGUIDE_sectionTexteContener{
    opacity: 0.2;
    transition:opacity 1s;
}

.sectionTexteContener_ANIM{
    opacity: 1!important;
}

.USERGUIDE_sectionTexteContener h2{
    margin-top: 0px;
    opacity: 1;
}

.USERGUIDE_sectionTexteContener p{
    opacity: 1;
}

.decoSectionTexteContener{
    width: 100%;    
}


#fondBlancMobile_haut{
    position: absolute;
    width: 100%;
    height: 12.5%;
    top:50%;
    left:0;
    background: linear-gradient(1turn,rgba(10,10,10,1), rgba(10,10,10,0)); 
}

#fondBlancMobile_bas{
    position: absolute;
    width: 100%;
    height: 37.5%;
    top:62.5%;
    left:0;
    background-color: rgb(10,10,10); 
}




/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (orientation: portrait) {
    .USERGUIDE_bg{
        width: 100%;
        height: 50%;
    }

    #USERGUIDE_bg_gradient{
        background: linear-gradient(rgba(2,22,32,1), rgba(2,22,32,0)); 
    }    

     .USERGUIDE_sousMenu{
        top: 70%;
        position: fixed;
    }

    .USERGUIDE_mainTexteContener{
        width:90%;
        height: 130px;
        left:50%;
        bottom: 100px;
        /*top: 60%;*/
        transform: translate(-50%,0);   
        background-color: rgba(11,11,11,0.8);
        cursor: pointer;
    }

    #contenerMontre{
        top:-20%;
    }

}

@media only screen and (orientation: landscape) and (max-width: 1020px) and (max-height: 760px){
        .popUpMobile{
            display: block;
        }
}

@media only screen and (orientation: landscape) {
    .USERGUIDE_bg{
        width: 50%;
        height: 100%;
    }

    #USERGUIDE_bg_gradient{
        background: linear-gradient(0.25turn,rgba(10,10,10,1), rgba(10,10,10,0)); 
    }    

    .USERGUIDE_sousMenu{
        top:50%;
        transform:translate(0,-50%);
    }

    #fondBlancMobile_haut{
        display: none;
    }

     #fondBlancMobile_bas{
        display: none;
    }

    .USERGUIDE_mainTexteContener{
        width:20%;
        right:120px;
        bottom: 10px;        
        padding: 10px 20px;
        background-color: rgba(11,11,11,0.8);
    }

    #contenerMontre{
        top:0px;
    }

    .homePosition{
        top:-10%!important;
    }

    .reglagePosition{
        left:-10%!important;
    }

    .pallierPosition{
        left:10%!important;
    }

    .couronnePosition{
        left:10%!important;
    }

    /*---------------------TEXTE----------------------*/

    .USERGUIDE_mainTexteContener{
        position: absolute;   
        padding: 5px 10px;
        background-color: rgba(11,11,11,0.8);
    }

    .USERGUIDE_sectionTexteContener{
        display: none;
    }

    .sectionTexteContener_ACTIF{
        display: block;
    }    

    .USERGUIDE_sliderContener_sectionTexteContener{        
        opacity: 1;
        transition: opacity 0s;
    }

    .sliderContener_ANIM{
        opacity: 1!important;
    }

    /*----------slider mobile----------*/

    .USERGUIDE_slider_sectionTexteContener{
        position: static;    
    }

    #blocTexte_01 .USERGUIDE_slider_sectionTexteContener{
        width: auto;
    }

    #blocTexte_01 .USERGUIDE_sectionTexteContener{
        float: initial;
        width: auto;
    }

    #blocTexte_02 .USERGUIDE_slider_sectionTexteContener{
        width: auto;
    }

    #blocTexte_02 .USERGUIDE_sectionTexteContener{
        float: initial;
        width: auto;
    }

    #blocTexte_03 .USERGUIDE_slider_sectionTexteContener{
        width: auto;
    }

    #blocTexte_03 .USERGUIDE_sectionTexteContener{
        float: initial;
        width: auto;
    }

    /*---------------------------------*/

    .decoSectionTexteContener{
        width: 100%;
        height: 10px;
        border-top: 1px solid white; 
        border-left: 1px solid white; 
        border-right: 1px solid white; 
        margin:15px 0px;
    }

    .USERGUIDE_sectionTexteContener h2{
        margin-top: 30px;
        opacity: 0;
    }

    .USERGUIDE_sectionTexteContener p{
        opacity: 0;
    }

    .decoSectionTexteContener{
        width: 0%;
        height: 0px;
        border-top: 1px solid white; 
        border-left: 1px solid white; 
        border-right: 1px solid white; 
        margin:15px 0px;
    }

    .sectionTexteContener_ANIM h2{
        margin-top: 0px!important;
        opacity: 1!important;
        transition: opacity 1s,margin 1s;
    }

    .sectionTexteContener_ANIM .decoSectionTexteContener{
        width: 100%!important; 
        height: 10px!important;
        transition: width 0.5s , height 0.5s 0.5s;  
    }

    .sectionTexteContener_ANIM p{
        opacity: 1!important;
        transition: opacity 1s 1s;
    }
}

@media only screen and (max-height: 600px) and (orientation: portrait){
    #USERGUIDE_menuMobile{
        bottom: 30px;
    }
}

@media only screen and (min-height: 601px) and (orientation: portrait){
    #USERGUIDE_menuMobile{
        bottom: 90px;
    }

    .FlecheMenuMobile{
        bottom: 90px;
    }

    .FlecheTexteMobile{
        bottom:245px;    
    }

    .USERGUIDE_mainTexteContener{
        /*top: 57%;*/
        bottom: 150px;
    }   

    .titreSlider span {
        font-size: 9px;

    }
    


}

@media only screen and (min-width: 700px) and (orientation: portrait){
    #contenerMontre{
        top:-10%;
    }

    #USERGUIDE_menuZoom{
        left:30px;
    }

    .USERGUIDE_mainTexteContener{        
        bottom: 190px;
    }

    #FlecheMenuMobile_Gauche{
        left:100px;
    }

    #FlecheMenuMobile_Droite{
        right:100px;
    }

    .FlecheTexteMobile{
        bottom:278px;    
    }

    #FlecheTexteMobile_Gauche .FlecheTexteMobile_Shape{
        left:50%;
    }

    #FlecheTexteMobile_Droite{
        width: 50px;
        right: 50px
    }

    .titreSlider span {
        font-size: 12px;

    }

}

@media only screen and (min-width: 700px) {


    h2{
        font-size: 16px;
    }

    p{
        font-size: 16px;
    } 

    #blocTextLoader{
        width: 500px;
    }

    /*----------TEMPORAIRE---------*/   

    #headerTEST{       
        height: 100px;       
    }

    /*----------TEMPORAIRE---------*/ 

    #fondBlancMobile_haut{
        display: none;
    }

     #fondBlancMobile_bas{
        display: none;
    }

    .USERGUIDE_mainTexteContener{        
        /*top: 70%;        */
    }

    /*-------------------------------*/    

    #btBurger{
        font-size: 12px;     
        padding: 30px 30px;
    }    

    .USERGUIDE_sousMenu{        
        width:80px;
        position: absolute;
    }

   /* .btSousMenu_container{            
        height: 20px;
        margin-bottom: 15px;
        display: block;
    }*/

    .btSousMenu_container span{        
        font-size: 15px;       
    }  

    .sousMenuFleche_bouton{        
        height: 50px;
        margin-bottom: 10px;        
    }

    .sousMenuFleche_container{       
        width: 25px;
        left:0;          
        transform:translate(0,-50%);
    }

    .sousMenuFleche_container{
    
}
    
}

@media only screen and (min-width: 1020px) and (orientation: landscape) {

    h2{
        font-size: 12px;
    }

    p{
        font-size: 12px;
    }    

    .texteLoader_sousPartie{
        width: 49%;
    }

    #contenerMontre{
        left:-15%;        
    }

    #USERGUIDE_menuZoom{
        left:30px;
        top:50%;
        display: block;
    }

    .text_desktop{
        display: none;
    }

    .text_mobile{
        display: block;
    }

    #blocTextLoader{
        width: 1024px;
    }

    .sousMenuFleche_bouton{        
        display: block;
    }

    /*--------------menu mobile-------------*/

    #USERGUIDE_menuMobile{
        bottom:50px;
        width:80%;
        left:10%;
    }

    .FlecheMenuMobile{
        bottom: 50px;
    }

    #FlecheMenuMobile_Gauche{
        left:300px;
    }

    #FlecheMenuMobile_Droite{
        right:300px;
    }

    .FlecheTexteMobile{
        display: none;
    }

    #menuMobile_fdHaut{
        /*background-color: rgba(255,255,255,0.5);*/
    }

    #menuMobile_fdBas{
        /*background-color: rgba(255,255,255,0.5);*/
        /*background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)); */
    }

    #titreMenuMobile{
         /*color: rgba(0,0,0,1); */
    }

    #flecheSliderGauche{    
        /*border-right:5px solid rgba(0,0,0,0.5); */
    }

    #flecheSliderDroite{      
        /*border-left:5px solid rgba(0,0,0,0.5); */
    }

    .titreSlider{
        /*color: black; */
    }

    /*--------------------*/

    .USERGUIDE_sousMenu {
        top: 50%;
        padding-left: 10px;
        padding-top: 0px;
        background-color: rgba(0,0,0,0);
    }    

    .btSousMenu_container{            
        height: 20px;
        margin-bottom: 15px;
        display: block;
    }

    .btSousMenu_container span{
        font-size: 12px;
    }

    .USERGUIDE_sousMenu {
        width: 50px;
    }

    .btSousMenu_container {       
        margin-bottom: 5px;
    }

    /*--------------------*/

    .USERGUIDE_mainTexteContener {
        top: 50%;
        bottom: auto;
        width: 25%;
        right: 60px;
        transform:translate(0,-50%);
    }

    .USERGUIDE_slider_sectionTexteContener p{
        padding-right: 0px;
    }

}

@media only screen and (min-width: 1200px) and (orientation: landscape){

    /*--------------DECO PLUS----------*/

    .deco{
        display: block;
    }   

    /*------------MENU ZOOM------------*/ 

    #USERGUIDE_menuZoom{
        left:50%;
        top:auto;
        bottom: 10px;
        width: 140px;
        height: 40px;
        transform: translate(-50%,-50%);
    }

    .btZoom{
        width: 40px;
        height: 100%;
    }

    #btZoom_Moins{
        top:auto;
        left: 0;
    }

    #btZoom_Reset{
        top:auto;
        left: 50%;
        transform: translate(-50%, 0);
    }

    #btZoom_Plus{
        bottom:auto;
        right: 0;
    }


    /*---------------------------*/    

    #USERGUIDE_menuMobile{
        display: none;
    }

   .FlecheMenuMobile{
        display: none;
   }

    .trait_contener{  
        width:100px;     
        transform: translate(200px,0);
    }    

    .trait{
        width:25px;       
    }

    #USERGUIDE_menu{
        left:-70px;  
        /*left:300px;  */
        display: block;  
    }

    #btBurger{
        display: none;     
    }

    #btMenu_00{       
        /*width: 300px;
        height: 300px;*/        
    }    

    .btMenu_00_inactif{
        /*width: 200px!important;
        height: 200px!important;*/        
    }

    #contenerMontre{
        left:0%;        
    }

    /*--------------------*/

    .USERGUIDE_mainTexteContener {
        /*top: auto;*/
        width: 20%;
        right: 80px;
    }

    .USERGUIDE_sousMenu {
        top: 50%;
    }

    .btSousMenu_container {       
        margin-bottom: 15px;
    }
}

@media only screen and (min-width: 1600px)  and (orientation: landscape){
    h2{
        font-size: 16px;
    }

    p{
        font-size: 16px;
    }     

    .boutonMenu{
        font-size: 16px;
    }    

    .USERGUIDE_mainTexteContener{                
        right: 120px;      
    }

    /*--------------------*/

    .btSousMenu_container span{
        font-size: 14px;
    }

    .USERGUIDE_sousMenu {
        width: 80px;
    }

    

    

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

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

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}