/*---------------------------------------------------------*/
/*  COMMON STYLES                                          */
/*---------------------------------------------------------*/
body {
	position: relative;
	padding: 0;
	margin: 0;
	font-family: 'bree_rgbold';
	color: #FFFFFF;
	overflow-x: hidden;
	font-size: 100%;
	background-color: #00BEF2;
}

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;}

ul li{
  display: inline;
  list-style-type:none;
  text-transform: uppercase;
  margin: 5px;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.b-lazy {
        -webkit-transition: opacity 500ms ease-in-out;
           -moz-transition: opacity 500ms ease-in-out;
             -o-transition: opacity 500ms ease-in-out;
                transition: opacity 500ms ease-in-out;
                 max-width: 100%;
                   opacity: 0;
    }
    .b-lazy.b-loaded {
                   opacity: 1;
    }

.relative {width: 100%; height: 100%; position: relative;}

.landscape {display: none;}
.landscape {width: 100%; height: 100vh; top: 0; left: 0; position: fixed; z-index: 9999999; background-color: #43A6DE;}
.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;}
/*---------------------------------------------------------*/
/*  CONTAINER                                         */
/*---------------------------------------------------------*/
/* --- DISPLAYS --- */

.page {
	width: 100%;
	height: 100%;
}

/* --- END DISPLAYS --- */

.fullBg {
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.container {width: 100%; height: auto;}

.section {width: 100%;}

/*---------------------------------------------------------*/
/*  HOMEPAGE                                               */
/*---------------------------------------------------------*/
/* --- HOMEPAGE --- */
#homepage {width: 100%; height: 100vh; background-color: #00BEF2; background-image: url("../images/bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0;}
.intro {text-align: center; font-size: 32px; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6); line-height: 40px; position: absolute; top: -100%;}
.logo {width: 168px; height: 160px; margin: auto; margin-bottom: 10px;}
.logo img {width: 100%;}
.intro h1 {opacity: 0;}
.intro h2 {color: #FFDD00; opacity: 0;}
.actionBtn {
	width: 200px;
	height: 50px;
	border-radius: 15px;
	background-color: #1C5DAF;
	margin: auto;
	margin-top: 20px;
	opacity: 0;
	text-shadow: none;
	line-height: 46px;
	font-size: 24px;
}

.actionBtn span {font-size: 20px; line-height: 50px; margin-left: 10px;}

/*---------------------------------------------------------*/
/*  GAME WINDOW                                            */
/*---------------------------------------------------------*/
.gameWindow {width: 100%; height: 100vh; top: 0; left: 0; position: fixed; background-color: #43A6DE; display: none;}
.recipesImg {width: 100%; height: 100%; position: absolute; top: 0; z-index: 1;background-color: #43A6DE; background-image: url(""); background-size: cover; background-position: center;}
.blackLayer {width: 100%; height: 100%; position: absolute; top: 0; z-index: 1; background-color: rgba(0, 0, 0, 0.4);}

.topTriangle {width: 100%; height: auto; position: absolute; top: 0; z-index: 3;}
.topTriangle article {position: absolute; top: 10px; left: 10px; font-size: 22px; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6); font-size: 24px;}
.topTriangle article h2 {color: #FFDD00;}
.topTriangle article h3 {font-size: 16px; margin-top: 10px;}
.topTriangle img {width: 100%;}

/* GAME */
.wordsContainer {width: 300px; height: auto; left: 50%; top: 50%; margin-left: -150px; position: absolute; z-index: 6;}
.certoErrado {width: 300px; left: 50%; top: 50%; margin-left: 300px; position: absolute; z-index: 6; text-align: center; font-size: 25px;}

.word {width: 300px; height: auto; margin: auto; text-align: center; font-size: 30px; margin-bottom: 20px;}
.letras{width: 300px; height: auto; margin: auto;}

.letras li{
  color: #333333;
  background: #FFFFFF;
  border-radius: 4px;
  padding: 15px;
  margin: 2px;
  cursor: pointer;
  float: left;
}
.letras li.inactivo{
  background-color: #ccc;
	opacity: 0.6;
}

.bottomGame {width: 100%; height: 130px; position: absolute; bottom: 30px; z-index: 3;}
.left, .right {height: 100%; position: relative; float: left;}
.left {width: 40%;}
.right {width: 60%;}

.logoBottom {width: 98px; height: 93px; margin: auto;}
.logoBottom img {width: 100%;}

.score {width: 100%; height: 30px; position: absolute; bottom:0; background-image: url("../images/score.png"); background-position: left; background-size: 100% 100%; background-repeat: no-repeat;}
.score article {display: block; height: 20px; margin-top: 6px; width: 160px; margin-left: auto;}
.score article h1, .triangle, .score article h2 {float: left;}
.score article h1 {font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; margin-right: 10px;}
.score article h2 {margin-left: 10px; color: #FFDD00; font-size: 22px; font-size: 26px; line-height: 16px;}
.triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 12px;
	border-color: transparent transparent transparent #ffffff;
}

.again, .skip, .next {width: 95%; height: 50px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); position: absolute; text-align: center; line-height: 50px; font-size: 18px; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);}
.again {background-color: #1C5DAF; bottom: 55px;}
.skip, .next {background-color: #FFDD00; bottom: 0; }
.next {display: none;}
/*---------------------------------------------------------*/
/*  MEDIA QUERIES                                          */
/*---------------------------------------------------------*/
@media screen and (min-width: 321px) {
	.topTriangle article {font-size: 26px;}
}

@media screen and (min-width: 415px) {
	#homepage {width: 360px; margin: auto; box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.6);}
	.gameWindow {width: 360px; margin: auto; left: 50%; margin-left: -180px;}
	.intro {width: 360px;}
}