@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&&display=swap');

:root {
  --c_1t: #ffffff;  /* colo de titulos y fecha */
 
  --c_1: #ffffff;  /* colo de titulos y fecha */
	--c_menu: #ffffff;
	
  --c_1cc: rgba(148, 92, 94,0.80);
  --c_1dd: rgba(148, 92, 94,0.8);
  --c_1_2: rgba(148, 92, 94,0.5); /* una tonalidad del principal mas clara(fondo del timer) */
  --c_1_3: rgba(148, 92, 94,0.3); /* una tonalidad del principal mas oscura */
  
  --c_alpha4: rgba(0, 0, 0, 0.9); /* colores alpha para parallax */
  --c_alpha5: rgba(0, 0, 0, 0.8);
  --c_alpha6: rgba(0, 0, 0, 0.3);
  
  --c_2: #ffffff;   /* color de textos */

  --c_3: #FFF;   /* el color del timer */
  --c_fecha: var(--c_1); /* color de fecha */
  --c_bloques: var(--c_1); /* color de los titulos del bloques*/
  --c_bloques2: var(--c_2); /* color de los textos del bloques*/

  --c_ConfirmarB:  rgba(148, 92, 94,0.87);
  --c_ConfirmarT: #ffffff;
  --c_ConfirmarH: rgba(148, 92, 94,0.80);
  --c_RechazarB: rgba(144, 144, 144, 0.87);
  --c_RechazarT: #ffffff;
  --c_RechazarH: rgba(144, 144, 144, 0.80);
  --c_ConfirmarFormB: #ffffff;
  --c_ConfirmarFormT: #000000;

  --c_sliderB: rgba(0, 0, 0, 0);
  --c_sliderT1: #FFF;
  --c_sliderT2: #FFF;
  --c_sliderBorder: #var(--c_1);
	
  --f_FF1: 'PT Serif', serif;
  --f_FFEspecial: 'Dancing Script', cursive;
  --f_FFRegular: 'Source Sans Pro', sans-serif;

	
  --f_F0: 400 normal 5rem var(--f_FF1); /* titulos */
  --f_F1: 400 normal 4rem var(--f_FF1); /* titulos */
  --f_F2: 300 normal 3rem var(--f_FF1); /* subtitulos/texto */

  --f_FEspecial: 400 normal 10rem var(--f_FFEspecial); /* cursivas */
  --f_FEspecialPeque: 400 normal 3rem var(--f_FFEspecial);

  --f_FRegular: 300 normal 3.1rem var(--f_FFRegular);  /* textos regulares/bloques */
  --f_FRegularMedia: 300 normal 3.6rem var(--f_FFRegular);  /*  botones, listas peques */
  --f_FTimerNumero: 300 normal 3.6rem var(--f_FFRegular);  /* fuente numeros timer */
  --f_FTimerTexto: 300 normal 2.7rem var(--f_FFRegular);  /* fuente texto timer, listanormal */

  --line-height: 5rem;
  --border-radius: 1.2rem; /* aplica a imagenes de galerias */
  --letter-spacing: 0.3rem;
  	
	--anchoPrincipal: 100vw;
	--anchoContenedorInterior: 50vw;

	--altoHeader: 100vh;
	--font1Size: 8vw;
	--font1LH: 9vw;
	--font2Size: 3vw;
	--font2LH: 4vw;

	--marginBottomBadgesSave: 3vw;
	--marginBottomBadges: 2vw;
	
		--imagenSeparador: url(../../../../../../../recursos/rev/Mundo-Rojo/88852_mundoRojo1F1_copia.webp);
		--imagenFondoTenue: url(../../../../../../../recursos/rev/Mundo-Rojo/88852_mundoRojo1F1_copia.webp);

}

.fondoBloque0{  background-color: transparent; }
.fondoBloque1{  background-color: var(--c_1); }
.fondoBloque2{  background-color: var(--c_1_2); }
.fondoBloque3{  background-color: var(--c_1_3); }
.fondoBloque4{  background-color: var(--c_alpha4); }
.fondoBloque5{  background-color: var(--c_alpha5); }
.fondoBloque6{  background-color: var(--c_alpha6); }

.derecha{
  width: 60%;
}

.izquierda{
  width: 60%;
  margin-left: 40%
}
.mb_main
{ 
  padding-bottom: 2vw; 
}


.marginmas{
  margin-top: 56px !important;
}

/* termina las clases personalizad as */


html
{
  background-color: #000 !important;
	font-size: 8px;
}


