/*
	Author: Daniel Snows
	Author URL: danielsnows.com.br
	Author Facebook: fb.me/danielsnows
*/
/*reset*/
* { 
	margin: 0;
	padding: 0;  
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
a {
	text-decoration: none;
	color: #42c3d7;
}
body {
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	background-color: #222;
	text-align: center;
}
em {
	color: rgba(255,255,255,0.5);
}
h1 {
	padding: 20px 0;
	font-weight: 300;
}
footer {
	position: fixed;
	width: 100%;
	bottom: 10px;
	font-size: 12px;
}
.copy {
	color: rgba(255,255,255,0.3);
}
/*---------------*/
/*Construction*/
.atari {
	width: 585px;
	height: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -250px 0 0 -292px;
	overflow: hidden;
}
.left, .right {
	position: absolute;
	width: 100%;
	height: 200%;
	background-color: #222;
	border-radius: 280px;
	-moz-border-radius: 280px;
	-webkit-border-radius: 280px;
	z-index: 99;
	top: -404px;	
}
.left {
	left: -53%;
}
.right {
	right: -53%;
}
.middle {
	background-color: #fa000f;
	position: absolute;
	width: 250px;
	height: 100%;
	left: 50%;
	margin-left: -125px;
	z-index: 9;
}
.left:after, .right:after {
	content: '';
	width: 100%;
	height: 100%;
	background-color: #fa000f;
	position: absolute;
	border-radius: 500px;
	-moz-border-radius: 500px;
	-webkit-border-radius: 500px;
	top: -95px;
}
.left:after {
	left: -15px;	
}
.right:after {
	right: -15px;	
}

.left:before, .right:before {
	content: '';
	width: 100%;
	height: 100%;
	background-color: #222;
	position: absolute;
	border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	top: -214px;
	z-index: 99;
}
.left:before {
	left: -52px;	
}
.right:before {
	right: -52px;	
}
.atari:hover h1 {
	visibility: hidden;
}
/*game animation*/
.game {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.game:before, .game:after {
	content: '';
	width: 6px;
	height: 60px;
	position: absolute;
	background-color: #fff;
}
.game:before {
	left: 0;
	animation: players linear 3.2s infinite alternate;
	-webkit-animation: players linear 3.2s infinite alternate;
	-moz-animation: players linear 3.2s infinite alternate;

}
.game:after {
	right: 0;
	animation: players linear 3.2s infinite alternate-reverse;
	-webkit-animation: players linear 3.2s infinite alternate-reverse;
	-moz-animation: players linear 3.2s infinite alternate-reverse;
}
.ball {
	width: 6px;
	height: 6px;
	background-color: #fff;
	position: absolute;
	z-index: 99;
	animation: ball linear 3.2s infinite alternate;
	-webkit-animation: ball linear 3.2s infinite alternate;
	-moz-animation: ball linear 3.2s infinite alternate;
	
}
/*players keyframe*/
@keyframes players {
	from {top: 5%;}
	to {top: 90%;}
}
@-webkit-keyframes players {
	from {top: 5%;}
	to {top: 90%;}
}
@=moz-keyframes players {
	from {top: 5%;}
	to {top: 90%;}
}
/*Ball keyframe*/
@keyframes ball {
	0% {top: 10%; left: 6px;}
	25% {top: 90%; left: 50%;}
	50% {top: 50%; left: 90%;}
	100% {top: 40px; left: 50%;}
}
@-webkit-keyframes ball {
	0% {top: 10%; left: 6px;}
	25% {top: 100%; left: 50%; margin-top: -6px;}
	50% {top: 50%; left: 100%; margin-left: -6px;}
	100% {top: 40px; left: 50%;}
}
@-moz-keyframes ball {
	0% {top: 10%; left: 6px;}
	25% {top: 90%; left: 50%;}
	50% {top: 50%; left: 90%;}
	100% {top: 40px; left: 50%;}
}