html, body {
	margin: 0;
	padding: 0;
	color: #fff;
	width: 100%;
	height: 100%;
}

html {
	/* height: auto; */
}

body {
	background: #FFFFFF;
	color: #000;
	font-family: eurostile;
	background: url(../img/back.jpg) no-repeat center center #fff;
	background-size: cover;
}

body.interior {
	/* background: url(../img/backInterior.jpg) no-repeat center top #00269E;
	background-size: cover; */
	min-height: 796px;
}

body.onlyMobile {
	min-height: initial !important;
}

/* @font-face {
    font-family: 'gloriola';
    src: url('../fonts/gloriola_regular-webfont.woff2') format('woff2'),
         url('../fonts/gloriola_regular-webfont.woff') format('woff'),
		 url('../fonts/gloriola_regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} */
@font-face {
    font-family: 'eurostile';
    src: url('../fonts/eurostile/eurostile_regular-webfont.woff') format('woff2'),
         url('../fonts/eurostile/eurostile_regular-webfont.woff') format('woff'),
		 url('../fonts/eurostile/eurostile_regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'timenormal';
    src: url('../fonts/ufonts.com_time-normal-webfont.woff2') format('woff2'),
         url('../fonts/ufonts.com_time-normal-webfont.woff') format('woff'),
         url('../fonts/ufonts.com_time-normal-webfont.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;

}

a { 
	text-decoration: none; 
	border: 0;
	cursor: pointer;
	outline: none;
	color: #ffffff;
}

/* *****************************************************
   vmc HELPERS
****************************************************** */

.none { display: none; }

.center { text-align: center; }

.left { text-align: left; }

.right { text-align: right; }

.floatLeft { float: left; }

.floatRight { float: right; }

.clear { clear: both; }

.marginLeft10 { margin-left: 10px; }

.marginRight10 { margin-right: 10px; }

.marginLeft20 { margin-left: 20px; }

.marginRight20 { margin-right: 20px; }

.pointer, .escuchar_  { cursor: pointer; }

.pointer:active, .escuchar_:active  { 
    outline: 1px solid #fff;
}

.relative { position: relative; }

.bold { font-weight: bold; }

.upper { text-transform:uppercase; }

.normal { font-style: normal; }

.larger { font-size: larger; }
.smaller { font-size: smaller; }


/* *****************************************************
   Home
****************************************************** */


.main {
	width: 100%;
	min-height: 100%;
	margin: 0 auto;
	text-align: center;
	min-width: 300px;
	position: relative;
	height: 100%;
}

.home .main {
	/* background: url(../img/todo.png) no-repeat top center transparent;
	background-size: 90% auto; */
}

.imgppalContainer {
	display:inline-block;

}

.home_botonIniciar {
	display: inline-block;
	position: absolute;
	top: 10px;
	outline: 0;
	width: 19%;
	max-width: 200px;
	right: 15px;
	/* transform: translateX(-50%); */
}

.fblogin {
	-webkit-animation: blink .5s step-end infinite alternate; 
	animation: blink .5s step-end infinite alternate; 
}

@-webkit-keyframes blink { 
	50% { border-color: rgba(255,255,255,1); }  
}
@keyframes blink { 
	50% { border-color: rgba(255,255,255,1) }  
}

.home_botonIniciar:hover .fblogin {
	border-color: rgba(255,255,255,1);
	outline: 0;
}
.fblogin {
	width: 100%;
	border-radius: 5px;
	border: 3px solid rgba(255,255,255,0.5);
}

.home_legales {
	display: none;
}

.home .home_legales{
	text-align: center;
	font-size: 12px;
	width: 100%;
	margin-top: 10px;
	display: block;
	position: absolute;
	bottom: 20px;
	left: 0;
}

.home_legales a{
	padding: 10px;
	color: #000;
}

img.header_fotoUsuario{
	width: 30px;
    height: 30px;
    margin-left: 10px;
    float: left;
    margin-right: 10px;
	border: 1px solid #ccc;
    border-radius: 4px;
}

.header_tiempoVencer{
	float: left;
	font-size: 12px;
}

.carta_16 {
    position: relative;
    padding: 0;
    width: 22%;
    display: block;
    float: left;
    box-sizing: border-box;
    margin: 1.43472022955524%;
    line-height: 0;
}

.carta_16 > img{
	width: 100%;
	height: auto;
}

.premios {
	height: auto;
	width: 100%;
	max-width: 320px;
	height: auto;
	max-height: 290px;
}

.premios img {
	max-width: 297px;
}

.premios img, .instrucciones img, .gracias img, .compartir img, .volverJugar img{
	/*width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	padding: 1%;*/
}

.compartir.fb_ {
	display: inline-block;
    height: 28px;
    vertical-align: middle;
}

.compartir img{
	max-width: 185px;
}

.volverJugar img{
	max-width: 260px;
	padding: 0;
}

a.compartir, a.volverJugar {
	display: inline-block;
}

ul.tablaGanadores{
	width: 100%;
	max-width: 361px;
	height: 100%;
	margin: 0 auto;
	padding: 1%;
	background: #0468AE;
	height: 100% !important;
}

ul.tablaGanadores li{
	width: 100%;
	height: auto;
	list-style: none;
	float: left;
	border-bottom: 1px dotted rgba(255,255,255,0.5);
	font-size: 12px;
	background-color: rgba(0,43,156,0.9);
	color: rgba(255,255,255,0.7);
	box-sizing: border-box;
	padding: 8px 10px;
	position: relative;
}

ul.tablaGanadores li.headerGanadores img{
	width: 100%;
	max-width: 361px;
	height: auto;
}

span.fotoUsuario{
	width: 30px;
	height: 30px;
	margin-right: 10px;
	display: inline-block;
	vertical-align: text-bottom;
}

span.fotoUsuario img{
	width: 100%;
	height: auto;
}

ul.tablaGanadores li p.nombreUsuario{
	margin: 0;
	font-size: 20px;
	color: #fff;
	display: inline-block;
}

ul.tablaGanadores li p.tiempoUsuario{
	margin: 0;
	line-height: 100%;
	margin-top: 3px;
	position: absolute;
	top: 4px;
	right: 10px;
}

.titleTabla {
	margin: 0;
	padding: 10px;
	font-size: 16px;
	color: #fff;
}

.proximamente {
	width: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
}

#timer_ {
	display: inline-block;
	width: 49px;
	text-align: left;
}

.bien:after {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: url(../img/bien2.png) no-repeat center center transparent;
	background-size: 60%;
}

.mal:after {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	background: url(../img/mal2.png) no-repeat center center transparent;
	background-size: 40%;
}

.mal img {
	box-sizing: border-box;
}

.bien img {
	box-sizing: border-box;
}

.front {
	position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
		box-sizing: border-box;
		-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
		box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
		border-radius: 10px;
}

.back {
	position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
		box-sizing: border-box;
		-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
		box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
		border-radius: 10px;
}

.front img {
	width: 100%;
	height: auto;
	box-sizing: border-box;
}

.back img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0;
	margin-left: 0;
	border-radius: 10px;
}

