@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
html {margin:0; padding:0; border:0px; width:100%; height:100%; font-size: 12px; font-weight: 300 ; color: #222;  }
body {overflow-y: scroll; overflow-x: hidden; font-family: 'Roboto', sans-serif; font-size:16px; line-height:26px; background:#bbb;}

body {background-image: url(../surlim1.jpg) ; 
background-size:cover; background-size:cover;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; 
 background-repeat:no-repeat; background-position: center center; background-attachment:fixed;}

#boite {position:absolute; border:0px; top:0px; bottom:0px;  /**** iIMPORTANT.....ET.. sans spécifier height.....****/
left:50%; margin-left:-43%; width:70%; margin-top:50px;  padding-left:130px; margin-bottom:40px; text-align:center; background:transparent; }  

.phototitre { width:92%; height:auto; border:0; padding:0; margin:0 ; background:transparent}

#menu  {position:fixed; left:6%; margin-right:140px; width:130px; top: -40px; border:0px; height:100%; overflow:hidden;  background: transparent;  } 

header {position:fixed; left:0px; top:0px; color:#FFF; width:100%;  height:50px; display:inline; text-align:center; overflow:hidden; text-align:left;  background:#2B2B2B; color:#fff;} 

header img { display: inline-block; padding-top:11px; padding-bottom: 2px; margin-left: 2vw; font-size: 16px;  line-height: 25px; text-decoration:none}
header img:hover {color:#2F0}
.titre {width:400px; line-height: 24px; position: absolute; top:12px; left:50%; margin-left: -200px; text-align:center; font-weight:500;}  /****  dans header.....****/
.titre {font-size: 24px; font-weight: 300; color:#fff; line-height: 24px; }

footer {position:fixed; bottom:0px; left:0; background:#2B2B2B; opacity:1.0; background-size: 100% ; color:#FFF; height:40px; width: 100%; overflow:hidden;}   

#pieddroit, #piedgauche, #piedcentre { background-color:transparent; position:absolute; top:10px; height:25px; font-size: 14px; color:#CCC; display:inline;} 
#pieddroit { right:0px; width:auto; font-size: 14px; text-align: right; margin-right: 20px; }
#piedgauche {left:0px; width:auto; font-size:14px; text-align: left; margin-left: 15px; top:13px; }
#piedgauche a {color:#ccc; text-decoration:none; }
#piedgauche a:hover {color:#ef0; text-decoration:none; }
 #piedgauchemini {display:none; height:20px; position :absolute; top:10px; left:10px}

#piedcentre { position:absolute; left:50%; margin-left:-120px; width:320px; text-align: center; font-size: 14px; font-weight:normal; } 
.flecheg img {position:absolute; left:-22px; top:2px; height:20px; border:0px; margin:0px;} 
.fleched img {position:absolute; right:-22px; top:2px; height:20px; border:0px; margin:0px;}  

.case  {width:100%; height:auto; overflow: hidden; padding:0px; margin:-10px 0 0 0 ; text-align: center; background:transparent;  background-size: cover ; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;}
.case img { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius:3px;  }

a, a:hover {text-decoration:none}

.cont  {font-family:'Roboto', Arial, sans-serif; width:98%; height:auto; font-size:17px; font-size:1.8vw; line-height:2.7vw;text-align:justify; margin: 0px 1% 0px 1%; color:#111; background:#FFF; padding:0px;-webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius:12px; webkit-border-radius: 1.5vw; -moz-border-radius: 1.5vw; border-radius:1.5vw; }
.cont a {font-size:1.8vw; line-height:2.7vw; font-weight:400; text-align:left; color:#555; text-decoration:none;}
.cont a:hover {color:#292; background:#ccc;}
.site p {font-size:16px; font-size:1.6vw;  line-height:2.7vw; font-weight:300; text-align:left; color:#222; }
.site a {font-size:17px; font-size:1.7vw; line-height:2.7vw; font-weight:400; text-align:left; color:#333; text-decoration:none; margin : 0 0 8px 0; }
.bibli p, .bibli a {font-size:1.5vw; line-height:2.4vw; font-weight:300; text-align:left; color:#111; }

h1 {font-size:26px; line-height:34px; text-align:center;  padding:20px 0 0 0}
h2 {font-size:20px; line-height:30px;  text-align:left; } /**** utilisé juste dans index ecrit et ressources.****/
h4 {font-size:16px; line-height:25px;  text-align:left; }
h5 {font-size:14px; line-height:20px; text-align:center;}

p {font-size :16px;  line-height: 25px; font-size:1.7vw; line-height:2.7vw; color:#000; text-align:left; font-weight:300; width:90%; text-indent:0px; margin: 5px 5% 10px 5%}

h1 {font-size:3.4vw; line-height:4vw; font-weight:300; color:#222; text-align:center; padding:1.8vw 0 0 0}
h2 {font-size:2vw; line-height:2.8vw;font-weight:500; color:#222;text-align:left; margin:10px 5% 10px 5%}
h4 {font-size:1.8vw; line-height:2.6vw; font-weight:300; color:#333;  margin: -5px 15px 0 10%; }
h5 {font-size:1.6vw; line-height: 2.1vw; font-weight:300;  color:#222; font-style:italic;  margin:0;  padding: 5px;}
h6 {font-size:1.4vw; line-height: 2.2vw; font-weight:300;  color:#111;  font-style:italic; padding: 1.4vw;  margin:0; text-align:left;}

hr {margin : 0px 50px -6px 50px}		

#retour { position: fixed; bottom:45px; right:15px;  height:20px; text-align:center; width:30px; padding: 7px 0 0 1px; 
background:#222; font-size:15px; font-weight:bold; color:#FFF; text-decoration:none; line-height:15px;
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius:8px; }
#retour:hover {background:green;}

.gauche {text-align:left;}
.droite {text-align:right;margin-right:5%}
.marge5 {margin-left:5% ; width: 90%;}
.marge10 {margin-left:15% ;width: 80%;}
.marge20 {margin-left:20% ;width: 75%;}
.center {text-align:center;}
.milieu  {vertical-align:middle;}

.partage { width:100px; height:33px ;text-align:center; position:relative; left:50%; top:0px;  margin: 0px 0 0px -50px; padding : 8px 0 0px 0;  background:transparent; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius:10px; }
.partage a, .partage a:hover {text-decoration:none; background-color: transparent;}

#usage { width:92%; height:auto; font-size:17px; font-size:1.5vw; line-height:2vw; text-align:justify;  font-style:italic; font-weight:300; margin: 0px 1% 0px 1%; color:#111;  background:#FfFFF4;  padding: 20px 3% 20px 3%;-webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius:12px; webkit-border-radius: 1.5vw; -moz-border-radius: 1.5vw; border-radius:1.5vw; }

#luca {position: relative; top:0px; left:10%; width: 80%; height:80%; text-align:center; background:red;}

.epai1, .epai1 a {font-weight : 100; }
.epai3, .epai3 a {font-weight : 300;}
.epai4 {font-weight : 400;}
.epai5 {font-weight : 500;}
.epai7 {font-weight : 700;}
.epai9 {font-weight : 900;}

#menuh {width:98%; height:25px; overflow:hidden; background:transparent} 
#menuh ul, #menuh li {list-style-type:none; font-size:15px; color:#fff; margin:0; padding:0; }
#menuh ul  { position:absolute; top: 18px; left:50%; margin-left:-40%; width:70%; padding-left:130px; text-align:center; background: transparent; height:25px; }

#menuh li {float:left; min-width:150px; width: 19vw; height:25px;  line-height:20px; margin: 0 0px; text-align:center;  background:transparent;}
#menuh a {display:inline;  background:transparent; font-size:15px; color:#fff; font-weight:300; margin:0; text-decoration:none; line-height:20px; padding: 0; }
#menuh a:hover {color:#0f7;} 
#menuh a:active {font-weight:700}
.active {font-weight:700} 

body {background-image: url(../surlim1.jpg)  }


@media screen and (max-width: 736px) {
	 #menu {display:none;}
 	#boite { padding-left:0px; width:92%;left:4%;  margin-left:0;  }
 	#menuh li {margin:0; min-width:130px; } #menuh a{font-size:13px}
 	#menuh ul  { position:absolute; left:50%;  width:465px; margin-left:-185px; padding:0px; text-align:center}
 	#Image1, #piedgauche {display:none; } #piedgauchemini {display:inline; }  #piedcentre {margin-left:-160px; }
 	p, h4, .cont a {font-size :15px; line-height:25px} 
 	h1 {font-size:26px; line-height:30px;} h2 {font-size:19px; line-height:28px; } h4 {font-size:15px; line-height:24px; } h5 {font-size:13px; line-height:20px; }
 	.site p, .site a {font-size:14px; line-height:24px;}
 	.cont .site p, .bibli p, .bibli a {font-size:13px; line-height:22px }
}
@media (orientation: portrait) and (max-width: 800px) {
 #menu {display:none;}
 	#boite { padding-left:0px; width:92%;left:4%;  margin-left:0;  }
 	#menuh li {margin:0; min-width:130px; } #menuh a{font-size:13px}
 	#menuh ul  { position:absolute; left:50%;  width:465px; margin-left:-185px; padding:0px; text-align:center}
 	#Image1, #piedgauche {display:none; } #piedgauchemini {display:inline; }  #piedcentre {margin-left:-160px; } 
	p, h4, .cont a {font-size :15px; line-height:25px} 
	h1 {font-size:26px; line-height:30px;} h2 {font-size:19px; line-height:28px; } h4 {font-size:15px; line-height:24px; } h5 {font-size:13px; line-height:20px; }
 	.site p, .site a {font-size:14px; line-height:24px;}
 	.cont .site p, .bibli p, .bibli a {font-size:13px; line-height:22px }
 	}