/*  MAIN CSS 
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);*/



@media screen {
	:root{
		--columns: 4;
		--smallcolumns: 7;
		--itempadding : 100px;
	}
}
* { box-sizing: border-box; }

body {
	font-family: 'Verdana', sans-serif;
	font-size: 0.875em;
	background: black; /*#161314;*/
	/*background-image:url("../_images/background.png");*/
	overflow:hidden;
}
ul, li {
	list-style-type: none;
	padding: 0;
}
.hidden {
	visibility : hidden;
	display : none;
}
.noScroll {
	/* this is to */
	overflow : hidden;
}

.eleves {
	width : 60%;
	text-align:center;
	margin:0 auto;
    display: inline-block;
}

#grid-gallery
{
    position : absolute;
    width : 95vw;
    left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	/*background-color:rgba(125,125,125,125);*/
	overflow:hidden;
}

.grid {
	position : relative;
	width:100%;
	height:100%;
	/*background-color : black;*/
	overflow:hidden;
	margin : auto;
	/*z-index : 0;*/
}

.grid-item, .grid-sizer {
	padding : 0px;
	width : calc(100% / var(--columns));
	overflow:hidden;
}

.small {
	width : calc(100% / var(--smallcolumns));
	overflow:hidden;
}

.is-active {
	width : 100%;
}

.grid-thumbnail {
	position : relative;
	width:100%;
	height:100%;
	margin : auto;
	padding : var(--itempadding);
}

.grid-thumbnail figure {
	width : 100%;
	height : 100%;
}

.grid-thumbnail img {
	width : 100%;
	height : 100%;
	position : absolute;
	top : 0;
	left : 0;

}

.bttn {
    position : absolute;
	top : 0;
	left : 0;
	width:100%;
	height:100%;
	margin : auto;
    cursor: pointer;
	padding : var(--itempadding);
}

#datas {
	width : 100%;
	height : 100%;
	background : grey;
}

#globdatas {
	position : absolute;
	top : 0;
	left : 0;
	height:100vh;
	width:100vw;
	background: rgba(0,0,0,.8);
	margin : auto;
	order : 0;
	padding : 100px;
	overflow : hidden;
}

#globdatas h1 {
	color : black;
	background-color : inherit;

}
.authors {
	color : rgba(0,0,0,.75);
	visibility : visible;
	display : inline-block;
	margin-top : 20px;
	font-style: italic;
}
.infos {
	visibility: hidden;
	display : none;
}

#globdatas .text {
	position : relative;
	width : 100%;
	height : 100%;
	background: white;
	color : black;
	margin : 0 auto;
	padding : 100px;
	overflow : auto;
}
#globdatas h1 {
	margin-top : 0;
	margin-bottom : 40px;
}
#globdatas .text li {
	list-style-type: none;
	margin-left : 20px;
}


iframe {
	width : 100%;
	height : 100%;
	margin : 0 auto;
	top : 0;
	left : 0;
}

#about {
	position : fixed;
	bottom : 20px;
	right : 20px;
	color : white;
	cursor : pointer;
}

#closebttn{
	position: fixed;
	width : 30px;
	height: 30px;
	top : 30px;
	right : 30px;
	background-image:url("../_ui/close_white.png");
	background-repeat: no-repeat;
	background-size: contain;
	cursor : pointer;
}
.dark {
	background-image:url("../_ui/close.png");
}

#presentation {
	position : relative;
	width : 100%;
	height : 100%;
	padding : 100px;
	color : black;
	background-color : white;
	overflow : auto;
	/*-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))*/
}

#presentation #logos {
	position :relative;
	width : 100%;
    margin-left: auto; 
    margin-right: auto;
	margin-top : 20px;
	margin-bottom: 20px;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

#presentation .logo {
	display: inline-block;
    *display: inline;
	height : 70px;
	margin-top : 40px;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}
#banner {
	position : relative;
	width : 100%;
}
#banner img {
	width : 100%;
}
#block {
	color : white;
}
#presentation h2 {
	margin-top : 60px;
}
/* audio playbar */
#playbar, #playbar::-webkit-progress-bar{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	border: none;
	border-radius: 0px;
	position : fixed;
	left : 0px;
	bottom : 0px;
	width: 100vw;
	height: 5px;
	background : black;
}

#playbar::-moz-progress-bar, #playbar::-webkit-progress-value {
	background : white;
	border-radius: 0px;
}


@media (max-width : 767px) {
	:root{
		--columns: 2;
		--smallcolumns: 3;
		--itempadding : 50px;
	}
	
	#grid-gallery
	{
		position : absolute;
		width : 70vw;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		/*background-color:rgba(125,125,125,125);*/
		overflow:hidden;
	}

	#globdatas {
		position : absolute;
		top : 0;
		left : 0;
		height:100vh;
		width:100vw;
		background: rgba(0,0,0,.8);
		margin : auto;
		order : 0;
		padding : 5px;
		overflow : hidden;
	}


	#globdatas .text {
		background: white;
		color : black;
		margin : 0 auto;
		padding : 30px;
		overflow : auto;
	}

	#closebttn{
		width : 20px;
		height: 20px;
		top : 20px;
		right : 20px;
	}

	#presentation {
		padding : 20px;
		/*-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))*/
	}

	#presentation h2 {
		margin-top : 30px;
	}
}