body{
  background-color: whitesmoke;
  color: black;
}

.container-home {
margin: 3rem 0rem 0rem 0rem;
}



#gallery {
    width: 100vw;
    height: 100%;
    padding-top: 6rem;   
    background-color: #000;
    background-size: cover;
  }
.card-title{
  color: black;
  font-size: 1.2rem;
  font-weight: 700;
}


  .container-videos {
    margin: auto;
    width: 90%;
    
  }
/*Song era buttons*/
.anchor {
  display:block;
  padding-top:100px;
  margin-top:-100px;
}
.btn-black{
  background-color: #000;
  color: white;
  border-color: white;
  border-radius: 4px;
  margin: 1rem;
}
  .container-songs {
    width: 100vw;
    height: fit-content;
    padding-top: 6rem;
    background: transparent;
    background-image:black;
    background-size: contain;
    color: white;
    margin-top: 6rem;
    
   
  }
  .container-artists {
    width: 100vw;
    height: 100%;
    padding-top: 8rem;
    background: transparent;
    background-size: cover;
    color: black;
    margin-bottom: 4rem;
  }
  .artist-text {
  margin: 0rem 2rem;
  }
/* song artist tables */
.song-box {
border-width: 1px;
border-color: white;
border-style: solid;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.25);

}
.list-head {
  background-color: rgb(255, 255, 255); 
  color: rgb(0, 0, 0); 
  width: 5rem;
  text-align: left;
  margin-bottom: .8rem;
  margin-top: 2rem;
  font-size: 1rem;
  
   }
.t1 {
margin: 1rem 0rem 1rem 1rem;
}

.td1 {
color: rgb(255, 255, 255);
line-height: 1.5rem;
font-size: .8rem;
  }
.td2 {
    color: rgb(199, 199, 199);
  
    line-height: .8rem;
    font-size:.8rem;
   }
/*logoCAROUSEL*/
.logoCarousel .carousel-inner .carousel-item img{
  height: 100vh;
  width: 100%;
 
  }
  
    .carousel-item {
      transition: transform 2.6s ease-in-out;
      margin-top: 3rem;
    }
    .carousel-fade .active.carousel-item-start,
    .carousel-fade .active.carousel-item-end {
      transition: opacity 0s 2.6s;
    }

/*CAROUSEL*/
.testaCarousel .carousel-inner .carousel-item img{
  height: 100vh;
  width: 100%;
  }
    .carousel-inner .carousel-item > img{
      -webkit-animation:thing 20s;
      -o-animation:thing 20s;
      animation:thing 20s;
      }
      
      @keyframes thing {
      from{
        transform: scale(1, 1); 
      }
      to {
        transform: scale(1.1, 1.1);
      }
      }
    .carousel-item {
      transition: transform 2.6s ease-in-out;
      
    }
    .carousel-fade .active.carousel-item-start,
    .carousel-fade .active.carousel-item-end {
      transition: opacity 0s 2.6s;
    }









.testimonial1 {
  background-color:rgba(255, 255, 0, 0.8);
  color: rgb(0, 0, 0);
  width: 100%;
  text-align: left; 
}



.contactText {
  font-size: 1.5rem;
  background-color: rgb(240, 239, 243); 

  text-align: center;

}

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


@media (min-width: 100px) {
  .navbar{
    height: 8rem;
  }
  .navbar, p{
    font-size: .8rem;
    
  } 
  .navbar-brand{
    width:20rem; 
    margin:-2rem 0rem 0rem -1rem;
    
    }
    .navbar-nav{
      margin-left: 0rem;
    }
  .collapse{
    background-color: rgb(228, 223, 241);
    color: #000;
   width: 100vw;
   margin: -3rem -1rem;
   padding: .5rem 2rem
  }


 
  .container-artists {
    padding-top: 6rem;
    padding-left:0rem;
    background-size: cover;
    margin: 0rem 0rem;
  }
  .accordion-body {
    padding: 3rem .5rem;
    width: fit-content;
   
  }
.accordion {
  margin: 0rem 0rem 0rem 0rem;
}

  .list-head {
      width: 5rem;
      font-size: 1rem;
      margin: 2rem 0rem .8rem 1rem;
       }
  .td1 {
    line-height: 1rem;
    font-size: 1rem;
    
      }
  .td2 {
        color: rgb(199, 199, 199);
        
        line-height: 1rem;
        font-size:1rem;
        padding-left: 1rem;
       }

       .carousel-caption {
        margin: 0rem 0rem;
          } 
        .carousel-caption h2{ 
          padding-top: .5rem;
          padding-left: 3rem;
          font-size: 1rem;
          font-weight: 500;
          font-style: italic;
          }
          .carousel-caption h3{ 
            padding-top: 0rem;
            padding-left: 3rem;
            font-size: 1.3rem;
            font-weight: 700;
            }
          .carousel-caption h4{ 
            margin-top: 0rem;
            padding-left: 5rem;
            font-size: .6rem;
            }
            .testimonial1 {
              height: 6rem;
              min-width: 100vw;
              margin: 0rem 0rem -3rem -4rem;
              text-align: left; 
            }  

 }

