body, html{
  height: 100%;
  background-color: #111;
}

.bg-image{
  background-image: url("../images/Tharos.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (max-width: 767.98px) { 
  .bg-image{
    height: 50%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .bg-image{
    height: 75%;
  }
}

.modal-content{
  background-color: #333;
}

.modal-content{
  color:#fff;
  letter-spacing: 5px;
}

.close{
  color:#fff;
}

#contacto{
  background-image: url(../images/contact-bg.JPG);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* height: 600px; */
}

#musica{
  background-image: url(../images/music-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* height: 600px; */
}
#letras{
  background-color: #000;
  /* height: 600px; */
}

#galeria{
  background-color: #000;
}

.bg-black{
  background-color: #111;
}

.tharos-logo{
  width: 100px;
  /* border: 1px #ddd solid; */
}

.store-logo{
  opacity: 0.7;
  border: 5px rgba(255, 255, 255, 1) solid;
  transition: all 0.5s ease;
}
.store-logo:hover{
  opacity: 1;
}
@media (min-width: 768px) {
.navbar-brand
    {
        position: absolute;
        left: calc(50% - 50px);
        top: 10px;
    }
}

/* ESTILOS DE VIDEO DE FONDO */
.video-section{
  position: relative;
  width: 100%;
  max-height: 600px;
  overflow: hidden;
}

#video-elem{
  position: relative;
  width: 100%;
}

.video-overlay{
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 0;
  /* background-color: rgba(255, 255, 255, 0.1); */
}

img.youtube-logo{
  opacity: 0.7;
  transition: all 0.5s ease;
}
img.youtube-logo:hover{
  opacity: 1;
}

/* ESTILOS DEL OVERLAY EN LA GALERIA DE FOTOS */
.overlay{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: #f00;
}

.overlay-container:hover .overlay{
  opacity: 0.7;
}

 .overlay-content{
  color: white;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
 }

 .social-logo{
   opacity: 0.7;
   transition: all 0.5s ease;
 }

 .social-logo:hover{
   opacity: 1;
 }