/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
@import url("https://fonts.googleapis.com/css?family=Roboto Condensed");
html{
	line-height:1.15;
	-webkit-text-size-adjust:100%
}
body{
	margin:0
}
h1{
	font-size:2em;
	margin:0.67em 0
}
hr{
	-webkit-box-sizing:content-box;
	box-sizing:content-box;
	height:0;
	overflow:visible
}
pre{
	font-family: 'Roboto Condensed', sans-serif;

	font-size:1em
}
a{
	background-color:transparent
}
abbr[title]{
	border-bottom:none;
	text-decoration:underline;
	-webkit-text-decoration:underline dotted;
	text-decoration:underline dotted
}
b,strong{
	font-weight:regular;
}
code,kbd,samp{
	font-family: 'Roboto Condensed', sans-serif;

	font-size:1em
}
small{
	font-size:80%
}
sub,sup{
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline
}
sub{
	bottom:-0.25em
}
sup{
	top:-0.5em
}
img{
	border-style:none
}
button,input,optgroup,select,textarea{
	font-family: 'Roboto Condensed', sans-serif;
	
	font-size:100%;
	line-height:1.15;
	margin:0
}
button,input{
	overflow:visible
}
button,select{
	text-transform:none
}
[type=button],[type=reset],[type=submit],button{
	-webkit-appearance:button
}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{
	border-style:none;
	padding:0
}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{
	outline:1px dotted ButtonText
}
fieldset{
	padding:0.35em 0.75em 0.625em
}
legend{
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	color:inherit;
	display:table;
	max-width:100%;
	padding:0;
	white-space:normal
}
progress{
	vertical-align:baseline
}
textarea{
	overflow:auto
}
[type=checkbox],[type=radio]{
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	padding:0
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
	height:auto
}
[type=search]{
	-webkit-appearance:textfield;
	outline-offset:-2px
}
[type=search]::-webkit-search-decoration{
	-webkit-appearance:none
}
::-webkit-file-upload-button{
	-webkit-appearance:button;
	font:inherit
}
details{
	display:block
}
summary{
	display:list-item
}
template{
	display:none
}
[hidden]{
	display:none
}
.h1,h1{
	font-size:10vw;
	line-height:1.0em
}
.h2,h2{
	font-size:5vw;
	line-height:1.2em
}

.big{
	font-size:10vw;
	line-height:1em
}
.small{
	font-size:4vw
}
.abc{
	word-break:break-all
}
.abc2{
	-webkit-text-fill-color:#fff;
	font-size:14vw;
	line-height:1.2em
}
.scroll{
	margin:25vw 0;
	font-size:20.5vw
}
.text-border{
	color:#000;
	-webkit-text-stroke-width:.015em;
	-webkit-text-stroke-color:#fff
}

.text-border2{
	color:#fff;
	font-size:12vw;
	line-height:1.0em;
	-webkit-text-fill-color:#fff;
}


.more-stuff{
	margin-top:15vw
}

body{
	font-family: 'Roboto Condensed', sans-serif;
	
	height:3000px;
	color:white;
	background-color:#000
}

.color-anim{
	-webkit-animation:4s linear infinite color-change;
	animation:4s linear infinite color-change
}

