/* CSS Document - rzn 2018-02-22 Chloé */
/* À propos de moi */

@media (max-width:62em) {
#propos_liste {position:absolute; left:0; width:250px; top:100px; height:calc(100% - 100px); overflow:auto; transform:translate3d(-250px,0,0); transition:all .4s;}
#propos_fiche {position:absolute; left:0; width:100%; top:100px; height:calc(100% - 100px); 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 ~ #propos_fiche {transform:translate3d(250px,0,0);}
input.toggle_liste:checked ~ #propos_liste {transform:translate3d(0,0,0);}
input.toggle_liste:checked ~ #propos_liste .menu li {width: 100%;}
}
@media (min-width:63em) {
#propos_liste {position:absolute; left:0; width:20%; top:72px; height:calc(100% - 72px); overflow:auto;}
#propos_fiche {position:absolute; left:25%; width:70%; top:72px; height:calc(100% - 72px); overflow:auto;}
input.toggle_liste {display:none;}
}