*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Establece la fuente y el color de fondo que utiliza toda la página */
body
{
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  margin: 0;
  background-color: white;
  text-align: justify;
}


/* Edita las propiedades de las anclas en el código en general */
a
{
    text-decoration: none;
    color: white;
    padding: 3px;
    font-size: 18px;
}






/*-------------------- PROPIEDADES DE LA PANTALLA DE CARGA --------------------*/
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000033;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000; /* Ajusta el valor del z-index para que sea mayor que el de la navbar y lo cubra por completo */
  opacity: 1; /* Establece la opacidad inicial en 1 */
  transition: opacity 0.5s ease-in-out; /* Agrega una transición de 1 segundo para la opacidad */
}

/* Agrega una clase de 'hide' para ocultar el loader */
.loader.hide {
  opacity: 0; /* Establece la opacidad en 0 al ocultar */
  pointer-events: none; /* Evita eventos del ratón en el loader oculto */
}


/* Estilos para el logo giratorio */
.spinner {
  width: 106.3px; /* Ajusta el tamaño del logo */
  height: 114.5px; /* Ajusta el tamaño del logo */
  animation: spin 2s linear infinite; /* Animación de giro */
}

.static-image {
  position: absolute;
  width: 104.3px; 
  height: 112.5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   
}

/* Animación de giro */
@keyframes spin {
  0% { transform: rotate(0deg); } /* Inicia en 0 grados */
  100% { transform: rotate(360deg); } /* Gira 360 grados */
}
/*
* Fin de sección -----------------------------------------------------------------------------------------------------------------------------------
*/






/*-------------------- PROPIEDADES DE LA NAVBAR --------------------*/
header 
{
  min-height: 70px;
  display: flex;
  background-color: #000033;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  width: 100%;
  position: fixed;
  z-index: 10;
  box-shadow: -5px 5px 20px black;
}

/* Posición de elementos dentro de la navbar */
.nav
{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Posición del título en la navbar */
.logohead
{
  display: flex;
  align-items: center;
}

/* Posición del logo en la navbar */
.logohead img
{
  height: 75px;
  padding-right: 20px;
  padding-left: 15px;
}

/* Contenedor texto "Emiliani Centro Histórico" en la navbar */
#contenedor 
{ 
  max-width: 100%; margin: 1em auto; 
}

#contenedor .palabra 
{ 
  text-align: center; float: left; width: 100%; 
}

/* Texto "Centro Histórico" que va abajo de "Emiliani" en la navbar */
#contenedor .palabra > span 
{ 
  text-decoration: underline; 
}

/* Propiedades de las anclas en la navbar */
nav a
{
  text-align: center;
  font-weight: 900;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 10px;
  margin: 2.5px;
  transition: background-color 0.2s ease-in-out;
  height: 30px;
}

/* Propiedades de las anclas en la navbar cuando el cursor está sobre ellas */
nav a:hover
{
  color: white;
  background-color: #ffaf01;
  
}

/* Clase para un ancla invisible, el ancla invisible es para crear
  distanciamiento entre la ultima ancla y el límite de la pantalla */
.navinco:hover
{
  background-color: #000033;
}

/* Menú Desplegable con opacity 0 para que sea invisible*/
.vertical-menu
{
    position: absolute;
    list-style: none;
    background-color: #ffaf01;
    border-radius: 15px;
    margin-top: -1%;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: all 0.3s ease;
    margin-top: 5px;
}


/* Propiedad para que sea visible y animación */
.navegation li:hover .vertical-menu
{
    opacity: 3;
    transform: scaleY(1);
}

/* Responsive de la Navbar */
@media (max-width: 1313px)
{
  header
  {
      flex-direction: column;
  }

  nav 
  {
      padding: 10px 0px
  };
  
}

/* Clase para que la página actual esté en amarillo sin necesidad del hover */
.actual-page
{
  font-weight: 900;
  padding-right: 30px;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 10px;
  color: white;
  background-color: #ffaf01;
}

/* Propiedades MENÚ RETRACTIL RESPONSIVE */

.header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}