#counterInicial {
	font-weight: bold;
	font-size: 2em;
	color: #fff;
	position: absolute;
	background: rgba(0,0,0,0.8);
	padding: 30px 10px 30px 10px;
	width: 100%;
	top: 50%;
	box-sizing: border-box;
	/* height: 100%; */
}

.btnGuardar {
	padding: 1px 7px;
	color: #000;
	background-color: #b3017b;
	color: #fff;
	font-size: 14px;
	border-radius: 3px;
}

.btnGuardar:hover {
	background-color: #33CCFF;
}

.emailForm {
    text-align: center;
    width: 350px;
    margin: auto;
    font-size: 12px;
}

.emailForm input {
    width: 210px;
    height: 20px;
}

.graciasxparticipar {
	width: 600px;
	max-width: 90%;
	margin: auto;
	padding: 10px;
	background-color: rgba(0,0,0,0.4);
	border-radius: 10px;
	color: #fff;
}


.jNotify {
	font-family: sans-serif;
}

/* NuevoNuevo */

.header{
	width: 100%;
	height: 56px;
	margin: 0 auto;
	padding: 0;
	position: absolute;
	background-color: rgb(20, 23, 31);
	top: 0;
	left: 0;
	z-index: 300;
}

.logo {
	height: 42px;
	margin-top: 10px;
	/* -webkit-box-shadow: 0 0 80px 0 rgba(0,0,0,0.3);
	box-shadow: 0 0 80px 0 rgba(0,0,0,0.3); */
}



