/* ------------------------------------------------------------------------------- */
/* -------------------------------- DIAPORAMA ---------------------------------- */
/* ------------------------------------------------------------------------------- */
   
.cto_diaporama_for_design{
clear: both;
}
   
.diaporama{
 
}   
   
   
   
   
.diaporama{
   position: relative;
   width: 100%;
   height: auto;
   overflow: visible;
}

 

.diaporama .custom{
margin: 0;
padding: 0;
background: 0;
width: auto;
height: auto;
}

.diaporama ul{
margin: 0;
padding: 0;
display: block;
width: 100%;
height: 100%;
}



.diaporama a#droite,
.diaporama a#gauche{
width: 24px;
height: 66px;
z-index: 3000;
cursor: pointer;
position: absolute;
top:50%;
margin-top: -33px; 
}

.diaporama a#droite{
   right: 0px;
   background: url(icons/droite.png) left top no-repeat;    
}                             
.diaporama a#gauche{
   left: 0px;
   background: url(icons/gauche.png) left top no-repeat;  
}

.diaporama a#droite:hover,
.diaporama a#gauche:hover{
background-position: left -66px;
}

.diaporama_img{
width: 100%;
height: 100%;
position: relative; 
}
.diaporama ul li img{
display: block;
width: 100%;
height: 100%;
/* RECTIF SAFARI */
height: auto;
}
   

.diaporama_img ul{
margin: 0;
padding: 0;
}
.diaporama_img ul li{
margin: 0;
padding: 0;
list-style-type: none;
position: absolute;
background: #333;
width: 100%; 
height: 100%;
text-align: center;
left: 0;
top: 0;
}
.diaporama_img ul li.active{
position: relative; 
}

.diaporama_img ul li a{
   position:relative; 
   display: block;
   width: 100%;
   height: 100%;
}

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

#container-global .diaporama_img ul li a span.zoom{
background: url(../icons/zoom.png) right bottom no-repeat; 
display: block;
width: 25px;
height: 25px;
position: absolute;
right: 5px;
bottom: 5px;
opacity:0.3;
}
#container-global .diaporama_img ul li a:hover span.zoom{
opacity:1;
}

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

#container-global .diaporama_img ul li a span.plus{
background: url(../icons/plus-noir.png) left top no-repeat; 
display: block;
width: 50px;
height: 50px;
position: absolute;
right: 0px;
bottom: 0px;
display: none;
}
#container-global .diaporama_img ul li a:hover span.plus{
display: block; 
}



.diaporama_legende{
position: absolute;
top: 305px;
left: 0px;
width: 550px;
padding: 28px 50px 28px 0px;
background: url(bg_legende.png) right top no-repeat;
z-index: 3000;
text-align: right;  
}
.diaporama_legende span{
font-size: 15px;
color: #333;
}

/* ------------------------ ACTIVER LES POINT DE NAVIGATION -------------------------- */

.diaporama_nav{

/* NAV CACHER */
display: none;

position: absolute;
top: 307px;
left: 0px;
cursor: inherit;
}

.diaporama_nav div{
background: #dde3f1;
width: 10px;
height: 10px;
display: block;
float: left;
margin-right: 7px;
cursor: pointer;
border-radius:1px;
}
.diaporama_nav div span{
display: none;
}

.diaporama_nav div.btn_actif{
background: #7d95cd;
}