/*---------------------------------------------------------*/
/*  COMMON STYLES                                          */
/*---------------------------------------------------------*/
body {
	position: relative;
	padding: 0;
	margin: 0;
	min-height: 100vh;
	color: #000000;
	overflow-x: hidden;
	font-size: 100%;
	background-color: #ffffff;
	font-family: futuraBold;
}

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

@font-face {
	font-family: futuraBold;
	src: url("../font/FuturaStd-Bold.otf");
}

@font-face {
	font-family: futuraBook;
	src: url("../font/FuturaStd-Book.otf");
}


/*---------------------------------------------------------*/
/*  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 {
	width: 360px !important;
	height: 640px !important;
	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);
}

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

.intro{
	width: 100%;
	height: 100%;
	background: #48240E;
}

.logo{
	position: absolute;
	z-index: 1;
	width: 250px;
	top: 25px;
	left: 50%;
	margin-left: -125px;
}
.logo_img{ width: 100%;}

.date{
	position: relative;
	z-index: 1;
	width: 180px;
	left: 50%;
	margin-top: 4px;
	margin-left: -90px;
}

.menu{
	position: absolute;
	z-index: 1;
	width: 320px;
	height: 200px;
	left: 50%;
	bottom: 85px;
	margin-left: -160px;
}

.btnpersonaje{
	position: absolute;
	z-index: 1;
	width: 230px;
	height: 125px;
	top: 0px;
	left: 0px;
}

.btnpelicula{
	position: absolute;
	z-index: 0;
  width: 230px;
  height: 125px;
  right: 0px;
  bottom: 0px;
}

.btnpersonaje .figure{
	position: absolute;
	z-index: 1;
	height: 100%;
	left: 0px;
	bottom: 0px;
}

.btnpelicula .figure{
	position: absolute;
	z-index: 1;
	height: 100%;
	right: 0px;
	bottom: 0px;
}

.btn{
	position: relative;
	z-index: 0;
	float: right;
	width: 200px;
	height: 70px;
	top: 50%;
	margin-top: -35px;
	background: url(../images/frame.png) center center no-repeat;
	background-size: contain;
}
.btnpelicula .btn{ float: left;}

.btn p{
	position: relative;
	top: 50%;
	margin-top: -21px;
	font-size: 16px;
	line-height: 21px;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
}
.btnpersonaje .btn p{ margin-left: 30px;}

.btn span{ font-size: 21px;}

.info{
	position: absolute;
	z-index: 1;
	width: 300px;
	left: 50%;
	bottom: 15px;
	margin-left: -150px;
}
.info img{ width: 100%;}

.background_header{
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 340px;
	top: 0px;
	left: 0px;
	background: url("../images/imgTop_intro.jpg") center top no-repeat;
	background-size: cover;
}

.background_footer{
	position: absolute;
	z-index: 0;
	width: 230px;
	height: 142px;
	left: 0px;
	bottom: 0px;
	background: url("../images/imgBottom_intro.png") left bottom no-repeat;
	background-size: contain;
}

.personaje{
	display: none;
	width: 100%;
	height: 100%;
	background: url("../images/background_personaje.jpg") left bottom no-repeat;
	background-size: cover;
}

.volver{
	display: none;
	position: absolute;
	z-index: 90;
	width: 50px;
	height: 50px;
	top: 0px;
	left: 0px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

#volver_juego, #volver_juego2{ display: block; background: #7437AA;}

.volver p{
	position: relative;
	width: 100%;
	top: 50%;
	margin-top: -14px;
	font-size: 28px;
	color: #fff;
	text-align: center;
}

.imgTop_personaje{
	position: absolute;
	z-index: 0;
	width: 170px;
	top: -15px;
	left: 50%;
	margin-left: -85px;
}

.content_personaje{
	position: absolute;
	z-index: 1;
	width: 250px;
	top: 160px;
	left: 50%;
	margin-left: -125px;
}

.logo_personaje{
	width: 250px;
	margin-bottom: 10px;
}

.title_personaje {
	width: 100%;
	font-size: 20px;
  color: #FFF;
  text-align: center;
	text-shadow: 2px 2px #000;
}

.title_personaje span{
	font-size: 32px;
	line-height: 40px;
	text-transform: uppercase;
}

.menu_personaje{
	position: absolute;
	width: 300px;
	height: 140px;
	left: 50%;
	bottom: 90px;
	margin-left: -150px;
}

.imgBottom_personaje{
	position: relative;
	z-index: 1;
	height: 100%;
	left: 0px;
}

.btnjuega{
	position: absolute;
	z-index: 1;
 	width: 160px;
	height: 54px;
	top: 50%;
	right: 0px;
	margin-top: -27px;
	background: url(../images/frame2.png) center center no-repeat;
	background-size: contain;
}

.btnjuega p{
	position: relative;
	width: 100%;
	top: 50%;
	margin-top: -21px;
	font-size: 14px;
	line-height: 21px;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 2px 2px #555;
}

.btnjuega span{ font-size: 18px;}

.juego{
	display: none;
	width: 100%;
	height: 100%;
	background: url("../images/background_juego.jpg") top center no-repeat;
	background-size: cover;
}

.yosoy, .teparecesa{
	font-size: 21px;
	color: #FFF;
	margin-top: 50px;
	margin-left: 25px;
	margin-bottom: 10px;
}

.content_juego{
	position: absolute;
	z-index: 0;
	width: 300px;
	top: 90px;
	left: 50%;
	margin-left: -150px;
}

.table{
	position: relative;
	z-index: 0;
	width: 250px;
	top: 10px;
	left: 50%;
	margin-left: -125px;
	background: #FFF;
}

.item_juego{
	height: 40px;
	padding: 5px;
	border-bottom: 1px dotted #000;
}

.item_juego p{
	position: relative;
	width: 100%;
	top: 50%;
	margin-top: -8px;
	font-size: 16px;
	color: #525261;
	text-align: center;
}

.btnavanzar{
	height: 50px;
}

.cinza{ background: #B9B9C8;}

.btnavanzar p{
	width: 100%;
	font-size: 21px;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
	padding-top: 17px;
	margin-left: 30px;
}

.cromo{
	position: absolute;
	z-index: 1;
	width: 120px;
	top: 0px;
	right: -7px;
}

.timido{
	position: absolute;
	z-index: 1;
	width: 105px;
	left: 10px;
	bottom: 10px;
}

.active{ background: #FFC926;}
.next{ background: #A3D900;}

.juego2{
	display: none;
	width: 100%;
	height: 100%;
	background: url("../images/background_juego.jpg") top center no-repeat;
	background-size: cover;
}

.content_juego2{
	position: absolute;
	z-index: 0;
	width: 300px;
	height: 300px;
	top: 90px;
	left: 50%;
	margin-left: -150px;
}

.table_juego2{
	position: relative;
	z-index: 0;
	width: 230px;
	height: 300px;
	top: 10px;
	left: 50%;
	padding: 10px;
	margin-left: -125px;
	background: #FFF;
}

.title_juego2{
	font-size: 21px;
	color: #525260;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.text_juego2{
	font-family: futuraBook;
	font-size: 14px;
	color: #525260;
}

.btncompartir{
	position: absolute;
	width: 105px;
	left: 10px;
	bottom: 10px;
}

.btncompartir p{
	font-size: 16px;
	color: #525260;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.icons{ text-align: center;}
.icons img{ width: 32px;}
.facebook{ margin-right: 10px;}

.boneco{
  position: absolute;
  z-index: 1;
  width: 170px;
  right: 0px;
  bottom: 45px;
}

.pelicula{
	display: none;
	width: 100%;
	height: 100%;
	background: url("../images/background_pelicula.png") top center no-repeat;
	background-size: cover;
}

.content_pelicula{
	position: absolute;
	z-index: 1;
	width: 280px;
	top: 138px;
	left: 50%;
	margin-left: -140px;
}

video{
	position: relative;
	z-index: 0;
	width: 100%;
	border: 1px solid #FFF;
	border-radius: 5px;
}

.video_img{
	position: absolute;
	z-index: 1;
	width: 100%;
	border: 1px solid #FFF;
	border-radius: 5px;
}

.btnsinopsis{ text-align: center;}

.btnsinopsis img{
	width: 50px;
	margin-top: 10px;
}

.btnsinopsis p{
	font-size: 16px;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
	margin-top: 5px;
}

.btncalendario{
	height: 64px;
	margin-top: 20px;
	background: url(../images/frame2.png) center center no-repeat;
	background-size: contain;
}

.btncalendario p{
	padding-top: 10px;
	font-size: 14px;
	line-height: 21px;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 2px 2px #555;
}

.btncalendario span{ font-size: 18px;}

.content_sinopsis{
	opacity: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
	width: 280px;
	height: 280px;
	top: 138px;
	left: 50%;
	margin-left: -140px;
}

.content_sinopsis img{
	position: relative;
	width: 50px;
	left: 50%;
	margin-left: -25px;
	margin-bottom: 10px;
}

.slide{
	width: 250px;
	left: 50%;
  margin-left: -125px;
	font-size: 14px;
	line-height: 18px;
	color: #FFF;
	text-align: center;
}

.slide-dots{ bottom: -30px !important;}

.btncerrar{
	position: absolute;
	width: 160px;
  height: 54px;
	left: 50%;
  bottom: 0px;
  margin-left: -80px;
  background: url(../images/frame2.png) center center no-repeat;
  background-size: contain;
}

.btncerrar p{
	position: relative;
	width: 100%;
	top: 50%;
	margin-top: -6px;
	font-size: 14px;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 2px 2px #555;
}



/*---------------------------------------------------------*/
/*  MEDIA QUERIES                                          */
/*---------------------------------------------------------*/
/*----------- DESKTOP --------------------*/
@media screen and (min-width: 421px) {
	.background_header { height: 380px;}
	.menu { zoom: 110%;}
	.content_personaje { zoom: 115%; top: 180px;}
	.menu_personaje { bottom: 16%;}
}