.videoFondoMain {
	position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -101;
	}

	.videoFondoVideo {
			position: fixed;

		width: 100%;
		height: 100%;
		object-fit: cover;
		 z-index: 99;
	}
.videoFondoOverlay {
	position: fixed;
	top: 0%;
	left: 0%;
	right:0%;
	bottom: 0%;
	background-color: rgba(0, 0, 0, 0.8) !important;
	transition: opacity 0.3s;
	display: none;
}

body
{
  /* Esta es la fuente que usamos casi en todas partes, la heredamos */
  font: var(--f_F1);
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
}


.contenedorInterior
{
  width: var(--anchoContenedorInterior);
  margin: auto;
  padding: 7rem 1rem;
  box-sizing: border-box;
  text-align: center;
		z-index: 501 !important;
}

.headerDinamico_C{
  position: relative;
  width: 100vw;
}
.headerDinamico_CInterior{
	display: flex;
	flex-direction: column;
	align-items: center;
  justify-content: center;
	height: 100vh;
	position: absolute;
		width:100%;
}
.headerDownContenedor{
	position:absolute; 
	bottom: 15vh; 
	width:100%; text-align: center;
  cursor: pointer;

}
.headerDown{
	stroke: var(--c_1);
	fill: var(--c_1);
}
.headerDinamico_Ti,.headerDinamico_Te,.headerDinamico_Ta,.headerDinamico_Tb
{
  position:relative !important;
	width: 100%;
	left: 0%;
  font-size: var(--font1Size);
  line-height: var(--font1LH);
  text-align: center;
  font-family: var(--f_FFEspecial) !important;
  background-image: none;
  color: var(--c_1);
  filter: none;
}
.headerDinamico_Ta{  

}
.headerDinamico_Te{  
  font-size: 2vw;
  font-family: var(--f_FF1) !important;
  color: var(--c_2);
  filter: none;
}
.headerDinamico_Tb{  
  font-size: 6vw;
}
.cuadroBlanco{
	background-color: var(--c_sliderB);
}
.separadorImagenSola img{
	width: 100% !important;
}
.parallax__container .parallax
{
	width: var(--anchoPrincipal) !important;
	height: 100% !important;
}
.mb_main{
	margin-top: 5rem;
	margin-bottom: 10rem !important;
}

/* Navegador y Menu */

.cerrarContenedor {
    position: fixed;
    width: 5rem;
    height: 5rem;
    top: 1rem;
    right: 1rem;
    color: #FFF;
    border-radius: 4rem;
    cursor: pointer;
    z-index: 1000;
    box-sizing: border-box;
	display: none;
}
.cerrarIcono {
	font-size: 5rem !important;
	position: absolute;
	padding: 0rem;
	color: var(--c_menu) !important; 
}
.menuInvitacion{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	position: fixed;
	margin: auto;
	bottom: 0;
	width: 100%;
	z-index: 2999 !important;
	padding: 3rem 0rem;
	background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
.menuInvitacionItem{
	color: var(--c_menu);
	padding-left: 1rem;
	padding-right: 1rem;
	cursor: pointer;
	font-family: var(--f_FFRegular);
	font-size: 3rem;
}
.menuInvitacionItemSel{
	color:var(--c_1);
}
.menuFlechasContenedor{
	position: fixed;
	left: 2rem;
	top:0;
	bottom: 0;
	width: auto;
	display: flex;
  align-items: center; /* Vertically center child */
  justify-content: center;
	z-index: 1000 !important;
	 pointer-events: none;

}
.menuFlechas {
  color: var(--c_menu) !important; 
	cursor: pointer;
	pointer-events:all;
	font-size: 3rem !important;
}
.menuFlechasContenedorDerecha{
	left:auto; right: 2rem !important; 
}
.menuFlechas:hover{
	  color: var(--c_1) !important; 
}


/* estas lineas son para limitar el Parallax en Safari, porque no funciona bien */
_::-webkit-full-page-media, _:future, :root .parallax__container .parallax {
	position:static;
}
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .parallax__container .parallax {
		position:static;headerDownContenedor
}}}

.audioContenedor
{
  background-color: var(--c_audio) !important;
  box-shadow: 2px 2px 3px var(--c_1)  !important;
	top: 1rem !important;
  left: 1rem !important;
}
.emojiContenedor{
	 left: 6rem !important;
}
div:empty
{
  display: none;
}
.columnaListaInvSeparador /* se usan en las listas y listas alternadas */
{
  margin-top: 1rem !important;
}
.columnaListaSeparador
{
  margin-top: 3rem !important;
}

