/*---------------------------------------------------------*/
/*  COMMON STYLES                                          */
/*---------------------------------------------------------*/
body {
	position: relative;
	padding: 0;
	margin: 0;
	min-height: 100vh;
	color: #666;
	overflow-x: hidden;
	font-size: 100%;
	background-color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
}

a, a:hover, a:link, a:visited, a:active {text-decoration: none; outline: none;}
li {list-style: none;}

h1, h2, h3, h4, h5, h6 {font-weight: normal; margin: 0;}
p{margin: 0;}

/*---------------------------------------------------------*/
/*  STYLES FOR LANDSCAPE                                   */
/*---------------------------------------------------------*/
.landscape {display: none;}
.landscape {width: 100%; height: 100vh; top: 0; left: 0; position: fixed; z-index: 9999999; background-color: #333;}
.mobileAnim {width: 220px; height: 94px; position: absolute; left: 50%; top: 50%; margin-left: -110px; margin-top: -47px;}
.gif {width: 60px; height: 60px; margin: auto;}
.gif img {width: 100%;}
.mobileAnim p {text-align: center; margin-top: 10px;}

/*---------------------------------------------------------*/
/*  STYLES FOR DESKTOP VERSION (ALIGN CONTENT CENTER)      */
/*---------------------------------------------------------*/
.desktopBg {
	position: absolute  !important;
	top: 50% !important;
	margin-top: -320px !important;
	left: 50% !important;
	margin-left: -180px !important;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
}

/*---------------------------------------------------------*/
/*  CONTAINER                                              */
/*---------------------------------------------------------*/
.content {
	width: 100%;
	max-width: 415px;
	height: 100vh;
	max-height: 736px;
	position: relative;
	margin: auto;
	display: block;
	overflow: hidden;
	background-color: white;
}

.intro{
	width: 100%;
	max-width: 415px;
	height: 100vh;
	max-height: 736px;
	position: absolute;;
	margin: auto;
	display: block;
	overflow: hidden;
	background-color: white;
	z-index: 3000;
	background-image: url("../images/intro.png");
	background-size: cover;
	background-position: center center;
}

.game{
	width: 100%;
	max-width: 415px;
	height: 100vh;
	max-height: 736px;
	position: absolute;;
	margin: auto;
	display: block;
	overflow: hidden;
	background-color: white;
	z-index: 2000;
}


.zona1, .zona2{
	width: 100%;
	height: 50%;
	background-repeat: repeat-y;
	background-size: 100%;
}
.zona1{
	background-image: url("../images/intro_bg1.png");
}
.zona2{
	background-image: url("../images/intro_bg2.png");
}


.cell{
	width: 33.333333%;
	height: 19%;
	float: left;
	text-align: center;
}
.cell img{
	height: 100%;
}
.square{
	width: 100%;
	height: 100%;
	/*border: 1px solid #ddd;*/
}

.result{
	width: 100%;
	height: 24%;
	float: left;
	background: white;
	z-index: 2500;
}

.front, .back{
	width: 100%;
	height: 100%;
}
.front{
	background: white;
	border: 1px solid #ddd;
}
.back{
	background: #eee;
	border: 1px solid #ddd;
}
.old{
	background: #E41E2B !important;
}

.classificacao{
	width: 60%;
    height: 51%;
    margin-left: 20%;
    margin-top: 10%;
}
.classificacao .lata{
	width: 25%;
	height: 100%;
	float: left;
}
.classificacao .score-lata{
	width: 100%;
	height: 100%;
}
.classificacao .original{
	background: url('../images/latas/new-original.png') no-repeat center center;
	background-size: cover;
}
.classificacao .zero{
	background: url('../images/latas/new-zero.png') no-repeat center center;
	background-size: cover;
}
.classificacao .light{
	background: url('../images/latas/new-light.png') no-repeat center center;
	background-size: cover;
}
.classificacao .life{
	background: url('../images/latas/new-life.png') no-repeat center center;
	background-size: cover;
}

.classificacao .score-original{
	background: url('../images/latas/score-new-original.png') no-repeat center center;
	background-size: cover;
	display: none;
}
.classificacao .score-zero{
	background: url('../images/latas/score-new-zero.png') no-repeat center center;
	background-size: cover;
	display: none;
}
.classificacao .score-light{
	background: url('../images/latas/score-new-light.png') no-repeat center center;
	background-size: cover;
	display: none;
}
.classificacao .score-life{
	background: url('../images/latas/score-new-life.png') no-repeat center center;
	background-size: cover;
	display: none;
}

.ecra-final{
	width: 100%;
	height: 87%;
	float: left;
	background: url('../images/latas_final.png') no-repeat center bottom;
	background-size: 100%;
	display: none;
    border-bottom: 2px solid #ddd;
    text-align: center;
}
.img-final{
	width: 100%;
	margin-top: 10%;
}


/*---------------------------------------------------------*/
/*  MEDIA QUERIES                                          */
/*---------------------------------------------------------*/
@media screen and (max-height: 505px) {
	.img-final {
		margin-top: 3%;
	}
}
@media screen and (max-height: 465px) {
	.img-final {
		width: 80%;
	}
}
@media screen and (max-height: 420px) {
	.img-final {
		margin-top: 1%;
		width: 70%;
	}
}
@media screen and (max-height: 380px) {
	.img-final {
		width: 60%;
	}
}