body
{
	margin:0;
	padding:0;
	background-color: black;
	color:white;
	font-size:30px;
	font-family: 'Roboto', sans-serif;
	font-weight:300;
}

#MyVid, #MySecondVid, #MyThirdVid, #MyVidMobile, #MySecondVidMobile, #MyThirdVidMobile
{
position: absolute; 
right: 0; 
top: 0;
min-width: 100%; 
min-height: 100%;
width: 100%; 
height: auto;
z-index:-1;
}

h1, h2, h3, li, .desktop-nav
{
		transition:0.2s;
}

/*.fp-viewing-page01 #mute_about, .fp-viewing-page01 #unmute_about, .fp-viewing-page01 #mute_works, .fp-viewing-page01 #unmute_works
{
	display:none!important;
}

.fp-viewing-page02 #mute_home, .fp-viewing-page02 #unmute_home, .fp-viewing-page02 #mute_about, .fp-viewing-page02 #unmute_about
{
	display:none!important;
}

.fp-viewing-page03 #mute_home, .fp-viewing-page03 #unmute_home, .fp-viewing-page03 #mute_works, .fp-viewing-page03 #unmute_works
{
	display:none!important;
}

*/


/*TRANSITION*/


#fader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
	pointer-events: none;
	background: black;
	animation-duration: 400ms;
    animation-timing-function: ease-in-out;


}



@keyframes fade-out {
    from { opacity: 1 }
      to { opacity: 0 }
}

@keyframes fade-in {
    from { opacity: 0 }
      to { opacity: 1 }
}

#fader.fade-out {
    opacity: 0;
    animation-name: fade-out;
}

#fader.fade-in {
    opacity: 1;
    animation-name: fade-in;
}





/*MOBILE*/

.container-fluid
{
	padding-left:20px!important;
	padding-right:20px!important;
}


header
{
	display:flex;
	justify-content: space-between;
	align-self: center;
	
}

.desktop-nav, #Burger
{
	position:fixed;
	z-index:1;
}

.desktop-nav ul li a
{
font-size:20px!important;
}

.logo a
{
}

.trait-container
{
	border-left:solid white 1px;
	list-style-type: none;
	height:15px;
}




.trait-centre
{
	list-style-type: none;
	border-left:solid 2px white;
}

#Burger
{
	right:20px;
	bottom:20px;
	z-index:1;
}

.overlay .closebtn:hover, #Burger:hover, .Sound-picto:hover
{
	cursor:pointer
}

#fixed-element
{
	position:fixed;
	top:20px;
	left:20px;
	right:20px;
	z-index:1;
	
}

h1, h2, h3, a
{
	text-transform: uppercase;
	font-family: 'Poppins', sans-serif;
	font-weight:700;

}

h1
{
	font-size:50px;
	margin-bottom:10px;
	line-height: 1;
	
}


h2
{
	font-size:50px;
	margin-bottom:40px;
}

.morceau
{	padding:0px 15px 0px 15px!important;
	margin-top:100px;
}
a
{
	color:white;
}

li, button, a, h3
{
	transition:0.2s;
	font-size:25px;
}

li:hover, button:hover, a:hover
{
	color:white;
	text-decoration: none;
}

.info_hover
{
	font-family: 'Roboto', sans-serif!important;
	weight:100!important;
	text-transform: uppercase;
	opacity: 0;
}


ul
{
	list-style-type: none;
	margin-left:0px;
	padding-left:0px;
}

#GroupeButton li
{
	padding-left:0px!important;
}

.titre-about
{
	margin-bottom:20px;
}

p
{
	font-size:20px;
	font-weight:300;
}
#Button2
{
	margin-bottom:50px;
}

.vide
{
	padding:0px!important;
}


.desktop-nav
{
	bottom:20px;
	left:20px;
}

.mail
{
	line-height: 1.1;
	margin-bottom:10px;
	transition:0.2s;
}

#GroupeButton li
{
	transition:0.2s;
}

#GroupeButton li:hover{
	transform:scale(1.05)!important;
}

/*NAV EFFECT*/

	
.fp-viewing-page01 .Home, .fp-viewing-page02 .Works, .fp-viewing-page03 .About, .Home:hover, .Works:hover, .About:hover
	{
		transform:scale(1.2);
		margin-left:7px;
	}
 

/*SM*/

@media (min-width: 576px) {

.titre-about
{
	margin-bottom:40px;
}	
	
}

/*DESKTOP*/

