/***	 Styles spécifiques au projet  	***/

@media screen {

body, html, * {
	margin:0;
	padding:0;
}

body{
	background-color: #e8dfce;
	font-size:100%;
}

.row, .columns{
  max-width: 100%;/*Dans Fondation il est à max-width: 62.5em; Permet de redimensionner en 100% largeur */
  padding:0;
  margin:0;
}

header{
	background-color:#E8DFCE;
	margin:0;
	padding:0;
	width:100%;
	-webkit-box-shadow:0 0 7px rgba(0, 0, 0, 0.4);
		-moz-box-shadow:0 0 7px rgba(0, 0, 0, 0.4);
			box-shadow:0 0 7px rgba(0, 0, 0, 0.4);
}

h1 {
	font-family: 'civc_titleregular';
	font-size:2.375em; /*38px*/
	color:#FFF;
	text-align:center;
	-webkit-text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
		-moz-text-shadow: 3px 3px 3px rgba(0,0,0,0.4);	
			text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}

.cadreLogo{
	background-image:url(../img/logo-civc.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	background-size:contain;
}

.bienvenue {
	font-family: 'civc_titleregular';
	font-size:1.6em; /*38px*/
	color:#777;
	text-align:center;
	margin:2% 0 2% 10%;
	width:100%;
}


.logo{
	width:6%;
	height:auto;
	margin-left:6%;
	min-width:50px;
}


.intro1{
	background-image:url(../img/selecteur-01.jpg);
}

.intro2{
	background-color:#C7AF81;
}

.question1{
	background-image:url(../img/selecteur-03.jpg);
}

.question2{
	background-image:url(../img/selecteur-11.jpg);
}

.question3{
	background-image:url(../img/selecteur-13.jpg);
}
.question4{
	background-image:url(../img/selecteur-09.jpg);
}
.question5{
	background-image:url(../img/selecteur-15.jpg);
}
.question6{
	background-image:url(../img/selecteur-07.jpg);
}
.question7{
	background-image:url(../img/selecteur-10.jpg);
}
.question8{
	background-image:url(../img/selecteur-08.jpg);
}
.question9{
	background-image:url(../img/selecteur-05.jpg);
}
.question10{
	background-image:url(../img/selecteur-16.jpg);
}
.question11{
	background-image:url(../img/selecteur-04.jpg);
}

.question12{
	background-image:url(../img/selecteur-06.jpg);
}

.resultat1{
	background-color:#C7AF81;
}


.fondIntro{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center top;
	padding:10%;
}

.fond{
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center top;
	padding:10%;
}

blocContenu{
  width:100%;
  vertical-align:middle;
  display:inline-block;
  line-height:normal;
  padding:0;
  margin:0 auto;
}

.txt1{
	font-family: 'civc_titleregular';
	font-size:3.750em;/*60px*/
	color:#FFF;
	text-align:center;
	line-height:1em;
	-webkit-text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
		-moz-text-shadow: 3px 3px 3px rgba(0,0,0,0.4);	
			text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}

.txt2{
	font-family: 'civc_titleregular';
	font-size:2.375em; /*38px*/
	color:#FFF;
	text-align:center;
	line-height:1em;
	-webkit-text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
		-moz-text-shadow: 3px 3px 3px rgba(0,0,0,0.4);	
			text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}


.txtQuestion{
	font-family: 'civc_sansregular';
	font-size:2.375em; /*38px*/
	color:#FFF;
	text-align:center;
	padding-bottom:0;
	line-height:1.3em;
	margin : 3% auto;
	width : 70%;
	-webkit-text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
		-moz-text-shadow: 3px 3px 3px rgba(0,0,0,0.4);	
			text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}


.txtAccroche{
	font-family: 'civc_sansregular';
	font-size:1.8em; 
	color:#FFF;
	text-align:center;
	padding-bottom:0;
	line-height:1.3em;
	margin : 2% auto;
	width : 80%;
	-webkit-text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
		-moz-text-shadow: 3px 3px 3px rgba(0,0,0,0.4);	
			text-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}

.txtAccroche a{
	color:#FFF;
	text-decoration:underline;
	-webkit-transition: all 0.5s ease-out;
		-moz-transition: all 0.5s ease-out;
			-ms-transition: all 0.5s ease-out;
				-o-transition: all 0.5s ease-out;
}
.txtAccroche a:hover{
	background-color:#C7AF81;
	text-decoration:none;
}




.btRep{
	background-image:url(../img/fond-bt-rep.png);
	background-repeat:no-repeat;
	background-size:cover;
	width:64px;
	height:64px;	
	color:#FFF;
	text-align:center;
	font-size:1.5em;/*24px*/
	font-family: 'civc_sansregular';
	line-height:64px;
	margin:0 auto;
	padding:0;
}


.btRes{
	background-image:url(../img/fond-bt-res.png);
	background-repeat:no-repeat;
	background-size:cover;
	width:118px;
	height:103px;	
	color:#FFF;
	margin : 0 auto;
	display : block;
}

.btRep a{
	color : white;
	text-decoration : none;
}

.parcours a{
	font-family: 'civc_titleregular';
	font-size:1.473684210526316em; /*56/38 px*/
	color : white;
}


.pictoVigne{
	max-width:118px;/* Indiquer ici la taille réélle de l'image source*/
	min-width:50px;
	width:10%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}



.imgParcoursSuivant{
	max-width:373px;/* Indiquer ici la taille réélle de l'image source*/
	min-width:180px;
	width:30%;
	height:auto;
	margin:0 auto;
	margin-right:auto;
	text-align:center;
}


.pictoVigne img, .imgParcoursSuivant img{
	max-width:100%;
	height:auto;
}



/************************************ FOOTER ********************************************/


/* Pied de page */

footer{
	background-color:#232323;
	max-width:100%;
	margin:0;
	padding:3%;
}


.planSite{
	padding-bottom:20px;
	margin:5% auto;
}

.planSite li{
	color:#FFF;
	font-family: 'civc_sansregular';
	font-size:0.9em;
	list-style-type:none;
	padding:0;
	margin:0;
	text-align:center;
}

.planSite li:nth-child(1){
	color:#c8b082;
}

.planSite li a {
	color:#ccc;
}

.lienPiedPage{
	text-align: center;
	min-height:60px;
	padding-top:20px;
	margin:0 20px;
	line-height:1.2em;
}


.lienPiedPage li{
	/* faire rentrer la puce à l'intérieur des li*/
	/*list-style-position: inside; */
	/*faire passer les li les un à la suite des autres sur la meme ligne, les puces sont supprimer automatiquement*/
	display: inline;
	color:#FFF;
	font-family: 'civc_sansregular';
	font-size:0.8em;
}

.lienPiedPage li a{
	color:#ccc;
}

.planSite li a:hover, .lienPiedPage li a:hover{
	color:#fff;

}

.lienPiedPage li:after{
	/*pour ajouter un séparateur après chaque li*/
	content: "|";
}

.lienPiedPage li:last-child:after{
	/*last child fonctionne depuis ie8*/
	/* pour supprimer le separateur sur le dernier li*/
	content: "";
}

.logo-foot{
	display:none;	
} 


.imgLogoComiteFooter{
	max-width:91px;/* Indiquer ici la taille réélle de l'image source*/
	width:10%;/*208/1400 et x4*/
	min-width:70px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.imgLogoComiteFooter img{
	max-width:100%;
	height:auto;
}


/*Menu de langues*/


.colonneMenuLangue{
	margin:0;
	padding:0;
	height:100%;	
}


.button{
	height:100%;
	width:100%;
	background-color:rgba(0,0,0,0);
	margin:0;
	font-family: 'civc_titleregular';
	font-size:1em; /*38px*/
	color:#777;
	text-align:right;
	border:0;
	outline-style:none;
}

button:hover, button:focus, .button:hover, .button:focus {
    background-color:rgba(0,0,0,0);
	color:#333;
	border:0;
}

.dropdown.button:after, button.dropdown:after{
	border-color:#777 transparent transparent transparent;
}


.dropdown:hover.button:after, button:hover.dropdown:after{
	border-color:#333 transparent transparent transparent;
}

.f-dropdown{
	max-width:99%;
	background-color:#33333;
	border:#333 solid 1px;
}

.f-dropdown li{
     background-color:#333;
     color: #aaa;
}
 
.f-dropdown li:hover, .f-dropdown li:focus {
     background-color: #393939;
}

.f-dropdown li a{
	 font-family: 'open_sansregular';
	 color: #aaa;
}

.f-dropdown li:nth-child(1) a{
	 color: #fff;
}

.f-dropdown li:hover a, .f-dropdown li:focus a {
      color: #fff;
}
 

.f-dropdown:before{
	left:90%;
	border-color: transparent transparent #333 transparent;
}

.f-dropdown:after {
    left: 90%;
	border-color: transparent transparent #333 transparent;
}

/*
.dropdown.button span.txtLangue1{
	display:block;
}*/
.dropdown.button span.txtLangue2{
	display:none;
	text-align:right;
}


}




/********************************************************************* RESPONSIVE ********************************************************/



/*************** TABLETTEES***************/

/* Samsung galaxy Tabs 2 et 3 10' Format paysage */ 
@media screen and (max-width:1280px) and (orientation:landscape){
	body {
		font-size:91%;/*1024/1400*/
	}
	
}


/* Samsung galaxy Tabs 2 et 3 7' +  IPAD 3/4/Air / Retina ou Non Format paysage */ 
@media screen and (max-width:1024px){

	body {
		font-size:73%;/*1024/1400*/
	}
	
	.dropdown.button, button.dropdown{
		padding-right:2.8rem;
	}
}


/* Samsung galaxy Tabs 2 et 3 10' Format portrait*/ 
@media screen and (max-width:800px){
	body {
		font-size:60%;/*1024/1400*/
	}
	.planSite li{
		font-size:0.8em;
	}

	.button{
		text-align:left;
	}
}


/* IPAD 3/4/Air / Retina ou Non Format portrait*/ 
@media screen and (max-width:768px){
	body {
		font-size:60%;/*768/1400*/
	}
	
	.dropdown.button:after, button.dropdown:after{
		right:0.5rem;
	}
	
	/*
	.dropdown.button span.txtLangue1{
		display:none;
	}
	.dropdown.button span.txtLangue2{
		display:block;
	}
	*/
	.dropdown.button, button.dropdown{
		padding-right:2rem;
	}
	
	.f-dropdown{
		max-width:99%;
	}
	.button{
		text-align:right;
	}
	
	
}


/* Samsung galaxy Tabs 2 et 3 7' Format portrait*/ 
@media screen and (max-width:600px){
	body {
		font-size:60%;/*600/1400*/
	}
	
	
	
}


/*************** SMARTPHONES***************/


/* Samsung Galaxy S3 / S4 / S4 mini / S5 Format paysage*/ 
@media screen and (max-width:640px){
	body {
		font-size:55%;/*640/1400* =45%*/
	}
	
	
	.bienvenue {
		margin-left:10%;
		width:90%;
	}
	
	.button{
		padding:1.5% 0;
	}
	
	.f-dropdown:before{
		display:none;
	}
	
	.f-dropdown:after {
		display:none;
	}
	
	
}
/* Iphone 5 Format paysage*/ 
@media screen and (max-width:568px) and (orientation:landscape){
	body {
		font-size:55%;/*568/1400 = 40%*/
	}
	
}

/* Iphone 4 Format paysage*/ 
@media screen and (max-width:480px){
	body {
		font-size:55%;/*480/1400 = 34%*/
	}	

	.bienvenue {
		font-size:1.8em; /*38px*/
	}
	
}

@media screen and (max-width:420px){
	body {
		font-size:55%;/*480/1400 = 34%*/
	}	
	.bienvenue {
		font-size:1.4em; /*38px*/
		padding:2% 0 2% 0;
		margin-left:15%;
		width:85%;
	}

	
	
}


/* Samsung Galaxy S3 / S4 / S4 mini / S5 Format portrait*/ 
@media screen and (max-width:360px) and (orientation:portrait){
	body {
		font-size:55%;/*360/1400 = 26%*/
	}
	
	.bienvenue {
		font-size:1.2em; /*38px*/
		margin-left:20%;
		width:80%;
	}
	
}

/* Iphone 4/5 Format Format portrait*/ 
@media screen and (max-width:320px) and (orientation:portrait){
	body {
		font-size:55%;/*320/1400 = 23%*/
	}
	
}