body, html {
	margin:  0;
	padding: 0;
	width:   100vw;
	height: 100%;
	max-height:  100vh;
	overflow-y: hidden;
	position: fixed;
	-webkit-overflow-scrolling: initial;
	font-family:    'Bw Nista Grot Rg', sans;
	font-size: 24px;
	}

/* CHARGEMENT
***************************************************************************************************************/
#loading {
	position: fixed;
	top:0;
	left:0;
	width: 100vw;
	height: 100vh;
	z-index: -1000000;
	background: black;
	}

.preload #loading {
	z-index: 1000;
	}

/* ORIENTATION
***************************************************************************************************************/

#rotation-message {
	display: none;
	}

@media only screen and  (max-device-width: 800px) and (orientation: landscape) {

	
	#rotation-message {
		display: block;
		position: fixed;
		top:0;
		left:0;
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,.8);
		background-repeat: no-repeat;
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
		background-image: url(../img/rotation-message.png) ;
		background-size: 70vh 70vh;
		background-position: center center;
		z-index: 9999999;
		}
		
	}

/* STRUCTURE
***************************************************************************************************************/
#wrapper {
	width:      100vw;
	max-height:     100vh;
	overflow-y: hidden;
	z-index:    10;
	
	}

#scene {
	height:   100vh;
	/*width:   600vw;*/
	width:     fit-content;
	display:   flex;

	
	}



/* DECORS
***************************************************************************************************************/
.background {
	height:              80vh;
	/*width: 600vw;*/
	background-size:     contain;
	background-position: left bottom;
	top:                 0;
	left:                0;
	position:            fixed;

	
	}

#mountains-1 {
	background-repeat: no-repeat;
	background-position: left bottom;
	z-index:           -10
	}

#mountains-2 {
	background-repeat: no-repeat;
	z-index:           -20
	}

#clouds-1 {
	background-repeat: no-repeat;
	z-index:           -30;
	/*filter:           blur(5px)*/
	}

#clouds-2 {
	background-repeat: no-repeat;
	z-index:           -40;
	/*filter:           blur(10px)*/
	}

#sky {
	position:   fixed;
	top:        0;
	left:       0;
	width:      100vw;
	height:     80vh;
	background: #4588e6;
	z-index:    -9000;
	
	}

#ground {
	position:   fixed;
	bottom:     0;
	left:       0;
	width:      100vw;
	height:     30vh;
	background: #6a543f;
	z-index:    -9000;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	.background {
		height: 80vh;
		}
	
	/*#sky {*/
	/*	height: 70vh;*/
	/*	}*/
	
	/*#ground {*/
	/*	height: 30vh;*/
	/*	}*/
	}

/* PERSONNAGES
***************************************************************************************************************/
.character {
	width:           20vw;
	height:          20vw;
	background-size: cover;
	position:        fixed;
	z-index:         1000;
	transform-origin: center center;
	}

/*.character.fg {*/
/*	left:   4vw;*/
/*	bottom: 6vh;*/
/*	}*/

/*.character.jm {*/
/*	left:   20vw;*/
/*	bottom: 5vh;*/
/*	}*/

.character img {
	max-width: 100%;
}

.character .content {
	display: none;
}

.character.zoom {
	position: fixed;
	z-index: 10000;
	width: 94vw;
	height: 92vh;
	top:2vh;
	left: 0; !important;
}

.character.bwd {
  transform: scale(-1, 1)
	}

.character.zoom.bwd {
	transform: scale(1, 1)
	}

.character.zoom .content {
	position: fixed;
	display: flex;
	flex-direction: column;
	width: 94vw;
	height: 92vh;
	/*top:2vh;*/
	left: 0vw;
	margin:        0 3vw;
	border-radius: 1vw;
	padding:       1em;
	transition: .5s ease transform;
	transform-origin: center center;
	background: #ffe1b2;
	transform: scale(1,1);
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	.character {
		width:  40vw;
		height: 40vw;
		}
	
	.character.fg {
		left:   5vw;
		bottom: 8vh;
		}
	}

/* ELEMENTS
***************************************************************************************************************/
.item {
	height: 90vh;
	margin: 0 5vw;
	

	}

.item.full {
	flex:   0 0 100vw;
	margin: 0;
	}

.item.milestone {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	align-content:   center;
	max-width:       40vw;
	}

.item .content {
	background:    white;
	margin:        0 2vw;
	border-radius: 1vw;
	padding:       1em;
	height: fit-content;

	}

.item .content:not(.zoom) img{
	max-height: 30vh;
	}

.item.open .content:not(.zoom) {
	cursor: pointer;
}

.item:hover .content:not(.zoom) {
	/*box-shadow: 0 0px 50px white;*/
}

.item.portfolio {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-end;
	align-content:   center;
	margin:          0;
	}

.item.portfolio img {
	max-width: 20vw;
	}

.content {
	/*box-shadow: 0 5px 10px black;*/
	transform-origin: center center;
	transition: 1s ease width;
	/*transform-origin: center center;*/
	/*transform: perspective(0px) rotateY(-25deg) rotateZ(25deg);;*/
	}

.content .detail {
	display: none;
}

.content.zoom {
	position: fixed;
	width: 84vw;
	height: 82vh;
	top:8vh;
	left: 8vw;
	margin: 0;
	z-index: 5000;
	transform: perspective(400px) rotateY(0deg);
}

.content.zoom img {
	max-width: 100%;
}

.content .btn-close {
	display: none;
}