.header .menu ul li{
  float: left;
  position: relative;
}

.menu ul {
  list-style: none;
}

.navegation ul {
  list-style: none;
}

.navegation {
  margin-right: 50px;
}

.header .navegation ul li {
  float: left;
  position: relative;   
}

.header .navegation ul li a {
  font-size: 18px;
  color: white;
  text-decoration: none;
  padding: 2px 20px;
  display: block;
  transition: all .2s ease;
}

.header .navegation ul li a:hover{
  background-color: #ffaf01;
}

.header .navegation ul li:hover > ul {
  display: initial;
}

#toggle,
.header label{
  display: none;
  cursor: pointer;
  background-color: #ffaf01;
  border-radius: 4px;
  transition: all .9s ;
  margin-left: 5%;
}

.menu {
  width: 45px;
  height: 45px;
}
/*
* Fin de sección -----------------------------------------------------------------------------------------------------------------------------------
*/






/*-------------------- PROPIEDADES DEL BOTÓN RETRACTIL "+" CON REDES SOCIALES --------------------*/
#btn-mas{
  display: none;
}

.container2{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 3;
}
.redes a, .btn-mas label{
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background: #ffaf01;
  color: #000033;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  box-shadow: 0px 1px 10px rgba(0,0,0,0.4);
  transition: all 500ms ease;
}
.redes a:hover{
  background: #000033;
  color: white;
}
.redes a{
  margin-bottom: -15px;
  opacity: 0;
  visibility: hidden;
}

.redes a img {
  width: 30px;
}

#btn-mas:checked~ .redes a{
  margin-bottom: 10px;
  opacity: 1;
  visibility: visible;
}
.btn-mas label{
  cursor: pointer;
  background: #ffaf01;
}

.btn-mas {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-mas img {
  width: 30px;
}

/* Animación al clickear el botón "+" */
#btn-mas:checked ~ .btn-mas label{
  transform: rotate(135deg);
  font-size: 25px;
}
/*
* Fin de sección -----------------------------------------------------------------------------------------------------------------------------------
*/






/*-------------------- CONTENEDOR DE FONDO AZUL CON MÉTODOS DE CONTACTO --------------------*/
/* Background azul */



.fondoubi
{
  z-index: 100;
  background-color: #000033;
  background-attachment: fixed;
  background-size: cover;
  padding-bottom: 0.9%;
}



/* Texto "Contáctanos" */
.txtubi
{ 
  font-size: 80px;
  color: white;
  font-weight: bolder;
  text-align: center;
  font-family: 'Sarabun', sans-serif;
  text-shadow: 4px 2px 0px #ffaf01;
  padding-bottom: 50px;
  padding-top: 50px;
  
}

/* Primera franja amarilla referenciando el número telefónico */
.encuentranosubi
{
  font-size: 15pt;
  background-color: #ffaf01;
  color: white;
  text-align: center;
  margin-right: 390px;
  margin-left: 390px;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
}

/* Contenedor blanco con número telefónico */
.numero
{
  background-color: white;
  color: black;
  margin-right: 390px;
  margin-left: 390px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 50px;
}


/*
* Fin de sección -----------------------------------------------------------------------------------------------------------------------------------
*/







/*-------------------- FORMULARIO DE CONTACTO --------------------*/
/*Franja amarilla referenciando el formulario*/
.formulariotitle {
  text-align: center;
  background-color: #000033;
  color: white;
  font-size: 25px;
  margin-right: 390px;
  margin-left: 390px;
  padding: 8px;
  border-radius: 15px;
  margin-top: 50px;
  margin-bottom: 20px;
}

