* {margin:0; padding: 0}

body {background-color: wheat; border: 0px solid white; margin:0; font-weight: 100; font-family: monospace, serif; overflow: hidden; }

a {color: white; background-color: DeepSkyBlue; text-decoration: none }

#topwheat {position: fixed; top:0; left:0;  background-color: wheat; width: 100%; height: 20px; z-index: 999}
#botwheat {position: fixed; bottom:0; left:0;  background-color: wheat; width: 100%; height: 20px; z-index: 999}

#lefwheat {position: fixed; top:0; left:0; bottom:0;  background-color: wheat; width: 20px; z-index: 999}
#rigwheat {position: fixed; top:0; right: 0; bottom:0; background-color: wheat; width: 20px; z-index: 999}


canvas {position: absolute; top: 0; left: 0; z-index: -999; border-radius: 0; opacity: 0;} 


h1, h2, h3 {font-family: 'Century Gothic', sans-serif;  margin: 0}

h2 { font-weight: 100; font-size: 24px; margin: 50px 8% 20px 8%; }





header {position: fixed; top :50%; left: 75%; width:50%; height: 200px; margin: -100px 0 0 -25%;   border: 0px solid white; opacity: 0 ; z-index: 1; color: white; }

header h1 {position:absolute; bottom:50%; width: 96%; text-align: center; font-weight: 100; font-size: 32px; margin-top: 50px; margin-bottom: 10px}
header hr {}
header p {position:absolute; top:50%; width: 96%;  text-align: center; font-weight: 100; font-size: 18px; text-transform: uppercase; letter-spacing: 0.2em; font-family: serif;/*  border-top: 2px dashed white; */ padding-top: 10px; }
header p span {font-size: 11px;  letter-spacing: 0.1em}


#hrm {border:0; border-top:2px dashed white; position: fixed; top: 50%; left: 50%; width: 50%}



nav  { position: fixed; z-index: 20; width: 100% }
nav ul li { list-style-type: none; position: fixed;   }
nav ul li a {display: block; font-size: 15px; height: 30px; line-height: 30px; color:  #fff; text-decoration: none; font-family: monospace; text-align: right; padding: 0px 12px;  background-color: DeepBlueSky}

#iprez { top:20px; right:50%; opacity: 0}
#iarti { bottom:20px; left:50%; opacity: 0 }
#icosm { top:-40px; right : 20px; opacity: 0 }
#itech { bottom:20px; left: 20px; opacity: 0 }

#bprez { background-color: #009ed3}
#barti { background-color: Sienna; }			
#btech { color: #fff; background-color: rgba(0, 0, 0, 0.25); border-top: 0px solid wheat; border-right: 0px solid wheat ; }
#bcosm { background-color: wheat; color: #333}
			
#tbt1, #tbt2, #tbt3, #tbt4, #tbt5, #tbt6 {text-decoration: underline; background-color: transparent}			

#tbt1:hover, #tbt2:hover, #tbt3:hover, #tbt4:hover, #tbt5:hover, #tbt6:hover {text-decoration: none}



#phrase {
	position: fixed; bottom: 55%; left:50%; width:90%;  margin: 0 -45%; opacity: 0;
	font-family: georgia, serif; font-weight: 100;  font-size: 36px; text-align: center; color: dimgray; font-style: italic; overflow: hidden;  }





section {position: fixed; top:0; left: 0; right: 0; bottom: 0; width: 100%; opacity: 0}
section p, section ul { font-size: 14px; text-align: left; margin: 20px 8% 20px 8% ; line-height: 1.5em}
.bigp {font-size: 16px;}





#introenumer { line-height: 20px; height: 60px}
#introenumer li  {overflow: hidden; height: 0px; transition: all 0.5s ease; }
#introenumer li span {font-size: 13px; display: block}

#bnxtintro { padding: 0; border: 0px solid white; margin-bottom: -10px; }
#bnxtintro li { background-color: wheat; display: inline-block; width: 13px; height: 13px; margin-right: 11px; font-size: 0px; border-radius: 7px; transition: all 0.25s ease;}



.alef {position: absolute; width: 50%; left: 0; right:50%; top: 0; bottom: 0; border: 0px solid red }
.arig {position: absolute; width: 50%; left: 50%; right:0; top: 0; bottom: 0; border: 0px solid green }
.atop {position: absolute; width: 100%; left: 0; bottom: 50%; border: 0px solid red }
.abot {position: absolute; width: 100%; left: 0; top: 50%;  border: 0px solid blue}


.graddescripll {
	background: -webkit-linear-gradient( wheat 0%, rgba(0, 191, 255, 0.3) 100%);
	background: -o-linear-gradient( wheat 0%, rgba(0, 191, 255, 0.3) 100%);
	background: -moz-linear-gradient( wheat 0%, rgba(0, 191, 255, 0.3) 100%);
	background: linear-gradient( wheat 0%, rgba(0, 191, 255, 0.3) 100%);
	 }
.graddescriprr {background-color: rgba(0, 191, 255, 0.3)}

.gradcosmogoll {
	background: -webkit-linear-gradient( rgba(0, 191, 255, 0.7) 0%, rgba(128, 128, 0, 0.7) 50%, rgba(161, 82, 45, 0.7) 100%); 
	background: -o-linear-gradient( rgba(0, 191, 255, 0.7) 0%, rgba(128, 128, 0, 0.7) 50%, rgba(161, 82, 45, 0.7) 100%); 
	background: -moz-linear-gradient( rgba(0, 191, 255, 0.7) 0%, rgba(128, 128, 0, 0.7) 50%, rgba(161, 82, 45, 0.7) 100%); 
	background: linear-gradient( rgba(0, 191, 255, 0.7) 0%, rgba(128, 128, 0, 0.7) 50%, rgba(161, 82, 45, 0.7) 100%) ; 
	}
