@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto:400,500,700');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');


body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 1em; line-height: 1.6em; color: #fff; background-color: #222; /*background-image: url("images/bg2.jpg"); background-repeat: no-repeat; background-position: top left; background-size: cover; background-attachment: fixed;*/ }

div.content { width: 88%; max-width: 1200px; margin: 0 auto 50px auto; padding: 80px 6% 30px 6% ; background-image: url("images/trans-50.png");  position:relative;}
div.content:after  {  clear: both;   content: "";  display: block;}
img.right { float:right; padding: 10px 0 10px 3%; width: 50%; min-width: 300px;}

div.content-top { width: 100%; margin: 0; padding:  0; display:block; text-align: center;}
img.ps-logo { border: 0; width: 80%; min-width: 300px; padding:10px 0; margin:  0; }
/*div.content-right-top { width: 68%; margin: 0; padding:  0; float:left; display:block; }*/

div.content-left { width: 48%; margin: 0; padding: 15px 2% 0 0; float:left; display:block;}
div.content-left img { width: 100%; margin: 0; padding: 0; }
div.content-right { width: 48%; margin: 0; padding: 15px 0 0 2%;  float:left; display: block;}
div.content-right img { width: 100%; margin: 0; padding: 0; }


div.navi_top{ width:94%; margin: 0; background-image: url("images/trans-70.png"); height: 65px;  padding: 10px 3% 0 3%; position:absolute; top: 0; left:0; z-index: 9999; white-space: nowrap;}

div.clr {clear:both; width: 100%;}
div.footer { width: 100%; display: block; clear: both; padding: 30px auto!important; margin: 10px auto; 
 color: #fff; background-color: #222;  border-top: 1px dotted #fff;}
div.footer-left { display: block; float:left; width:48%; padding: 20px 2% 20px 0; }
div.footer-right { display: block; float:left; width:48%; padding: 20px 0 20px 2%; }
span.vali { padding: 0 20px;}
div.box-container { width: 100%; background-color: #D8D8D8; padding: 40px 8%;}
div.box { width: 28%; padding: 30px 2%; margin: 10px .5%; border-radius: 10px; background-image: url("images/trans-70.png"); color:#fff; font-size: 1.4em; float:left; text-align: center; min-height: 80px; border: 1px dotted #fff;}
h1 { color: #fff; font-family: 'Roboto Condensed', sans-serif; font-size: 2.8em;  line-height: 1.2em;}	
h1.center {text-align:center; text-transform: uppercase;}
h2 {  color: #fff; font-family: 'Roboto Condensed', sans-serif;  font-weight: 400; font-size: 1.8em; line-height: 1.2em;}	
h2.center {text-align:center; text-transform: uppercase;}
/*img.ps-logo { border: 0; width: 350px;  padding:20px 4% 20px 0; margin:  0; }*/
a.phone:link, a.phone:visited {font-size: 1em; line-height: 2em; text-decoration: none; border-radius: 5px; padding: 4px 10px 4px 34px; margin: 10px 0!important; display: inline-block; border: 1px dotted #fff; background-image:url(images/telephone.png); background-repeat: no-repeat; color: #fff;}
a.phone:hover {border: 1px dotted #fef1bc;  color:#fef1bc; background-color: #333;}

a.body:link, a.body:visited {font-size: 1em; line-height: 2em; text-decoration: none; border-radius: 5px; padding: 4px 10px 4px 38px; margin: 10px 0!important; display: inline-block; border: 1px dotted #fff; background-image:url(images/arrow.png); background-repeat: no-repeat; color: #fff;}
a.body:hover {border: 1px dotted #fef1bc;  color:#fef1bc; background-color: #333;}




/* BACKGROUND-VIDEO ----------*/
#traffic-video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; }
.container-etu { position: fixed; top: 250px; background: rgba(0, 0, 0, 0.2); color: #f1f1f1; width: 100%; height: 100%; padding: 20px;}
.container { position: fixed; top: 250px; background: rgba(0, 0, 0, 1); color: #f1f1f1; width: 100%; height: 100%; padding: 20px;}
/*-- /////////////////////////*/







@media screen and (max-width: 800px) {
	h1 { font-size: 2.3em;}	
	h2 { font-size: 1.6em; }	
	div.navi_top{  background-image: none;}
	div.box { width: 90%; padding: 10px 5%; margin: 10px 0 0 0; font-size: 1.4em; min-height: 10px; border: 1px dotted #fff;}
	/*img.ps-logo { width: 250px; }*/
}
@media screen and (max-width: 640px) {
	
	img.logo { border: 0; width: 80%;}
	div.footer-left { width: 100%; padding: 20px 0 0 0; }
	div.footer-right { width: 100%; padding: 20px 0 0 0; }

	img.right { float:left!important; padding: 10px 0 20px 0; width: 100%;}
	div.content-left { width: 100%; margin: 0; padding: 15px 0; float:left; }
	div.content-left img { width: 100%; margin: 0; padding: 0; }
	div.content-right { width: 100%; margin: 0; padding: 15px 0;  float:left; }
	div.content-right img { width: 100%; margin: 0; padding: 0; }
	
}

@media screen and (max-width: 480px) {
	
	/*h1 { font-size: 1.4em;}	
	h2 { font-size: 1.1em; }*/
}
@media screen and (max-width: 340px) {

	

	
}



/*@media only screen and (orientation: portrait/landscape) {*/
@media only screen and (orientation: portrait) {
	/*body { background-image:url(images/bg-ver.jpg); }	*/

  
}