@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text:wght@100&family=Cinzel&display=swap");

body {
  margin: 0;
}

/*Escritorio*/

@media (min-width: 1024px) {
  /*INICIO PRELOADER*/
  .Menu {
    position: absolute;
    z-index: 2000;
    width: 100%;
    height: 100vh;
    background-color: #24a2b1;
  }

  .Logo {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-10vh);
  }

  .Logo img {
    width: 20%;
    height: auto;
  }

  .redes {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 25vh;
    bottom: 0px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
  }

  .Titulo {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 5vh;
    bottom: 27vh;
    text-align: center;
    color: white;
    font-family: "Big Shoulders Stencil Text", cursive;
    font-size: 38px;
  }

  .redes div {
    width: 50px;
    height: 50px;
    margin: 10px;
    border-radius: 50%;
    background: #24a2b1;
    box-shadow: 6px 6px 11px #1f8a96, -6px -6px 11px #29bacc;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 22px;
  }

  .redes div:hover {
    cursor: pointer;
    box-shadow: inset 6px 6px 11px #1f8a96, inset -6px -6px 11px #29bacc;
    text-shadow: 0px 0px 5px white;
  }

  section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    animation: animateBg 10s linear infinite;
    transform: translateY(-10vh);
  }

  @keyframes animateBg {
    0% {
    }

    100% {
    }
  }

  section .loader {
    position: relative;
    width: 280px;
    height: 280px;
  }

  section .loader span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(18deg * var(--i)));
  }

  section .loader span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 10px white, 0 0 20px white, 0 0 40px white, 0 0 60px white,
      0 0 80px white, 0 0 100px white;
    animation: animate 2s linear infinite;
    animation-delay: calc(0.1s * var(--i));
  }

  @keyframes animate {
    0% {
      transform: scale(1);
    }

    60%,
    100% {
      transform: scale(0);
    }
  }

  /*FIN PRELOADER*/

  /*INICIO VIDEO*/

  .video {
    width: 100%;
    height: 110vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .sombra {
    padding: 5px;
    background: #24a2b1;
    box-shadow: 20px 20px 60px #1f8a96, -20px -20px 60px #29bacc;
  }

  .controles {
    width: 300px;
    height: 70px;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }

  .controles div {
    width: 53px;
    height: 53px;
    margin: 10px;
    border-radius: 50%;
    box-shadow: 6px 6px 11px #1f8a96, -6px -6px 11px #29bacc;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 18px;
  }

  .espacio {
    width: 5vh;
    height: 10vh;
  }

  /*FIN VIDEO*/

  /*Inicio del carrusel */
  .ti {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    margin-bottom: 50px;
  }

  .cli {
    overflow: hidden;
    width: 100%;
    margin: 50px auto;
    transition: all 500ms;
    height: 250px;
    background: #24a2b1;
    border: 1px solid #24a2b1;
    border-top: none;
  }

  .cli ul {
    padding: 0;
    display: flex;
    width: 800%;
    animation-timing-function: linear;
    animation: cambio 30s infinite linear;
    transition: all 500ms;
  }

  .cli li {
    width: auto;
    list-style: none;
    margin: 1px;
    height: 40px;
    padding: 0px;
    transition: all 500ms;
  }

  .cli img {
    width: 95%;
    height: 200px;
    border: whitesmoke solid 2px;
    box-shadow: 0px 0px 0px 0px white;
    border-radius: 12px 12px 12px 12px;
    object-fit: cover;
  }

  .cli img:hover {
    box-shadow: 0px 0px 10px 0px whitesmoke;
  }

  @keyframes cambio {
    0% {
      margin-left: 0%;
    }

    10% {
      margin-left: -31%;
    }

    20% {
      margin-left: -62%;
    }

    30% {
      margin-left: -93%;
    }

    40% {
      margin-left: -124%;
    }

    50% {
      margin-left: -155%;
    }

    60% {
      margin-left: -124%;
    }

    70% {
      margin-left: -93%;
    }

    80% {
      margin-left: -62%;
    }

    90% {
      margin-left: -31%;
    }

    100% {
      margin-left: 0%;
    }
  }
  /*FIN DEL CARRUSEL */
}

