@import url(https://fonts.googleapis.com/css2?family=Mouse+Memoirs&display=swap);
*,
*:before,
*:after {
	box-sizing: border-box;
}

:root {
	--naranja: #ec5900;
	--color_fondo_tarjeta: #ffffff;
	--azul: #77d2ff;
	/* --azul_claro: #3285d2; */
	--amarillo: #ffe54f;
	/* --rojo: #d70b0b;
	--rojo_claro: #e52626; */
	--verde: #51ad06;
	--verde_oscuro: #3f9101;
	--fuente_principal: "Mouse Memoirs", Impact, sans-serif;
	--gris_claro: #f4f4f4;
	--gris: #dedede;
	--blanco: #ffffff;
	--negro: #444444;
	--radio-tarjeta: 18px;
}

@font-face {
	font-family: zenon;
	src: url("../fonts/Rakoon_PersonalUse.ttf") format("opentype");
}

body {
	color: var(--negro);
	margin-top: 40px;
	background-size: 110% 110%;
	background-image: linear-gradient(to left bottom, #1e7dfc, #009fff, #00bbff, #00d3f6, #00e8e3, #00efd3, #31f5bd, #5df9a2, #5ff489, #66ee6e, #6fe74f, #7ae026);
	scroll-behavior: smooth;
	font-family: var(--fuente_principal);
}

#loader {
	z-index: 10000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fefefe;
}

.boton-loader {
	align-self: center;
	background-color: #fff;
	background-image: none;
	background-position: 0 90%;
	background-repeat: repeat no-repeat;
	background-size: 4px 3px;
	border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
	border-style: solid;
	border-width: 2px;
	border-color: #11bfed;
	box-shadow: rgba(0, 0, 0, 0.2) 15px 28px 25px -18px;
	box-sizing: border-box;
	color: #5928af;
	cursor: pointer;
	display: inline-block;
	font-family: Neucha, sans-serif;
	font-size: 1rem;
	line-height: 23px;
	outline: none;
	padding: 0.5rem;
	text-decoration: none;
	transition: all 235ms ease-in-out;
	border-bottom-left-radius: 15px 255px;
	border-bottom-right-radius: 225px 15px;
	border-top-left-radius: 255px 15px;
	border-top-right-radius: 15px 225px;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	max-width: 200px;
}

.boton-loader:hover {
	box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px -5px;
	transform: translate3d(0, 2px, 0);
}

.boton-loader:focus {
	box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 4px -6px;
}

.contenedor {
	margin: 0px auto;
	text-align: center;
	padding: 0px;
	width: 90%;
	max-width: 320px;
}

#contenedor_tarjeta {
	background: var(--color_fondo_tarjeta);
	width: 100%;
	display: inline-block;
	margin: auto;
	border-radius: var(--radio-tarjeta);
	position: relative;
	text-align: center;
	z-index: 1;
	border: 3px solid white;
}

#fondo_contenido {
	background-image: url("../img/fondo_tarjeta.jpg?v=1");
	background-size: cover;
	background-position: right;
}

#fondo_imagenes {
	height: 280px;
	border-radius: 15px 15px 0px 0px;
	background: url("../img/fondo.jpg");
	background-size: cover;
	background-position: bottom;
	animation: efectoMovimientoFondo 15s ease 0.1s infinite;
	-webkit-animation: efectoMovimientoFondo 15s ease 0.1s infinite;
	z-index: -1;
}

#imagenes {
	position: absolute;
	margin: 0px;
	padding: 0px;
}

#contenedor_nombre_subtitulo {
	background: var(--verde);
	height: 100px;
	border-top: 4px solid var(--verde_oscuro);
	border-bottom: 4px solid var(--verde_oscuro);
}

