body{
  background-color: black;
  color: white;

}


/*logoCAROUSEL ======================================*/
#logoCarousel {
  margin: -12rem -2rem 0rem -2rem;
  
}

.logoCarousel .carousel-inner .carousel-item img{
  width: 100%;
  }
  
 .logoCarousel .carousel-item {
      width: 100%;
      height: 44rem;
      transition: transform 2.6s ease-in-out;
      z-index: -1;
    }
    @media (max-width: 600px) {
      #logoCarousel .carousel-item {
      width: 100%;
      height: 40rem;
      transition: transform 2.6s ease-in-out;
    }
  }


    .carousel-fade .active.carousel-item-start,
    .carousel-fade .active.carousel-item-end {
      transition: opacity 0s 2.6s;
    }



 .logowords1, .logowords2  {
  font-family: P22-Muschamp-Pro;
  font-size: 2.5rem;
  background-color:transparent;
  position: absolute;
  top: -36rem;
  right: 0;
  left: 0;
  text-align: center;
  max-width: 100vw;
  }
  
  .logowords1 {
    color:rgb(255, 255, 255);
    }
 .logowords2 {
  color:rgb(0, 0, 0);
  }

/*PHOTO GALLERY*/
#photoCarousel {
  padding: 0rem;
  width: 100vw;
 

}
/*TESTIMONIALS ==================================*/
/*CAROUSEL*/
#testaCarousel {
  margin-top:-100rem;
  padding-top: 0rem;
  width: 100vw;
}

.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;
    }

.carousel-caption h2{ 
padding-top: .5rem;
font-size: 1.5rem;
font-weight: 700;
}
.carousel-caption p{ 
  padding-top: .5rem;
  font-size: 1rem;
  }

.testimonial1 {
  background-color: rgba(83, 2, 70, 0.9);
  color: white;
  width: 20rem;
  position: absolute;
  top: 0rem;
  left: 10rem;
  margin: 0rem 0rem 0rem 0rem;
  text-align: center; 
  border-radius: 10px;
  padding: 0rem 1rem;
}

.testimonial2 {
  background-color:rgb(255, 255, 0, .9);
  color: rgb(0, 0, 0);
  width: 26rem;
  position: absolute;
  top: -24rem;
  left: -6rem;
  margin: 0rem 0rem 0rem 0rem;
  text-align: center; 
  border-radius: 10px;
  padding: 0rem 1rem;
  }

.testimonial3 {
    background-color:rgb(255, 0, 0, .9);
    color: white;
    width: 26rem;
    position: absolute;
    top: -24rem;
    left: 40rem;
    margin: 0rem 0rem 0rem 0rem;
    text-align: center; 
    border-radius: 10px;
    padding: 0rem 1rem;
    }

.testimonial4 {
      background-color:rgba(173, 188, 242, 0.9);
      color: rgb(0, 0, 0);
      width: 20rem;
      position: absolute;
      top: -30rem;
      left: -4rem;
      margin: 0rem 0rem 0rem 0rem;
      text-align: center; 
      border-radius: 10px;
      padding: 0rem 1rem;
      }


/* VIDEO GALLERY ===================================== */
#gallery {
    width: 100%;
    height: 100%;
    margin-top: -100rem;
    padding-top: 4rem;
    
  }


.card-title{
  color: black;
  font-size: 1.2rem;
  font-weight: 700;
}
  .container-videos {
    margin: auto;
    width: 90%; 

  }


/* SONG LISTS ===================================== */  
/*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-image: url(/images/logo-carousel/logo-5.png);
    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;
   }

/* CONTACT =======================================*/
.contactText {
  font-family: P22-Muschamp-Pro;
  font-size: 2.5rem;
  background-color:transparent;
  color:rgb(255, 255, 255);
  text-align: center;

}

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


@media (min-width: 100px) {

  .logowords1, .logowords2  {
    top: -0rem;
    font-size: 1.3rem;

    }
 
  .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;
       }


/*Testimonials*/
.carousel-caption h2{ 

font-size: 1rem;
font-weight: 700;
}
.carousel-caption p{ 
  font-size: .7rem;
  }

.testimonial1 {
  width: 22rem;
  position: absolute;
  top: -12rem;
  left: -3rem;
}

.testimonial2 {
  width: 20rem;
  position: absolute;
  top: -10rem;
  left: -2rem;
  }

.testimonial3 {
  width: 20rem;
  position: absolute;
  top: -8rem;
  left: -2rem;
    }

