html, body, .canvas, .filter {
	width: 100%;
	height: 100%;
}

body {
	width:300vw;
	margin: 0;
	font-family: "Helvetica", sans-serif;
	/*overflow: hidden;*/
	background-color: rgb(40, 40, 40);
    cursor: url('../content/cursor-default.png'), auto;
}

img {
	vertical-align: bottom;
	pointer-events: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none; 
}

a {
	color:black;
}

a:hover{text-decoration: underline;}

button.text{
		position: absolute;
		top:0;left:0;
		z-index:9;
		margin:10px;
		width:65px;height:65px;
		background:white;
		background-size:20px;
		font-size:30px;
		border:0;
		cursor: url('../content/cursor-default.png'), auto;
	}

#text{
	position: fixed;
	top:50%;left:50%;
	-webkit-transform:translateX(-50%) translateY(-50%);
	transform:translateX(-50%) translateY(-50%);
	z-index:999999;
	width:50vw;height:auto;
	background: white;
	padding:30px 45px;
	line-height: 140%;
	max-height:500px;
	max-width:450px;
	overflow: scroll;

	-moz-box-shadow: 0 0 30px black;
	-webkit-box-shadow: 0 0 30px black;
	box-shadow: 0 0 30px black;
}

#text.hide{
	top: auto;
	left: 0;
  	bottom: 0;
  	-webkit-transform: translateX(-90%) translateY(90%);
	transform: translateX(-90%) translateY(90%);
}

	#text button{
		position: absolute;
		top:0;right:0;
		margin:10px;
		width:30px;height:30px;
		background:url(../images/close.png) center no-repeat;
		background-size:20px;
		border:0;
		cursor: url('../content/cursor-default.png'), auto;
		outline: 0;
	}

@media screen and (max-width:600px){
#text{
position:absolute;
top:0;left:0;
padding:20px;
margin:10px;
width:80vw;height:1100px;
-webkit-transform:translateX(0%) translateY(0%);
	transform:translateX(0%) translateY(0%);

}
}

#text.hide button{
	background:url(../images/q.png) center no-repeat;
	background-size:30px;
	background-position: -3px;
}

#loopVert{
	position: relative;
	float:left;
	height:100vh;
	width:100%;
}


.filter {
	position: relative;
	background: linear-gradient(rgba(30, 30, 30, 0.7) 60%, rgba(30, 30, 30, 0.5) 70%);
	z-index: 999;
}

.canvas {
	position: relative;
	float:left;
	width:100vw;
	height:80vw;
	/*overflow:hidden;*/
	-webkit-transform:none!important;
	transform:none!important;
}

.cont-img {
	position: absolute; 
}

.center {
	position: absolute;
	width:300vw;
	height:100%;
}

.canvas { z-index: 1; }

.c { z-index: 99999; }
.t, .l, .r, .b { z-index: 99; }
.lt, .rt, .lb, .rb { z-index: 9; }

/*temp*/

[class*="cmd"] { position: relative;float:left; z-index: 99999999;font-size: 50px; line-height: 12px; }
.cmd-t { top: 0; left: 10%; cursor: url('../content/cursor-n.png'), n-resize; width: 80%; height: 10%;}
.cmd-r { top: 0; right: 0; cursor: url('../content/cursor-e.png'), e-resize; width: 10%; height: 100%;}
.cmd-b { bottom: 0; left: 10%; cursor: url('../content/cursor-s.png'), s-resize; width: 80%; height: 10%;}
.cmd-l { top: 0; left: 0; cursor: url('../content/cursor-w.png'), w-resize; width: 10%; height: 100%;}
img { display: block; width: 100%; height: auto;-webkit-transform:scale(0);transform:scale(0); -webkit-transition:500ms;transition:500ms;}
img.a {-webkit-transform:scale(1);transform:scale(1)}


.t, .l, .c, .r, .b, .lt, .rt, .lb, .rb { display: block; }
.lt, .rt, .lb, .rb {  }

.block {
	position: absolute;
	-moz-box-shadow: 0 0 30px black;
	-webkit-box-shadow: 0 0 30px black;
	box-shadow: 0 0 30px black;
}

.block:hover {
	cursor: url('../content/cursor-pdf.png'), alias;
}

/*    */

.l0 { left: 0; }
.l5 { left: 5%; }
.l10 { left: 10%; }
.l15 { left: 15%; }
.l20 { left: 20%; }
.l25 { left: 25%; }
.l30 { left: 30%; }
.l35 { left: 35%; }
.l40 { left: 40%; }
.l45 { left: 45%; }
.l50 { left: 50%; }
.l55 { left: 55%; }
.l60 { left: 60%; }
.l65 { left: 65%; }
.l70 { left: 70%; }
.l75 { left: 75%; }
.l80 { left: 80%; }
.l85 { left: 85%; }
.l90 { left: 90%; }
.l95 { left: 95%; }

.t-5 { top: -5%; }
.t-10 { top: -10%; }
.t-15 { top: -15%; }
.t-20 { top: -20%; }
.t-25 { top: -25%; }
.t-30 { top: -30%; }
.t-35 { top: -35%; }
.t-40 { top: -40%; }
.t-45 { top: -45%; }
.t-50 { top: -50%; }
.t-55 { top: -55%; }
.t-60 { top: -60%; }
.t-65 { top: -65%; }
.t-70 { top: -70%; }

.t0 { top: 0; }
.t5 { top: 5%; }
.t10 { top: 10%; }
.t15 { top: 15%; }
.t20 { top: 20%; }
.t25 { top: 25%; }
.t30 { top: 30%; }
.t35 { top: 35%; }
.t40 { top: 40%; }
.t45 { top: 45%; }
.t50 { top: 50%; }
.t55 { top: 55%; }
.t60 { top: 60%; }
.t65 { top: 65%; }
.t70 { top: 70%; }
.t75 { top: 75%; }
.t80 { top: 80%; }
.t85 { top: 85%; }
.t90 { top: 90%; }
.t95 { top: 95%; }

.w5 { width: 5%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w45 { width: 45%; }
.w50 { width: 50%; }
.w55 { width: 55%; }
.w60 { width: 60%; }
.w65 { width: 65%; }
.w70 { width: 70%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w85 { width: 85%; }
.w90 { width: 90%; }
.w95 { width: 95%; }

.h5 { height: 5%; }
.h10 { height: 10%; }
.h15 { height: 15%; }
.h20 { height: 20%; }
.h25 { height: 25%; }
.h30 { height: 30%; }
.h35 { height: 35%; }
.h40 { height: 40%; }
.h45 { height: 45%; }
.h50 { height: 50%; }
.h55 { height: 55%; }
.h60 { height: 60%; }
.h65 { height: 65%; }
.h70 { height: 70%; }
.h75 { height: 75%; }
.h80 { height: 80%; }
.h85 { height: 85%; }
.h90 { height: 90%; }
.h95 { height: 95%; }

.l{
	/*top:40%;left:50%;*/
}