/* ------------------------------ */
/* --------- Pagination --------- */
/* ------------------------------ */

.section__pagination {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-11) !important;
    text-align: center;
}

.pagination_container {
    display: inline-block;
    margin: 0 auto;
}

.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -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;
}

.pagination a, .pagination span {
    position: relative;
    display: inline-block;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    background-color: var(--brand-grey);
    border-radius: 50%;
}

.pagination a {
    -webkit-transition: background-color var(--transition-2);
    -o-transition: background-color var(--transition-2);
    transition: background-color var(--transition-2);
}

.pagination span, .no-touchevents .pagination a:hover {
    background-color: var(--brand-yellow);
}



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

@media all and (min-width: 1400px) {

    .pagination {
        margin: calc(-1 * var(--spacing-1));
    }

    .pagination span, .pagination a {
        width: 37px;
        height: 37px;
        line-height: 37px;
        margin: var(--spacing-1);
    }

}


@media all and (max-width: 1399.98px) {


    .pagination span, .pagination a {
        width: 36px;
        height: 36px;
        line-height: 36px;
    }

}


@media all and (max-width: 1399.98px) and (min-width: 768px) {

    .pagination {
        margin: -8px;
    }

    .pagination span, .pagination a {
        margin: 8px;
    }

}


@media all and (max-width: 767.98px) {

    .pagination {
        margin: -6px;
    }

    .pagination span, .pagination a {
        margin: 6px;
    }

}