html, body {
  height: 100%;
  width: 100%;
  overflow: hidden; }

body {
  font: normal 1em/1.45em "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: white;
  background: linear-gradient(337deg, #1b5665, #e9956c, #a8c2c8, #7d928b, #f7d230);
  background-size: 1000% 1000%;
  -webkit-animation: background-color 9s ease infinite;
  -moz-animation: background-color 9s ease infinite;
  -o-animation: background-color 9s ease infinite;
  animation: background-color 9s ease infinite; }

h1, h6 {
  font: normal 1.3em 'Open Sans',Helvetica, Arial, sans-serif;
  font-weight: 300;
  text-align: center;
  position: absolute;
  top: 5%;
  right: 0;
  left: 0; }

*, *::after, *::before {
  box-sizing: border-box; }

.selector {
  width: 50%;
  margin: 100px auto;
  text-align: center;
  display: flex; }
  .selector a {
    padding: 1em;
    margin: 0 .2em;
    flex: 1;
    border: 1px solid rgba(254, 254, 254, 0.6);
    transition: all .15s ease-in-out;
    font: normal 1em 'Open Sans',Helvetica, Arial, sans-serif;
    color: #fff;
    text-decoration: none; }
    .selector a:hover {
      background: #57DAB2;
      border-color: #A2EAD4; }
  .selector .active {
    color: #F0A2B3;
    text-shadow: 0px 2px 10px #D1A1B1;
    font-weight: 800;
    transition: color 0.25s; }

.wrapper {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 40px;
  display: block;
  overflow: hidden; }
  .wrapper span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    transform: translateX(0px) translate3d(0, 0, 0);
    animation: 0.5s circleAnimation infinite ease-in-out;
    background: linear-gradient(271deg, #0cb68a, #c7a087, #ed0c1c);
    background-size: 600% 600%;
    -webkit-animation: dot 14s ease infinite;
    -moz-animation: dot 14s ease infinite;
    -o-animation: dot 14s ease infinite;
    animation: dot 14s ease infinite; }

.wrapper-1 {
  top: 35%; }

.wrapper-2 {
  top: 40%; }

.wrapper-3 {
  top: 45%; }

.wrapper-4 {
  top: 50%; }

.wrapper-5 {
  top: 55%; }

.wrapper-6 {
  top: 60%; }

.wrapper-7 {
  top: 65%; }

.wrapper-8 {
  top: 70%; }

.wrapper-9 {
  top: 75%; }

.wrapper-10 {
  top: 80%; }

@keyframes circle0 {
  0%, 0% {
    transform: translateX(0); }
  8.3333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(1) {
  animation: circle23 6s infinite;
  left: -30px; }

@keyframes circle1 {
  0%, 2.5% {
    transform: translateX(0); }
  10.8333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(2) {
  animation: circle22 6s infinite;
  left: 0px; }

@keyframes circle2 {
  0%, 5% {
    transform: translateX(0); }
  13.3333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(3) {
  animation: circle21 6s infinite;
  left: 30px; }

@keyframes circle3 {
  0%, 7.5% {
    transform: translateX(0); }
  15.8333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(4) {
  animation: circle20 6s infinite;
  left: 60px; }

@keyframes circle4 {
  0%, 10% {
    transform: translateX(0); }
  18.3333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(5) {
  animation: circle19 6s infinite;
  left: 90px; }

@keyframes circle5 {
  0%, 12.5% {
    transform: translateX(0); }
  20.8333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(6) {
  animation: circle18 6s infinite;
  left: 120px; }

@keyframes circle6 {
  0%, 15% {
    transform: translateX(0); }
  23.3333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(7) {
  animation: circle17 6s infinite;
  left: 150px; }

@keyframes circle7 {
  0%, 17.5% {
    transform: translateX(0); }
  25.8333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(8) {
  animation: circle16 6s infinite;
  left: 180px; }

@keyframes circle8 {
  0%, 20% {
    transform: translateX(0); }
  28.3333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(9) {
  animation: circle15 6s infinite;
  left: 210px; }

@keyframes circle9 {
  0%, 22.5% {
    transform: translateX(0); }
  30.8333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(10) {
  animation: circle14 6s infinite;
  left: 240px; }

@keyframes circle10 {
  0%, 25% {
    transform: translateX(0); }
  33.3333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(11) {
  animation: circle13 6s infinite;
  left: 270px; }

@keyframes circle11 {
  0%, 27.5% {
    transform: translateX(0); }
  35.8333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(12) {
  animation: circle12 6s infinite;
  left: 300px; }

@keyframes circle12 {
  0%, 30% {
    transform: translateX(0); }
  38.3333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(13) {
  animation: circle11 6s infinite;
  left: 330px; }

@keyframes circle13 {
  0%, 32.5% {
    transform: translateX(0); }
  40.8333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(14) {
  animation: circle10 6s infinite;
  left: 360px; }

@keyframes circle14 {
  0%, 35% {
    transform: translateX(0); }
  43.3333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(15) {
  animation: circle9 6s infinite;
  left: 390px; }

@keyframes circle15 {
  0%, 37.5% {
    transform: translateX(0); }
  45.8333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(16) {
  animation: circle8 6s infinite;
  left: 420px; }

@keyframes circle16 {
  0%, 40% {
    transform: translateX(0); }
  48.3333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(17) {
  animation: circle7 6s infinite;
  left: 450px; }

@keyframes circle17 {
  0%, 42.5% {
    transform: translateX(0); }
  50.8333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(18) {
  animation: circle6 6s infinite;
  left: 480px; }

@keyframes circle18 {
  0%, 45% {
    transform: translateX(0); }
  53.3333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(19) {
  animation: circle5 6s infinite;
  left: 510px; }

@keyframes circle19 {
  0%, 47.5% {
    transform: translateX(0); }
  55.8333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(20) {
  animation: circle4 6s infinite;
  left: 540px; }

@keyframes circle20 {
  0%, 50% {
    transform: translateX(0); }
  58.3333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(21) {
  animation: circle3 6s infinite;
  left: 570px; }

@keyframes circle21 {
  0%, 52.5% {
    transform: translateX(0); }
  60.8333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(22) {
  animation: circle2 6s infinite;
  left: 600px; }

@keyframes circle22 {
  0%, 55% {
    transform: translateX(0); }
  63.3333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(23) {
  animation: circle1 6s infinite;
  left: 630px; }

@keyframes circle23 {
  0%, 57.5% {
    transform: translateX(0); }
  65.8333333333%, 100% {
    transform: translateX(30px); } }
span:nth-child(24) {
  animation: circle0 6s infinite;
  left: 660px; }

@-webkit-keyframes dot {
  0% {
    background-position: 0% 5%; }
  50% {
    background-position: 100% 96%; }
  100% {
    background-position: 0% 5%; } }
@-moz-keyframes dot {
  0% {
    background-position: 0% 5%; }
  50% {
    background-position: 100% 96%; }
  100% {
    background-position: 0% 5%; } }
@-o-keyframes dot {
  0% {
    background-position: 0% 5%; }
  50% {
    background-position: 100% 96%; }
  100% {
    background-position: 0% 5%; } }
@keyframes dot {
  0% {
    background-position: 0% 5%; }
  50% {
    background-position: 100% 96%; }
  100% {
    background-position: 0% 5%; } }
@-webkit-keyframes background-color {
  0% {
    background-position: 0% 5%; }
  50% {
    background-position: 100% 96%; }
  100% {
    background-position: 0% 5%; } }
@-moz-keyframes background-color {
  0% {
    background-position: 0% 5%; }
  50% {
    background-position: 100% 96%; }
  100% {
    background-position: 0% 5%; } }
@-o-keyframes background-color {
  0% {
    background-position: 0% 5%; }
  50% {
    background-position: 100% 96%; }
  100% {
    background-position: 0% 5%; } }
@keyframes background-color {
  0% {
    background-position: 0% 5%; }
  50% {
    background-position: 100% 96%; }
  100% {
    background-position: 0% 5%; } }

/*# sourceMappingURL=style4.css.map */