@font-face {
  	font-family: 'Hero';
  	src: url('../fonts/Hero.eot?') format('eot'), url('../fonts/Hero.woff') format('woff'), url('../fonts/Hero.ttf') format('truetype');
}

* {
		margin: 0;
		padding: 0;
		border: 0;
		outline: none;
}

html, body, ol, ul, li, h2, h3, h4, h5, h6, p, a, td {
		font-family: 'Hero', sans-serif;
}

/*html {
	height: 100%;
}*/

body {
		height: 100%;
		font-size: 100%;
		color: black;
		/*overflow: hidden;*/
		background: white url(../img/bubbles.jpg) repeat-y left top;
}

img {
			display: block;
			max-width: 100%;
			height: auto;
			border : 0;
}

h1 {
		font-size: 3em;
		font-weight: normal;
		margin-top: 0;
		margin-bottom: 1em;
		text-align: center;
		color: #ff6a0b;
}

h2 {
		font-size: 2.4em;
		font-weight: normal;
		text-align: center;
		margin: 1.3em 0 1em 0;
		color: #254c4c;
}

h3 {
		font-size: 1.4em;
		line-height: 2em;
		font-weight: normal;
		color: #434343;
		margin-top: 1em;
		margin-bottom: 1em;
		text-transform: uppercase;
		text-align: center;
}

h4 {
		font-size: 1.2em;
		font-weight: normal;
		margin: 1.2em 0 0.8em 0;
		margin-bottom: 0.5em;
}

h5 {
		font-size: 1em;
		font-weight: bold;
		clear: left;
		text-align: center;
		padding-top: 2em;
		margin-top: 2em;
}

p {
		font-size: 1em;
		line-height: 100%;
		padding-top: 0.3em;
}

a {
		font-size: 90%;
		color: #264d4d;
}

/************************************/
/*								MENU							*/
/************************************/

#menu li {
	float: left;
	color: #fff;
	/*background: #666;*/
	background: rgba(0,0,0, 0.5);
}
#menu li.active {
	/*background: #666;*/
	background: rgba(0,0,0, 0.5);
	color: #fff;
}
#menu li a {
	text-decoration: none;
	color: #fff;
}
#menu li.active a:hover {
	color: #fff;
}
#menu li:hover {
	color: #666;
	background: #b79c85;
}
#menu li a, #menu li.active a {
	padding: 0.6em 1.2em;
	display: block;
}
#menu li.active a {
	color: #fff;
}
#menu li a:hover {
	color: rgba(0,0,0, 0.5);
}
#menu {
	list-style-type: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin: 0;
}

.choix-langue {
	position: absolute;
	top: 2.2em;
	right: 2em;
}

/************************************/

.pannel {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		overflow: scroll;
}

.s-and-g {
		position: absolute;
		width: 35%;
		max-width: 560px;
		margin-left: 5%;
}

.frise {
		position: absolute;
		width: 35%;
		margin-top: 18em;
		margin-left: 5%;
}

.article {
		width: 45%;
		margin-top: 3em;
		margin-left: 55%;
}

.diaporama {
		margin-bottom: 1em;
}

.diaporama::after {
		content: '';
    display: block;
    clear: both;
}

.diaporama-element {
		float: left;
		width: 16.6666%;
}

#diaporama-show img {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
}

#diaporama-show {
		position: absolute;
		z-index: 1000;
		width: 100%;
		top: 6em;
		display: none;
}

.head {

}

.head-img {
		float: left;
		width: 35%;
		margin: 0 3% 0.5em 0;
}

.head p {
		font-size: 1.1em;
		color: #b79c85;
		padding-top: 2%;
		padding-right: 3%;
}

.more-img {
		float: right;
		margin: 0 7%;
}

/************************************/
/*						WMC Player						*/
/************************************/

#static_container {
		display: none;
}

#wmc-player {
		display: none;
}

.wmc-player-pannel {
		width: 98%;
		margin: 0 auto;
		/*overflow: scroll;*/
}

.player {
		width: 32%;
		min-width: 368px;
		max-width: 500px;
		margin: 0.8em auto;
		padding: 0;
		background-color: black;
		border: 8px solid gray;
		border-radius: 0.4em;
		text-align: center;
	}

#control-pannel {
	background: linear-gradient(#999, #000), #c9c5c9;
	padding: 0.8em 0;
	border-radius: 0.1em;
}

#duration {
	width: 30%;
	min-width: 120px;
	margin: 0.6em auto 0 auto;
	background-color: white;
	padding: 0.2em 0;
	border-radius: 0.4em;
	font-family: 'Courrier, monospace';
	font-size: 90%;
}

/*.wmc-player-button, .wmc-player-button-smaller {
	display: inline-block;
	font-family: 'Courrier, monospace';
	font-size: 80%;
	background: radial-gradient(circle,#fff,#eee);
	border-radius: 10em;
	border: 0 solid rgba(208,208,208,1.000);
	width: 3em;
	height: 3em;
	vertical-align: middle;
}
.wmc-player-button {
	padding: .6em;
	width: 3em;
	height: 3em;
}
.wmc-player-button-smaller {
	padding: .4em;
	width: 2em;
	height: 2em;
}
.wmc-player-button:hover, .wmc-player-button-smaller:hover {
	background: radial-gradient(circle,#f5f5f5, #b9b9b9);
}*/

