/* couleurs
	vert : #7ca17f
	vert 2 : #5a885d (+foncé)
	vert 3 : #d1dcd1 (+clair)
	vert 4 : #3d6d40 (++foncé)
	
	gris : #908b8b
	gris 2 : #c3c0c0
	gris 3 : #eae9e9
*/

/* couleurs
	vert : #276c88
	vert 2 : #145872 (+foncé)
	vert 3 : #67A0B6 (+clair)
	vert 4 : #06435A (++foncé)
	
	gris : #5d7576
	gris 2 : #c3c0c0
	gris 3 : #7b8c8d
*/

/*header*/
#header{
	min-width: 900px;
	border-bottom: 3px solid #276c88;
}
.logo{
	margin: 10px 2% 10px 0;
	width: 12%;
}
.titreSite{
	color: #145872;
	font-weight: normal;
	font-size: 2.2em;
	margin: 5px auto;
}
.liMenu{
	margin: 0 2%;
}
.lienMenu{
	display: block;
	padding: 0 0 3px 0;
	color: #5d7576;
	font-size: 1em;
	-webkit-transition-property: color;
	-webkit-transition-duration: .3s;
	-webkit-transition-timing-function: ease-out;
	transition-property:color;
	transition-duration: .3s;
	transition-timing-function: ease-out;
}
.lienMenu:hover,.lienMenu.actif{
	color: #276c88;
}
.lienMenu:hover:after,.lienMenu.actif:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 45%;
	width: 0;
	height: 0;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-bottom: 6px solid #276c88;
}
.nav-langage{
	position: absolute;
	top: 0.5%;
	right: 2%;
}
.secondNav{
	position: absolute;
	top: 100%;
	left: -3%;
	width: 110%;
	background: #fff;
	z-index: 8;
	max-height: 0;
	border: 1px solid #fff;
	border-radius: 2px;
	overflow: hidden;
	cursor: pointer;
	-webkit-transition-property: max-height,border-color;
	-webkit-transition-duration: .3s;
	-webkit-transition-timing-function: ease-out;
	transition-property:max-height,border-color;
	transition-duration: .3s;
	transition-timing-function: ease-out;
}
.drapoHeader{
	border: 1px solid #276c88;
	border-radius: 2px;
	padding: 0px 15px 0 5px;
}
.nav-langage:after{
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	top: 13px;
	right: 5%;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid #276c88;
}
.nav-langage:hover .secondNav{
	max-height: 800px;
	border-color: #276c88;
}
.lienFbHeader{
	position: absolute;
	right: 10%;
	top: 1%;
	color: #145872;
}

/*slider*/
.zoneTexteDiapo{
	position: absolute;
	right: 3%;
	top: 0;
	z-index: 15;
	width: 21%;
	background: rgba(255,255,255,0.8);
	height : 494px;
}
.titreDiapo{
	margin: 15px 1%;
	font-size: 1.3em;
	color: #145872;
}
.lienDiapo{
	display: block;
	margin: 0 1%;
	color: #5d7576;
}
.listControlDiapo{
	position: absolute;
	z-index: 5;
	bottom: 0;
	left: 0;
	background: rgba(255,255,255,0.8);
	padding: 3px 5px;
	border-radius: 0 5px 0 0;
}
.controlDiapo{
	display: block;
	font-size: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #5d7576;
	margin: 0 10px;
}
.controlDiapo.current{
	background: #276c88;
}

/*footer*/
#footer{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: #276c88;
	color: #fff;
	padding: 5px 0;
}
.lienFooter{
	color: #fff;
}
.vcardFooter{
	font-style: normal;
	margin: 20px 0;
}
.lienContactFooter{
	margin: 0 0 0 15px;
}
.infoFooter{
	font-size: 0.8em;
}
.liPartFooter{
	width: 7%;
	margin: 5px 0.7%;
}
.titreFooter{
	font-size: 1.2em;
	margin: 8px 0;
}

/*aside*/
.zonePartenaire{
	width: 19%;
	margin: 15px 0 10px 1%;
	background: #c3c0c0;
	min-height: 150px;
}
.titreAside{
	color: #fff;
	background: #67A0B6;
	padding: 10px 0;
	margin: 0;
	font-weight: normal;
	font-size: 1.1em;
}
.titreArticle{
	margin: 0;
}
.liPartenaire{
	margin: 25px auto;
	padding: 25px 0;
	width: 70%;
}
.lienPartenaire,.liPartenaire{
	color: #5d7576;
}

