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

:root {
  --c_1: #ffffff;  /* colo de titulos y fecha */
  --c_1cc: #ffffffcc;
  --c_1dd: #ffffffdd;
  --c_1_2: #55000333; /* una tonalidad del principal mas clara(fondo del timer) */
  --c_1_3: #000000; /* una tonalidad del principal mas oscura */

  --c_2: #eeeeee;   /* color de textos */
  --c_2cc: #eeeeeecc;
  --c_2dd: #eeeeeedd;

  --c_3: #ffffff;   /* el color del timer */
  --c_fecha: #ffffff; /* color de fecha */
  --c_pie: #ffffff; /* color para el pie */
  --c_gris: #333333; /* boton rechazar confirmacion */
  --c_bloques: #FFFFFF; /* color de los textos del bloques*/
  --c_audio: #000000;

  --c_ConfirmarB: #ffffff;
  --c_ConfirmarT: #000000;
  --c_ConfirmarH: #ffffffcc;
  --c_RechazarB: #666666;
  --c_RechazarT: #ffffff;
  --c_RechazarH: #999999;
  --c_ConfirmarFormB: #ffffff;
  --c_ConfirmarFormT: #000000;

  --c_sliderB: transparent;
  --c_sliderT1: #ffffff;
  --c_sliderT2: #ffffff;
  --c_sliderBorder: #ffffff;
  
  --f_FF1: 'Lora', sans-serif;
  --f_FFEspecial: 'Parisienne', cursive;
  --f_FFRegular: 'Montserrat', sans-serif;
  
  --f_F1: 400 italic 4rem var(--f_FF1); /* titulos */
  --f_F2: 400 normal 3rem var(--f_FF1); /* subtitulos/texto */
  --f_FF2: var(--f_FF1);

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

  --f_FRegular: 200 italic 2rem var(--f_FFRegular);  /* textos regulares/bloques */
  

  --f_STitulo: 3rem;
  --f_STexto: 2.7rem;

  --line-height: 5rem;
  --border-radius: 1.2rem; /* aplica a imagenes de galerias */
  --letter-spacing: 0.3rem;
}

.fondoBloque0{  background-color: transparent; }
.fondoBloque1{  background-color: var(--c_1); }
.fondoBloque2{  background-color: var(--c_1_2); }
.fondoBloque3{  background-color: var(--c_1_3); }

/*
clases personalizadas para esta plantilla
colocar aquí clases personalizadas de esta plantilla
Estas las asignas manualmente en cada uno de los bloques de la invitación
*/
.mensajeGracias
{
  margin-top: 10rem 0 !important;
  font: var(--f_FEspecial) !important;
  color: var(--c_1) !important;
  font-size: 12rem !important;
}
.poemaGracias
{
  margin-top: 10rem 0 !important;
  font: var(--f_F1) !important;
  color: var(--c_2) !important;
  font-size: 2rem !important;
  line-height: 5rem !important;
}
.textoPeque
{
  font-size: 2rem !important;
  margin-bottom: 3rem !important;
}
.lGrandes_ImagenPeque
{
  width: 70% !important;
  margin:auto !important;
}


.derecha{
  width: 60%;
}

.izquierda{
  width: 60%;
  margin-left: 40%
}

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

/* termina las clases personalizadas */

html
{
  font-size: 9px;
  overflow-x: hidden;
  background-color: #000000 !important;
}
body
{
  /* Esta es la fuente que usamos casi en todas partes, la heredamos */
  font: var(--f_F1);
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
}

