/*
*
* Counter
*/
.counter-classic {
	position: relative;
	overflow: hidden;
	text-align: center;
	max-width: 270px;
	padding: 40px 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 1;
}

.counter-classic::before, .counter-classic::after {
	position: absolute;
	content: '';
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	transition: all .3s ease;
	pointer-events: none;
}

.counter-classic::before {
	opacity: 1;
	visibility: visible;
	transform: none;
	background: linear-gradient(to bottom, #667079 0%, rgba(67, 77, 85, 0) 100%);
}

.counter-classic::after {
	opacity: 0;
	visibility: hidden;
	transform: scaleX(0.3);
	background: linear-gradient(to bottom, #808992 0%, rgba(67, 77, 85, 0) 100%);
}

.counter-classic-number {
	font-weight: 900;
	letter-spacing: .05em;
}

.counter-classic-number > * {
	display: inline-block;
}

.counter-classic-title {
	letter-spacing: .05em;
	text-transform: lowercase;
	color: rgba(255, 255, 255, 0.3);
}

.counter-classic-decor {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 53px;
	height: 5px;
	font-size: 0;
	line-height: 0;
	background: #eeaf5e;
	transform: translateX(-50%);
	transition: all .4s ease;
}

* + .counter-classic-title {
	margin-top: 8px;
}

@media (min-width: 768px) {
	.counter-classic {
		padding: 60px 0;
	}
}

@media (min-width: 992px) {
	.counter-classic {
		padding: 83px 0;
	}
}

@media (min-width: 992px) {
	.desktop .counter-classic:hover::before {
		opacity: 0;
		visibility: hidden;
		transform: scaleX(0);
	}
	.desktop .counter-classic:hover::after {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.desktop .counter-classic:hover .counter-classic-decor {
		bottom: 62px;
		transform: translateX(-50%) rotate(180deg);
	}
}

.counter-modern-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: -30px;
	margin-left: -30px;
}

.counter-modern-wrap:empty {
	margin-bottom: 0;
	margin-left: 0;
}

.counter-modern-wrap > * {
	display: inline-block;
	margin-top: 0;
	margin-bottom: 30px;
	margin-left: 30px;
}

.counter-modern-wrap .counter-modern {
	min-width: 120px;
}

.counter-modern {
	text-align: center;
}

.counter-modern-number {
	letter-spacing: 0;
}

.counter-modern-title {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.counter-modern-decor {
	margin-left: auto;
	margin-right: auto;
	width: 26px;
	height: 4px;
	font-size: 0;
	line-height: 0;
	background: #eeaf5e;
}

* + .counter-modern-decor {
	margin-top: 6px;
}

* + .counter-modern-title {
	margin-top: 12px;
}

* + .counter-modern-wrap {
	margin-top: 35px;
}

.counter-creative {
	text-align: center;
	padding: 30px 10px;
}

.counter-creative-number {
	font-weight: 900;
	letter-spacing: .05em;
}

.counter-creative-title {
	text-transform: none;
	letter-spacing: .05em;
}

* + .counter-creative-title {
	margin-top: 6px;
}

@media (min-width: 768px) {
	.counter-creative {
		padding-top: 44px;
		padding-bottom: 44px;
	}
}

.context-dark .counter-creative-title, .bg-gray-dark .counter-creative-title, .bg-primary .counter-creative-title {
	color: rgba(255, 255, 255, 0.3);
}

.counter-aria {
	position: relative;
	text-align: center;
	z-index: 1;
}

.counter-aria-number {
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.7);
	text-shadow: 5px 9px 7px rgba(0, 0, 0, 0.14);
	transition: all .3s ease;
	will-change: transform;
}

.counter-aria-title {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
}

.counter-aria-decor {
	position: absolute;
	bottom: 15%;
	left: 50%;
	width: 100px;
	transform: translate3d(-50%, 0, 0);
	z-index: -1;
}

* + .counter-aria-title {
	margin-top: 40px;
}

* + .counter-aria-decor {
	margin-top: 0;
}

@media (min-width: 576px) {
	.counter-aria-title {
		letter-spacing: .2em;
	}
}

@media (min-width: 768px) {
	.counter-aria-title {
		font-size: 16px;
		letter-spacing: .3em;
	}
	.counter-aria-decor {
		width: 120px;
		bottom: 12%;
	}
}

@media (min-width: 992px) {
	.counter-aria-decor {
		width: auto;
		bottom: 0;
	}
}

@media (min-width: 1200px) {
	.counter-aria-decor {
		bottom: 4%;
	}
	* + .counter-aria-title {
		margin-top: 55px;
	}
}

@media (min-width: 992px) {
	.desktop .counter-aria:hover .counter-aria-number {
		transform: translate3d(0, -15px, 0);
	}
}

.box-ordered {
	counter-reset: div;
}

.box-ordered .box-ordered-item::before {
	content: counter(div, decimal-leading-zero);
	counter-increment: div;
}