body{ /* quitar margenes a body */
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    color: #515151;
}

a{
    color: #515151;
}

header{
    background: #253A46;
    height: 50px;
    padding: 0 10px; /* arribaabbajo costados puede ser padding left or right*/
    display: flex; /* The flex property sets the flexible length on flexible items. los coloca uno a lado del otro */
    justify-content: space-between;
    align-items: center; /* alinear items verticalmente*/
    /* height: 50px;  alto de header */
}

.header-right{/* para que el dive pueda heredar */
    height: inherit;
    display: flex;
    align-items: center;
}

.header-right .buttom{
    margin-left: 10px;
}

.buttom{
    background:gray;
    /* border-bottom: 5px solid black; */
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .3);
    font-size: 14px;
    padding: 5px 10px 10px;/* arib costados abajo*/
    border-radius: 5px;
    text-decoration: none;
    color: white;
    transition: 0.2s;
} 

.buttom:active{
    transform: scale(.9);
}

.buttom.red{
    background: #ff4842;
}

nav{
    height: inherit; /* para heredar alto de header */
}

nav ul{ /* los ul que estan drentro de nav */
    margin: 0;
    display: flex;
    height: inherit;
}

nav li{/* a los LI  */
    list-style: none;
    /* margin: 0 10px; */ /* arribaabajo costados */
    color: white;
    height: inherit;
    display: flex;
    align-items: center;
}

nav li:after{ /* colocar el pad al menu de navegacion */
    content: "|";
   /*  margin: 0 10px; */ /* colorcar los pad centrados  */
}

nav li:last-child:after{
    display: none;
}

nav a:hover{
    /* border-top: 5px solid red; */ /* pero modifica el tamaño */
    /* box-shadow: donde se ubica la sombra x y difuminado color; */
    box-shadow: inset 0 5px 0 red !important; /*esto no modifica porque no parte del modelo de caja IMPORTANT para que se coloque encima del verde*/
}

nav a.is-active{
    box-shadow: inset 0 5px 0 #7dcd40;
}

nav a{ /* las letras de nav */
    color: white;
    text-decoration: none;
    height: inherit;
    display: flex; 
    align-items: center;
    padding: 0 10px;

}

h1{ /* para quitar margen que tiene por defector h1 */
    margin: 0;
    font-weight: 600;
    margin-bottom: 15px;
}

.portada{
    /* border: 5px solid red; */
    position: relative; /* para poder usar las psiciones */
    margin-bottom: 20px;
}

.portada .description{
    background: rgba(220, 220, 221, 0.8);
    position: absolute; /* it's positioned relative to its first positioned(no static) ancestor element */
    bottom: 30px; /* para lococar en la parte inferior */
    left: 20px; /* lado */
    padding: 20px;
}

.cont-blog{ /* contenedor de portada */
    width: 1000px;
    margin: auto;
}

.blog-items{ /* contenedor de items */
    display: flex;
    flex-wrap: wrap;
    /*justify-content: space-around;  margen distribuido a los lados */
    justify-content: space-between; /* igual pero entre ellos y no a los lados */
}

.blog-items h3{
    font-weight: 600;
    margin: 10px 0 15px;
}

.item-blog{ /* contenedor de cada item */
    width: 300px;

}

.item-blog .description{
    margin-bottom: 15px;
}

.paginador{ /* para centrar */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.paginador ul{ /* para hacer flex el ul */
    display: flex;
    list-style: none;
    margin: 0; /* quitar margen de circulitos */
    padding: 0;
    margin-left: 10px;
}

.paginador li{
    background: #eaeaea;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    border: 1px solid gray;
    margin: 0 5px;
}

.paginador li.selected{
    border-color: transparent;
    background: white;
}

.paginador a{
    text-decoration: none;
}

.autor{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    border-top: 1px solid gray;
    padding-top: 15px;
}

.autor img{
    border-radius: 50%;
    vertical-align: middle; 
    margin-right: 5px;

}

.autor p{
    margin: 0;
}