@font-face {
	src: url("FONTS/Arsenal.ttf");
	font-family: Arsenal;
}
@font-face {
	src: url("FONTS/Pacifico.ttf");
	font-family: Pacifico;
}
@font-face {
	src: url("FONTS/LGothic.ttf");
	font-family: LGothic;
}
@font-face {
	src: url("FONTS/Ubuntu.ttf");
	font-family: Ubuntu;
}
@keyframes deslizarAbajo {
	from {transform: translateY(0%);}
	to {transform: translateY(100%);}
}
@keyframes deslizarArriba {
	from {transform: translateY(0%);}
	to {transform: translateY(-100%);}
}
@keyframes deslizarDerecha {
	from {transform: translateX(-100%);}
	to {transform: translateX(0%);}
}
@keyframes deslizarIzquierda {
	from {transform: translateX(0%);}
	to {transform: translateX(-100%);display: none;}
}
@keyframes rotarA {
	from {transform: rotateY(90deg);}
	to {transform: rotateY(0deg);}
}
@keyframes rotarB {
	from {transform: rotateY(-90deg);}
	to {transform: rotateY(0deg);}
}
@keyframes durazno {
	0%{transform: translateY(0%);}
	10%{transform: translateY(-1%);}
	20%{transform: translateY(-2%);}
	30%{transform: translateY(-3%);}
	40%{transform: translateY(-4%);}
	50%{transform: translateY(-5%);}
	60%{transform: translateY(-4%);}
	70%{transform: translateY(-3%);}
	80%{transform: translateY(-2%);}
	90%{transform: translateY(-1%);}
	100%{transform: translateY(0%);}
}
* {
	scroll-behavior: smooth;
	box-sizing: border-box;
	user-select: none;
	outline: none;
	font-family: "Ubuntu";
	scrollbar-width: 0px;
}
body {
	width: 100%;
	margin: 0;
	padding: 0;
	background: radial-gradient(#001a63, #244c88);
	backdrop-filter: brightness(0.5);
}
::-webkit-scrollbar {
	display: none;
}
.NavMobile {
	animation: deslizarDerecha .4s;
}
#canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.NavBar {
	width: 100%;
	height: 8vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.iconHome {
	position: absolute;
	top: 15px;
	left: 25px;
	display: none;
	z-index: 3;
}
.iconHome img {
	max-width: 80px;
	max-height: 80px;
	z-index: 3;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}
.iconHome img:hover {
	transition: all 0.3s ease-in-out;
	transform: scale(1.05);
}
.Nav {
	width: 90%;
	height: 90%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.Nav span {
	padding: 12px;
	text-decoration: none;
	color: #f1f1f1;
	font-size: 1.1em;
	z-index: 2;
	cursor: pointer;
}
.Nav span .lins {
	position: absolute;
	display: flex;
	top: 2%;
	width: 0%;
	opacity: 0;
	border-bottom: 2px solid #fff;
}
.seccion {
	display: none;
}
#container_all {
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 84vh;
	transition: all 0.4s ease-in-out;
}
#content {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}
.contentForm {
	width: 80%;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: column;
}
.mtext {
	font-size: 1.5em;
	color: #ff9800;
	font-family: Ubuntu;
	margin: 5px;
}
.signupform {
	width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.subinput {
	width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.coninput {
	width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.coninput label {
	color: #eee;
	font-size: 14px;
}
.coninput input {
	width: 100%;
	height: 30px;
	border-radius: 8px;
	padding: 5px;
	font-family: Ubuntu;
	font-size: 16px;
	border: 0;
	background-color: #dedede;
	color: #000;
}
.loginbutton {
	width: 100%;
    height: 35px;
    border-radius: 8px;
    background: #FF9800;
    border: 0;
    cursor: pointer;
    color: #101010;
    font-weight: 600;
    font-size: 16px;
}
.cabecera {
	width: 25%;
	height: 85%;
	background-color: #ffffff00;
	/*background-image: url(../IMAGENES/LETRE2.png);*/
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}
.imgLetre,.anun {
	max-width: 25rem;
	max-height: 25rem;
	transition: all 0.4s ease-in-out;
	animation: deslizarDerecha .4s;
	filter: drop-shadow(-5px 12px 24px #0000006e);
}
.anun {
	display: none;
	flex-direction: column;
}
.immm {
	max-width: 200px;
	max-height: 200px;
}
.imgLetre:hover {
	transition: all 0.4s ease-in-out;
	transform: scale(1.05);
}
.cartonBingo {
	width: 60%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.Cbingo,.cnForms {
	width: 16rem;
    height: 25rem;
    display: flex;
    align-items: center;
    justify-content: center;
	transition: all 0.4s ease-in-out;
	animation: rotarA .4s both;
}
.cnForms {
	display: none;
	animation: rotarB .4s both;
}
.formatos {
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 5px 8px 14px 0 #0000008c, -3px -3px 10px 0 #0000004d;
}
.cartonB {
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    width: 100%;
    height: 100%;
    background-color: #001142;
    box-shadow: 5px 8px 14px 0 #0000008c, -3px -3px 10px 0 #00000033;
	overflow: hidden;
	position: relative;
}
.imcardbk {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	filter: brightness(.5);
	border-radius: 8px;
}
.namel {
	color: #eee;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 85px;
}
.formatos form {
    height: 16rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin:20px;
	background-color: #00000000;
	padding: 5px;
    border-radius: 10px;
	z-index: 2;
}
@keyframes lbl {
	from {transform: translateY(0px);}
	to {transform: translateY(-25px);}
}
.formatos form label {
	color: #ff9800;
	opacity: 0;
	font-size: 14px;
	transition: all .4s ease-in-out;
	position: absolute;
	animation: lbl .4s both;
}
.lbl {
	width: 100%;
	flex-direction: column;
	display: flex;
}
.formatos form input {
	width: 100%;
	height: 40px;
	padding: 5px 40px;
	color: #fff;
	border: 1px solid #fff;
	font-size: 14px;
	background-size: 25px;
	background-position: 8px;
	background-repeat: no-repeat;
	margin-bottom: 25px;
	background-color: #00000000;
	border-radius: 12px;
}
.formatos form input::placeholder {
	color: #fff;
	transition: all .3s ease-in-out;
	opacity: 1;
}
.terms {
	display: flex;
    color: #fff;
    font-size: 12px;
    align-items: center;
    justify-content: center;
}
.formatos form .terms input[type="checkbox"] {
	height: 18px;
	width: 18px;
	margin: 0 10px;
}
.tablaCarton {
	float:left;
	margin:20px;
	background-color: #f1f1f104;
	padding: 5px;
    border-radius: 10px;
	z-index: 2;
}
.tablaCarton th {
	font-family: Ubuntu;
    font-weight: 600;
    font-size: 25px;
    color: #000000;
    width: 50px;
    height: 50px;
}
.tablaCarton td {
	border: 1px #001142 solid;
	margin: 3px;
	width: 40px;
	height: 40px;
	text-align:center;
	border-radius: 50%;
	font-weight: 600;
	color: #000000;
	font-size: 20px;
	background: url(../../JUEGO/ball.png) center  / 100% no-repeat,#fff;
}
.tablaCarton tr:nth-child(4) td:nth-child(3) {
	background-color: #001142;
}
.carBot {
	width: 50%;
    height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.imgbn {
	max-width: 90px;
    max-height: 90px;
    position: relative;
    display: flex;
    top: 8px;
}
.botones {
	width: 100%;
	height: 80px;
	display: flex;
	z-index: 2;
	align-items: center;
	justify-content: space-around;
}
.btn_Car {
	width: 45%;
	height: 45px;
	border: 0;
	background-color: #001142;
	color: #fff;
	font-weight: 100;
	font-size: 16px;
	border-radius: 8px;
	cursor: pointer;
	border: 1px solid #fff;
	transition: all 0.3s ease-in-out;
}
.btn_Car:hover {
	transition: all 0.3s ease-in-out;
	transform: scale(1.05);
	box-shadow: 0px 20px 20px 0 #0000003b;
}
.ContN {
	width: 50%;
	height: 100%;
	padding: 15px 0px 0px 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	animation: rotarA .4s both;
	transition: all .4s ease-in-out;
}
.ContNtras {
	width: 50%;
	height: 100%;
	padding: 15px 0px 0px 50px;
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	animation: rotarB .4s both;
	transition: all .4s ease-in-out;
}
.bigFont {
	font-size: 2em;
	color: #ff9800;
	font-weight: 600;
	font-family: Ubuntu;
}
.smallFont {
	width: 100%;
	font-family: Arsenal;
	font-size: 16px;
	color: #fff;
}
.smallFont b {
	color: #ff9800;
}
.mediumFont {
	font-size: 2em;
	color: #ff9800;
}
#Premios,
#Juego,
#Transmisiones,
#Soporte {
	width: 100%;
	height: 84vh;
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transition: all 0.3s ease-in-out;
	animation: deslizarDerecha .4s;
}
#Juego {
	background-image: url(../IMAGENES/SVGS/reloj.svg);
	background-position: left;
	background-repeat: no-repeat;
	background-size: 30%;
}
#Transmisiones {
	background-image: url(../IMAGENES/SVGS/video.svg);
	background-position: left;
	background-repeat: no-repeat;
	background-size: 30%;
	height: auto;
	display: none;
	align-items: center;
	justify-content: center;
}
#Soporte {
	padding: 12px;
}
#Soporte span {
	color: #fff;
	font-size: 1.2em;
}
.contChat {
	width: 350px;
	height: 270px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: #005861;
	border-radius: 12px;
	margin: 12px;
	position: relative;
}
.whalogo {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	position: absolute;
	top: 5px;
	left: 5px;
	background: url(../IMAGENES/SVGS/whatsapp.svg) center no-repeat;
}
.contChat form {
	width: 90%;
	height: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 2;
}
.contChat form input[type="submit"] {
	width: 90%;
    height: 40px;
    border: 0;
    background-color: #16b135;
    color: #fff;
    font-size: 1.1em;
    border-radius: 8px;
    margin-top: 8px;
    cursor: pointer;
}
.contChat form textarea {
	width: 300px;
	height: 170px;
	border-radius: 12px;
	border: 1px solid green;
	padding: 8px;
}
.contVid {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex-wrap: wrap;
}
.tarVid {
	margin: 15px;
	z-index: 3;
}
.horz {
	width: 100%;
	height: 20%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.conPremios {
	width: 100%;
	height: 80%;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.trPremio {
	width: 200px;
	height: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 5px 8px 14px 0 #00000054, -3px -3px 10px 0 #00207b;
	border-radius: 25px;
}
.trPremio img {
	max-width: 100px;
	max-height: 100px;
	display: flex;
	position: relative;
	top: -15%;
	border-radius: 50%;
	margin-bottom: -20%;
    box-shadow: -4px 4px 13px 0 #0000006b;
}
.stit {
	width: 90%;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ff9800;
	font-size: 1.5em;
}
.barras {
	display: none;
	transition: all 0.4s ease-in-out;
}
.NavMobile {
	display: none;
}
.Footer {
	width: 100%;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pie {
	color: #949494;
	font-size: 10px;
	font-family: Consolas;
	cursor: pointer;
	z-index: 2;
}
.Bordenado {
	width: 100%;
	height: 100vh;
	z-index: 4;
	background-color: #001142;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0%;
	left: 0%;
}
.contOr {
	width: 90%;
	height: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.contOr img {
	max-width: 60px;
	max-height: 60px;
	margin:  15px;
	transition: all 0.3s ease-in-out;
	border-radius: 15px;
	cursor: pointer;
}
.pactU {
	width: 160px;
	height: 60px;
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	border: 1px solid #fff;
	cursor: pointer;
}
.acl {
	width: 100%;
	padding: 0px 12px;
	color: #fff;
}
.contLets {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 12px;
}
.imgNN {
	padding: 15px 40px;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid #eee;
	cursor: help;
	border-radius: 8px;
}
.inner {
	position: absolute;
	top: 5%;
	left: 5%;
	z-index: 4;
}
.Ipago {
	width: 300px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	background-color: #eee;
	border-radius: 15px;
	padding: 10px;
}
.tiempo span {
	color: #fff;
	font-size: 3.5em;
}
.headInfo {
	width: 100%;
	height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
	z-index: 2;
}
.sideA,
.sideB {
	width: 70%;
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-direction: column;
}
.sideA {
	width: 30%;
	background: url(../IMAGENES/logotype.webp) left / 80px no-repeat;
}
.datis {
	font-size: 12px;
	color: #eee;
	padding: 10px 25px 0px 5px;
	text-align: center;
}
#FiltrarContenido {
	position: absolute;
    top: 5rem;
    left: 10px;
    width: 25%;
    height: 30px;
    font-size: 16px;
    color: #000;
}
.embedContainer {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
}
.backbutton {
	width: 70px;
	height: 40px;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 7;
	border: 0;
	border-radius: 8px;
	background-color: #39e500;
	color: #101010;
	font-size: 16px;
	font-weight: 600;
	font-family: Ubuntu;
	cursor: pointer;
}
#infoCli {
	width: 40%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
}
.modCli {
	width: 90%;
    height: 80px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.formfield {
	width: 100%;
    height: 40px;
    padding: 5px 5px 5px 40px;
    border-radius: 8px;
    border: 0;
    background: #b7b7b7;
    color: #101010;
    font-size: 16px;
    font-family: Ubuntu;
}
.sbutton {
	width: 100px;
    height: 40px;
    font-size: 16px;
    color: #101010;
    font-weight: 600;
    background: #009688;
    border-radius: 8px;
    border: 0;
    margin: 10px;
    cursor: pointer;
}
#incrust {
	width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}
@media screen and (max-width: 1000px) {
	.NavBar {
		justify-content: flex-end;
	}
	.NavMobile {
		width: 100%;
		height: 100vh;
		display: none;
		align-items: center;
		justify-content: flex-start;
		flex-direction: column;
		background-color: #00114200;
		position: fixed;
		top: 9%;
		transition: all 0.3s ease-in-out;
	}
	.contMobile {
		width: 90%;
		height: 80%;
		background-color: #f1f1f1;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.contMobile a {
		width: 95%;
		padding: 20px 1px 25px 8px;
		margin-bottom: 8px;
		text-decoration: none;
		font-size: 20px;
		font-family: Arsenal;
		color: #244c88;
		background-color: #dedede;
		border-radius: 8px;
	}
	#canvas {
		position: fixed;
	}
	#container_all {
		flex-direction: column;
		height: auto;
	}
	.imgLetre {
		max-width: 20rem;
		max-height: 20rem;
	}
	.barras {
		display: flex;
		margin-right: 20px;
		width: 40px;
		height: 40px;
		background-image: url(../IMAGENES/SVGS/bars.svg);
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
		z-index: 7;
	}
	.Nav {
		display: none;
	}
	.cabecera {
		background-size: 75%;
	}
	.cartonBingo {
		margin-top: 0px;
		width: 100%;
		height: auto;
		flex-direction: column;
	}
	.cabecera_left img {
	    max-width: 190%;
	    max-height: 190%;
	    margin-left: 100%;
	    margin-top: 100%;
	}
	.ContN,.ContNtras {
		width: 100%;
		padding: 14px;
	}
	.bigFont {
		font-size: 2em;
		margin-bottom: 1px;
	}
}
@media (max-height: 500px) and (orientation: landscape){
	.Cbingo {
		width: 12rem;
		height: 19rem;
	}
	.imgbn {
		max-width: 150px;
		max-height: 150px;
	}
	.tablaCarton td {
		width: 25px;
		height: 25px;
	}
	.trPremio {
		height: 290px;
	}
}
@media screen and (max-width: 800px) {
	.contChat form textarea {
		width: 265px;
	}
	.NavBar {
		justify-content: flex-end;
	}
	.NavMobile {
		width: 100%;
		height: 100vh;
		display: none;
		align-items: center;
		justify-content: flex-start;
		flex-direction: column;
		background-color: #00114200;
		position: fixed;
		top: 9%;
		transition: all 0.3s ease-in-out;
	}
	.contMobile {
		width: 90%;
		height: 80%;
		background-color: #f1f1f1;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.contMobile a {
		width: 95%;
		padding: 20px 1px 25px 8px;
		margin-bottom: 8px;
		text-decoration: none;
		font-size: 20px;
		font-family: Arsenal;
		color: #244c88;
		background-color: #dedede;
		border-radius: 8px;
	}
	.horz {
		margin-bottom: 5rem;
		padding: 20px;
	}
	#Premios {
		height: auto;
	}
	.conPremios {
		flex-direction: column;
		height: auto;
	}
	.trPremio {
		margin-bottom: 5rem;
	}
	#canvas {
		position: fixed;
	}
	#container_all {
		flex-direction: column;
		height: auto;
	}
	.imgLetre {
		max-width: 20rem;
		max-height: 20rem;
	}
	.barras {
		display: flex;
		margin-right: 20px;
		width: 40px;
		height: 40px;
		background-image: url(../IMAGENES/SVGS/bars.svg);
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
		z-index: 7;
	}
	.Nav {
		display: none;
	}
	.cabecera {
		background-size: 75%;
	}
	.cartonBingo {
		margin-top: 0px;
		width: 100%;
		height: auto;
		flex-direction: column;
	}
	.cabecera_left img {
	    max-width: 190%;
	    max-height: 190%;
	    margin-left: 100%;
	    margin-top: 100%;
	}
	.ContN,.ContNtras {
		width: 100%;
		padding: 14px;
	}
	.bigFont {
		font-size: 2em;
		margin-bottom: 1px;
	}
	.Bordenado {
		height: auto;
		position: fixed;
		height: 100vh;
	}
}
@media screen and (max-width: 600px) {
	.NavBar {
		justify-content: flex-end;
	}
	.NavMobile {
		width: 100%;
		height: 100vh;
		display: none;
		align-items: center;
		justify-content: flex-start;
		flex-direction: column;
		background-color: #00114200;
		position: fixed;
		top: 9%;
		z-index: 3;
		transition: all 0.3s ease-in-out;
	}
	.contMobile {
		width: 90%;
		height: 80%;
		background-color: #f1f1f1;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.contMobile a {
		width: 95%;
		padding: 20px 1px 25px 8px;
		margin-bottom: 8px;
		text-decoration: none;
		font-size: 20px;
		font-family: Arsenal;
		color: #244c88;
		background-color: #dedede;
		border-radius: 8px;
	}
	.horz {
		margin-bottom: 5rem;
		padding: 20px;
	}
	#Premios {
		height: auto;
	}
	.conPremios {
		flex-direction: column;
		height: auto;
	}
	.trPremio {
		margin-bottom: 5rem;
	}
	#canvas {
		position: fixed;
	}
	#container_all {
		flex-direction: column;
		height: auto;
	}
	.imgLetre {
		max-width: 20rem;
		max-height: 20rem;
	}
	.barras {
		z-index: 7;
		position: absolute;
		right: 5px;
		top: 5px;
		display: flex;
		margin-right: 20px;
		width: 40px;
		height: 40px;
		background-image: url(../IMAGENES/SVGS/bars.svg);
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
	}
	.Nav {
		display: none;
	}
	.cabecera {
		background-size: 75%;
	}
	.cartonBingo {
		margin-top: 0px;
		width: 100%;
		height: auto;
		flex-direction: column;
	}
	.cabecera_left img {
	    max-width: 190%;
	    max-height: 190%;
	    margin-left: 100%;
	    margin-top: 100%;
	}
	.ContN,.ContNtras {
		width: 100%;
		padding: 14px;
	}
	.bigFont {
		font-size: 2em;
		margin-bottom: 1px;
	}
	.Bordenado {
		height: auto;
		position: fixed;
		height: 100vh;
	}
}