/*--------------------------------------------------------------
# Counter
--------------------------------------------------------------*/
.pxl-counterslide {
	display: -moz-inline-box;
	-moz-box-orient: vertical;
	display: inline-flex;
	vertical-align: middle;
	*vertical-align: auto;
	position: relative;
	.pxl-counterslide-inside {
		display: inline-flex;
	}
	.pxl-counterslide-digit-spacer {
		visibility: hidden;
	}
	.pxl-counterslide-digit, .pxl-counterslide-digit-spacer {
		display: -moz-inline-box;
		-moz-box-orient: vertical;
		display: inline-flex;
		vertical-align: middle;
		*vertical-align: auto;
		position: relative;
	}
	.pxl-counterslide-digit-inner {
		position: absolute;
		top: 0;
		left: -5px;
		right: 0;
		bottom: 0;
		overflow: hidden;
	}
	.pxl-counterslide-ribbon {
		display: block;
	}
	.pxl-counterslide-ribbon-inner {
		display: block;
		-webkit-backface-visibility: hidden;
	}
	.pxl-counterslide-value {
		display: block;
		-webkit-transform: translateZ(0);
		text-align: center;
	}
	.pxl-counterslide-value.pxl-counterslide-last-value {
		position: absolute;
	}
	&.pxl-counterslide-animating-up .pxl-counterslide-ribbon-inner {
		-webkit-transition: -webkit-transform 2s;
		-moz-transition: -moz-transform 2s;
		-ms-transition: -ms-transform 2s;
		-o-transition: -o-transform 2s;
		transition: transform 2s;
	}
	&.pxl-counterslide-animating-up.pxl-counterslide-animating .pxl-counterslide-ribbon-inner {
		-webkit-transform: translateY(-100%);
		-moz-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		-o-transform: translateY(-100%);
		transform: translateY(-100%);
	}
	&.pxl-counterslide-animating-down .pxl-counterslide-ribbon-inner {
		-webkit-transform: translateY(-100%);
		-moz-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		-o-transform: translateY(-100%);
		transform: translateY(-100%);
	}
	&.pxl-counterslide-animating-down.pxl-counterslide-animating .pxl-counterslide-ribbon-inner {
		-webkit-transition: -webkit-transform 2s;
		-moz-transition: -moz-transform 2s;
		-ms-transition: -ms-transform 2s;
		-o-transition: -o-transform 2s;
		transition: transform 2s;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);
	}
}

.pxl-counter1 {
	position: relative;
	text-align: center;
	display: inline-block;
	@media #{$max-sm} {
		width: 100%;
		text-align: left;
	}
	.pxl--item-inner {
		position: relative;
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 30px;
		@media #{$max-sm} {
			width: 100%;
			justify-content: flex-start;
		}
	}
	.pxl--counter-number {
		position: relative;	
		&.effect-slide {
			display: inline-flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 10px;
		}
	}
	.pxl--item-title {
		display: flex;
		flex-basis: min-content;
		text-align: left;		
		font-size: 16px;
		line-height: 1.625;
		font-weight: 600;
		margin-bottom: 0;
		color: $primary_color;
	}
	.pxl--counter-prefix, .pxl--counter-value, .pxl--counter-suffix {
		display: inline-block;
		font-size: 60px;
		font-weight: 500;
		line-height: 1.1;
		color: $primary_color;
		@media #{$max-md} {
			font-size: 48px;	
		}
		@media #{$max-sm} {
			font-size: 40px;
		}
	}
	&.style3 {
		.pxl--counter-number {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background-color: $secondary_color;
			border-radius: 50%;
			width: 74px;
			height: 74px;
			span {
				font-weight: 600;
				color: $fourth_color;
				font-size: 30px;				
			}
		}
		.pxl--item-title {
			font-size: 24px;
			font-weight: 600;
			flex-basis: auto;
			color: $fourth_color;
		}
	}
	&.style1 {
		.pxl--item-inner {
			&:hover {
				&:before {
					width: 100%;
				}
			}
			&:after {
				content: '';
				position: absolute;
				left: 0;
				bottom: -23px;
				width: 100%;
				height: 1px;
				background-color: #9d9d9d;
			}
			&:before {
				content: '';
				position: absolute;
				left: 0;
				bottom: -24px;
				width: 21px;
				@include transition( 0.3s linear);
				height: 3px;
				background-color: $secondary_color;
				z-index: 1;
			}
		}
	}
}

.pxl-counter2 {
	position: relative;
	text-align: center;
	display: inline-block;
	background-color: #1e1e1e;
	padding: 35px 63px 28px 47px;
	.pxl--item-inner {
		position: relative;
		display: inline-flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
	}
	.pxl--counter-number {
		position: relative;	
	}
	.pxl--item-title {
		display: flex;
		flex-basis: min-content;
		text-align: left;		
		font-size: 18px;
		line-height: 1.7777;
		font-weight: 600;
		margin-bottom: 0;
		color: $fourth_color;
	}
	.pxl--counter-prefix, .pxl--counter-value, .pxl--counter-suffix {
		display: inline-block;
		font-size: 50px;
		font-weight: 600;
		line-height: 1;
		color: $fourth_color;
		@media #{$max-md} {
			font-size: 48px;
		}
		@media #{$max-sm} {
			font-size: 40px;
		}
	}
}

.pxl-counter3 {
	position: relative;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: $secondary_color;
	border-radius: 50%;
	width: 170px;
	height: 170px;
	animation: rotate1 1.5s linear infinite alternate-reverse;
	.pxl--item-inner {
		position: relative;
		display: inline-flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
	.pxl--counter-number {
		position: relative;	
	}
	.pxl--item-title {
		display: flex;	
		font-size: 18px;
		line-height: 1.75;
		font-weight: 600;
		margin-bottom: 0;
		color: $fourth_color;
	}
	.pxl--counter-prefix, .pxl--counter-value, .pxl--counter-suffix {
		display: inline-block;
		font-size: 60px;
		font-weight: 600;
		line-height: 1;
		color: $fourth_color;
		@media #{$max-md} {
			font-size: 48px;
		}
		@media #{$max-sm} {
			font-size: 40px;
		}
	}
}