.circleContainer{
	height: 80vh;
	min-height: 850px;
}
.circleBorder{
	margin: auto;
	height: 750px;
	width: 750px;
	border: 2px dotted #1176c0;
	border-radius: 50%;
	border-left-color: transparent;
	border-right-color: transparent;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.borderTop{
	top: 80%;
	border-bottom-color: transparent;
}
.borderBot{
	top: 20%;
	border-top-color: transparent;
}
.fullCircle{
	border-left-color: #1176c0;
	border-right-color: #1176c0;
}
.circleBorder img{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.circleBorder div{
	width: 100%;
	height: 100%;
	position: absolute;
}
.towerRight{
	transform: translate(50%);
}
.towerLeft{
	transform: translate(-50%)
}
/* ======================================================
Semi circle
====================================================== */
.orbit1{
	animation: orbit1 60s linear infinite;
	animation-fill-mode: both;
}
.orbit1Left{
	animation: orbit1Left 60s linear infinite;
	animation-fill-mode: both;
}
@keyframes orbit1{
	0%{
		transform:  rotate(-30deg) translate(50%) rotate(30deg);
	}
	50% {
		transform:  rotate(-150deg) translate(50%) rotate(150deg);
	}
	100%{
		transform:  rotate(-30deg) translate(50%) rotate(30deg);
	}
}
@keyframes orbit1Left{
	0%{
		transform:  rotate(150deg) translate(50%) rotate(-150deg);
	}
	50% {
		transform:  rotate(30deg) translate(50%) rotate(-30deg);
	}
	100%{
		transform:  rotate(150deg) translate(50%) rotate(-150deg);
	}
}
/* ======================================================
Full circle spinning 
====================================================== */
.orbit2{
	animation: orbit2 48s linear infinite;
	animation-fill-mode: both;
}
@keyframes orbit2{
	0%{
		transform:  rotate(-45deg) translate(50%) rotate(45deg);
	}
	100% {
		transform:  rotate(-405deg) translate(50%) rotate(405deg);
	}
}
/* ======================================================
Full circle flying
====================================================== */
.orbit3{
	animation: orbit3 48s linear infinite;
	animation-fill-mode: both;
}
@keyframes orbit3{
	0%{
		transform:  rotate(-45deg) translate(50%) rotate(45deg);
	}
	100% {
		transform:  rotate(-405deg) translate(50%) rotate(45deg);
	}
}

/* FOR LARGER THAN 1024PX HEIGHT ************************/
@media only screen and (min-height: 970px) {
	.circleContainer{
		height: 80vh;
	}
}
/* FOR SMALLER THAN 1024PX BUT LARGER THAN 768PX *******************/
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.circleContainer{
		min-height: 630px;
		height: 70vh;
	}
	.circleBorder{
		height: 550px;
		width: 550px;
		left: 46%;
	}
	.circleBorder img{
		width: 12%;
	}
	.towerRight img,.towerLeft img{
		width: 10%;
	}
}
/* FOR SMALLER THAN 767PX BUT LARGER THAN 414PX ***/
@media only screen and (min-width: 414px) and (max-width: 767px) {
	.circleContainer{
		min-height: 450px;
		height: 60vh;
	}
	.circleBorder{
		height: 370px;
		width: 370px;
		left: 46%;
	}
	.circleBorder img{
		width: 13%;
	}
	.towerRight img,.towerLeft img{
		width: 10%;
	}
}
/* FOR SMALLER THAN 413PX BUT LARGER THAN 375PX ***/
@media only screen and (min-width: 375px) and (max-width: 413px) {
	.circleContainer{
		min-height: 440px;
		height: 50vh;
	}
	.circleBorder{
		height: 330px;
		width: 330px;
		left: 44%;
	}
	.circleBorder img{
		width: 15%;
	}
	.towerRight img,.towerLeft img{
		width: 12%;
	}
}
/* FOR SMALLER THAN 374PX BUT LARGER THAN 321PX ***/
@media only screen and (min-width: 321px) and (max-width: 374px) {
	.circleContainer{
		min-height: 390px;
		height: 60vh;
	}
	.circleBorder{
		height: 280px;
		width: 280px;
		left: 43%;
	}
	.circleBorder img{
		width: 15%;
	}
	.towerRight img,.towerLeft img{
		width: 12%;
	}
}
/* Mobile */
@media (max-width: 320px) {
	.circleContainer{
		min-height: 390px;
		height: 60vh;
	}
	.circleBorder{
		height: 280px;
		width: 280px;
		left: 43%;
	}
	.circleBorder img{
		width: 15%;
	}
	.towerRight img,.towerLeft img{
		width: 12%;
	}
}
/* IPAD PRO */
@media only screen and (device-height: 1366px) and (device-width: 1024px){
	.circleContainer{
		min-height: 390px;
		height: 55vh;
	}
	.circleBorder{
		height: 600px;
		width: 600px;
		left: 43%;
	}
	.circleBorder img{
		width: 15%;
	}
	.towerRight img,.towerLeft img{
		width: 12%;
	}
}