@media (max-width: 1366px) {
  .sidebar-contact {
    top: 35%;
  }

  .float-tw {
    top: 35%;
  }

  .float-ig {
    top: calc(35% + 55px);
  }

  .float-yt {
    top: calc(35% + 110px);
  }

  .float-spotify {
    top: calc(35% + 165px);
  }

  #nav_logo2 {
    width: 15svw;
    height: auto;
  }
}

@media (max-width: 1100px) {
  #nav_logo1 {
    height: auto;
    width: 100%;
  }

  nav {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  #premios,
  #video,
  #about,
  #carrousel,
  #cifespod,
  #playlist,
  #podcast,
  #taller,
  #newsletter {
    width: 100%;
  }

  #podcast h2 {
    font-size: 35px;
  }

  #redtickets h3 {
    font-size: 29px;
    padding-bottom: 5vh;
  }

  .prev,
  .next {
    font-size: 20px;
    padding: 5px;
    margin-top: 12rem;
  }

  #dot-container {
    gap: 5px;
    flex-wrap: wrap;
    padding: 8px;
  }

  .dot {
    height: 8px;
    width: 8px;
  }

  #sponsors {
    flex-direction: row;
    gap: 90px;
  }

  /* #sponsors img {
    height: 20svw;
  } */

  .media-logos {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .logo2 {
    max-width: 100px;
    max-height: 80px;
    width: 70%;
    height: auto;
    object-fit: contain;
  }

  .logo3 {
    max-width: 100px;
    max-height: 80px;
    width: 70%;
    height: auto;
    object-fit: contain;
  }

  .logo4 {
    max-width: 100px;
    max-height: 80px;
    width: 70%;
    height: auto;
    object-fit: contain;
  }

  #sponsors-2 {
    flex-direction: column;
    /* justify-content: center; */
  }

  #sponsors-2 h3 {
    align-content: center;
    /* margin-bottom: 0; */
  }


  .container-sp, .container-sp-2 {
    width: 100%;
  }

  .sidebar-contact {
    width: 100%;
    height: 100%;
    left: -100%;
  }

  .sidebar-contact.active {
    top: 15%;
  }

  .sidebar-contact.active form {
    position: absolute;
    top: 15%;
    left: 10%;
    width: 80%;
  }

  .sidebar-contact .toggle {
    top: 0;
    transition: all 0.5s;
  }

  .sidebar-contact.active .toggle {
    top: 0;
    right: 0;
    transform: translateY(0);
    box-shadow: 0px 0px transparent;
  }

  .scroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  body {
    max-width: 100svw;
    background-image: url('../resources/f1-mobile.svg');
    background-color: var(--color9);
    background-position: center top;
    background-size: cover cover;
  }

  nav {
    height: 100svh;
  }

  .nav_hidden {
    display: none;
  }

  #nav_logo1 {
    height: unset;
    width: 95svw;
    margin-top: 0;
  }

  #date {
    width: 100vw;
  }

  .date {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  h1 {
    font-size: 35px;
  }

  h2 {
    font-size: 25px;
  }

  h3 {
    font-size: 15px;
  }

  h4 {
    font-size: 10px;
  }

  p {
    font-size: 15px;
  }

  #premios,
  #video,
  #about,
  #carrousel,
  #cifespod,
  #playlist,
  #podcast,
  #taller,
  #newsletter {
    margin: 0;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 0;
  }

  #sponsors h3 {
    margin: 0;
    padding-top: 20px;
    font-size: 18px;
  }

  #taller p,
  #redtickets h3,
  #premios p,
  #premios h3,
  #about p,
  #about h1,
  #newsletter p,
  #newsletter h2,
  #cifespod p,
  #cifespod h2,
  #carrousel h2 {
    width: 95%;
  }


  #taller h3,
  #podcast h1 {
    width: 95%;
    align-content: center;
  }

  #podcast h1 {
    font-size: 42px;
  }

  #taller p{
    text-align: justify;
  }

  #taller h3 {
    text-align: justify;
    padding-bottom: 7vh;
  }

  .podcard {
    aspect-ratio: 11/16;
  }

  .podcard img {
    width: 100%;
    margin-bottom: -3vh;
  }

  #redtickets {    
    max-width: 650px;
  }

  #redtickets img {
    /* height: 250px; */
    width: 35%;
    min-width: 50px;
  }

  #redtickets h3 {
    /* font-size: 5svw; */
    width: 100%;
    text-align: start;
    max-width: 400px;
    font-size: 20px;
    margin-right: 0;
  }

  #about h1,
  #cifespod h2 {
    font-size: 5svw;
  }

  #about h1 {
    height: auto;
  }

  #about h1 {
    font-size: 15svw;
  }

  #cifespod img {
    /* height: 250px; */
    width: 30%;
  }

  #premios img {
    /* height: 250px; */
    width: 90%;
  }

  #date h3 {
    font-size: 25px;
  }

  #scrolldown {
    display: none;
  }

  .container,
  .container2 {
    flex-direction: column;
    align-items: center;
  }

  .sidebar-contact.active {
    top: 305px;
  }

  .sidebar-contact {
    top: 50%;
  }

  .float-tw {
    top: 50%;
  }

  .float-ig {
    top: calc(50% + 55px);
  }

  .float-yt {
    top: calc(50% + 110px);
  }

  .float-spotify {
    top: calc(50% + 165px);
  }

  .prev,
  .next {
    font-size: 18px;
    padding: 6px;
    margin-top: 9rem;
  }

  #dot-container {
    gap: 5px;
    flex-wrap: wrap;
    padding: 8px;
  }

  .dot {
    height: 8px;
    width: 8px;
  }


  #sponsors {
    width: 90svw;
    padding: 0 0;
    border-radius: 0;
    box-sizing: border-box;
    justify-content: center;
    gap: 0;
  }

  .media-logos {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .container-sp {
    width: 80%;
    
  }

  .support-logos {
    width: 100%;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    grid-template-areas:
      "a b c"
      "d e";
    gap: 1px;
  }

  .support-logos a:nth-child(1) {
    min-width: 85px;
    width: 120%;
  }
  .support-logos img:nth-child(2),
  .support-logos img:nth-child(3),
  .support-logos img:nth-child(4) {
    max-width: 130px;
    width: 120%;
  }
  .support-logos img:nth-child(5) {
    max-width: 100px;
    width: 100%;
  }

  #sponsors-2 h3 {
    text-align: center;
    font-size: 18px;
    margin-bottom: 1rem;
  }

  .container-sp-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 30px;
    justify-items: center;
    align-items: center;
    width: 90%;
    margin: 0 auto;
  }

  .logo-s,
  .logo-ort,
  .logo-ucu {
    width: 100%;
    max-width: 110px;
    height: auto;
    object-fit: contain;
  }

  footer {
    max-width: 100svw;
    padding: 0 50px 20px 50px;
    flex-direction: column;
    justify-content: flex-start;
  }

  footer:first-of-type p{
    font-size: 9px;
  }

  .footer_logo {
    max-width: 65px;
  }

  .mec_logo {
    max-width: 222px;
  }
  
  
  #correo {
    font-size: 9px;
  }


  .licencia {
    height: 30px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: baseline;
  }

  .licencia a {
    justify-items: center;
  }

  .licencia>p {
    font-size: 7px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  #podcast {
    width: 100%;
    overflow-x: hidden;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  #grilla {
    width: 100%;
  }

  .podcard {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .podcard h1, 
  .podcard h3, 
  .podcard h4, 
  .podcard p {
    font-size: 1rem;
    line-height: 1.5;
    word-break: break-word;
  }

  .podcard a {
    word-break: break-all;
  }
  

  #redtickets img {
    width: 25%;
    max-width: 255px;
    height: auto;
  }

  #redtickets h3 {
    font-size: 15px;
    width: 80%;
    max-width: 200px;
    text-align: start;
    margin-bottom: 5px;
  }

  #taller {
    width: 100%;
    height: 100%;
  }

  #taller h1 {
    text-align: center;
    max-width: 300px;
    font-size: 35px;
  }

  #taller h3 {
    text-align: center;
    max-width: 650px;
    font-size: 15px;
  }

  #about h1 {
    font-size: 12svw;
    height: auto;
  }

  /* #about h3 {
    height: auto;
  }
 */
  .prev,
  .next {
    font-size: 12px;
    padding: 5px;
    margin-top: 5rem;
  }

  #dot-container {
    gap: 3px;
    padding: 5px;
  }

  .dot {
    height: 5px;
    width: 5px;
  }

  #sponsors {
    width: 90%;
    margin: 0 auto;
    gap: 0.1rem;
  }

  .container-sp {
    width: 80%;
    
  }

  /* Apoya */
  .support-logos {
    width: 100%;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    grid-template-areas:
      "a b c"
      "d e";
    gap: 1px;
  }

  .support-logos a:nth-child(1) {
    min-width: 65px;
    width: 120%;
  }
  .support-logos img:nth-child(2),
  .support-logos img:nth-child(3),
  .support-logos img:nth-child(4) {
    max-width: 130px;
    width: 120%;
  }
  .support-logos img:nth-child(5) {
    max-width: 100px;
    width: 100%;
  }

 /*  .logo2 {
    width: 100%;
    max-width: 100px;
    height: auto;
    object-fit: contain;
  }

  .logo3 {
    width: 100%;
    max-width: 110px;
    height: auto;
    object-fit: contain;
  }

  .logo4 {
    width: 100%;
    max-width: 70px;
    height: auto;
    object-fit: contain;
  } */

  .container-sp-2 {
    width: 70%;
    margin: auto;
    display: grid;
    /* flex-direction: column; */
    gap: 15px 15px;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;    
    /* flex-wrap: wrap; */
  }

  #sponsors-2 h3 {
    /* grid-area: head; */
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px;
  }

  .logo-s,
  .logo-ort,
  .logo-ucu {
    width: 70%;
    max-width: 70px;
    height: auto;
    object-fit: contain;
  }

  .footer p {
    font-size: 7px;
  }

  .footer_logo {
    max-width: 55px;
  }

  
    .container-di {
        width: 100%;
        min-width: 0;
        padding: 0 1rem;
    }

    .container-di h3 {
        font-size: 1.9rem;
        margin-bottom: 51rem;
    }

    .logos-di {
        gap: 0.1rem;
    }

    .logos-di img {
        max-width: 200px;
        max-height: 155px;
    }


  .licencia {
    height: 45px;
    align-items: center;
    justify-content: baseline;
  }

  .licencia>p {
    font-size: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}