/* DESIGNED BY Nicolas Balaine / Damien Sujkowski / Maxime Vautier */


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* typography
-------------------------------------------------------------- */

@font-face{ 
  font-family: 'ManifontGrotesk';
  font-weight: normal;
  font-style: normal;
  src: url('webfont/ManifontGroteskBook-webfonts/ManifontGroteskBook-webfont.eot');
  src: url('webfont/ManifontGroteskBook-webfonts/ManifontGroteskBook-webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont/ManifontGroteskBook-webfonts/ManifontGroteskBook-webfont.ttf') format('truetype'),
       url('webfont/ManifontGroteskBook-webfonts/ManifontGroteskBook-webfont.svg#webfont') format('svg');
}

@font-face{ 
  font-family: 'ManifontGrotesk';
  font-weight: bold;
  font-style: italic;
  src: url('webfont/ManifontGroteskBoldItalic-webfonts/ManifontGroteskBoldItalic-webfont.eot');
  src: url('webfont/ManifontGroteskBoldItalic-webfonts/ManifontGroteskBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont/ManifontGroteskBoldItalic-webfonts/ManifontGroteskBoldItalic-webfont.ttf') format('truetype'),
       url('webfont/ManifontGroteskBoldItalic-webfonts/ManifontGroteskBoldItalic-webfont.svg#webfont') format('svg');
}

@font-face{ 
  font-family: 'ManifontGrotesk';
  font-weight: bold;
  font-style: normal;
  src: url('webfont/ManifontGroteskBold-webfonts/ManifontGroteskBold-webfont.eot');
  src: url('webfont/ManifontGroteskBold-webfonts/ManifontGroteskBold-webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont/ManifontGroteskBold-webfonts/ManifontGroteskBold-webfont.ttf') format('truetype'),
       url('webfont/ManifontGroteskBold-webfonts/ManifontGroteskBold-webfont.svg#webfont') format('svg');
}

@font-face{ 
  font-family: 'ManifontGrotesk';
  font-weight: normal;
  font-style: italic;
  src: url('webfont/ManifontGroteskBookItalic-webfonts/ManifontGroteskBookItalic-webfont.eot');
  src: url('webfont/ManifontGroteskBookItalic-webfonts/ManifontGroteskBookItalic-webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont/ManifontGroteskBookItalic-webfonts/ManifontGroteskBookItalic-webfont.ttf') format('truetype'),
       url('webfont/ManifontGroteskBookItalic-webfonts/ManifontGroteskBookItalic-webfont.svg#webfont') format('svg');
}

h1 {
	font-weight: bold;
	font-size: 3em;
	text-align: center;
	z-index: 99;
	color: #fff;
}

h2 {
	font-weight: bold;
	text-transform: uppercase;
	text-align: left;
}

h3 {
	font-weight: bold;
	font-style: italic;
}

a {
	cursor: pointer;
	text-decoration: none;
	color: white;
}

i {
	font-style: italic;
}

b {
	font-weight: bold;
}

sup { 
	cursor: pointer;
    vertical-align: super;
    font-size: smaller;
}

hr {
  border: 0 none;
  border-top: 2px dashed #FFF;
  background: none;
  height:0;
}

/* Generals
-------------------------------------------------------------- */
html {
	width: 100%;
	height: 100%;
}


body {
	position: absolute;
	overflow: hidden;
	font-family: 'ManifontGrotesk', sans-serif;
	font-size: 1em;
	line-height: 1.3em;
	color: #F5F5F5;
	top: 0;
	left: 0;
	width: 600%;
	height: 800%;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    background-color: black;
	cursor: grab;
	cursor: -moz-grab;
	cursor : -webkit-grab;
}

body:active {
	cursor: grabbing;
	cursor: -moz-grabbing;
	cursor : -webkit-grabbing;
}	

.background {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -99;
	background-image: url('img/bg/background-min.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

img {
	width: 100%;
	height: auto;
}

li {
	width: 100%;
	cursor: pointer;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}

.note {
	font-size: .9em;
}

.auteur {
	float: right;
	font-weight: bold;
}

#loader {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	background-color: #000000;
}

#disclaim {
	width: 60%;
	text-align: center;
}

#enter {
	text-align: center;
	cursor: pointer;
	width: 20%;
	margin: 0 auto;
}

#enter img {
	padding-top: 5%;
}

.artiste {
	width: 16.64%;
	height: 12.49%;
	position: absolute;
}

.center {
	position: absolute;
  	left: 50%;
  	top: 50%;
  	transform: translate(-50%,-50%);		
}

/* Videos */
.vid_contener {
	position: relative;
}