.contentform {

  width: 100%;
  height: 150%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1008%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(255%2c 214%2c 1%2c 1)'%3e%3c/rect%3e%3cpath d='M1060.903048127545 470.15592891841976L1118.4211225484412 523.7924010414941 1170.1167935226047 410.6970533486126z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M675.0595512953915 343.15267985435446L824.7693478021768 288.66277014783424 620.5696415888714 193.44288334756928z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M527.0880315762854 298.2162273845002L653.3843826936867 259.73513319986245 570.3626427952082 179.56197091494914z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M63.78449768717603 407.26168166425447L99.13801956041976 356.7716198696677 5.726165931917663 328.98636795709547z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M28.773062949953523 238.8914960862718L144.9889962722663 259.38350071921144 49.26506758289317 122.67556276395902z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M906.0904311608195 323.4201259757716L934.4553036774093 249.52710676136982 809.4333385975117 243.92630759368603z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M-14.635012164656281 84.66541979591601L55.417878669321816 87.11172064895995 24.060884531898672-19.19076602852917z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M54.682430582509994 112.58969973732239L-3.000684100345879 16.381306654367876-52.030303713466665 101.30309890006862z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M918.0564161577182 270.1557767937709L999.8377702668264 265.8697976381525 952.5181244788447 145.34075605229944z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M384.7461436127457-25.46294937669324L244.1524875339451 31.18477411022745 347.12588494891304 114.5709871807125z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M109.7614164326224 484.56812047259126L120.33268142458218 585.146988348261 265.9153507421069 519.0006569224864z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M17.77306024979611 302.3982850801551L114.47180472911651 326.50798991862706 102.28698974716426 169.4050207804105z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M328.7180850691817-66.29362599380224L243.19848913306754-31.74146641278643 363.2702446501975 19.22596994231192z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M838.9727642438138-93.77886258357204L737.6532260346995-46.53278599593406 859.1821100207136 81.82348302391834z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M940.440962025707 502.96610365411266L848.5557637312716 440.9887548327607 801.5323396464614 609.8052266850898z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M163.56885509135543 222.52357549611963L177.08873745080408 145.8485124676085 55.31620172831299 163.9062204426911z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M-40.20545422182662 277.9491356392101L-18.456622972818394 416.1179603672659 77.89222039290942 340.84199391507553z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M851.8082518024988 209.3590102360114L1011.1319360187565 157.59160715775744 800.0408487242448 50.03532601975374z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M895.2797104244602 134.26605404983337L1041.1843326273577 154.91342717521488 995.0214007785418 34.65487822165963z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M723.4769529565662 522.8260985223524L827.6995535990866 511.8718617844203 712.5227162186341 418.603497879832z' fill='rgba(249%2c 208%2c 0%2c 1)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1008'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
}

/* Contenedor de todo el formulario */
.containerform {
  background-color: #000033;
  max-width: 500%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px;
  color: #fff;
  margin-left: 390px;
  margin-right: 390px;
  border-radius: 30px;
  margin-bottom: 50px;
  text-align: center;
  height: 175vh;
}


.form {
  overflow: hidden;
  height: 170vh;
  border-radius: 20px;
}
/*
* Fin de sección -----------------------------------------------------------------------------------------------------------------------------------
*/






/* SECCIÓN INSCRIPCIÓN VIRTUAL */
/* fondo azul de inscripcion virtual */
.fondoinscripcion
{
  background-image: url("img/franja.svg");
  background-size: cover;
  background-color: #000033;
  padding-bottom: 8%;
}

/* ID para editar propiedades del logo de messenger */
.redeseccion img {
  width: 50px;
}

.redeseccion2 img {
  width: 50px;
}
.redeseccion3 img {
  width: 50px;
}


.redeseccion div {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  background-color: rgba(2, 2, 2, 0.1);
  margin-right: 20px;
}

.redeseccion2 div {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  background-color: rgba(2, 2, 2, 0.1);
  margin-right: 20px;
}

.redeseccion3 div {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  background-color: rgba(2, 2, 2,0.1);
  margin-right: 20px;
}
/* ID para editar propiedades del logo de whatsapp */



/* cuadro blanco con texto y logo de whatsapp */
.redeseccion
{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  color: black;
  margin-right: 25.7%;
  margin-left: 25.7%;
  padding-top: 1%;
  padding-bottom: 1%;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 1%;
  transition: all 0.3s ease;
}



