/**
* TOOLS.................Outils CSS g�n�riques faible priorit�
* GENERIC...............balises g�n�riques et optimisations
* HEADER................Classe header
*/





/*------------------------------------*\
	#TOOLS
\*------------------------------------*/
.bg-grey		{ background-color: #F2F2F2; }
.bg-blue		{ background-color: #74B6E2; }
.bg-bluest		{ background-color: #0F6DA1; }
.clr-beige 		{ color: #E4C3A8; }
.clr-blue 		{ color: #74B6E2; }
.clr-bluest 	{ color: #0F6DA1; }
.clr-white		{ color: 			#FFF; }
.mart			{ margin-top: 		.9375rem; }
.marr			{ margin-right: 	.9375rem; }
.marb			{ margin-bottom: 	.9375rem; }
.marl			{ margin-left: 		.9375rem; }
.pat			{ padding-top: 		.9375rem; }
.par			{ padding-right: 	.9375rem; }
.pab			{ padding-bottom: 	.9375rem; }
.pal			{ padding-left: 	.9375rem; }
.ftsize8r		{ font-size: 		.8rem; }
.ofhidden		{ overflow: 		hidden; }
.uppercase		{ text-transform: 	uppercase; }
.bold			{ font-weight: 		600; }






/*------------------------------------*\
	#GENERIC
\*------------------------------------*/
body,
h1, h2, h3, h4, h5, h6 {
	font-family: 'Titillium Web', sans-serif;
	text-rendering: optimizeLegibility;
}

h1 {
	font-size: 34px;
}

a {
	color: inherit;
}

a:hover {
	color: inherit;
	text-decoration: underline;
}

[class*="ftsize"] > * {
	font-size: inherit;
}





/*------------------------------------*\
	#HEADER
\*------------------------------------*/
.header__video {
	overflow: hidden;
	max-height: 155px;
	border-radius: 5px;
}

.header__video img {
	position: absolute;
	top: 0;
	right: 15px;
}

.header__video video {
	margin-top: -58px;
	width: 100%;
}
nav {
	border-bottom: 4px solid #E4C3A8;
}

nav li.visited:not(.current) a {
	color: black;
}

nav ul {
	margin: 0;
}

nav ul li {
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
    font-size: 1.2rem;
}

nav ul li svg{
	fill: #74B6E2;
}

nav ul li.visited svg{
	fill: black;
}



nav ul li.current a {
	color: red;
}

nav ul li.current svg,
nav ul li:hover svg{
	fill: #0F6DA1;
}

@media screen and (max-width: 39.9375em) {
	nav {
		border-top: 4px solid #E4C3A8;
		margin-top: 10px;
	}

	nav div.show-for-small-only {
		cursor: pointer;
	}

	nav ul {
		display: none;
	}

	nav > * {
		padding-left: 10px;
	}

	nav ul li {
		display: block;
		max-width: none;
		margin: 10px 0;
	}
}





/*------------------------------------*\
	#MAIN
\*------------------------------------*/
main {
	min-height: 60%;
}

.video-player {
    height: 250px;
	overflow: hidden;
	border: 3px solid #0F6DA1;
	/*cursor: pointer;*/
}

.video-player--img {
	height: 100%;
	/*
	background-image: url("/img/play.png"), url("/img/vlcsnap-2015-12-04-10h31m08s699.png");
	background-size: auto, cover;
    background-repeat: no-repeat;
    background-position: center;
	*/
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.video-player--img.accueil {
	background-image: url("/img/accueil.jpg");
}
.video-player--img.installateur {
	background-image: url("/img/installateur.jpg");
}
.video-player--img.videos {
	background-image: url("/img/videos.jpg");
	cursor: pointer;
}
.video-player--img.basculeur {
	background-image: url("/img/basculeur.jpg");
}
.video-player--img.entretien {
	background-image: url("/img/entretien.jpg");
}
.video-player--img.joindre {
	background-image: url("/img/nous joindre.jpg");
}
.video-player--img.epandage {
	background-image: url("/img/Site Experimental.jpg");
	background-position: top;
}
.video-player--img > * {
    position: relative;
    top: 194px;
    display: inline-block;
    padding: 5px 10px;
}

.video-player--video {
	display: none;
    height: 100%;
    text-align: center;
    background: grey;
}

.video-player--video video {
	height: 100%;
}

article strong {
	color: #0F6DA1;
}

article img {
	border: 3px solid #FFF;
	margin: 10px;
}

article video {
	max-width: 100%;
}

.formulaire_contact input[type=submit] {
	background-color: #0F6DA1;
	border: none;
}

@media screen and (max-width: 39.9375em) {
	article img {
		margin: none;
		width: 100%;
		float: none;
	}
}



/*------------------------------------*\
	#FOOTER
\*------------------------------------*/
footer {
	background-image: url("/img/bulles_footer.png");
	background-repeat: no-repeat;
	background-position: right bottom;
}