.pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 3vw 0 3vw;
    margin-left: 1.5vw;
}

.pagination {
    margin-top: 5vw;
}

.pagination span,
.pagination a {
    position: relative;
    color: #4A4A4A;
    font-size: 24px;
    line-height: 1.66;
    display: flex;
    width: 3.2vw;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 400;
}

.pagination span::after,
.pagination a::after {
    position: absolute;
    content: "";
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 1px;
    background-color: #B11D23;
    opacity: 0;
    transition: all 0.4s;
}

.pagination li:hover a,
.pagination li.active span {
    color: #B11D23;
}

.pagination li:hover a::after,
.pagination li.active span::after {
    opacity: 1;
}

.pagination a.prev::after,
.pagination a.next::after,
.pagination a.disable::after {
    content: none;
}

.pagination a.prev,
.pagination span.prev {
    margin-right: 2.5vw;
    width: 40px;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDQyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjY0NjQ0NiAzLjY0NjQ1QzAuNDUxMTgzIDMuODQxNzEgMC40NTExODMgNC4xNTgyOSAwLjY0NjQ0NiA0LjM1MzU1TDMuODI4NDMgNy41MzU1M0M0LjAyMzY5IDcuNzMwOCA0LjM0MDI3IDcuNzMwOCA0LjUzNTUzIDcuNTM1NTNDNC43MzA4IDcuMzQwMjcgNC43MzA4IDcuMDIzNjkgNC41MzU1MyA2LjgyODQzTDEuNzA3MTEgNEw0LjUzNTUzIDEuMTcxNTdDNC43MzA4IDAuOTc2MzExIDQuNzMwOCAwLjY1OTcyOCA0LjUzNTUzIDAuNDY0NDY2QzQuMzQwMjcgMC4yNjkyMDQgNC4wMjM2OSAwLjI2OTIwNCAzLjgyODQzIDAuNDY0NDY2TDAuNjQ2NDQ2IDMuNjQ2NDVaTTQyIDMuNUwxIDMuNVY0LjVMNDIgNC41VjMuNVoiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuNSIvPgo8L3N2Zz4K) no-repeat center center;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDQyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjY0NjQ0NiAzLjY0NjQ1QzAuNDUxMTgzIDMuODQxNzEgMC40NTExODMgNC4xNTgyOSAwLjY0NjQ0NiA0LjM1MzU1TDMuODI4NDMgNy41MzU1M0M0LjAyMzY5IDcuNzMwOCA0LjM0MDI3IDcuNzMwOCA0LjUzNTUzIDcuNTM1NTNDNC43MzA4IDcuMzQwMjcgNC43MzA4IDcuMDIzNjkgNC41MzU1MyA2LjgyODQzTDEuNzA3MTEgNEw0LjUzNTUzIDEuMTcxNTdDNC43MzA4IDAuOTc2MzExIDQuNzMwOCAwLjY1OTcyOCA0LjUzNTUzIDAuNDY0NDY2QzQuMzQwMjcgMC4yNjkyMDQgNC4wMjM2OSAwLjI2OTIwNCAzLjgyODQzIDAuNDY0NDY2TDAuNjQ2NDQ2IDMuNjQ2NDVaTTQyIDMuNUwxIDMuNVY0LjVMNDIgNC41VjMuNVoiIGZpbGw9IiNCMTFEMjMiLz4KPC9zdmc+Cg==);
    background-size: 100% auto;
}

.pagination a.prev.disable,
.pagination span.prev.disable {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDQyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjY0NjQ0NiAzLjY0NjQ1QzAuNDUxMTgzIDMuODQxNzEgMC40NTExODMgNC4xNTgyOSAwLjY0NjQ0NiA0LjM1MzU1TDMuODI4NDMgNy41MzU1M0M0LjAyMzY5IDcuNzMwOCA0LjM0MDI3IDcuNzMwOCA0LjUzNTUzIDcuNTM1NTNDNC43MzA4IDcuMzQwMjcgNC43MzA4IDcuMDIzNjkgNC41MzU1MyA2LjgyODQzTDEuNzA3MTEgNEw0LjUzNTUzIDEuMTcxNTdDNC43MzA4IDAuOTc2MzExIDQuNzMwOCAwLjY1OTcyOCA0LjUzNTUzIDAuNDY0NDY2QzQuMzQwMjcgMC4yNjkyMDQgNC4wMjM2OSAwLjI2OTIwNCAzLjgyODQzIDAuNDY0NDY2TDAuNjQ2NDQ2IDMuNjQ2NDVaTTQyIDMuNUwxIDMuNVY0LjVMNDIgNC41VjMuNVoiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuNSIvPgo8L3N2Zz4K);
}

