html,
body {
  height: 100%;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  color: #fff;
}

h0 {
  margin: 0;
  line-height: 1;
}

h1 {
  margin: 0;
  line-height: 1;
}

h2 {
  margin: 0;
  line-height: 1;
}

h3 {
  margin: 0;
  line-height: 1;
}

h4 {
  margin: 0;
  line-height: 1;
}

h5 {
  margin: 0;
  line-height: 1;
}

h2 {
  font-weight: 400;
}

h5 {
  font-weight: 200;
}

body {
  background: #18202a;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  text-decoration: none;
  color: inherit;
}

.wrapper {
  max-width: 720px;
  width: 100%;
  overflow: hidden;
  padding: 2rem;
}
.wrapper:after {
  content: "";
  display: block;
  width: 100%;
  clear: both;
}

.controler {
  float: left;
  height: 50vh;
  width: 55%;
  display: flex;
  align-items: center;
}
.controler ul {
  list-style-type: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
.controler ul li {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
.controler ul li > a {
  padding: 2rem 0;
  position: relative;
  -webkit-animation: bounce-left 250ms ease forwards;
          animation: bounce-left 250ms ease forwards;
}
.controler ul li > a:hover {
  -webkit-animation: bounce-right 350ms ease forwards;
          animation: bounce-right 350ms ease forwards;
}
.controler ul li.active > a {
  -webkit-animation: bounce-right 350ms ease forwards;
          animation: bounce-right 350ms ease forwards;
}
.controler ul li:before {
  content: "";
  display: block;
  position: absolute;
  top: 20%;
  left: 0;
  opacity: 1;
  width: 4px;
  height: 60%;
  background: #05b6fb;
  transform: translateX(-8px);
  transition: transform ease-out 350ms;
}
.controler ul li:after {
  content: "";
  display: block;
  position: absolute;
  top: 20%;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 60%;
  background: radial-gradient(15% 65% at -5% center, #05b6fb 0%, rgba(0, 0, 0, 0) 100%);
  z-index: -1;
  transform-origin: 0 50%;
}
.controler ul li:hover:before, .controler ul li.active:before {
  transform: translateX(0px);
}
.controler ul li.active:after {
  -webkit-animation: flash 500ms ease forwards;
          animation: flash 500ms ease forwards;
}
.controler .option {
  display: block;
}
.controler .option h2 {
  margin-bottom: 2vh;
  font-size: 1.75rem;
}
.controler .option h5 {
  font-size: 1.05rem;
  opacity: 0.4;
}

.visual {
  float: right;
  height: 50vh;
  width: 45%;
  display: flex;
  align-items: center;
}

.rings {
  height: 320px;
  width: 320px;
  display: inline-block;
  position: relative;
  transform-origin: 50% 50%;
  transition: transform ease 250ms;
}
.rings[data-view=one] {
  transform: rotate(120deg);
}
.rings[data-view=two] {
  transform: rotate(240deg);
}
.rings[data-view=three] {
  transform: rotate(360deg);
}
.rings > div {
  width: 320px;
  height: 320px;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 50% 50%;
}
.rings .inner-ring:before, .rings .inner-ring:after {
  content: "";
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
}
.rings .inner-ring:before {
  width: calc(90% - 16px);
  height: calc(90% - 16px);
  margin-top: calc(-45% - 8px);
  margin-left: calc(-45% - 8px);
  border: 16px dotted rgba(255, 255, 255, 0.2);
  -webkit-animation: clock 130s ease forwards infinite;
          animation: clock 130s ease forwards infinite;
  mix-blend-mode: multiply;
}
.rings .inner-ring:after {
  width: calc(80% - 2px);
  height: calc(80% - 2px);
  margin-top: calc(-40% - 1px);
  margin-left: calc(-40% - 1px);
  border: 2px dashed rgba(255, 255, 255, 0.8);
  -webkit-animation: counter 130s ease forwards infinite;
          animation: counter 130s ease forwards infinite;
}
.rings .middle-ring:before, .rings .middle-ring:after {
  content: "";
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
}
.rings .middle-ring:before {
  width: calc(90% - 16px);
  height: calc(90% - 16px);
  margin-top: calc(-45% - 8px);
  margin-left: calc(-45% - 8px);
  border: 16px dotted rgba(5, 182, 251, 0.3);
  transform: rotate(3deg);
  -webkit-animation: clock 70s ease forwards infinite;
          animation: clock 70s ease forwards infinite;
}
.rings .middle-ring:after {
  width: calc(75% - 2px);
  height: calc(75% - 2px);
  margin-top: calc(-37.5% - 1px);
  margin-left: calc(-37.5% - 1px);
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.rings .outer-ring:before, .rings .outer-ring:after {
  content: "";
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
}
.rings .outer-ring:before {
  width: calc(106% - 4px);
  height: calc(106% - 4px);
  margin-top: calc(-53% - 2px);
  margin-left: calc(-53% - 2px);
  border: 4px dotted rgba(5, 182, 251, 0.3);
  -webkit-animation: clock 50s ease forwards infinite;
          animation: clock 50s ease forwards infinite;
}
.rings .outer-ring:after {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  margin-top: calc(-50% - 1px);
  margin-left: calc(-50% - 1px);
  border: 2px solid rgba(255, 255, 255, 0.6);
}

@-webkit-keyframes bounce-right {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1.3rem);
  }
  100% {
    transform: translateX(1rem);
  }
}

@keyframes bounce-right {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1.3rem);
  }
  100% {
    transform: translateX(1rem);
  }
}
@-webkit-keyframes bounce-left {
  0% {
    transform: translateX(1rem);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes bounce-left {
  0% {
    transform: translateX(1rem);
  }
  100% {
    transform: translateX(0);
  }
}
@-webkit-keyframes flash {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes flash {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes clock {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes clock {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes counter {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes counter {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}