@media (min-width: 992px) {
	
#fixed-element
{
	position:fixed;
	top:20px;
	left:50px;
	right:50px;
	z-index:1;
	
}
	
.desktop-nav
{
	bottom:20px;
	left:50px;
}
	
.trait-container
{
	border-left:solid white 1px;
	list-style-type: none;
	height:15px;
}
	
	
h1, h2
{
	font-size:75px;
	margin-bottom:40px;
}	
	
.container-fluid
{
	padding-left:50px!important;
	padding-right:50px!important;
}	
	
.morceau li a, h3
{
	transition:0.2s;
	font-size:30px;
}



.morceau
{
	margin-top:100px;
}
	
	
	
}

.mail
{
	margin-top:20px;
}



/*LARGE DESKTOP*/

@media (min-width: 1200px) {
	
	h2
	{
		margin-top:50px;
	}
	
	h1
	{
		margin-top:50px;
		font-size:100px;
	}
	
	p
	{
	font-size:25px;
	}
	
	
}


@media (max-height: 700px) and (min-width:1200px) {
	h2
	{
		margin-top:-50px!important;
	}
	
	
}




/*LARGE XXL DESKTOP*/

@media (min-width: 1500px) {
	
	h1,h2
	{
		margin-top:80px;

	}
	
	h1
	{
		font-size:140px;
	}
	
	
}

/*!!*/

/*PAGES PROJETS*/

/*!!*/


.entete
{
	margin-top:80px;
	margin-bottom:10px;
}

.fleche-droite
{
	margin-right:-25px;
}

#toggle_on, #toggle_on_desktop
{
	visibility: hidden;
	margin-left:-15px;
}

#toggle_off, #toggle_off_desktop
{
	margin-right:-15px!important;
}

.papa_toggle_desktop
{
	position:absolute;
	top:0px;
	right:35px;
	z-index:10;
	font-size:0px;
}


#demo2
{
	position: absolute;
	background-color:rgba(0,0,0,0.7);
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:8;
}



.paragraphe
{
	margin-top:30px;
	font-size:22px;
}

#video-projet, #video-projet2, #video-projet3
{
	padding:0px!important;
}

.hover-fleche
{
	margin-top:-40px;
	font-size:15px!important;
	text-transform: uppercase;
}

h4
{
	font-size:15px!important;
	text-transform: uppercase;
}
.carousel-caption
{
	position:relative!important;
	left:50%;
	margin-left:-50px;
	bottom:25px;
	width:100px;
	height:15px;
	text-align:center!important;
	font-size:15px!important;
	text-transform:uppercase;
	margin-bottom:10px;
	margin-top:0px;
	z-index:5;
	
}

.carousel-inner
{
	padding-bottom:-20px;
}

.projet-prec, .projet-suiv
{
	opacity: 0;
	transition:0.2s;
}

.projet-prec
{
	position:relative;
	top:22px;
}


.carousel-indicators > li {
	border-radius: 50%;
	width:10px;
	height:10px;
	background-color:rgba(0,0,0,0.00);
	border:solid grey 1px;
}

.carousel-indicators .active
{
	background-color: white;
}

#slider
{
	padding-left:0px!important;
	padding-right:0px!important;
}

@media (min-width: 758px) {
	
	.entete
	{
		margin-bottom:30px!important;
	}
	
}

/*DESKTOP*/


@media (min-width: 992px) {
	
	.entete
	{
		margin-bottom:10px!important;
	}
	
	.paragraphe
	{
		font-size:22px!important;
	}
	
	h4
	{
	font-size:22px!important;
	text-transform: uppercase;
	}
	
	/*.carousel-caption
	{
		font-size:22px!important;
		bottom:20px;
	}*/
	.projet-prec
	{
	top:0px;
	}
	
	.h1-projet
	{
		font-size:75px;
		margin-top:0px!important;
	}
	
	.hover-fleche
	{
	margin-top:-40px;
	font-size:20px!important;
	}

	
}


/*LARGE DESKTOP*/

@media (min-width: 1200px) {
	
	.paragraphe
	{
	margin-top:30px;
	font-size:22px!important;
	}
	
	
	
}




@media (min-width: 1500px) {

	.h1-projet
	{
		margin-top:0px!important;
		font-size:75px!important;
	}
	

	
	.paragraphe
	{
	margin-top:60px;
	font-size:25px;
	}

	
}













/*NAV MOBILE*/

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 0;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    background-color:black; /* Black fallback color */
    overflow: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 25px;
    color: white;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
	font-family: 'Raleway', sans-serif;
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: white;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
	right:20px;
	bottom:20px;
	z-index:11;
}


/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
	}




/* LOADER */






#loader{
	position: fixed;
	width:100%;
	height:100vh;
	z-index:101;
	overflow: visible;
	background:#000 url("../img/points.gif") no-repeat center center;
	background-size:contain;
}