/*===== STYLES GENERAUX =====*/
/*       Polices de caractères        */

/*H1 header*/
@font-face {
    font-family: 'HarabaraHand';
   src: url('../02_Polices/HarabaraHand/harabarahand.eot');
    src: url('../HarabaraHand/harabarahand.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/HarabaraHand/harabarahand.woff') format('woff'),
         url('../02_Polices/HarabaraHand/harabarahand.ttf') format('truetype'),
         url('../02_Polices/HarabaraHand/harabarahand.svg#HarabaraHand') format('svg');
    font-weight: normal;
    font-style: normal;
	
}

/*H2 header*/
@font-face {
    font-family: 'Aaargh';
	src: url('../02_Polices/Aaargh/aaargh.eot');
    src: url('../02_Polices/Aaargh/aaargh.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/Aaargh/aaargh.woff') format('woff'),
         url('../02_Polices/Aaargh/aaargh.ttf') format('truetype'),
         url('../02_Polices/Aaargh/aaargh.svg#Aaargh') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Menu*/
@font-face {
    font-family: 'Palitoon';
	src: url('../02_Polices/Palitoon/palitoon.eot');
    src: url('../02_Polices/Palitoon/palitoon.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/Palitoon/palitoon.woff') format('woff'),
         url('../02_Polices/Palitoon/palitoon.ttf') format('truetype'),
         url('../02_Polices/Palitoon/palitoon.svg#Palitoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*H1 main section*/
@font-face {
    font-family: 'CaviarDreams';
	src: url('../02_Polices/CaviarDreams/caviardreams_italic.eot');
    src: url('../02_Polices/CaviarDreams/caviardreams_italic.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/CaviarDreams/caviardreams_italic.woff') format('woff'),
         url('../02_Polices/CaviarDreams/caviardreams_italic.ttf') format('truetype'),
         url('../02_Polices/CaviarDreams/caviardreams_italic.svg#CaviarDreams') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*H2 main section*/
@font-face {
    font-family: 'Cantarell';
	src: url('../02_Polices/Cantarell/cantarell-oblique.eot');
    src: url('../02_Polices/Cantarell/Cantarell-oblique.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/Cantarell/Cantarell-oblique.woff') format('woff'),
         url('../02_Polices/Cantarell/Cantarell-oblique.ttf') format('truetype'),
         url('../02_Polices/Cantarell/Cantarell-oblique.svg#CaviarDreams') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*p main section*/
@font-face {
    font-family: 'Alegreya-Regular';
	src: url('../02_Polices/Alegreya/alegreya-regular-webfont.eot');
    src: url('../02_Polices/Alegreya/alegreya-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../02_Polices/Alegreya/alegreya-regular-webfont.woff') format('woff'),
         url('../02_Polices/Alegreya/alegreya-regular-webfont.ttf') format('truetype'),
         url('../02_Polices/Alegreya/alegreya-regular-webfont.svg#CaviarDreams') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*---------- Balises standards HTML ----------*/
html {
	margin: 0px;
	padding: 0px;
	font-size: 100%;
    line-height: 100%;
	color: #FFFFFF;
	background-color: #000000;
	background: url('../01_Fond/Elio_black.jpg') no-repeat left top, #000000;
}

body {
	margin: 0;
	padding: 0;
	width: 100%;
}

div#General_Page_content {
	margin: 0 5% 0 auto;
	padding: 0px;
	width: 70%;
	min-width: 800px;
	/*background: #FFFFFF;*/
}

/*---------- Balises et classes générales ----------*/

/*Tailles et polices*/
h1, hg {
	font-size: 2.5em;
	line-height: 1.3em;
	font-family: 'CaviarDreams',sans-serif;
}
h1.centre {text-align: center;}

h2, ha {
	font-size: 1.5em;
	line-height: 1.5em;
	font-family: 'Cantarell',sans-serif;
}

p, li, td, th, input, textarea, select, button {
	font-family: 'Alegreya-Regular',sans-serif;
	font-size: 1em;
	line-height: 1.5em;
}

/*Paragraphes*/
p {
	padding: 0 3% 0 3%;
	text-align: justify;
}

em {
	font-style: italic;
	font-weight: normal;
}

strong {
	font-weight: bold;
}

/*Liens*/
a {color:#4363ff;}
a:link, a:visited {text-decoration: underline;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}

/*Listes*/
ul {
	margin-left: 5%;
}

/*Tableaux*/
table {
	position: relative;
	margin: 1em auto 1em auto;
	border-collapse: collapse;
	border: 1px solid #4363ff;	
}
table.tb95 {
	width: 95%;
}
.tb10 {width: 10%;}
.tb15 {width: 15%;}
.tblFF {border: none;}

td,th {
	text-align: center;
	padding-top: 1%;
	padding-bottom: 1%;
	border: 1px solid #4363ff;	
}
/*Images*/
img.centre {margin-left: auto; margin-right: auto;}
img.img35 {display: block; width: 35%;}
img.img50 {display: block; width: 50%;}
img.round10 {border-radius: 10px;}
img.logoArt {display:block; width: 35%; border-radius: 50%;}

/*videos*/
video {border: 1px solid #4363ff; width: 50%;}

/*Fromulaires*/
input.bouton {
	margin: 5px 0 0 5px;
	background: none;
	border: 1px solid #000000;
	font-weight: normal;
	color: #000000;
	cursor: pointer;
}

input.search_ind {width: 100%; padding: 5px;}

/*Communication JS*/
#incjs {display: block; position: absolute; min-width: 100%; top: 6em;  padding: 0; z-index: 5; /*background-color: #FFFFFF; border: 1px solid #000000;*/}
#closeincjs {
	position: absolute;
	top: -0.5em;
	right: -0.5em;
	width: 2em;
	
	font-weight: bold; 
	font-size: 1.2em;
	line-height: 1.2em;
	text-align: center;
	color: #FFFFFF;
	
	background-color: #D2B48C;
	border-radius: 1.5em;
	cursor: pointer;
}
#closeincjs:hover {
	color: #000000;	
	background-color: #FF0000;
}
article.popup{display: block; position: relative; margin: 0 auto 0 auto; border: 5px solid #D2B48C; background-color: #FFFFFF; box-shadow: 0.25em 0.25em 0.5em #000000;}
article.popup { padding: 0.25em 3.5% 0.25em 3.5%; font-size: 1.1em;}




/*---------- Header ----------*/

/*Etiquettes*/
#menuGen {display:block; position: relative; width: 100%; margin: 1em 0 0 0;}
#menuGen a {display: inline-block; padding: 0.5em; margin: 0 0 0 2%; color: #FFFFFF; border: 1px solid #f6490f; text-decoration: none; }
#menuGen a:hover {color: #f6490f; border: 1px solid #FFFFFF;}
#menuGen a.actif {color: #f6490f; background: #E0E0DE; }


header {
	position: relative;
	display: block;
	width: 100%;
	/*min-height: 150px;*/
	padding: 0;
	margin: 0;
	/*background-color: rgb(184,179,156);*/
	border-bottom: 2px solid #4363ff;
}

#cadre_titre {
	display: block;
	position: relative;
	width: 95%;
	padding-left: 5%;
	margin: 1.5em 0 0 0;
	/*background: #FFFFFF;*/
	/*background: url('../01_Fond/Logo_transparence.png') no-repeat left top;*/
}

#cadre_titre a{text-decoration:none;}
#cadre_titre h1 {font-size: 3.5em; color: #FFFFFF; font-family: 'Aaargh',"Comic Sans MS",cursive; text-shadow: 3px 3px 0 #4363ff; margin: 0; padding: 0;}

#soustitre {margin: -1.5em 0 0 0; /*background-color: #E60977;*/}
#soustitre h2 {font-size: 3em; color: #FFFFFF; font-family: 'Palitoon',"Comic Sans MS",cursive; text-align: center; margin: 0; }




/*---------- CORPS PAGE ----------*/
section.main_content {
	position: relative;
	display: block;
	
	width: 100%;
	min-height: 650px;
	margin: 0;
    padding: 0;
	/*background-color: #FFFFFF;*/
	/*border-right: #afadac solid 1px;	
	border-left: #afadac solid 1px;	*/
}

section.main_content_flex {	
	position: relative;
	display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row; /* Safari 6.1+ */
	
	display: flex;
	flex-direction: row-reverse;
	
	justify-content: space-between;
	
	width: 100%;
	min-height: 650px;
	margin: 0;
	padding: 0;
	
	top: 0px;
	
	/*background-color: #EC0FFF;*/
}

div.content_flex {	
	position: relative;
	display: -webkit-flex; /* Safari */
    /*-webkit-flex-direction: row; /* Safari 6.1+ */
	
	display: flex;
	flex-direction: row;
    flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

section.flex, div.flex{
	position: relative;
	display: flex;
    display: -webkit-flex; /* Safari */
	justify-content: space-between;
    -webkit-justify-content: space-between;
	align-items: flex-start;
    -webkit-align-items: flex-start; /* Safari 7.0+ */
}
section.col100, div.col100, article.col100 {position: relative; width: 100%; margin: 0;}
section.col90, div.col90, article.col90 {position: relative; width: 90%; margin: 0;}
section.col90-centre, div.col90-centre, article.col90-centre {position: relative; width: 89%; margin: 0 auto 0 auto; padding-left:0.5%; padding-right: 0.5%; background-color:#4363ff;}
section.col80, div.col80, article.col80 {position: relative; padding: 0; width: 80%;}
section.col80-centre, div.col80-centre, article.col80-centre {position: relative; padding: 0; width: 80%; margin: 0 10% 0 10%;}
section.col70, div.col70, article.col70 {position: relative; width: 70%; margin: 0;}
section.col60, div.col60, article.col60 {position: relative; width: 60%; margin: 0;}
section.col50, div.col50, article.col50 {position: relative; width: 50%; margin: 0;}
section.col50-centre, div.col50-centre, article.col50-centre {position: relative; width: 50%; margin: 0 25% 0 25%;}
section.col30, div.col30, article.col30 {position: relative; width: 30%; margin: 0;}
section.col10, div.col10, article.col10 {position: relative; width: 10%; margin: 0;}
section.colpadbot5,div.colpadbot5,article.colpadbot5 {padding-bottom: 5em;}



/*Article de contenus*/
article.generic {
    position: relative;
    display: block;
    padding: 0.5em 2% 0.5em 2%;
    margin: 1em 0.5% 1em 0.5%;
    width: 45%;
    background-size: 27%;
    background-repeat: no-repeat;
    background-position: top left;
    background-color: rgba(184,179,156,0.25);
}

article.mg5 {margin-left:5%;}
article.mg15 {margin-left:15%;}
article.mg30 {margin-left:30%;}






/*---------- COLONNE GAUCHE ---------*/
article.ctnt_colleft {margin: 0; padding: 0; width: 20%; padding-top: 2em;}
article.ctnt_colleft div.cadreSubart {display: block; position: relative; margin: 1em 0 0 0; padding: 1.4em 0 0 0; border-top: 10px dotted #FFFFFF;}
article.ctnt_colleft div.subart {display: block; position: relative; margin: 0 5% 1.5em 5%; padding: 0 0 0 0; width: 90%; /*background-color: #000000;*/}

article.ctnt_colleft p {margin: 0 0 0.7em;}
article.ctnt_colleft h2.main_content_title1 {display: block; position: relative; width: 90%; margin: 0 0 0.7em 0; padding: 0; font-family: 'Palitoon' ;font-size: 2.5em; line-height: 1em; text-align: left; color: #c26711; border: none; letter-spacing: 0.1em;}

article.ctnt_colleft a:link, article.ctnt_colleft a:visited {color: #4363ff; padding-left: 2%; text-decoration: none; border-left: 10px solid rgba(184,179,156,0);}
article.ctnt_colleft a:hover {color: #000000; border-left: 10px solid #4363ff;}
article.ctnt_colleft a:active {border-left: 10px solid #000000;}

/*---------- FOOTER ----------*/

footer {
	width: 100%;
	position: relative;
	display: block;
	margin: 0;
	padding: 0 0 1em 0;
	border-top: 2px solid #4363ff;
	border-top: 2px solid #f6490f;
	/*background-color: #696969;*/
	z-index: 3;
}
div.titrefooter {text-align: center;}
div.flexfooter {display: flex; justify-content: space-around; padding: 0; margin: 0;}

footer article.artfoot {display: block; width: 25%; padding: 0 3% 5em 3%; margin: 0; background-color: rgba(255,255,255,0.3);}
footer p, footer h2 {text-align:center; color: #FFFFFF; padding: 0;}
footer h2 {text-align: center; margin-bottom: 2em; font-style: italic;}
footer p {font-size: 1.1em;}

footer a {padding: 0; margin: 0;}
footer a:link, footer a:visited{ color: #FFFFFF; text-decoration: underline; }
footer a:hover, footer a:active { color: #FFFFFF; text-decoration: none; }



/*---------- Menu de navigation ----------*/
button.ico_menu { display: none; position: absolute; top: 20px; right: 30px; padding: 0; margin: 20px 30px 0 0;
	background: url(../01_Fond/ico_small_menu.png) no-repeat center;
	height: 90px;
	width: 88px;
	border:none;
	cursor: pointer;
 }

#navigation_gen {
	position: relative;
	padding: 0;
	margin: 0;
}

#menu_gen {
	display: block;
	position: relative;
	top: 25px;
	padding: 0;
	margin: auto;
	text-align: center;
}

#menu_gen li {
	position: relative;
	display: inline-block;
	list-style: none;
	font-family: 'Palitoon',Verdana;
	padding: 0 2% 0 2%;
	margin: 0 0.7% 0 0.7%;
	line-height: 2.5em;
	background: none;
	
	/*border-bottom: 3px solid rgb(156,149,116);*/
	border-radius: 10px 10px 10px 10px;
	/*overflow: hidden;*/
	/*transition: border-bottom-color 0.8s linear;	*/
}

#menu_gen a {
	position: relative;
	display: block;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0.06em 0.06em 0 #000000;
	margin: 0;
	font-size: 1.8em;
	z-index: 2;
}

#menu_gen li:hover, #menu_gen li.actif{
	color: #FFFFFF;
	/*background-color: #4363ff;*/
	background-color: rgba(65,99,255,0.5);
	/*text-shadow: 0.5em 0.5em 0.4em #4363ff, -0.5em -0.5em 0.4em #4363ff;*/
	/*text-shadow: 0.6em 0.6em 0 #4363ff;*/
}

/*Entete reduite pour scroll*/
/*header.fixe+.main_content_flex {margin-top:40px;}
header.fixe+.main_content {margin-top:40px;}*/
header.fixe {
	position: fixed;
	top: 0;
	width: 70%;
	min-height: 40px;
	padding: 0 15% 0 15%;
	margin: 0;
	background-color: rgb(184,179,156);
	z-index: 10;
}

header.fixe #cadre_titre {
	display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row; /* Safari 6.1+ */
	display: flex;
	flex-direction: row;
	min-height: 0px;
	background: none;
}

header.fixe hg.titre_gen { font-size: 2.5em; margin: 0;}
header.fixe hg.ss_titre_gen {font-size: 1.2em; color: #0000CD; margin: -15px 0 0 0px;}
header.fixe #zone1_header {width: 30%; padding: 0; margin: 0;}
header.fixe #zone2_header {width: 70%; padding: 0; margin: 0;}


/*---------- Menu de navigation ----------*/

button.ico_menu { display: none; position: absolute; top: 20px; right: 30px; padding: 0; margin: 20px 30px 0 0;
	background: url(../01_Fond/ico_small_menu.png) no-repeat center;
	height: 90px;
	width: 88px;
	border:none;
	cursor: pointer;
}

button.assoceContent {border:none; cursor: pointer; margin: 0; padding: 0; font-weight: bold; text-align: left; background-color: rgba(184,179,156,0);}
button.assoceContent:hover {color: #4363ff; }

header.fixe #menu_gen {top: 10px;}
header.fixe #menu_gen a {color: #FFFFFF; padding: 0; transition: padding-top 0.8s linear; text-shadow: 3px 3px 5px #000000;}
header.fixe #menu_gen li.lien1, header.fixe #menu_gen li.lien2, header.fixe #menu_gen li.lien3, header.fixe #menu_gen li.lien4 {vertical-align: top; border: none; }
header.fixe #menu_gen .fond_menu {display: none;}
header.fixe #menu_gen li.lien1:hover { border-bottom: 3px solid #DC143C;}
header.fixe #menu_gen li.lien2:hover { border-bottom: 3px solid #228B22;}
header.fixe #menu_gen li.lien3:hover { border-bottom: 3px solid #9932CC;}
header.fixe #menu_gen li.lien4:hover { border-bottom: 3px solid #0000CD;}
header.fixe #menu_gen a:hover { padding-top: 15%; transition: padding-top 0.4s linear;}




/*Menu navigation main content*/
.menu_main_content  {
	display: flex;
	flex-wrap: wrap;
	
	justify-content: center;
	-webkit-justify-content: center;
	
	margin: 2em auto 2em auto;
	padding: 0;
	width: 50%;
	background-color: #0000CD;
}

.menu_main_content p{
	padding: 0;
	margin: 0;
	text-align: center;
}

.menu_main_content a{
	display: inline-block;
	padding: 5px 10px 5px 10px;
	text-decoration: none;
	font-size: 1em;
	font-weight: normal;
	margin: 0 5px 10px 5px;
	border-radius: 20px;
	white-space: pre;
}

.ctnt_colleft .menu_main_content a{ display: block; line-height: 2em; margin: 1em;}

.menu_main_content a:link, .menu_main_content a:visited {
	color: #FFFFFF;
	background-color: #696969;	
}

.menu_main_content a:hover, .menu_main_content a:active {
	color: #FFFFFF;
	background-color: #4363ff;
	box-shadow: none;
	box-shadow: 0px 2px 3px #000000;
}

.menu_main_content a.menu_content_select:link, .menu_main_content a.menu_content_select:visited {
	color: #ffff00;
}

.menu_main_content a.menu_content_select:hover.menu_main_content a.menu_content_select:active {
	
}



@media screen and (max-width: 992px)
{
	html {background: #000000; }
	body {width: 100%; padding: 0; margin: 0; font-size: 1.80em;}
	
	div#General_Page_content {
		margin: 0;
		padding: 0;
		width: 100%;
		min-width: 800px;
		/*background: #FFFFFF;*/
	}

	
	/*Header*/
	header { display: block; position: relative; min-height: 6em; margin:0; padding: 0; background: url('../01_Fond/Hybrid_pt_H.jpg') no-repeat left -2em; border-top: 1px solid #FFFFFF; }
	#fondHeader{ background: url('../01_Fond/Hybrid_pt_H.jpg') no-repeat left top; background-size: 150%; /*border-top: 1px solid #FFFFFF;*/}
	#cadre_titre {width: 97%; padding: 0 0 0 3%;}
	#cadre_titre h1{width: 100%; text-align: left; margin:0; padding: 0; line-height: 1em;}
	#soustitre {width: 100%; text-align: right; padding: 0;}
	#soustitre h2 {display: inline-block; text-align: right;line-height: 1.2em;  margin:0; padding: 0 2% 0 2%; background-color: rgb(21,21,21); border-radius: 50% 0 0 0;}
	


	/*Menu*/
	/* div#menuGen { display: none; position: absolute;} */
	#menuGen {display:block; position: relative; width: 100%; margin: 1em 0 0 0;}
	#menuGen a {display: inline-block; padding: 0.5em; margin: 0 0 0 2%; color: #f6490f; border: 1px solid #f6490f; text-decoration: none; background-color: #E0E0DE; }
	#menuGen a:hover {color: #f6490f; border: 1px solid #FFFFFF;}
	#menuGen a.actif {color: #FFFFFF; background: #f6490f; }
	
	section.main_content_flex {	
		
		flex-direction: column;
		
		
	}
		
	
	/*SECTIONS*/
	p.etiquette {display: block; position: absolute; top:0; left:0; width: 100%; padding: 0; margin: 0; text-align: left; z-index: 2;}
	p.etiquette a {display: inline-block; position: relative; padding: 0.2em 3% 0.2em 3%; margin: 0 0 0 1%; font-size: 1.1em; color: #FFFFFF; background-color:#4363ff; border: none; text-decoration: none; border-radius: 0 0 8px 8px;}
	
	p.etiquette a.Mode_On {color: #000000; background-color:#ffffff;}
	p.etiquette a.Mode_Off {color: #FFFFFF; background-color:#4363ff;}
	
	/*Vidéo*/
	article.popup {width: 90%;}
	#closeincjs {top: -0.5em; right: -0.5em;}
	video {display: block; position: relative; width: 100%;}
	
	/*Footer*/
	footer {margin-bottom: 8em;}
	

}