@import url('https://fonts.googleapis.com/css?family=Oranienbaum&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap');

*{ margin: 0; padding: 0; box-sizing:border-box; transition: all 0.5s;}

.red {color: #9c2021 !important;}





/* ------------ */
/* ------------ */
/* ---------------------------------------------------------------------------- HOME */


.banner {padding: 0rem; overflow: hidden}

.logo-home-contenedor {position: absolute; margin-top: 3rem; z-index: 1}

.barra {background-color: #343a40}
.navbar-brand {display: none;}
.nav-link {font-family: 'Oranienbaum', serif; font-size: 1.4rem; letter-spacing: 1px; margin-top: 0rem; margin-bottom: 0rem; margin-left: 1rem; margin-right: 1rem; text-align: center;}
a.nav-link:hover {color: white !important;}

.sticky {position: fixed; top: 0; width: 100%; z-index: 20;}
/* .sticky + .banner-seccion-chico {padding-top: 500px;} */

.pasador-contenedor {width: 100%; background-color: #444a50; padding: 0rem;}

.frase-home {font-family: 'Oranienbaum', serif; font-size: 6rem; margin-top: 4rem; text-align: center; line-height: 100%;}

.repro {margin-top: 3rem; text-align: center;}
.repro p {font-family: 'Oranienbaum', serif; font-size: 1.7rem;}


/* ----------------PIE */

.pie-home {padding: 2.5rem 0rem; margin-top: 7rem; background-color: #343a40;}
.logo-pie {width: 200px;}

.legales-pie {font-family: 'Nunito Sans', sans-serif; font-size: 0.9rem; padding: 0rem; margin-bottom: 0rem; color: #5F5F5F; text-align: right;}
.legales-pie a {color: #5F5F5F;}
.legales-pie a:hover {color: white;}

.logo-pie-de-mentes {width: 120px; margin-bottom: 0.2rem;}
.creditos-pie {font-family: 'Nunito Sans', sans-serif; font-size: 0.9rem; padding: 0rem; margin-bottom: 0rem; color: #5F5F5F;}

.redes-pie {color: grey; font-size: 1.8rem; margin-left: 0.6rem;}
a.redes-pie:hover {color: grey !important;}
.redes-icono-youtube-pie {margin-bottom: 0.35rem;}
.redes-icono-applemusic-pie {margin-bottom: 0.38rem;}
.redes-icono-deezer-pie {margin-bottom: 0.40rem;}







/* ------------ */
/* ------------ */
/* ---------------------------------------------------------------------------- SECCIÓN */


/* ----------------HEADER SECCIONES */

.logo-seccion-contenedor {position: absolute; margin-top: 2rem; z-index: 1; text-align: center}
.banner-seccion {padding: 0rem; overflow: hidden;}
.barra-seccion {background-color: #343a40}

.banner-seccion-chico {padding: 0rem; overflow: hidden;}
.img-banner-seccion-chico {width: 100%;}

.h1-tit-seccion {font-family: 'Oranienbaum', serif; font-size: 4rem; letter-spacing: 5px; margin-top: 4rem; margin-bottom: 1.5rem; text-align: center; color: #9c2021;}


/* ----------------BAND */

.h1-tit-article {font-family: 'Oranienbaum', serif; font-size: 2.5rem; letter-spacing: -1px; line-height: 110%; margin-top: 1.3rem; margin-bottom: 1.5rem; color: black;}

.member {color: grey !important; text-decoration: underline !important;}

.txt-article {font-family: 'Nunito Sans', sans-serif; font-size: 1rem; color: grey; line-height: 170%;}
.txt-article-list {font-family: 'Nunito Sans', sans-serif; font-size: 1rem; list-style-type: circle; line-height: 170%; padding-left: 1rem; color: grey;}
.txt-article-list b {font-weight: 700;}
.txt-article-list li {line-height: 140%; padding-bottom: 0.7rem}
.img-article {margin: 2.5rem 0rem 1.5rem;}
.simbolo {margin-top: 2.5rem; text-align: center; padding-right: 3rem;}


/* ----------------GALERIAS */

#galeria {margin-top: 3rem; display: flex; ; flex-wrap: wrap; padding: 0 60px; }
#galeria ul {list-style-type: none;}

.columna {-ms-flex: 25%; /* IE10 */ flex: 25%; max-width: 25%; padding: 0 4px; margin-bottom: 0rem;}

.contenedor-img {
overflow: hidden;
position: relative;
cursor: default;
background: #fff;
}

.contenedor-img .mascara,.contenedor-img .contenido {
position: absolute;
overflow: hidden;
top: 0;
left: 0
}

.contenedor-img img {
margin-top: 8px;
display: block;
position: relative;
vertical-align: middle;
}

.efecto .mascara {
background-color: rgba(250, 250, 250, 0.3);
width: 700px;
padding: 60px;
height: 700px;
opacity: 1;
transform: translate(300px, 200px) rotate(45deg); /*Rotamos para dar efecto de diagonal y lo movemos por donde queremos que entre.*/
transition: all 0.3s ease-in-out;
}

.efecto:hover .mascara {
opacity:1;
transform: translate(-96px, -120px) rotate(45deg);
}


/* ----------------VIDEOS */

.video-responsive {overflow:hidden; padding-bottom:56.25%; position:relative; height:0; margin-bottom: 2rem;}
.video-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute;}

.tit-video {font-family: 'Oranienbaum', serif; font-size: 2rem; letter-spacing: -1px; line-height: 110%; margin-top: 1.3rem; margin-bottom: 0.9rem; color: black;}


/* ----------------MERCH */

.merch {font-family: 'Oranienbaum', serif; font-size: 2rem; letter-spacing: -1px; line-height: 130%; margin-top: 1.3rem; margin-bottom: 0.9rem; color: black;}


/* ----------------CONTACT */

.form {margin-top: 2.3rem;}
.form-tit {font-family: 'Oranienbaum', sans-serif; font-size: 1.5rem; margin: 0rem;}
.btn-primary {background-color: #9c2021; border-color: #9c2021; margin-top: 1.5rem;}
.btn-primary:hover {background-color: #c52a2b; border-color: #c52a2b;}

.foto-banda {margin-top: 0.9rem; margin-bottom: 1.7rem;}

.tit-contacto {font-family: 'Oranienbaum', sans-serif; font-size: 1.7rem; margin-bottom: 0.2rem;}
.mail-contacto {font-family: 'Nunito Sans', sans-serif; font-size: 1rem; margin-bottom: 2rem;}
a.mail-contacto {color: grey !important;}
a.mail-contacto:hover {color: #9c2021 !important;}

.redes-contacto {color: grey; font-size: 2.3rem; margin-right: 0.6rem;}
a.redes-contacto:hover {color: #9c2021 !important;}

.gracias {font-family: 'Oranienbaum', serif; font-size: 2rem; letter-spacing: -1px; line-height: 130%; margin-top: 1.3rem; margin-bottom: 0.9rem; color: black;}


/* ----------------MUSIC */

.tracklist-contenedor {margin-top: 3.5rem;}
.borde {border-style: solid; border-width: 0.08rem; border-color: grey;}

.tit-disco {font-family: 'Oranienbaum', sans-serif; font-size: 1.7rem; margin-top: 2rem; margin-bottom: 0.2rem;}
.fecha-disco {font-family: 'Nunito Sans', sans-serif; font-size: 1rem; margin-bottom: 1rem; color:grey;}
.tracklist-disco {font-family: 'Nunito Sans', sans-serif; font-size: 0.85rem; line-height: 190%; color:black;}
.tracklist-disco b {color:#9c2021;}
.tracklist-disco a {color:black;} a:hover {color:#9c2021;}

.tooltip-inner{ padding:3px 5px; color:white; text-align:center; background-color:#adb5bd; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}
.bs-tooltip-right .arrow::before {border-right-color: #adb5bd;}


/* LETRAS */

.letras-contenedor {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.tit-disco-letras {font-family: 'Oranienbaum', sans-serif; font-size: 2.5rem; margin-top: 2.5rem; margin-bottom: 0.2rem;}

.contenedor-cancion {width: 355px; margin-top: 2.5rem;}
.tit-cancion {font-family: 'Oranienbaum', sans-serif; font-size: 1.3rem; line-height: 120%; text-align: center;}
.tit-cancion b {color:#9c2021;}
.letra-cancion {font-family: 'Nunito Sans', sans-serif; font-size: 0.85rem; line-height: 170%; color:black; margin-bottom: 0.7rem; text-align: center;}
.credito {font-family: 'Nunito Sans', sans-serif; font-size: 0.85rem; line-height: 130%; text-align: center; color: #c7c7c7;}

:target {display: block; position: relative; top: -120px; visibility: hidden;}


a.back-music {font-family: 'Nunito Sans', sans-serif; font-size: 0.8rem; line-height: 170%; color: grey; margin-bottom: 0.7rem; text-align: center;}
a.back-music:hover {color:#9c2021;}

.back-music-pie {font-family: 'Nunito Sans', sans-serif; font-size: 0.8rem; line-height: 170%; color: grey; margin-top: 4rem; text-align: center;}
a.back-music-pie:hover {color:#9c2021;}

.nav-side {
	display: flex;
	justify-content:
	center;
	align-items: center;
	border-radius: 0.5rem;
	height: 80px;
	width: 50px;
	position: fixed;
	z-index: 100;
	bottom: 10px;
	right: 10px;
	background-color: grey;
	overflow-x: hidden;
	opacity: 0.5;
}
.nav-side-p {margin: 0.5rem}
.nav-side-link {color: white;  font-size: 1.2rem;}
.nav-side-link:hover {color: black;}


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







@media(max-width: 1850px){


/* -------------- HOME */

.img-banner-home {position: relative; left: -100px;}


/* ---PIE */

.legales-pie {margin-bottom: 0rem; color: #5F5F5F; text-align: left; line-height: 110%;}

}












@media(max-width: 1500px){


/* -------------- HOME */

.img-banner-home {position: relative; left: -200px;}


/* ---PIE */

.legales-pie {margin-bottom: 0rem; color: #5F5F5F; text-align: left; line-height: 110%;}
.logo-pie-de-mentes {width: 100px; margin-bottom: 0.2rem;}
.creditos-pie {text-align: right; font-size: 0.7rem;}

}












@media(max-width: 1200px){


/* -------------- HOME */

.img-banner-home {position: relative; left: -350px;}


/* ---PIE */

.legales-pie {margin-bottom: 0rem; color: #5F5F5F; text-align: left; line-height: 110%;}
.creditos-pie {text-align: right;}


/* ----- GALERIA */

#galeria {margin-top: 2rem; padding: 0 1px; }



}








@media(max-width: 992px){


/* -------------- HOME */

.navbar-brand {display: block;}
.logo-home-contenedor {position: absolute; left: -8rem; margin-top: 3rem; z-index: 1}
.img-banner-home {position: relative; height: 400px; left: -200px;}


/* ---PIE */

.pie-home {padding: 2.5rem 1rem;}
.legales-pie {margin-bottom: 0rem; color: #5F5F5F; text-align: left; line-height: 110%;}
.creditos-pie {text-align: right;}


/* ----- GALERIA */

#galeria {margin-top: 2rem; padding: 0 2px; }
.columna {flex: 50%; max-width: 50%;}


}







@media(max-width: 768px){


/* -------------- HOME */

.navbar-brand {display: block;}
.logo-home-contenedor {display: none;}
.img-banner-home {position: relative; height: 400px; left: -440px;}


/* ----- PIE */

.logo-pie {display: none;}
.legales-pie {margin-bottom: 1rem; color: #5F5F5F; text-align: center; line-height: 110%;}
.logo-pie-de-mentes {margin-top: 1.5rem;}


/* ----- GALERIA */

#galeria {margin-top: 2rem; padding: 0 2px; }
.columna {flex: 50%; max-width: 50%;}


/* ----- CONTACTO */

.contenedor-boton {text-align: center;}
.btn-primary {margin-bottom: 1.5rem;}
.foto-banda {display: none;}
.contenedor-data {text-align: center;}


}






@media(max-width: 576px){


/* -------------- HOME */

.navbar-brand {display: block;}
.logo-home-contenedor {display: none;}
.sangre-home {display: none;}
.sticky {position: fixed; top: 0rem;}
.img-banner-home {position: relative; height: 400px; left: -600px;}

/* ----- PIE */

.pie-home {padding: 2.5rem 5rem;}
.logo-pie {display: none;}
.legales-pie {margin-bottom: 1rem; color: #5F5F5F; text-align: center; line-height: 110%;}
.creditos-pie {font-size: 0.9rem; text-align: center;}
.logo-pie-de-mentes {margin-top: 2rem;}


/* ----- SECCIONES HEADER */

.logo-seccion-contenedor {display: none;}
.img-banner-seccion {display: none;}

.banner-seccion-chico {}
.img-banner-seccion-chico {position: relative; height: 200px; width: auto; left: -960px;}


/* ----- BAND */

.h1-tit-article {margin-top: 0.5rem; margin-bottom: 1.5rem;}
.simbolo {display: none;}


/* ----- GALERIA */

#galeria {margin-top: 2rem; padding: 0 4px; }
.columna {flex: 100%; max-width: 100%;}


/* ----- CONTACTO */

.contenedor-boton {text-align: center;}
.btn-primary {margin-bottom: 1.5rem;}
.foto-banda {display: none;}
.contenedor-data {text-align: center;}

}