@font-face {
  font-family: "Arial Black";
  src: url("fonts/@font-face/8984ea7fcbebdcfe77fbbc1b86e7cfe6.woff") format("woff");
  src: url("fonts/@font-face/8984ea7fcbebdcfe77fbbc1b86e7cfe6.woff2") format("woff");
}

body {
	overflow-x: hidden;
	overflow-y: scroll;
	width: auto;
}

h1 {
	font-family: "Arial Black", sans-serif;
/*	font-weight: 700;
*/	font-size: 200pt;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 { /*reset for mobile browsers */
	font-weight: normal;
}

p {
	font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;;
	font-size: 20pt;
	color: black;
	text-transform: uppercase;
}

.about {
  display: inline-block;
	position: relative;
	z-index: 10;
	text-align: center;	
	max-width: 625px;
	margin-top: 10px;
	left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -5%);
  transform: translate(-50%, -5%);
}

.about-block {
  margin-top: 5%;
}

.back-button {
	position: fixed;
	text-align: left;
	line-height: 0;
	z-index: 20;
	top: 0;
	margin-left: 10px;
}

iframe {
  display: block;
  margin:0 auto;
  width:70vw;
}

.type {
  z-index: 10;  
}

#letter1 .type {
	display: block;
	margin: 0px;
	padding-top: 93px;
	padding-left: 155px;
	position: absolute;
}

#letter2 .type {
	display: block;
	margin: 0px;
	padding-top: 210px;
	padding-left: 86px;
	position: absolute;
}

#letter3 .type {
	display: block;
	margin: 0px;
	padding-top: 139px;
	padding-left: 86px;
	position: absolute;
}

#letter4 .type-before {
	display: block;
	margin: -41px;
	padding-top: 199px;
	position: absolute;
}

#letter4 .type {
	display: block;
	margin: -219px;
	padding-left: 399px;
	position: absolute;
}

#letter5 .type {
  display: block;
  margin: 0px;
  padding-top: 151px;
  padding-left: 136px;
  position: absolute;
}

a {
/*	text-decoration: none;
	color: inherit;*/
	color: black;
}

.letters {
	text-align: center;
	z-index: 10;
}

.letter {
	display: inline-block;
	margin: 0 5% 0 5%;
}

#letter1 {
	text-decoration: none;
	font-style: normal;
/*	color: #FF3000;
*/}

#letter2 {
/*	color: #FFC612;
*/}

#letter3 {
/*	color: #0098FF;
*/}

#letter4 {
/*	color: #67C900;
*/}

#letter5 {
/*	color: #797F00;
*/}

#letter6 {
/*	color: #8E8888;
*/}

a:hover {
	cursor: hand;
}

.rect1, .rect2, .rect3, .rect4, .rect5, .rect6, .rect7, .rect8, .rect9, .rect10, .rect11, .rect12 {
	pointer-events: none;
	position: fixed;
}

.rect1 {
  animation: xAxisA 5.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  	z-index: -10;
  	left: 50%;
}

.rect1::after {
	content: '';
  	display: block;
  	width: 200px;
  	height: 150px;
  	background-color: #FF3000;
  	animation: yAxisA 5.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes yAxisA {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(1000px);
  }
}

@keyframes xAxisA {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(-1000px);
  }
}

.rect2 {
  animation: xAxisB 10.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  	z-index: 20;
  	left: 20%;
  	top: 50%;
}

.rect2::after {
	content: '';
  	display: block;
  	width: 200px;
  	height: 150px;
  	background-color: #FFC612;
  	animation: yAxisB 10.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes yAxisB {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(-300px);
  }
}

@keyframes xAxisB {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(2000px);
  }
}

.rect3 {
  animation: xAxisC 12.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  	z-index: 15;
  	left: 20%;
  	top: 10%;
}

.rect3::after {
	content: '';
  	display: block;
  	width: 200px;
  	height: 150px;
  	background-color: #0098FF;
  	animation: yAxisC 12.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes yAxisC {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(800px);
  }
}

@keyframes xAxisC {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(-100px);
  }
}

.rect4 {
  animation: xAxisD 5.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  	z-index: -20;
  	left: 70%;
  	top: 90%;
}

.rect4::after {
	content: '';
  	display: block;
  	width: 200px;
  	height: 150px;
  	background-color: #67C900;
  	animation: yAxisD 5.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes yAxisD {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(-800px);
  }
}

@keyframes xAxisD {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(400px);
  }
}

.rect5 {
  animation: xAxisE 1.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  	z-index: 25;
  	left: 70%;
  	top: 20%;
}

.rect5::after {
	content: '';
  	display: block;
  	width: 200px;
  	height: 150px;
  	background-color: #797F00;
  	animation: yAxisE 15.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes yAxisE {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(900px);
  }
}

@keyframes xAxisE {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(-100px);
  }
}

.rect6 {
  animation: xAxisF 10.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  	z-index: -25;
  	left: 10%;
  	top: 20%;
}

.rect6::after {
	content: '';
  	display: block;
  	width: 200px;
  	height: 150px;
  	background-color: #8E8888;
  	animation: yAxisF 6.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes yAxisF {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(-300px);
  }
}

@keyframes xAxisF {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(100px);
  }
}

.rect7 {
  animation: xAxisG 12.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  	z-index: -10;
  	left: 90%;
  	top: 90%;
}

.rect7::after {
	content: '';
  	display: block;
  	width: 200px;
  	height: 150px;
  	background-color: #FF3000;
  	animation: yAxisG 6.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes yAxisG {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(-400px);
  }
}

@keyframes xAxisG {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(-100px);
  }
}

.rect8 {
  animation: xAxisH 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  	z-index: 20;
  	left: 50%;
  	top: 80%;
}

.rect8::after {
	content: '';
  	display: block;
  	width: 200px;
  	height: 150px;
  	background-color: #FFC612;
  	animation: yAxisH 22.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes yAxisH {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(-900px);
  }
}

@keyframes xAxisH {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(200px);
  }
}

.rect9 {
  animation: xAxisI 3.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  	z-index: -18;
  	left: 90%;
  	top: 10%;
}

.rect9::after {
	content: '';
  	display: block;
  	width: 200px;
  	height: 150px;
  	background-color: #0098FF;
  	animation: yAxisI 12.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes yAxisI {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(-80px);
  }
}

@keyframes xAxisI {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(-160px);
  }
}

.rect10 {
  animation: xAxisJ 11.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  	z-index: -18;
  	left: 5%;
  	top: 85%;
}

.rect10::after {
	content: '';
  	display: block;
  	width: 200px;
  	height: 150px;
  	background-color: #67C900;
  	animation: yAxisJ 11.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes yAxisJ {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(-800px);
  }
}

@keyframes xAxisJ {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(450px);
  }
}

.rect11 {
  animation: xAxisK 5.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  	z-index: -30;
  	left: 10%;
  	top: 60%;
}

.rect11::after {
	content: '';
  	display: block;
  	width: 200px;
  	height: 150px;
  	background-color: #797F00;
  	animation: yAxisK 6.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes yAxisK {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(100px);
  }
}

@keyframes xAxisK {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(950px);
  }
}

.rect12 {
  animation: xAxisF 3.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);
  	z-index: 15;
  	left: 40%;
  	top: 10%;
}

.rect12::after {
	content: '';
  	display: block;
  	width: 200px;
  	height: 150px;
  	background-color: #8E8888;
  	animation: yAxisL 20.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);
}

@keyframes yAxisL {
  50% {
    animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
    transform: translateY(800px);
  }
}

@keyframes xAxisL {
  50% {
    animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
    transform: translateX(-600px);
  }
}