@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@500;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


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

html {scroll-behavior: smooth; min-height: 100%; position: relative;}
a {transition-duration: 0s;}
body {position: relative; background-color: #000000 !important;}


.mt-6 {margin-top: 4rem !important;}
.mt-7 {margin-top: 5rem !important;}
.mt-8 {margin-top: 6rem !important;}
.mt-9 {margin-top: 7rem !important;}
.mt-10 {margin-top: 8rem !important;}

.mb-6 {margin-bottom: 4rem !important;}
.mb-7 {margin-bottom: 5rem !important;}
.mb-8 {margin-bottom: 6rem !important;}
.mb-9 {margin-bottom: 7rem !important;}
.mb-10 {margin-bottom: 8rem !important;}

.ps-6 {padding-left: 4rem !important;}
.ps-7 {padding-left: 5rem !important;}
.ps-8 {padding-left: 6rem !important;}
.ps-9 {padding-left: 7rem !important;}
.ps-10 {padding-left: 8rem !important;}

.pe-6 {padding-right: 4rem !important;}
.pe-7 {padding-right: 5rem !important;}
.pe-8 {padding-right: 6rem !important;}
.pe-9 {padding-right: 7rem !important;}
.pe-10 {padding-right: 8rem !important;}



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

main {position: relative}


/*NAV*/

.navbar {height: 7rem; background-color: #0b190b !important; justify-content: center !important;}
.navbar-nav {align-items: end;}
.navbar-collapse {flex-grow: unset !important;}
.nav-item {font-family: "Inter Tight", sans-serif; font-weight: 900; font-optical-sizing: auto; font-size: 1.25rem; letter-spacing: 2px;}
.nav-link {margin: 0rem 1.25rem; color: #a6cd9b !important;}
.nav-link:hover {color: #e3b93f !important;}
.nav-link.active {color: #e3b93f !important;}


/*BANNER*/

.banner {display: flex; justify-content: center; align-items: center; position: relative; background-color: #000000;}
.banner img {z-index: 0;}
/*
.banner img:first-child {z-index:0; display: block;}
.banner img {z-index:0; display: none;}
*/


/*LOGO*/
.home-logo h2 {font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 1rem; color: #ffffff; letter-spacing: 5px;}


/*TAPAS DISCOS*/

.discos-home h2 {font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 1.25rem; margin-top: 1rem; margin-bottom: 0rem; color: #757474;}
.discos-home p {font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 0.85rem; color: #757474;}
.discos-home a {text-decoration: none;}
.discos-home a:hover img {box-shadow: 0px 0px 17px 5px #515151; transition: 0.5s; transform: scale(1.05);}
.discos-home a:hover h2 {color: #e3b93f !important;}


/*REDES SOCIALES*/

.redes-pie p {font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 1.125rem; margin-top: 1rem; margin-bottom: 1rem; color: #43a726;}
.redes-pie p span {font-size: 1.75rem; font-weight: 800; letter-spacing: 1px;}
.redes-pie a {color: grey; font-size: 2.5rem; margin: 0rem 0.75rem;}
.redes-pie a:hover {color: #e3b93f;}
.fa-youtube {position: relative; font-size: 2.8rem; top: 0.15rem;}


/* Footer */

.footer {position: relative; bottom: 0; width: 100%; padding-top: 3rem; padding-bottom: 4rem; text-align: center; background-color: #232323;}
.footer p {font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 0.85rem; color: #aeaeae; margin-bottom: 0.20rem; letter-spacing: 2px;}
.footer a {color: #43a726; text-decoration: none; font-size: 1rem;}
.footer a:hover {color: #e3b93f; text-decoration: underline;}
.footer .creditos {margin-top: 0.85rem; text-align: center;}
.footer .creditos p {font-size: 0.75rem; color: #aeaeae; margin-top: 0.3rem; letter-spacing: 1px;} 
.footer .creditos img:last-child {display: none;}
.footer .creditos:hover img:last-child {display: unset;}
.footer .creditos:hover img:first-child {display: none;}


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

.body-secciones {background-color: #000000; background-image: url('../img-secciones/fondo-secciones.webp'); background-repeat: no-repeat; background-attachment: fixed;
  background-size: cover; background-position: top center;}
.barra-secciones .navbar {height: 10rem; padding: 0rem 9rem; background-color: unset !important; background-image: url('../img-secciones/fondo-barra.webp'); background-repeat: no-repeat; background-size: cover; background-position: center bottom; }
.barra-secciones img {width: 16rem; height: auto; margin-bottom: 2.5rem;}
.barra-secciones .navbar-nav {margin-bottom: 1.8rem;}
.barra-secciones .nav-item {font-size: 0.9rem; letter-spacing: 1px;}
.barra-secciones .nav-link {margin: 0rem 0.25rem; text-shadow: 3px 3px 4px #000000, 0px 0px 6px #000000;}
.barra-secciones a:hover {text-shadow: 0px 0px 15px #000000 !important;}

@keyframes tit {
  0%    {letter-spacing: 13px;}
  100%  {letter-spacing: 2px;}
}




/* BIOGRAFÍA ----------------------*/
/* BIOGRAFÍA ----------------------*/
/* BIOGRAFÍA ----------------------*/

.bio h1 {font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 2.75rem; margin: 10rem 0rem 2rem; color: #e3b93f; line-height: 70%; animation: tit 5s; animation-fill-mode: forwards;}
.bio h1 span {font-weight: 500; font-size: 1.5rem; letter-spacing: 1px;}
.bio h2 {font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 1.5rem; color: #e3b93f;}
.bio h3 {font-family: "Roboto", sans-serif; font-weight: 700; font-size: 1.25rem; color: #43a726;}

.bio p {font-family: "Roboto", sans-serif; font-weight: 400; color: #ababab; font-size: 1rem;}
.bio p a {color: #858383;}
.bio p a:hover {color: #e3b93f;}
.bio p:nth-child(2) {font-size: 1.35rem; line-height: 130%; color: #c1c1c1; padding: 0rem 6rem}



/* DISCOGRAFÍA ----------------------*/
/* DISCOGRAFÍA ----------------------*/
/* DISCOGRAFÍA ----------------------*/

.disco-tit h1 {font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 2.75rem; margin: 10rem 0rem 2rem; color: #e3b93f; line-height: 70%; animation: tit 5s; animation-fill-mode: forwards;}
.disco-tit h1 span {font-weight: 500; font-size: 1.5rem; letter-spacing: 1px;}

.discos h3 {font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 0.125rem; color: #bdbcbc; padding-left: 2rem;}
.discos h5 {font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 1.75rem; color: #e3b93f; position: absolute; display: none; text-align: center; line-height: 100%;}
.discos h5 span {font-size: 1.4rem;}
.discos p {font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 0.85rem; color: #717171; padding-left: 2rem; margin-bottom: 0.5rem;}
.discos ul {font-family: "Roboto", sans-serif; font-weight: 400; color: #858585; font-size: 1rem; list-style-type: none; margin-top: 1rem;}
.discos ul span {font-weight: 700; color: #0d6b0f;}
.discos img {border: 1px solid #4b4b4b;}
.discos a {text-decoration: none;}
.discos a div {background-color: #000000;}
.discos a:hover div {transform: scale(1.05);}
.discos a:hover img {transition: 0s; opacity: 0.25; box-shadow: 0px 0px 10px 0px #757575;}
.discos a:hover h5 {display: block; z-index: 10; animation: spoty 0.5s; animation-fill-mode: forwards;}
.discos a:hover h3 {color: #e3b93f;}

@keyframes spoty {
  0%    {transform: scale(1);}
  100%  {transform: scale(1.1) translate(0px, -2px);}
}

.discos .mp3 a {display: flex; justify-content: start; flex-direction: row; margin-left: 1.8rem; margin-top: 0.5rem;}
.discos .mp3 img:first-child {border: none; display: block; margin-top: 0.1rem;}
.discos .mp3 img {border: none; display: none; margin-top: 0.1rem;}
.discos .mp3 p {font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 1rem; color: #858585; line-height: 120%; padding-left: 0.60rem; transition: 0s;}
.discos .mp3 a:hover img:first-child {display: none;}
.discos .mp3 a:hover img {display: block; opacity: 1; box-shadow: unset;}
.discos .mp3 a:hover img {animation: mp3-ico 0.75s;}
.discos .mp3 a:hover p {color: #e3b93f; transition: 0s;}

.discos .mp3.offline img {opacity: 0.4 !important;}
.discos .mp3.offline p {color: #444444;}
.discos .mp3.offline a:hover {cursor: default;}
.discos .mp3.offline a:hover img:first-child {display: block !important; opacity: 0.4 !important;}
.discos .mp3.offline a:hover img {display: none !important; animation: unset;}
.discos .mp3.offline a:hover p {color: #444444;}

@keyframes mp3-ico {
  0%    {transform: scale(1);}
  50%  {transform: scale(1.25) rotate(-10deg);}
  100%  {transform: scale(1);}
}

.discos.singles h2 {font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 2rem; letter-spacing: 2px; margin: 3rem 0rem 1rem; color: #e3b93f; line-height: 70%;}
.discos.singles h3 {font-size: 1rem; margin-top: 0.75rem; padding-left: 0rem; text-align: center;}
.discos.singles p {padding-left: 0rem; text-align: center;}
.discos.singles div div div a div {background-color: #000000;}
.discos.singles h5 {font-size: 1.5rem;}
.discos.singles h5 span {font-size: 1.1rem;}

.spot h4 {font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 0.75rem; margin-top: 1rem; color: #bdbcbc; line-height: 240%;}
.spot a:hover img {opacity: 0.4;}

.discos.singles .solista h2 {font-size: 1.5rem !important; margin-top: 5.5rem; line-height: 120%; letter-spacing: 1px;}
/*.discos.singles .solista img {width: 19rem;}*/



/* FOTOS ----------------------*/
/* FOTOS ----------------------*/
/* FOTOS ----------------------*/

.fotos-tit h1 {font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 2.75rem; margin: 10rem 0rem 2rem; color: #e3b93f; line-height: 70%; animation: tit 5s; animation-fill-mode: forwards;}
.fotos-tit h1 span {font-weight: 500; font-size: 1.5rem; letter-spacing: 1px;}
.fotos-tit h2 {font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 2rem; letter-spacing: 2px; margin: 3rem 0rem 1rem; color: #e3b93f; line-height: 70%;}

#galeria {display: flex; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; margin-bottom: 2.5rem;}

.contenedor-img {overflow: hidden; position: relative; cursor: pointer; flex: 32%; max-width: 32%; margin: 5px 5px;}
.contenedor-img .mascara,.contenedor-img .contenido {position: absolute; overflow: hidden; top: 0; left: 0;}

.efecto .mascara {background-color: rgb(67 167 38 / 50%); width: 700px; padding: 60px; height: 700px; opacity: 1; transform: translate(300px, 200px) rotate(45deg); transition: all 0.3s ease-in-out;}
.efecto:hover .mascara {opacity:1; transform: translate(-96px, -120px) rotate(45deg);}



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

.videos-tit h1 {font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 2.75rem; margin: 10rem 0rem 2rem; color: #e3b93f; line-height: 70%; animation: tit 5s; animation-fill-mode: forwards;}
.videos-tit h1 span {font-weight: 500; font-size: 1.5rem; letter-spacing: 1px;}
.videos-tit h2 {font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 2rem; letter-spacing: 2px; margin: 3rem 0rem 1rem; color: #e3b93f; line-height: 70%;}



/* CONTACTO ----------------------*/
/* CONTACTO ----------------------*/
/* CONTACTO ----------------------*/

.contacto-tit h1 {font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 2.75rem; margin: 10rem 0rem 2rem; color: #e3b93f; line-height: 70%; animation: tit 5s; animation-fill-mode: forwards;}
.contacto-tit h1 span {font-weight: 500; font-size: 1.5rem; letter-spacing: 1px;}
.contacto-tit h2 {font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 2rem; letter-spacing: 2px; margin: 3rem 0rem 1rem; color: #e3b93f; line-height: 70%;}


.form-tit {font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 1rem; margin-top: 1.5rem; margin-bottom: 0.2rem; color: #e3b93f;}
.form-control {color: #0a8e03 !important; background-color: #343333 !important; box-shadow: 2px 3px 7px 1px rgb(0 0 0 / 45%); border-color: #404040 !important; border-radius: unset !important;}
.btn-primary {color: #ffffff !important; background-color: #266115 !important; border-color: #215312 !important; margin-top: 1.5rem; box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);}
.btn-primary:hover {color: #000000 !important; background-color: #e3b93f !important; border-color: #816922 !important;}

.contenedor-data div p {font-family: "Roboto", sans-serif; font-size: 1.125rem; color: #c1c1c1; margin-top: 1.5rem;}
.contenedor-data div a {font-size: 1.25rem; color: #a5a5a5;}
.contenedor-data div a:hover {color: #e3b93f; text-decoration: none;}

.gracias {font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 2rem; line-height: 130%; margin-top: 13rem; margin-bottom: 0.9rem; color: #e3b93f; text-align: center;}
.gracias a {color: #e3b93f;}
.gracias.error {color: #ff0000;}
.gracias.error a {color: #ff0000;}

















/* 2560  ------------------------------------------------------- */
@media (max-width: 2560px){


}













/* 1920  ------------------------------------------------------- */
@media (max-width: 1920px){




.barra-secciones .navbar {height: 13rem; padding: 0rem 19rem;}
.barra-secciones img {width: 19rem; margin-bottom: 3.25rem;}
.barra-secciones .nav-item {font-size: 1.1rem;}

.bio h1 {margin: 13rem 0rem 2rem;}
.disco-tit h1 {margin: 13rem 0rem 2rem;}
.fotos-tit h1 {margin: 13rem 0rem 2rem;}
.videos-tit h1 {margin: 13rem 0rem 2rem;}
.contacto-tit h1 {margin: 13rem 0rem 2rem;}

.gracias {margin-top: 15rem;}

}







/* 1366  ------------------------------------------------------- */
@media (max-width: 1366px){

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

.barra-secciones .navbar {height: 10rem; padding: 0rem 9rem;}
barra-secciones img {width: 16rem; margin-bottom: 2.5rem;}
.barra-secciones .nav-item {font-size: 0.9rem;}

.bio h1 {margin: 10rem 0rem 2rem;}
.disco-tit h1 {margin: 10rem 0rem 2rem;}
.fotos-tit h1 {margin: 10rem 0rem 2rem;}
.videos-tit h1 {margin: 10rem 0rem 2rem;}
.contacto-tit h1 {margin: 10rem 0rem 2rem;}


}






/* 1180  ------------------------------------------------------- */
@media (max-width: 1180px){

.barra-secciones .navbar {height: 10rem; padding: 0rem 4rem;}

}








/* IPAD PRO  --------------------------------------------------- */
@media (max-width: 1024px){

.barra-secciones .navbar {height: 10rem; padding: 0rem 4rem;}
.barra-secciones .nav-link {margin: 0rem 0.125rem;}



}







/* SURFACE PRO 7 --------------------------------------------------- */
@media (max-width: 912px){

barra-secciones img {width: 12rem; margin-bottom: 2.5rem;}

.barra-home .nav-item {font-size: 1rem !important;}
.barra-home .nav-link {margin: 0rem 0.5rem;}


}




/* ASUS ZENBOOK FOLD  --------------------------------------------------- */
@media (max-width: 853px){

.barra-secciones .navbar {height: 10rem; padding: 0rem 1rem;}
.barra-secciones img {width: 13rem; margin-bottom: 2.5rem;}

.discos h3 {padding-left: 0rem;}
.discos p {padding-left: 0rem;}
.discos .mp3 a {margin-left: 0rem;}
.discos ul {padding-left: 0rem;}

.contenedor-img {max-width: unset;}

.discos h3 {font-size: 1.3rem;}

}




/* IPAD PRO  --------------------------------------------------- */
@media (max-width: 820px){

.barra-secciones .navbar {height: 10rem; padding: 0rem 2rem;}
.barra-secciones img {width: 13rem; margin-bottom: 2.5rem;}
.barra-secciones .nav-item {font-size: 0.75rem !important;}





}






/* IPAD  ------------------------------------------------------- */
@media (max-width: 768px){

.barra-secciones .nav-link {margin: 0rem 0rem;}




}








/* CELULARES --------------------------------------------------- */
@media (max-width: 500px){


/* NAV SECCIONES*/
.barra-secciones .navbar {padding: 2rem 1rem !important;}
.barra-secciones .navbar .navbar-toggler {background-color: #102302 !important; border-radius: 1.8rem !important; border: solid 2px #12550a !important; height: 3.6rem; width: 3.6rem; box-shadow: 2px 2px 10px 1px black; margin-bottom: 2.8rem;}
.barra-secciones .navbar .navbar-toggler:hover {background-color: #336b0b !important; border: solid 2px #336b0b !important;}
.barra-secciones .navbar .navbar-toggler.collapsed {background-color: #102302 !important; border: solid 2px #12550a !important;}
.barra-secciones img {width: 17rem;}
.barra-secciones .navbar-brand {padding: 0rem !important;}
.barra-secciones .navbar-collapse {z-index: -100000 !important;}
.barra-secciones .navbar-collapse {position: absolute !important; top: 0rem; right: 0rem; background-color: #000000d9; padding: 7.75rem 2rem 1.75rem 25rem;}
.barra-secciones .nav-link {padding-bottom: 0rem !important;}
.barra-secciones .nav-item {margin-bottom: 0.5rem; font-size: 1rem !important;}


/* BANNER */
.banner div {padding: 0rem 1.5rem; margin-top: 8rem;}
/*
.banner img:first-child {display: none;}
.banner img {display: block;}
*/

/* FOOTER */
.footer p {letter-spacing: 1px !important;}


/* HOME */

.home-logo img {display: none; padding: 0 1.25rem;}
.home-logo h2 {display: none;}

.barra-home .navbar {position: fixed !important; top: 0rem; right: 0rem; background-color: unset !important; justify-content: flex-end !important;}
.barra-home .navbar .navbar-toggler {background-color: #102302 !important; border-radius: 2rem !important; border: solid 2px #12550a !important; height: 4rem; width: 4rem; box-shadow: 2px 2px 10px 1px black; margin: 0.7rem 2rem 0rem 0rem;}
.barra-home .navbar .navbar-toggler:hover {background-color: #336b0b !important; border: solid 2px #336b0b !important;}
.barra-home .navbar .navbar-toggler.collapsed {background-color: #102302 !important; border: solid 2px #12550a !important;}
.barra-home .navbar-collapse {z-index: -100000 !important;}
.barra-home .navbar-collapse {position: absolute !important; top: 0rem; right: 0rem; background-color: #000000d9; padding: 7rem 1.25rem 1.75rem 25rem;}

/* DISCOGRAFIA */

.discos h3 {font-size: 1.65rem;}
.discos p {font-size: 1rem;}
.discos ul {font-size: 1.2rem; color: #adacac;}
.discos.singles h3 {font-size: 1.5rem;}


/* BIOGRAFÍA */

.bio p {font-size: 1.1rem;}
.bio p:nth-child(2) {padding: 0rem 1rem}


/* FOTOS */

.contenedor-img {flex: 100%; max-width: 100%;}



}