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 url(../img/preloader.gif) no-repeat;*/
	/*background-position: center center;*/
	/*background-size: 100px 100px;*/
	}

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


/* Explications
***************************************************************************************************************/
#explications {
	width: 20vw;
	height: 10vw;
	position:        fixed;
	bottom:          4vw;
	right:           5vw;
	z-index:         6000;
	font-family: 'Billy';
	font-size: 2vw;
	display: none;
	color:black;
}

#explications.show {
	display: block;
}

#explications p {
	display: flex;
	justify-content: flex-start;
	margin: 10px;
}

#explications img {
	width: 3vw;
	height: 3vw;
	align-self: center;
	margin: -.5vw 1vw 0 0;
}


#explications p.main {
	display: none;
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {

	#explications {
		bottom: 70vw;
		left:  2vw;
		font-size: 18px;
	}

	#explications img {
		width: 20px;
		height: 20px;
	}

	#explications p {
		width: 90vw;

		text-align: center;
		justify-content: center;
	}

	#explications p.souris {
		display: none;

	}

	#explications p.saut {
		display: none;
	}

	#explications p.main {
		display: block;
	}

}

/* Fleche
***************************************************************************************************************/
#arrow {
	width:           20vw;
	height:          20vw;
	background:      url(../img/arrow.gif);
	background-size: contain;
	position:        fixed;
	bottom:          4vw;
	right:           5vw;
	z-index:         6000;
	display:         none;
	}

#arrow.show {
	display: block;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	#arrow {
		bottom: 38vw;
		right:  2vw;
		}
		
	}


/* 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, 1);
		background-repeat:       no-repeat;
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter:         blur(5px);
		background-image:        url(../img/rotation-message.png);
		background-size:         50vh 50vh;
		background-position:      center 10vh;
		z-index:                 9999999;
		}
		
	}

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

#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:    -1;
	}

/* 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;
	pointer-events:none;
}

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

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

.character h3 {
	margin-bottom: 1em;
	}

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

.character .content {
	display: none;
	}

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

.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);
	}

.character .char, .character .gutter , .character .row {
	height: 100%;

}

.character .column {
	display: flex;
	flex-direction: column;
	justify-content: center;

	height: 100%;
}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	.character {
		width:  40vw;
		height: 40vw;
		}
	
	.character.zoom .content {
		width:  100vw;
		height: 100vh;
		top:    0;
		left:   0vw;
		margin: 0 0vw;
		padding: 0;
		}
	
	.character.zoom .content .gutter{
	overflow-y: auto;
		overflow-x: hidden;
		padding: 2em 1em 8em;
		}
	
	}


.character.jump1 {
	
	animation-name:            jump1;
	animation-duration:        .3s;
	animation-timing-function: ease;
	animation-delay:           0s;
	animation-iteration-count: 1;
	animation-direction:       normal;
	}

@keyframes jump1 {
	0% {
		-webkit-transform: translateY(0);
		transform:         translateY(0);
		}
	
	50% {
		-webkit-transform: translateY(-10vh);
		transform:         translateY(-10vh);
		}
	
	900% {
		-webkit-transform: translateY(2vh);
		transform:         translateY(2vw);
		}
	
	100% {
		-webkit-transform: translateY(0);
		transform:         translateY(0);
		}
	}

.character.jump2 {
	
	animation-name:            jump2;
	animation-duration:        .4s;
	animation-timing-function: ease;
	animation-delay:           0s;
	animation-iteration-count: 1;
	animation-direction:       normal;
	}

@keyframes jump2 {
	0% {
		-webkit-transform: translateY(0);
		transform:         translateY(0);
		}
	
	50% {
		-webkit-transform: translateY(-20vh);
		transform:         translateY(-20vh);
		}
	
	900% {
		-webkit-transform: translateY(2vh);
		transform:         translateY(2vw);
		}
	
	100% {
		-webkit-transform: translateY(0);
		transform:         translateY(0);
		}
	}

.character.jump3 {
	
	animation-name:            jump3;
	animation-duration:        .1s;
	animation-timing-function: ease;
	animation-delay:           0s;
	animation-iteration-count: 1;
	animation-direction:       normal;
	}

@keyframes jump3 {
	0% {
		-webkit-transform: translateY(0);
		transform:         translateY(0);
		}
	
	50% {
		-webkit-transform: translateY(-5vh);
		transform:         translateY(-5vh);
		}
	
	900% {
		-webkit-transform: translateY(2vh);
		transform:         translateY(2vw);
		}
	
	100% {
		-webkit-transform: translateY(0);
		transform:         translateY(0);
		}
	}


/* ELEMENTS
***************************************************************************************************************/
.item {
	height: 83vh;
	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: 0vw;
	padding:       1em;
	height:        fit-content;
	box-shadow:    0 4px 20px black;
	border:        10px solid #333
	
	}

