/*-----------------------------STEP 1------------------------------------*/

#mainPageContener .pageContener:nth-child(1) .contentContener{
    
    display: none;
}

#mainPageContener .pageContener:nth-child(1) .illustrationContener{
    
    display:none;
}

#mainPageContener .pageContener:nth-child(1) .illustrationContener:nth-child(4){
	
	width: 80%;
	margin-left: 10%;
	margin-bottom: 50px;
	
}

#mainPageContener .pageContener:nth-child(1) .illustrationContener:nth-child(6){
	
	width: 40%;
	margin-left: 30%;
	margin-top: 50px;
	margin-bottom: 50px;
	
}

#mainPageContener .pageContener:nth-child(1) .illustrationContener:nth-child(8){
	
	width: 80%;
	margin-left: 10%;
	margin-top: 50px;
	margin-bottom: 50px;
	
}

/*-----------------------------STEP 2------------------------------------*/

#mainPageContener .pageContener:nth-child(2) .contentContener{
    
    display: none;
}

#mainPageContener .pageContener:nth-child(2) .illustrationContener{
    
    display:none;
}

#mainPageContener .pageContener:nth-child(2) .illustrationContener:nth-child(4){
    
    transform: translate(-10%,0);
}

#mainPageContener .pageContener:nth-child(2) .contentContener:nth-child(5) img{
    
    margin-top: 30px;
}



/*-----------------------------STEP 3------------------------------------*/

#mainPageContener .pageContener:nth-child(3) .contentContener{
    
    display: none;
}

#mainPageContener .pageContener:nth-child(3) .illustrationContener{
    
    display:none;
}


#mainPageContener .pageContener:nth-child(3) .illustrationContener .imageContener img:nth-child(1){
	
	height: 80%;	
	
}

#mainPageContener .pageContener:nth-child(3) .illustrationContener .imageContener canvas{
	
	height: 80%;	
	
}

#mainPageContener .pageContener:nth-child(3) .illustrationContener .imageContener img:nth-child(2){
	
	height: 80%;
	
	
}

#mainPageContener .pageContener:nth-child(3) .illustrationContener .imageContener img:nth-child(3){
	
	height: 70%;
	
	
}

#mainPageContener .pageContener:nth-child(3) .illustrationContener:nth-child(4){
	
}

#mainPageContener .pageContener:nth-child(3) .illustrationContener:nth-child(4) img,canvas{
	
	width: 80%;
	margin-left: 10%;
	margin-bottom: 50px;	
	
}

#mainPageContener .pageContener:nth-child(3) .illustrationContener:nth-child(6) img{
	
	width: 40%;
	margin-left: 30%;
	margin-bottom: 50px;	
	
}

#mainPageContener .pageContener:nth-child(3) .illustrationContener:nth-child(8) img{
	
	transform: translate(10%,0);
	
}

@media only screen and (orientation: landscape) and (min-width: 1020px)
{

		/*-----------------------------STEP 1------------------------------------*/

		#mainPageContener .pageContener:nth-child(1) .contentContener{
    
		    display: block;
		}

		#mainPageContener .pageContener:nth-child(1) .illustrationContener{
		    
		    display: block;
		}

		#mainPageContener .pageContener:nth-child(1) .contentContener p:nth-child(5){
			margin-bottom: 60px;
		}


		#mainPageContener .pageContener:nth-child(1) .illustrationContener .imageContener{
			width: 100%;
			height: 100%;
		}

		#mainPageContener .pageContener:nth-child(1) .illustrationContener .imageContener img:nth-child(1){
			
			height: 50%;
			
		}

		#mainPageContener .pageContener:nth-child(1) .illustrationContener .imageContener img:nth-child(2){
			
			height: 65%;
			
		}

		#mainPageContener .pageContener:nth-child(1) .illustrationContener .imageContener img:nth-child(3){
			
			height: 90%;
			top: 45%;
		    left: 65%;
			
		}

		#mainPageContener .pageContener:nth-child(1) .illustrationContener .imageContener img:nth-child(4){
			
			height: 90%;
			top: 45%;
		    left: 65%;
			
		}


		/*-----------------------------STEP 2------------------------------------*/

		#mainPageContener .pageContener:nth-child(2) .contentContener{
    
		    display: block;
		}

		#mainPageContener .pageContener:nth-child(2) .illustrationContener{
		    
		    display: block;
		}

		#mainPageContener .pageContener:nth-child(2) .illustrationContener .imageContener img:nth-child(1){
	
			height: 70%;
			left: 24%;
	
		}

		#mainPageContener .pageContener:nth-child(2) .contentContener:nth-child(2) .blocTexte .highLightContener img{
    		
    		height: 70%;
		    
		}

		/*-----------------------------STEP 3------------------------------------*/


		#mainPageContener .pageContener:nth-child(3) .contentContener{
    
		    display: block;
		}

		#mainPageContener .pageContener:nth-child(3) .illustrationContener{
		    
		    display: block;
		}

		#mainPageContener .pageContener:nth-child(3) .illustrationContener .imageContener img:nth-child(1){
			
			height: 60%;
			
			
		}

		#mainPageContener .pageContener:nth-child(3) .illustrationContener .imageContener canvas{
			
			height: 60%;
			width: initial;
			
			
		}

		#mainPageContener .pageContener:nth-child(3) .illustrationContener .imageContener img:nth-child(2){
			
			height: 80%;
			
			
		}

		#mainPageContener .pageContener:nth-child(3) .illustrationContener .imageContener img:nth-child(3){
			
			height: 60%;
			
			
		}

}

@media only screen and (orientation: landscape) and (min-width: 1600px)
{
		#mainPageContener .pageContener:nth-child(3) .illustrationContener .imageContener img:nth-child(3){
			height: 80%;
			left: 70%;
		}
}





@media only screen and (orientation: landscape) and (min-width: 1900px)
{

		/*-----------------------------STEP 1------------------------------------*/

		#mainPageContener .pageContener:nth-child(1) .illustrationContener .imageContener img:nth-child(1){
	
			height: 65%;
	
		}

		/*-----------------------------STEP 2------------------------------------*/

		#mainPageContener .pageContener:nth-child(2) .illustrationContener .imageContener img:nth-child(1){
	
			height: 100%;
			left: 25%;
	
		}

		#mainPageContener .pageContener:nth-child(2) .contentContener:nth-child(2) .blocTexte .highLightContener img{
    		
    		height: 100%;
		    
		}

		/*-----------------------------STEP 3------------------------------------*/


		#mainPageContener .pageContener:nth-child(3) .illustrationContener .imageContener img:nth-child(1){
			
			height: 80%;
			
			
		}

		#mainPageContener .pageContener:nth-child(3) .illustrationContener .imageContener canvas{
			
			height: 80%;
			
			
		}

		#mainPageContener .pageContener:nth-child(3) .illustrationContener .imageContener img:nth-child(2){
			
			height: 80%;
			
			
		}

		#mainPageContener .pageContener:nth-child(3) .illustrationContener .imageContener img:nth-child(3){
			
			height: 110%;
			left: 70%;
			
		}
}