#nombre {
	margin: 0px;
	padding: 0px;
	font-size: 60px;
	color: var(--naranja);
	font-family: zenon;
	text-shadow: var(--blanco) 5px 0px 0px, var(--blanco) 4.90033px 0.993347px 0px, var(--blanco) 4.60531px 1.94709px 0px, var(--blanco) 4.12668px 2.82321px 0px, var(--blanco) 3.48353px 3.58678px 0px, var(--blanco) 2.70151px 4.20736px 0px, var(--blanco) 1.81179px 4.6602px 0px,
		var(--blanco) 0.849836px 4.92725px 0px, var(--blanco) -0.145998px 4.99787px 0px, var(--blanco) -1.13601px 4.86924px 0px, var(--blanco) -2.08073px 4.54649px 0px, var(--blanco) -2.94251px 4.04248px 0px, var(--blanco) -3.68697px 3.37732px 0px, var(--blanco) -4.28444px 2.57751px 0px,
		var(--blanco) -4.71111px 1.67494px 0px, var(--blanco) -4.94996px 0.7056px 0px, var(--blanco) -4.99147px -0.291871px 0px, var(--blanco) -4.83399px -1.27771px 0px, var(--blanco) -4.48379px -2.2126px 0px, var(--blanco) -3.95484px -3.05929px 0px, var(--blanco) -3.26822px -3.78401px 0px,
		var(--blanco) -2.4513px -4.35788px 0px, var(--blanco) -1.53666px -4.75801px 0px, var(--blanco) -0.560763px -4.96845px 0px, var(--blanco) 0.437495px -4.98082px 0px, var(--blanco) 1.41831px -4.79462px 0px, var(--blanco) 2.34258px -4.41727px 0px, var(--blanco) 3.17346px -3.86382px 0px,
		var(--blanco) 3.87783px -3.15633px 0px, var(--blanco) 4.4276px -2.32301px 0px, var(--blanco) 4.80085px -1.39708px 0px, var(--blanco) 4.98271px -0.415447px 0px;
	line-height: 70px;
}

#subtitulo_nombre {
	text-transform: uppercase;
	font-size: 26px;
	font-family: var(--fuente_principal);
	margin: 0px;
	padding: 0px;
	color: var(--negro);
	text-shadow: var(--blanco) 5px 0px 0px, var(--blanco) 4.90033px 0.993347px 0px, var(--blanco) 4.60531px 1.94709px 0px, var(--blanco) 4.12668px 2.82321px 0px, var(--blanco) 3.48353px 3.58678px 0px, var(--blanco) 2.70151px 4.20736px 0px, var(--blanco) 1.81179px 4.6602px 0px,
		var(--blanco) 0.849836px 4.92725px 0px, var(--blanco) -0.145998px 4.99787px 0px, var(--blanco) -1.13601px 4.86924px 0px, var(--blanco) -2.08073px 4.54649px 0px, var(--blanco) -2.94251px 4.04248px 0px, var(--blanco) -3.68697px 3.37732px 0px, var(--blanco) -4.28444px 2.57751px 0px,
		var(--blanco) -4.71111px 1.67494px 0px, var(--blanco) -4.94996px 0.7056px 0px, var(--blanco) -4.99147px -0.291871px 0px, var(--blanco) -4.83399px -1.27771px 0px, var(--blanco) -4.48379px -2.2126px 0px, var(--blanco) -3.95484px -3.05929px 0px, var(--blanco) -3.26822px -3.78401px 0px,
		var(--blanco) -2.4513px -4.35788px 0px, var(--blanco) -1.53666px -4.75801px 0px, var(--blanco) -0.560763px -4.96845px 0px, var(--blanco) 0.437495px -4.98082px 0px, var(--blanco) 1.41831px -4.79462px 0px, var(--blanco) 2.34258px -4.41727px 0px, var(--blanco) 3.17346px -3.86382px 0px,
		var(--blanco) 3.87783px -3.15633px 0px, var(--blanco) 4.4276px -2.32301px 0px, var(--blanco) 4.80085px -1.39708px 0px, var(--blanco) 4.98271px -0.415447px 0px;
	/* line-height: 35px; */
	position: absolute;
	top: 334px;
	left: 110px;
	font-weight: bold;
}

