@charset "UTF-8";
body{
    font-family: Light, Fallback, helvetica;
    font-size: 2.9vh;
    text-align: center;
}
h1{
    width: 70vw;
    margin: 0 auto;
    font-size: 3em;
    font-family: Menu,Fallback, helvetica;
    padding: .1em;
    box-sizing: border-box;
    letter-spacing: .1em;
    margin-top: 10vh;
    color: black;
}
#main{
    width: 80vw;
    color: white;
    background:rgba(0,0,0,.5);
    margin-top: 25vh;
    letter-spacing: .2em;
}
h2{
    font-size: 1.7em;
    text-align: center;
    font-family: Titulo,Fallback, helvetica;
}
p{text-align: justify; line-height: 1.3;}
#bienvenido{
    width: 100vw;
    height: 70vh;
    margin: 0 auto;
    background: url('/img/bg/blog.jpg') no-repeat fixed;
    background-size: cover;
}
#intro{
    width: 80vw;
    color: white;
    margin: 0 auto;
    padding: 1em;
    box-sizing: border-box;
    background:rgba(0,0,0,.5);
}
#posts{
    width: 90vw;
    margin: 0 auto;
    padding: .5em;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;
}
.item{width: 30%;padding: 0; margin: 1em 0;}
.item img{ width: 100%;}
.item p{padding: 0 .5em;line-height: 1}
article{
    margin: 0 auto;
    padding: 1em 3em;
    box-sizing: border-box;
    background: rgba(190,190,190,1);
    width: 80vw;
}
article img{ width: 55vw; }
article li{
    text-align: justify;
    margin-bottom: 1em; 
}
article ul, article ol {padding: 0 3em;line-height: 1.3;}
.fecha,.cats{
    padding: 0 2em;
    text-align: right;
    line-height: .5em;
}
.boton{
    text-decoration: none;
    color: white;
    background: black;
    padding: .5em;
    transition: 400ms;
    user-select: none;
}
.boton:hover{
    background: #b31219;
}
#navegador{
    width: 100%;
    margin: 0 auto;
}
/* iPhone */
@media all and (max-width:800px) {
    body{font-size: 3.5vh;}
    #bienvenido{
        background-size: auto 100vh;
        background-position: 55% 0;
        background-repeat: no-repeat;
        height: 85vh;
    }
    #main{margin-top: 10vh}
    h1{
        letter-spacing: .1em;
        font-size: 1.5em;
    }
    h2{
        font-size: 1.5em;
        text-align: left;
        padding: 0 .5em;
    }
    #posts{width: 95vw;}
    .item{width: 100%;margin: 2vh 0;}
    article ul, article ol {padding: 0 1.5em;}

    article{
        margin: 0 auto;
        padding: 1em .5em;
        box-sizing: border-box;
        width: 90vw;
    }
    .fecha{line-height: 1;}
}