/* cosas del owl que ocultan elementos 
.owl-nav { display: none; }*/

/* lightbox */
.sl-wrapper{ background-color: #ffffffdd; }

/* generales */
.contenedor{
	position: fixed;
	left:0;
	top:0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	margin:auto !important;
	width: 100% !important;
	display: none;
  align-items: center; /* Vertically center child */
  justify-content: center;
	z-index: 500 !important;

}


.material-symbols-outlined {
  font-size: 7rem;
  padding-bottom: 2rem;
  color: var(--c_1);
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 48
}


/* imagenGrande */
.imagenGrandeHeader
{
  width: 100%;
  display: block;
}






/* animacion */
section .setAnim{
    position:fixed ;
    width:100%;
    height:100%;
    top:0;
    left:0;
    pointer-events:none;
    z-index: 1000;
}
section .setAnim div{
    position:absolute ;
    display:block ;
}
section .setAnim div:nth-child(1){
    left:20%;
    animation:animate 15s linear infinite ;
    animation-delay:-7s;
}
section .setAnim div:nth-child(2){
    left:40%;
    animation:animate 25s linear infinite ;
    animation-delay:-5s;
}
section .setAnim div:nth-child(3){
    left:80%;
    animation:animate 20s linear infinite ;
    animation-delay:0s;
}
@keyframes animate{
    0%{ opacity:0; top: -10%; transform:translateX(20px) rotate(0deg); }
    10%{ opacity:1; }
    20%{ transform:translateX(-25px) rotate(45deg); }
    40%{ transform:translateX(-30px) rotate(90deg); }
    60%{ transform:translateX(35px) rotate(180deg); }
    80%{ transform:translateX(-40px) rotate(180deg); }
    90%{ opacity: 1; }
    100%{ opacity:0; top: 110%; transform:translateX(-20px) rotate(225deg); }
}
.set2Anim{ transform:scale(1) rotateY(180deg); }
.set3Anim{ transform:scale(0.8) rotateX(150deg); }
.setAnim div img{ height: 80px; }


/* SAVE THE DATE */
.contenedorSave
{
  border: none;
  max-width: 100%;
  margin:auto;
  margin-top: 0 !important;
  margin-bottom: 5rem !important;
}
.contenedorSaveBajo{
	background-color: #000 !important;
  background-size: 100% auto !important;
	height: 120rem;
}
.saveContenedorInterior
{
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
.save_Ti2
{
  font: var(--f_FEspecial);
  color: var(--c_1);
  margin-bottom: -1rem;

}
.save_Ti
{
  font: var(--f_F0);
  color: var(--c_2);
}
.savePieContenedorInterior
{
  padding-top: 0rem !important;
  padding-bottom: 4rem !important;
}
.savePie_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
}
.savePie_Te
{
  font: var(--f_F2);
  color: var(--c_2);
  max-width: 600px;
  margin:auto;
}


/*  GRACIAS */

.mensajeGracias
{
  font: var(--f_FEspecial) !important;
  color: var(--c_1) !important;
}
.poemaGracias
{
  margin-top: 10rem 0 !important;
  font: var(--f_F2) !important;
  color: var(--c_2) !important;
  line-height: 5rem !important;
}


/* saludo */
.saludoTitulo
{
  font: var(--f_F1);
  color: var(--c_1);
  margin-bottom: 2rem;
  margin-top: 1rem;

}
.saludoTexto
{
  font: var(--f_F2);
  color: var(--c_2);
  line-height: var(--line-height);
  }


/* textos */
.textos_Ti
{
  font: var(--f_F2);
  color: var(--c_1);
}
.textos_Ti1
{
  /*margin-bottom: 2rem;*/
}
.textos_Ti2
{
  margint-top: 3rem;
}
.textos_Ti3
{
  margint-top: 3rem;
}
.textos_Te
{
  font: var(--f_F2);
  color: var(--c_2);
  line-height: var(--line-height);
}
.textos_Te1
{
  margin-bottom: 2rem;
  line-height: var(--line-height);
}
.textos_Te2
{
  margint-top: 3rem;
  line-height: var(--line-height);
}
.textos_Te3
{
  margint-top: 3rem;
  line-height: var(--line-height);
}


/* fecha */
.fecha
{
  font: var(--f_F2);
  color: var(--c_2);
}
.fecha_Ti
{
  margin-top: 0rem;
  color: var(--c_1);
  font: var(--f_F2);
}
.fecha_Fe
{
  margin-top: 0rem;
  margin-bottom: 0rem;
  font: var(--f_FEspecial) !important;
  color: var(--c_fecha);
  line-height: 15rem !important;
		font-size: 7rem !important;

}
.fecha_Te
{
  font-family: var(--f_FEspecialPeque) !important;
  color: var(--c_1);
  margin-bottom: 2rem;
  line-height: var(--line-height);
}


/* Timer */

.timerContenedorInterior
{
  margin-top: 0rem;
  padding-top: 0rem !important;
  padding-bottom: 1rem !important;
}
.timerContenedorNumeros
{
  display:flex;
  flex-direction:row;
  flex-wrap: nowrap;
  justify-content:center;
  margin-top:1.5rem;
}
.timer_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
  margin-bottom: 0rem;
}
.timer
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}
.timerElemento
{
  padding-left: 2rem;
  padding-right: 2.5rem;
  color: var(--c_3);
}
.timerNumero
{
  font: var(--f_FTimerNumero);
  letter-spacing: normal;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.timerTexto
{
  font: var(--f_FTimerTexto);
  letter-spacing: normal;
  margin-top: 0rem !important;
  font-style: normal;
}
.timerReloj
{
  width: 12rem;
}
.timerLinea
{
  width:1px;
  background-color: var(--c_3);
}
.timerContenedor
{
  display: block;
}
.timerID{
	display: block !important;
}


/* Lugar */
.lugar_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
  margin-bottom: 2rem;
}
.lugar_Te
{
  font: var(--f_F2);
  color: var(--c_2);
  margin-bottom: 3rem;
  line-height: var(--line-height);
}
.lugarContenedor
{
  width:80%;
  margin:auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 5rem;
}
.lugarColumnaI
{
  width:28%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lugarColumnaD
{
  width:68%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lugarColumnaI img
{
  width: 100%;
  border-radius: var(--border-radius);
  display: block;
}
.lugarColumnaS
{
  width:4%;
}
.lugar_Textos
{
  padding: 0rem 0rem;
  text-align: left;
}
.lugar_Te1
{
  font: var(--f_FRegularMedia);
  margin-bottom: 1rem;
  color: var(--c_2);
}
.lugar_Te2
{
  font: var(--f_FRegularMedia) !important;
  margin-bottom: 1rem;
  color: var(--c_2);
}
.lugar_Te3
{
  margin-bottom: 1rem;
  font: var(--f_F2);
  color: var(--c_1);
}
.lugar_Te4
{
  font: var(--f_FRegularMedia) !important;
  color: var(--c_1);
}
.lugarMapa
{
  width: 6rem;
  border-radius: 1rem !important;
  float:left;
  padding: 1rem;
  background-color: #FFF;
}

/* Mesas */

.mesas_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
  margin-bottom: 1rem;
}
.mesas_Te
{
  margin-top: 1rem;
  font: var(--f_F2);
  line-height: var(--line-height);
  color: var(--c_2);
  margin-bottom: 1rem;
}
.mesasContenedor
{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 1rem;
  margin-bottom: 1rem;

}
.mesasLogo
{
  cursor: pointer;
  margin: 0 1rem;
}
.mesasLogo img
{
  border-radius: var(--border-radius);
  height:10rem;
  width: auto;
}



/* Bloques */
.bloques_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
  margin: auto;
  margin-bottom: 2rem !important;
}
.bloques_Te
{
  font: var(--f_F2);
  color: var(--c_2);
  line-height: var(--line-height);
  color: var(--c_2);
  margin-bottom: 3rem;
}
.bloques
{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin: auto;
  font-family: var(--f_FFRegular);
  font-style: normal;
  color: black;
  letter-spacing: normal;
  line-height: 1rem;
}
.bloquesElemento
{
  padding: 1rem;
  box-sizing: border-box;
  width: 33%;

}
.bloquesElemento img
{
  margin-bottom: 1.9rem;
  width: 6rem;
}
.bloquesElemento_Ti
{
  font: var(--f_FRegularMedia);
  margin-bottom: 3rem;
  color: var(--c_bloques);
}
.bloquesElemento_Te
{
  font: var(--f_FRegular);
  color: var(--c_bloques2);
}
.bloquesP
{
  /*width: 100%;*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap !important;
	margin-bottom: auto !important;
}
.bloquesP .material-symbols-outlined{ font-size: 5rem !important;  margin-top: 1rem;}
.bloquesP .bloquesElemento{ width:auto;  margin: 0.5rem 0.5rem;  padding: 0rem 2rem; }
.bloquesP .bloquesElemento:last-child { border-right: 0; }
.bloquesP .bloquesElemento .bloquesElemento_Ti{ font: var(--f_FRegularMedia); margin-bottom: 1rem; }
.bloquesP .bloquesElemento .bloquesElemento_Te{ font: var(--f_FTimerTexto) !important; }
.bloquesV
{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap !important;
}
.bloquesV .material-symbols-outlined{ font-size: 7rem !important; margin-top: 1rem;}
.bloquesV .bloquesElemento{ width:100%;  margin: 2rem 0.5rem; padding: 0rem 2rem; }
.bloquesV .bloquesElemento .bloquesElemento_Ti{ margin-bottom: 2rem; }
.bloquesV .bloquesElemento .bloquesElemento_Te{ margin-bottom: 2rem; }
.bloquesV .bloquesElemento:not(:last-child):after {
  border-bottom: 1px solid var(--c_1);
  content: '';
  display: block;
  margin-left: 38%;
  margin-top: 4rem;
  width: 24%;
}

/* listaGrandes */
.lGrandes_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
  margin-bottom: 2rem;
}
.lGrandes_Te
{
  font: var(--f_F2);
  color: var(--c_2);
  line-height: var(--line-height);
  margin-bottom: 3rem;
}

