body {
  font-size: 20px;
  font-family: 'Oswald', sans-serif;
  background-color: #10151b;
  color:white;
  height: 100%;
  overflow-x: hidden;
}

.shadow {
  -webkit-box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.12);
  box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.12);
}

* {
  -webkit-transition: all 0.3s ease;
  -moz-transition:all 0.3s ease;
  -o-transition:all 0.3s ease;
  transition:all 0.3s ease;
}
.social_links{
  list-style-type: none;
  margin: 0;
  padding: 0;

}

.social_links_item{
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
}

.social_links_item a{
  color:white
}

.social_links_item a:hover{
color:#fcb749;
}

.shaded-5{
  background-image:linear-gradient(
    rgba(40, 40, 40, 0.5), 
    rgba(40, 40, 40, 0.5)
  );
}

.albums_cover{
  border:4px solid black;
}

.sample_audio{
  display: grid;
  grid-template-columns: 100px auto 60px;
  gap: 0px;
  padding-left: 200px;
  padding-right: 200px;
  margin-top: 30px;
  margin-bottom: 30px;
  align-items: center;  
}

.sample_audio span{
  text-align: left;
  padding-left:30px;
  font-size: 1.5em;
  vertical-align: bottom;
}


section {
  width:100%;
}
#top-section{ 
  /* padding-top: 55px; */
  background-image:linear-gradient(
    rgba(40, 40, 40, 0.7), 
    rgba(40, 40, 40, 0.7)
  ),url(/images/mockaroon-1129968-unsplash.webp);
  background-position:right;
  background-repeat:no-repeat;
  background-size:cover;
  top:0;
  bottom: 0;
  position: relative;
  overflow-y: hidden;
}

#michael-image{
  width: 100%;
} 
#top-content{
  min-height: 600px;
}

.navbar-shrink{
  background-color: #faf9f9;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
    color: #004385;
}


.navbar-brand, .nav-item > .nav-link{
  font-weight: 700;
  text-transform: uppercase;
}

.section-header{
  margin-top:25px;
}
div.section-content{
  margin:50px; 
}

section.medium {
  height: auto !important;
  height: 100%;
  min-height: 500px;
  padding:5px;
}

div.section_row {
  min-height: 500px;
}

section.tall {
  /* min-height: 800px; */
  border:1px solid yellow;
}

.new_music_section{
  /* The image used */
  background-image: url("/images/equalizer.webp");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  position: relative;
}
.new_music_section div.container{
z-index: 3;
    position: relative
}

.new_music_section div.gradient{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #797974;
  opacity: 0.6;
  z-index: 1;
}



.about_section{
  /* The image used */
  background-image: url("/images/chuttersnap-317193-unsplash.webp");

  /* Set a specific height
  height: 500px;  */

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#contact-section {
  background-color: #274060;
  background-image: url("/images/map-image.png");
  background-repeat: no-repeat;
  background-position: center;
}

footer{
  background-color: #48658a;
}


#top-content{
  padding-top:125px;
}

/* SMALL SCREEN CSS */

@media only screen and (max-width: 767px){
  body {
    font-size: 15px;
    
  }
  #top-section{ 
    padding-top: 5px;
  }
  #top-content{
    min-height: 300px;
  }
  
  .embed-responsive-16by9{
    width:300px;
    border:1px xolid red;
  }

  #michael-image{
    /* position: absolute;
    height: 50%;
    right:0px;
    bottom:0px; */
  }

  .sample_audio{
    display: grid;
    grid-template-columns: 80px auto 0px;
    gap: 0px;
    margin-top: 30px;
    margin-bottom: 30px;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
  }

  .sample_audio span{
    padding-left:15px;
    font-size: 1.5em;
    vertical-align: bottom;
  }


}
/* #animations{
  
*/
@keyframes fade {
  from { opacity: 0.0; }
  10% { opacity: 9.0; }
  20% { opacity: 0.4; }
  30% { opacity: 0.8; }
  40% { opacity: 0.2; }
  50% { opacity: 1.0; }
  60% { opacity: 0.2; }
  70% { opacity: 0.4; }
  80% { opacity: 0.5; }
  to { opacity: 1.0; }
}                                                                                                                                                                                                                                  

@-webkit-keyframes fade {
  from { opacity: 0.0; }
  10% { opacity: 9.0; }
  20% { opacity: 0.4; }
  30% { opacity: 0.8; }
  40% { opacity: 0.2; }
  50% { opacity: 1.0; }
  60% { opacity: 0.2; }
  70% { opacity: 0.4; }
  80% { opacity: 0.5; }
  to { opacity: 1.0; }
}

.flicker {
animation:fade 1000ms ;
-webkit-animation:fade 1000ms;
}

.sample_play_btn{
  position: absolute;
  cursor: pointer;
  top: 55%;
  font-size: 2em;
  left: 45%;
  z-index: 2;
}

.sample_play_btn_new{
  cursor: pointer;
}

.sample_play_btn:hover,.sample_play_btn_new:hover{
  text-shadow: 0 0 21px #fec852;
}

.CNDW{
  color:#dc3545 !important;
}
.PTTC{
  color:#17a2b8 !important;
}

#youtube_section{
  background-image: url("/images/photo-1524169113253-c6ba17f68498.webp");
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#youtube_link_container{
  height:500px;
  overflow: hidden;
  overflow-y: auto;
  border:1px solid rgba(0,0,0,.25);
}

.youtube_link{
  border: 1px solid #d6d2d2;
  margin-bottom: 5px;
  position: relative;
}

.youtube_link img{
  width:200px;
  margin:10px;
  border: 4px solid #fff;
  cursor: pointer;
}

.youtube_link img.playing{
  border: 4px solid blue;
}

.youtube_link img:hover{
  border: 4px solid #fec852;
}

.youtube_link label, #youtube_vid_container label{
  width: 100%;;
  background-color: #d6d2d2;
  color:black;
  margin:0px;
}

.youtube_link label.playing{
  background-color:blue;
  color:white;
}