// Set the variable defaults in case they are missing in the template
$base-title-color: #4d4d4d !default;

// The code base was refactored but we need to keep the markup (.g-features-particle and .g-features2-particle) separated for backward compatibility.

// All Styles
.g-features-particle, .g-features2-particle {
	margin-left: -($content-padding);
	margin-right: -($content-padding);
	.g-grid {
		margin-bottom: ($content-padding + $content-margin)*1.5;
		&:last-child {
			margin-bottom: 0;
			.g-features-particle-item {
				&:last-child {
					@include breakpoint(mobile-only) {
						margin-bottom: 0;
					}
				}
			}
		}
		@include breakpoint(mobile-only) {
			margin-bottom: 0;
		}
	}
	.g-features-particle-item, .g-features2-particle-item {
		@include breakpoint(mobile-only) {
			margin-bottom: ($content-margin + $content-padding)*1.5;
		}
	}
	.size-33 {
		@include flex(0 33.3333%);
		width: 33.3333%;
		@include breakpoint(mobile-only) {
			@include flex(0 100%);
			width: 100%;
		}
	}

	.size-16 {
		@include flex(0 16.6666%);
		width: 16.6666%;
		@include breakpoint(mobile-only) {
			@include flex(0 100%);
			width: 100%;
		}
	}
	.g-content {
		margin: 0;
		padding-top: 0;
		padding-bottom: 0;
	}
	p {
		margin: 0;
	}
	.g-features-particle-button, .g-features-particle-subs {
		margin-top: 20px;
	}
}

// Style 1, 6, 7 and 8
.g-features-particle {
	text-align: center;
	.g-features-particle-title {
		margin-top: 0.75rem;
		margin-bottom: 1rem;
		a {
			color: $base-title-color;
			&:hover {
				color: $accent-color-1;
			}
		}
	}
	.g-features-particle-icon, .g-circle-border {
		border-radius: 50%;
		font-size: 2rem;
		height: 100px;
		width: 100px;
		line-height: 100px;
		text-align: center;
		vertical-align: middle;
		margin-bottom: 0.75rem;
		color: $accent-color-1;
		position: relative;
		display: inline-block;
		@include transition(all 0.2s linear 0s);
	}
	.g-circle-border {
		background: transparent none repeat scroll 0 0;
		border: 1px solid $base-border-color;
		height: 98px;
		width: 98px;
		left: 1px;
		top: 1px;
		z-index: 1;
		position: absolute;
		@include transition-timing-function(cubic-bezier(0.5, -0.7, 0.67, 0.7));
	}
	.g-features-particle-image {
		margin-bottom: 0.75rem;
		display: inline-block;
	}
	.g-features-particle-item {
		.g-content {
			&:hover {
				.g-features-particle-icon {
					color: #ffffff;
					background: $accent-color-1;
				}
				.g-circle-border {
					border-color: $accent-color-1;
					@include transform(scale(1.18));
					@include transition-timing-function(cubic-bezier(0.4, 0.25, 0.14, 1.73));
				}

			}
		}
	}
	&.style6 {
		.g-grid {
			margin-bottom: $content-padding*2;
			.g-block {
				padding: 0 $content-padding;
			}
			&:last-child {
				margin-bottom: 0;
				.g-features-particle-item {
					&:last-child {
						@include breakpoint(mobile-only) {
							margin-bottom: 0;
						}
					}
				}
			}
			@include breakpoint(mobile-only) {
				margin-bottom: 0;
			}
		}
		.g-features-particle-item {
			@include breakpoint(mobile-only) {
				margin-bottom: $content-padding*2;
			}
		}
		.g-content {
			padding: 3rem 2.5rem;
			background: #ffffff;
			border: 1px solid $base-border-color;
		}
		.g-features-particle-icon, .g-features-particle-image {
			margin-bottom: 1.25rem;
		}
		.g-features-particle-title {
			margin-bottom: 1.5rem;
		}
		.g-features-particle-button, .g-features-particle-subs {
			margin-top: 30px;
		}
		.g-subs-item {
			padding: 10px 0;
			border-bottom: 1px solid $base-border-color;
			&:last-child {
				border-bottom: none;
			}
		}
	}
	&.style7 {
		.g-grid {
			margin-bottom: $content-padding*2;
			.g-block {
				padding: 0 $content-padding;
			}
			&:last-child {
				margin-bottom: 0;
				.g-features-particle-item {
					&:last-child {
						@include breakpoint(mobile-only) {
							margin-bottom: 0;
						}
					}
				}
			}
			@include breakpoint(mobile-only) {
				margin-bottom: 0;
			}
		}
		.g-features-particle-item {
			margin-top: 40px;
			@include breakpoint(mobile-only) {
				margin-bottom: $content-padding*2;
			}
		}
		.g-content {
			padding: 25px;
			background: #ffffff;
			border: 1px solid $base-border-color;
			@include transition(all 0.3s);
			&:hover {
				border-color: $accent-color-2;
				.g-features-particle-icon {
					background: $accent-color-2
				}
			}
		}
		.g-features-particle-item-inner {
			margin-top: -64px;
		}
		.g-features-particle-icon, .g-features-particle-image {
			margin-bottom: 1.25rem;
			.g-circle-border {
				display: none;
			}
		}
		.g-features-particle-icon {
			width: 75px;
			height: 75px;
			line-height: 75px;
			border-radius: 0;
			background: $accent-color-1;
			color: #ffffff;
			font-size: 24px;
			@include transition(all 0.3s);
		}
		.g-features-particle-title {
			margin-bottom: 1rem;
			text-transform: uppercase;
		}
		.g-features-particle-button, .g-features-particle-subs {
			margin-top: 30px;
		}
		.g-subs-item {
			padding: 10px 0;
			border-bottom: 1px solid $base-border-color;
			&:last-child {
				border-bottom: none;
			}
		}
	}
	&.style8 {
		margin-left: 0;
		margin-right: 0;
		color: #ffffff;
		text-align: left;
		.g-grid {
			margin-bottom: 0;
			&:last-child {
				.g-features-particle-item {
					box-shadow: -20px 0 20px -20px rgba(0, 0, 0, 0.07) inset;
					@include breakpoint(mobile-only) {
						box-shadow: 0 -20px 20px -20px rgba(0, 0, 0, 0.07) inset;
					}
					&:last-child {
						box-shadow: 0 0 20px -20px rgba(0, 0, 0, 0.07) inset;
					}
				}
			}
		}
		.g-features-particle-item {
			padding: 35px 30px 40px;
			box-shadow: -20px -20px 20px -20px rgba(0, 0, 0, 0.07) inset;
			&:nth-child(1) {
				background: darken($accent-color-1, 8%);
			}
			&:nth-child(2) {
				background: darken($accent-color-1, 4%);
			}
			&:nth-child(3) {
				background: $accent-color-1;
			}
			&:nth-child(4) {
				background: lighten($accent-color-1, 4%);
			}
			&:nth-child(5) {
				background: lighten($accent-color-1, 8%);
			}
			&:nth-child(6) {
				background: lighten($accent-color-1, 12%);
			}
			&:last-child {
				box-shadow: 0 -20px 20px -20px rgba(0, 0, 0, 0.07) inset;
			}
			@include breakpoint(mobile-only) {
				box-shadow: 0 -20px 20px -20px rgba(0, 0, 0, 0.07) inset;
				margin-bottom: 0;
			}
		}
		.g-features-particle-icon, .g-features-particle-image {
			margin-bottom: 10px;
			color: #ffffff;
			border-radius: 0;
			width: auto;
			height: auto;
			line-height: inherit;
			font-size: 40px;

			.g-circle-border {
				display: none;
			}
		}
		.g-features-particle-title {
			color: #ffffff !important;
			font-size: 1.35rem;
			a {
				color: #ffffff;
				&:hover {
					text-decoration: underline;
				}
			}
		}
		.g-features-particle-desc, .g-features-particle-subs {
			opacity: 0.85;
		}
		.g-features-particle-button {
			margin-top: 25px;
			.button {
				background: none;
				border: 2px solid #ffffff;
				color: #ffffff;
				border-radius: 50px;
				@include transition(all 0.2s);
				&:hover {
					background: $base-title-color;
					border-color: $base-title-color;
				}
			}
		}
		&.pull-up {
			margin-top: -7.5rem;
			position: relative;
			z-index: 4;
		}
	}
}

