@charset "UTF-8";
   
/* GENERAL */

 body{
	margin:0 auto;
	width:100%;
	margin-left:auto;
	margin-right: auto;
	background:#FFF none repeat scroll 0% 0%;
	font-family: 'Merriweather', serif;
	font-size:1.500em;
	min-height:100%;
	}
		 
img{
	display:block;
	width:100%;
	}
	
.petit{
	font-size:0.6em;
	line-height:1px;
	
}
	
		  
.header{
	text-align:center;
	margin-bottom:10%;

	
	}
	
a:link{
	color:black;
	text-decoration:none;
	margin: 0 5%;
	margin-bottom:10%;
	
}

a:visited{
	color:black;
	text-decoration:none;
}
	
.footer{
	display:block;
	margin-top:10%;
	width:100%;
	
}
	
 /* VENDREDI TREIZE */
 
  /* Popup container */
.popup {
  position:inherit;
  display: inline-block;
  cursor: pointer;
}

.white{
	color:white;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 100%;
  background-color: #fff;
  color: ##000;
  text-align: left;
  /*border-radius: 6px;*/
   z-index: 1;
 /* padding: 3px 0;*/
    position: absolute;

/*bottom: 5%;*/
  left: 50%;
 /*margin-left: -180px;*/
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
 position: absolute;
  top: 100%;
 /* left: 50%;*/
  margin-left: -5px;
 /* border-width: 5px;*/
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
} 
 
 .imgV13{
		width:30%;
		margin-left:35%;
		margin-bottom: 10%;
		margin-top:7%;	}
 
.txtvendredi{	
	text-align:left;
	font-family: 'Merriweather', serif;
	font-size:3vw;
	margin: 50px 21.9% 10% 21.9%;
	}
	
	.txtcollectif{
	float:left;	
	font-size:1.063em;
	width: 45%;
	position: relative;
	display: inline; 	}
	
	
	
	.txtcollectifpetit{
	
	text-align:left;
	font-family: 'Merriweather', serif;
	font-size:11px;
	margin: 0px 21.9% 15px 21.9%;
	}
	
.date{
	text-align:left;
	font-family: 'Merriweather', serif;
	font-size:2vw;
 	margin: 50px 21.9% 50px 100px;
	}
		
	.son{
	margin: 0px 1% 5% 21.9%;
	float: left;
	}
	
	.dwn{font-size:2vw;
	float: left;
		}
		
	
		
	.titrelabel{
	text-align:left;
	font-family: 'Merriweather', serif;
	font-size:70px;
 	margin: 0px 21.9% 10% 100px;
	}
	
	.pictureLeftV{
	width: 30%;
	float: left;
	margin-bottom:1%;
	margin-top:1%;
	margin-right:3%;
	margin-left:10%;
	text-align:left;
	}
	
	/* NUIT NOIRE */
	
	.img1{
		width:20%;
		margin-left:40%;
		margin-bottom: 10%;
		margin-top:7%;	
		}
	
	.nnpresentation{
	text-align:left;
	font-family: 'Merriweather', serif;
	font-size:1em;
	margin-left:50%;
	margin-top:7%;
	margin-bottom:7%;
	}
	
	.img2{
		width:60%;
		margin-left:20%;
       }
	   
	   .img3{
		width:60%;
		margin-left:20%;
       margin-top: 50%;
	   }
		
		
	.pictureLeft{
	width: 50%;
	float: left;
	margin-bottom:1%;
	margin-top:1%;
	margin-right:5%;
	text-align:left;
	}
	.pictureLeftR{
	width:55%;
	float: left;
	margin-bottom:1%;
	margin-top:1%;
	margin-right:1%;
	margin-left:10%;
	text-align:left;
	}
	.pictureCenter{
			margin-bottom:1%;
	margin-top:1%;
		width: 50%;
	transform: translateY(-50%);
clear:both;
	}
	
		
	.pictureLeftp{
	width: 30%;
	float: left;
	margin-bottom:1%;
	margin-top:1%;
	margin-right:5%;
	text-align:left;
	}
	
	
	.pictureRight{
	width: 55%;
	float: right;
	margin-bottom:1%;
	margin-top:1%;
	margin-right:10%;
	text-align:left;
	}
	
	.pictureRightp{
	width: 30%;
	float: right;
	margin-bottom:1%;
	margin-top:1%;
	margin-right:5%;
	text-align:left;
	}
	
	.pictureLeftH{
	width: auto;
	float: left;
	margin: 1% 0;
	text-align: left;
	height: 924px;
	}
	
		.pictureLeftH2{
	width: auto;
	float: left;
	margin: 1% 0;
	text-align: left;
	height: 924px;
	margin-left:4%;
	}
	
		.pictureRightH2{
	width: auto;
	float: right;
	margin: 1% 0;
	height: 924px;
	margin-right: 4%;

	}
	
		.pictureLeftH3{
	width: auto;
	float: left;
	margin: 1% 0;
	text-align: left;
	height: 924px;
	transform: translateX(60%);
	}
	
	
	
	
	.titrenn{
	text-align:left;
	font-family: 'Merriweather', serif;
	font-size:2vw;
 	margin: 10px 21.9% 10px 45% ;}
	
	
	.div-categoryContainer2{
	box-sizing:border-box;
	width: 100%;
	position:relative;
	text-align:center;
	clear:both;
	}
	
	.div-categoryContainer1{
	box-sizing:border-box;
	width: 100%;
	position:relative;
	text-align:center;
	}
	
	.image2{		
		width: 50%;
		margin-top:1%;
		margin-bottom:1%;
		float:left;
		}
	.image3{		
		width: 50%;
	    margin-top:1%;
		margin-bottom:1%;
		float: right;
		clear: right;
		}

