*{
	margin:0;
	padding:0;
}

body {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight: 300;
	margin:auto;
	/*background-color:#EEEDE4;*/
	background-color:white;
	color:white;
}

#wrapper {
	/*font-size:x-large;*/
	min-height: 100vh;
}

#gallery {
	position:relative;
	width:100vw;
	height:100vh;
}

.background {
	position: absolute;
	width:100%;
	height:100%;

	background-position: center;
	background-size: cover;
}

#backgroundImage-1 {
	z-index:-2;
}
#backgroundImage-2 {
	z-index:-1;
	opacity:0;
	filter:alpha(opacity = 0);
}

.no-selection {
	/* L'utilisateur ne pourra plus sélectionner le texte de l'élément qui possède cette propriété CSS */
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}

.clear {
	clear:both;
}

/* == HEADER == */

/* == HEADER LOGO == */

#logo {
	position:fixed;
	bottom:5px;
	right:30px;
	z-index:3;
}

/* == HEADER NAVIGATION == */

nav {
	margin-left:16px;
	position:fixed;
	bottom: 54px;
	z-index:2;
}

nav ul {
	list-style: none;
}

nav ul li.menu-item {
	float:left;
}

nav ul li.menu-item a {
	text-decoration: none;
}

.selection-element {
	background-color:rgba(0,0,0,0.0);
	border: 1px solid rgba(255,255,255,0.8);
	width:44px;
	height:44px;
	border-radius: 23px 23px 23px 23px;
	margin-left:4px;
}
.selection-element:hover {
	background-color: rgba(0,0,0,0.5);
}
.selection-element .label {
	color:white;
	position:relative;
	bottom:25px;
	width:230px;
	opacity:0;
}
.selection-element:hover>.label {
	opacity:1;
}

.menuItem {
	display:inline;
	background-color:rgba(0,0,0,0.0);
	border: 1px solid rgba(255,255,255,0.8);
	width:44px;
	height:44px;
	border-radius: 23px 23px 23px 23px;
	margin-left:4px;
	/*transition: background-color 0.4s;
	-webkit-transition: background-color 0.4s;*/
}
.menuItem:hover {
	background-color: rgba(0,0,0,0.5);
}
.menuItem:hover>.label {
	opacity:1;
}
.menuItem .label {
	color:white;
	/*font-size: 1.4rem;*/

	position:relative;
	bottom:25px;
	width:230px;
	opacity:0;
	/*transition: opacity 0.4s;
	-webkit-transition: opacity 0.4s;*/
}

/* == GALLERY NAVIGATION == */

#left {
	position: absolute;
	left: 0px;
	width:40%;
	height:100%;

	/*background-color: red;*/
	
	z-index:0;
}

#right {
	position: absolute;
	right: 0px;
	width:40%;
	height:100%;

	/*background-color: blue;*/

	z-index:0;
}

.arrow {
	opacity:0.4;
	transition: opacity 0.3s;
	-webkit-transition: opacity 0.3s;
}

#left>.arrow {
	background-image: url("../images/arrow-left.png");
	width:22px;
	height:87px;
	position:absolute;
	top:50%;
	left:20px;
	margin-top:-43px;
}
#left:hover>.arrow {
	opacity: 0.8;
}
#right>.arrow {
	background-image: url("../images/arrow-right.png");
	width:22px;
	height:87px;
	position:absolute;
	top:50%;
	right:20px;
	margin-top:-43px;
}
#right:hover>.arrow {
	opacity: 0.7;
}

/* == CONTENT == */

#info {
	position:fixed;
	bottom:0px;
	right:0px;
	width: 50vw;

	/*font-size: 1.5rem;*/

	background:rgba(255,255,255,0.5);
	border-radius: 10px 0px 0px 0px;
	-webkit-border-radius: 10px 0px 0px 0px;
	-moz-border-radius: 10px 0px 0px 0px;
	color:black;
	/*right:50%;*/
	/*bottom:0px;*/
	/*width:50%;*/
	z-index:1;
}
#titre {
	/*font-size:2rem;*/
	margin:20px 40px 20px 20px;
}
#titre:empty {
	margin:0px 0px 0px 0px;
}
#description {
	/*font-size:1.2rem;*/
	margin:0px 40px 30px 20px;
}
#description:empty {
	margin:0px 0px 0px 0px;
}
/* == CONTACT == */



/* == COLUMN == */



/* == CREDITS == */

#credits {
	margin-left:20px;
	text-align:left;
	color:black;
	position:fixed;
	bottom: 20px;
	left:0px;
	z-index:3;
}

#credits h1 {
	font-weight: normal;
	/*font-size: 1.2rem;*/
	z-index:3;
	display:inline;
}
#credits p {
	/*font-size: 1.2rem;*/
	z-index:3;
	display:inline;
}

.small-text { font-size: 1rem; }
.medium-text { font-size: 1.5rem; }
.large-text { font-size: 2.5rem; }

@media only screen and (max-width: 1020px) {
	#wrapper {
		font-size:medium;
	}
	#gallery {
		height:75vh;
	}

	#info {
		position:static;
		width: 100%;
	}
	#credits {
		position:static;
		text-align: center;
		margin-bottom: 20px;
	}
	#logo {
		position:static;
		text-align: center;
		margin-top: 20px;
	}

	.small-text { font-size: 1.2rem; }
	.medium-text { font-size: 1.8rem; }
	.large-text { font-size: 2.5rem; }

	nav {
		position:static;
		text-align: center;
		width:80%;
		margin:auto;
	}

	nav ul li.menu-item {
		float:none;
	}

	.selection-element {
		background-color:rgba(0,0,0,0.2);
		border: 0px;
		width:auto;
		height:auto;
		border-radius: 5px;
		margin-bottom: 5px;
		padding: 10px;
	}
	.selection-element:hover {
		background-color: rgba(0,0,0,0.3);
	}
	.selection-element .label {
		color:white;
		position:static;
		width:auto;
		opacity:1;
	}

	.menuItem {
		display:block;
		border-radius: 0px;
		width:auto;
		height: auto;
	}
	.menuItem .label {
		position: static;
		height:auto;
		width:auto;
		color:white;
		opacity:1;
		padding: 10px;
		background-color:rgba(0,0,0,0.5);
	}
}