@charset "UTF-8";
/* CSS Document */
.fondo_ganastes{
	max-width: 1200px !important;
}
.slick-prev,.slick-next{
	display: none !important;
}
.ganaste66{
	background: url("../images/ganaste2.png") no-repeat bottom;
	padding: 3em
	
}
@font-face {
    font-family: 'Gotham-Black';
    src: url('../fuentes/Gotham-Black.woff2') format('woff2'),
        url('../fuentes/Gotham-Black.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
.ganador2{
	font-size: 4em;
	 font-family: 'Gotham-Black';
	color: #ae2d69;
	line-height: 1em;
}

.slick-dots li button {
     width: 14px;
     height: 14px;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
	 border: 1px solid #ffc700;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #ffc700;
}
.slick-dots li.slick-active button:before {
	background: #ffc700;
	   -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
	font-size: 14px;
	border-radius: 50%;
	width: 14px;
     height: 14px;
}

.f-panel2{
	background: url("../images/fonfo-tablero2.jpg") repeat-x bottom;
}
.bitacora1{
	background: rgba(34,208,220,1);
background: -moz-linear-gradient(45deg, rgba(34,208,220,1) 0%, rgba(34,46,220,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(34,208,220,1)), color-stop(100%, rgba(34,46,220,1)));
background: -webkit-linear-gradient(45deg, rgba(34,208,220,1) 0%, rgba(34,46,220,1) 100%);
background: -o-linear-gradient(45deg, rgba(34,208,220,1) 0%, rgba(34,46,220,1) 100%);
background: -ms-linear-gradient(45deg, rgba(34,208,220,1) 0%, rgba(34,46,220,1) 100%);
background: linear-gradient(45deg, rgba(34,208,220,1) 0%, rgba(34,46,220,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22d0dc', endColorstr='#222edc', GradientType=1 );
	border-radius: 20px;
	height: 102px;
	width: 102px;
	padding: 4px;
}
.bitacora2{
	background: rgba(34,208,220,1);
background: -moz-linear-gradient(-45deg, rgba(34,208,220,1) 0%, rgba(34,46,220,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(34,208,220,1)), color-stop(100%, rgba(34,46,220,1)));
background: -webkit-linear-gradient(-45deg, rgba(34,208,220,1) 0%, rgba(34,46,220,1) 100%);
background: -o-linear-gradient(-45deg, rgba(34,208,220,1) 0%, rgba(34,46,220,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(34,208,220,1) 0%, rgba(34,46,220,1) 100%);
background: linear-gradient(135deg, rgba(34,208,220,1) 0%, rgba(34,46,220,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22d0dc', endColorstr='#222edc', GradientType=1 );
	border-radius: 20px;
	font-family: 'poppinsbold';
	color: #fff;
	
}
.txt-puntos{
	font-size: 1.5em;
	font-family: 'poppinsbold';
}
.n-usuario{
	background: #fff;
	border: 3px solid #c89e02;
	padding: 0.3em 1em;
	border-radius: 1em 0 0 1em;
}
.f-panels{
	background: #fff;
	border: 3px solid #c89e02;
	padding: 0.7em;
	border-radius: 1em;
}
.f-panels2{
	background: #fff;
	border: 3px solid #c89e02;
	padding: 0.7em;
	border-radius: 1em;
}
.panel{
	background: url("../images/panel.png") no-repeat center;
	width: 1009px;
	height: 160px;
	
}
.campo1{
	background: url("../images/campo1.png") no-repeat;
	height: 50px;
	width: 34px;
}
.campo2{
	background: url("../images/campo2.png");
	height: 50px;
	padding: 0 2em;
}
.campo3{
	background: url("../images/campo3.png") no-repeat;
	height: 50px;
	width: 34px;
}

.casilla-azul{
	height: 93px;
	width: 93px;
	border: 2px solid #fff;
	border-radius: 20px;
background: rgba(211,245,248,1);
background: -moz-linear-gradient(-45deg, rgba(211,245,248,1) 0%, rgba(24,153,189,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(211,245,248,1)), color-stop(100%, rgba(24,153,189,1)));
background: -webkit-linear-gradient(-45deg, rgba(211,245,248,1) 0%, rgba(24,153,189,1) 100%);
background: -o-linear-gradient(-45deg, rgba(211,245,248,1) 0%, rgba(24,153,189,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(211,245,248,1) 0%, rgba(24,153,189,1) 100%);
background: linear-gradient(135deg, rgba(211,245,248,1) 0%, rgba(24,153,189,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3f5f8', endColorstr='#1899bd', GradientType=1 );
	font-family: 'poppinsbold';
	font-size: 2em;
	color: #fff;
}
.casilla-roja{
	height: 93px;
	width: 93px;
	border: 2px solid #fff;
	border-radius: 20px;
background: rgba(245,86,232,1);
background: -moz-linear-gradient(-45deg, rgba(245,86,232,1) 0%, rgba(161,9,49,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(245,86,232,1)), color-stop(100%, rgba(161,9,49,1)));
background: -webkit-linear-gradient(-45deg, rgba(245,86,232,1) 0%, rgba(161,9,49,1) 100%);
background: -o-linear-gradient(-45deg, rgba(245,86,232,1) 0%, rgba(161,9,49,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(245,86,232,1) 0%, rgba(161,9,49,1) 100%);
background: linear-gradient(135deg, rgba(245,86,232,1) 0%, rgba(161,9,49,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f556e8', endColorstr='#a10931', GradientType=1 );
	font-family: 'poppinsbold';
	font-size: 2em;
	color: #fff;
}
.casilla-amarillo{
	height: 93px;
	width: 93px;
	border: 2px solid #fff;
	border-radius: 20px;
background: rgba(252,245,110,1);
background: -moz-linear-gradient(-45deg, rgba(252,245,110,1) 0%, rgba(221,115,9,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(252,245,110,1)), color-stop(100%, rgba(221,115,9,1)));
background: -webkit-linear-gradient(-45deg, rgba(252,245,110,1) 0%, rgba(221,115,9,1) 100%);
background: -o-linear-gradient(-45deg, rgba(252,245,110,1) 0%, rgba(221,115,9,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(252,245,110,1) 0%, rgba(221,115,9,1) 100%);
background: linear-gradient(135deg, rgba(252,245,110,1) 0%, rgba(221,115,9,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcf56e', endColorstr='#dd7309', GradientType=1 );
	font-family: 'poppinsbold';
	font-size: 2em;
	color: #fff;
}
.casilla-inicio{
	height: 93px;
	width: 93px;
	border: 2px solid #fff;
	border-radius: 20px;
	background: url("../images/fondo-inicio.jpg");
	font-family: 'poppinsbold';
	font-size: 2em;
	color: #fff;
}
.casilla-final{
	height: 93px;
	width: 93px;
	border: 2px solid #fff;
	border-radius: 20px;
	background: url("../images/Tablero_fer_09.jpg");
	font-family: 'poppinsbold';
	font-size: 2em;
	color: #fff;
}
.titulogrande{
	font-size: 4.5em;
	font-family: 'poppinsbold';
	color: #fffc00;
	line-height: 1em;
	padding-top: 20px;
}
.txt-p-final{
	font-size: 1.5em;
	font-family: 'poppinslight';
}
.nombre-final{
	font-size: 2.6em;
	color: #fffc00;
	font-family: 'poppinslight';
	line-height: 1em;
}
.fondo-login{
	background: url("../images/fondo-juego.jpg") no-repeat center;
	background-size: cover;
	height: auto;
	padding: 2em 0;
}
.fondo-login2{
	background: url("../images/fondo-juego.jpg") no-repeat center;
	background-size: cover;
	padding: 2em 0;
}
.marco1{
	background: url("../images/marco1.png") no-repeat;
	height: 451px;
	width: 400px;
	padding: 2em 2em 0.5em 2em;
}
.marco2{
	background: url("../images/marco2.png") no-repeat;
	height: 451px;
	width: 400px;
	padding: 2em 2.5em 0.5em 2.5em;
}

.numeros{
	background: url("../images/Elipse1.png") no-repeat;
	height: 69px;
	width: 69px;
	font-family: 'poppinsbold';
	color: #fff;
	font-size: 2em;
}
.txt-login{
	color: #616161;
	font-family: 'poppinslight';
	line-height: 1.2em;
}
.txt-bold{
	font-family: 'poppinsbold' !important;
}
.titulo-login{
	font-family: 'poppinslight';
	font-size: 2em;
	color: #616161;
}
.instru{
	border-bottom: 3px solid #e9e9e9; 
	padding-bottom: 0.5em;
}
.contenedor-juego{
	max-width: 1000px; margin: 0 auto;
}

/* ==========================================================================
   Textos
   ========================================================================== */

h1{
}
h2{
}
h3{
}
h4{
}
h5{
}
h6{
}
p{}
/* ==========================================================================
   Textos
   ========================================================================== */

/* ==========================================================================
   banners
   ========================================================================== */

/* ==========================================================================
   banners
   ========================================================================== */


/* ==========================================================================
  inputs
   ========================================================================== */

input[type=text],input[type=password]{
	border: none;
	background: none;
	border: 1px solid #fff;
	width: 100%;
	border-radius: 10px;
	padding: 0.3em 1em;
	color:#fff;
	
}
input[type=button],button,.progress-foot button{
	border: none;
	background: none;
	border: 2px solid #fff;
	border-radius: 10px;
	padding: 0.3em 1em;
	color: #fff;
    background: rgba(59,205,46,1);
background: -moz-linear-gradient(45deg, rgba(59,205,46,1) 0%, rgba(96,224,76,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(59,205,46,1)), color-stop(100%, rgba(96,224,76,1)));
background: -webkit-linear-gradient(45deg, rgba(59,205,46,1) 0%, rgba(96,224,76,1) 100%);
background: -o-linear-gradient(45deg, rgba(59,205,46,1) 0%, rgba(96,224,76,1) 100%);
background: -ms-linear-gradient(45deg, rgba(59,205,46,1) 0%, rgba(96,224,76,1) 100%);
background: linear-gradient(45deg, rgba(59,205,46,1) 0%, rgba(96,224,76,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bcd2e', endColorstr='#60e04c', GradientType=1 );
}
input::placeholder{
	color: #fff !important;
}
.marco_1{
	background-image: url(../images/fondo-tablero2.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top center;
}
/* ==========================================================================
  inputs
   ========================================================================== */


/* ==========================================================================
   font-face
   ========================================================================== */
@font-face {
    font-family: 'poppinsblack';
    src: url('../fuentes/poppins-black-webfont.woff2') format('woff2'),
         url('../fuentes/poppins-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'poppinsblack_italic';
    src: url('../fuentes/poppins-blackitalic-webfont.woff2') format('woff2'),
         url('../fuentes/poppins-blackitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'poppinsbold';
    src: url('../fuentes/poppins-bold-webfont.woff2') format('woff2'),
         url('../fuentes/poppins-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'poppinsbold_italic';
    src: url('../fuentes/poppins-bolditalic-webfont.woff2') format('woff2'),
         url('../fuentes/poppins-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'poppinsextrabold';
    src: url('../fuentes/poppins-extrabold-webfont.woff2') format('woff2'),
         url('../fuentes/poppins-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'poppinsextrabold_italic';
    src: url('../fuentes/poppins-extrabolditalic-webfont.woff2') format('woff2'),
         url('../fuentes/poppins-extrabolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'poppinsextralight';
    src: url('../fuentes/poppins-extralight-webfont.woff2') format('woff2'),
         url('../fuentes/poppins-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'poppinsextralight_italic';
    src: url('../fuentes/poppins-extralightitalic-webfont.woff2') format('woff2'),
         url('../fuentes/poppins-extralightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'poppinsitalic';
    src: url('../fuentes/poppins-italic-webfont.woff2') format('woff2'),
         url('../fuentes/poppins-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'poppinslight';
    src: url('../fuentes/poppins-light-webfont.woff2') format('woff2'),
         url('../fuentes/poppins-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'poppinslight_italic';
    src: url('../fuentes/poppins-lightitalic-webfont.woff2') format('woff2'),
         url('../fuentes/poppins-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'poppinsmedium';
    src: url('../fuentes/poppins-medium-webfont.woff2') format('woff2'),
         url('../fuentes/poppins-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/* ==========================================================================
  font-face
   ========================================================================== */
/* ==========================================================================
  Queris
   ========================================================================== */
@media (max-width:1200px) {
	.f-panel2{
	background: #c89e02 repeat;
		border-radius: 30px 30px 0 0;
		padding: 0.5em;
}
	.panel{
	background:#ddca57;
	width: auto;
	height: auto;
		padding: 0.5em 1em;
		border-radius: 30px 30px 0 0;
		border: 5px solid #d0a83c;
	
}
}
@media (max-width: 992px){
	.fondo-login{
	background: url("../images/fondo-juego.jpg") repeat center;
	background-size: cover;
	height: auto;
}
	.f-panels2{
	background: #fff;
	border: 3px solid #c89e02;
	padding: 0.7em;
	border-radius: 0 0 30px 30px;
}

.preguntas-juego{
	background: url("../images/fondo-preguntas2.png") no-repeat center !important;
	width: 760px !important;
	height:625px !important;
	padding:4em !important;
}

}
@media (max-width: 768px){
.preguntas-juego{
	background: url("../images/fondo-preguntas2.png") no-repeat center !important;
	width: 100% !important;
	height: 100% !important;
	padding: 3em !important;
}
.titulogrande{
	font-size: 1.5em;
}
.txt-p-final{
	font-size: 1em;
}
.nombre-final{
	font-size: 1.6em;
}

}

@media (max-width: 500px){
	.txt-puntos {
	font-size: 1.2em !important;
}
.logos_carta{
	max-width: 290px !important;
}

.numeros-pregunta{
	background: url("../images/Elipse3_48.png") no-repeat !important;
	height: 48px !important;
	width: 48px !important;
	font-family: 'poppinsbold' !important;
	color: #fff !important;
	font-size: 1.3em !important;
}

	
	body{
		font-size: 12px;
	}
	.x_close{
		right: 15% !important;
	}
		.modal-juego3{
	background: url("../images/modal-juego3-1.png") no-repeat center !important;
	width: 314px !important;
	height: 490px !important;
}
	.modal-juego2{
	background: url("../images/modal-juego2-1.png") no-repeat center !important;
	width: 314px !important;
	height: 490px !important;
}
.modal-juego1{
	background: url("../images/modal-juego1-1.png") no-repeat center !important;
	width: 314px !important;
	height: 490px !important;

}
.txt-modales-juego{
	font-size: 1.2em !important;
}
	.marco1{
	background: url("../images/marco1-1.png") no-repeat center;
	height: 451px;
	width: 310px;
	padding: 2em 1em 0.5em 1em;
}
.marco2{
	background: url("../images/marco2-1.png") no-repeat center;
	height: 451px;
	width: 310px;
	padding: 2em 1em 0.5em 1em;
}

.marco1{
	background: url("../images/marco1-1.png") no-repeat center;
	height: 451px;
	width: 310px;
	padding: 2em 1em 0.5em 1em;
}
.marco2{
	background: url("../images/marco2-1.png") no-repeat center;
	height: 451px;
	width: 310px;
	padding: 2em 1em 0.5em 1em;
}
	.preguntas-juego{
	background: url("../images/fondo-preguntas2.png") no-repeat center !important;
	width: 100% !important;
	height: 100% !important;
	padding:4em 1em !important;
}
}

.logos_carta{
	max-width: 500px;
}

@media (max-width:350px){

.marco1{
	width: 290px;
}
.marco2{
	width: 290px;
}
}



.cambiar-texto-p-1{
	font-weight: 700 !important;
	color:#ff3002 !important;
}
.cursor-pointer{
	cursor: pointer;
}


a:hover{
	text-decoration: underline !important;
	cursor: pointer;
}

.border-select{
	border: 2px solid white;
}


.modal-juego1{
	background: url("../images/modal-juego1.png") no-repeat center;
	width: 490px;
	height: 317px;
}
.modal-juego2{
	background: url("../images/modal-juego2.png") no-repeat center;
	width: 490px;
	height: 317px;
}
.modal-juego3{
	background: url("../images/modal-juego3.png") no-repeat center;
	width: 490px;
	height: 317px;
}
.txt-modales-juego{
	font-size: 1.5em;
	font-family: 'poppinsmedium';
	color: #000;
	line-height: 1em;
}
.txt-modales-juego2{
	font-size: 1em;
	font-family: 'poppinsmedium';
	color: #000;
	line-height: 1.3em;
}
.preguntas-juego{
	background: url("../images/fondo-preguntas.png") no-repeat center;
	width: 846px;
	height: 548px;
}
.numeros2{
	background: url("../images/Elipse2.png") no-repeat;
	height: 48px;
	width: 48px;
	font-family: 'poppinsbold';
	color: #fff;
	font-size: 1.3em;
}
.numeros-pregunta{
	background: url("../images/Elipse3.png") no-repeat;
	height: 69px;
	width: 69px;
	font-family: 'poppinsbold';
	color: #fff;
	font-size: 2em;
}

.ganador{
	font-family: 'poppinsbold';
	color: #940F0F;
	font-size: 1.5em;
	background: #FFE200;
	display: inline-block;
	padding: 0 1em;
	transform: rotate(-3deg)
}
.fondo-v-g{
	border-radius: 30px;
	background: rgba(21,238,180,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(21,238,180,1) 0%, rgba(15,227,135,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(21,238,180,1)), color-stop(100%, rgba(15,227,135,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(21,238,180,1) 0%, rgba(15,227,135,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(21,238,180,1) 0%, rgba(15,227,135,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(21,238,180,1) 0%, rgba(15,227,135,1) 100%);
background: radial-gradient(ellipse at center, rgba(21,238,180,1) 0%, rgba(15,227,135,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#15EEB4', endColorstr='#0FE387', GradientType=1 );
}
.serpentina{
	background: url("../images/serpentinas.png") center no-repeat;
	padding: 5em 1em;
}

/* ==========================================================================
  Queris
   ========================================================================== */