/*----------- Iphone 6 Plus --------------------*/
@media screen and (min-width: 321px) and (max-width: 420px) and (min-height: 671px) and (max-height: 740px){
	.background_header { height: 410px;}
	.menu { zoom: 110%;}
	.content_personaje { zoom: 115%; top: 180px;}
	.menu_personaje { bottom: 16%;}
}

/*----------- Iphone 6 --------------------*/
@media screen and (min-width: 321px) and (max-width: 420px) and (min-height: 461px) and (max-height: 550px){
	.background_header { height: 410px;}
	.menu { zoom: 110%;}
	.content_personaje { zoom: 115%; top: 180px;}
	.menu_personaje { bottom: 16%;}
}


/*----------- Iphone 5 fullscreen --------------------*/
@media screen and (max-height: 565px) {
	.background_header { height: 300px;}

	.yosoy, .teparecesa { font-size: 16px; margin-bottom: 5px;}
	.cromo { width: 100px;}
	.item_juego, .btnavanzar { height: 35px;}
	.item_juego p { margin-top: -6px; font-size: 14px;}
	.btnavanzar p { font-size: 16px; padding-top: 10px; margin-left: 24px;}

	.content_juego2 { top: 50px;}

	.btncompartir p, .icons{ text-align: left;}
	.btncompartir p { font-size: 13px;}

	.pelicula .logo{ display: none;}
	.content_pelicula { top: 70px;}

	.content_sinopsis { top: 60px;}
}

