* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

.orbit {
  	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	margin-left: -40%;
}
.orbit-icon {
  width: 80px;
  height: 80px;
  line-height: 0;
  border-radius: 50%;
  text-align: center;
  display: block;
  border: 0;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
}
.orbit-wrap {
  height: 40em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.orbit-wrap > li {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  line-height: 0;
  margin: 0 !important;
  padding: 0;
}
/* .orbit-wrap > li:hover ul {
  border-width: 2px;
  border-color: #fff;
}
.orbit-wrap > li:hover ~ li ul {
  border-color: rgba(255, 255, 255, 0.2);
} */
/* .orbit-wrap > li:hover ~ li ul li {
  opacity: 0.4;
} */

ul[class^=ring] {
  transition: all 300ms ease-in-out;
}
ul[class^=ring] li {
  transition: all 300ms ease-in-out;
}

.ring-1 {
  width: 40em;
  height: 40em;
  -webkit-animation: clockwiseRotate 60s linear infinite;
          animation: clockwiseRotate 60s linear infinite;
}
.ring-1 img {
  -webkit-animation: counterClockwiseRotate 60s linear infinite;
          animation: counterClockwiseRotate 60s linear infinite;
}

.ring-1 > *:nth-of-type(1) {
  transform: rotate(80deg) translate(17em) rotate(-80deg);
}

.ring-1 > *:nth-of-type(2) {
  transform: rotate(140deg) translate(20em) rotate(-140deg);
}

.ring-1 > *:nth-of-type(3) {
  transform: rotate(200deg) translate(22.5em) rotate(-200deg);
}

.ring-1 > *:nth-of-type(4) {
  transform: rotate(260deg) translate(22.5em) rotate(-260deg);
}

.ring-1 > *:nth-of-type(5) {
  transform: rotate(320deg) translate(19.5em) rotate(-320deg);
}

.ring-1 > *:nth-of-type(6) {
  transform: rotate(380deg) translate(17.5em) rotate(-380deg);
}

.ring-2 {
  width: 30em;
  height: 30em;
  -webkit-animation: clockwiseRotate 50s linear infinite;
          animation: clockwiseRotate 50s linear infinite;
}
.ring-2 img {
  -webkit-animation: counterClockwiseRotate 50s linear infinite;
          animation: counterClockwiseRotate 50s linear infinite;
}

.ring-2 > *:nth-of-type(1) {
  transform: rotate(45deg) translate(12em) rotate(-45deg);
}

.ring-2 > *:nth-of-type(2) {
  transform: rotate(120deg) translate(14em) rotate(-120deg);
}

.ring-2 > *:nth-of-type(3) {
  transform: rotate(240deg) translate(18em) rotate(-240deg);
}

.ring-2 > *:nth-of-type(4) {
  transform: rotate(360deg) translate(12.5em) rotate(-360deg);
}

.ring-3 {
  width: 20em;
  height: 20em;
  -webkit-animation: clockwiseRotate 40s linear infinite;
          animation: clockwiseRotate 40s linear infinite;
}
.ring-3 img {
  -webkit-animation: counterClockwiseRotate 40s linear infinite;
          animation: counterClockwiseRotate 40s linear infinite;
}

.ring-3 > *:nth-of-type(1) {
  transform: rotate(126.6666666667deg) translate(9em) rotate(-126.6666666667deg);
}

.ring-3 > *:nth-of-type(2) {
  transform: rotate(253.3333333333deg) translate(12.5em) rotate(-253.3333333333deg);
}

.ring-3 > *:nth-of-type(3) {
  transform: rotate(380deg) translate(10em) rotate(-380deg);
}

ul[class^=ring] {
  border: solid 1px rgba(0, 0, 0, 0.12);
  position: relative;
  padding: 0;
  border-radius: 50%;
  list-style: none;
  box-sizing: content-box;
}

ul[class^=ring] li {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: 0 !important;
  /* margin: -40px; */
}

/*
  center;
*/
.orbit-center {
	display: flex;
  z-index: 5;
  width: 180px;
  height: 180px;
  line-height: 0;
  text-align: center;
  border-radius: 50%;
}
.orbit-center:hover .orbit-center__icon {
  transform: rotateZ(0deg);
}

/* .orbit-center__icon {
  transform: rotateZ(-360deg);
  transition: all 300ms ease-in-out;
}

.orbit-wrap > li.orbit-center:hover ~ li > ul {
  width: 0;
  height: 0;
}
.orbit-wrap > li.orbit-center ~ li > ul * {
	transition: all 300ms ease-in-out;
}
.orbit-wrap > li.orbit-center:hover ~ li > ul * {
  transform: translate(0, 0);
  width: 0;
  height: 0;
} */

/* 
animations 
*/
@-webkit-keyframes clockwiseRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes clockwiseRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes counterClockwiseRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes counterClockwiseRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@media screen and (max-width: 768px) {
	.orbit-addons .orbit {
		position: relative;
		top: -40px;
		left: 0;
		margin: 0;
		transform: translate(0);
	}
	.orbit-wrap {
		height: 30em;
	}
	.orbit-center {
		width: 80px;
    	height: 80px;
	}
	.ring-1 {
		width: 30em;
		height: 30em;
	}
	.ring-2 {
		width: 20em;
		height: 20em;
	}
	.ring-3 {
		width: 10em;
		height: 10em;
	}
	.orbit-icon {
		width: 52px;
		height: 52px;
	}
	ul[class^=ring] li {
		width: 52px;
		height: 52px;
	}
	.ring-1 > *:nth-of-type(6) {
		transform: rotate(380deg) translate(12.4em) rotate(-380deg);
	}
	.ring-1 > *:nth-of-type(5) {
		transform: rotate(320deg) translate(14.5em) rotate(-320deg);
	}
	.ring-1 > *:nth-of-type(4) {
		transform: rotate(260deg) translate(17.2em) rotate(-260deg);
	}
	.ring-1 > *:nth-of-type(3) {
		transform: rotate(200deg) translate(17.5em) rotate(-200deg);
	}
	.ring-1 > *:nth-of-type(2) {
		transform: rotate(140deg) translate(15em) rotate(-140deg);
	}
	.ring-1 > *:nth-of-type(1) {
		transform: rotate(80deg) translate(12.5em) rotate(-80deg);
	}
	.ring-2 > *:nth-of-type(4) {
		transform: rotate(360deg) translate(8em) rotate(-360deg);
	}
	.ring-2 > *:nth-of-type(3) {
		transform: rotate(240deg) translate(13em) rotate(-240deg);
	}
	.ring-2 > *:nth-of-type(2) {
		transform: rotate(120deg) translate(9em) rotate(-120deg);
	}
	.ring-2 > *:nth-of-type(1) {
		transform: rotate(45deg) translate(7.2em) rotate(-45deg);
	}
	.ring-3 > *:nth-of-type(1) {
		transform: rotate(126.6666666667deg) translate(4em) rotate(-126.6666666667deg);
	}
	.ring-3 > *:nth-of-type(2) {
		transform: rotate(253.3333333333deg) translate(7.5em) rotate(-253.3333333333deg);
	}
}