.lGrandes_Imagen
{
  width:80%;
  margin: auto !important;
  height: 50rem;
}
.lGrandes_Imagen img
{
  width: auto !important;
  height: 100% !important;
  margin: auto !important;
  border-radius: var(--border-radius); 
  display: block;
  margin-bottom: 2rem;
}

.lGrandes_label
{
  font: var(--f_FRegularMedia);
  color: var(--c_2) !important;
  letter-spacing: normal;
  margin-bottom: 2.5rem;
  margin-top: -1rem;
}
.lGrandes_ImagenPeque
{
  width: 70% !important;
  margin:auto !important;
}



/* listaColumnas */
.lColumnas_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
  margin-bottom: 2rem;
}
.lColumnas_Te
{
  font: var(--f_F2);
  color: var(--c_2);
  line-height: var(--line-height);
  margin-bottom: 3rem;
}
.lColumnasCont
{
  width:95%;
  margin:auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.lColumnasCol
{
  width:30%;
  margin-left: 1%;
  margin-right: 1%;
}
.lColumnasCol img
{
  width: 100%;
  border-radius: var(--border-radius);
  display: block;
  margin-bottom: 1rem;
}
.lColumnas_label
{
  font: var(--f_FRegular);
  color: var(--c_2) !important;
  letter-spacing: normal;
  margin-bottom: 3rem;
}


/* listaElegante */
.lElegante_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
  margin-bottom: 2rem;
}
.lElegante_Te
{
  font: var(--f_F2);
  color: var(--c_2);
  line-height: var(--line-height);
  margin-bottom: 3rem;
}
.lEleganteCont
{
  width:80%;
  margin:auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.lEleganteColumnaI
{
  width:48%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lEleganteColumnaD
{
  width:48%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lEleganteColumnaI img
{
  width: 100%;
  border-radius: var(--border-radius);
  display: block;
}
.lEleganteColumnaS
{
  width:4%;
}
.lElegante_Textos
{
  text-align: left;
}
.lElegante_Te1
{
  font: var(--f_FRegularMedia);
  margin-bottom: 1rem;
  color: var(--c_2);
}
.lElegante_Te3
{
  margin-bottom: 1rem;
  font: var(--f_FRegular);
  color: var(--c_1);
  letter-spacing: normal;
}




/* listaNormal */
.lNormal_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
  margin-bottom: 2rem;
}
.lNormal_Te
{
  font: var(--f_F2);
  color: var(--c_2);
  line-height: var(--line-height);
  margin-bottom: 3rem;
}
.lNormalCont
{
  width:80%;
  margin:auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.lNormalColumnaI
{
  width:38%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lNormalColumnaD
{
  width:58%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lNormalColumnaI img
{
  width: 100%;
  border-radius: var(--border-radius);
  display: block;
}
.lNormalColumnaS
{
  width:4%;
}
.lNormal_Textos
{
  /*padding: 1rem 0rem;*/
  
  text-align: left;
}
.lNormal_Te1
{
  margin-bottom: 1rem;
  font: var(--f_F2);
  color: var(--c_2);
}
.lNormal_Te2
{
  margin-bottom: 1rem;
  font: var(--f_FRegular);
  color: var(--c_2);
}
.lNormal_Te3
{
  margin-bottom: 1rem;
  font: var(--f_FRegularMedia);
  color: var(--c_1);
}
.lNormal_Te4
{
  margin-bottom: 1rem;
  font: var(--f_FRegular);
  color: var(--c_2);
}

/* mensajes */
.mensajes_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
  margin-bottom: 2rem;
}
.mensajes_Te
{
  font: var(--f_F2);
  color: var(--c_2);
  line-height: var(--line-height);
  margin-bottom: 3rem;
}
.mensajesCont
{
  width:50%;
  margin:auto;
  margin-bottom: 2rem;

}
.mensajesCard
{
  padding: 2rem;
  color: var(--c_sliderT1);
  font: var(--f_F2);
  border-radius: var(--border-radius);
  border: 1px dashed var(--c_sliderBorder);
  background-color: var(--c_sliderB);
  overflow: hidden;
}



/* slider */
.contenedorSlider
{
  
}
.slider_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
  margin-bottom: 2rem;
}
.slider_Te
{
  font: var(--f_F2);
  color: var(--c_2);
  line-height: var(--line-height);
  margin-bottom: 3rem;
}
.sliderCont
{
  width:80%;
  margin:auto;
  margin-bottom: 2rem;

}
.sliderCard
{
  font: var(--f_FEspecialPeque);
  padding: 2rem;
  color: var(--c_sliderT);
  border-radius: var(--border-radius);
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  background-color: var(--c_sliderB);
  border: 1px dashed var(--c_sliderBorder);
  overflow: hidden;

}
.sliderCard img
{
  width: 50% !important;
  margin: auto;
  margin-bottom: 2rem;
}
.slider_Te1
{
  margin-bottom: 1rem;
  font: var(--f_F2);
  color: var(--c_sliderT1);
}
.slider_Te2
{
  margin-bottom: 1rem;
  color: var(--c_sliderT2);
  font: var(--f_F2);
}



/* agradecimiento */
.agradecimiento_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
  margin-bottom: 2rem;
}
.agradecimiento_Te
{
  font: var(--f_F2);
  color: var(--c_2);
  line-height: var(--line-height);
  margin-bottom: 3rem;
}




/* video */
.video_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
  margin-bottom: 2rem;
}
.video_Te
{
  font: var(--f_F2);
  color: var(--c_2);
  line-height: var(--line-height);
  margin-bottom: 3rem;
}
.videoCont
{
  margin-top: 3rem !important;
  width: 100%;
	max-width: 700px;
  height: 394px;
  overflow: hidden;
  position:relative;
  margin:0 auto;
}


/* iconos */
.iconos_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
  margin-bottom: 2rem;
}
.iconos_Te
{
  font: var(--f_F2);
  color: var(--c_2);
  line-height: var(--line-height);
  margin-bottom: 3rem;
}
.iconosCont
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin: auto;
  width: 90%;
}
.iconosElemento
{
  padding: 1rem;
  box-sizing: border-box;
}
.iconosElemento img
{
  width: 6rem;
}