.animegradientlogo{
 background: linear-gradient(119deg, #ffffff, #5dd6ff, #ff74f8, #41c0ff, #00ff27);
background-size: 200% 200%;

-webkit-animation: logogradient 21s ease infinite;
-moz-animation: logogradient 21s ease infinite;
animation: logogradient 21s ease infinite;}

@-webkit-keyframes logogradient {
    0%{background-position:9% 0%}
    50%{background-position:92% 100%}
    100%{background-position:9% 0%}
}
@-moz-keyframes logogradient {
    0%{background-position:9% 0%}
    50%{background-position:92% 100%}
    100%{background-position:9% 0%}
}
@keyframes logogradient {
    0%{background-position:9% 0%}
    50%{background-position:92% 100%}
    100%{background-position:9% 0%}
}




.head{
  position: fixed;
  background-color: black;
  z-index:100;
 	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	width:100%;
	min-height:19%;
  max-height:23%;
 
}

.positionfixed{
margin-top: 2%;
position: fixed;
width: 80%;
}



.logo{
     margin-top: 10%;
    z-index:100;	
  filter: invert(1);
}








.wrapper{
	position:fixed;
	top:20%;
	left:0;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center;
	width:100%;
	height:100%;
	-webkit-perspective:150px;
	perspective:150px
}
.wrapper--blur{
	-webkit-filter:blur(10px);
	filter:blur(10px);
	-webkit-transform:scale(0.95);
	-ms-transform:scale(0.95);
	transform:scale(0.95)
}
.main-container{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-ms-flex-direction:column;
	flex-direction:column;
	width:80vw;
	height:90vh;
	-webkit-perspective:200px;
	perspective:200px;
	text-align:center
}
@media screen and (max-width:768px){
	.main-container{
		width:90vw
}
}
.main-container>div{
	height:calc(100% / 3);
	overflow:hidden;
	-webkit-box-sizing:border-box;
	box-sizing:border-box
}
.item-top{
	position:relative;
	padding-top:30vh;
	-webkit-transform-origin:bottom center;
	-ms-transform-origin:bottom center;
	transform-origin:bottom center;
	-webkit-transform:rotatex(30deg);
	-ms-transform:rotatex(30deg);
	transform:rotatex(30deg);
	margin-bottom:-0vh
}
.item-top:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:100px;
	background:-webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(17, 17, 17, 0)));
	background:-webkit-linear-gradient(top, #000, rgba(17, 17, 17, 0));
	background:-o-linear-gradient(top, #000, rgba(17, 17, 17, 0));
	background:linear-gradient(to bottom, #000, rgba(17, 17, 17, 0));
	z-index:1;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden
}

.item-bottom{
	-webkit-transform-origin:top center;
	-ms-transform-origin:top center;
	transform-origin:top center;
	-webkit-transform:rotatex(40deg);
	-ms-transform:rotatex(40deg);
	transform:rotatex(40deg);
	margin-top:-1px
}
.item-bottom .item-content{
	margin-top:-30vh
}
.item-bottom:before{
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	display:block;
	width:100%;
	height:80px;
	background:-webkit-gradient(linear, left top, left bottom, from(rgba(17, 17, 17, 0)), to(#000));
	background:-webkit-linear-gradient(top, rgba(17, 17, 17, 0), #000);
	background:-o-linear-gradient(top, rgba(17, 17, 17, 0), #000);
	background:linear-gradient(to bottom, rgba(17, 17, 17, 0), #000);
	z-index:1;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden
}

img{
	width:100%;
	margin-top:-1px;
	-webkit-filter:invert(100%);
	filter:invert(100%);
	-webkit-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out
}

.loader{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background-color:#000;
	z-index:1000;
	-webkit-transform-origin:top center;
	-ms-transform-origin:top center;
	transform-origin:top center;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-align:center;
	-ms-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-ms-flex-pack:center;
	justify-content:center
}
.loader:after{
	content:"";
	display:block;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:white;
	-webkit-animation:0.5s cubic-bezier(0.39, 0.58, 0.57, 1) infinite loading;
	animation:0.5s cubic-bezier(0.39, 0.58, 0.57, 1) infinite loading
}
a{
	color:currentColor;
	display:inline-block;
	position:relative;
	text-decoration:none;
	text-shadow:5px 0px 0px #000, -5px 0 0px #000, 0px 5px 0px #000;
	z-index:1
}

.half{
	width:50%
}
.row{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex
}

@-webkit-keyframes color-change{
	0%{
		background-color:#00ff33;
}
	33%{
		background-color:#00ffff;
}
	66%{
		background-color:#ff33ff;
}
	to{
		background-color:#00ff33;
}
}
@keyframes color-change{
	0%{
		fill:#00ff33;
		color: #00ff33;
}
	33%{
		fill:#00ffff;
		color: #00ffff;
		
}
	66%{
		fill:#ff99ff;
		color: #ff99ff;
}
	to{
		fill:#00ff33;
		color: #00ff33;
}
}
@-webkit-keyframes bg-color-change{
	0%{
		background-color:#00ff33;
}
	33%{
		background-color:#00ffff;
}
	66%{
		background-color:#ff33ff;
}
	to{
		background-color:#00ff33;
}
}
@keyframes bg-color-change{
	0%{
		background-color:#00ff33;
}
	33%{
		background-color:#00ffff;
}
	66%{
		background-color:#ff33ff;
}
	to{
		background-color:#00ff33;
}
}
@-webkit-keyframes phone-orientation{
	0%{
		-webkit-transform:rotatex(0) rotateY(0);
		transform:rotatex(0) rotateY(0)
}
	20%{
		-webkit-transform:rotatex(40deg) rotateY(0);
		transform:rotatex(40deg) rotateY(0)
}
	40%{
		-webkit-transform:rotatex(40deg) rotateY(40deg);
		transform:rotatex(40deg) rotateY(40deg)
}
	60%{
		-webkit-transform:rotatex(40deg) rotateY(-40deg);
		transform:rotatex(40deg) rotateY(-40deg)
}
	80%{
		-webkit-transform:rotatex(-40deg) rotateY(0);
		transform:rotatex(-40deg) rotateY(0)
}
}
@keyframes phone-orientation{
	0%{
		-webkit-transform:rotatex(0) rotateY(0);
		transform:rotatex(0) rotateY(0)
}
	20%{
		-webkit-transform:rotatex(40deg) rotateY(0);
		transform:rotatex(40deg) rotateY(0)
}
	40%{
		-webkit-transform:rotatex(40deg) rotateY(40deg);
		transform:rotatex(40deg) rotateY(40deg)
}
	60%{
		-webkit-transform:rotatex(40deg) rotateY(-40deg);
		transform:rotatex(40deg) rotateY(-40deg)
}
	80%{
		-webkit-transform:rotatex(-40deg) rotateY(0);
		transform:rotatex(-40deg) rotateY(0)
}
}
@-webkit-keyframes text-rotate{
	0%{
		-webkit-transform:translate(-50%, -50%) rotateZ(0);
		transform:translate(-50%, -50%) rotateZ(0)
}
	to{
		-webkit-transform:translate(-50%, -50%) rotateZ(-360deg);
		transform:translate(-50%, -50%) rotateZ(-360deg)
}
}
@keyframes text-rotate{
	0%{
		-webkit-transform:translate(-50%, -50%) rotateZ(0);
		transform:translate(-50%, -50%) rotateZ(0)
}
	to{
		-webkit-transform:translate(-50%, -50%) rotateZ(-360deg);
		transform:translate(-50%, -50%) rotateZ(-360deg)
}
}
@-webkit-keyframes loading{
	0%{
		-webkit-transform:translatey(-100px) scalex(1) scaley(1);
		transform:translatey(-100px) scalex(1) scaley(1)
}
	25%{
		-webkit-transform:translatey(-50px) scalex(0.5) scaley(4);
		transform:translatey(-50px) scalex(0.5) scaley(4)
}
	50%{
		-webkit-transform:translatey(0px) scalex(1) scaley(1);
		transform:translatey(0px) scalex(1) scaley(1)
}
	75%{
		-webkit-transform:translatey(-50px) scalex(0.5) scaley(4);
		transform:translatey(-50px) scalex(0.5) scaley(4)
}
	to{
		-webkit-transform:translatey(-100px) scalex(1) scaley(1);
		transform:translatey(-100px) scalex(1) scaley(1)
}
}
@keyframes loading{
	0%{
		-webkit-transform:translatey(-100px) scalex(1) scaley(1);
		transform:translatey(-100px) scalex(1) scaley(1)
}
	25%{
		-webkit-transform:translatey(-50px) scalex(0.5) scaley(4);
		transform:translatey(-50px) scalex(0.5) scaley(4)
}
	50%{
		-webkit-transform:translatey(0px) scalex(1) scaley(1);
		transform:translatey(0px) scalex(1) scaley(1)
}
	75%{
		-webkit-transform:translatey(-50px) scalex(0.5) scaley(4);
		transform:translatey(-50px) scalex(0.5) scaley(4)
}
	to{
		-webkit-transform:translatey(-100px) scalex(1) scaley(1);
		transform:translatey(-100px) scalex(1) scaley(1)
}
}