/* ------------------------------ */
/* ------------ Blog ------------ */
/* ------------------------------ */
.section + .section--blog {
    padding-top: 3rem;
}

.section__text + .section__blog_more, .section__title + .section__posts {
    padding-top: 0;
}

.section > .section__blog_more + .section__button {
    padding-top: 3rem;
}

.posts {
    border-bottom: 3px solid var(--brand-background-color-transparent);
}

.post {
    border-top: 3px solid var(--brand-background-color-transparent);
}

.post__container {
    position: relative;
    padding: 1.5rem 1.5rem 1.2rem;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.no-touchevents .post:hover .post__container {
    background-color: var(--brand-background-color-transparent);
}

.post .date {
    display: block;
    font-size: 16px;
    color: var(--brand-color);
    opacity: .5;
}

.post h3 {
    margin-top: 0;
}

.post p {
    margin-bottom: 0;
}

.post .button {
    margin-top: .5rem;
}


/* Pagenavi */
.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.pagination span, .pagination a {
    color: var(--brand-color);
    padding: 10px;
    margin: 0 .4rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.pagination a {
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.pagination span.current, .no-touchevents .pagination a:hover {
    opacity: .6;
}

.pagination a.next, .pagination a.prev {
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
    top: -1px;
    background-color: var(--brand-background-color-transparent);
    text-indent: -30000px;
}

.macos .pagination a.next, .macos .pagination a.prev, .ios .pagination a.next, .ios .pagination a.prev {
    top: 1px;
}

.no-touchevents .pagination a.next:hover, .no-touchevents .pagination a.prev:hover {
    background-color: var(--brand-color);
    color: var(--brand-white);
    opacity: 1;
}


/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

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

    .section + .section--blog {
        padding-top: 2rem;
    }

}


@media (max-width: 767.98px) {  

    .post__container {
        padding: 20px 15px;
    }

    .touchevents .post__container {
        padding-bottom: 25px;
    }

}


@media (max-width: 413.98px) {  

    .section > .section__posts {
        padding-left: 0;
        padding-right: 0;
    }

}