/* confirmacion */
.formContenedor
{
  padding-top:0;
  padding-bottom: 5rem;
}
.form
{
  width:70%;
  padding: 2rem;
  margin: auto;
  border-radius: 1rem;
  text-align: left;
  box-sizing: border-box;
}
.formTeEsperamos
{
  font: var(--f_F0);
  color: var(--c_1);
  margin-bottom: 1rem;
}
.formTextoPrincipal
{
  font: var(--f_F2);
  color: var(--c_2);
  line-height: var(--line-height);
}
.formTexto
{
  font: var(--f_F2);
  color: var(--c_2);
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 1rem;
}
.formBotones
{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: 2.5rem;
}
.formBoton
{
  font: var(--f_FRegularMedia);
  cursor: pointer;
  padding: 1rem 1rem;
  margin: 0rem 3rem;
  color: var(--c_1);
  width: 25rem;
  text-align: center;
  border-radius: var(--border-radius);
  font-style: normal;
}
.formBotonLargo
{
  padding: 1rem 2rem;
  width: auto;
  font: var(--f_FRegularMedia);
}
.formBotonSi{ background-color: var(--c_ConfirmarB); color: var(--c_ConfirmarT); }
.formBotonSi:hover{ background-color: var(--c_ConfirmarH); }
.formBotonNo{ background-color: var(--c_RechazarB); color: var(--c_RechazarT);}
.formBotonNo:hover{ background-color: var(--c_RechazarH); }
.formCampoText
{
  width: 30%;
  text-align: center;
}

