.blogpreview {

}
    .blogpreview a {
        color: #6CBBC7;
    }
    .blogpreview a:hover {
        color: #ADAFB0;
        text-decoration: none;
    }
    .blogsocial a {
        color: #ADAFB0;
        transition: all 0.5s ease;
    }
.blogdate {
    position: absolute;
    background: rgba(35,82,124,.8);
    top: 10px;
    left: 16px;
    width: 50px;
    text-align: center;
    padding: 5px;
    color: #FFF;
    display: none;
}
    .blogdate i {
        display: none;
    }
.blogimg {
    height: 250px;
}

.blogcategory, .blogreadtime {
    font-size: 12px;
    color: #ADAFB0;
    margin-bottom: 0;
    display: block;
}
.blogreadtime {
    margin-bottom: 10px;
}
.blogtitle h2 {
    font-size: 17px;
    margin: 10px 0 5px 0;
    font-weight: bold;
}
    .blogtitle h2:before {
        display: none;
    }
    .blogtitle h2 a {
        color: #333;
    }
.blogcontent {
    padding: 10px 0 0 0;
    height: auto;
    overflow: hidden;
}


.blogtext {
    height: 100px;
    overflow: hidden;
    position: relative;

}
    .blogpreview .blurrytext {
        position: absolute;
        bottom: 0;
        height: 150px;
        width: 100%;
        background: -webkit-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100% );
        background-image: -moz-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100% );
        background-image: -o-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100% );
        background-image: linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100% );
        background-image: -ms-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100% );
    }
.blogreadmore {
    position: absolute;
    bottom: 10px;
    right: 25px;   
}
    .blogreadmore i {
        color: #6CBBC7;
    }
.blogsummary {
    font-size: 18px;
}    

/* Blog detail */
.blogdetail {
    height: auto;
}
    .blogdetail .blogpost {
        width: 100%;
    }
    .blogdetail .blogimg {
        width: 100%;
        float: none;
/*        height: 400px; */
        border: 0;
        margin-bottom: 30px;
    }
        .blogdetail .blogimg img {
            width: 100%;
/*            height: 400px; */
        }
    .blogdetail .blogcontent {
        width: 100%;
        height: auto;
        float: none;
        border: 0;
        padding: 0;
        background-color: transparent;
    }
    .blogdetail .blogtext {
        height: auto;
        margin-top: 30px;
    }
    .blogdetail .blogdate {
        position: relative;
        background: 0;
        width: auto;
        text-align: left;
        padding: 0;
        color: #ADAFB0;
        left: auto;
        top: auto;
        margin-bottom: 20px;
        font-size: 14px;
        float: none;
        display: block;
    }
        .blogdetail .blogdate i {
            display: inline-block;
        }
    .blogdetail .blogcategory, .blogdetail .blogreadtime {
        font-size: 16px;
        margin-left: 0;
        display: block;
        float: none;
    }
    .blogdetail .blogtitle h2 {
        font-size: 30px;
        margin: 30px 0;
        font-weight: 500;
    }
        .blogdetail .blogtitle h2:before {
            display: inherit;
        }
    .blogdetail .blogimg {
        height: auto;
    }
.commentstart {
    color: #ADAFB0;
}

.bloginfo {
    padding-top: 8px;
    text-align: right;
}


/* Ellipsis */
.truncate-overflow {
  --lh: 2rem;
  line-height: var(--lh);
}

.truncate-overflow p {
  --max-lines: 4;
  position: relative;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  padding-right: 1rem; /* space for ellipsis */
}
.truncate-overflow p::before {
  position: absolute;
  content: "...";
  /* tempting... but shows when lines == content */
  /* top: calc(var(--lh) * (var(--max-lines) - 1)); */
  
  /*
  inset-block-end: 0;
  inset-inline-end: 0;
  */
  bottom: 0;
  right: 0;
}
.truncate-overflow p::after {
  content: "";
  position: absolute;
  /*
  inset-inline-end: 0;
  */
  right: 0;
  /* missing bottom on purpose*/
  width: 1rem;
  height: 1rem;
  background: white;
}


/* End ellipsis */


/* Normal menu */
@media (min-width: 768px) {
    /* Display first post different */
    .blog .blogpreview:nth-child(1) {
        width: 100%;
        height: 400px;
        margin-bottom: 80px;
    }
        .blog .blogpreview:nth-child(1) .blogimg {
            width: 70%;
            float: left;
            height: 100%;
            border: 0;
        }
            .blog .blogpreview:nth-child(1) .blogimg img {
                -o-object-fit: cover;
                object-fit: cover;
                height: 100%;
                object-position: bottom right;
            }
        .blog .blogpreview:nth-child(1) .blogcontent {
            width: 30%;
            height: 100%;
            float: left;
            border: 0;
            padding: 40px;
            background-color: #F8F8F8;
        }
        .blog .blogpreview:nth-child(1) .blogtext {
            height: 155px;
        }
        .blog .blogpreview:nth-child(1) .blurrytext {
            height: 140px;
            background: -webkit-linear-gradient( rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 1) 100% );
            background-image: -moz-linear-gradient( rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 1) 100% );
            background-image: -o-linear-gradient( rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 1) 100% );
            background-image: linear-gradient( rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 1) 100% );
            background-image: -ms-linear-gradient( rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 1) 100% );
        }
        .blog .blogpreview:nth-child(1) .blogreadmore {
            position: absolute;
            bottom: 30px;
            right: 45px;
        }
        .blog .blogpreview:nth-child(1) .blogdate {
            position: relative;
            background: 0;
            width: auto;
            text-align: left;
            padding: 0;
            color: #ADAFB0;
            left: auto;
            top: auto;
            margin-bottom: 20px;
            font-size: 16px;
        }
            .blog .blogpreview:nth-child(1) .blogdate i {
                display: inline-block;
            }
    .blogcontent {
        height: 220px;
    }
    .archief {
        column-count: 4;
    }
}