.item .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 .detail {
	display: none;
	}

.content.zoom {
	position:  fixed;
	width:     94vw;
	height:    92vh;
	top:       2vh;
	left:      2vw;
	padding:   0;
	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;
	right:    2vw;
	position: absolute;
	z-index:  1000;
	}

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

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

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

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

.bar {
	width:         30px;
	background:    #333;
	margin:        0 auto;
	border-radius: 0;
	}

.bar.size1 {
	height: 10vh;
	}

.bar.size2 {
	height: 20vh;
	}

.bar.size3 {
	height: 30vh;
	}

.phylactere {
	
	font-family: "Billy";
	font-weight: bold;
	background:  url(../img/phylactere-vertical-bg.png) no-repeat;
	display:     flex;
	
	}

.phylactere .texte {
	margin:        0 0 0 23px;
	background:    white;
	border-top:    4px solid black;
	border-right:  4px solid black;
	border-bottom: 4px solid black;
	padding:       1em;
	word-break: break-word;

 -webkit-hyphens: auto;

 -moz-hyphens: auto;

 -ms-hyphens: auto;

 -o-hyphens: auto;

 hyphens: auto;
	}

.phylactere .texte, #p-detail .phylactere .texte a {
	color: #333;
	}

#p-detail .phylactere .texte a {
	text-decoration: underline;
	}

.commentaire {
	margin: 0 0 8vh 0;
	}

.content.zoom img.character-small {
	height: 10vh;
	/*float:  right;*/
	}

.descr {
	line-height: 1.5em;
	}

.descr a {
	text-decoration: underline;
	}

.col-descr {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}


/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	.item {
		height: 70vh;
		
		}
	
	
	.item.milestone, .item.portfolio {
		width:     80vw;
		max-width: 80vw;
		}
	
	
	.item.portfolio img {
		max-width: 60vw;
		}
	
	.content.zoom {
		position: fixed;
		width:    100vw;
		height:   100vh;
		top:      0vh;
		left:     0vw;
		padding:  0;
		margin:   0;
		border:   0;
		}
	
	.content.zoom .detail {
		padding: 2em 0em 4em;
		}
	
	.item.milestone .content.zoom {
		padding-bottom: 4em;
		}
	
	.item.milestone  .content.zoom .detail {
		padding: 2em .5em 4em;
		}
	
	.content.zoom img:not(.character-small) {
		margin: 0 0 1em 0;
		max-width: 100%;
		}

	
	.bar {
		width: 10px;
		}
	
	.content.zoom img.character-small {
		margin: 0 0 0 -20px;
		}
		
	}

/* ANNEES
***************************************************************************************************************/
.year {
	
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	z-index:         -1;
	margin:          0 5vw;
	}

.year h3 {
	font-weight: 900;
	color:       black;
	font-size:   10vw;
	margin:      0;
	font-family: 'Billy';
	font-weight: 100;
	}

.year.fixed h3 {
	position: fixed;
	top:      0;
	left:     10vw;
	
	}

.visuel {
	width: 100%;
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	.year h3 {
		font-size: 15vw;
		}
		
	}

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

.outro {
	justify-content: center;
	}

.cover img {
	width:  20vw;
	margin: 5vh auto 0;
	}