.testimonial4 {
  width: 20rem;
  position: absolute;
  top: -8rem;
  left: -2rem;
  }
 }


@media (min-width: 500px) {


   .logowords1, .logowords2  {
    top: -20rem;
    font-size: 2rem;
    }
  .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;
       }
   /*Testimonials*/
   .carousel-caption h2{ 
    padding-top: .5rem;
    font-size: 1rem;
    font-weight: 700;
    }
    .carousel-caption p{ 
      padding-top: .5rem;
      font-size: .5rem;
      }

   .testimonial1 {
    width: 20rem;
    position: absolute;
    top: -16rem;
    left: 12rem;
  }
  
  .testimonial2 {
    width: 12rem;
    position: absolute;
    top: -19rem;
    left: -1rem;
    }
  
  .testimonial3 {
    width: 12rem;
    position: absolute;
    top: -14rem;
    left: 21rem;
      }
  
  .testimonial4 {
    width: 12rem;
    position: absolute;
    top: -16rem;
    left: 6rem;
        }

}

@media (min-width: 740px) {

   .logowords1, .logowords2  {
    top: -22rem;
    font-size: 2rem;
    }

  .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;
       }
   /*Testimonials*/
   .carousel-caption h2{ 
    padding-top: .5rem;
    font-size: 1rem;
    font-weight: 700;
    }
    .carousel-caption p{ 
      padding-top: .5rem;
      font-size: .5rem;
      }

   .testimonial1 {
    width: 20rem;
    position: absolute;
    top: -16rem;
    left: 10rem;
  }
  
  .testimonial2 {
    width: 12rem;
    position: absolute;
    top: -19rem;
    left: -1rem;
    }
  
  .testimonial3 {
    width: 12rem;
    position: absolute;
    top: -14rem;
    left: 22rem;
      }
  
  .testimonial4 {
    width: 12rem;
    position: absolute;
    top: -18rem;
    left: 6rem;
        }

}
@media (min-width: 900px) {

.logowords1, .logowords2  {
  top: -26rem;
  font-size: 2rem;
  }
.carousel-caption h2{ 
  padding-top: .5rem;
  font-size: 1.5rem;
  font-weight: 700;
  }
  .carousel-caption p{ 
    padding-top: .5rem;
    font-size: 1rem;
    }

.testimonial1 {
  width: 33rem;
  position: absolute;
  top: -20rem;
  left: 13rem;
}

.testimonial2 {
  width: 26rem;
  position: absolute;
  top: -18rem;
  left: -2rem;
  }

.testimonial3 {
    width: 18rem;
    position: absolute;
    top: -18rem;
    left: 28rem;
    }

.testimonial4 {
      width: 20rem;
      position: absolute;
      top: -20rem;
      left: 8rem;
      }


 }

 @media (min-width: 1300px) {
  .logowords1, .logowords2  {
    top: -36rem;
    font-size: 2.5rem;
    }

  
  .testimonial1 {
    width: 32rem;
    position: absolute;
    top: -30rem;
    left: 28rem;
  }
  
  .testimonial2 {
    width: 26rem;
    position: absolute;
    top: -28rem;
    left: -2rem;
    }
  
  .testimonial3 {
      width: 20rem;
      position: absolute;
      top: -24rem;
      left: 44rem; 
      }
  
  .testimonial4 {
        width: 20rem;
        position: absolute;
        top: -28rem;
        left: 12rem;
  
        }
  
  
   }
  
@media (min-width: 1800px) {
 
    .logowords1, .logowords2  {
      top: -60rem;
      font-size: 2.5rem;
      }
   /*Testimonials*/
  .carousel-caption h2{ 
  padding-top: .5rem;
  font-size: 2rem;
  font-weight: 700;
  }
  .carousel-caption p{ 
    padding-top: .5rem;
    font-size: 1.5rem;
    }
    .testimonial1 {
      width: 50rem;
      position: absolute;
      top: -40rem;
      left: 34rem;
    }
    
    .testimonial2 {
      width: 35rem;
      position: absolute;
      top: -40rem;
      left: 0rem;
      }
    
    .testimonial3 {
        width: 26rem;
        position: absolute;
        top: -40rem;
        left: 86rem; 
        }
    
    .testimonial4 {
          width: 30rem;
          position: absolute;
          top: -40rem;
          left: 20rem;
    
          }
    
    
     }