/*page accueil*/
.sliderAccueil{
	background: url(../images/artzainen-lasterkaldia-chapelle.JPG) center center no-repeat;
	background-size: cover;
	height: 0;
	padding: 0 0 25% 0;
}
.videoAccueil{
	position: absolute;
	top: 0; left: 5%;
	border: none;
	width: 45%;
	height: 100%;
}
.nextCourse{
	color: #276c88;
}
.titreNext{
	font-size: 1.4em;
	margin: 15px 20px 15px 0;
	font-weight: normal;
}
.blocDecompte,.lienInscriNext,.blocDecompte2{
	background: #c3c0c0;
	color: #fff;
	border-radius:3px;
	width: 50px;
	height: 40px;
	padding: 0.5% 0;
	font-size: 1.3em;
	margin: 15px 10px;
}
.blocDecompte2{
	width: auto;
	line-height: 40px;
	padding: .5% 1em;
	margin-left: 0;
	border-radius: 0 3px 3px 0;
}
.unitNext,.unitNext2{
	display: block;
	font-size: 0.8em;
	color: #06435A;
}
.unitNext2{
	display: inline;
}
.lienInscriNext,.boutonSubmit{
	background: #276c88;
	width: auto;
	padding: 0.5% 30px;
	line-height: 40px;
	font-size: 1em;
}
.lienMultiCourse{
	margin-right: 0;
	border-radius: 3px 0 0 3px;
	padding: 0.5% 20px;
}
.separNext{
	background: #276c88;
	height: 1px;
	width: 45%;
	margin: 0 auto;
	border: none;
}
.contenuPage{
	width: 78%;
	padding: 0 1%;
	margin: 15px 0 0 0;
	color: #5d7576;
	font-size: 0.9em;
}
.imgAccueil{
	width: 40%;
	max-width: 100%;
	height: auto;
}
.pInfo{
	padding: 1em;
	color: #145872;
	border: 1px solid #c3c0c0;
	box-sizing: border-box;
	width: 58%;
	margin: 0 0 0 42%;
}
.homeRaceList{
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/*inscription*/
.labelInscri{
	width: 23%;
}
.champInscri,.champContact{
	width: 71%;
	border: none;
	height: 18px;
	margin: 5px 0;
	background: #7b8c8d;
	padding: 1%;
}
.radioInscri{
	margin-top: 7px;
	margin-bottom: 7px;
}
#alertForm{
	margin: 15px 0;
	font-weight: bold;
	color: #f00;
}

/*fiche technique*/
.marginTopTitre{
	margin-top: 50px;
}
.infoFicheTech{
	width: 18.5%;
	margin: 45px 1.5% 0 0
}
.iFrameCarte{
	width: 80%;
	height: 800px;
	border: none;
}

/*photos*/
.liAlbum{
	border: 1px solid #67A0B6;
	margin: 10px 2%;
}
.legendeAlbum,.legendeVignette{
	display: block;
	background: #67A0B6;
	padding: 5px 3%;
	color: #fff;
}
.lBox{
	display: block;
	padding: 2%;
	background: #7b8c8d;
}
.partageSocialAlbum{
	position: absolute;
	right: 0;
	top: 3px;
}
.lienPartage{
	color: #145872;
}
.lienPartage:hover{
	color: #276c88;
}

 /* règlement*/
 .titreReg{
	 font-size: 1.1em;
	 margin: 25px 0 0 0;
 }
 .titreReg + p{
	 margin-top: 0; 
 }
 .lienVisible{
	 color: #276c88;
	 text-decoration: underline;
 }
 
 /*vidéos*/
.videoBloc{
	overflow: hidden;
	padding: 10px 0 57% 0;
	height: 0;
}
.videoBloc iframe,.videoBloc object,.videoBloc enbed{
	position: absolute;
	width: 100%;
	height: 100%;
}

/*contact*/
.gMap-container{
	width: 100%;
	height: 0;
	padding-bottom: 30%;
	overflow: hidden;
}
.gMap{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.vcardContact{
	width: 30%;
}
#formuContact{
	width: 60%;
	padding: 0 5%;
	height: 350px;
}
.labelContact{
	width: 20%;
}
.champContact{
	width: 78%;
	margin: 5px 0;
	padding: 1%;
}
.textAContact{
	height: 95px;
}
.boutonSubmit{
	border: none;
	cursor: pointer;
	color: #fff;
	line-height: 25px;
}

/*inscrits*/
.listeInscrits{
	width: 80%;
	border-collapse: collapse;
	border: 2px solid #276c88;
}
.listeInscrits th{
	background: #276c88;
	padding: 5px 0;
	color: #fff;
}
.listeInscrits th,.listeInscrits td{
	width: 25%;
	border: 1px solid;
}
.nonConfirmedRunner{
	background: #276c88;
	color: #fff;
}
.tableLegend{
	margin: 15px 10px 15px 0;
	width: 35px;
	height: 20px;
	border: 1px solid #276c88;
}

