@charset "utf-8";
/* CSS Document */

/*Slider Video*/

.video-container {
  top: 0;
  left: 0;
  width: 100%;
  height: 90vh;
  overflow: hidden;
}

.video-image {
  position: relative;
  width: 100%;
  height: 90vh;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-animation: fadeout 6s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeout 6s;
  /* Firefox < 16 */
  -ms-animation: fadeout 6s;
  /* Internet Explorer */
  -o-animation: fadeout 6s;
  /* Opera < 12.1 */
  animation: fadeout 6s;
}

.video-container iframe {
  position: relative;
  top: -50%;
  left: 50%;
  width: 100vw;
  height: 132vh;
  transform: translate(-50%, -50%);
  -webkit-animation: fadein 5s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 5s;
  /* Firefox < 16 */
  -ms-animation: fadein 5s;
  /* Internet Explorer */
  -o-animation: fadein 5s;
  /* Opera < 12.1 */
  animation: fadein 5s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.slider-container {
  position: none;
  margin-bottom: 0rem;
}

@media (min-width: 992px) {
  .ayuda-module {
    position: relative;
    top: 5rem;
    /* Ubica la parte superior del módulo al final del slider */
    left: 50%;
    transform: translate(-50%, -25%);
    z-index: 10;
    border-radius: 1.5rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 100%;
    backdrop-filter: blur(10px);
    /* Opcional: efecto de vidrio esmerilado */
    -webkit-backdrop-filter: blur(10px);
    /* Soporte para Safari */
    background-color: rgba(255, 255, 255, 0.6);
    /* 60% blanco */
  }
}

.eventos {
  margin: 3rem auto;
  width: 100%;
}

@media (max-width: 650px) {
  .video-container {
    width: 100vw;
    height: 18vh;
    /* Puedes ajustar este valor según tu preferencia */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
  }
}

@media (min-width: 500px) and (max-width: 768px) {
  .video-container {
    width: 100vw;
    height: 30vh;
    /* Puedes ajustar este valor según tu preferencia */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
  }
}

@media (min-width: 769px) and (max-width: 1000px) {
  .video-container {
    width: 100vw;
    height: 40vh;
    /* Puedes ajustar este valor según tu preferencia */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
  }
}

@media (min-width: 1000px) and (max-width: 1145px) {
  .video-container {
    width: 100vw;
    height: 40vh;
    /* Puedes ajustar este valor según tu preferencia */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
  }
}

@media (max-width: 1145px) {
  .video-container iframe {
    width: 100vw;
    height: 75vh;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}