@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:100);

header {
	width: 100%;
	height: 480px;
	background: url("img/bgbw.png");
	position: relative;
}

#zn-banner {
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}

#zn-glitch,
#zn-title {
	float: left;
	width: 50%;
}

#zn-title {
	padding-left: 50%;
}

#zn-glitch > img {
    width: 200px;
    height: auto;
    position: absolute;
}

#zn-title {
	font-family: 'Roboto Mono', sans-serif;
	width: 350px;
}

#zn-title p {
	text-align: center;
	font-size: 2.5em;
	margin: 0;
	color: #444;
}

#zn-title p:before {
	text-align: center;
	font-size: 2.5em;
	margin: 0;
	color: #5dba47;
	left: 2px;
	text-shadow: -1px 0 #5dba47;
	animation: glitch-anim-1 3s infinite linear alternate-reverse;
}

#zn-title p:after {
	text-align: center;
	font-size: 2.5em;
	margin: 0;
	color: #9c509f;
	left: -2px;
	text-shadow: -1px 0 #9c509f;
	animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
	from {transform: translateX(0px) translateY(0px); opacity: 0;}
	0.5% {transform: translateX(-6px) translateY(-5px); opacity: 0.7;}
	1%   {transform: translateX(0)  translateY(0); opacity: 0.7;}
	1.5% {transform: translateX(-9px) translateY(-5px); opacity: 0.7;}
	2%   {transform: translateX(0)  translateY(0); opacity: 0.7;}
	2.5% {transform: translateX(-15px) translateY(-5px); opacity: 0.7;}
	3%   {transform: translateX(0) translateY(0); opacity: 0.7;}
	3.5% {transform: translateX(0) translateY(0); opacity: 0;}
	to   {transform: translateX(0) translateY(0); opacity: 0;}
}

@keyframes glitch-anim-2 {
	from {transform: translateX(0px) translateY(0px); opacity: 0;}
	0.5% {transform: translateX(6px)  translateY(5px); opacity: 0.7;}
	1%   {transform: translateX(0) translateY(0); opacity: 0.7;}
	1.5% {transform: translateX(9px) translateY(5px); opacity: 0.7;}
	2%   {transform: translateX(0) translateY(0); opacity: 0.7;}
	2.5% {transform: translateX(15px) translateY(5px); opacity: 0.7;}
	3%   {transform: translateX(0) translateY(0); opacity: 0.7;}
	3.5% {transform: translateX(0) translateY(0); opacity: 0;}
	to   {transform: translateX(0) translateY(0); opacity: 0;}
}

@keyframes glitch-anim-3 {
	from {transform: translateX(0px) translateY(0px); opacity: 0;}
	0.5% {transform: translateX(0) translateY(0); opacity: 0;}
	1%   {transform: translateX(-3px) translateY(-5px); opacity: 0.7;}
	1.5% {transform: translateX(0) translateY(0); opacity: 0.7;}
	2%   {transform: translateX(3px) translateY(5px); opacity: 0.7;}
	2.5% {transform: translateX(0) translateY(0); opacity: 0.7;}
	3%   {transform: translateX(-8px) translateY(-5px); opacity: 0.7;}
	3.5% {transform: translateX(0) translateY(0); opacity: 0.7;}
	4%   {transform: translateX(8px) translateY(5px); opacity: 0.7;}
	4.5% {transform: translateX(0) translateY(0); opacity: 0.7;}
	5%   {transform: translateX(0) translateY(0); opacity: 0;}
	to   {transform: translateX(0) translateY(0); opacity: 0;}
}

@keyframes glitch-anim-4 {
	from {opacity: 0;}
	4%   {opacity: 0;}
	4.5% {opacity: 1;}
	to   {opacity: 1;}
}

.glitch {position: relative;}
.glitch > * {
	width: 100%;
	position: absolute;
}
.glitch > *:nth-child(1) {
	animation: glitch-anim-1 5s 0s infinite linear alternate-reverse;
}
.glitch > *:nth-child(2) {
	animation: glitch-anim-2 5s 0s infinite linear alternate-reverse;
}
.glitch > *:nth-child(3) {
	animation: glitch-anim-3 5s 0s infinite linear alternate-reverse;
}
.glitch > *:nth-child(4) {
	position: relative;
	animation: glitch-anim-4 5s 0s infinite linear alternate-reverse;
}

.lines-item {
	width: 100%;
	float: none;
	margin-right: 0;
	height: 480px;
}

#forMatr {
	color: #444444;
	text-align: center;
}

#forMatr2 {
	color: #ffffff;
	text-align: center;
}

.logo_img, .logo_text {
	display: inline-block;
}

/****************************/
.glitch > img {
	width: 200px; height: 268px;
}

.glitch > .zn-logo-title {
	width: 200px; height: auto;
}