body {overscroll-behavior: none;}

body {
	margin: 0;
	font-family: Monospace;
	font-size: 13px;
	line-height: 24px;
	/*overscroll-behavior: none;*/
	height:100vh;
	font-weight: 100;
	font-family: 'Sawarabi Mincho', sans-serif;
	overflow:hidden;
}

.material-icons{
		font-family: 'Sawarabi Mincho', sans-serif !important;
}

a {
	color: #ff0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

canvas {
	display: block;
	margin: 0 auto;
}

#container{
	display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
	pointer-events: auto;
}

.dg.ac {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 2 !important; /* TODO Solve this in HTML */
}

#overlay {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;

	color: #ffffff;
}

#overlay > div {
	text-align: center;
}

#overlay > div > button {
	height: 20px;
	background: transparent;
	color: #ffffff;
	outline: 1px solid #ffffff;
	border: 0px;
	cursor: pointer;
}

#overlay > div > p {
	color: #777777;
	font-size: 12px;
}


#center{
	width:1px;
	height:1px;
	position:fixed;
	left:50%;
	top:50%;
}

.bar{
	position:fixed;
	background:#f5f5f5;
	width:100vw;
	height:0vh;
	bottom:0;
	z-index: -1;
}

.page{
	position:fixed;
	top:15vh;
	left:15vh;
	z-index: -1;
	font-size:9rem;
	font-weight:400;
}

.scroll{
    position: fixed;
    bottom: 2rem;
    left: 3rem;
    z-index: -1;
    font-size: 1.2rem;
    line-height: 1.5rem;
	color: #323333;
	/*opacity:0;*/
}

.scroll::after{
	content:'';
	position:absolute;
	left:-15px;
	width:1px;
	height:100%;
	top:5px;
	line-height: 1rem;
	background-color:#323333;
	animation: scrollanimate 2.5s infinite;
}

@keyframes scrollanimate {
	0% {height:0%;top:0;}
	25% {height:100%;top:0;}
	26% {height:100%;bottom:0;top:inherit;}
	50% {height:0%;bottom:0;top:inherit;}
	100% {height:0%;bottom:0;top:inherit;}
}


.velocity{
	position:fixed;
	bottom:15vh;
	right:15vh;
	z-index: -1;
	font-size:3rem;
	font-weight:400;
}

.velocityDistance{
	position:fixed;
	bottom:10vh;
	right:10vh;
	z-index: -1;
	font-size:3rem;
	font-weight:400;
}

.distanceBar{
	background:black;
	height:5px;
	width:0px;
	position:fixed;
	bottom:0;
	z-index: 10;
}




.p-relative{
	position:relative;
}

.nb{
	font-size:0.8rem;
	position:absolute;
	right:-15px;
	top:-15px;
}


.prevText.animateTop{
	top:12vh;
}

.nextText.animateTop{
	bottom:18vh;
}

.prevText.animateBottom{
	top:18vh;
}

.nextText.animateBottom{
	bottom:12vh;
}


#clickable{
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	height:50vh;
	background:none;
	position:fixed;
	width:80%;
	cursor:pointer;
	transition: all 0.2s ease-in-out;
}

.clickable{
	cursor:pointer;
	color:#222;
}

.clickable:hover{
	color:#333 !important;
}

.clickable.light{
	color: #eeeeee;
	transition: color 0.2s ease-in-out;
}

.light.clickable:hover{
	color: #dddddd !important;
}

.bloc{
	width:70vw;
	height:100vh;
	position:fixed;
	right:-100%;
	background: #f8f8f8;
	top:0;
	z-index: 10;
}

.logo{
	position:fixed;
	top:2rem;
	left:2rem;
	width:100px;
	/*opacity:0;
	transform:translateX(-20px);*/
}

.logo img{
	width:100%;
}

#open-info{
	position: fixed;
	top:120px;
	right: 0rem;
	z-index: 2;
	transform: translate(33%,-31%);
	transition: all 0.4s cubic-bezier(.73,.15,.41,1.04);
	cursor:pointer;
}

