// Counters

.counter {
	text-align: center;
	display: block;
	position: relative;
	padding: 80px 40px;
	background: $white;
  border-radius: $curved;
  box-shadow: $shadow;
	@include transition(all 0.4s ease-in-out);
	margin-bottom: 30px;
	&:hover {
		box-shadow: $shadow-hover;
		@include transition(all 0.4s ease-in-out);
	}
	.timer {
		line-height: 3rem;
		font-size: 2.5rem;
		font-family: $heading-family;
		font-weight: 900;
	}
	.timer-title {
		font-weight: $bold;
	  display: block;
	  line-height: 20px;
	  margin: 10px 0 0 0;
	}
	&.counter-primary {
		.timer {
			color: $primary;
		}
	}
	&.counter-secondary {
		.timer {
			color: $secondary;
		}
	}
	&.counter-dark {
		.timer {
			color: $heading-color;
		}
	}
	&.counter-gradient {
		.timer {
			background: $gradient;
		  -webkit-background-clip: text;
		  -webkit-text-fill-color: transparent;
		}
	}
	&.counter-style-1 {
		padding: 40px;
		border: none;
	  border-radius: 0;
	  box-shadow: none;
		background: none;
		&:hover {
			box-shadow: none;
		}
	}
	&.counter-style-2 {
		background: $gradient;
		color: $white;
		.timer-title {
			color: $white;
		}
	}
	&.counter-style-3 {
		border-radius: 0;
	  box-shadow: none;
		&:hover {
			box-shadow: none;
		}
	}
	&.counter-style-4 {
		border-radius: 0;
	  box-shadow: none;
		background: $gradient;
		color: $white;
		&:hover {
			box-shadow: none;
		}
		.timer-title {
			color: $white;
		}
	}
}