.formCampo
{
  font: var(--f_FRegularMedia);
  color: var(--c_ConfirmarFormT);
  background-color: var(--c_ConfirmarFormB);
  border: none;
  border-radius: var(--border-radius);
  padding: 0.5rem;
  margin-bottom:1rem;
  border: 1px solid var(--c_ConfirmarFormT);
}
.formCampoArea
{
  width: 100%;
  text-align: left;
  height: 10rem;
  padding: 1rem !important;

}
.formQR
{
  width: 20rem;
  height: 20rem;
  margin: 1.5rem 0 1rem 0;
}
.formCancelar
{
  color: var(--c_2);
  font: var(--f_FRegular);
  letter-spacing: normal;
  cursor: pointer;
	text-decoration: underline;
}
.calendarioBadges{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 2rem 0rem !important;
/*  margin-bottom: 40rem !important;*/
}
.calendarioBadge{
  width: 23%;
  cursor: pointer;
  margin: 0 .2rem;
  max-width: 200px;
}
.calendarioBadge img
{
  width: 100%;
}
.calendarioDiv{
  max-width: 600px;
  margin:auto;
}



.desarrolloContDemo{
	display: block !important;
    top: auto !important;
	z-index: 3000 !important;
}


@media only screen and (max-width: 1800px){	:root { --anchoContenedorInterior: 75%; }}
@media only screen and (max-width: 1600px){	:root { --anchoContenedorInterior: 80%; }}
@media only screen and (max-width: 1300px){	:root { --anchoContenedorInterior: 95%; }}

