@font-face{
	font-family:'Permanent Marker';
	font-style:normal;
	font-weight:400;
	src:local('Permanent Marker'), local('PermanentMarker'), url(PermanentMarker.woff2) format('woff2');
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

body{
	color:#e0e0e0;
	
	font-family:sans-serif;
	font-size:15px;
	cursor:default;
	
	background-color:#1e1252;
	margin:0; padding:0;
}
a{color:white}
.p{text-align:justify; line-height:1.5}


.sprite{background-image:url(sprites.png);background-repeat:no-repeat;background-size:120px 85px}


.sprite-social{width:24px; height:24px;vertical-align:middle;margin-right:10px;background-size:85px 60px}
.sprite-social-twitter{background-position:-60px 0}
.sprite-social-facebook{background-position:-30px 0}

.sprite-flag{width:16px;height:11px}
.sprite-flag0{background-position:0px -35px}
.sprite-flag1{background-position:-16px -35px}
.sprite-flag:hover{cursor:pointer}
.sprite-flag.selected{box-shadow:white 0 0 4px 2px}


.sprite-download{width:32px; height:32px;
	position:absolute;
	top:16px; left:16px;	
	background-position:-80px -50px;
}





#logo{
	background-color:black;
	padding:14px 0;
	text-align:center;
}
#logo h1{display:none}
#logo img{max-width:80%}




#redes{background-color:#902c0a;text-align:center;padding:20px;font-weight:bold}
#redes div{margin:20px auto 0}
#redes a{text-decoration:none; padding:12px; margin:0 5px;opacity:.85}
#redes a:hover{opacity:1}
.link_feed{background-color:#ff9c00}
.link_twitter{background-color:#009ae6}
.link_facebook{background-color:#2754a3}



#covers{
	position:relative;
	background-color:#222;
	/*background-color:#999;*/
	height:400px;
	overflow:hidden
}
#scroller{
	width:1800px;
	margin:0 auto;
	text-align:center;
	z-index:1;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-transform:translateZ(0);
	-moz-transform:translateZ(0);
	-ms-transform:translateZ(0);
	-o-transform:translateZ(0);
	transform:translateZ(0);
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-o-text-size-adjust:none;
	text-size-adjust:none;
	white-space:nowrap;
	/*border:1px dotted red;*/
}
.cover-container{
	display:inline-block;
	position:relative; width:120px; height:260px;
	margin:0 15px;
	transition:width .25s;
}
.cover-container.mini{width:90px}
.cover-container:hover, .cover-container.selected{width:140px}
.cover-container:hover img{box-shadow:#00fffc 0 0 18px 2px; cursor:pointer}
.cover-container.selected img{box-shadow:#ffde00 0 0 18px 2px}
.cover-container img, .cover-container canvas{width:100%; transition:width .25s;}
.cover-container img{position:absolute; bottom:0; left:0;}
.cover-container canvas{position:absolute; top:100%; left:0; width:100%;}




#banners{
	padding:30px 10px;
	background-color:#222;
	text-align:center;
	color:#888;
	font-weight:bold;
}
#banners img{
	max-width:90%
}
#banners img:hover{
	box-shadow:#49ceff 0 0 10px 2px;
}
#banners span{
	display:block;
	margin-top:20px
}


.wrapper{max-width:800px; padding:40px 20px 60px; margin:0 auto;}



#gameviewer h2{
	background-color:black;
	font-family:'Permanent Marker';
	font-size:250%;
	font-weight:normal;
	margin:0 0 30px;
	padding: 10px 15px;
	display:inline-block;
}
#gameviewer div.promo h2{background-color:#800000}