// Style 2, 3, 4 and 5 
.g-features2-particle {
	.g-features2-particle-title {
		margin-top: 0;
		margin-bottom: 1rem;
		a {
			color: $base-title-color;
			&:hover {
				color: $accent-color-1;
			}
		}
	}
	.g-features2-particle-icon {
		margin-right: 20px;
		color: $accent-color-1;
		font-size: 130%;
	}
	.g-features2-particle-image {
		margin-right: 20px;
		display: inline-block;
	}
	&.style3 {
		.g-grid {		
			.g-block {
				padding: 0 1rem;
			}
		}
		.g-content {
			padding-top: 1rem;
			padding-bottom: 1rem;
			background: rgba(0,0,0,0.2);
			&:after {
				content: "";
				width: 0;
				height: 0;
				border-top: 15px solid rgba(0,0,0,0.2);
				border-right: 15px solid transparent;
				position: absolute;
				margin-top: 16px;
				margin-left: -15px;
				z-index: 99;
			}
		}
	}
	&.style4 {
		.g-features2-particle-icon {
			float: left;
			font-size: 55px;
			margin-right: 0;
			color: lighten($base-text-color, 15%);
		}
		.g-features2-particle-image {
			float: left;
			margin: 5px 0 0;
			max-width: 60px;
		}
		.g-title-desc-container {
			margin-left: 75px;
		}
		.g-features2-particle-title {
			margin-bottom: 10px;
		}
		.accent1 {
			.g-features2-particle-icon {
				color: $accent-color-1;
			}
		}
		.accent2 {
			.g-features2-particle-icon {
				color: $accent-color-2;
			}
		}
	}
	&.style5 {
		.g-features2-particle-icon {
			float: left;
			font-size: 24px;
			margin-right: 0;
			color: lighten($base-text-color, 10%);
			width: 60px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			margin-top: 5px;
			border: 1px solid;
			border-radius: 50%;
		}
		.g-features2-particle-image {
			float: left;
			margin: 5px 0 0;
			width: 60px;
			height: 60px;
			img {
				border-radius: 50%;
				width: 60px;
				height: 60px;
			}
		}
		.g-title-desc-container {
			margin-left: 75px;
		}
		.g-features2-particle-title {
			margin-bottom: 10px;
		}
		.accent1 {
			.g-features2-particle-icon {
				color: $accent-color-1;
			}
		}
		.accent2 {
			.g-features2-particle-icon {
				color: $accent-color-2;
			}
		}
	}
}