@media screen and (max-height: 530px) {
	.background_header { height: 275px;}

	.imgTop_personaje { width: 140px; margin-left: -70px;}
	.content_personaje { top: 125px;}

	.boneco { bottom: 28px;}
}

@media screen and (max-height: 500px){
	.background_header { height: 260px;}
	.menu { zoom: 97%; bottom: 70px;}
	.background_footer { height: 105px;}
	.info { width: 250px; margin-left: -125px;}
	.intro .logo{ background: rgba(255, 255, 255,0.7 );}

	.imgTop_personaje { width: 100px; margin-left: -50px; top: -10px;}
	.content_personaje { top: 97px;}

	.juego .logo, .juego2 .logo { display: none;}
	.content_juego, .content_juego2 { top: 10px;}
	.teparecesa{ margin-top: 0px;}
}

@media screen and (max-height: 480px){
	.background_header { height: 250px;}

	.content_pelicula { zoom: 90%;}
}

@media screen and (max-height: 460px){
	.background_header { height: 235px;}

	.imgTop_personaje { display: none;}
	.content_personaje { top: 55px;}

	.menu_personaje { height: 130px;}

	.content_pelicula { zoom: 80%;}
}

@media screen and (max-height: 442px){
	.background_header { height: 200px;}
}

@media screen and (max-height: 420px) {
	.content{ height: 420px; overflow-y: scroll;}
}