@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;
}
.tribute-desktop {
	display: block;
}

.tribute-phone {
	display: none;
}

.sg_img {
	width: 90%;
	max-width: 560px;
	margin-left: 5%;
}

.frise {
	width: 90%;
	max-width: 560px;
	margin-top: -11vw;
	margin-left: 5%;
}

.article {
	width: 50%;
	margin-top: 3em;
}

.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 {
	display: flex;
	flex-direction: row;
	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%;
}

#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%;
		}
		.tribute-desktop {
			display: none;
		}

		.tribute-phone {
			display: block;
		}
		.sg_img {
			width: 90%;
			max-width: 690px;
			margin-top: 1em;
			margin-left: 5%;
		}
		.frise {
			width: 90%;
			max-width: 690px;
			margin-top: -100px;
			margin-left: 5%;
		}
		.article {
			width: 80%;
			padding: 1em;
			margin: 1.5em auto 0 auto;
			text-align: justify;
		}
		.player {
			width: 98%;
			max-width: 766px;
			margin: 0;
			padding: 0;
		}
		#player_toggle {
			display: none;
		}
		.wmc-player-pannel {
			display: block;
    		width: 100%;
    		padding: 0;
    	}
		.player {
			width: 80%;
			min-width: none;
			padding: 0;
		}
		.espace-pro {
			width: 80%;
			max-width: 767.98px;
			margin: 2em auto;
	}
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.sg_img {
		max-width: 560px;
		margin: 0 auto;
	}
	.frise {
		max-width: 560px;
	}
	.article {
		width: 80%;
		padding: 1em;
		max-width: 500px;
		margin-top: 1em;
		margin-right: auto;
		margin-left: auto;
		text-align: justify;
	}
}

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