*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
  font-size: 100%;
  color: #ddd;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizelegibility;
  -moz-osx-font-smoothing: grayscale;
}

@media only screen and (orientation:landscape) {
h1, h2, h3{
	font-family: sans-serif;
	font-size: 4vw;
	line-height: 1.328125;
	font-weight: 900;
   text-shadow: 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000;
   user-select: none;
}
body{
	font-family: sans-serif;
	font-size: 1.5em;
	line-height: 1.57142857;
   user-select: none;
   display: block;
   overflow: auto;
   background-color: #000;
}
.zoola{
   border-radius: 50%;
   height: 10vh;
   width: 10vh;
   user-select: none;
   filter: grayscale(50%);
}
.zoola:hover{
   filter:none;
}
.zoola2{
   border-radius: 50%;
   height: 10vh;
   width: 10vh;
   user-select: none;
}

.arrows {
  width: 60px;
  height: 100px;
  position: absolute;
  left: 90%;
  margin-left: -30px;
  bottom: 60px;
  z-index: 20;
}

.arrows path {
  fill: transparent;
  stroke-width: 5px;  
  animation: arrow 4s 3;
  opacity: 0;
}
.brblock {
   display: none;
}
}
@media only screen and (orientation:portrait) {
h1, h2, h3{
	font-family: sans-serif;
	font-size: 6vw;
	line-height: 1.328125;
	font-weight: 900;
   text-shadow: 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000;
   user-select: none;
}
body{
	font-family: sans-serif;
	font-size: 1.5em;
	line-height: 1.57142857;
   user-select: none;
   display: block;
   overflow: auto;
   background-color: #000;
}
.zoola{
   border-radius: 50%;
   height: 7vh;
   width: 7vh;
   user-select: none;
   filter: grayscale(50%);
}
.zoola:hover{
   filter: none;
}
.zoola2{
   border-radius: 50%;
   height: 7vh;
   width: 7vh;
   user-select: none;
}

.arrows {
  width: 60px;
  height: 100px;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  bottom: 60px;
  z-index: 20;
}

.arrows path {
  fill: transparent;
  stroke-width: 5px;  
  animation: arrow 4s 3;
  opacity: 0;
}
.brblockl {
   display: none;
}
}

.section1 {
  background: #202;
  border-radius: 25px;
}
.section2 {
  background: #020;
  border-radius: 25px;
}
.section3 {
  background: #002;
  border-radius: 25px;
}
.section4 {
  background: #000;
  border-radius: 25px;
}
.section5 {
  background: #200;
  border-radius: 25px;
}

section{
	width: 100%;
	background-position: center;
   display: block;
   overflow: auto;
	&.over{
		position: relative;
		z-index: 10;
	}
	.over-inner{
height:auto;
position: relative;
overflow: auto;
display: block;
transform: translateY(0%);
padding-top: 10vh;
padding-bottom: 10vh;
	}
	.under-inner{
		color: white;
		height: 100vh;
		position: relative;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
		border-radius: 25px;
	}
	.one{
		background-image: url(../gfx1/04.jpg);
   }
	.two{
		background-image: url(../gfx1/02.jpg);
	}
	.three{
		background-image: url(../gfx1/01.jpg);
	}
	.four{
		background-image: url(../gfx1/03.jpg);
	}
	.five{
		background-image: url(../gfx1/07.jpg);
	}
}

.centered{
	position: absolute;
	top: 50%;
	left: 0;
	padding: 0 10%;
	transform: translateY(-50%);
   overflow: auto;
   display: block;
   max-width: 1500px;
}
//waypoints
.fixed{
	position: absolute;
	top: -100%;
	left: -100%;
	opacity: 0;
	transition: opacity 100ms linear;
	z-index: 0;
	margin: 0;
}
.locked{
	position: fixed;
	left: 10%;
	top: 50%;
	transform: translateY(-50%);
	opacity: 1;
	transition: opacity 100ms linear;
}

.linky{
   color: #bdd;
   text-decoration: none;
   user-select: none;
}
.linky:hover {
   color: #ddb;
   text-decoration: underline;
}

@keyframes arrow
{
0% {opacity:0}
10% {opacity:1}
45% {opacity:1}
55% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
  animation-delay:3s;
  stroke: #707;
}

.arrows path.a2 {
  animation-delay:3.5s;
  stroke: #070;
}

.arrows path.a3 { 
  animation-delay:4s;
  stroke: #007;
}
.arrows path.a4 { 
  animation-delay:4.5s;
  stroke: #000;
}

.flashanim {
  animation: flashcursor 1s infinite;
}

@keyframes flashcursor {
  0% {opacity: 0%;}
  49% {opacity: 0%;}
  50% {opacity: 100%;}
  100% {opacity: 100%;}
}