#blog-post {
}

#blog-post > div.container {
    max-width:660px;
}

#blog-post > div.container > img {
    display:block;
    width:100%;
}

#blog-post > div.container > div.text {
    background-color:rgba(0,0,0,0.2);
    padding:16px 25px 60px 25px;
}

#blog-post > div.container > div.text > span {
    display:block;
    margin-bottom:-2px;
    font-size:12px;
    font-family:Asap, inherit;
}

#blog-post > div.container > div.text > h2 {
    margin:0;
    margin-bottom:18px;
    /*text-transform:uppercase;*/
    font-size:24px;
    font-weight:300;
}

#blog-post > div.container > div.text > p {
    margin:0;
    text-align:justify;
    font-size:12px;
    font-family:Asap, inherit;
}

#blog-post > div.container > section {
    padding:18px 36px;
}

#blog-post > div.container > section > h3 {
    margin:0;
    margin-bottom:18px;
    text-transform:uppercase;
    font-size:18px;
    font-weight:300;
}

#blog-post > div.container > section.related {
    background-color:rgba(255,255,255,0.4);
}

#blog-post > div.container > section.related > div.list > article {
    float:left;
    width:23%;
    margin-right:2.6%;
}

#blog-post > div.container > section.related > div.list > article:nth-child(4n) {
    margin-right:0;
}

#blog-post > div.container > section.related > div.list > article > a {
    color:inherit;
    text-decoration:none;
    display:block;
}

#blog-post > div.container > section.related > div.list > article > a > div.image {
    position:relative;
    width:100%;
    max-height:78px;
    overflow:hidden;
}

#blog-post > div.container > section.related > div.list > article > a > div.image > div.square {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    box-sizing:border-box;
    border:0 solid #A31916;
    transition-property:all;
}

#blog-post > div.container > section.related > div.list > article > a:hover > div.image > div.square {
    border:4px solid #A31916;
}

#blog-post > div.container > section.related > div.list > article > a > div.image > img {
    display:block;
    width:100%;
}

#blog-post > div.container > section.related > div.list > article > a > h4 {
    text-transform:uppercase;
    font-weight:300;
    font-size:12px;
    font-family:Asap,inherit;
}

#blog-post > div.container > section.comments {
    background-color:rgba(0,0,0,0.2);
}




@media (max-width:660px) {
    
    #blog-post > div.container > section.related > div.list > article {
        float:left;
        width:32%;
        margin-right:2%;
    }

    #blog-post > div.container > section.related > div.list > article:nth-child(4n) {
        margin-right:2%;
    }

    #blog-post > div.container > section.related > div.list > article:nth-child(3n) {
        margin-right:0;
    }
    
}




@media (max-width:560px) {
    
    #blog-post > div.container > div.text {
        padding-left:5px;
        padding-right:5px;
    }

    #blog-post > div.container > section.related > div.list > article {
        float:left;
        width:45%;
        margin-right:5%;
    }

    #blog-post > div.container > section.related > div.list > article:nth-child(4n) {
        margin-right:5%;
    }

    #blog-post > div.container > section.related > div.list > article:nth-child(3n) {
        margin-right:5%;
    }

    #blog-post > div.container > section.related > div.list > article:nth-child(2n) {
        margin-right:0;
    }
    
}