@media (min-width: 991.98px) and (max-width: 1199.98px) and (orientation: landscape) {
  /*INICIO PRELOADER*/
  .Menu {
    z-index: 2000;

    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #24a2b1;
  }

  .Logo {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-10vh);
  }

  .Logo img {
    width: 20%;
    height: auto;
  }

  .redes {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 25vh;
    bottom: 0px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
  }

  .Titulo {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 5vh;
    bottom: 27vh;
    text-align: center;
    color: white;
    font-family: "Big Shoulders Stencil Text", cursive;
    font-size: 38px;
  }

  .redes div {
    width: 50px;
    height: 50px;
    margin: 10px;
    border-radius: 50%;
    background: #24a2b1;
    box-shadow: 6px 6px 11px #1f8a96, -6px -6px 11px #29bacc;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 22px;
  }

  .redes div:hover {
    cursor: pointer;
    box-shadow: inset 6px 6px 11px #1f8a96, inset -6px -6px 11px #29bacc;
    text-shadow: 0px 0px 5px white;
  }

  section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    animation: animateBg 10s linear infinite;
    transform: translateY(-10vh);
  }

  @keyframes animateBg {
    0% {
    }

    100% {
    }
  }

  section .loader {
    position: relative;
    width: 280px;
    height: 280px;
  }

  section .loader span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(18deg * var(--i)));
  }

  section .loader span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 10px white, 0 0 20px white, 0 0 40px white, 0 0 60px white,
      0 0 80px white, 0 0 100px white;
    animation: animate 2s linear infinite;
    animation-delay: calc(0.1s * var(--i));
  }

  @keyframes animate {
    0% {
      transform: scale(1);
    }

    60%,
    100% {
      transform: scale(0);
    }
  }

  /*FIN PRELOADER*/

  /*INICIO VIDEO*/
  .video {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .sombra {
    padding: 5px;
    background: #24a2b1;
    box-shadow: 20px 20px 60px #1f8a96, -20px -20px 60px #29bacc;
  }

  .controles {
    width: 300px;
    height: 70px;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }

  .controles div {
    width: 53px;
    height: 53px;
    margin: 10px;
    border-radius: 50%;
    box-shadow: 6px 6px 11px #1f8a96, -6px -6px 11px #29bacc;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 18px;
  }

  .espacio {
    width: 5vh;
    height: 10vh;
  }

  /*FIN VIDEO*/
  /*Inicio del carrusel */
  .ti {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    margin-bottom: 50px;
  }

  .cli {
    overflow: hidden;
    width: 100%;
    margin: 25px auto;
    transition: all 500ms;
    height: 200px;
    background: #24a2b1;
    border: 1px solid #24a2b1;
    border-top: none;
  }

  .cli ul {
    padding: 0;
    display: flex;
    width: 700%;
    animation-timing-function: linear;
    animation: cambio 30s infinite linear;
    transition: all 500ms;
  }

  .cli li {
    width: auto;
    list-style: none;
    margin: 2px;
    height: 40px;
    padding: 0px;
    transition: all 500ms;
  }

  .cli img {
    width: 90%;
    height: 160px;
    border: whitesmoke solid 1px;
    box-shadow: 0px 0px 0px 0px white;
    border-radius: 6px 6px 0px 0px;
    object-fit: cover;
  }

  .cli img:hover {
    box-shadow: 0px 0px 10px 0px whitesmoke;
  }

  @keyframes cambio {
    0% {
      margin-left: 0%;
    }

    10% {
      margin-left: -28%;
    }

    20% {
      margin-left: -56%;
    }

    30% {
      margin-left: -84%;
    }

    40% {
      margin-left: -112%;
    }

    50% {
      margin-left: -140%;
    }

    60% {
      margin-left: -112%;
    }

    70% {
      margin-left: -88%;
    }

    80% {
      margin-left: -56%;
    }

    90% {
      margin-left: -28%;
    }

    100% {
      margin-left: 0%;
    }
  }
  /*FIN DEL CARRUSEL */
}

