/* ------------------------------------------------------------------------ */
/* ---------------------------- RG GLOBAL 2015 ---------------------------- */ 
/* ------------------------------------------------------------------------ */ 
             
             
/* --- si la largeur ne dépasse pas 800px, effectuer : --- */

#menu_mobile{
display: none;
background: url(../icons/menu-mobile-60.png) left -60px no-repeat;
height: 60px;
width: 60px;
position: absolute;
right: 15px;
top: 20px;
cursor: pointer;
 
}



/* --- HDP --- */ 
#hdp{
display: none;
position: relative;
margin: 0 auto;
width:60px;
}
#hdp a{
background: #efefef;
border-radius:30px;
height: 60px;
width:60px;
position: absolute;
top: -30px;
line-height: 60px;
text-align: center;
font-size: 40px;
text-decoration: none;

background-image: url(../icons/hdp.png);
background-position: center center ;
background-repeat: no-repeat;
background-size:100%;
}





@media screen and (max-width: 1230px) /* Juste avant la version mobile */
{ 
a#logo,
#logo_ombre {
 left: -10px;
}  
#navigation ul.menu li.item-185 {
    padding-left: 110px;
}



@media screen and (max-width: 980px) /* Comprend +17 de scroll */
{


    /* --- MENU MOBILE --- */ 
     #menu_mobile{
    display: block;
    z-index: 5001;
    }


 /* -------------------------------------------------------------- */
 /* ---------------------- SPECIFIQUE AU SITE -------------------- */ 
 /* -------------------------------------------------------------- */

