@media only screen and (max-width: 1420px) {

    .blog .blog-posts .posts-item {
        width: 610px;
        height: 160px;
    }

    .blog .blog-posts .posts-item .item-image {
        width: 160px;
        height: 160px;
    }

    .blog .blog-posts .posts-item .item-content {
        width: 450px;
        height: 160px;
    }

    .blog .blog-posts .posts-item .item-content .content-text {
        max-height: 140px;
        position: relative;
    }

    .blog .blog-posts .posts-item .item-content .content-text:after {
        content: '';
        display: block;
        width: 200px;
        height: 20px;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
        position: absolute;
        bottom: 0; right: 0;
    }



    .blog .blog-post {
        width: 900px;
    }

    .blog .blog-post .post-image {
        width: 900px;
        height: 270px;
    }

}



@media only screen and (max-width: 1320px) {

    .blog .blog-posts .posts-item {
        width: 560px;
    }

    .blog .blog-posts .posts-item .item-content {
        width: 400px;
    }



    .blog .blog-post {
        width: 800px;
    }

    .blog .blog-post .post-image {
        width: 800px;
        height: 240px;
    }

}



@media only screen and (max-width: 1220px) {

    .blog .blog-posts .posts-item {
        width: 510px;
    }

    .blog .blog-posts .posts-item .item-content {
        width: 350px;
    }



    .blog .blog-post {
        width: 700px;
    }

    .blog .blog-post .post-image {
        width: 700px;
        height: 210px;
    }

}



@media only screen and (max-width: 1120px) {

    .blog .blog-posts .posts-item {
        width: 460px;
    }

    .blog .blog-posts .posts-item .item-content {
        width: 300px;
    }



    .blog .blog-post {
        width: 600px;
    }

    .blog .blog-post .post-image {
        width: 600px;
        height: 180px;
    }

}



@media only screen and (max-width: 1020px) {

    .blog .blog-posts .posts-item {
        width: calc(50% - 10px);
        height: 140px;
        margin: 0 0 10px;
    }

    .blog .blog-posts .posts-item:nth-child(odd) {
        margin-right: 20px;
    }

    .blog .blog-posts .posts-item .item-image {
        width: 140px;
        height: 140px;
    }

    .blog .blog-posts .posts-item .item-content {
        width: calc(100% - 140px);
        padding: 10px 0 10px 10px;
    }

    .blog .blog-posts .posts-item .item-content .content-text {
        max-height: 120px;
    }

    .blog .blog-posts .posts-item .item-content .content-text h3 {
        margin: 0;
    }

    .blog .blog-posts .posts-item .item-content .content-text h3 a {
        font-size: 16px;
        line-height: 20px;
    }



    .blog .blog-post {
        width: 100%;
        margin: 0 0 20px;
        float: none;
    }

    .blog .blog-post .post-image {
        width: 100%;
        height: auto;
        margin: 0 0 20px;
    }

    .blog .blog-post .post-title {
        margin: 0 0 20px;
    }

    .blog .blog-post .post-title h1 {
        font-size: 20px;
        line-height: 22px;
    }

    .blog .blog-post .post-content {
        margin: 0 0 20px;
    }

    .blog .blog-post .post-content h2 {
        margin: 0 0 10px;
        font-size: 18px;
        line-height: 20px;
    }
    
    .blog .blog-post .post-content h3 {
        font-size: 16px;
        line-height: 20px;
    }
    
    .blog .blog-post .post-content p {
        font-size: 16px;
        line-height: 18px;
    }



    .blog .blog-latest {
        width: 100%;
        margin: 0;
        float: none;
        overflow: hidden;
    }

    .blog .blog-latest .latest-title {
        margin: 0 0 20px;
        font-size: 20px;
        line-height: 22px;
    }

    .blog .blog-latest .latest-post {
        width: 50%;
        transition: none;
        float: left;
    }

    .blog .blog-latest .latest-post .post-content {
        width: calc(100% - 80px);
        padding: 0 10px 0 20px;
        overflow: hidden;
    }

    .blog .blog-latest .latest-divider {
        display: none;
    }

}



@media only screen and (max-width: 820px) {

    .blog .blog-posts .posts-item {
        height: 100px;
    }

    .blog .blog-posts .posts-item .item-image {
        width: 100px;
        height: 100px;
    }

    .blog .blog-posts .posts-item .item-content {
        width: calc(100% - 100px);
    }

    .blog .blog-posts .posts-item .item-content .content-text {
        max-height: 80px;
    }

}



@media only screen and (max-width: 620px) {

    .blog .blog-posts .posts-item {
        width: 100%;
    }

    .blog .blog-posts .posts-item:nth-child(odd) {
        margin-right: 0;
    }



    .blog .blog-latest .latest-post {
        width: 100%;
        float: none;
    }

}