/* cambio de color y animacion cuando se pone el cursor arriba (Whatsapp) */
.redeseccion:hover 
{
  transform: translateY(-7px);
  background-color: #14c449;
  color: black;
}



/* tamaño de logo de whatsapp */
.redeseccion p
{
  font-size: 2em;
}

/* tamaño de logo de messenger */
.redeseccion2 p
{
  font-size: 2em;
}

.redeseccion3 p
{
  font-size: 2em;
}
/* cuadro blanco con texto y logo de messenger */
.redeseccion2
{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: turquoise;
  color: black;
  margin-right: 25.7%;
  margin-left: 25.7%;
  padding-top: 1%;
  padding-bottom: 1%;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 1%;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease;
}

/* cambio de color y animacion cuando se pone el cursor arriba (Messenger) */
.redeseccion2:hover
{
  transform: translateY(-7px);
  background-color: #2596be;
  color: white;
}
/* cuadro blanco con texto y logo de tiktok */
.redeseccion3
{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
  margin-right: 25.7%;
  margin-left: 25.7%;
  padding-top: 1%;
  padding-bottom: 1%;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 1%;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease;
}

/* cambio de color y animacion cuando se pone el cursor arriba (Messenger) */
.redeseccion3:hover
{
  transform: translateY(-7px);
  background-color: #000000;
  color: white;
}
/*
Fin de seccion --------------------------------------------------------------------------------------------------------------------------
*/




/*-------------------- PROPIEDADES DEL FOOTER --------------------*/
.pie-pagina{
  width: 100%;
  background-color: #000033;
}
.pie-pagina .grupo-1{
  width: 100%;
  max-width: 1200px;
  margin: auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap:50px;
  padding: 45px 0px;
}
.pie-pagina .grupo-1 .box figure{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pie-pagina .grupo-1 .box figure img{
  width: 250px;
}
.pie-pagina .grupo-1 .box h2{
  color: #fff;
  margin-bottom: 25px;
  font-size: 20px;
}
.pie-pagina .grupo-1 .box p{
  color: #efefef;
  margin-bottom: 10px;
}
.pie-pagina .grupo-1 .red-social{
  display: flex;
  justify-content: center;
  text-align: center;
}

.pie-pagina .grupo-1 .red-social a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #ffaf01;
}

.pie-pagina .grupo-1 .red-social a img {
  width: 40px;
}
.pie-pagina .grupo-1 .red-social a:hover{
  box-shadow: 1px 1px 8px white;
}
.pie-pagina .grupo-2{
  background-color: #ffaf01;
  padding: 15px 10px;
  text-align: center;
  color: #fff;
}
.pie-pagina .grupo-2 small{
  font-size: 15px;
}

/* Responsive del Footer */
@media screen and (max-width:800px){
  .pie-pagina .grupo-1{
      width: 90%;
      grid-template-columns: repeat(1, 1fr);
      grid-gap:30px;
      padding: 35px 0px;
  }
}
/*
* Fin de sección -----------------------------------------------------------------------------------------------------------------------------------
*/





/*----------------------------------------------- RESPONSIVE PARA 4/3 -----------------------------------------------*/