@media only screen and (max-width: 1100px)
{
  html{ font-size: 7px; }
}
@media only screen and (max-width: 1000px)
{
   html{ font-size: 6px; }
  .lugarContenedor{ width: 90%; }
  .lEleganteCont{ width: 90%; }
  .lNormalCont{ width: 90%; }
  .mensajesCont{ width: 70%; }
  .sliderCont{ width: 90%; }
  .iconosCont{ width: 90%; }
  .calendarioBadges{ width: 60%; margin: auto !important; margin-top: 3rem !important; }
  .calendarioBadge{ width: 45%; max-width: 130px;}
}
@media only screen and (max-width: 900px)
{
  html{ font-size: 6px; }
  .lugarMapa{ width: 6rem; }
  .videoCont{ height: 337px; }

}
@media only screen and (max-width: 800px)
{
  html{ font-size: 5px; }
  .lugarContenedor{ width: 95%; }
  .lEleganteCont{ width: 95%; }
  .lNormalCont{ width: 95%; }
  .mensajesCont{ width: 80%; }
  .sliderCont{ width: 95%; }
  .iconosCont{ width: 95%; }
  .form{ width: 80%; }
  .formBoton{ width: 35rem; }
  /* .formCancelar{ font-size: 2.5rem;} */
  .calendarioBadges{ width: 80%; }
}

@media only screen and (max-width: 750px)
{
  html{ font-size: 5px; }
  .lGrandes_Imagen{ width: 90% !important; }

  .columnaListaInvSeparador{ margin-top: 1.5rem !important; }
  .columnaListaSeparador{ margin-top: 1.5rem !important; }
  .videoCont{ height: 281px; }
}