/* responsive */
@media only screen and (max-width: 970px){
	.lienFbHeader,.nav-langage{
		display: none;
	}
	#header,.zoneCentre,.main{
		min-width: 0;
	}
	.logo{
		display: block;
		margin: 10px auto;
		width: 45%;
	}
	.titreSite{
		width: 60%;
		font-size:0;
		margin: 0 10% 0 20%;
		display: inline-block;
		vertical-align: middle;
	}
	.liMenu,.liMenu.mobileOnly{
		display: block;
		margin: 1.5% 0;
	}
	.lienMenu{
		display: inline-block;
		position: relative;
		font-size: 1.3em;
		padding: 0;
	}
	.lienMenu:hover:after,.lienMenu.actif:after{
		bottom: 8px;
		left: -10px;
		border-left: 6px solid #276c88;
		border-right: none;
		border-top: 3px solid transparent;
		border-bottom: 3px solid transparent;
	}
	.main-menu{
		overflow: hidden;
		max-height: 0;
		-webkit-transition-property: max-height;
		-webkit-transition-duration: .3s;
		-webkit-transition-timing-function: ease-out;
		transition-property:max-height;
		transition-duration: .3s;
		transition-timing-function: ease-out;
	}
	.main-menu.open{
		max-height: 800px;
	}
	.menuButton{
		display: inline-block;
		vertical-align: middle;
		width: 5%;
		margin: 0 2.5%;
		color: #276C88;
		font-size: 2em;
	}
	.sliderAccueil{
		padding: 0 0 32% 0;
	}
	.videoAccueil{
		left: 2.5%;
		width: 55%;
	}
	.main{
		width: 95%;
	}
	.contenuPage{
		padding: 0;
		width: 100%;
	}
	.zonePartenaire{
		width: 100%;
		margin: 15px 0;
	}
	.liPartenaire{
		margin: 10px auto;
	}
	.titreNext{
		width: 100%;
		margin: 15px 0;
		text-align: center;
	}
	.blocDecompte{
		margin: 5px;
	}
	.homeRaceList{
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.homeRaceItem{
		width: 49%;
	}
	.lienMultiCourse,.blocDecompte2{
		width: 50%;
		margin: 10px 0;
		padding: 0.5% 0;
	}
	.liPartFooter{
		width: 15%;
		margin: 5px 2%;
	}
	.infoFicheTech{
		margin: 5px 0 0 0;
	}
	.iFrameCarte{
		margin: 0 0 25px 0;
	}
	.liAlbum{
		box-sizing: border-box;
		width: 32%;
		margin: 10px 2% 10px 0;
	}
	.liAlbum:nth-child(3n){
		margin: 10px 0;
	}
	.vcardContact,#formuContact,.iFrameCarte,.infoFicheTech{
		width: 100%;
	}
	.vcardContact{
		text-align: center;
		margin: 15px 0;
	}
	#formuContact{
		padding: 0;
		height: auto;
	}
	.listeInscrits{
		width: 100%;
		box-sizing: border-box;
	}
	.listeInscrits th,.listeInscrits td{
		width: 33%;
	}
}
@media only screen and (max-width: 970px){
	.homeRaceItem{
		width: 100%;
	}
}
@media only screen and (max-width: 550px){
	.titreSite{
		width: 50%;
		margin: 0 10% 0 25%;
	}
	.menuButton{
		width: 10%;
		text-align: right;
	}
	.lienMultiCourse,.blocDecompte2{
		width: 50%;
		margin: 10px 0;
		padding: 0.5% 0;
		font-size: 0.9em;
	}
	.blocDecompte2{
		font-size: 1.1em;
	}
	.liPartFooter{
		width: 25%;
	}
	.pInfo{
		clear: both;
		margin: 10px 0;
	}
	.imgAccueil{
		width: 30%;
	}
	.titreAccueil{
		float: right;
		width: 65%;
	}
	.labelInscri,.champInscri,.champContact,.pInfo{
		width: 100%;
	}
	.champInscri,.champContact{
		box-sizing: border-box;
		margin: 0 0 10px 0;
		height: auto;
		font-size: 1.2em;
	}
	.radioInscri{
		margin-top: 0;
		margin-bottom: 10px;
	}
	.liAlbum,.liAlbum:nth-child(3n){
		width: 48%;
		margin: 10px 2% 10px 0;
	}
	.liAlbum:nth-child(2n){
		margin: 10px 0;
	}
	.textAContact{
		height: 195px;
	}
}