@media (min-width: 500px) {
.navbar{
    height: 4rem;
  }
  .navbar, p{
    font-size: .8rem;
  } 
  .navbar-brand{
  width:20rem; 
  padding-right: 0rem;
  padding-top:1rem; 
  margin:0rem 0rem 0rem -1rem;
  }
  .navbar-nav{
    margin-left: -8rem;
  }
  .collapse {
    background-color:transparent;
   }
   .accordion-body {
    padding: 3rem .5rem;
    width: 80%;
  }

   .container-artists {
    padding-top: 6rem;
    background-size: cover;
  }
  .accordion {
    margin: 0rem 5rem 20rem 5rem;
  }
  .list-head {
      width: 5rem;
      font-size: 1rem;
      margin: 2rem 0rem .8rem 1rem;
       }
  .td1 {
    line-height: 1rem;
    font-size: 1rem;
      }
  .td2 {
        color: rgb(199, 199, 199);
        width: 10rem;
        line-height: 1rem;
        font-size:1rem;
       }
       .carousel-caption {
        margin: 0rem 0rem;
          } 
        .carousel-caption h2{ 
          padding-top: .5rem;
          padding-left: 10rem;
          font-size: 1.2rem;
          font-weight: 500;
          font-style: italic;
          }
          .carousel-caption h3{ 
            padding-top: 0rem;
            padding-left: 10rem;
            font-size: 1.5rem;
            font-weight: 700;
            }
          .carousel-caption h4{ 
            margin-top: 0rem;
            padding-left: 12rem;
            font-size: .8rem;
            }
            .testimonial1 {
              height: 6rem;
              min-width: 100vw;
              margin: 0rem 0rem 2rem -7rem;
              text-align: left; 
            }  


}

@media (min-width: 740px) {
  .navbar{
    height: 6rem;
  }
  .navbar, p{
    font-size: 1rem;
  } 
  .collapse{
    background-color: transparent;
   }
   .accordion-body {
    padding: 3rem .5rem;
    width: 30%;
  }
 
  .container-artists {
    padding-top: 6rem;
    background-size: cover;
  }


  .list-head {
      width: 5rem;
      font-size: 1rem;
      margin: 2rem 0rem .8rem 1rem;
       }
  .td1 {
    line-height: 1rem;
    font-size: 1rem;
      }
  .td2 {
        color: rgb(199, 199, 199);
        width: 10rem;
        line-height: 1rem;
        font-size:1rem;
       }

       .testimonial1 {
        height: 6rem;
        margin: 0rem 0rem 2rem -10rem;
      }  
}

@media (min-width: 900px) {
  .navbar-brand{
    width:30rem; 
    padding-right: 0rem;
    padding-top: 1rem; 
    margin-left: 0rem;
    margin-right: 0rem;
    }
    .navbar-nav{
      margin-left: -8rem;
    }

    .accordion-body {
      padding: 3rem .5rem;
      width: 80%;
    }


 }

 @media (min-width: 1300px) {
  .navbar-brand{
  width:30rem; 
  padding-right: 0rem; 
  margin-left: 0rem;
  margin-right: 0rem;
  }
  .navbar-nav{
    margin-left: -8rem;
  }
  .testimonial1 {
    height: 6rem;
    margin: 0rem 0rem 10rem -14rem;
  }  
}
  
@media (min-width: 1800px) {
  .carousel-caption h2{ 
    padding-top: .5rem;
    padding-left: 10rem;
    font-size: 1.5rem;
    font-weight: 500;
    font-style: italic;
    }
    .carousel-caption h3{ 
      padding-top: 0rem;
      padding-left: 10rem;
      font-size: 3rem;
      font-weight: 700;
      }
    .carousel-caption h4{ 
      margin-top: 0rem;
      padding-left: 12rem;
      font-size:1rem;
      }
  .testimonial1 {
    height: 10rem;
    margin: 0rem 0rem 20rem -18rem;
  }  
  
    
    
     }