/* CSS Document - rzn 2018-02-22 Chloé */
/* Spectacles */

img.art_600 {width:100%; max-width:600px; height:auto;}
#spectacles_fiche img {max-width:100%; height:auto;}

@media (max-width:62em) {
#spectacles_liste {position:absolute; left:0; width:100%; top:100px; height:calc(100% - 100px); overflow-y:auto; overflow-x:hidden; transform:translate3d(-100%,0,0); transition:all .4s;}
#spectacles_fiche {position:absolute; left:0; width:100%; top:100px; height:calc(100% - 100px); background-color:#FFFFFF; overflow:auto; transform:translate3d(0,0,0); transition:transform .4s;}
input.toggle_liste {position:fixed; opacity:0;}
label.toggle_liste {position:fixed; opacity:.75; top:55px; left:20px; z-index:5; display:block; cursor:pointer; width:50px; height:24px; background-image: url(../img/site/Fleche.jpg); transform:translate3d(0,0,0); transition:transform .4s;}
input.toggle_liste:checked ~ label.toggle_liste {transform:rotate(180deg);}
input.toggle_liste:checked ~ #spectacles_fiche {transform:translate3d(100%,0,0);}
input.toggle_liste:checked ~ #spectacles_liste {transform:translate3d(0,0,0);}
input.toggle_liste:checked ~ #spectacles_liste .menu li {width: 100%;}
}
@media (min-width:63em) {
#spectacles_liste {position:absolute; left:0; width:20%; top:72px; height:calc(100% - 72px);  overflow-y:auto; overflow-x:hidden;}
#spectacles_fiche {position:absolute; left:25%; width:70%; top:72px; height:calc(100% - 72px); overflow:auto;}
input.toggle_liste {display:none;}
}