html, body {
	margin: 0; 
	height: 100%; 
	overflow: hidden;
	user-select: none; /* supported by Chrome and Opera */
	   -webkit-user-select: none; /* Safari */
	   -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Firefox */
	   -ms-user-select: none; /* Internet Explorer/Edge */
}

body{
	margin:0;
	width:100%;
}

/* --------------------------------------------------------------------------- IMG */
.imgWrapper{
	width: 100%;
	height: 100%;
}

.imgWrapper img{
	position: absolute;
	z-index: -1;
}

.imgSpliced{
	width: 100%;
}

.imgDivSpliced{
	width:10%;
	height: 60%;
	overflow: hidden;
	position: absolute;
}

#imgDiv1{
	top: 0;
	left: 0;
}

#splice1{
	top: -150%;
	left: 0;
	animation: upDown 3s infinite linear;
}

#imgDiv2{
	top: 10%;
	left: 10%;
}

#splice2{
	top: -150%;
	left: 0;
	animation: upDown 3s infinite linear;
	animation-delay: .5s;
}

#imgDiv3{
	top: 20%;
	left: 20%;
}

#splice3{
	top: -150%;
	left: 0;
	animation: upDown 3s infinite linear;
	animation-delay: 1s;
}

#imgDiv4{
	top: 30%;
	left: 30%;
	width: 60%;
	height: 60%;
	overflow: hidden;
	position: absolute;
}

.imgFull{
	top: -150%;
	width: 100%;
	left: 0;
	animation: upDown 3s infinite linear;
	animation-delay: 1.5s;
}

.orange{
	background-color: #f4df2f;
	height: 100%;
	left: 0;
	position: absolute;
	top: -100%;
	width: 90%;
	z-index: -5;
	animation: upDownOrange 30s infinite linear;
}


/* --------------------------------------------------------------------------- COMPUTER TEXT */

h1{
	color: #fff;
	font-family: paralucent, sans-serif;
	font-style: normal;
	font-weight: 500;
	letter-spacing: .15em;
	margin: 0;
	padding: 0;
	line-height: 1.4;
	font-size: 14vh;
}

.text{
	position: absolute;
}

#textSplice1, #textSplice2, #textSplice3{
	width: 10%;

	white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
	height: 100%;
}

#textSplice1{
	left: 0;
}

#textSplice2{
	left: 10%;
	top: 20%;
}

#textSplice3{
	left: 20%;
	top: 40%;
}

#textSplice4{
	left: 30%;
	top: 60%;
	width: 60%;

	white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
	height: 100%;
}

.h1text{
	position: absolute;
	left: 0;
}

#h1text1{
	top: 0;
	animation: upDown 3s infinite linear;
}

#h1text2{
	left: -99%;
	animation: upDown 3s infinite linear;
	animation-delay: .5s;
}

#h1text3{
	left: -198%;
	animation: upDown 3s infinite linear;
	animation-delay: 1s;
}

#h1text4{
	left: -50%;
	animation: upDown 3s infinite linear;
	animation-delay: 1.5s;
}

/* --------------------------------------------------------------------------- COMPUTER TEXT ANIMATION */

@keyframes upDown{
  0% {
    top: -150%;
  }
  45% {
    top: -5%;
  }
  65%{
  	top: 15%;
  }
  90% {
  	top: 100%;
  }
  100% {
  	top: 100%;
  }
}

@keyframes upDownOrange{
  0% {
    top: -100%;
  }
  100% {
  	top: 100%;
  }
}



/* --------------------------------------------------------------------------- USER BUTTON */

a{
	color: #000;
	font-family: orator-std, monospace;
	font-size: 1em;
	text-decoration: none;
	width: 100%;
	position: relative;
}

.userButton1 a{
	animation: upDownBtn 2.5s infinite linear;
	width: 100%;
	height: 100%;
}

.userButton2 a{
	animation: upDownBtn 2.25s infinite linear;
	animation-delay: .22s;
}

.userButton{
	width: 20%;
	position: absolute;
	margin:0;
	padding: 15px 25px;
	box-shadow: 10px 10px #fff;
	border: 3px solid #fff;
	overflow: hidden;
}

.userButton1{
	bottom: 54%;
	left: 25%;
}

.userButton2{
	top: 12%;
	right: 9%;
}

.userButton2 a:hover, .userButton1 a:hover{
	background-color: #14b6ce;
	animation-play-state: paused;
}


@keyframes upDownBtn{
  0% {
    top: -150%;
  }
  45% {
    top: -5%;
  }
  65%{
  	top: 15%;
  }
  90% {
  	top: 100%;
  }
  100% {
  	top: 120%;
  }
}