.ct-counter-layout1 {
	.ct-counter-icon {
		margin-right: 10px;
		line-height: 1;
		i {
			color: $primary_color;
			font-size: 34px;
			&.flaticon-team {
				font-size: 38px;
			}
		}
	}
	.ct-counter-number {
		line-height: 1;
		font-size: 40px;
		color: #000;
		@include font-family-heading($heading_default_font);
		display: inline-flex;
		@media #{$max-lg} {
			font-size: 32px;
		}
	}
	.ct-counter-title {
		font-size: 18px;
		@media #{$max-lg} {
			font-size: 16px;
		}
	}
	.ct-counter-meta {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		margin-bottom: 4px;
	}
}
.ct-section-counter1:before {
	content: '';
	height: 17px;
	background-color: #cacfd6;
	position: absolute;
	bottom: -17px;
	left: 32px;
	right: 32px;
}
.ct-counter-layout2 {
	.ct-counter-icon {
		padding: 28px 15px 60px 24px;
		margin-right: 15px;
		line-height: 1;
		width: 120px;
		overflow: hidden;
		z-index: 1;
		position: relative;
		@media #{ $max-lg } {
			width: 80px;
			padding-left: 18px;
		}
		&:before, &:after {
			content: "";
			display: block;
			position: absolute;
			bottom: 0;
			width: 120%;
			height: 120%;
			bottom: 0;
			@include border-radius( 0 75px 120px 0 );
		}
		&:before {
			right: 0;
			z-index: -2;
			background-color: rgba($primary_color, 0.15);	
		}
		&:after {
			z-index: -1;
			background-color: $primary_color;
			right: 10px;
		}
		i, img, svg {
			@include transition(all 300ms linear 100ms);
		}
		i {
			color: #fff;
			font-size: 60px;
			&.flaticon-team {
				font-size: 60px;
			}
			@media #{ $max-lg } {
				font-size: 40px;
			}
		}
		img {
			max-height: 60px;
			width: auto;
			@media #{ $max-lg } {
				max-height: 40px;
			}
		}
	}
	.ct-counter-number {
		margin-bottom: 3px;
		line-height: 1;
		font-size: 48px;
		color: #000;
		@include font-family-heading($heading_default_font);
		display: inline-flex;
		@media #{$max-lg} {
			font-size: 32px;
		}
	}
	.ct-counter-title {
		font-size: 24px;
		color: $third_color;
		@media #{$max-lg} {
			font-size: 18px;
		}
	}
	.ct-counter-meta {
		background-color: #fff;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		margin-bottom: 4px;
		@include box-shadow(0 5px 20px rgba($third_color, 0.19));
		padding-right: 15px;
		&:hover {
			.ct-counter-icon {
				img, i {
					@include animation(flipX 0.2s linear 1);
				}
			}
		}
	}
	.ct-counter-inner {
		position: relative;
		&:before {
			@include transition(all 300ms linear 100ms);
			opacity: 0;
			z-index: -1;
			width: 15px;
			height: 15px;
			background-color: $primary_color;
			border-radius: 15px;
			content: "";
			display: inline-block;
			position: absolute;
			right: 0px;
			top: 0px;
		}
		&:hover {
			&:before {
				top: -8px;
				right: -7px;
				opacity: 1;
			}
		}
	}
	&.prc-bg-custom {
		.ct-counter-inner {
			&:before {
				background-color: #d20137;
			}
			.ct-counter-icon {
				&:before {
					background-color: rgba(#d20237, 0.15);	
				}
				&:after {
					@include background-horizontal(#cc0037, #d20237);
				}
			}
		}
	}
}
.ct-counter-layout3 {
	.ct-counter-icon {
		z-index: 1;
		position: absolute;
		top: 0;
		right: 0;
		.inner-icon	{
		    display: flex;
		    align-items: center;
		    justify-content: center;
			width: 70px;
			height: 70px;
			line-height: 1;
			overflow: hidden;
			position: relative;
		}
		&:before, &:after {
			content: "";
			display: block;
			position: absolute;
			bottom: 0;
			bottom: 0;
			@include border-radius( 50% 0 50% 50%);
		}
		&:before {
			width: 100px;
			height: 100px;
			left: 0;
			z-index: -2;
			background-color: rgba(#00d7a8, 0.15);	
			left: -13px;
			top: -13px;
		}
		&:after {
			width: 80px;
			height: 80px;
			z-index: -1;
			background-color: #00d7a8;
			top: -5px;
			left: -2px;
		}
		i, img, svg {
			@include transition(all 300ms linear 100ms);
		}
		i {
			color: #fff;
			font-size: 34px;
			&.flaticon-team {
				font-size: 34px;
			}
			@media #{ $max-lg } {
				font-size: 34px;
			}
		}
		img {
			max-height: 40px;
			width: auto;
		}
	}
	.ct-counter-number {
		margin-bottom: 10px;
		line-height: 1;
		font-size: 38px;
		color: #000;
		@include font-family-heading($heading_default_font);
		display: inline-flex;
		@media #{$max-lg} {
			font-size: 22px;
		}
	}
	.ct-counter-title {
		font-size: 18px;
		color: $third_color;
		@media #{$max-lg} {
			font-size: 20px;
		}
	}
	.item-readmore {
		position: absolute;
		top: 50%;
		right: 0;
		@include transform(translateY(-50%));
		a {
			width: 35px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			font-weight: 400;
			font-size: 25px;
			color: #fff;
			background-color: #0a69f9;
			display: inline-block;
			@include border-radius(4px);
		}
	}
	.ct-counter-inner {
		background-color: #fff;
		margin-bottom: 4px;
		@include box-shadow(0 5px 20px rgba($third_color, 0.19));
		padding: 30px 65px 35px 25px;
		position: relative;
		overflow: hidden;
		@include border-radius(7px);
		&:hover {
			.ct-counter-icon {
				.inner-icon	{
					@include animation(icon-bounce 0.5s linear 1);
				}
			}
		}
	}
}
.ct-counter-layout4 {
	.ct-counter-icon {
		margin-right: 18px;
		line-height: 1;
		width: 105px;
		height: 105px;
		min-width: 105px;
		max-width: 105px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f4f4f4;
		position: relative;
		overflow: hidden;
		&:before {
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 2;
			display: block;
			content: '';
			width: 0;
			height: 0;
			background: rgba($primary_color,.2);
			@include transform(translate(-50%, -50%));
			opacity: 0;
		}
		img {
			max-height: 53px;
			width: auto;
		}
		i {
			color: $primary_color;
			font-size: 53px;
			&.flaticon-team {
				font-size: 53px;
			}
		}
	}
	.ct-counter-number {
		line-height: 1;
		font-size: 60px;
		color: $secondary_color;
		@include font-family-heading($heading_default_font);
		display: inline-flex;
		@media #{$max-lg} {
			font-size: 32px;
		}
	}
	.ct-counter-title {
		@include font-family-heading($heading_default_font);
		font-size: 20px;
		color: #8799a3;
		text-transform: uppercase;
		@media #{$max-lg} {
			font-size: 16px;
		}
	}
	.ct-counter-inner {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		&:hover {
			.ct-counter-icon {
				&:before {
					-webkit-animation: circle .75s;
					animation: circle .75s;
				}
			}
		}
	}
}

@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}