@import url("slideshow.css");
@import url("header.css");
@import url("banner.css");
@import url("footer.css");
@import url("biografia.css");
@import url("modal.css");
@import url("guitarras.css");
@import url("contacto.css");
@import url("imagenes.css");

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

body{
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}

img{
    display: block;
    max-width: 100%;
}

.contenedor{
    padding: 16px 16px 32px;
}

h3.titular{
    font-size: 33px;
    text-align: center;
    color: #000;
    padding: 56px 16px 35px;  
    letter-spacing: 1px;
    font-weight: 100;
    text-transform: uppercase;
}

h3.subtitular{
    font-size: 20px;
    color: #000;
    font-weight: 300;
    margin-bottom: 16px;
    letter-spacing: 1px;
}

.parrafo{
    font-size: 14px;
    margin-bottom: 16px;
    letter-spacing: 2px;
    color: #848484;
    line-height: 27px;
}

/*---------------------Estilos de detalles---------------------*/
.seccion__titulo{
    border-bottom: 1px solid #800000;
}

/*---------------------Estilos responsive---------------------*/
/*Phone*/
@media (min-width: 500px){
    .contenedor{
        padding: 32px 32px 40px;
    }
}

/*Wide Tablet*/
@media (min-width: 768px){
    .info__titulo{
        font-size: 16px;
        margin: 5px 0;
    }
}

/*Desktop*/
@media (min-width: 1024px){
    .banner .contenedor{
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 100%;
        color: #fff;
        text-align: center;
        background-color: transparent;
    }
    
    h3.titular{
        font-size: 42px;
    }
    
    h3.subtitular{
        font-size: 28px;
    }
    
    .parrafo{
        font-size: 15px;
    }
    
    .seccion__titulo{
        font-size: 36px;
    }
    
    .contenedor{
        margin: auto;
        width: 94%;
        padding-bottom: 50px;
    }
    
    .banner__titulo{
        font-size: 42px;
        margin: 5px 0;
    }
    
    .info__titulo{
        font-size: 16px;
        margin: 5px 0;
    }
    
    .boton__ingles{
        padding: 32px;
    }
}

/*Wide Desktop*/
@media (min-width: 1500px){
    .contenedor{
        display: flex;
        flex-flow: row wrap;
        max-width: 1350px;
        justify-content: center;
    }
}