@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hammersmith+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');




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



/*
 * Base structure
 */

html,
body {
  
  background-image: url("../img-index/fondo.jpg");
  background-color: #0d0000;
  background-position: top;
  background-repeat: no-repeat;
  justify-content: center;
  background-size: cover;
}

.alinear-vertical {
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-direction: column;
}



/*
 * LOGO
 */

.contenedor-logo {text-align: center; }

.logo { width: 500px;
  margin-top: 2rem; margin-bottom: 1rem; padding: 1rem; padding: 1rem;}


/*
 * TAPA
 */

.available {font-family: 'Roboto Condensed', sans-serif; color: #c0c0c0; font-size: 1rem; text-shadow: 0px 0px 10px #2b0509; letter-spacing: 15px;}
.fecha {font-family: 'Noto Serif', serif; color: #fff1ca; font-size: 2rem; text-shadow: 2px 2px 10px #2b0509; letter-spacing: 8px; margin-top: -20px}
.streaming {font-family: 'Noto Serif', serif; color: #c0c0c0; font-size: 1rem; text-shadow: 2px 2px 10px #2b0509; letter-spacing: 5px; margin-top: -20px}

.contenedor-cover {text-align: center; }

.cover { width: 450px;
  box-shadow: 0 0px 20px rgba(1, 1, 1, 1);
  margin-top:25px;
  margin-bottom:25px; }

.band-members {margin-top: 20px; margin-bottom: -15px; font-family: 'Noto Serif', serif; 
        color: #dbb675; 
        font-size: 1.5rem; 
        text-shadow: 2px 2px 5px #080400; 
        letter-spacing: 2px;
        line-height: 1.2rem;}


.band-instruments {margin-top: 0px; font-family: 'Roboto Condensed', sans-serif;
        color: #dddddd; 
        font-size: 1rem; 
        text-shadow: 1px 1px 3px #2b0509; 
        letter-spacing: 2px;
        line-height: 1.2rem;}


.mastering {font-family: 'Noto Serif', serif; color: #c0c0c0; font-size: 1rem; text-shadow: 2px 2px 10px #2b0509; letter-spacing: 5px; margin-top: 20px}

.cover-small { width: 250px;
  box-shadow: 0 0px 20px rgba(101, 41, 1, 1); margin-top:10px; margin-bottom:30px; }

.mastering {font-family: 'Noto Serif', serif; color: #c0c0c0; font-size: 1rem; text-shadow: 2px 2px 10px #2b0509; letter-spacing: 3px; margin-top: 30px}

.previous {font-family: 'Roboto Condensed', sans-serif; color: #cccccc; font-size: 1rem; text-shadow: 2px 2px 10px #2b0509; letter-spacing: 10px; margin-top: 50px}
.title-small {font-family: 'Noto Serif', serif; color: #cccccc; font-size: 1.3rem; text-shadow: 2px 2px 10px #2b0509; letter-spacing: 3px; margin-top: -15px}


/*
 * CONTACTOS
 */

.mail {font-family: 'Roboto Condensed', sans-serif; color: #a5a5a5; font-size: 1.2rem; margin-top: 2rem;}
.mail a:link {color: #a5a5a5;}
.mail a:hover {color: #d8d8d8;}

.redes-pie {color: #ffffff !important; font-size: 1.8rem; margin: 0.6rem;}

.redes-icono-youtube-pie {margin-bottom: 0.35rem;}
.redes-icono-deezer-pie {margin-bottom: 0.40rem;}
.redes-icono-tidal-pie {margin-bottom: 0.35rem;}



/*
 * CRÉDITOS
 */

.creditos {
  font-size: 0.6rem;
  color: #a2a2a2;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.creditos a {color: #c0c0c0 !important;}
.creditos a:link {color: #ffffff !important;}
.creditos a:hover {color: red;}






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


@media (max-width: 1366px) and (min-width: 1200){

body {height: auto;}

.d-flex {display: block !important;}


.logo {width: 65%; margin-top: 0.5rem;}
.cover {width: 55%;}

.creditos {margin-top: 0rem; }

.mail { font-size: 1rem; margin-top: 1.5rem;}

}


/*
------- max-width: 1024px ------
*/



@media (max-width: 1024px) and (min-height: 1360px) {

body {height: auto;}

.d-flex {display: flex!important;}

.alinear-vertical {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.creditos {
  font-size: 0.6rem;
  color: #6E6E6E;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mail {font-size: 1.3rem;}

.logo {width: 80%}
.cover {width: 80%}

}





/*
------- para Ipad Pro 1366 x 1024 ------
*/

@media (max-width: 1366px) and (min-height: 900px) and (max-height: 1024px) {

body { background-size: unset; height: auto;}

.d-flex {display: flex!important;}

.logo {width: 70%}
.cover {width: 55%}



}











/*
------- para Ipad 1024 x 768 ------
*/

@media (max-width: 1024px) and (max-height: 768px) {



.d-flex {display: block!important;}

.logo {width: 40%}
.cover {width: 35%}


}


/*
------- max-width: 640px ------
*/


@media (max-width: 640px) {

.band {letter-spacing: 0px;}

.fecha {font-family: 'Noto Serif', serif; color: #fff1ca; font-size: 1.5rem; text-shadow: 2px 2px 10px #2b0509; letter-spacing: 5px; margin-top: -20px}

.alinear-vertical {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.logo {margin-top: 2rem; padding: 1.9rem 2rem 0rem; width: 85%;}
.cover {margin-top: 2rem; width: 85%;}

.mail {  font-size: 1.2rem;
  margin-top: 0.5rem;}

.mastering {padding-right: 4rem; padding-left: 4rem;}

}


/*
------- max-width: 414px ------
*/


@media (max-width: 414px) {

body {background-repeat: no-repeat; background-size: unset;}

.out {margin-top: 1rem; margin-bottom: 0rem;
}


.alinear-vertical {
  display: flex;
  justify-content: center;
  align-content: center;
}

.logo {padding: 0 0.5rem;}

.mail {
  font-size: 1.2rem;
  margin-top: 1rem;
}

.fa-facebook {
  margin: 0; 
}

.fa-instagram {
  margin: 0rem; 
}

}


/*
------- max-height: 415px -------
*/

@media (max-height: 415px) {

.d-flex {display: block !important;}

body {
  height: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

}