/**************************/
/* 1  -- 1168px */
/**************************/

@media (max-width: 73em) {
  .container {
    max-width: 85rem;
  }

  .main-nav-list {
    gap: 1.6rem;
  }

  .artist-bio-grid {
    grid-template-columns: 1fr;
  }

  /* .youtube-player-frame {
    width: 80rem;
    height: 44.444rem;
  } */

  /* ARTISTS */

  .artists-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  /* .flex-center {
    display: none;
  } */

  .artists-grid--img-left {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .artists-grid--txt-left {
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .artists-grid.marg-down--xl {
    margin-bottom: 8rem !important;
  }

  .artists-grid--txt-left {
    padding-top: 2.4rem;
  }

  /* #artists-AS {
    margin-bottom: 3.2rem !important;  
  } */

  /* #artists-CDC .incard-pad{
    padding: 0 2.4rem;
    height: 25.4rem;
  } */

  /* Artist */

  .artist-bio-img {
    width: 100%;
  }

  .artist-social-cont {
    margin-bottom: 2.4rem;
  }

  .portfolio-card-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-text {
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .title-tertiary {
    margin-bottom: 3.2rem;
  }

  #artist-JJ-img {
    margin-bottom: 3.2rem;
  }

  .grid--3-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

/**************************/
/* 2 -- 928px */
/**************************/

@media (max-width: 58em) {
  .container {
    max-width: 65rem;
  }


  /* .nav-logo {
    font-size: 2.4rem;
  }
   */

  .main-nav {
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
  }


  .toggle-button {
    display: flex;
    margin: 1.8rem 1.2rem 0 0;
    left: 92%;
  }

  .hamburger {
    display: flex;
    margin: 1.8rem 1.2rem 0 0;
    /* left: 92%; */
  }

  .main-nav-list {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: #961b21;
    gap: 0.6rem;
  }

  .main-nav-list.active {
    display: flex;
  }

  .main-nav-list li:first-child {
    margin-top: 0.6rem;
  }

  .main-nav-list li:last-child {
    margin-bottom: 0.6rem;
  }

  .nav-logo {
    margin: 1.8rem 0 0 1.2rem;
  }

  .section-hero {
    height: 70rem;
  }

  .hero-title {
    font-size: 7.4rem;
  }

  .hero-img {
    width: 50rem;
    height: auto;
  }

  /* Index section */
  .grid--2-cols {
    grid-template-columns: 1fr;
  }

  .grid--3-cols {
    grid-template-columns: 1fr;
  }

  .index-section-text.shadow {
    box-shadow: none;
    border-radius: none;
  }

  .index-section-text {
    order: 2;
    padding: 3.2rem 0 0 0;
  }

  .index-section-text .marg-down--sm-2 {
    margin-bottom: 3.2rem !important;
  }

  /* Artists */
  .secondary-nav-links:link,
  .secondary-nav-links:visited {
    font-size: 1.4rem;
    padding: 1rem;
  }

  .artists-txt-cont {
    padding: 3%;
    /* width: 95%; */
    /* display: flex;
    flex-direction: column; */
  }

    /* Artist */

  .portfolio-text.incard-pad {
    padding: 3% .2%;
  }


  /* About */

  .team-3 img {
    width: auto !important;
  } 

  /* Story */

  .story-img {
    width: 100%;
  }

  /* Contact */

  .contact-email-container {
    flex-wrap: wrap;
    gap: 0 !important;
    align-items: center;
  }

  /* .artists-grid {
    row-gap: .8rem;
  }
  .artists-grid--img-left {
    grid-column-start: 1;
    grid-column-end: 6;
  }

  .artists-grid--txt-left {
    grid-column-start: 1;
    grid-column-end: 6;
  } */

  /* #artists-AS.marg-down--xl{
    margin-bottom: 8rem !important;
  } */

  /* 
  #artists-CDC .incard-pad {
    padding: 3.2rem 2.4rem 0 2.4rem;
  } */

}




/* 713 px */
/* siguiente max width de divices 430 
  Debe funcionar entre 430 y 300sh
*/

/* 3  720px */
@media (max-width: 45em) {
  .container {
    /* max-width: 25rem; */
    max-width: 90%;
  }

  .index-section-img {
    width: 35rem;
    height: auto;
  }

  .section-hero {
    height: 70rem;
  }

  .hero-title {
    font-size: 6.2rem;
    /* margin-bottom: 4.8rem; */
  }

  .intro-container {
    padding: 2.4rem 3%;
  }
  .index-section-img {
    margin-bottom: 1.6rem;
  }

  .index-section-text.incard-pad--md {
    padding: 3%;
  }

  .secondary-nav-links:link,
  .secondary-nav-links:visited {
    padding: 1rem .4rem;
  }

  .contact-social-container {
    gap: 3.2rem !important;
  }

  .contact-grid-text {
    padding: 4.8rem 3% 6.4rem 3% !important;   
  }

  .footer-nav-list {
    gap: 1.2rem;
  }

}



/* 4 --- 496px */
@media (max-width: 31em) {

  .container {
    max-width: 90%;
  }

  .section-hero {
    height: 60rem;
  }

  .nav-logo {
    font-size: 3rem;
  }
  
  .hero-img {
    width: 35rem;
    height: auto;
  }

  .index-section-img {
    width: 29rem;
    height: auto;
  }

  /* Artists */ 

  .artists-grid img {
      width: 0%;
      height: auto;
  }

  #artists-JJ.artists-grid img {
    width: 80%;
    height: auto;
  }

  /* Artist */
  
  .artist-bio-img {
    width: 100%;
  }

  .artist-bio-img--vertical {
    width: 100%;
  }

  #artist-JJ-img {
    width: 60%;
    height: auto;
  }

  .artist-social-cont {
    gap: .7rem;
  }

  .artist-social-link:link,
  .artist-social-link:visited {
    font-size: 1.4rem;
  }

  .artist-social-cont a:first-child {
    padding-left: .7rem;
  }
  
  .artist-social-cont a:last-child {
    padding-right: .7rem;
  }

  .portfolio-card {
    padding: 2.4rem 3%;
  }

  .portfolio-img {
    margin-bottom: .8rem;
  }


  /* About */

  .our-team img {
    width: 90% !important;
  }

  .incard-pad-text {
    padding: 3%;
  }

  /* Services */

  .services-list li {
    width: 80%;
    margin: 0 auto;
  }

  #services-production {
    align-self: flex-start;
  }
  #services-production li {
    width: 29.063rem !important;
  }

  /* Contact */

  .contact-grid {
    grid-template-rows: 0.9fr .6fr !important;
  }

  .contact-social-container {
    gap: 1.8rem !important;
  }

  .contact-grid-text {
    padding: 4.8rem 3% 3.2rem 3% !important;
  }

  .contact-grid-links {
    padding: 4.8rem 3% 3.2rem 3% !important;
  }  

  /* Footer */

  .footer-nav-list {
    flex-wrap: wrap;
    row-gap: 0rem;
  }

  .footer-text {
    margin-top: 1.2rem;
  }

  /* 

  .index-section-text.incard-pad--md {
    padding: 5%;
  }

  .index-section-text.shadow {
    box-shadow: none;
    border-radius: none;
  }  */
}