.pagination a.next,
.pagination span.next {
    margin-left: 2.5vw;
    width: 40px;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDQyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik00MS4zNTM2IDMuNjQ2NDVDNDEuNTQ4OCAzLjg0MTcxIDQxLjU0ODggNC4xNTgyOSA0MS4zNTM2IDQuMzUzNTVMMzguMTcxNiA3LjUzNTUzQzM3Ljk3NjMgNy43MzA4IDM3LjY1OTcgNy43MzA4IDM3LjQ2NDUgNy41MzU1M0MzNy4yNjkyIDcuMzQwMjcgMzcuMjY5MiA3LjAyMzY5IDM3LjQ2NDUgNi44Mjg0M0w0MC4yOTI5IDRMMzcuNDY0NSAxLjE3MTU3QzM3LjI2OTIgMC45NzYzMTEgMzcuMjY5MiAwLjY1OTcyOCAzNy40NjQ1IDAuNDY0NDY2QzM3LjY1OTcgMC4yNjkyMDQgMzcuOTc2MyAwLjI2OTIwNCAzOC4xNzE2IDAuNDY0NDY2TDQxLjM1MzYgMy42NDY0NVpNMCAzLjVMNDEgMy41VjQuNUwwIDQuNUwwIDMuNVoiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuNSIvPgo8L3N2Zz4K) no-repeat center center;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDQyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik00MS4zNTM2IDMuNjQ2NDVDNDEuNTQ4OCAzLjg0MTcxIDQxLjU0ODggNC4xNTgyOSA0MS4zNTM2IDQuMzUzNTVMMzguMTcxNiA3LjUzNTUzQzM3Ljk3NjMgNy43MzA4IDM3LjY1OTcgNy43MzA4IDM3LjQ2NDUgNy41MzU1M0MzNy4yNjkyIDcuMzQwMjcgMzcuMjY5MiA3LjAyMzY5IDM3LjQ2NDUgNi44Mjg0M0w0MC4yOTI5IDRMMzcuNDY0NSAxLjE3MTU3QzM3LjI2OTIgMC45NzYzMTEgMzcuMjY5MiAwLjY1OTcyOCAzNy40NjQ1IDAuNDY0NDY2QzM3LjY1OTcgMC4yNjkyMDQgMzcuOTc2MyAwLjI2OTIwNCAzOC4xNzE2IDAuNDY0NDY2TDQxLjM1MzYgMy42NDY0NVpNMCAzLjVMNDEgMy41VjQuNUwwIDQuNUwwIDMuNVoiIGZpbGw9IiNCMTFEMjMiLz4KPC9zdmc+Cg==);
    background-size: 100% auto;
}

.pagination a.next.disable,
.pagination span.next.disable {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDQyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik00MS4zNTM2IDMuNjQ2NDVDNDEuNTQ4OCAzLjg0MTcxIDQxLjU0ODggNC4xNTgyOSA0MS4zNTM2IDQuMzUzNTVMMzguMTcxNiA3LjUzNTUzQzM3Ljk3NjMgNy43MzA4IDM3LjY1OTcgNy43MzA4IDM3LjQ2NDUgNy41MzU1M0MzNy4yNjkyIDcuMzQwMjcgMzcuMjY5MiA3LjAyMzY5IDM3LjQ2NDUgNi44Mjg0M0w0MC4yOTI5IDRMMzcuNDY0NSAxLjE3MTU3QzM3LjI2OTIgMC45NzYzMTEgMzcuMjY5MiAwLjY1OTcyOCAzNy40NjQ1IDAuNDY0NDY2QzM3LjY1OTcgMC4yNjkyMDQgMzcuOTc2MyAwLjI2OTIwNCAzOC4xNzE2IDAuNDY0NDY2TDQxLjM1MzYgMy42NDY0NVpNMCAzLjVMNDEgMy41VjQuNUwwIDQuNUwwIDMuNVoiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuNSIvPgo8L3N2Zz4K);
}

.pagination a.disable,
.pagination a.span {
    cursor: default;
}

@media only screen and (max-width: 1440px) {
    .pagination span,
    .pagination a {
        font-size: 20px;
    }
    .pagination span.next,
    .pagination a.next,
    .pagination span.prev,
    .pagination a.prev {
        width: 34px;
    }
}

@media only screen and (max-width: 1024px) and (orientation: portrait),only screen and (max-width: 768px) {
    .pagination {
        margin-left: 0;
        margin: 20px 0 40px;
    }
    .pagination span,
    .pagination a {
        font-size: 14px;
        width: auto;
        padding: 3px 5px;
    }
    .pagination span.next,
    .pagination a.next {
        width: 16px;
    }
    .pagination span.prev,
    .pagination a.prev {
        width: 16px;
    }
}