/* @-webkit-keyframes rotate {
	from {
		-webkit-transform: rotate(0deg)
		           translate(-10vw)
		           rotate(0deg);
		        transform: rotate(0deg)
		           translate(-10vw)
		           rotate(0deg);
		background-color: #edac00;
	}
	to {
		-webkit-transform: rotate(360deg)
		           translate(-10vw)
		           rotate(-360deg);
		        transform: rotate(360deg)
		           translate(-10vw)
		           rotate(-360deg);
		background-color: #edac00;
	}
}

@keyframes rotate {
	from {
		-webkit-transform: rotate(0deg)
		           translate(-10vw)
		           rotate(0deg);
		        transform: rotate(0deg)
		           translate(-10vw)
		           rotate(0deg);
		background-color: #edac00;
	}
	to {
		-webkit-transform: rotate(360deg)
		           translate(-10vw)
		           rotate(-360deg);
		        transform: rotate(360deg)
		           translate(-10vw)
		           rotate(-360deg);
		background-color: #edac00;
	}
}

@-webkit-keyframes rotateBuild {
	from {
		-webkit-transform: rotate(0deg)
		           translate(-10vw)
		           rotate(0deg);
		        transform: rotate(0deg)
		           translate(-10vw)
		           rotate(0deg);
		background-color: #edac00;
	}
	to {
		-webkit-transform: rotate(180deg)
		           translate(-10vw)
		           rotate(-180deg);
		        transform: rotate(180deg)
		           translate(-10vw)
		           rotate(-180deg);
		background-color: #edac00;
	}
}

@keyframes rotateBuild {
	from {
		-webkit-transform: rotate(0deg)
		           translate(-10vw)
		           rotate(0deg);
		        transform: rotate(0deg)
		           translate(-10vw)
		           rotate(0deg);
		background-color: #edac00;
	}
	to {
		-webkit-transform: rotate(180deg)
		           translate(-10vw)
		           rotate(-180deg);
		        transform: rotate(180deg)
		           translate(-10vw)
		           rotate(-180deg);
		background-color: #edac00;
	}
}

@-webkit-keyframes rotateBuildToDesign {
	from {
    -webkit-transform: rotate(180deg)
		           translate(-10vw)
		           rotate(-180deg);
		        transform: rotate(180deg)
		           translate(-10vw)
		           rotate(-180deg);
		background-color: #edac00;
	}
	to {
		-webkit-transform: rotate(270deg)
		           translate(-10vw)
		           rotate(-270deg);
		        transform: rotate(180deg)
		           translate(-10vw)
		           rotate(-270deg);
		background-color: #edac00;
	}
}

@keyframes rotateBuildToDesign {
	from {
    -webkit-transform: rotate(180deg)
		           translate(-10vw)
		           rotate(-180deg);
		        transform: rotate(180deg)
		           translate(-10vw)
		           rotate(-180deg);
		background-color: #edac00;
	}
	to {
		-webkit-transform: rotate(270deg)
		           translate(-10vw)
		           rotate(-270deg);
		        transform: rotate(270deg)
		           translate(-10vw)
		           rotate(-270deg);
		background-color: #edac00;
	}
}

#circle-holder {
	background-color: transparent;
	display: block;
	position: relative;
	width: 25vw;
	height: 25vw;
	max-width: 370px;
	max-height: 370px;
	border-radius: 100%;
	border: solid #e6e4e5 5vw;
	margin: 0 auto;
}

.circle {
	width: 4vw;
	height: 4vw;
	max-width: 60px;
	max-height: 60px;
	position: absolute;
	background-color: #edac00;
	border-radius: 100%;
	top: 5.5vw;
	left: 5.5vw;
  transform: translateX(-10vw);
  transition: all 1s ease-In-Out;
	}

.circle-animate {
  -webkit-animation: rotateBuild 4s forwards ease;
	        animation: rotateBuild 4s forwards ease;
}

.circle-animate-build {
  -webkit-animation: rotateBuild 2s forwards ease;
	        animation: rotateBuild 2s forwards ease;
}

.circle-animate-build-design {
  -webkit-animation: rotateBuildToDesign 1s forwards ease;
	        animation: rotateBuildToDesign 1s forwards ease;
}

.after1 {
  -webkit-animation-delay: .1s;
          animation-delay: .1s;
  opacity:.6;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.after2 {
  -webkit-animation-delay: .25s;
          animation-delay: .25s;
  opacity:.4;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.after3 {
  -webkit-animation-delay: .4s;
          animation-delay: .4s;
  opacity:.2;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}


@media screen and (min-width: 1450px) {
	#circle-holder {
		border: solid #e6e4e5 70px;
	}
	.circle {
		top: 85px;
		left: 85px;
	}
	@-webkit-keyframes rotate {
		from {
			-webkit-transform: rotate(0deg)
			           translate(-250%)
			           rotate(0deg);
			        transform: rotate(0deg)
			           translate(-250%)
			           rotate(0deg);
			background-color: #edac00;
		}
		to {
			-webkit-transform: rotate(360deg)
			           translate(-250%)
			           rotate(-360deg);
			        transform: rotate(360deg)
			           translate(-250%)
			           rotate(-360deg);
			background-color: #edac00;
		}
	}
	@keyframes rotate {
		from {
			-webkit-transform: rotate(0deg)
			           translate(-250%)
			           rotate(0deg);
			        transform: rotate(0deg)
			           translate(-250%)
			           rotate(0deg);
			background-color: #edac00;
		}
		to {
			-webkit-transform: rotate(360deg)
			           translate(-250%)
			           rotate(-360deg);
			        transform: rotate(360deg)
			           translate(-250%)
			           rotate(-360deg);
			background-color: #edac00;
		}
	}
}

@media screen and (min-width: 0px) and (max-width: 800px) {
	#circle-holder {
		border: solid #e6e4e5 70px;
		width: 375px;
		height: 375px;
	}
	.circle {
		width: 375px;
		height: 375px;
		top: 85px;
		left: 85px;
	}
	@-webkit-keyframes rotate {
		from {
			-webkit-transform: rotate(0deg)
			           translate(-250%)
			           rotate(0deg);
			        transform: rotate(0deg)
			           translate(-250%)
			           rotate(0deg);
			background-color: #edac00;
		}
		to {
			-webkit-transform: rotate(360deg)
			           translate(-250%)
			           rotate(-360deg);
			        transform: rotate(360deg)
			           translate(-250%)
			           rotate(-360deg);
			background-color: #edac00;
		}
	}
	@keyframes rotate {
		from {
			-webkit-transform: rotate(0deg)
			           translate(-250%)
			           rotate(0deg);
			        transform: rotate(0deg)
			           translate(-250%)
			           rotate(0deg);
			background-color: #edac00;
		}
		to {
			-webkit-transform: rotate(360deg)
			           translate(-250%)
			           rotate(-360deg);
			        transform: rotate(360deg)
			           translate(-250%)
			           rotate(-360deg);
			background-color: #edac00;
		}
	}
} */

/* Temporary circle class */