@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400');
body {
	margin: 0px;
	padding: 0px;
	background: #ccc;
	animation-delay: 5s;
	animation: bg-colors 5s ease-in-out infinite alternate;
}

.bg {
	animation: bg-slide 4s ease-in-out infinite alternate;
	background-image: linear-gradient(-60deg, #1b1b1b 50%, #333 50%);
	bottom: 0px;
	left: -50%;
	opacity: 0.4;
	position: fixed;
	right: -50%;
	top: 0px;
	z-index: -1;
}

.bg-2 {
	animation-direction: alternate-reverse;
	animation-duration: 6s;
}

.bg-3 {
	animation-duration: 8s;
}

.logo {
	width: 600px;
	height: 600px;
	margin: 40px auto;
	position: relative;
}

.logo-svg {
	opacity: 0.9;
}

.header-wrapper {
	animation: show-later 1s normal 1 forwards;
	opacity: 0;
	animation-delay: 3s;
}

.header {
	color: #fff;
	font-size: 96px;
	font-family: 'Fira Mono', monospace;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 30%;
	left: calc(50% - 86px);
	animation: glitch 2s linear infinite;
}

.header:before,
.header:after {
	content: attr(title);
	position: absolute;
	left: 0;
}

.header:before {
	animation: glitch-top 1s linear infinite;
	clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.header:after {
	animation: glitch-bottom 1.5s linear infinite;
	clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

.sub-text {
	font-family: 'Fira Mono', monospace;
	font-size: 20px;
	color: #e6e6e6;
	position: absolute;
	top: 45%;
	left: calc(50% - 133px);
	animation: shift-flip-text 10s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
}

.sub-text>div {
	overflow: hidden;
	position: relative;
	float: right;
	height: 65px;
	padding-top: 10px;
	margin-top: -10px;
}

.sub-text>div>ul {
	padding: 0px;
	margin: 0px;
}

.sub-text>div>ul>li {
	color: #ccc;
	font-weight: 700;
	padding: 0 10px;
	height: 45px;
	margin-bottom: 45px;
	display: block;
}

.flip-text {
	animation: flip-text 10s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
}

@keyframes bg-colors {
	35% {
		background: #004866;
	}
	65% {
		background: #500;
	}
	100% {
		background: #550000;
	}
}

@keyframes bg-slide {
	0% {
		transform: translateX(-25%);
	}
	100% {
		transform: translateX(25%);
	}
}

@keyframes show-later {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes glitch {
	2%,
	64% {
		transform: translate(2px, 0) skew(0deg);
		color: #efefef;
	}
	4%,
	60% {
		transform: translate(-2px, 0) skew(0deg);
	}
	62% {
		transform: translate(0, 0) skew(5deg);
		color: #efefef;
		opacity: 0.9;
	}
}

@keyframes glitch-top {
	2%,
	64% {
		transform: translate(2px, -2px);
	}
	4%,
	60% {
		transform: translate(-2px, 2px);
	}
	62% {
		transform: translate(13px, -1px) skew(-13deg);
	}
}

@keyframes glitch-bottom {
	2%,
	64% {
		transform: translate(-2px, 0);
	}
	4%,
	60% {
		transform: translate(-2px, 0);
	}
	62% {
		transform: translate(-22px, 5px) skew(21deg);
	}
}

@keyframes flip-text {
	0% {
		margin-top: -360px;
	}
	5% {
		margin-top: -270px;
	}
	25% {
		margin-top: -270px;
	}
	30% {
		margin-top: -180px;
	}
	50% {
		margin-top: -180px;
	}
	55% {
		margin-top: -90px;
	}
	75% {
		margin-top: -90px;
	}
	80% {
		margin-top: 0px;
	}
	99.99% {
		margin-top: 0px;
	}
	100% {
		margin-top: -270px;
	}
}

@keyframes shift-flip-text {
	0% {
		left: calc(50% - 68px);
	}
	5% {
		left: calc(50% - 68px);
	}
	25% {
		left: calc(50% - 68px);
	}
	30% {
		left: calc(50% - 120px);
	}
	50% {
		left: calc(50% - 120px);
	}
	55% {
		left: calc(50% - 133px);
	}
	100% {
		left: calc(50% - 133px);
	}
}