#open-info:hover{
	right:0.5rem;
	transition: all 0.4s cubic-bezier(.73,.15,.41,1.04);
}

#open-info .open-info-text{
	transition: all 0.4s cubic-bezier(.73,.15,.41,1.04);
	left: 20%;
}

#open-info:hover .open-info-text{
	transition: all 0.4s cubic-bezier(.73,.15,.41,1.04); 
	left: 17%;
}

.close-info .close-info-text, .slide-close .close-info-text{
	transition: all 0.4s cubic-bezier(.73,.15,.41,1.04);
	cursor:pointer;
}
.close-info:hover .close-info-text, .slide-close:hover .close-info-text{
	right:6rem;
	transition: all 0.4s cubic-bezier(.73,.15,.41,1.04);
}

.close-info .material-icons, .slide-close .material-icons{
	transition: all 0.4s cubic-bezier(.73,.15,.41,1.04);
}

.close-info:hover .material-icons, .slide-close:hover .material-icons{
	right:0.5rem !important;
	transition: all 0.4s cubic-bezier(.73,.15,.41,1.04);
}

#open-info .material-icons {
    font-size: 20rem;
    color: #eeeeee;
}

.bloc .title{
	font-size: 5rem;
	line-height: 5rem;
	font-weight: 400;
	margin-bottom: 5rem;
	margin-top: 0rem;
	opacity:0;
	color:#777777;
}

.bloc .desc{
	font-size: 0.8rem;
	line-height: 1.8rem;
	letter-spacing: 1.5px;
	opacity:0;
	font-weight: 400;
	color:#777777;
}

.bloc .img{
	height:400px;
	color:white;
	opacity:0;
}

.bloc .img img{
	height:400px;
}

.bloc .bloc-container{
	display:flex;	
	align-items:center;
	height:100vh;
}

.bloc .bloc-content{
	height:400px;
}

.bloc .slide-close .material-icons{
    position: absolute;
    top: 120px;
    right: 0rem;
    font-size: 20rem;
    transform: translate(28%,-30%);
}

.bloc .close-info .material-icons{
    position: absolute;
    top: 120px;
    right: 0rem;
    font-size: 20rem;
    transform: translate(28%,-30%);
}

.bloc .slide-controls{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:3rem;
	display:flex;
}

.bloc .prev-slide{
	margin-right: 50px;
}

.bloc .prev-slide .material-icons{
    font-size: 3rem;
}

.bloc .next-slide .material-icons{
    font-size: 3rem;
}



.intro{
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex;
	-webkit-box-align: center;
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position:fixed;
	height:100vh;
	width:100vw;
	display:flex;
	align-items:center;
	justify-content: center;
	z-index: 100;
}






.intro-logo{
	width: 100px;
	position: relative;
	z-index: 103;
	margin: 0 auto;
}

.intro .intro-text{
	color: black;
	position: relative;
	z-index: 103;
	text-align: center;
	margin-top: 3rem;
	font-weight: 900;
	letter-spacing: 0.3px;
	font-size: 0.8rem;
	cursor: pointer;
	padding: 20px;
}

.bloc .slide-controls{
	display:none !important;
}

.open-info-text{
	position: absolute;
    top: 20%;
    left: 20%;
    font-size: 26px;
}

.close-info-text{
	position: absolute;
    top: 10rem;
    right: 5rem;
    z-index: 2;
    font-size: 26px;
}

.prevText, .nextText{
	width:100%;
	text-align:center;
	position:fixed;
	font-weight: bold;
	font-size: 20rem;
	letter-spacing: 7px;
	color: #eeeeee;
}

.prevText{
top:0vh;	
}

.nextText{
bottom:0vh;
}

.intro-logo.start img{
	animation: intro1 1.5s forwards;
}


.intro-logo img{
	width:100%;
	transform:scale3d(1.2,1.2,1.2);
}