.gradcosmogorr {
	background: -webkit-linear-gradient( rgba(0, 191, 255, 1) 0%, rgba(128, 128, 0, 1) 50%, rgba(161, 82, 45, 1) 100%);
	background: -o-linear-gradient( rgba(0, 191, 255, 1) 0%, rgba(128, 128, 0, 1) 50%, rgba(161, 82, 45, 1) 100%);
	background: -moz-linear-gradient( rgba(0, 191, 255, 1) 0%, rgba(128, 128, 0, 1) 50%, rgba(161, 82, 45, 1) 100%);
	background: linear-gradient( rgba(0, 191, 255, 1) 0%, rgba(128, 128, 0, 1) 50%, rgba(161, 82, 45, 1) 100%);
	}

.gradartistell {background-color: rgba(128, 128, 0, 0.25);} 
.gradartisterr {
	background: -webkit-linear-gradient( rgba(245, 222, 179, 0) 0%, #ffdbbf 100%);
	background: -o-linear-gradient( rgba(245, 222, 179, 0) 0%, #ffdbbf 100%);
	background: -moz-linear-gradient( rgba(245, 222, 179, 0) 0%, #ffdbbf 100%);
	background: linear-gradient( rgba(245, 222, 179, 0) 0%, #ffdbbf 100%);
	
} 



.gradtechnicll {background-color: #efefef;}
.gradtechnicrr {background-color: rgba(161, 82, 45, 0.3);}


#description { color : #333;}

#bgall {display: block; position: fixed; bottom: 20px; right: 50%; padding: 0 12px; background-color: #009ed3; font-family: monospace; font-size: 15px; height: 30px; line-height: 30px;}




#bgprez {position: absolute; width: 100%; bottom: 0; opacity: 0  }
#bgprez img { width: 100%; }



#cosmogon { color: wheat;}

#cosmoimgen {position: absolute; width: 100%; left: 0; top: 0; bottom: 50%; background-image: url(../img/symbole/s0blc.png); background-repeat: no-repeat; background-position: center center; background-size:  84%}


#troisymb {background-color: wheat; width: 50%; right: 50%; color: #444 }
#troisymb img { display:block;width: 30%;  max-width: 256px; margin: 0 auto -40px auto}
#troisymb em {font-size: 18px;}

#troisymbimgen {position: absolute; width: 100%; left: 0; top: 0; bottom: 50%; background-repeat: no-repeat; background-position: center center; background-size: 84%}



#artistes  { color : #444; }
.portrait {display: block; margin: 0 auto; width: 256px; border-radius: 50%}


/* DeepSkyBlue 0%, Olive  50%, Sienna 100% */
/* #00BFFF 0%, #808000  50%, #A0522D 100% */







#technic {}
#technic ul li {font-family: monospace; color: #444; border-top : 1px solid #ddd; padding: 8px 0; font-size: 12px; line-height: 1.25em; list-style-type: none}
#technic ul li a {margin: 6px 0; padding: 8px; background-color: #009ed3; display: block; width: 50%; min-width: 200px }
.telef {font-family: 'Century Gothic', sans-serif; font-size: 46px; font-weight: 800; margin: 0 8%; color: #CCC}





footer {position: fixed; bottom : 120px; left: 50%; width: 400px; height: 200px; margin: 0 0 0 -200px;   border-top: 3px solid white; border-radius: 50%; overflow: hidden; z-index: 10}




#gallery {position: fixed; top:0; left: 0; right: 0; bottom: 0; width: 100%; background-color: wheat; border:1px solid red;  opacity: 0; z-index: -5;}

#gallbg {position: absolute; top:0; left: 0; right: 0; bottom: 0; width: 100%;  background-image: url(../img/gal/g1.jpg); background-position: center center; background-repeat: no-repeat;  border:1px solid blue; opacity:1 }


#gallery ul {padding: 40px}

#gallery a {display: block; font-size: 15px; height: 30px; width: 21%; line-height: 30px ;font-weight: 100; color:  #fff; text-decoration: none; font-family: monospace;  padding: 0px 2%;  background-color: wheat; color: #444}

#bgalclose { position: fixed; top:20px; right:50%; text-align: right;}
#bgalnext { position: fixed; bottom:20px; right:0px; text-align: left; }
#bgalprev { position: fixed; bottom:20px; left:0px; text-align: right; }

.mrpropre {clear: both; font-size: 0; height: 0}



#parsemila {position: fixed; bottom: 0; right: 20px; color: red; z-index: 99999;  font-size: 13px;}
#parsemila a {background-color: inherit; color: olive}


#tek {color: white; font-family: monospace; font-size: 13px; width: 200px; position: absolute; top:0; left:0; color: red; z-index: 9999}






/* Media Queries */
@media only screen and (max-width: 1124px) {


h2 { font-weight: 100; font-size: 21px; margin: 20px 8% 10px 8%}

header h1 {font-size: 24px; }
header p {font-size: 13px; letter-spacing: 0.2em; padding-top: 10px; }
header p span {font-size: 10px;  letter-spacing: 0.1em}

 
section p, section ul { font-size: 12px; margin: 10px 8% 10px 8% ; line-height: 1.25em}
.bigp {font-size: 14px;}


#technic ul li {padding: 4px 0; font-size: 11px; line-height: 1.2em; }
.telef {font-size: 24px; margin: 0 8%; color: #CCC}
}