@media (min-width: 601px) and (max-width: 1300px) {

  .content {
    padding: 10px;
    display: grid;
    place-items: center;
  }

  .contentform {
    display: grid;
    place-items: center;
    padding: 10px;
  }

  .txtubi {
    font-size: 60pt;
    margin-top: 80px;
  }

  .encuentranosubi {
    width: 80%;
    margin: 0;
    font-size: 15pt;
  }

  .numero {
    width: 80%;
    margin: 0;
    margin-top: 10px;
  }

  .formulariotitle {
    margin: 0;
    width: 80%;
  }


  .containerform {
    width: 80%;
    margin: 0;
    margin-top: 20px;
  }

  .containerform center {
    margin: 0;
  }

  .redeseccion {
    width: 80%;
    margin: 0;
  }

  .redeseccion2 {
    width: 80%;
    margin: 0;
  }

  .redeseccion img {
    width: 40px;
  }
  
  .redeseccion2 img {
    width: 40px;
  }

  .redeseccion div {
    width: 55px;
    height: 55px;
  }

  .redeseccion2 div {
    width: 55px;
    height: 55px;
  }

  .fondoinscripcion {
    width: 100%;
  }

  .fondoinscripcion .content {
    display: grid;
    place-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .fondoinscripcion .content a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
  }

  /*----------------------------------------------- PIE DE PÁGINA RESPONSIVE -----------------------------------------------*/

  .pie-pagina .grupo-1{
      width: 90%;
      grid-template-columns: repeat(1, 1fr);
      grid-gap:30px;
      padding: 35px 10px;
      margin-bottom: 20px;
  }

  .pie-pagina .grupo-1 {
      padding: 20px 35px 20px 35px;
  }

  .pie-pagina .grupo-1 .red-social {
      display: inline-flex;
  }

  .pie-pagina .grupo-1 .box figure {
      justify-content: center;
      text-align: center;
  }

  .pie-pagina .grupo-1 .box figure img {
      width: 150px;
      height: 160px;
  }
  .pie-pagina .grupo-2 small{
      font-size: 1em;
  }

  .redes a, .btn-mas label{
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      background: #ffaf01;
      color: #000033;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      box-shadow: 0px 1px 10px rgba(0,0,0,0.4);
      transition: all 500ms ease;
  }

  .pie-pagina .grupo-1 .box h2{
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      font-size: 1.5em;
  }

  .pie-pagina .grupo-1 .box p {
      font-size: 1em;
  }

}


/*----------------------------------------------- RESPONSIVE PARA CELULAR -----------------------------------------------*/

@media (max-width: 600px) {

  .content {
    padding: 10px;
  }

  .contentform {
    padding: 10px;
  }

  .txtubi {
    font-size: 30pt;
  }

  .encuentranosubi {
    width: 100%;
    margin: 0;
    font-size: 15pt;
  }

  .numero {
    width: 100%;
    margin: 0;
    margin-top: 10px;
  }

  .formulariotitle {
    margin: 0;
  }


  .containerform {
    margin: 0;
    margin-top: 20px;
  }

  .containerform center {
    margin: 0;
  }

  .redeseccion {
    width: 100%;
    margin: 0;
  }

  .redeseccion2 {
    width: 100%;
    margin: 0;
  }

  .redeseccion img {
    width: 40px;
  }
  
  .redeseccion2 img {
    width: 40px;
  }

  .redeseccion div {
    width: 55px;
    height: 55px;
  }

  .redeseccion2 div {
    width: 55px;
    height: 55px;
  }

  /*----------------------------------------------- POPUP RESPONSIVE -----------------------------------------------*/

  .popup {
      width: 100%;
  }

  .close-btn {
      background-color: transparent;
      font-size: 20pt;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      top: 80px;
      right: 130px;
  }

  .popup-content {
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .popup-content a img {
      width: 350px;
      height: auto;
  }

  /*----------------------------------------------- MENÚ VERTICAL RESPONSIVE -----------------------------------------------*/
  .vertical-menu
  {
      display: block !important;
      opacity: 3;
      transition: none;
      transform-origin: none;
      transform: none;
      position: unset;
      margin-top: 4%;
      background-color: #000033;
      transition: background-color 0.2s ease-in-out;
  }

  .vertical-menu:hover
  {
      background-color: #ffaf01;
  }

  .menu {
      width: 40px;
      height: 40px;
  }

  .header label {
      display: initial;
  }
  
  .header {
      flex-direction: row-reverse;
      width: 100%;
  }
  
  .logohead {
      margin-right: 33%;
  }
  
  .palabra {
      display: none;
  }

  .logohead img {
      width: 120px;
      height: 90px;
  }
  
  .header .navegation {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color:#000033;
      display: none;
      margin: 0;
  }
  
  .header .navegation ul li {
      width: 100%;
      padding: 5px;
  }
  
  .header .navegation ul li a{
      padding:  0px 10px px 10px;
      font-size: 15px;
  }
  
  #toggle:checked ~ .navegation {
      display: block;
      z-index: 100;
  }

  /*----------------------------------------------- FOOTER RESPONSIVE -----------------------------------------------*/

  .pie-pagina .grupo-1{
      width: 90%;
      grid-template-columns: repeat(1, 1fr);
      grid-gap:30px;
      padding: 35px 10px;
  }

  .pie-pagina .grupo-1 .box figure {
      justify-content: center;
      text-align: center;
  }

  .pie-pagina .grupo-1 .box figure img {
      width: 150px;
      height: 160px;
  }
  .pie-pagina .grupo-2 small{
      font-size: 1em;
  }

  .redes a, .btn-mas label{
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      background: #ffaf01;
      color: #000033;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      box-shadow: 0px 1px 10px rgba(0,0,0,0.4);
      transition: all 500ms ease;
  }

  .pie-pagina .grupo-1 .box h2{
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      font-size: 1.5em;
  }

  .pie-pagina .grupo-1 .box p {
      font-size: 1em;
  }
}



