@import url(https://fonts.googleapis.com/css?family=Kanit:600);

body, html{
	height:100%;
	padding:0;
	margin:0;
}
body{
	/*border-top: 20px solid #92979a;*/
	background-color:#0e1820; 
}

.head{ 
	/*border-bottom: 3px solid #afb9bd;*/
	margin-top:50px;
	background:url(../imgs/head-bg.jpg) #0e1820 repeat-x;
	font-family: 'Kanit', sans-serif;
	-webkit-animation:head-start 1s 1 linear, energy-bg 10s infinite linear 1s;
	animation:head-start 1s 1 linear, energy-bg 10s infinite linear 1s;
	min-height:210px;
}
.works .head{ 
	min-height:75px;
}
.head.static{ 
	/*border-bottom: 3px solid #afb9bd;*/
	margin-top:50px;
	background:url(../imgs/energy-bg.jpg) #0e1820 repeat-x;
	font-family: 'Kanit', sans-serif;
	-webkit-animation:none;
	animation:none;
	min-height:210px;
}
.content img{
	max-width:100%;
}
.head .energy:before{ 
	content: "";
    position: absolute;
    width: 100%; 
    height: 100%; 
	opacity:0;
	background:url(../imgs/energy.png) transparent repeat-x; 
	-webkit-animation: energy 6s infinite linear;
	animation: energy 6s infinite linear;

}
.head .energy2:before{ 
	content: "";
    position: absolute;
    width: 100%; 
    height: 100%; 
	opacity:0;
	background:url(../imgs/energy.png) transparent repeat-x center;
	-webkit-animation: energy2 6s infinite linear 0s;
	animation: energy2 6s infinite linear 0s;

}
.head .container {
	padding:6px 0 55px 0
}
.works .head .container {
	padding:6px 0 5px 0
}
.menu{
    text-align: right;
    margin-top: 4px;
    color: #285463;
}

.menu a, footer a{
    color: #c9e3ee;
    font-weight: 500;
    font-family: "Arial", sans-serif;
    text-decoration: none;
    border-bottom: 1px solid #285468;
    padding: 8px 8px;
    border-radius: 10%;
}
.menu a:hover,  footer a:hover{
    color: #fff;
    text-decoration: none;
}
.content, .content-game{

	background:url(../imgs/bg.jpg) #d7dde0 center -20px no-repeat;	
}
.works .content{
	background-image:none;	
	background-color:#d7dde0;	
}
.content-game object{
	max-width:100%;
}

.content-game .game{
    text-align: center;
    margin-top: 60px;
}

.content-game .info h2{
    text-align: center;
    margin-top: 60px;
}
.content-game .info{
    margin-bottom: 40px;
}
.content .container{
	padding:0;
}
.row.banner{
    text-align: center;
    margin: 85px 0px 0px;
    overflow: hidden;
    background: #000;
    box-shadow: 0px 0px 50px -17px rgb(55, 137, 176);
    padding: 7px;
    border: 1px solid #1a3744;

}
.content .row.game{
	
	margin:75px 0px 80px;
	background-color:#fff;
	/*box-shadow: 0 0 50px 0px rgba(66, 183, 234, 0);*/
}
.content .row.game.work{
    margin-top: 30px;
}
.content .row.game.work .row.game{
    margin: 100px 0px 160px;
}
.content .row.game.work h4{
    font-weight:bold;
	color:#000;
}
.content .row.game a{
	
	color:#000;
}
.content .row.game .info{
    padding: 35px 7%;
}

.title-head{
	position:relative;
	z-index:2;
	margin-left:150px;

}
.gear-container{
    display: inline;
    z-index: 1;
    position: absolute;
    transform: scale(0.7,0.8);
    margin-left: 0px;
    margin-top: -45px;

}
.head.static .gear-container {
    display: inline;
    z-index: 1;
    position: absolute;
    transform: scale(0.8,0.8);
    margin-left: -57px;
    margin-top: -73px;
}
.gear img{
	width:180px;
	height:180px;
}
.gear2 img, .gear3 img, .gear4 img{
	width:183px;
	height:183px;
}
.gear-sdw img{
	width:233px;
	height:233px;
}
.gear-brillo img{
	position: absolute;
    z-index: 5;
    top: -13px;
    left: -11px;
    width: 245px;
	height: 210px;
}
.gear2, .gear3, .gear4{
	top:-2px;
}
.gear img, .gear2 img, .gear3 img, .gear4 img, .gear-sdw img{
	-webkit-animation: gearprincipal-rotacion 1s infinite linear;
	animation: gearprincipal-rotacion 1s infinite linear;
}
.gear{
	position:absolute;
	z-index:3;
}
.gear2{
	position:absolute;
	z-index:2;
	left:-5px;
}
.gear3{
	position:absolute;
	z-index:2;
	left:-10px;
}
.gear4{
	position:absolute;
	z-index:2;
	left:-15px;
}
.gear-sdw{
	position:absolute;
	z-index:1;
	top:-20px;
	left:-55px;
}
.content .row {
	
	position:relative;
	transition:all 1s ease;
	-webkit-transition:all 1s ease;
}
.content .row .game-img.zombie{
	background:url(../imgs/zombie-exploder.jpg) 50% 50% no-repeat #000;
    background-size:490px 342px;
	transition:all 0.5s ease ;
	-webkit-transition:all 0.2s ease ;
}
.content .row .game-img.ownage{
	background:url(../imgs/ownage-burst.jpg) 50% 50% no-repeat #000;
    background-size:490px 342px;
	transition:all 0.5s ease ;
	-webkit-transition:all 0.2s ease ;
}
.content .row .game-img.metele{
	background:url(../imgs/metele.jpg) 50% 50% no-repeat #000;
    background-size:490px 342px;
	transition:all 0.5s ease ;
	-webkit-transition:all 0.2s ease ;
}
.content .row .game-img{
	height:320px;
	padding:0px;
}

.content .row:hover .game-img{
	height:320px;
    background-size:512px 360px;
}

.content .play {
	opacity:0;
	transition:all 0.2s;
	-webkit-transition:all 0.5s;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0.4);
	position:relative;
}
.content .play h3{
	-webkit-animation:brillo 1s infinite linear;
	animation:brillo 1s infinite linear;
    border-radius: 100%;
    background: rgba(232, 239, 242, 0.9);
    display: inline-block;
    padding: 33px 0 0 0;
    left: 50%;
    line-height: 22px;
    margin-left: -55px;
    bottom: 80px;
    width: 110px;
    height: 110px;
    font-weight: bold;
    color: #000;
    text-align: center;
    position: absolute;
	-ms-transform: scale(2, 2); /* IE 9 */
    -webkit-transform: scale(2, 2); /* Safari */
    transform: scale(2, 2);
	transition:all 0.2s ease-in;
	-webkit-transition:all 0.2s ease-in;
}
.content .row:hover .play {
	opacity:1;
	transition:all 0.1s ease-out;
	-webkit-transition:all 0.1s ease-out;
}
.content .row:hover .play h3{
	-ms-transform: scale(1, 1); /* IE 9 */
    -webkit-transform: scale(1, 1); /* Safari */
    transform: scale(1, 1);
}
.content .row.game:hover {
	box-shadow: 0 0 0px 0px rgba(66, 183, 234, 1);

}
.head h1{
	font-size: 1.8em;
    line-height: 25px;
	padding:0;
	margin:0;
	color:#ffffff;
}
.head h4{
	font-size: 13px;
    line-height: 1.4em;
	padding:0;
	margin:0;
	color:#acb8bd;
	font-family:"Arial", sans-serif;
}
.glyphicon.glyphicon-play{
	font-size: 25px;
    margin-right: 5px;
	color: #507f8d;
}
footer{
	padding:60px 0px;
	color:#678690;
	text-align:center;
}
.work-link{
	position:relative;
}
.work-link:before {
    content: "";
	color:transparent;
	transition:all 0.5s ease;
    padding: 0px 0px;
    font-weight: bold;
    box-shadow: 0 0 10px #000;
    width: 0px;
    height: 0px;
    left: 50%;
    position: absolute;
    top: 50%;
    margin-left: 0px;
    border-radius: 100%;
    margin-top: 0px;
    background: rgba(0,0,0,0);
}
.work-link:hover:before {
    content: "VER";
    padding: 40px 0px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 0 10px #000;
    width: 100px;
    height: 100px;
    left: 50%;
    position: absolute;
    top: 50%;
    margin-left: -50px;
    border-radius: 100%;
    margin-top: -50px;
    display: inline-block;
    background: rgba(0,0,0,0.8);
}
.work-link:hover img{

}
/* Chrome, Safari, Opera */
/*
@-webkit-keyframes gearprincipal-rotacion {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(45deg)}
}
@-webkit-keyframes energy-bg {
    0%   {background-position-x:0px; background-size: 900px 140px; background-position-y:15px;}
	40%  {background-position-x:-800px; background-size: 1250px 30px; background-position-y:65px;}
    100% {background-position-x:-900px; background-size: 900px 140px; background-position-y:15px;}
}
@-webkit-keyframes energy {
    0%   {background-position-x:0px; background-size: 900px 120px; background-position-y:20px;opacity:1;}
	40%  {background-position-x:-800px; background-size: 1250px 40px; background-position-y:60px;opacity:0;}
    100% {background-position-x:-900px; background-size: 900px 120px; background-position-y:20px;opacity:1;}
}
@-webkit-keyframes energy2 {
    0%   {background-position-x:-900px; background-size: 900px 40px; background-position-y:60px;opacity:0;}
	20%  {background-position-x:-800px; background-size: 900px 120px; background-position-y:20px;opacity:1;}
    50% {background-position-x:-600px; background-size: 900px 40px; background-position-y:60px;opacity:0;}
	70%  {background-position-x:-400px; background-size: 900px 120px; background-position-y:20px;opacity:1;}
    100% {background-position-x:0px; background-size: 900px 40px; background-position-y:60px;opacity:0;}
}*/