.texte1 {
	float:left;
	width: 45%;
	position: relative;
	height: 448.667px;	
	font-size: 1em;
}
.texte1 p {
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	font-size: 1em;
}
.asterix {
	font-size: 0.375em;
	display: inline-block;
	margin-top:5%;
	margin-right:30%;
}
	.nntxt{
	text-align:left;
	font-family: 'Merriweather', serif;
	font-size:1em;
	margin-left:30%;
	margin-right:30%;
	}

	.nntxt2{
	text-align:left;
	font-family: 'Merriweather', serif;
	font-size:1em;
	margin-left:50%;
	margin-top:47%;
	margin-bottom:7%;
	margin-right:2%;
	clear:right;
	}
	
	 

/* @media screen and (max-width:2560px) {
  .texte1 p {
    position: absolute;
    top: 45%;
    transform: translateY(-25%);
    
    font-size: 2em;
    margin-right: 1%;
  }
  .pictureLeftH{
      height: 1760px;
}
.pictureRightH2{
height: 1760px;
}
.pictureLeftH2{
	height:1760px;
}

.nntxt {
font-size: 2em;}
.nntxt2 {
font-size: 2em;
}
.nnpresentation {
font-size: 2em;}
.header {
font-size: 2em;}

.txtcollectif {
 font-size: 2.063em;}
 
 }*/

  @media screen and (max-width:1346px) {
	body {
		width: 95%;
		font-size: 1em;
	}
	
	.nnpresentation{
	
	margin: 0 auto;
	margin-top:7%;
	margin-bottom:7%;
	font-size: 1em;
}
	.image2{		
	width: 100%;
	margin-top: 3%;
	margin-bottom: 3%;
	float:none;
		}
	.image3{		
	width: 100%;
	margin-top: 3%;
	margin-bottom: 3%;
	float:none;
	}
	.pictureLeft {		
	width: 100%;
	margin-top: 3%;
	margin-bottom: 3%;
	float:none;
	}	
	
		.pictureRightH2{
	width: 100%;
	margin-top: 3%;
	margin-bottom: 3%;
	float:none;
	height: 100%;

	}
	
		.pictureLeftH2{
	width: 100%;
	margin-top: 3%;
	margin-bottom: 3%;
	float:none;
	height: 100%;
	 margin-left: 0%;

	}

	.pictureLeftH{		
	width: 100%;
	margin-top: 3%;
	margin-bottom: 3%;
	float:none;
	height: 100%;
		}
	.texte1 p {
	position: relative;
	top: 0%;
	transform: translateY(0);
}
	.texte1 {
		width: 70%;
	float: none;
	height: auto;
	margin: 0 auto;	
	font-size: 1em;
}
.nntxt {
   font-size: 1em;
    margin-left: 5%;  
    margin-bottom: 7%;
    margin-right: 5%;
}

}
  @media screen and (max-width:730px) {
	.nnpresentation{
		width: 90%;
	font-size: 0.8em;
}
	.texte1  {
		width:  90%;
		font-size: 0.8em;
}

.nntxt2{font-size: 0.8em;
  		margin: 5% auto;
		width: 90%;
}
a:link{
	color:black;
	text-decoration:none;
	margin: 0 1%;
	font-size: 3vw;
}
}
  @media screen and (max-width:425px) {
	body {
  		width: 90%;
  	}
  	.txtvendredi {
  		font-size: 0.8em;
  		margin: 0 auto;
		width: 100%;
		margin-bottom: 50%;
  	}
  	.txtcollectif {
  		font-size: 0.8em;
  		margin: 5% auto;
		width: 100%;
			display: inline-block; 	

  	}
	.nntxt {
    font-size: 0.8em;
	}

	
	.nntxt2{
		font-size: 0.8em;
  		margin: 5% auto;
		width: 100%;
}
  	.date {
  		font-size: 0.7em;
  		margin: 0 auto;
		width: 100%;
		margin-top: 20%;
  	}
  	.son {
  		margin:0;

  	}
	
  	.dwn a:link {
  		font-size: 3.5em;
  	}
	.img1{
	width:100%;}
	 .imgV13{
	 width:100%;}
	 
}

 @media screen and (max-width:320px){
	 .nntxt {
   
	    font-size: 0.8em;
 margin-right: 1%;}
 
 }