.video-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	z-index: 999;
	-webkit-transition: opacity .3s;
	-moz-transition: opacity .3s;
	-o-transition: opacity .3s;
	-ms-transition: opacity .3s;
	transition: opacity .3s;
	background: rgba(0,0,0,1);
}

.vid_contener:hover .video-controls {
	opacity: 1;
}

button {
	width: 20px;
	border:0;
	background-color: white;
	filter: invert(100%);
}

button:hover {
	cursor: pointer;
}

.controler {
	float: left;
	padding: 0;
	margin-left: 2%;
}

.seek-bar {
	width: 96%;
	margin-bottom: 5px;
}

.volume-bar {
	width: 60px;
}

.full-screen {
	float: right;
	margin-right: 2%;
}

input[type=range] {
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #c8c8c8;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 1px solid #c8c8c8;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #d5d5d5;
}
input[type=range]::-moz-range-track {
  height: 4px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #c8c8c8;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 1px solid #c8c8c8;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  height: 4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #bbbbbb;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #c8c8c8;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0);
  border: 1px solid #c8c8c8;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  height: 4px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #c8c8c8;
}
input[type=range]:focus::-ms-fill-upper {
  background: #d5d5d5;
}




/* Artistes
-------------------------------------------------------------- */

.logo {
	z-index: -9;
	position: absolute;
	left: 8%;
	top: 8%;
	width: 20%;
}
.legende {
	position: absolute;
	font-size: .9em;
}

/* agnes */
	#agnes {
		top: 62.5%;
		left: 66.65%;
	}
	#logo_agnes, #logo_agnesbis {
		z-index: 99;
		top: 2.5%;
		width: 20%;
	}
	.box_agnes {
		position: absolute;
		top: 0;
		left: 0;
		display: none;
		width: 100%;
		height: 100%;
	}
	#agnes0 {
		display: block;
	}
	#agnes0 img{
		cursor: pointer;
		width: 50%;
	}
	#agnes1 .legende {
		bottom: 30px;
		left: 8%;
		z-index: 99;
	}
	#agnes1 ul {
		width: 92.5%;
	}
	#agnes1 li {
		width: 16.5%;
		float: left;
		margin: 1.5%;
		background-size: cover;
		background-repeat: no-repeat;
	}
	#agnes1 li:before {
		display: block;
		padding-top: 145%;
		content: "";
	}
	#agnes1 li:nth-child(1){
		display: none;
	}

	#agnes2 li {
		cursor: pointer;
		position: absolute;
		display: none;
		width: 30%;
	}
	#agnes2 li:before{
		content: '';
		display: block;
		padding-top: 120%;
	}
	#agnes2 li:first-child {
		display: block;
	}
	#agnes2 li:nth-child(2){
		display: block;
	}
	#agnes0 .legende, #agnes2 .legende, #agnes3 .legende {
		bottom: 30px;
		left: 8%;
	}
	#agnes3 li {
		display: none;
		cursor: pointer;
		position: absolute;
		left: 10%;
		top: 10%;
		width: 80%;
		height: 80%;
	}

/* AgnesBis */
	#agnesbis {
		top: 25%;
		left: 16.65%;
	}
	#legende_agnesbis {
		left: 8%;
		bottom: 2.5%;
	}
	#agnesbis li {
		cursor: pointer;
		position: absolute;
		width: 15%;
	}

	#AgnesBis li img {
		box-shadow: 0px 0px 10px black;
	}

/* Arnaud */
	#arnaud {
		left: 16.65%;
		top: 75%;
	}
	.arnaud_cont {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 5.2em;
		background-color: black;
		padding: 15px;
	}
	#arnaud_un_cont {
		margin-bottom: 25px;
	}
	.cont_up {
		display: none;
		position: absolute;
		cursor: pointer;
		top: 0;
		right: 15px;
		width: 10px; 
  		height: 10px; 
	}
	.cont_down {
		position: absolute;
		cursor: pointer;
		bottom: 0;
		right: 15px;
		width: 10px; 
  		height: 10px;
	}
	.arnaud_cont .cont_up {
		top: 15px;
	}
	.arnaud_cont .cont_down {
		bottom: 15px;
	}	
	.arrow_up{
		position: absolute;
		right: 0;
		top: 0;
  		border-left: 10px solid transparent;
  		border-right: 10px solid transparent;
  		border-bottom: 10px solid white;
	}
	.arrow_down {
		position: absolute;
		right: 0;
		bottom: 0;
  		border-left: 10px solid transparent;
  		border-right: 10px solid transparent;
  		border-top: 10px solid white;		
	}
	.arnaud_txt {
		overflow: auto;
		width: 95%;
		height: 100%;
		padding-right: 20%;
	}

