@media only screen
and (min-device-width: 800px)
and (max-device-width: 2559px) {

	body {
	  background-image: linear-gradient(#F90000, #B6D515);
	  background-attachment:fixed;
	  height:100%;
		overflow-y: hidden;
	}


	body .circle {
	  position: relative;
	  left: 50%;
	  top: 350px;
	  transform-origin: center center;
	  border-radius: 1px;
	  background: none;
	  width: 1px;
	  height: 1px;
	  animation-name: spin;
	  animation-duration: 30s;
	  animation-iteration-count: infinite;
	  animation-timing-function: linear;
		animation: move 10s steps(1000000) infinite alternate, spin 30s infinite linear;
	}

	.icon:nth-child(1) {
	  left: -74px; top: 175px;
	}

	.icon:nth-child(2) {
	  left: -250px; top: 101px;
	}

	.icon:nth-child(3) {
	  left: -324px; top: -74px;
	}

	.icon:nth-child(4) {
	  left: -250px; top: -250px;
	}

	.icon:nth-child(5) {
	  left: -74px; top: -324px;
	}

	.icon:nth-child(6) {
	  left: 101px; top: -250px;
	}

	.icon:nth-child(7) {
	  left: 175px; top: -74px;
	}

	.icon:nth-child(8) {
	  left: 101px; top: 101px;
	}

	.icon {
	  transform-origin: center center;
	  position: absolute;
	  width: 150px;
	  height: 150px;
	  animation-name: cabin;
	  animation-duration: 30s;
	  animation-iteration-count: infinite;
	  animation-timing-function: linear;
	}

	body .circle:hover > .icon {   animation-play-state: paused; }

	body .circle:hover {
	  animation-play-state: paused;
	}

	@keyframes spin {
	    from {
	        transform:rotate(0deg);
	    }
	    to {
	        transform:rotate(360deg);
	    }
	}

	@keyframes cabin {
	  0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(-360deg);
		}
	}

	@keyframes move {
	  from { top: 350px; left: 25%; }
	  to   { top: 350px; left: 75%; }
	}
}

@media only screen
and (min-device-width: 2560px) {
	body {
	  background-image: linear-gradient(#F90000, #B6D515);
	  background-attachment:fixed;
	  height:100%;
	  color: #FFFFFF;
		overflow-y: hidden;
	}

	body .circle {
		/* background-color: black; */
	  position: absolute;
	  left: 50%;
	  top: 1000px;
	  transform-origin: 50% 50%;
		-webkit-transform-origin: 50% 50%;
		-moz-transform-origin: 50% 50%;
		-o-transform-origin: 50% 50%;
	  /* border-radius: 1px; */
	  background: none;
	  width: 10px;
	  height: 10px;
		animation: move 10s steps(1000000) infinite alternate, spin 30s infinite linear;
	}

	.icon:nth-child(1) {
		position: absolute;
		/* left:50%;
  	transform: translateX(-50%);
  	-webkit-transform: translateX(-50%); */
	  left: 600px; top: -250px;
	}

	.icon:nth-child(2) {
		position: absolute;
	  left: 400px; top: 300px;
	}

	.icon:nth-child(3) {
		position: absolute;
	  left: -150px; top: 600px;
	}

	.icon:nth-child(4) {
		position: absolute;
	  left: -600px; top: 350px;
	}

	.icon:nth-child(5) {
		position: absolute;
	  left: -950px; top: -150px;
	}

	.icon:nth-child(6) {
		position: absolute;
	  left: -650px; top: -550px;
	}

	.icon:nth-child(7) {
		position: absolute;
	  left: -150px; top: -800px;
	}

	.icon:nth-child(8) {
		position: absolute;
	  left: 450px; top: -600px;
	}

	.icon {
	  /* transform-origin: center center; */
	  position: absolute;
	  width: 375px;
	  height: 375px;
	  animation-name: cabin 30s infinite linear;
	}

	body .circle:hover > .icon {   animation-play-state: paused; }

	body .circle:hover {
	  animation-play-state: paused;
	}

	@keyframes spin {
	    from {
	        transform:rotate(0deg);
	    }
	    to {
	        transform:rotate(360deg);
	    }
	}

	@keyframes cabin {
	  0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(-360deg);
		}
	}

	@keyframes move {
	  from { top: 1000px; left: 25%; }
	  to   { top: 1000px; left: 62%; }
	}

}