/* Telefono */
@media (max-width: 575.98px) {
  /*INICIO PRELOADER*/
  .Menu {
    z-index: 2000;

    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #24a2b1;
  }

  .Logo {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-10vh);
  }

  .Logo img {
    width: 20%;
    height: auto;
  }

  .redes {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 25vh;
    bottom: 0px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
  }

  .Titulo {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 5vh;
    bottom: 27vh;
    text-align: center;
    color: white;
    font-family: "Big Shoulders Stencil Text", cursive;
    font-size: 38px;
  }

  .redes div {
    width: 50px;
    height: 50px;
    margin: 10px;
    border-radius: 50%;
    background: #24a2b1;
    box-shadow: 6px 6px 11px #1f8a96, -6px -6px 11px #29bacc;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 22px;
  }

  .redes div:hover {
    cursor: pointer;
    box-shadow: inset 6px 6px 11px #1f8a96, inset -6px -6px 11px #29bacc;
    text-shadow: 0px 0px 5px white;
  }

  section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    animation: animateBg 10s linear infinite;
    transform: translateY(-10vh);
  }

  @keyframes animateBg {
    0% {
    }

    100% {
    }
  }

  section .loader {
    position: relative;
    width: 180px;
    height: 180px;
  }

  section .loader span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(18deg * var(--i)));
  }

  section .loader span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 10px white, 0 0 20px white, 0 0 40px white, 0 0 60px white,
      0 0 80px white, 0 0 100px white;
    animation: animate 2s linear infinite;
    animation-delay: calc(0.1s * var(--i));
  }

  @keyframes animate {
    0% {
      transform: scale(1);
    }

    60%,
    100% {
      transform: scale(0);
    }
  }

  /*FIN PRELOADER*/

  /*INICIO VIDEO*/
  .video {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .sombra {
    padding: 5px;
    background: #24a2b1;
    box-shadow: 20px 20px 60px #1f8a96, -20px -20px 60px #29bacc;
  }

  .sombra video {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .controles {
    width: 300px;
    height: 70px;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }

  .controles div {
    width: 53px;
    height: 53px;
    margin: 10px;
    border-radius: 50%;
    box-shadow: 6px 6px 11px #1f8a96, -6px -6px 11px #29bacc;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 18px;
  }

  .espacio {
    width: 5vh;
    height: 10vh;
  }

  /*FIN VIDEO*/

  /*Inicio del carrusel */
  .ti {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    margin-bottom: 50px;
  }

  .cli {
    overflow: hidden;
    width: 100%;
    margin: 50px auto;
    transition: all 500ms;
    height: 250px;
    background: #24a2b1;
    border: 1px solid #24a2b1;
    border-top: none;
  }

  .cli ul {
    padding: 0;
    display: flex;
    width: 800%;
    animation-timing-function: linear;
    animation: cambio 40s infinite linear;
    transition: all 800ms;
  }

  .cli li {
    width: auto;
    list-style: none;
    margin: 1px;
    height: 40px;
    padding: 0px;
    transition: all 800ms;
  }

  .cli img {
    width: 98.5%;
    height: 200px;
    border: whitesmoke solid 2px;
    box-shadow: 0px 0px 0px 0px white;
    border-radius: 12px 12px 12px 12px;
    object-fit: cover;
  }

  .cli img:hover {
    box-shadow: 0px 0px 10px 0px whitesmoke;
  }

  @keyframes cambio {
    0% {
      margin-left: 0%;
    }
    8% {
      margin-left: -115%;
    }
    16% {
      margin-left: -230%;
    }
    24% {
      margin-left: -345%;
    }
    32% {
      margin-left: -460%;
    }
    40% {
      margin-left: -575%;
    }
    48% {
      margin-left: -705%;
    }
    56% {
      margin-left: -575%;
    }
    64% {
      margin-left: -460%;
    }
    72% {
      margin-left: -345%;
    }
    80% {
      margin-left: -230%;
    }
    88% {
      margin-left: -115%;
    }
    100% {
      margin-left: -0%;
    }
  }
  /*FIN DEL CARRUSEL */
}

@media (min-width: 576px) and (max-width: 1023px) {
  /*INICIO PRELOADER*/
  .Menu {
    z-index: 2000;

    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #24a2b1;
  }

  .Logo {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-10vh);
  }

  .Logo img {
    width: 20%;
    height: auto;
  }

  .redes {
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 25vh;
    bottom: 0px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
  }

  .Titulo {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 5vh;
    bottom: 27vh;
    text-align: center;
    color: white;
    font-family: "Big Shoulders Stencil Text", cursive;
    font-size: 38px;
  }

  .redes div {
    width: 50px;
    height: 50px;
    margin: 10px;
    border-radius: 50%;
    background: #24a2b1;
    box-shadow: 6px 6px 11px #1f8a96, -6px -6px 11px #29bacc;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 22px;
  }

  .redes div:hover {
    cursor: pointer;
    box-shadow: inset 6px 6px 11px #1f8a96, inset -6px -6px 11px #29bacc;
    text-shadow: 0px 0px 5px white;
  }

  section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    animation: animateBg 10s linear infinite;
    transform: translateY(-10vh);
  }

  @keyframes animateBg {
    0% {
    }

    100% {
    }
  }

  section .loader {
    position: relative;
    width: 180px;
    height: 180px;
  }

  section .loader span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(18deg * var(--i)));
  }

  section .loader span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 10px white, 0 0 20px white, 0 0 40px white, 0 0 60px white,
      0 0 80px white, 0 0 100px white;
    animation: animate 2s linear infinite;
    animation-delay: calc(0.1s * var(--i));
  }

  @keyframes animate {
    0% {
      transform: scale(1);
    }

    60%,
    100% {
      transform: scale(0);
    }
  }

  /*FIN PRELOADER*/

  /*INCIO VIDEO*/
  .video {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .sombra {
    padding: 5px;
    background: #24a2b1;
    box-shadow: 20px 20px 60px #1f8a96, -20px -20px 60px #29bacc;
  }

  .sombra video {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .controles {
    width: 300px;
    height: 70px;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }

  .controles div {
    width: 53px;
    height: 53px;
    margin: 10px;
    border-radius: 50%;
    box-shadow: 6px 6px 11px #1f8a96, -6px -6px 11px #29bacc;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 18px;
  }

  .espacio {
    width: 5vh;
    height: 10vh;
  }

  /*FIN VIDEO*/

  /*Inicio del carrusel */
  .ti {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
    margin-bottom: 50px;
  }
  .cli {
    overflow: hidden;
    width: 100%;
    margin: 100px 1px;
    transition: all 300ms;
    height: 350px;
    background: black;
    border: 1px solid white;
  }
  .cli ul {
    padding: 0;
    display: flex;
    width: 500%;
    animation-timing-function: 10s;
    animation: cambio 20s infinite alternate linear;
    transition: all 300ms;
  }
  .cli li {
    width: 400%;
    list-style: none;
    margin: 10px;
    height: 50px;
    padding: 0px;
    transition: all 300ms;
  }
  .cli img {
    width: 100%;
    padding: auto;
    margin: auto;
    height: 300px;
    border: whitesmoke solid 2p;
    box-shadow: 0px 0px 0px 0px white;
    border-radius: 6px 6px 0px 0px;
    object-fit: cover;
  }
  .cli img:hover {
    box-shadow: 0px 0px 20px 0px whitesmoke;
  }
  @keyframes cambio {
    0% {
      margin-left: 0%;
    }

    10% {
      margin-left: -22%;
    }

    20% {
      margin-left: -44%;
    }

    30% {
      margin-left: -66%;
    }

    40% {
      margin-left: -88%;
    }

    50% {
      margin-left: -110%;
    }

    60% {
      margin-left: -88%;
    }

    70% {
      margin-left: -66%;
    }

    80% {
      margin-left: -44%;
    }

    90% {
      margin-left: -22%;
    }

    100% {
      margin-left: 0%;
    }
  }
  /*FIN DEL CARRUSEL */
}