.audioContenedor
{
  background-color: var(--c_audio) !important;
  box-shadow: 2px 2px 3px var(--c_1)  !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
{
  width: 100%;
}
.contenedorScroll
{
  background-image: url(https://www.invitacionesparaeventos.com/recursos/svgs/castilloAladinFondo6.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;  
  background-position: top center;
  width: 1200px;
  margin: auto;

}
.contenedorInterior
{
  width: 95%;
  margin: auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
  text-align: center;
}

/*header dinamico */
.headerDinamico_Ti
{
  font-family: var(--f_FFEspecial) !important;
  color: var(--c_1);
  font-size: 20rem;
  line-height: 20rem;
  text-shadow: 8px 8px 5px #000000;
  text-align: center;
  padding-top: 10rem;
}
.headerDinamico_Te
{
  font-family: var(--f_F1) !important;
  color: var(--c_1);
  font-size: 7rem;

}

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


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



/* SAVE THE DATE */
.saveContenedorInterior
{
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
.save_Ti2
{
  font: var(--f_FEspecial);
  color: var(--c_1);
  font-size: 8rem;
  margin-bottom: -1rem;

}
.save_Ti
{
  font: var(--f_F1);
  color: var(--c_2);
  font-size: 4rem;

}
.savePieContenedorInterior
{
  padding-top: 0rem !important;
  padding-bottom: 4rem !important;
}
.savePie_Ti
{
  font: var(--f_F1);
  color: var(--c_1);
  font-size: 3rem;
  font-weight: 300;
}
.savePie_Te
{
  font: var(--f_F1);
  color: var(--c_2);
  max-width: 600px;
  font-size: 3rem;

  margin:auto;
}


/* 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_F1);
  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-size: 4rem;
}
.fecha_Fe
{
  margin-top: 0rem;
  margin-bottom: 0rem;
  font: var(--f_FEspecial) !important;
  color: var(--c_fecha);
  line-height: 15rem !important;
}
.fecha_Te
{
  font-family: var(--f_FFEspecial) !important;
  color: var(--c_1);
  margin-bottom: 2rem;
  line-height: var(--line-height);
  font-size: 4rem !important;

}


/* Timer */

.timerContenedorInterior
{
  margin-top: 0rem;
  padding-top: 2rem !important;
  padding-bottom: 1rem !important;
}
.timerContenedorNumeros
{
  display:flex;
  flex-direction:row;
  flex-wrap: nowrap;
  justify-content:center;
  height:8rem;
  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;
  font: var(--f_FRegular);
  color: var(--c_3);
  letter-spacing: normal;

}
.timerNumero
{
  font-size: 4rem;
  line-height: 4rem;
  letter-spacing: normal;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.timerTexto
{
  font-size: 1.5rem;
  letter-spacing: normal;
  font-family: var(--f_FFRegular);
  margin-top: 1rem !important;
  font-style: normal;
}
.timerReloj
{
  width: 12rem;
}
.timerLinea
{
  width:1px;
  background-color: var(--c_3);
}
.timerContenedor
{
  display: block;
}


/* 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%;
}
.lugarColumnaD
{
  width:68%;
}
.lugarColumnaI img
{
  width: 100%;
  border-radius: var(--border-radius);
  display: block;
}
.lugarColumnaS
{
  width:4%;
}
.lugar_Textos
{
  padding: 0rem 0rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: top;
  text-align: left;
}
.lugar_Te1
{
  font-family: var(--f_FFRegular) !important;
  margin-bottom: 1rem;
  font-size: 2.5rem;
  color: var(--c_2);
  }
.lugar_Te2
{
  font-family: var(--f_FFRegular) !important;
  letter-spacing: normal;
  margin-bottom: 1rem;
  font-size: 2.5rem;
  color: var(--c_2);
  }
.lugar_Te3
{
  margin-bottom: 1rem;
  font-size: 3rem;
  color: var(--c_1);
  }
.lugar_Te4
{
  font-size: 3rem;
  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-bottom: 2rem;
}
.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-size: 2.5rem;
  margin-bottom: 3rem;
  color: var(--c_bloques);
  font-weight: bold;
}
.bloquesElemento_Te
{
  font-size: 2rem;
  line-height: 2.3rem;
  color: var(--c_bloques2);
}

/* 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-family: var(--f_FRegular);
  color: var(--c_2) !important;
  letter-spacing: normal;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;
}




/* 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-family: var(--f_FRegular);
  color: var(--c_2) !important;
  letter-spacing: normal;
  font-size: 1.4rem;
  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%;
}
.lEleganteColumnaD
{
  width:48%;
}
.lEleganteColumnaI img
{
  width: 100%;
  border-radius: var(--border-radius);
  display: block;
}
.lEleganteColumnaS
{
  width:4%;
}
.lElegante_Textos
{
  padding: 5.5rem 0rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
}
.lElegante_Te1
{
  margin-bottom: 1rem;
  font-size: 2rem;
  color: var(--c_2);
}
.lElegante_Te3
{
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: var(--c_1);
  font-family: var(--f_FRegular);
  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%;
}
.lNormalColumnaD
{
  width:58%;
}
.lNormalColumnaI img
{
  width: 100%;
  border-radius: var(--border-radius);
  display: block;
}
.lNormalColumnaS
{
  width:4%;
}
.lNormal_Textos
{
  padding: 5.5rem 0rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
}
.lNormal_Te1
{
  margin-bottom: 1rem;
  font-size: 2rem;
  color: var(--c_1);
}
.lNormal_Te2
{
  margin-bottom: 1rem;
  font-size: 2rem;
  color: var(--c_2);
}
.lNormal_Te3
{
  margin-bottom: 1rem;
  font-size: 2rem;
  color: var(--c_1);
}
.lNormal_Te4
{
  margin-bottom: 1rem;
  font-size: 2rem;
  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-family: var(--f_FFRegular);
  border-radius: var(--border-radius);
  border: 1px dashed var(--c_sliderBorder);
  font-size: 3rem;
  background-color: var(--c_sliderB);
}



/* slider */
.contenedorSlider
{
  margin-top:3rem;
}
.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)
}
.sliderCard img
{
  width: 50% !important;
  margin: auto;
  margin-bottom: 2rem;
}
.slider_Te1
{
  margin-bottom: 1rem;
  font: var(--f_F1);
  color: var(--c_sliderT1);
}
.slider_Te2
{
  margin-bottom: 1rem;
  color: var(--c_sliderT2);
  font-family: var(--f_F1);
  font: var(--f_F2);
  font-size: var(--f_STitulo) !important;

}



/* 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);
  font-size: 5rem !important;
  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: 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-family: var(--f_FRegular);
  font-size: 6rem;
  color: var(--c_1);
    margin-bottom: 1rem;
}
.formTextoPrincipal
{
  font: var(--f_F2);
  color: var(--c_2);
  line-height: var(--line-height);
  }
.formTexto
{
  font-family: var(--f_FRegular);
  font-size: 3rem;
  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-size: 2.5rem;
  font-family: var(--f_FFRegular);
  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-size: 2.5rem;
}
.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-family: var(--f_FFRegular);
  font-size: 3rem;
  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-family: var(--f_FRegular) !important;
  letter-spacing: normal;
  font-size: 2rem;
  cursor: pointer;
}
.calendarioBadges{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 2rem 0rem !important;
}
.calendarioBadge{
  width: 23%;
  cursor: pointer;
  margin: 0 .2rem;
  max-width: 200px;
}
.calendarioBadge img
{
  width: 100%;
}
.calendarioDiv{
  max-width: 600px;
  margin:auto;
}





/* desarrollo */
.desarrolloCont
{
  padding: 0.3rem;
  box-sizing:border-box;
  text-align: center;
  font: var(--f_FRegular);
  font-size: 1.5rem;
  color: white;
  width: 100%;
  margin-bottom: 1rem;
  margin: auto;
  background-color: black;
}


@media only screen and (max-width: 1300px)
{
  html{ font-size: 8px; }
  .contenedorScroll{ width: 1100px; }
}

@media only screen and (max-width: 1100px)
{
  html{ font-size: 7px; }
  .contenedorScroll{ width: 1000px; }
}
@media only screen and (max-width: 1000px)
{
   html{ font-size: 6px; }
  .contenedorScroll{ width: 900px; }
  .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: 150px;}
}
@media only screen and (max-width: 900px)
{
  html{ font-size: 6px; }
  .contenedorScroll{ width: 800px; }
  .lugarMapa{ width: 6rem; }
  .videoCont{ width: 600px; height: 337px; }

}
@media only screen and (max-width: 800px)
{
  html{ font-size: 5px; }
  .contenedorScroll{ width: 700px; }
  .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; }
  .contenedorScroll{ width: 95%; }
  .lGrandes_Imagen{ width: 90% !important; }

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

@media only screen and (max-width: 600px)
{
  html{ font-size: 6px; }
  .saludoTitulo{ margin-top: 0rem;}
  .contenedorScroll{ width: 100% !important; }
  .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; }
  .mesas_Ti{ font-size: 5rem !important;}
  .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{ font-size: 3rem; margin-bottom: 2rem; }
  .bloquesElemento_Te{ font-size: 2.5rem; line-height: 3rem !important; margin-bottom: 2rem;}
  .timerContenedorNumeros{ margin-top: 0rem !important; margin-bottom: 2.5rem; }
  .timerNumero{ font-size: 5rem; margin-bottom: 0.3rem;}
  .timerTexto{ font-size: 1.8rem; }
  .timerElemento{ padding-left: 1.7rem; padding-right: 1.7rem; }
  .timerRelojDiv{ display: none !important; }
  .desarrolloCont img{ width: 25rem;  }
  .desarrolloCont{ font-size: 2rem; }
  .videoCont{ width: 450px; 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; }
  .formTexto{ font-size: 2.5rem; }
  .formCancelar{ font-size: 2.2rem;}
  .formBotonLargo{ font-size: 3rem; width: auto; padding: 0 2rem !important;}
  .formCampoArea{ width: 95%}
  .calendarioBadges{ width: 100%; padding: 0 !important}
  .formTeEsperamos{ font-size: 5rem; }

  .lugar_Te1,.lugar_Te2,.lugar_Te3,.lugar_Te4.lNormal_Te1,.lNormal_Te2,.lNormal_Te3,.lNormal_Te4{ font-size: 3.0rem;}
  .lugar_Textos,.lNormal_Textos,.lElegante_Textos{ padding: 0 !important;}
  .columnaListaInvSeparador{ margin-top: 2.5rem !important; }
  .columnaListaSeparador{ margin-top: 2.5rem !important; }
}
@media only screen and (max-width: 500px)
{
  html{ font-size: 6px; }
  .pieElemento{ width: 80%;  }
  .fecha_Fe{ font-size: 10rem !important;}
  .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: 20rem; }
  .formBotonLargo{ width: auto; }
  .lugarColumnaI{ width: 24% }
  .lugarColumnaD{ width: 72% }
  .videoCont{ width: 380px; height: 213px; }

}
@media only screen and (max-width: 400px)
{
  html{ font-size: 5px; }
  .pieElemento{ width: 95%;  }
  .timerContenedorInterior{ padding-top: 2rem !important; padding-bottom: 2rem !important;}
  .timerReloj{ width: 9.5rem; }
  .timerNumero{ font-size: 5rem; }
  .timerTexto{ font-size: 1.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{ width: 300px; height: 168px; }

}