.header_usuarioConectado {
	position: absolute;
    text-align: left;
    font-size: 12px;
    right: 20px;
	left: initial;
    top: 12px;
    line-height: 130%;
	color: #fff !important;
}

.header_fotoUsuario {
	width: 30px;
	float: left;
	margin-right: 5px;
}

.timer {
    position: absolute;
    right: 10px;
    top: 20px;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    letter-spacing: 1px;
}

.timer p{
	text-align: right;
	margin: 0;
}

.menuNormal {
	display: initial;
}

.menuClose {
	display: none;
}

.active .menuNormal {
	display: none;
}

.active .menuClose {
	display: initial;
}

.menu:active, .menu.active{
	outline: 1px solid #fff;
    outline-offset: 4px;
}

.menu {
	position: absolute;
	left: 20px;
	top: 50%;
	margin-top: -10px;
	padding: 3px 0px;
    line-height: 0;
}



.interior.active::after {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    background-color: rgba(0,0,0,0.7);
    z-index: 199;
    top: 0;
    left: 0;
}

.interior.active .logo {
	height: 35px;
}

.interior .logo {
	-webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}

#menu {
	position: absolute;
	z-index: 200;
	left: -400px;
	top: 0px;
	width: 350px;
	height: 100%;
	max-width: 100%;
	box-sizing: border-box;
	-webkit-transition: all 600ms ease;
	-moz-transition: all 600ms ease;
	-ms-transition: all 600ms ease;
	-o-transition: all 600ms ease;
	transition: all 600ms ease;
	background-color: #0468AE;
	overflow: hidden;
	text-align: left;
	border-top: 56px solid transparent;
	color: #fff;
}

#menu.active {
	left: 0;
	-webkit-transition: all 600ms ease;
    -moz-transition: all 600ms ease;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;

}

#menu li {
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

#menu a {
	display: inline-block;
	width: 100%;
	padding: 15px 10px 15px 20px;
	box-sizing: border-box;
}

#menu li:hover, #menu li:active {
	background-color: rgba(0,0,0,0.4);
}

#menu li.menuResaltado {
	background: rgba(0,0,0,0.2);
}

#menu li.menuResaltado:hover, #menu li.menuResaltado:active {
	background-color: rgba(0,0,0,0.4)
}

.msgTable {
  width: 100%;
  height: 100%;
	display: table;
	color: #000;
}

.msgCell {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 16px;
  line-height: 140%;
}

.vvRegistro {
	width: 300px;
	height: 320px;
	box-sizing: border-box;
	color: #000;
}

.vvRegistro input {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	margin-bottom: 10px;
	color: #000;
	border: 1px solid rgba(0,0,0,0.2);
	font-size: 16px;
}

.vvRegistro img {
	width: 150px;
	height: 35px;
}

.footer {
    width: 100%;
    height: 56px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #333A3E;
    border-top: 1px solid #ffffff;
    box-sizing: border-box;
    z-index: 99;
}

.footerLeft {
	height: 29px;
    position: absolute;
    left: 10px;
    top: 10px;
}

.footerRight {
	height: 29px;
    position: absolute;
    right: 10px;
    top: 10px;
}

a.hover {
	position: relative;
}

a.hover img {
	vertical-align: middle;
}

.hover {
	display: inline-block;
}

.hover:hover::before {
	content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(51,58,62,0.7);
}

