/*** Le Collectif des Gueux ***/

@font-face {
	font-family: "Mohave";
	src: url("../fonts/Mohave-Bold.eot");
	src: url("../fonts/Mohave-Bold.eot?#iefix") format("embedded-opentype"),
		url("../fonts/Mohave-Bold.woff") format("woff"),
		url("../fonts/Mohave-Bold.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
}

@font-face {
    font-family: "aleobold";
    src: url("../fonts/Aleo-Bold-webfont.eot");
    src: url("../fonts/Aleo-Bold-webfont.eot?#iefix") format("embedded-opentype"),
         url("../fonts/Aleo-Bold-webfont.woff") format("woff"),
         url("../fonts/Aleo-Bold-webfont.ttf") format("truetype"),
         url("../fonts/Aleo-Bold-webfont.svg#aleobold") format("svg");
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #000;
	font-family: "aleobold", serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
}

/*** MENU ***/

nav {
	position: fixed;
    z-index: 999;
    width: 100%;
    text-align: center;
}

nav ul {padding:0; margin: 0;}

nav ul li {display:inline-block}

nav ul li:after {
    content: "\2739";
    font-size: 1.2em;
    color: goldenrod;
    padding: 0 0.7em;
}

nav ul li:last-child:after {content:""}

nav ul li a {
	text-decoration: none;
    line-height: 2.4em;
    font-size: 1.2em;
    color: goldenrod;
}

nav ul li a:hover, nav ul li a:focus, nav ul li a:active {color:firebrick}

/*** SECTIONS ***/

#section2, #section3, #section4, #section5, #section6, #section7, #section8, #section9 {
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

#videogueux {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: contain;
	object-fit: cover;
	z-index: 9;
}	

#section2 {background-image: url("../img/02copie.jpg")}

#section3 {
	background-image: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 15%), url("../img/Sans-titre-2-1.jpg");
	background-position: 50% 50%;
}

#section4 {
	background-image: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 15%), url("../img/04copie-1.jpg");
	background-position: bottom left;
}

#section5 {
	background-image: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 15%),  url("../img/05copie-1.jpg");
	background-position: 50% 50%;
}

#section6 {
	background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0.65) 100%), url("../img/05biscopie-1.jpg");
	background-position: 50% 50%;
}

#section7 {
	background-image: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 15%), url("../img/Sans-titre-1-1.jpg");
	background-position: 50% 50%;
}

#section8 {
	background-image: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 15%), url("../img/Sans-titre-3.jpg");
	background-position: top left;
}

#section9 {
	background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0.65) 100%), url("../img/08copie-1.jpg");
	background-position: bottom center;
}

/*** INTRO ***/

#section1 .intro {
	z-index: 10;
	position: absolute;
	bottom: 1em;
	left: 0;
	right: 0;
	text-align: center;
}

/* 
#historique {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
 */

#section2 .intro {
	width: 45%;
	margin-left: 50%;
    text-align: right;
}

#section3 .intro, #section4 .intro, #section5 .intro, #section6 .intro, #section7 .intro, #section8 .intro, #section9 .intro {
	position: absolute;
    bottom: 1em;
    left: 0;
    right: 0;
    width: 65%;
    margin: 0 auto;
    text-align: center;
}

#section9 .intro ul {padding:0}

#section9 .intro ul li {display: inline-block}

.intro h1 {
	font-family: "Mohave", sans-serif;
	font-size: 4.5em;
	color: goldenrod;
	text-transform: uppercase;
	margin: 0;
}

#section1 .intro h2, #section2 .intro h2 {
	font-family: "aleobold", serif;
	color: goldenrod;
}

/* 
#section1 .intro a {text-decoration: none; color: #d26e18;}

#section1 .intro a:hover {
	color: #bdd1ec;
	-webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}
 */

#section3 .intro h1, #section4 .intro h1, #section5 .intro h1, #section6 .intro h1, #section7 .intro h1, #section8 .intro h1, #section9 .intro h1 {
	background-color: #000;
	display: inline;
    padding: 0.5rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.bouton-galerie {
	font-family: "Mohave", sans-serif;
    font-size: 2.5em;
    color: goldenrod;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.5rem;
    background-color: #000;
    -webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}

.bouton-galerie:hover {
	color: ivory;
	background-color: firebrick;
}

.intro p {
	font-size: 1.4em;
	color: beige;
	margin-bottom: .75em;
}

.intro p a {color: goldenrod}
.intro p a:hover {color: firebrick}

#fp-nav ul li a span {background-color: goldenrod}

#credits {overflow: hidden; padding: 23% 0;}

a.lightcase-icon-close:hover, a.lightcase-icon-prev:hover, a.lightcase-icon-next:hover {text-decoration:none}

/** RESPONSIVE **/

.show-menu {
	height: 2rem;
	width: 2rem;
	background-image: linear-gradient(to right, goldenrod, goldenrod), linear-gradient(to right, goldenrod, goldenrod), linear-gradient(to right, goldenrod, goldenrod);
	background-position: center top, center, center bottom;
	background-repeat: no-repeat;
	background-size: 2rem 0.5rem;
	padding: 0;
	outline: 0;
	border: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	display: none;
}

input[type=checkbox] {display: none}
input[type=checkbox]:checked ~ #menugueux {display: block}

@media screen and (max-width:1200px) {
	label {margin: 0}
	nav {
		top: 0;
		left: 0;
		right: 0;
		padding: 1rem;
		width: inherit;
	}
	nav ul li:after {display: none}
	#menugueux {display: none; margin: 1rem 0 0 0;}
	#menugueux li {width: 100%}
	#menugueux li a {
	line-height: 2em;
    height: 2em;
    font-family: "Mohave", sans-serif;
    font-size: 1.5em;
    background: goldenrod;
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    color: #333;		
	}
	#menugueux li a:hover {color: firebrick}
	.show-menu {display: block}
	.slide img {height: auto; padding: 0; margin: auto;}
	#section1 .intro, #section2 .intro, #section3 .intro, #section4 .intro, #section5 .intro, #section6 .intro, #section7 .intro, #section8 .intro, #section9 .intro {
	width: 90%;
	margin: 0 auto;
	text-align: center;
	}
	#section2 .intro {
	position: absolute;
	bottom: 1em;
	left: 0;
	right: 0;
	}
	#section4, #section8 {background-position: center}
	.intro p {font-size: 1em; text-shadow: 0 0 10px rgba(1,1,1,0.5);}
	.intro h1 {font-size: 2em}
	.bouton-galerie {font-size: 2em}
	#fp-nav {display: none}
}