.content.zoom .btn-close, .character.zoom .btn-close {
	display: block;
}

.content.zoom .detail {
	display: block;
	overflow-x: hidden;
	overflow-y: auto;
	height: auto;
}

.content.zoom .gutter {
	display: none;
}

.content.zoom {
	display: flex;
	flex-direction: column;
}

.content.zoom .detail {
	height: 100%;
	width: 100%;
}

.bar {
	width:         10px;
	background:    #4d4d4d;
	margin:        0 auto;
	border-radius: 0;
	}

.bar.size1 {
	height: 10vh;
	}

.bar.size2 {
	height: 20vh;
	}

.bar.size3 {
	height: 30vh;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	.item {
		
		height: 80vh;
		
		}
	}

/* LANGUES
***************************************************************************************************************/
#lang {
	position: fixed;
	top:20px;
	right: 20px;
	background: rgba(255,255,255,.4);
	border-radius: 10px;
	padding: .2em .5em;
	}

#lang a {
	font-family:    Raleway, sans;
	padding: 0 .5em;
	text-align: center;
	color:rgb(96, 200, 201);
	}

#lang a:hover {
	text-decoration: none;
	color:rgb(96, 200, 201);
	}

#lang a.active {
	font-weight: 900;
	color: rgb(255, 25, 190);
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	#lang {
		top:      10px;
		right:    10px;
		font-size: 18px;
		}
}

/* CONTENU
***************************************************************************************************************/
.cover {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	text-align:      center;
	}

.cover h1 {
	font-size:      10vw;
	margin:         0;
	padding:        0;
	font-family:    Raleway, sans;
	font-weight: 900;
	text-transform: uppercase;
	line-height:    1em;
	}

.cover h2 {
	font-size:   2.6vw;
	margin:      0;
	padding:     0;
	font-family: 'Noto Serif', serif;
	font-style: italic;
	line-height: 1em;
	}

.content h3 {
	font-family:    Raleway, sans;
	text-transform: uppercase;
	font-size:      3vw;
	}

.content h4 {
	font-family:    Raleway, sans;
	text-transform: uppercase;
	font-size:      2vw;
	margin:         0;
	padding:        0;
	}


/* PORTFOLIO
***************************************************************************************************************/
.btn-close i.fa {
	color:      black;
	font-size:  300%;
	text-align: right;
	display:    block;
	width:      100%;
	}

/*}*/
/*#p-detail {*/
/*	margin: 10vh auto;*/
/*	max-width: 1200px;*/
/*}*/

/*#p-detail h3 {*/
/*	font-size: 6vw;*/
/*	text-transform: uppercase;*/
/*	font-family:    Raleway, sans;*/
/*	font-weight: 900;*/
/*	text-align: center;*/

/*	line-height: 1.1em;*/
/*}*/

/*#p-detail h4 {*/
/*	font-size: 2vw;*/
/*	line-height: 1em;*/
/*	text-align: center;*/
/*	margin: 2em auto 2em;*/
/*}*/

/*#p-detail h4  p {*/
/*	line-height: 1.3em;*/
/*	text-align: center;*/
/*}*/

/*#p-detail h6 {*/
/*	font-size: 2vw;*/
/*	line-height: 1.1em;*/
/*	margin: 2em auto 1em;*/
/*}*/

/*#p-detail .action-col {*/
/*	display: flex;*/
/*	flex-direction: column;*/
/*	justify-self: center;*/
/*}*/

/*#p-detail a {*/
/*	color:black;*/
/*}*/

/*#p-detail .actions {*/
/*	display: block;*/
/*	font-size: 18px;*/
/*	margin: auto;*/
/*	line-height: 1.3em;*/
/*}*/

/*#p-detail .actions span {*/
/*	margin: 2em 0;*/
/*	display: block;*/
/*	font-size: 100%;*/
/*}*/

/*.p-row {*/
/*	display: flex;*/
/*	margin: 2vh 0;*/
/*}*/

/*#p-detail .row-item {*/
/*	display: flex;*/
/*}*/


/*#p-detail .row-item:nth-child(odd) .col-visuel {*/
/*	order: 0;*/
/*}*/

/*#p-detail .row-item:nth-child(odd) .col-contenu {*/
/*	order: 1*/
/*}*/

/*!*.picto-cltp {*!*/
/*!*    width: 20vw;*!*/
/*!*    position: absolute;*!*/
/*!*    top:10vh;*!*/
/*!*    right: 10vw;*!*/
/*!*}*!*/


/*.p-infos {*/
/*	margin: 10vh auto 10px;*/
/*	padding: 1em 0;*/
/*	border-top: 1px solid rgba(0,0,0,.5)*/
/*}*/



/*.p-infos strong {*/
/*	font-family: "Bw Nista Grot xBd", sans;*/
/*}*/

/*.p-infos strong.big {*/
/*	font-size: 300%;*/
/*}*/


/*.actions {*/
/*	text-align: center;*/
/*	margin: 0px 0 0 0;*/
/*	font-size: 75%;*/
/*	opacity: 1;*/

/*	margin: 10px;*/
/*}*/

/*.actions span {*/
/*	padding: 0 1em;*/
/*	color: rgba(0, 0, 0, .2);*/
/*}*/

/*.actions .action {*/
/*	color: rgba(255, 255, 255, .6);*/
/*	background: rgba(0, 0, 0, .2);*/
/*	padding: 2px 4px;*/
/*	border-radius: 4px;*/

/*	margin: 0 0 0 4px;*/

/*}*/