#banniere{
height: 180px;
} 
 
 
 #feuille_1,
  #feuille_2,
   #feuille_3{
   display: none;
   }
 
   #container-middle{
   background: #fff;
   }

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

    #container-global #container-nav {
    min-height: 0;
    position: absolute;
    right: 0;
    }       
    
    #container-global #navigation {

    width: 220px; /* LARGEUR */
    background: #fff;

    padding: 100px 0px 0px;    
    height: 100%;
    display: none;
    min-height: 100%;
    position: fixed;
    right:  0px;
    top: 0px;
    z-index: 5000;
    box-shadow:2px 2px 80px #000;
  
    }
    #container-global #container-nav #navigation ul.menu{
    width: 100%;
    float: none;
    border: none;
    margin: 0;
    padding: 0;
    display: block;
    }
    
    /* Lien accueil : */
    #navigation ul.menu li.item-185 a {
    width: auto;
    }
    
    
    #container-global #RajoutMenuMobile{
    clear: both;
    width: 100%;
    }
    /*
    #container-global #RajoutMenuMobile div,
    #container-global #RajoutMenuMobile span,
    #container-global #RajoutMenuMobile ul,
    #container-global #RajoutMenuMobile li,
    #container-global #RajoutMenuMobile a{
    width: 100%;
    float: none;
    border: none;
    margin: 0;
    padding: 0;
    display: block;
    position: inherit;
    box-sizing:border-box;
    background: none;
    }
    
    
 
    #container-global #RajoutMenuMobile a{
    color: #222;
    font-size: 10px;
    } 
 
    #container-global #RajoutMenuMobile span{
    border-top:1px solid #cabeb1; 
    padding: 5px 20px;
    text-align: right;
    display: block;
    }
    */
    
    #container-global #container-nav #navigation ul.menu li,
    #container-global #container-nav #navigation ul.menu li:hover{
    /* pas de hover (touché doigt) */
    border-top:1px solid #cabeb1; 
    margin: 0px;
     
     
    padding: 5px 0px;
    float: none;
    clear: both;
    display: block;
    background-image: none;
    height: auto; 
    }
    
    #container-global #container-nav #navigation ul.menu li.active{
     
    }

    #container-global #container-nav #navigation ul.menu li a,
    #container-global #container-nav #navigation ul.menu li:hover a,
    #container-global #container-nav #navigation ul.menu li a:hover,
    #container-global #container-nav #navigation ul.menu li.active a,
    #container-global #container-nav #navigation ul.menu li.active a:hover{
    /* pas de hover (touché doigt) */   
    text-align: right;
    box-shadow:none;
    height: auto;
    overflow: hidden;
    padding: 10px 30px;
    display: block;
    background-image: none;
    line-height: auto;
    border: none;
    }
 
    #container-global #container-nav #navigation ul.menu li ul{
    display: none;
    } 
    
    #container-global #container-nav #navigation ul.menu li ul li,
    #container-global #container-nav #navigation ul.menu li ul li:hover,
    #container-global #container-nav #navigation ul.menu li ul li.active{
    float: none;
    width: 100%;
    border: none;
    background: none;
    background-image: none;
    height: auto;
    display: none; /* pas de sous menu */
    }
    
    #navigation ul.menu li a span{
    
    height: auto;
    line-height: normal;
    
    }    
    
    #navigation ul.menu li.active a span, 
    #navigation ul.menu li.active a:hover span{
    
    border: none;
    
    }
   
 /* -------------------------------------------------------------- */
 /* ---------------------------- GLOBAL -------------------------- */ 
 /* -------------------------------------------------------------- */


 
    .fluid {
        margin: 0 auto;
        padding: 0 10px;
        width: 100%;
        box-sizing:border-box;
        position: inherit;
    }
     
 
    html, body, #container-global{
     
    }
 
 
    html {
        
         
    }


    #container-global {
        margin: 0 auto;
        width: 100%;

     /*   background: #fff; */
    }

    
    #container-global #header {
    padding: 0;
    height: auto;
    position: inherit;
    }

    #container-global #col_contenu{
    float: none;
    width: 100%;
    margin:10px 0px;
    clear: both;
    background: #fff; 
    }
    
    #content h1{
    font-size: 20px;  
    background: none; 
    }
    #content h1 span{ 
    background: none; 
    }

    
    /* --- NAV --- */
    #container-global #container-top {
    /*height: 60px;
    width: 100%;
    padding: 0px 0%; */
    }
    
  
 
    
    /* --- HEAD --- */
    
    #menu_haut{
    display: none;
    }
    
    a#logo{
    width : 255px;
    height: 150px;
    position: relative;
    margin: 20px auto 0px auto;
    top: 0;
    left: 0;
    display: block;
    }
    a#logo span#logo_ombre{
    width: 150px;
    }
    

    /* DIAPO */
    #container-global ul#ImagesHtml {
    float: none;
    height: auto;
    width: 100%;
    }
    
    #container-global ul li a span.zoom-big{
    display: none;
    }
    
    /* --- CONTENT --- */ 
    
    h1{

    }
    hr {
    background: none;
    
    border-top: 1px dotted #999;
    clear: both;
    height: 1px;
    width: 100%;
    }
    
    /* --- TIPS --- */
    #container-global ul li a:hover span.tips{
    visibility: hidden;
    display: none;
    } 
   
    
    /* --- IMAGES --- */
    
    #container-global .item-page img.auto {
    width: 100%; 
    }
    
    
    
    #container-global .img50c{
    width: 100%;
    margin: 0px auto;
    }
    
    .image_droite_avec_bord,
    .image_droite_sans_bord,
    .image_gauche_avec_bord,
    .image_gauche_sans_bord{
    width: 100%;
    margin: 0px auto;
    float: none;
    }
    
    #content span.image_droite_25pourcent,
    #content span.image_droite_33pourcent,
    #content span.image_droite_50pourcent,
    #content span.image_gauche_25pourcent,
    #content span.image_gauche_33pourcent,
    #content span.image_gauche_50pourcent{
    display: block;
    width: 100%;
    }     
    
    
    /* --- COLONNES --- */  
    #container-global .col2,
    #container-global .col3,
    #container-global .col4,
    #container-global .col5,
    #container-global .col40,
    #container-global .col50,
    #container-global .col60{
    float: none;
    width: 100%;
    padding-left: 0px;
    }
    
    #container-global .video{
    width: 100%;
    height: 200px;
    }
 
    /* --- FOOTER --- */
    #footer{
    padding: 40px 0px 0px 0px;
    }
    
    #footer li,
    #footer ul,
    #footer .col2{
    width: 100%;
    text-align: center;
    }
    
    #footer a#credits{
    float: none;
    }
 
    /* --- HDP --- */ 
    #hdp{
    display: block;
    } 
  
  
  
     
}


@media screen and (max-width: 410px) /* +17 de scroll = 960px */
{


    a#logo{
     /*width: 80%; */
    }

}