html,
body {
  font-family: 'Rubik', sans-serif;
  color: #333;
}

a {
  font-weight: bold;
  color: #333;
  transition: 0.3s all ease;
}

a:hover {
  color: #659fd2;
  transition: 0.3s all ease;
}

b {
  font-weight: 700;
}

.hero {
  background-color: #fafafb;
}

.tabs a {
  color: #333;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: 0.3s all ease;
}

.title {
  color: #333;
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: 3px;
}

.tabs.is-boxed a:hover {
  background-color: rgba(0,0,0,0);
}

.tabs a:hover {
  color: #659fd2;
  transition: 0.3s all ease;
}

red {
  color: #EE5C5D;
}

yellow {
  color: #FFBA42;
}

green {
  color: #13C4A4;
}

blue {
  color: #659fd2;
}

/*---Animated circles---*/

.circles {
  height:             100%;
  left:               0;
  overflow:           hidden;
  position:           fixed;
  bottom:             0;
  width:              100%;
}

.circles li {
  animation:          animate 25s linear infinite;
  background:         #fff;
  bottom:             -150px;
  display:            block;
  height:             20px;
  list-style:         none;
  position:           absolute;
  width:              20px;
}

.circles li:nth-child(1) {
  animation-delay:    0s;
  height:             80px;
  left:               25%;
  width:              80px;
  background:         #EE5C5D;
}

.circles li:nth-child(2) {
  animation-duration: 12s;
  animation-delay:    2s;
  height:             20px;
  left:               10%;
  width:              20px;
  background:         #FFBA42;
}

.circles li:nth-child(3) {
  animation-delay:    4s;
  height:             20px;
  left:               70%;
  width:              20px;
  background:         #13C4A4;
}

.circles li:nth-child(4) {
  animation-delay:    0s;
  animation-duration: 18s;
  height:             60px;
  left:               40%;
  width:              60px;
  background:         #659fd2;
}

.circles li:nth-child(5) {
  animation-delay:    0s;
  height:             20px;
  left:               65%;
  width:              20px;
  background:         #EE5C5D;
}

.circles li:nth-child(6) {
  animation-delay:    3s;
  height:             110px;
  left:               75%;
  width:              110px;
  background:         #FFBA42;
}

.circles li:nth-child(7) {
  animation-delay:    7s;
  height:             150px;
  left:               35%;
  width:              150px;
  background:         #13C4A4;
}

.circles li:nth-child(8) {
  animation-delay:    15s;
  animation-duration: 45s;
  height:             25px;
  left:               50%;
  width:              25px;
  background:         #659fd2;
}

/*--Keyframes--*/

@keyframes animate {
  0% {
    border-radius:  100%;
    opacity:        1;
    transform:      translateY(0);
  }

  100% {
    border-radius:  100%;
    opacity:        0;
    transform:      translateY(-1000px);
  }
}