@-webkit-keyframes gearprincipal-rotacion {
    0%   {-webkit-transform: rotate(0deg)}
    100% {-webkit-transform: rotate(45deg)}
}
@-webkit-keyframes head-start { 
	0%   {background-position-x:-650px; background-size: 900px 5px; background-position-y:70px;}
	50% {background-position-x:-780px; background-size: 900px 30px; background-position-y:60px;}
    100% {background-position-x:-900px; background-size: 900px 120px; background-position-y:25px;}
}
@-webkit-keyframes energy-bg {
    0%   {background-position-x:0px; background-size: 900px 120px; background-position-y:25px;}
	40%  {background-position-x:-800px; background-size: 1250px 30px; background-position-y:65px;}
    100% {background-position-x:-900px; background-size: 900px 120px; background-position-y:25px;}
}
@-webkit-keyframes energy {
    0%   {background-position-x:-70px; background-size: 900px 40px; background-position-y:55px;opacity:0;}
	40%  {background-position-x:-450px; background-size: 1350px 120px; background-position-y:20px;opacity:1;}
    100% {background-position-x:-970px; background-size: 1900px 40px; background-position-y:55px;opacity:0;}
}
@-webkit-keyframes energy2 {
	0%   {background-position-x:-800px; background-size: 1450px 180px; background-position-y:0px;opacity:0;}
    50%  {background-position-x:-900px; background-size: 900px 40px; background-position-y:55px;opacity:1;}
    50.001%  {background-position-x:0px; background-size: 900px 40px; background-position-y:55px;opacity:1;}
	100%  {background-position-x:-600px; background-size: 1050px 330px; background-position-y:-70px;opacity:0;}
}
@-webkit-keyframes brillo {
	0%   {    box-shadow: 0 0 10px 4px rgba(66, 183, 234, 1);}
    50%  {    box-shadow: 0 0 40px 0px rgba(66, 183, 234, 1);}
	100%  {   box-shadow: 0 0 10px 4px rgba(66, 183, 234, 1);}
}
/* Standard syntax */
@keyframes gearprincipal-rotacion {
    0%   {transform: rotate(0deg);}
    100% {transform: rotate(45deg);}
}
@keyframes head-start { 
	0%   {background-position-x:-650px; background-size: 900px 5px; background-position-y:70px;}
	50% {background-position-x:-780px; background-size: 900px 30px; background-position-y:60px;}
    100% {background-position-x:-900px; background-size: 900px 120px; background-position-y:25px;}
}
@keyframes energy-bg {
    0%   {background-position-x:0px; background-size: 900px 120px; background-position-y:25px;}
	40%  {background-position-x:-800px; background-size: 1250px 30px; background-position-y:65px;}
    100% {background-position-x:-900px; background-size: 900px 120px; background-position-y:25px;}
}
@keyframes energy {
    0%   {background-position-x:-70px; background-size: 900px 40px; background-position-y:55px;opacity:0;}
	40%  {background-position-x:-450px; background-size: 1350px 120px; background-position-y:20px;opacity:1;}
    100% {background-position-x:-970px; background-size: 1900px 40px; background-position-y:55px;opacity:0;}
}
@keyframes energy2 {
	0%   {background-position-x:-800px; background-size: 1450px 180px; background-position-y:0px;opacity:0;}
    50%  {background-position-x:-900px; background-size: 900px 40px; background-position-y:55px;opacity:1;}
    50.001%  {background-position-x:0px; background-size: 900px 40px; background-position-y:55px;opacity:1;}
	100%  {background-position-x:-600px; background-size: 1050px 330px; background-position-y:-70px;opacity:0;}
}
@keyframes brillo {
	0%   {    box-shadow: 0 0 10px 4px rgba(66, 183, 234, 1);}
    50%  {    box-shadow: 0 0 40px 0px rgba(66, 183, 234, 1);}
	100%  {   box-shadow: 0 0 10px 4px rgba(66, 183, 234, 1);}
}