/*
color: #x	;
@charset "UTF-8";
*/

html, body {
	padding:0;
	margin:0; 
	font-family:"myriad-pro"; 
	color:#4a443d;
	background-color : #eeeeee;
}

body {
	overflow:auto ;
	max-width : 1600px;
	margin:auto;
	text-align : center ;
	background-color: white ;
}

#skrollr-body{
	margin:auto;
	text-align:left;
}

#header {
	background-color : white ;
	width : 100% ;
	max-width : 800px ;
	position : fixed ;
	padding-top : 15px ;
}

#accroche {
	color:#e2007a;
	padding-bottom:15px;
	text-align:left; 
	font-size: 3em; 
	margin:0px; 
	position:relative; 
	top:80px; 
	background-color:rgba(255,255,255,0.7); 
	padding-top:15px; 
	margin-left:50%; 
	right:0px; 
	position:absolute;
	top:15%;
}

#div_Persos p{
	font-size:1.5em;
}

.persoDesc {
	position:absolute;
	background-color:rgba(255,255,255,0.95);
	width:50%;
	top:50px;
	border-left : none;
	color:black;
}
.persoDesc {
	position:relative;
	width : 100% ;
	top:0px;
}
.picto {
	width : 50px;
	height : 50px ;
}
.capture {
	box-shadow : 0px 3px 12px rgba(0,0,0,0.5);
	width:calc(100% - 100px);
	margin-right:50px;
	margin-left:50px;
	
	display: block;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:60px;
	margin-top:30px;
	max-width : 800px;
	
}

.rose, .jaune, .bleu, .orange {
	border-left:none;
	background-color:white;
	color : black ;
}

.rose h2{
	color : #e2007a ;
}
.jaune h2{
	color : #CCC03E ;
}
.bleu h2{
	color : #34aadc ;
}
.orange h2{
	color : #ff9500 ;
}

*{

	font-family : "Helvetica Neue", sans-serif ;	
	font: -apple-system-body ;
	font-size : 0.995em;
	font-family : "myriad-pro" ;
}

h1 {
	font-family : "myriad-pro" ;
	font-size : 2.5em;
	font-weight : 300 ;
	padding-left : 50px;
	padding-right:50px;
	padding-top : 15px;
	padding-bottom : 15px;
	margin-top : 0px;
}
h2 {
	font-family : "myriad-pro" ;
	font-size : 2em;
	font-weight : 300 ;
	padding-left : 50px;
	padding-right:50px;
}
h3 {
	font-family : "myriad-pro" ;
	font-size : 1.5em;
	font-weight : 300 ;
	padding-left : 50px;
	padding-right:50px;
}

a {
	color : black ;
	text-decoration:none ;
}
a:hover {
	color : #E2007A ;
	text-decoration:none ;
}

p {
	font-weight : 300 ;
	padding-left : 50px;
	padding-right:50px;
	font-size : 1.2em ;
}

input {
	border : none ;
/*	border : 1px solid lightgray ; */
	-webkit-appearance : none ;	
}

input-placeholder {
	color : red ;
}

textarea{
	width:calc(100% - 24px);
	border:none;
}

input[type=button] {
	color : red ;
}

table, tbody, tr, td {
	padding : 0px;
	margin : 0px;
	border : none ;
	border-collapse: collapse;
/*	border-collapse : separate;*/
/*    background-color : lightgray; */
}

td {
	text-align : center ;
	border : solid 2px lightgray ;
}


.ts_persos.white {
	background-color : white ;
}

td.td_persos:hover {
	background-color : #efefef ;
}

td.td_persos:active {
/* background-color : red ; */
}

.td_persos.rose {
	background-color : #e2007a ;
}

.td_persos.bleu {
	background-color : #31AADB ;
}

.td_persos.jaune {
	background-color : #E7D946 ;
}

.td_persos.orange {
	background-color : #F08A16 ;
}
.td_persos.rose:hover {
	background-color : #e2007a ;
}

.td_persos.bleu:hover {
	background-color : #31AADB ;
}

.td_persos.jaune:hover {
	background-color : #E7D946 ;
}

.td_persos.orange:hover {
	background-color : #F08A16 ;
}

#persosPreview  svg{
	float:left;
}

.col_gauche{
	background-color:white ;
	float: left;
	width:50% ;
}

.col_droite{
	background-color:white ;
	float : right ; 
	width : calc(50% - 1px) ;
}


/* MENU ---------------------------------------------------------------------------------------*/


ul.menu {
	list-style-type: none;
	margin: 0;
	margin-left:50px;
	padding: 0;
	overflow: hidden;
	background-color: transparent;
}

ul.menu li {float: left;}

ul.menu li a {
	display: inline-block;
	color: #000000;
	color: #ffffff;
	text-align: center;
	padding: 3px 16px;
	text-decoration: none;
	transition: 0.3s;
	font-size: 1.35em;
	margin : 5px ;
	margin-top:0px;
	font-weight :300 ;
	background-color:rgba(0,0,0,0.4);
}

ul.menu li a:hover {color: #E2007A; background-color:rgba(255,255,255,0.4);}

ul.menu li.icon {display: none;}

.picto {
	transition: all 0.5s ;
	-webkit-transition: all 0.5s ;
}

#menu_classic {
	display : block;
}



#header {
	height : 120px ;
	position : relative ;
	
}



@media only screen and (max-width: 766px) {
	.col_gauche , .col_droite {
		float:none;
		width:100%;
	}
	.persoDesc {
		position:relative;
		width : 100% ;
		top:0px;
	}
	#accroche {
		font-size: 2.5em; 
	}
}

@media only screen and (max-width: 550px) {
	
	
	.col_gauche , .col_droite {
		float:none;
		width:100%;
	}
	.persoDesc {
		position:relative;
		width : 100% ;
		top:0px;
	}
	#tablePersos{
	 display:none;
	}
	#QUES_div , #PROB_div , #BIOM_div , #EFFI_div , #GLOS_div , #REVE_div , #QUES_div , #BANK_div , #DOTA_div , #PROG_div , #PRIN_div{
		display:block !important;
	}
	#accroche {
		font-size: 2em; 
	}
	.capture {
		display: block !important;
	}
	h1 {
		font-size : 1.8em;
	}
	h2 {
		font-size : 1.5em;
	}
	h3 {
		font-size : 1.2em;
	}
	.picto {
		width : 40px;
		height : 40px ;
	}
	p {
		font-weight : 300 ;
		padding-left : 50px;
		padding-right:50px;
		font-size : 1em ;
	}
	#div_Persos p{
	font-size:1em;
}
}