.cover h1 {
	font-size:      10vw;
	margin:         0;
	padding:        0;
	font-family:    'Billy';
	font-weight:    bold;
	text-transform: uppercase;
	line-height:    1em;
	color:          #FFF203;
	text-shadow:    0 8px 20px rgba(0, 0, 0, .5);
	}

.cover h2 {
	font-size:   2.8vw;
	margin:      0;
	padding:     0;
	font-family: 'Bw Nista Grot Bd', sans;
	line-height: 1em;
	color:       #FFF203
	}

.content h3 {
	font-family:    'Bw Nista Grot Bk', sans;
	text-transform: uppercase;
	font-size:      3vw;
	}

.content h4 {
	font-family:    'Bw Nista Grot Th', sans;
	text-transform: uppercase;
	font-size:      2vw;
	margin:         0;
	padding:        0;
	}

.content.zoom h3 {
	font-family:    'Bw Nista Grot Bk', sans;
	text-transform: uppercase;
	font-size:      3vw;
	margin:         12px 0 1em;
	}

.content.zoom h4 {
	font-family:    'Bw Nista Grot Th', sans;
	text-transform: uppercase;
	font-size:      2vw;
	
	
	padding:        0;
	}

.ghost {
	padding: 1em 2em;
	color:black;
	background: #FFF203;
	color:black;
	border-radius: 8px;
	display: block;
	margin: 2em auto;
	font-family: "Billy";
	font-weight: bold;
	border:4px solid black;
	}

.ghost:hover {
	text-decoration: none;
	color:black;
	
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	
	.cover img {
		height: 30vh;
		width:  auto;
		margin: 5vh auto 0;
		}
	
	.cover h1 {
		font-size: 15vw;
		}
	
	.cover h2 {
		font-size: 4vw;
		}
	
	
	.content h3 {
		font-size: 8vw;
		}
	
	.content h4 {
		font-size: 6vw;
		margin:    0 0 6px 0;
		}
	
	.content.zoom h3 {
		font-size: 8vw;
		}
	
	.content.zoom h4 {
		font-size: 6vw;
		}
	}


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

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

#p-detail h3 {
	font-size:      6vw;
	text-transform: uppercase;
	font-family:    'Bw Nista Grot Bk', sans-serif;
	text-align:     center;
	padding:        0 1em;
	line-height:    1.1em;
	}

#p-detail h4 {
	font-size:      2vw;
	line-height:    1.2em;
	text-align:     center;
	margin:         0em auto 2em;
	text-transform: initial;
	}

#p-detail h4 p {
	line-height:    1.5em;
	text-align:     center;
	text-transform: initial;
	}

#p-detail h4 a {
	text-decoration: underline;
	}

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

#p-detail p {
	margin-bottom: 6px;
	}

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

#p-detail a {
	color: black;
	}

#p-detail .actions {
	display:     block;
	
	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
	}

.p-infos {
	margin:      10vh auto 5vh;
	padding:     1em 0 3em;
	border-top:  1px solid rgba(0, 0, 0, .5);
	font-size:   80%;
	line-height: 1.2em;
	}


.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;
	
	}

.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;
	
	}

/* MOBILE */
@media screen
and (min-device-width: 320px)
and (max-width: 568px) {
	.btn-close i.fa {
		font-size: 150%;
		padding:   .2em;
		z-index:   1000000
		}
	
	#p-detail h4 {
		font-size: 5vw;
		}
	
	.p-infos .columns {
		margin-bottom: 2em;
		font-size: 90%;
		}
	.p-infos .big {
		display: none;
		}
	
	#p-detail .col-visuel {
		order: 0;
		}
	
	#p-detail  .col-contenu {
		order: 1;
		padding-bottom: 5em;
		}
	
	}

/* TELECHARGEMENTS
***************************************************************************************************************/
.downloads {
	font-size: 75%;
	}

.downloads h5 {
	font-family:    "Bw Nista Grot xBd", sans;
	text-transform: uppercase;
	margin-top:     2em;
	}

.downloads p {
	line-height: 1.3em;
	margin:      .5em 0;
	}

.downloads a {
	font-weight:    bold;
	padding-bottom: 9px;
	}