/****************************/
/**********GENERAL***********/
/****************************/
#wrapper{
	display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}
	
#contenu{
	flex:2;
}

iframe{
	width:100%;
	min-height:100vh;
}

body {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/****************************/
/*******TEXTE & TITRE********/
/****************************/
#contenu h1 {
	padding-left:30px;
	padding-top:10px;
	padding-bottom:10px;
	background: #1c1c1c;
    color: #fff;
	font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid #383838;
	font-size: 1.5rem;
}

#contenu h2 {
	margin:10px 10px 10px 10px;
	padding-left:10px;
    color: #111;
	font-weight: bold;
    line-height: 2em;
    height: 2em;
	font-size: 1.5em;	
}

#contenu h2 a {
	color: #111;
	text-decoration:none;
}

#contenu p {
	margin:10px 10px 20px 10px;	
}

#contenu em {
	font-style : italic;
}

#contenu strong {
	font-weight : bold;
}




/****************************/
/************MENU************/
/****************************/

.menu-mobile{
	display:none;
}

#menu-mobile {
	display:none;
}

div.menuwrapper {
	margin: 0px auto;
	width: 250px;
	min-height:100vh;
	background: #1c1c1c;
}

nav.vertical {
	overflow: hidden;
	text-align: center;
}

nav.vertical > ul {
	list-style-type: none;
}

nav.vertical > ul > li {
	display: block;
}

nav.vertical > ul > li > label,
nav.vertical > ul > li > a {
	display: block;
    padding: 0 20px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    letter-spacing: 0.1em;
    line-height: 4em;
    height: 4em;
    border-bottom: 1px solid #383838;
	font-size: .85rem;
	transition: all .1s ease;
	transition:.1s linear;
}

nav.vertical > ul > li > label:hover,
nav.vertical > ul > li > a:hover {
    color: #1c1c1c;
    background: #ccc;
	cursor: pointer;
	padding: 0px 0px 0px 20px;
	transition:.1s linear;
}

nav.vertical > ul > li > label + input {
	display: none;
	visability: hidden;
}

nav.vertical > ul > li > div {
	background-color: rgb(255,255,255);
	max-height: 0;
	overflow: hidden;
	transition: all .5s linear;
}

nav.vertical > ul > li > label + input:checked + div {
	max-height: 500px;
}

nav.vertical > ul > li > div > ul {
	list-style-type: none;
}

nav.vertical > ul > li > div > ul > li > a {
	background-color: #555;
	border-bottom: 1px solid rgba(0,0,0,0.5);
	color: rgb(255,255,255);
	display: block;
	font-size: 1.1rem;
	padding: 10px 0;
	text-decoration: none;
	transition: all 0.15s linear;
}

nav.vertical > ul > li > div > ul > li:hover > a {
	background-color: #999;
	color: #333331;
	padding: 10px 0 10px 50px;
}

/* Round button */
.round-button {
  display: inline-block;
  position: absolute;
  left:1em;
  margin-top:1em;
  z-index: 1;
  height: 2em;
  width: 2em;
  background: #1c1c1c;
  padding: 0;
  outline: 0;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: transform .2s;
}
.round-button::after,
.round-button::before {
  content: "";
  position: absolute;
  top: 15%;
  right: 40%;
  bottom: 15%;
  left: 40%;
  background-color: #ccc;
  border-radius: 10px;
  transition: transform .25s;
  will-change: transform;
}
.round-button::before {
  top: 40%;
  right: 15%;
  bottom: 40%;
  left: 15%;
}
/* opened nav button 
.round-button:focus,
.round-button:focus::before {
  transform: rotate(90deg) translateZ(0);
}*/

.espacedisque {
	position:absolute;
	margin-left:-75px;
	margin-top:14px;
	float:left;
	font-size: .70rem;
}

/****************************/
/**********EXPLORER**********/
/****************************/

.explorer {
	display: flex;
    flex-wrap: wrap;
	justify-content: flex-start;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
	overflow-wrap : break-word;
}

.explorer a{
	text-align:center;
	max-height:100%;
}

.exp_file{
	flex:2;
	display: flex;
    flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
	border : 2px solid blue;
}
.file{
	width:95px;
	padding:5px 5px 0px 5px;
	max-height:100px;
}
.file a{
	display:block;
	max-height:80px;
}
.file span{
	position:absolute;                
	margin-top:5px;
    margin-left:30px;
	color:#09c;
    background:rgba(0,0,0,.9);
    padding:15px;
    border-radius:3px;
    box-shadow:0 0 2px rgba(0,0,0,.5);
	transform:scale(0) rotate(-12deg);
	transition:all .25s;
	opacity:0;
}
.file:hover span, .file a:focus span{
    transform:scale(1) rotate(0); 
	opacity:1;
}

.exp_doss{
	border : 2px solid red;
	width:320px;
	display: flex;
    flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
}

.doss{
	width:95px;
	padding:5px 5px 0px 5px;
	max-height:100px;
}
.doss a{
	display:block;
	max-height:80px;
}
.doss span{
	position:absolute;                
	margin-top:5px;
    margin-left:30px;
	color:#09c;
    background:rgba(0,0,0,.9);
    padding:15px;
    border-radius:3px;
    box-shadow:0 0 2px rgba(0,0,0,.5);
	transform:scale(0) rotate(-12deg);
	transition:all .25s;
	opacity:0;
}
.doss:hover span, .doss a:focus span{
    transform:scale(1) rotate(0); 
	opacity:1;
}


.file{
}


.ctxmenu
{
  position:absolute;    
  min-width: 128px;
  height:auto;
  padding: 8px;
  margin:0;
  margin-left:32px;
  margin-top:-16px;
  border: 1px solid #999;
  background: #F8F8F8;
  box-shadow: 2px 2px 2px #AAA;
  z-index:11;
  overflow: visible;
}
.ctxline
{
  display:block;
  margin:0px;
  padding:2px 2px 2px 8px;
  border:1px solid #F8F8F8;
  border-radius:3px;
  font-size:13px;
  font-family:Arial, Helvetica, sans-serif;
  overflow:visible;
}
.ctxline:hover
{
  border:1px solid #BBB;
  background-color: #F0F0F0;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%,
    from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(top, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
    endColorstr='#e6e6e6', GradientType=0);
}

@media only screen and (max-device-width: 868px) {
	#wrapper{
		display: block;
	}
	#contenu{
		width:100vw;
		z-index:1;
	}
	
	div.menuwrapper{
		display:none;
		width:100vw;
	}
	#menu-mobile:checked ~ div {
		display:block;
		position:static;
	}
	
	#footer_bg{
		display : none;
	}
	.menu-mobile{
		display:block;
		height : 15px;
		background: #1c1c1c;
		color: #fff;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		letter-spacing: 0.1em;
		border-bottom: 1px solid #383838;
		font-size: .85rem;
		text-align:center;
	}
}