/*
Feuille de style
_______________

Soren Bonnaud
*/

body { 

	background-color:black;
	margin:0;
	padding:0;
	perspective: 1px;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	font-family: old;
	scroll-behavior: smooth;
	
}
html {
  height: 100%;
  overflow: hidden;
 

}

@font-face {
    font-family: 'victoriennefont';
    src: url('fonts/victorienne.ttf');
}
@font-face {
    font-family: 'old';
    src: url('fonts/OLD.ttf');
}
nav{text-decoration: none;list-style:none;}
ul{list-style:none;text-decoration: none;}
li{color:white; text-decoration: none; list-style:none;}
p{color:white; font-family: 'old'; font-size: 140%; line-height: 150%;}
em{color:white; font-family: 'old';}
h1{color:white; font-family: 'old'; font-size: 250%;}
h2 {color:white; font-family: 'old';}
h3 {color:white; font-family: 'old';}

a:link {color: white; text-decoration: none;}
a:visited {color: white; }
a:hover {color: white; }
a:active {color: white; }

.title a:link{color: white; opacity: 0.5; transition-duration:0.3s; text-decoration: none;}
.title a:hover{color: white; transition-duration:0.3s;  opacity: 0.85;}
.title a:visited{color: white; opacity: 0.5;}
.navbar a:link{color: white; opacity: 0.5; transition-duration:0.3s; text-decoration: none;}
.navbar a:hover{color: white; transition-duration:0.3s;  opacity: 0.85;}
.navbar a:visited{color: white; opacity: 0.5;}
/*-----Logo-----*/

.logo{
	position:absolute;
	z-index:0;
	width:320px;
	margin:auto;
	
}
.logoext{
	width:320px;
	margin:auto;
}

/*--------------*/
.bttnscroll{
	transition: transform 0.3s;
	display:inline-block;
}
.bttnscroll:hover{
	transform: translateY(20px);
}
.bttnscrollext{
	margin-top:90vh;
	width:100%;
	text-align:center;
}

/*-----Menu Sticky-----*/
.headerinner{
	
	padding: 30px;
	z-index:10;
	position: -webkit-sticky;
	position:sticky;
	top:20px;

}


#headernav{
	opacity:0.99;
	background-color:black;
	margin-top: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
	margin: 0 auto;
	width:800px;
	
}
#headernav li{

	display: inline;
	margin-left:20px;
	margin-right:20px
	
}
/*---------------------*/




/*-----Video----*/

video#intro {
	position: fixed; right: 0; bottom: 0;
	min-width: 100%; min-height: 100%;
	width: auto; height: auto; z-index: -1;
	background-size: auto;
}
.video#moth{
	width:900px;
	height:700px;
	float:right;
	margin-top:5vh;
	
	
}
.video{
	width:40vw;
	height:40vh;
	text-align: center;
}
#pastlife{
	float:right;
	margin-left: 25vw ;
	margin-top: 0px ;
}
.video#john{
	margin-top: 250px;
	float:left;
}

/*--------------*/

/*----Overlay----*/
.btnPopup{
	opacity:0.7;
	cursor: pointer;
	font-size:25px;
	color:white;
	background-color: black;
	border: none;
	font-family: 'Old';
	text-decoration: underline;

}
.btnPopup:hover{
	opacity:1;
}


.overlay{
	position:fixed;
	left:0px;
	top:0px;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height:100%;
	display:none;
	
}

.popup{
	margin:10% auto;
	width:50%;
	height:60%;
	background-color:rgba(0, 0, 0, 0.7);
	border-radius: 5px;
	padding: 3%;
	overflow-y: scroll;

}
.btnClose{
	float: right;
	cursor: pointer;
	opacity: 0.7;
}
.btnClose:hover{
	opacity:1;
}


.overlay1{
	display:none;
}

#popup1{
	text-align:center;
	margin:10% auto;
	width:70%;
	height:70%;
	background-color:rgba(0, 0, 0, 0.7);
	border-radius: 5px;
	padding: 3%;
	overflow-y: scroll;

}
/*---------------*/
#profil{
	position: absolute;
	margin-left: 0;
	margin-right: 0 auto;
	width:728px;
}

.footline-wrap {
	display: inline-block; /*Considere ce block comme du texte ou une ligne, il reagit a text align de #video*/
	text-align: center;
    width: 30vw;
    height: auto;
	margin-top: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff; }

.title {
  padding: 3%;
 /* box-shadow: 0 0 8px rgba(0, 0, 0, .7);*/
  z-index: -2;
}

#title1{

	width:100%;
}
#gallery{
	height:80vh;
	overflow-y:scroll;
	margin-top:100px;
	text-align:center;
}
#title3{
	margin-top:200px;
	width:37vw;
	float:left;
}

#title4{
	margin-top:100px;
	margin-right:50px;
	width:37vw;
	float:right;
	text-align: center;
}

#title5{
	margin-top:100px;
	width:27vw;
	float:left;
}

#ex{
	margin-right:100px;
	margin-top:200px;
	float:right;
	width:600px;
}



.slide {
 	transform: scale(0.9);	
  position: relative;
  padding: 10vh;
  height: 100vh;
  width: 100vw ;
  box-sizing: border-box;
  transform-style: inherit;
}


.header {
	text-align: center;
	font-size: 175%;
	color: #fff;
	text-shadow: 0 2px 2px #000;
	z-index: -2;
}



#title h1 {

}

#slide1 {



}

#slide2 {


}

#slide3 {
    

}

#slide4 {

}

#slide5 {

}



/*.slide:nth-child(2n) .title {
	 z-index: -2;
  margin-left: 0;
  margin-right: auto;
}

.slide:nth-child(2n+1) .title {
	 z-index: -2;
  margin-left: auto;
  margin-right: 0;
}*/


/*img {
  position: absolute;
  top: 50%;
  left: 35%;
  width: 320px;
  height: 240px;
  transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
  padding: 10px;
  border-radius: 5px;
  background: rgba(240,230,220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

img:last-of-type {
  transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}*/