.cardBack.hover:hover::before {
	content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(51,58,62,0.7);
	border-radius: 10px;
}

.home .main {
	padding-top: 30px;
	box-sizing: border-box;
	min-height: initial;
}
.rosa {
	display: inline-block;
    /* background-color: #F25494; */
    color: #000;
    padding: 0 10px;
    border-radius: 10px;
	font-size: 22px;
    letter-spacing: 1px;
}

.azul {
	display: inline-block;
    /* background-color: #007CCA; */
    color: #000;
    padding: 0 10px;
    border-radius: 10px;
	margin: 0;
	font-size: 24px;
    letter-spacing: 1px;
}

.crosa {
	color: rgba(255,255,255,0.5);
}

.cazul {
	color: #007CCA;
}

.font20 {
	font-size: 20px;
}

h3 {
	font-size: 28px;
}

.boton {
	background: #007CCA;
	color: #fff;
	padding: 7px;
	border-radius: 3px;
	border: 2px solid transparent;
}

.boton:hover {
	border-color: rgba(255,255,255,0.5);
}

.homeintro {
	line-height: 140%;
    font-size: 20px;
    padding: 10px;
    max-width: 530px;
	margin: auto;
}

.home .azul, .home .rosa {
	line-height: 140%;
    font-size: 20px;
    padding: 10px;
	max-width: 630px;
}

.transparent {
	display: inline-block;
    background-color: transparent;
    color: #000;
    padding: 0 10px;
    border-radius: 4px;
	margin: 0;
	font-size: 22px;
    letter-spacing: 1px;
}

.negroTransparent {
	border-radius: 4px;
	color: #fff;
	background-color: rgba(0,0,0,0.7);
	padding: 10px;
}

.gracias {
	width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
		border-top: 100px solid transparent;
		color: #fff;
}

.gracias p {
	margin: 10px auto;
}

.opcionesdonar {
	width: 560px;
    margin: auto;
    box-sizing: border-box;
}

.columnas {
	display: inline-block;
    box-sizing: border-box;
    width: 166px;
    max-width: 166px;
    height: 310px;
    margin: 0 10px;
    position: relative;
    margin-top: 0px;
    float: left;
    line-height: 130%;
}

.juego {
	position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-bottom: 56px solid transparent;
    border-top: 56px solid transparent;
    box-sizing: border-box;
}

.memorama {
	width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    max-width: 697px;
    box-sizing: border-box;
	margin-top: 90px;
}

.carta_16:nth-child(odd) .cardBack {
	background: url(../img/cardBack0.jpg) no-repeat top center transparent;
	background-size: cover;
	/* border: 1px solid transparent; */
  border-radius: 10px;
}

.carta_16:nth-child(even) .cardBack {
	background: url(../img/cardBack1.jpg) no-repeat top center transparent;
	background-size: cover;
	/* border: 1px solid transparent; */
	border-radius: 10px;
}