#mensaje {
	margin: 30px 0px 20px 0px;
	padding: 0px 20px;
	line-height: normal;
	font-weight: normal;
	font-size: 26px;
	font-family: var(--fuente_principal);
}

#foto {
	border: 8px solid;
	padding: 2px;
	border-radius: 50%;
	border-top-color: var(--naranja);
	border-right-color: var(--verde);
	border-bottom-color: var(--naranja);
	border-left-color: var(--verde);
	width: 150px;
	height: 150px;
	margin-bottom: 20px;
}

#audio {
	width: 85%;
	margin-bottom: 5px;
}

audio::-webkit-media-controls-panel {
	background-color: var(--gris_claro);
}
audio::-webkit-media-controls-play-button {
	background-color: var(--amarillo);
	border-radius: 50%;
}

#fecha {
	font-size: 26px;
	font-weight: 300;
	color: var(--negro);
	margin-bottom: 0px;
	padding: 0px 10px;
	font-family: var(--fuente_principal);
}

#hora {
	font-size: 26px;
	font-weight: 300;
	color: var(--negro);
	margin-bottom: 0px;
	padding: 0px 10px;
	font-family: var(--fuente_principal);
}

#division_fecha_hora {
	width: 75%;
	margin: 0px auto;
}

#direccion {
	font-size: 18px;
	color: var(--naranja);
	margin-top: 10px;
	margin-bottom: 0px;
}

.boton {
	border-radius: 6px;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	font-family: var(--fuente_principal);
	font-size: 20px;
	line-height: 1.15385;
	outline: none;
	padding: 8px 0.8em;
	position: relative;
	text-align: center;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	vertical-align: baseline;
	white-space: nowrap;
	border: none;
}

.boton_como_llegar {
	background-color: var(--naranja);
	color: var(--blanco);
	width: 90%;
}

.boton_abrir_mapa_en_google {
	background-color: var(--naranja);
	color: var(--blanco);
}

.boton_como_llegar:hover {
	background-color: var(--verde);
	color: var(--blanco);
}

#cinta {
	width: 90%;
	margin-top: 10px;
	position: relative;
	bottom: -10px;
	z-index: 100;
}

#confirmar_asistencia {
	font-family: var(--fuente_principal);
	padding: 10px 0px;
	color: var(--blanco);
	font-size: 22px;
	border-bottom-left-radius: var(--radio-tarjeta);
	border-bottom-right-radius: var(--radio-tarjeta);
	background: var(--verde);
	border-top: 4px solid var(--verde_oscuro);
	z-index: 100;
	color: var(--blanco);
	animation: parpadear_confirmar_asistencia 2s linear infinite;
}

#confirmar_asistencia:hover {
	transform: scale(1.02);
	cursor: pointer;
}

#iframe_mapa {
	overflow: hidden;
	background: none !important;
	height: 350px;
}

.modal {
	z-index: 2000;
}

#footer_tarjetas_cool {
	margin-top: 5px;
	/* font-weight: bold; */
	font-size: 16px;
}

#footer_tarjetas_cool a {
	color: var(--blanco);
	text-decoration: none;
	text-shadow: 1px 1px 1px var(--negro);
}

#footer_tarjetas_cool a:hover {
	font-size: 1.1rem;
}

@keyframes efectoMovimientoFondo {
	0% {
		background-position: 0px 0px;
	}
	50% {
		background-position: -100px 0px;
	}
	100% {
		background-position: 0px 0px;
	}
}

@-webkit-keyframes efectoMovimientoFondo {
	0% {
		background-position: 0px 0px;
	}
	50% {
		background-position: -100px 0px;
	}
	100% {
		background-position: 0px 0px;
	}
}

@keyframes parpadear_confirmar_asistencia {
	50% {
		background-color: var(--verde_oscuro);
	}
}

/* @keyframes efectoFlotar {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(10px);
	}
	100% {
		transform: translateY(0px);
	}
} */