.tagcloud-outer {
  width: 100%;
  height: 400px;
}

.tagcloud--item {
  white-space:nowrap;
  position: absolute;
  top: 50%;
  left: 50%;

  will-change: transform, opacity, filter;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all .1s;
  -moz-transition: all .1s;
  -o-transition: all .1s;
  transition: all .1s;
}

.tagcloud--item-weight-1 {
  font-size: 0.7rem;
}
.tagcloud--item-weight-2 {
  font-size: 0.8rem;
}
.tagcloud--item-weight-3 {
  font-size: 0.9rem;
}
.tagcloud--item-weight-4 {
  font-size: 1.0rem;
}
.tagcloud--item-weight-5 {
  font-size: 1.2rem;
}
.tagcloud--item-weight-6 {
  font-size: 1.4rem;
}
.tagcloud--item-weight-7 {
  font-size: 1.6rem;
}
.tagcloud--item-weight-8 {
  font-size: 1.9rem;
}
.tagcloud--item-weight-9 {
  font-size: 2.2rem;
}
.tagcloud--item-weight-10 {
  font-size: 2.5rem;
}

/* Mobile devices, large */
@media only screen and (max-width: 76.1875em) {
  .tagcloud-outer {
    height: 300px;
  }

  /* Move to center */
  .tagcloud {
    margin: 0 auto;
  }
}

/* Mobile devices, small */
@media only screen and (max-width: 59.9375em) {
  .tagcloud-outer {
    height: 200px;
  }

  /* Move to center */
  .tagcloud {
    margin: 0 auto;
  }

  /* Smaller tags */
  .tagcloud--item-weight-1 {
    font-size: 0.65rem;
  }
  .tagcloud--item-weight-2 {
    font-size: 0.75rem;
  }
  .tagcloud--item-weight-3 {
    font-size: 0.85rem;
  }
  .tagcloud--item-weight-4 {
    font-size: 0.95rem;
  }
  .tagcloud--item-weight-5 {
    font-size: 1.1rem;
  }
  .tagcloud--item-weight-6 {
    font-size: 1.25rem;
  }
  .tagcloud--item-weight-7 {
    font-size: 1.4rem;
  }
  .tagcloud--item-weight-8 {
    font-size: 1.6rem;
  }
  .tagcloud--item-weight-9 {
    font-size: 1.8rem;
  }
  .tagcloud--item-weight-10 {
    font-size: 2.0rem;
  }
}