body {
	width: 100%; 
	margin:0; 
	height: auto; 
	text-align: center; 
	color:rgba(0,0,0,0.9); 
	font-family: "Exo", "Lucida Grande", serif;
	word-wrap: break-word
	}

	a{
	text-decoration: none; 
	color: rgba(0,0,0,0.9);
	}
	
	.logo{
	z-index:100;
	position:fixed;
	width:10%;
	top:4vw;
	left:7vw;
	}

	#image_logo{
	width:100%;
	}

	.titre {
	line-height: 8vw;
	padding-top: 0;
	padding-bottom: 0;
	font-size:6vw;
	font-family: "Beth Ellen", "Exo", serif;
	max-width:80%; 
	margin:4vw auto 5vw;
	}


	.texte { 
	max-width:60vw;
	font-size:2vw;
	margin : 2vw auto;
	padding : 2vw 1vw 2vw 1vw;
	text-align:center;
	}
	
	
	#fond{
	padding-bottom:3vw;
	margin-bottom:4vh; 
	margin-top:5vh; 
	width : 90%; 
	padding-left:0vw;
	margin-right:5vw; 
	margin-left:5vw;
	display:block;
	min-height:90vh;
	height:auto;
	overflow:auto;}



	.galerie {
	margin:0px
	margin-top:10vh;
  	display: -ms-flexbox; /* IE10 */
  	display: flex;
  	-ms-flex-wrap: wrap; /* IE10 */
  	flex-wrap: wrap;
  	padding: 0 4px;
	}

	.colonne {
	-ms-flex: 24%; /* IE10 */
	flex: 24%;
	max-width: 24%;
	padding: 0 4px;
	}
	
	.colonne img{
	  margin-top: 8px;
	  vertical-align: middle;
	  width: 100%;
	  }

	.galerie img {
	  opacity: 0.6; 
	  width:10vw;
	}


	.galerie img:hover {opacity: 1;
	
	-webkit-transition:all 0.5s;
	transition:all 0.5s;
	} 
	
	.gris img{
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	}
	
	.gris img:hover{
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	}
	

	video {max-width:1200px; width:100%;}
	
	.video {width:50%;display:inline-block; float:left;margin: 0 2vw 5vw 2vw;}

	.date {font-style:italic; font-size:1.5vw;}

	#copyr{
	text-align: left;
	float:left; 
	display:block; 
	max-width: 90%; 
	margin:auto 5vw; 
	margin-top:5vh; 
	margin-bottom:5vh; 
	font-size: 1.5vw;
	}

	
	
	.rounded{
	border-radius:50%;
	}


	.article{
	width:80%;
	height:20vw;
	margin: 30px auto;
	padding:1vw;
	font-size:4vw;
	text-align:left;
	}
	
	.article p{
	font-size:2vw;
	color:rgba(255,0.5);
	}
	
	.div_article{
	display:inline-block;
	width:20vw;
	}
	

	.text_article{
	float:right;
	height:20vw;
	max-width:60%;
	text-align:right;
	overflow:auto;
	}

	.img_article{
	width:20vw;
	}
	
	.retour{text-align:left; margin:5%;}

	img{max-width:40vw;}

	ul{text-align:left;}


	@media screen and (max-width: 1100px) {
	#tousDroits{font-size: 2vw;}  
	.colonne {-ms-flex: 32%; flex: 32%; max-width: 32%;}
	.texte {max-width:70%; font-size:2.5vw;}
	.date {font-size:1.8vw;}
	}


	@media screen and (max-width: 950px) {
	 .logo{top:4vw; left:7vw;}
	 .titre {max-width:80%;}
	 .date {font-size:2vw;}
	 .video {width:95%;}
	 .texte{max-width:75%; font-size:3.5vw;}
	}


	@media screen and (max-width: 800px) {
	  .logo{width:15%;}
	  #tousDroits{font-size: 2.5vw;}
	  .titre {max-width:80%; font-size: 6vw;}
	  .date {font-size:3vw;}
	  .colonne {-ms-flex: 48%; flex: 48%; max-width: 48%;}
	  #elem_toile {max-width:none;}
	  .texte{max-width:80%;}
	  img{max-width:60vw;}
	 
	  .article{margin:2.5vw;width:36vw; height:auto; float:; display:inline-block;}
	  .img_article{width:36vw}

	  .text_article{display:block; float:none; text-align:center; max-width:none;}
  	
	}


	@media screen and (max-width: 600px) {
	 .logo{top:6vw; left:8vw;}
	 #elem_toile{padding:0;}
	 .texte{max-width:90%;font-size:4.5vw;}
	 #tousDroits{font-size: 3.6vw;}
	 .titre { font-size: 8vw;}
	 .colonne {-ms-flex: 100%; flex: 100%; max-width: 100%;}
	 img{max-width:70vw;}
	 .article{margin:2vw 7.5vw;width:70vw; height:auto; font-size:6vw;}
	 .article p{font-size:3vw;}
	  .img_article{width:64vw; margin:1vw 3vw;}
	}

	


	@keyframes appear{
  	from {opacity:0%;}
  	to {opacity:100%;}
	}
	
	
	@keyframes disappear{
  	from {opacity:100%;}
  	to {opacity:0%;}
	}
	
	
	@keyframes defade{
  	from {filter: grayscale(100%);}
  	to {filter: grayscale(0%);}
	}

	@keyframes fade{
  	from {filter: grayscale(0%);}
  	to {filter: grayscale(100%);}
	}