@font-face { font-family: 'Vegur'; src: url(style/fonts/Vegur-Light.otf);	}
@font-face { font-family: 'flamenco'; src: url(style/fonts/flamenco.light.ttf);	}
@font-face { font-family: 'BadScript'; src: url(style/fonts/BadScript.ttf);	}
@font-face { font-family: 'RobotoCon'; src: url(style/fonts/RobotoCondensed-Bold.ttf); }
@font-face { font-family: 'RobotoConLt'; src: url(style/fonts/RobotoCondensed-Light.ttf); }

html, body { margin: 0;	padding: 0;	width: 100%; height: 100%; }

body { background-color:	rgba(15, 15, 15, 1);}


/* stop chrome refresh */
html, body { overscroll-behavior-y: none; }

input { display: none; }

* {
    cursor: default;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;	
	
	box-sizing: border-box;
	
	
}

a, input, label, label * { cursor: pointer; }

.persp_cont {
	
	position: absolute;
	width:  100vw;
	height: 100vh;
	
	top: 0;
	left: 0;
	
	overflow-x: hidden;
	overflow-y: hidden;
	
	-webkit-perspective: 3000px;
	perspective: 3000px;
	
	
}
.persp_cont,
.persp_cont * {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}



.cube {
	position: absolute;
	width:  80vw;
	height: 80vh;	
	left:    10vw;
	top:     13vh;

	transition: transform .5s linear 0s;
}


.cb_side {	
	position: absolute;
	width:  100%;
	height: 100%;	
	left: 0;
	border: 0px solid red;	
	background-color: #DDD;	

	padding: 10vh 10vw;
}

.cb_side .content {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.cube 	{ transform: 				 translateZ(-40vh); }
.front 	{ transform: 				 translateZ( 40vh); }
.back 	{ transform: rotateX(180deg) translateZ( 40vh); }
.top 	{ transform: rotateX( 90deg) translateZ( 40vh); }
.bottom { transform: rotateX(-90deg) translateZ( 40vh); }


.front  .content:nth-of-type(1) { background-image: url(backs/pascal-meier-Sugqxd9LiBI-unsplash.jpg); }
.front  .content:nth-of-type(2) { background-image: url(backs/brent-de-ranter-VNQl_4OmZJw-unsplash.jpg); }
.front  .content:nth-of-type(3) { background-image: url(backs/pascal-meier-ZQAXQ-ByZpo-unsplash.jpg); }

.bottom   .content:nth-of-type(1) { background-image: url(backs/dan-freeman-WHPsxhB4mWQ-unsplash.jpg); }
.bottom   .content:nth-of-type(2) { background-image: url(backs/christopher-burns-5if9x4l6E-8-unsplash.jpg); background-position: 50% 99%; }
.bottom   .content:nth-of-type(3) { background-image: url(backs/tandem-x-visuals-2yNMsw-A2eI-unsplash.jpg);  background-position: 50% 20%;}

.back .content:nth-of-type(1) { background-image: url(backs/akira-hojo-KZdqA5QtWFU-unsplash.jpg); }
.back .content:nth-of-type(2) { background-image: url(backs/thanai-manasathit-9DxqNq2GOz8-unsplash.jpg); }
.back .content:nth-of-type(3) { background-image: url(backs/faris-mohammed-d30sszrW7Vw-unsplash.jpg); }

.top    .content:nth-of-type(1) { background-image: url(backs/alex-eckermann-W_K6j6OQBDg-unsplash.jpg); }
.top    .content:nth-of-type(2) { background-image: url(backs/trae-gould-JCGgsVj4qtQ-unsplash.jpg); background-position: 50% 90%; }
.top    .content:nth-of-type(3) { background-image: url(backs/natalya-letunova-LKs42QOVRQ0-unsplash.jpg); }


.content {
	position: absolute;
	width: 100%;
	height: 100%;
	top:  0;
	left: 0;
	padding: 10vh 10vw;
	padding: 0;


	border: 1px solid #000;
	background-color: rgba(249, 249, 249, 0);
	
	z-index: 1;
}

.content h1 { display: none; }

.content a { position: absolute; bottom:  1vw; right:  1vw; }



.head {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	top: 0;
	left: 0;
	width: 100vw;
	height: auto;
	
	background-color: #333;
	color: #FFF;
	font-family: 'flamenco';
	
	padding: .5vw 1vw;
}


.head span { 
	font-size: 1.5vw;
}
.head a { 
	display: inline-block;
	
	text-decoration: none;
	color: #FFF;
	cursor: pointer;
}
.head a span {	
	border: 1px solid rgba(0,0,0,0);
}


.head * { 
	box-sizing: content-box;
}

.head a:hover > span:nth-of-type(2) {
	/* text-decoration: underline solid #FFF; */
	
	border-bottom: 1px solid #CCC;
}

a * { cursor: pointer; }

.head h1 { 
	display: inline-block;
	font-size: 3.0vw;
}

.hintbox {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	
	height: 30%;
	width: 100%;
	top: 35%;

}

.hint {
	background-color: #333;
	color: #FFF;
	font-family: 'flamenco';	
	font-size: 2.0vw;
	padding: 2vw;
	border-radius: 2vw;
	
	opacity: 1;
	transition: opacity .5s linear 2s;
}

.hideme {
	opacity: 0;
}

.hidebox {
	z-index: -99;
}

.scrollbar {
	position: fixed;
	right: 0;
	top: 5vw;
	height: calc(100vh - 6vw);

	width: 2vw;
	border: 0px solid green;
	color: #FFF;	
}

.scrollbut {
	position: absolute;
	height: 8%;
	width: 50%;
	right: 20%;
	top: 0;
	background-color: #333;	
	border-radius: .5vw;
	transition: transform .5s linear 0s;
}

.posout {
	position: fixed;
	left: 1vw;
	bottom: 1vw;
	background-color: #333;	
	color: #FFF;
	font-family: 'flamenco';	
	font-size: 1.2vw;
	
	border-radius: .5vw;
	text-align: center;	
	width: 5vw;
	padding: 1vh 0;
	
}