@media only screen and (max-width: 600px)
{
  :root{
    --f_F0: 200 normal 4.8rem var(--f_FF1); /* titulos */
    --f_F1: 200 normal 4.8rem var(--f_FF1); /* titulos */
    --f_F2: 200 normal 4rem var(--f_FF1); /* subtitulos/texto, listas grandes */

    --f_FEspecial: 400 normal 6rem var(--f_FFEspecial); /* cursivas */
    --f_FEspecialPeque: 400 normal 3rem var(--f_FFEspecial);

    --f_FRegular: 400 normal 3.1rem var(--f_FFRegular);  /* textos regulares/bloques  */
    --f_FRegularMedia: 400 normal 3.5rem var(--f_FFRegular);  /*  botones, listas peques */
    --f_FTimerNumero: 400 normal 5rem var(--f_FFRegular);  /* fuente numeros timer */
    --f_FTimerTexto: 400 normal 2.7rem var(--f_FFRegular);  /* fuente texto timer, listanormal */
		
		--font1Size: 15vw;
		--font1LH: 17vw;
		--font2Size: 6vw;
		--font2LH: 8vw;
  }
  html{ font-size: 6px; }
	
	.emojiContenedor{
			 left: 8rem !important;
		}
  .saludoTitulo{ margin-top: 0rem;}
  .lugarContenedor{ width: 100%; }
  .lugarColumnaI{ width: 34% }
  .lugarColumnaD{ width: 62% }
  .lEleganteColumnaI{ width: 48% }
  .lEleganteColumnaD{ width: 48% }
  .lNormalColumnaI{ width: 48% }
  .lNormalColumnaD{ width: 48% }
  .lEleganteCont{ width: 100%; }
  .lNormalCont{ width: 100%; }
  .lColumnasCol{ width: 48%; }
  .mensajesCont{ width: 100%; }
  .sliderCont{ width: 100%; }
  .iconosCont{ width: 100%; }

  .mesasContenedor{ flex-direction: column; }
  .mesasLogo img{ height: 10rem; margin-bottom: 2rem; }

  .bloques{ display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; width: 100%;  }
  .bloquesElemento{ padding: 0.5rem; width: 80%;  }
  .bloquesElemento img{ margin-bottom: 2rem; width: 6rem; margin-top: 1rem;}
  .bloquesElemento_Ti{  margin-bottom: 2rem; }
  .bloquesElemento_Te{  line-height: 3rem !important; margin-bottom: 2rem;}
  .timerContenedorNumeros{ margin-top: 0rem !important; margin-bottom: 2.5rem; }
  .timerNumero{  margin-bottom: 0.3rem;}
  .timerElemento{ padding-left: 1.7rem; padding-right: 1.7rem; }
  .timerRelojDiv{ display: none !important; }
  .desarrolloCont img{ width: 25rem;  }
  .videoCont{  height: 253px; }

  .columnaListaInvSeparador{ margin-top: 1rem !important; }
  .columnaListaSeparador{ margin-top: 1rem !important; }

  .form{ width: 90%; padding: 2rem 0 !important;}
  .formBoton{  padding: 1rem 1rem;  margin: 0rem 1rem; }
  .formBotonLargo{  width: auto; padding: 1.5rem 2rem !important;}
  .formCampoArea{ width: 95%}
  .calendarioBadges{ width: 100%; padding: 0 !important; margin-bottom: 20rem !important;}
  
  .lugar_Textos,.lNormal_Textos,.lElegante_Textos{ padding: 0 !important;}
  .columnaListaInvSeparador{ margin-top: 2.5rem !important; }
  .columnaListaSeparador{ margin-top: 2.5rem !important; }
  
  .bloquesP{ flex-wrap: wrap !important; flex-direction: row !important;  align-items: normal !important;}
  .bloquesP .bloquesElemento .bloquesElemento_Ti{  margin-bottom: 1rem; }
.bloquesP .bloquesElemento .bloquesElemento_Te{  }
  .bloquesP .bloquesElemento{ border-right: none; padding: 0rem 2rem; }
  .timerContenedorInterior{ padding-top: 2rem !important; padding-bottom: 4rem !important;}

  .mb_main{ padding-bottom: 2vw; }
	.headerDinamico_Ti,.headerDinamico_Te,.headerDinamico_Ta,.headerDinamico_Tb{
		left:0%;
	}
	.menuFlechasContenedor{	left: 0rem; }
	.menuFlechas { font-size: 4rem !important; }
	.menuFlechasContenedorDerecha{ left: auto; right: 0rem !important; }
}
@media only screen and (max-width: 500px)
{
  html{ font-size: 6px; }
  .pieElemento{ width: 80%;  }
  .fecha_Ti{ margin-bottom: 1rem; }
  .fecha_Te{ margin-bottom: 1rem;}
  .sliderCard img{ width: 100% !important;}
  .form{ width: 100%; }
  .formBoton{  padding: 0.5rem 0.5rem;  margin: 0rem 2rem; width: 25rem; }
  .formBotonLargo{ width: auto; }
  .lugarColumnaI{ width: 24% }
  .lugarColumnaD{ width: 72% }
  .videoCont{  height: 213px; }

}
@media only screen and (max-width: 400px)
{

  html{ font-size: 5px; }
  .pieElemento{ width: 95%;  }
  .timerReloj{ width: 9.5rem; }
  .timerElemento{ padding-left: 1.4rem; padding-right: 1.4rem; }
  .formBoton{  padding: 0.5rem 0.5rem;  margin: 1rem; }
  .calendarioBadges{ flex-flow: column; }
  .calendarioBadge{ width: 100%; max-width: 150px; margin: auto !important; margin-bottom: 1rem !important;}
  .videoCont{  height: 168px; }

}