/* Bourart */
	#bourcart {
		top: 0;
		left: 83.33%;
	}
	#logo_bourcart {
		width: 30%;
	}
	#legende_bour {	
		left: 8%;
		bottom: 8%;
	}

/* Denis */
	#denis {
		left: 83.33%;
		top: 50%;
	}

/* Duyckaerts */
	#duyckaerts {
		left: 33.33%;
		top: 50%;
	}
	#legende_duyc {
		left: 8%;
		bottom: 8%;
	}
	#cont_duyckaerts {
		position: absolute;
		width: 40%;
		height: 60%;
	}

/* Hanatarash */
	#hanatarash {
		left: 16.65%;
		top: 0;
	}
	#logo_hanatarash {
		left: 30px;
		top: 30px;
	}
	#legende_hana {
		bottom: 30px;
		right: 30px;
		padding: 10px;
		background-color: black;
	}
	#cont_hanatarash {
		position: absolute;
		z-index: -99;
		width: 100%;
		height: 100%;
		overflow: hidden;
		opacity: .7;
	}
	#hanatarash_img {
		width: 50%;
	}
	#hanatarash_img:before {
		content: '';
		display: block;
		padding-top: 66%;
	}
	#hanatarash_img li {
		display: none;
		cursor: pointer;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;		
	}
	#hanatarash_img li:first-child {
		display: block;
	}

/* Journiac */
	#journiac {
		left: 0;
		top: 37.5%;
		background-color: rgba(0,0,0,.5);
	}
	#list_cont{
		position: absolute;
		cursor: ns-resize;
		width: 33%;
		height: 80%;
		top: 15%;
		left: 8%;
		overflow: hidden;
		text-transform: uppercase;
		line-height: 1.6em;
	}
	#list_txt {
		width: 95%;
		height: 100%;
		padding-right: 20%;
		overflow: auto;
	}
	#list_txt a {
		background-color: white;
		color: black;
	}
	#journiac_cont{
		cursor: ns-resize;
		position: absolute;
		text-align: justify;
		width: 35%;
		height: 90%;
		top: 5%;
		left: 42%;
		overflow: hidden;
	}
	#journiac_txt {
		width: 95%;
		height: 100%;
		padding-right: 20%;
		overflow: auto;
	}
	#journiac_left {
		position: absolute;
		width: 19%;
		top: 5%;
		right: 2.5%;
		padding: 10px;
		background-color: rgb(0,0,0);
	}
	#journiac_img {
		text-align: center;
		margin-bottom: 10px;
		cursor: pointer;
	}
	#journiac_img img {
		width: 80%;
		height: auto;
		margin: 0 auto;
	}
	#journiac_note {
	display: none;
	font-size: 0.9em;
	}
	#journiac_article {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 100%;
		display: none;
		background-color: rgba(0,0,0,0.7);
		overflow: hidden;
	}
	#journiac_article_cont {
		text-align: center;
		width: 100%;
		height: 100%;
		cursor: ns-resize;
		overflow: auto !important;
		padding-right: 10%;
	}
	#journiac_article_cont img {
		max-width: 1000px;
		width: 80%;
	}
	#img_cont {
		display: none;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
		background-color: rgba(0,0,0,0.9);
	}
	#images {
		width: 80%;
		height: 80%;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
	}
	.close_img {
		font-weight: bold;
		cursor: pointer;
		position: absolute;
		right: 30px;
		top: 30px;
	}
	.img_legende {
		padding: 10px;
		background-color: black;
		position: absolute;
		display: none;
		width: 30%;
		left: 8%;
		bottom: 30px;
	}
	.bp {
		cursor: pointer;
		color: rgb(0,0,0);
		background-color: rgb(255,255,255);
	}