ul.tablaGanadores li.instrucciones {
	font-size: large;
    padding: 5px 10px;
}
.menuFormSrPago {
	padding: 0;
    margin: 0;
    line-height: 0;
}
.menuboton {
    width: 100%;
    height: 92px;
    background: url(../img/menu-dona.png) no-repeat left center transparent;
    border: 0;
    outline: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.menuboton:hover {
	background-image: url(../img/menu-dona-hover.png);
}

.footerFormSrPago, .finFormSrPago {
    display: inline-block;
    line-height: 0;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
}



/* *****************************************************
   Mobile
****************************************************** */
@media screen and (min-height:860px) {
	.memorama {
		margin-top: 13%;
	}
}
@media screen and (max-width:770px){
	/*iPad 6*/
	.interior .logo {
		/*width: 150px;*/
	}

	.memorama {
		margin-top: 220px;
	}

	.header_usuarioConectado {
		position: absolute;
		text-align: left;
		font-size: 12px;
		right: initial;
		left: 40px;
		top: 180px;
		line-height: 130%;
		color: #000;
	}

	.timer {
		top: 120px;
		right: 50px;
	}

	.active .header_usuarioConectado {
		display: none;
	}

}

@media screen and (max-width:420px){
	/*iPhone 6 Plus*/
	.interior .logo {
		/* width: 100px; */
		padding-left: 40px;
	}

	.timer {
		top: 50px;
		right: 10px;
	}

	.hideIfMobile {
		display: none;
	}

	

	.timer {
		top: 50px;
	}

	.header_usuarioConectado {
		position: absolute;
		text-align: left;
		font-size: 12px;
		right: initial;
		left: 10px;
		top: 100px;
		line-height: 130%;
		color: #000;
	}

	

	.gracias {
		border-top-width: 130px;
	}

	.gracias .rosa {
		display: block;
		background-color: #F25494;
		color: #fff;
		padding: 0 10px;
		border-radius: 10px;
		font-size: 15px;
		letter-spacing: 1px;
	}

	.transparent {
		font-size: 16px;
	}

	.opcionesdonar {
		width: initial;
	}

	.opcion3 {
		width: 116px;
		border-radius: 50%;
		float: left;
	}

	.contudonacion {

	}

	.donaahora {
		float: left;
	}

	.columnas {
		width: initial;
		max-width: initial;
		height: initial;
	}

	.memorama {
		margin-top: 140px;
	}

}

@media screen and (max-width:365px){
	/*Galaxy Note 3*/
	.home .main {
		padding-top: 20px;
	}

	.home_botonIniciar {
		margin-top: 0;
	}
}

@media screen and (max-width:375px){
	/*iPhone 6*/
	.interior .logo {
		/* width: 150px; */
	}

	.memorama {
		margin-top: 160px;
	}

	.header_usuarioConectado {
		position: absolute;
		text-align: left;
		font-size: 12px;
		right: initial;
		left: 10px;
		top: 146px;
		line-height: 130%;
		color: #fff;
	}

	.timer {
		top: 90px;
	}

}
@media screen and (max-width:420px) and (max-height:732px){
	.memorama {
		margin-top: 150px;
	}
}

@media screen and (max-width:320px) {
	/*iPhone 4, 5*/

	.gracias {
		border-top-width: 90px;
	}
	.footerLeft {
		letter-spacing: -1px;
	}

	.footerRight {
		letter-spacing: -3px;
	}

	.interior .logo {
		/* width: 140px; */
	}

	.home .logo {
		width: 200px;
	}

	.home .main {
		padding-top: 10px;
	}

	.home .azul, .home .rosa {
		margin: 10px;
		font-size: 16px;
		padding: 5px;
		max-width: 630px;
	}

	.homeintro {
		font-size: 17px;
		padding: 10px;
		max-width: 530px;
	}

	.home_botonIniciar {
		margin-top: -20px;
	}

	.header_usuarioConectado {
		position: absolute;
		text-align: left;
		font-size: 12px;
		right: initial;
		top: 137px;
		line-height: 130%;
		color: #000;
		left: 10px;
	}

	

	.gracias .rosa {
		display: block;
		background-color: #F25494;
		color: #fff;
		padding: 0 10px;
		border-radius: 10px;
		font-size: 15px;
		letter-spacing: 1px;
	}

	.transparent {
		font-size: 16px;
	}

	.opcionesdonar {
		width: initial;
	}

	.opcion3 {
		width: 116px;
		border-radius: 50%;
		float: left;
	}

	.contudonacion {

	}

	.donaahora {
		float: left;
	}

	.columnas {
		width: initial;
		max-width: initial;
		height: initial;
	}

	.memorama {
		margin-top: 140px;
	}

	.timer {
		top: 82px;
	}



}

@media screen and (max-width:320px) and (max-height:480px){
	/*iPhone 4*/
	.memorama {
		margin-top: 90px;
	}

	.timer {
		top: 52px;
	}

	.header_usuarioConectado {
		top: 107px;
	}

	.interior .logo {
		/* width: 70px; */
	}

	.gracias {
		border-top-width: 44px;
	}
}

