@font-face { 
font-family: stag;
src: url(fonts/Stag-Medium.otf);

 } 
 
 body {
	
	 
	 padding:11.5em 0 0 0;	 
	 
 }

 .jour
 {
 	 background: url(light-bg.jpg);
 	 background-size: cover;
 }

  .nuit
 {
 	
 		 background: url(dark-bg.jpg);
 	 background-size: cover;
 }

p {
		font-family: Stag;
	font-size:5vw;
	margin-top:80px;
	letter-spacing:0.04em;
	/*padding-left:1.6em;*/
	line-height:1em;
	
}

.center {
	display: block;
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
	
	
}

.p2 {
		font-family: Stag;
		line-height:1em;
	
}

.gauche {
	
	/*padding:11.5em 0 0 11em;*/
	/*padding:11.5em 0 0 0;*/	
		
}


.flogauche {
	
	float:left;	width:60%;
}
.animation {
	
	margin-top: -66px;
	/*margin-top: 125px;*/
	float:left;width:40%;

}

.animation img {
    width: 572px;

}


    
.strokemeJ
{
    color: white;
    text-shadow:
    -2px -2px 0 #c41959,
    2px -2px 0 #c41959,
    -2px 2px 0 #c41959,
    2px 2px 0 #c41959;  
}


.strokemeN
{
    color: #163851;
    text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;  
}







/* Portrait */
@media only screen 
  and (min-device-width: 0px) 
  and (max-device-width: 768px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

.animation {
     margin-top: 0px;
    float: left;
    width: 100%;
}


.animation img{
   width: 75%;
    margin-left: 10%;
}


#logo
{
padding-left: 5%;
    padding-top: 8%;
}

    

.flogauche {
        float: inherit;
    width: 100%;
}


.wn
{
    margin-top: 10%;
}



p {
font-family: Stag;
    font-size: 11vw;
    margin-top: 13vw;
    letter-spacing: 0.04em;
    /* padding-left: 1.6em; */
    line-height: 1em;
    padding-left: 12px;
    margin-bottom: 5%;
    margin-bottom: 5%;
    padding-left: 7%;
    padding-right: 7%;
}

body {
   
    padding: 2.5vw 0 0 0;
}

.jour
 {
 	 background: url(light-bg.jpg);
 	 background-size: cover;
 }

 .nuit
 {
 	
 		 background: url(dark-bg.jpg);
 	 background-size: cover;
 }



}





@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

p {
    font-family: Stag;
    font-size: 9vw;
    margin-top: 80px;
    letter-spacing: 0.04em;
    /* padding-left: 1.6em; */
    line-height: 1em;
}

.animation {
    margin-top: -36px;
    /* margin-top: 125px; */
    float: left;
    width: 40%;
}

.animation img 
{
	    width: initial;
}



}



@media only screen 
  and (min-device-width: 769px) 
  and (max-device-width: 1281px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

.center {
    display: block;
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
    
    
}



p {
        font-family: Stag;
    font-size:6vw;
    margin-top:80px;
    letter-spacing:0.04em;
    /*padding-left:1.6em;*/
    line-height:1em;
    
}

.animation img {
    width: 455px;

}


.animation {
    
    margin-top: -39px;
    /*margin-top: 125px;*/
    float:left;
    width:40%;

}


 body {
    
     
     padding:10.5em 0 0 0;   
     
 }


.wn
{
    margin-top: 24px;
}

}