/* Liebaert */
	#liebaert {
		left: 50%;
		top: 75%;
	}
	#logo_liebaert {
		z-index: 99;
	}
	#legende_lieb {
		z-index: 99;
		bottom: -3em;
		left: 0;
	}
	.liebaert_cont {
		cursor: pointer;
		position: absolute;
		width: 40%;
	}
	.liebaert_cont:before {
		content: '';
		display: block;
		padding-top: 100%;
	}
	.liebaert_cont li {
		position: absolute;
		display: none;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#facea {
		left: 8%;
		top: 10%;
	}
	#faceb {
		right: 8%;
		top: 10%;
	}
	#facea li {
		background-position: right;		
	}
	#faceb li {
		background-position: left;
	}
	#mailbox {
		position: absolute;
		z-index: 99;
		opacity: .9;
		bottom: -4em;
		right: -2%;
		filter: invert(100%);
		cursor: pointer;
		width: 10%;
		background-image: url('img/struc/mail.png');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
	#mailbox:before {
		content: '';
		display: block;
		padding-top: 100%;
	}
	#mailbox:hover {
		opacity: 1;
	}
	#emails {
		z-index: 9999;
		display: none;
		overflow: hidden;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,.7);
	}
	#emails_contener {
		width: 80%;
		height: 100%;
		overflow: hidden;
	}
	#emails_cont {
		cursor: ns-resize;
		width: 100%;
		height: 100%;
		overflow: auto;
		padding-right: 10%;
	}
	#emails_cont ul li:before {
		content: '';
		display: block;
		padding-top: 141%;
	}
	#close {
		font-weight: bold;
		cursor: pointer;
		position: absolute;
		top: 8%;
		right: 7%;
	}
	#sound-control {
		position: absolute;
		z-index: 99;
		opacity: .9;
		bottom: -2.9em;
		right: 8%;
		filter: invert(100%);
		cursor: pointer;
		width: 4%;
		background-image: url('img/struc/play.png');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
	#sound-control:before {
		content: '';
		display: block;
		padding-top: 100%;
	}
	#sound-control:hover {
		opacity: 1;
	}

/* Luca */
	#luca {
		top: 62.5%;
		left: 0;
	}
	#legende_luca {
		left: 8%;
		bottom: 8%;
	}
	#cont_luca {
		cursor: pointer;
	}

/* Porte Verte */
	#porte {
		left: 0;
		top: 87.5%;
	}
	#cont_porte {
		position: absolute;
		width: 50%;
		left: 10%;
		bottom: 10%;
	}
	#legende_porte {
		bottom: 5%;
		left: 10%;
	}

/* Rouard */
	#rouard {
		left: 0;
		top: 12.5%;
	}
	#logo_rouard {
		filter: invert(100%);
		top: 67.5%;
		left: 75%;
	}
	#rouard ul {
		width: 80%;
	}
	#rouard ul li {
		width: 18%;
		margin: 1%;
		float: left;
	}

/* Russel */
	#russel {
		left: 50%;
		top: 12.5%;
	}
	#logo_russel, #logo_russelbis {
		width: 15%;
	}
	#logo_russelbis {
		filter: invert(100%);
	}
	#legende_russel {
		left: 8%;
		bottom: 8%;
	}

/* RusselBis */
	#russelbis {
		top: 25%;
		left: 83.33%;
	}
	#cont_russelbis{
		width: 65%;
		left: 65%;
	}
	#logo_russelbis {
		width: 40%;
		left: 30px;
	}
	#logo_russelbis img {
		width: 50%;
	}
	#legende_russelbis {
		color: black;
		left: 30px;
		bottom: 8%;
	}

/* Trixi */
	#trixi {
		top: 75%;
		left: 83.33%;
	}
	#logo_trixi {
		top: 90%;
		left: 3%;
	}
	.trixi_val {
		text-align: justify;
		width: 30%;
		height: 100%;
		float: left;
		margin-left: 3%;
		overflow: hidden;
	}
	.trixi_txt {
		cursor: ns-resize;
		overflow: auto;
		height: 100%;
		width: 98%;
		padding-right: 10%;
	}
	#triximg_cont .cont_up, #triximg_cont .cont_down {
		right: 33%;
	}
	#triximg_cont .cont_up {
		top: 15px;
	}
	#triximg_cont .cont_down {
		bottom: 15px;
	}
	#triximg_txt {
		cursor: ns-resize;
		width: 100%;
		height: 100%;
		overflow: auto;
		padding-right: 10%;
	}
	#triximg_txt li {
		margin-bottom: 5%;
		margin-top: 5%;
	}
	#triximg_txt li:before {
		content: '';
		display: block;
		padding-top: 75%;
	}

/* Autres */

#accueil {
	position: absolute;
	top: 37.5%;
	left: 50%;
	width: 16.65%;
	height: 12.5%;
}
#accueil img {
	pointer-events: none;
	height: 80%;
	width: auto;
}

#credit_cont {
	cursor: ns-resize;
	width: 6%;
	height: 17em;
	position: absolute;
	bottom: 30px;
	right: 30px;
	overflow: hidden;
}
#credit_txt {
	width: 100%;
	height: 100%;
	padding-right: 20%;
	overflow: auto;
}

#numero_un {
	position: absolute;
	top: 96%;
	left: 55%;
	text-transform: uppercase;
	opacity: .1;
}

#numero_un:hover {
	opacity: 1;
}