.subscribe-section {
	background-position: center center;
	background-repeat: no-repeat; 
	background-size: cover;
	background-attachment: fixed;
	padding: 75px 0 75px;
	position: relative;
	.home & {
		padding: 195px 0 75px;
		margin-top: -100px;
	}
	&:before {
		background-color: #101F46;
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		opacity: 0.55;
	}
	.section-heading {
		margin-bottom: 0;
		.title-icon-divider {
			margin-bottom: 30px;
		}
		h4 {
			font-weight: 600;
			color: $light-color;
			margin-bottom: 35px;
			line-height: 1.2;
		}
	}
}

.newsletter-form {
	margin-bottom: 30px;
	position: relative;
	input {
		&[type="email"] {
			background-color: transparent;
			border: 1px solid rgba(255, 255, 255, 0.61);
			color: $light-color;
			width: 100%;
			height: 60px;
			padding: 0 190px 0 20px;
			font-weight: 500;
		}
		&[type="submit"] {
			border: 0;
			line-height: 1.3;
			outline: none;
			z-index: 1;
			padding: 15px 30px;
			position: absolute;
			top: 5px;
			right: 5px;
		}
		&::placeholder { /* Firefox, Chrome, Opera */ 
            color: #94AAB3; 
        } 

        &:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
            color: #94AAB3; 
        } 

        &::-ms-input-placeholder { /* Microsoft Edge */ 
            color: #94AAB3; 
        }
	}
	@include bp(smx) {
		input {
			&[type="email"] {
				padding: 0 20px;
				margin-bottom: 15px;
			}
			&[type="submit"] {
				width: 100%;
				position: static;
			}
		}
	}
}

.subscribe-bg-image {
	.home & {
		padding: 100px 0 75px;
		margin-top: 0;
		margin-bottom: 100px;
		@include bp(smx) {
			padding: 80px 0 40px;
			margin-bottom: 60px;
		}
	}
}

.progress-circle {
	width: 128px;
	height: 128px;
	line-height: 128px;
	text-align: center;
	background: none;
  	margin: 0 auto;
  	box-shadow: none;
	position: relative;
	&:after {
		content: "";
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 7px solid $light-color;
		position: absolute;
		top: 0;
		left: 0;
	}
	> span {
	    width: 50%;
	    height: 100%;
	    overflow: hidden;
	    position: absolute;
	    top: 0;
	    z-index: 1;
	}
	.circle-bar {
	    width: 100%;
	    height: 100%;
	    background: none;
	    border-width: 8px;
	    border-style: solid;
	    position: absolute;
	    top: 0;
	    border-color: $secondary-color;
	}
	.circle-left {
	    left: 0;
	    .circle-bar {
	    	left: 100%;
    		border-top-right-radius: (128px/2);
    		border-bottom-right-radius: (128px/2);
    		border-left: 0;
    		-webkit-transform-origin: center left;
    		-moz-transform-origin: center left;
    		-ms-transform-origin: center left;
    		transform-origin: center left;
	    }
	}
	.circle-right {
	    right: 0;
	    .circle-bar {
	    	left: -100%;
    		border-top-left-radius: (128px/2);
    		border-bottom-left-radius: (128px/2);
    		border-right: 0;
    		-webkit-transform-origin: center right;
    		-moz-transform-origin: center right;
    		-ms-transform-origin: center right;
    		transform-origin: center right;
	    }
	}
	.progress-value {
		@include flexbox();
		@include align-items(center);
		@include justify-content(center);
    	border-radius: 50%;
    	font-size: 28px;
    	color: $light-color;
		height: 100%;
    	font-weight: 700;
	    span {
	      font-size: 12px;
	      text-transform: uppercase;
	    }
  	}
}

$animationTime: 2s;
$howManySteps: 10; //this needs to be even. 
/* This for loop creates the 	necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
@for $i from 1 through $howManySteps {
	$stepName: ($i*(100 / $howManySteps));
	//animation only the left side if below 50%
	@if $i <= ($howManySteps/2) { 
		.progress-circle[data-percentage="#{$stepName}"] {
			.circle-right .circle-bar {
				animation: loading-#{$i} $animationTime linear forwards;
			}
			.circle-left .circle-bar {animation: 0;}
		}
	}
	//animation only the right side if above 50%
	@if $i > ($howManySteps/2)  {  
		.progress-circle[data-percentage="#{$stepName}"] {
			.circle-right .circle-bar {
				animation: loading-#{($howManySteps/2)} $animationTime linear forwards; //set the animation to longest animation
			}
			.circle-left .circle-bar {
		      animation: loading-#{$i - ($howManySteps/2)} $animationTime linear forwards $animationTime;
		    }
		}
	}
}

//animation
@for $i from 1 through ($howManySteps/2) { 
	$degrees: (180/($howManySteps/2));
	$degrees: ($degrees*$i);
	@keyframes loading-#{$i}{
	    0%{
	        -webkit-transform: rotate(0deg);
	        transform: rotate(0deg);
	    }
	    100%{
	        -webkit-transform: rotate($degrees);
			transform: rotate(#{$degrees}deg);
	    }
	}
}
.progress-wrap {
	@include flexbox();
	@include flex-wrap(wrap);
	.progress-inner {
		width: 50%;
		text-align: center;
	}
	@include bp(smx) {
		.progress-inner {
			width: 100%;
		}
	}
}
.progress-inner  {
	padding: 25px;
	h4 {
		color: $light-color;
		margin-bottom: 0;
		margin-top: 15px;
	}
	@include bp(md) {
		border-right: 1px solid rgba(255, 255, 255, 0.4);
		border-bottom: 1px solid rgba(255, 255, 255, 0.4);
		&:nth-child(2n+2) {
			border-right: none;
		}
		&:last-child,
		&:nth-last-child(2) {
			border-bottom: none;
		}
	}
}