.intro-bar.start{
	animation: intro2 1.2s 1.2s ease-in-out forwards;
}

.intro-bar{
	background:whitesmoke;
	width:100vw;
	position:absolute;
	z-index:101;
	height:100vh;
	top:0%;
	left:0%;
	opacity:1;
}

/* ANIMATIONS */

@keyframes intro1 {
	0% {transform:scale3d(1.2,1.2,1.2);}
	80% {transform:scale3d(1.0,1.0,1.0);opacity:1}
	100% {transform:scale3d(1.0,1.0,1.0);opacity:0}
}

@keyframes intro2 {
	0% {top:0;}
	100% {top:100%;}
}





/* MOBILE TABLETS */
@media (max-width: 1023px) and (orientation:landscape) {
	.bloc .img img{
		margin-top: -100px;
	}

	.bloc .img{
		max-height: 150px;
    	overflow: hidden;
	}
	
	.bloc .slide-close .material-icons, .bloc .close-info .material-icons {
		top: 57vh !important;
		right: 2rem;
	}

	.close-info-text{
		top: 57vh !important;
		right: 2rem;
	}
}


@media (max-width: 1023px) {
	
	body{
		position: fixed;
		height: 100vh;
	}

	canvas{
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		height:initial !important;
	}
	
	
	.logo{
	width:60px;
    top: 1rem;
    left: 1rem;
	}

	.bloc{
		width:80vw;
		height: 90vh;
		top:5vh;
		transform: translateX(-12.5%);
	}

	.bloc .slide-close .material-icons,.bloc .close-info .material-icons{
		top: 1rem;
		right: 1rem;
	}

	.bloc .desc{
		font-size: 0.8rem;
		line-height: 1.5rem;
		letter-spacing: 1.5px;
		font-weight: 100;
		transform: inherit !important;
	}

	.bloc .title{
		font-size: 2rem;
		line-height: 3rem;
		font-weight: 400;
		margin-bottom: 1rem;
		opacity: 0;
		transform: inherit !important;
	}

	.bloc .img{
		width: 100%;
		height:inherit !important;
		position: inherit;
		transform: inherit !important;
		opacity: 1 !important;
	}

	
	.bloc .img img{
		width:100%;
		height:inherit !important;
	}

	.bloc .bloc-container{
		display: inherit;
		align-items: inherit;
		width:auto !important;
		height:auto !important;
		background:inherit;
	}

	.bloc .bloc-content{
		height:inherit;
		padding:20px;
	}


	.bloc{
		display:absolute;
		overflow:scroll;
	}

	.scroll {
		bottom:1rem;
	}

	body{
		overflow:scroll;
	}
	
	#clickable{
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		height: 27vh;
		background: none;
		position: fixed;
		width: 100%;
		cursor: pointer;
	}
	
	
	.prevText, .nextText{
		width:100%;
		text-align:center;
		position:fixed;
		font-weight: bold;
		font-size: 2.5rem;
		letter-spacing: 7px;
		color: #777777;
		/*opacity:0;
		transition: all 0.5s ease-in-out;*/
	}

	.prevText{
		top: 20vh !important;
	}

	.nextText{
		bottom: 20vh !important;
	}


	#open-info .material-icons{
		font-size: 5rem;
	}

	.open-info-text{
		font-size:1rem;
	}
	
	#open-info{
		top:3rem;
		right:2rem;
	}
	
	.scroll{
		font-size:0.8rem;
	}
	
	.intro-logo{
		width:150px;
	}

	.close-info-text{
		position: absolute;
		top: 37vh;
		right: 2rem;
		z-index: 2;
		font-size:1rem;
	}

	.bloc .slide-close .material-icons, .bloc .close-info .material-icons{
		top: 37vh;
		right: 2rem;
		font-size: 5rem;
		filter:inherit !important;
	}

	.nb{
		right: -5px;
		top: -5px;
	}

}

/*
@media (min-resolution: 2dppx) {
		canvas{
			width: 200% !important;
		}
}
*/