.download{
	margin-top:40px;
}
.download a{
	position:relative;
	background:#74d37d;
	background:-moz-linear-gradient(top, #74d37d 0%, #009118 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#74d37d), color-stop(100%,#009118));
	background:-webkit-linear-gradient(top, #74d37d 0%,#009118 100%);
	background:-o-linear-gradient(top, #74d37d 0%,#009118 100%);
	background:-ms-linear-gradient(top, #74d37d 0%,#009118 100%);
	background:linear-gradient(to bottom, #74d37d 0%,#009118 100%);
	padding:20px 20px 20px 60px;
	font-size:125%;
	letter-spacing:1px;
	font-weight:bold;
	text-decoration:none;
	border-radius:4px;
	box-shadow:#1a6727 0 -3px 0px 1px inset;
	text-shadow:#1a6727 0 0 3px;
}
.download a:hover{
	background:#84e38d;
	background:-moz-linear-gradient(top, #84e38d 0%, #10a128 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#84e38d), color-stop(100%,#10a128));
	background:-webkit-linear-gradient(top, #84e38d 0%,#10a128 100%);
	background:-o-linear-gradient(top, #84e38d 0%,#10a128 100%);
	background:-ms-linear-gradient(top, #84e38d 0%,#10a128 100%);
	background:linear-gradient(to bottom, #84e38d 0%,#10a128 100%);
	box-shadow:#2a7737 0 -3px 0px 1px inset;
	text-shadow:#2a7737 0 0 3px;
}




.ranking{
	margin-top:60px;
}
.ranking a{
	position:relative;
	background:#d3d274;
	background:-moz-linear-gradient(top, #d3d274 0%, #918800 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d274), color-stop(100%,#918800));
	background:-webkit-linear-gradient(top, #d3d274 0%,#918800 100%);
	background:-o-linear-gradient(top, #d3d274 0%,#918800 100%);
	background:-ms-linear-gradient(top, #d3d274 0%,#918800 100%);
	background:linear-gradient(to bottom, #d3d274 0%,#918800 100%);
	padding:20px;
	font-size:125%;
	letter-spacing:1px;
	font-weight:bold;
	text-decoration:none;
	border-radius:4px;
	box-shadow:#67661a 0 -3px 0px 1px inset;
	text-shadow:#67661a 0 0 3px;
}
.ranking a:hover{
	background:#e3e284;
	background:-moz-linear-gradient(top, #e3e284 0%, #a19810 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3e284), color-stop(100%,#a19810));
	background:-webkit-linear-gradient(top, #e3e284 0%,#a19810 100%);
	background:-o-linear-gradient(top, #e3e284 0%,#a19810 100%);
	background:-ms-linear-gradient(top, #e3e284 0%,#a19810 100%);
	background:linear-gradient(to bottom, #e3e284 0%,#a19810 100%);
	box-shadow:#77762a 0 -3px 0px 1px inset;
	text-shadow:#77762a 0 0 3px;
}

.desc hr{margin:0 auto 80px; border:none; border-bottom:2px dotted #3f3084}
.desc h2{
	background-color:#cb0000;
	display:inline-block;
	color:white;
	font-weight:normal;
	font-size:150%;
	padding:4px 20px;
	border-radius:20px;
	font-style:italic;
	font-family:georgia, sans-serif;
	letter-spacing:1px;
	margin-top:50px;
}
.desc h2:first-child{margin-top:0px}
#buttons{float:right}


.foto{text-align:center;margin:20px 0}
.foto img{max-width:90%; border-radius:3px; box-shadow:#040847 0 0 4px 1px}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width:1101px){
	#covers{height:260px}
	.cover-container{width:100px; height:180px}
	.cover-container.mini{width:80px}
	.cover-container:hover, .cover-container.selected{width:110px}
}
@media only screen and (max-width:1001px){
	#scroller{width:1500px}
	#covers{height:250px}
	.cover-container{width:90px; height:180px}
	.cover-container.mini{width:70px}
	.cover-container:hover, .cover-container.selected{width:100px}
}
@media only screen and (max-width:961px){
	#covers{height:210px}
	.cover-container{width:70px; height:140px}
	.cover-container.mini{width:50px}
	.cover-container:hover, .cover-container.selected{width:80px}
}
@media only screen and (max-width:801px){
	#redes a{padding:8px 5px; margin:0 1px}
	#redes img{height:20px}

	#scroller{width:1100px}
	#covers{height:155px}
	.cover-container{width:60px; height:110px}
	.cover-container.mini{width:40px}
	.cover-container:hover, .cover-container.selected{width:70px}
	body{font-size:13px}
	#gameviewer h2 img{
		padding:10px 30px;
		max-width:70%;
	}
}
@media only screen and (max-width:641px){
	.download a{
		padding:15px 15px 15px 55px;
		font-size:115%;
		letter-spacing:0px;
	}

	.sprite-download{
		top:8px; left:10px;
	}
}