#chainButton, .wmc-player-button, .wmc-player-button-smaller {
	display: inline-block;
	font-family: 'Courrier, monospace';
	font-size: 0.8rem;
	width: 8%;
	vertical-align: middle;
	opacity: 0.9;
	border: 0px solid gray;
	border-radius: 0.2rem;
	background-color: white;
}

.wmc-player-button, .wmc-player-button-smaller {
	padding: 0.5em 0;
}

#chainButton {
	padding: 0.4em 0;
}

.wmc-player-playlist {
	list-style-position: inside;
	background-color: #efefef;
	margin: 0;
	padding: 0.4em 0;
}
.wmc-player-playlist li {
	font-size: 90%;
	text-align: left;
	cursor: pointer;
	padding: 0.1em 0 0.1em 5%;
}

ul.audio-setup {
	margin-top: 1em;
	margin-left: 20%;
}

ul.audio-setup li {
	font-size: 90%;
}

.pro-infos {
	width: 80%;
	margin-left: 10%;
}

.pro-list {
	margin-bottom: 1em;
	margin-left: 10%;
	list-style-type: none;
}

.pro-list li {
	font-size: 90%;
	padding-left: 5%;
}

#reponse h2 {
	margin: 1.6em 0;
	text-align: center;
}

#reponse p {
	text-align: center;
}

/************************************/
/*							PHOTOS							*/
/************************************/

#mask {
		position: fixed;
		z-index: 2010;
		width: 100%;
		height: 100%;
		min-height: 100vh;
		top:0;
		left:0;
		background-color: black;
		opacity: 0.7;
}

#lightbox {
		position: relative;
		z-index: 2010;
		display: none;
		width: 100%;
		height: 100%;
		overflow: hidden;
		top: 2.7em;
		cursor: pointer;
}

#loader {
		position: absolute;
		z-index: 2020;
		top: 40%;
		left: 35%;
		width: 30%;
}

.ajax-loader {
		width: 100%;
}

#img-container {
		position: fixed;
	  top: 0;
	  left: 0;
		z-index: 2100;
		width: 100%;
		top: 3.1em;
		left: 0;
}

.diapo {
		/*height: 100%;*/
}

.thumbs-wrapper {
		width: 100%;
		/*max-width: 1176px;*/
		margin: 3em auto;
		display: flex;
		/*flex-direction: row;
		flex-wrap: wrap;*/
		flex-flow: row wrap;
		justify-content: center;
}

.thumbs-box-element {
		cursor: pointer;
		width: 25%;
		min-width: 180px;
		max-width: 300px;
}

#caption {
		text-align: center;
		margin: 1.1em 0;
		font-size: 1.2rem;
}

.caption-text {

}

#prevImg, #nextImg {
		color: white;
		cursor: pointer;
}

.caption-text, #prevImg, #nextImg {
		color: white;
		background-color: black;
		opacity: 0.8;
		padding: 1em;
}

.credit-photo {
		clear: both;
		float: none;
		width: 100%;
		margin-top: 2em;
		text-align: right;
}

.credit-photo p {
		font-size: 0.9rem;
		padding-right: 1%;
}

/************************************/
/*							Videos							*/
/************************************/

.video-wrapper {
	width: 100%;
	margin: 0 auto;
}

.video-wrapper img:hover {
	cursor: hand;
}

/************************************/
/*							Divers							*/
/************************************/

.espace-pro, .contact {
		width: 75%;
		max-width: 900px;
		margin: 2em auto;
}

/*.espace-pro p, .espace-pro li {
		color: white;
}*/

.links-table {
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		border: 1px solid #264d4d;
}

ul.pro-list {
		margin-top: 0.4rem;
		margin-left: 1%;
		list-style-position: inside;
}

ul.liens {
		width: 96%;
		margin-left: 2%;
		list-style-position: inside;
}

ul.liens li {
		margin-top: 0.4rem;
}

.downloads {
		margin-top: 0.4rem;
}

.downloads a {
		color: steelblue;
}

.caution {
		text-align: center;
		font-size: 0.9em;
}

.plus {
		text-align: right;
		margin-top: 2rem;
}

/************************************/
/*							Medias							*/
/************************************/

/* Phone */
@media (max-width: 767.98px) {
		#menu {
				display: none;
		}
		.pannel {
				width: 100%;
		}
		.s-and-g {
				position: static;
				width: 90%;
				margin-top: 1em;
				margin-left: 5%;
		}
		.frise {
				position: static;
				width: 90%;
				margin: 1em auto;
		}
		.article {
				width: 96%;
				margin-top: 3em;
				margin-left: 2%;
		}
		#player_toggle {
				display: none;
		}
		.wmc-player-pannel {
    		width: 100%;
    		padding: 0;
    }
		.player {
				width: 90%;
				min-width: none;
				padding: 0;
		}
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199.98px) {
		
}

/* Desktop */
@media (min-width: 1200px) {}