.paginaton-wrapper {
	display: flex;
	justify-content: center;
}
.pagination {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pagination ul {
	display: flex;
	flex-direction: row;
}
.pagination > li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-left: 6px;
}
@media (min-width: 768px) {
	.pagination > li {
		width: 38px;
		height: 38px;
	}
}
@media (min-width: 992px) {
	.pagination > li {
		width: 42px;
		height: 42px;
	}
}
.pagination a {
	text-decoration: none;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pagination > li > a {
	border-radius: 50% !important;
	transition: 0.6s;
}
.pagination > li > a:hover {
	color: var(--light-color) !important;
}
.pagination > .active > a,
.pagination > .active > span, 
.pagination > .active > a:hover, 
.pagination > .active > span:hover, 
.pagination > .active > a:focus, 
.pagination > .active > span:focus {
	color: var(--main-color) !important;
	border: 1px solid var(--main-color) !important;
	border-radius: 50% !important;
}
.pagination > li > a,
.pagination > li > span {
	color: var(--dark-color) !important;
	border: none !important;
	background-color: transparent !important;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
	background-color: transparent !important;
	border-color: transparent !important;
	cursor: not-allowed;
}