/* 5 --- 352px */

@media (max-width: 22em) {

  html {
    font-size: 56.25%;
  }

  .hero-img {
    width: 33rem;
    height: auto;
  }

  .nav-logo {
    font-size: 2.6rem;
    margin: 2.2rem 0 0 1.2rem;
  }

  .hero-title{
    font-size: 6.4rem;
  }

  .index-section-img {
    width: 25rem;
    height: auto;
  } 

  .contact-email-container a {
    font-size: 1.8rem !important;
  }

  .icon {
    width: 6rem !important;
    height: auto;
  }

}

/* 6 --- 336px */

@media (max-width: 21em) {

  .section-hero {
    height: 53rem;
  }

  .hero-img {
    width: 29.7rem;
    height: auto;
  }

  .title-page {
    font-size: 5.2rem;
  }

  .cdc-img-concert.news-img {
    width: 95%;
  }

  .index-CDC-schedule {
    padding: 2%;
  }

  .artist-social-cont {
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: 1.6rem;
  }
  
  .artist-social-cont a:last-child {
    padding-left: .7rem;
  }

  .portfolio-img {
    width: 25rem;
  }

  #portfolio .title-sub {
    font-size: 4.4rem;
  }

  .secondary-nav-container {
    border-left: solid 2px #961b21;
    border-right: solid 2px #961b21;
  }

  .cdc-venue-link:link,
  .cdc-venue-link:visited {
    font-size: 2rem;
  }

  .contact-email-container a {
    font-size: 1.6rem !important;
  }

  .icon {
    width: 5rem !important;
    height: auto;
  }

}