@media screen and (min-width: 1200px) {
	
	body:before {
		content: "large";
	}
	/*------------------- Vignette Texte ------------------------*/	
		#vignette.texte{
			max-width:90%;
			max-height:80%
		}
	/*------------------- Vignettes Horizontales -----------------*/
		#vignette.horizontale{
			height:400px;
			max-width:1000px;
		}		
		#fermer_div.horizontale{
			position:absolute;
		}
	
	/*------------------- Vignettes Vertcales ----------------------*/
		#vignette.verticale{
			max-height: 800px;	
			width:400px;
		}
}


@media screen and (min-width: 992px) and (max-width: 1199px) {
	body:before {
		content: "medium";
	}
	/*------------------------ Intro --------------------------------*/
		.content_title {
			font-size:30px;
		}
		
	/*------------------- Vignette Texte ------------------------*/	
		#vignette.texte{
			max-width:90%;
			max-height:80%
		}
	
	/*------------------- Vignettes Horizontales -----------------*/
		#vignette.horizontale{
			height:400px;
			max-width:800px;
		}
		#fermer_div.horizontale{
			position:absolute;
		}
	
	/*------------------- Vignettes Vertcales ----------------------*/
		#vignette.verticale{
			max-height: 600px;	
			width:400px;
		}
}

@media screen and (min-width: 767px) and (max-width: 991px) {
	
	body:before {
		content: "small";
	}
	#vignette{
		top:50%;
		left:50%;
	}
	/*------------------------ Intro --------------------------------*/
		.content_title {font-size:26px;}
		.translate50 {
			transform: translateY(0%);
		}
		#intro_nextpage {
			right: 10%;
		}
		#intro_backpage {
			left: 10%;
		}
	
	/*------------------- Vignette Texte ------------------------*/	
		#vignette.texte{
			max-width:90%;
			max-height:80%
		}
	
	/*------------------- Vignettes Horizontales -----------------*/
		#vignette.horizontale{
			height:300px;
			max-width:700px;
		}
		
		#text_cont.horizontale #titre_div{

		}
		
		#fermer_div.horizontale{
			position:absolute;
		}
	
	/*------------------- Vignettes Vertcales ----------------------*/
		#vignette.verticale{
			max-height: 500px;	
			width:400px;
		}
		
		#infos{
			text-align:center;
		}

}

@media screen and (max-width: 767px) {
	
	body:before {
		content: "x-small";
	}
	#vignette{
		top:50%;
		left:50%;
	}
	/*------------------------ Intro --------------------------------*/
		#intro {
			width: 70%;
			height: 60%;
			top: 15%;
		}
		.content_title {
			font-size:20px;
		}
		.translate50 {
			transform: translateY(0%);
		}
		.translate25 {
			transform: translateY(0%);
		}
		#intro_nextpage {
			right: 2%;  top: 40%;
		}
		#intro_backpage {
			left: 2%;  top: 40%;
		}
		#image_domtar {
			width: 90%;
		}
		#intro #page2 {
			padding-right: 30px;
			padding-left: 30px;
		}
	
	/*------------------- Vignette Texte ------------------------*/	
		#vignette.texte{
			max-width:90%;
			max-height:80%
		}
	
	/*------------------- Vignettes Horizontales -----------------*/
		#vignette.horizontale{
			height:300px;
			max-width:85%;
			max-height:90%;
		}
	
		#text_cont.horizontale #titre_div{

		}
		
		#fermer_div.horizontale{
			position:absolute;
		}
	
	/*------------------- Vignettes Vertcales ----------------------*/
		#vignette.verticale{
			max-height: 90%;
			max-width: 70%;
			width:400px;
		}
	/*------------------- Interface ----------------------*/
		#video-controls {
			width: 250px;
		}
}
@media screen and (max-width: 767px) and (orientation: portrait) {
	/*------------------------ Intro --------------------------------*/
		#intro {
			width: 70%;
			height: 50%;
			top: 20%;
		}
		#image_domtar {
			width: 90%;
		}
		#my-video {
			width: 90%;
		}
}
@media screen and (max-width: 767px) and (orientation: landscape) {
	/*------------------------ Intro --------------------------------*/
		#intro {
			width: 70%;
			height: 75%;
			top: 10%;
		}
		#image_domtar {
			width: 50%;
		}
		#page1 .content_head {
			height: 90px;
		}
		#video-controls {
			bottom: 45px;
		}
}