/*----------------------------------------------- HORIZONTAL CELULAR RESPONSIVE -----------------------------------------------*/

@media (max-width: 900px) and (orientation: landscape) {

  /*----------------------------------------------- POPUP RESPONSIVE -----------------------------------------------*/

  .popup {
      width: 100%;
      top: 30px;
  }

  .close-btn {
      background-color: transparent;
      font-size: 20pt;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      top: 80px;
      right: 130px;
  }

  .popup-content {
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .popup-content a img {
      width: 350px;
      height: auto;
  }

  /*----------------------------------------------- MENÚ VERTICAL RESPONSIVE -----------------------------------------------*/
  .vertical-menu
  {
      display: block !important;
      opacity: 3;
      transition: none;
      transform-origin: none;
      transform: none;
      position: unset;
      margin-top: 2%;
      background-color: #000033;
      transition: background-color 0.2s ease-in-out;
  }

  .vertical-menu:hover
  {
      background-color: #ffaf01;
  }

  .menu {
      width: 40px;
      height: 40px;
  }

  .header label {
      display: initial;
  }
  
  .header {
      flex-direction: row-reverse;
      width: 100%;
  }
  
  .logohead {
      margin-right: 42%;
  }
  
  .palabra {
      display: none;
  }

  .logohead img {
      width: 100px;
      height: auto;
  }
  
  .header .navegation {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color:#000033;
      display: none;
      margin: 0;
  }
  
  .header .navegation ul li {
      width: 100%;
      padding: 5px;
  }
  
  .header .navegation ul li a{
      padding:  0px 10px px 10px;
      font-size: 15px;
  }
  
  #toggle:checked ~ .navegation {
      display: block;
      z-index: 100;
  }

  .pie-pagina .grupo-1 .red-social {
      display: inline-flex;
  }

  /*----------------------------------------------- FOOTER RESPONSIVE -----------------------------------------------*/

  .pie-pagina .grupo-1{
      width: 90%;
      grid-template-columns: repeat(1, 1fr);
      grid-gap:30px;
      padding: 35px 10px;
      margin-bottom: 20px;
  }

  .pie-pagina .grupo-1 {
      padding: 20px 35px 20px 35px;
  }

  .pie-pagina .grupo-1 .red-social {
      display: inline-flex;
  }

  .pie-pagina .grupo-1 .box figure {
      justify-content: center;
      text-align: center;
  }

  .pie-pagina .grupo-1 .box figure img {
      width: 150px;
      height: 160px;
  }
  .pie-pagina .grupo-2 small{
      font-size: 1em;
  }

  .redes a, .btn-mas label{
      display: flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
      background: #ffaf01;
      color: #000033
      ;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      box-shadow: 0px 1px 10px rgba(0,0,0,0.4);
      transition: all 500ms ease;
  }

  .pie-pagina .grupo-1 .box h2{
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      font-size: 1.5em;
  }

  .pie-pagina .grupo-1 .box p {
      font-size: 1em;
  }
}