/**
 *  demo B
 */
* {
  box-sizing: border-box; }

html,
body {
  margin: 0; }

section {
  height: 20rem;
  width: 50%;
  float: left;
  position: relative; }
  section:after {
    content: '';
    clear: both;
    display: table; }

/**
 *  hypnoload.scss
 *    the hypnotic loading animation - by Freek van der Wand
 */
/**
 *  hypnoload.style.scss
 *    the hypnotic loading animation - by Freek van der Wand
 */
@keyframes hypnoload-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(720deg); } }
.hypnoload,
.hypnoload * {
  box-sizing: border-box; }

.hypnoload {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  box-shadow: 0 0 0 0 transparent;
  width: 6.2rem;
  height: 6.2rem;
  letter-spacing: 3px; }
  .hypnoload span {
    display: block;
    border: 0.6rem solid transparent;
    border-top-color: #FF0000;
    border-left-color: #F0F000;
    border-bottom-color: #0000FF;
    border-right-color: #00FF00;
    border-radius: 50%;
    animation: hypnoload-spin 3s steps(180) infinite;
    position: absolute;
    will-change: transform; }
  .hypnoload span:nth-child(1) {
    left: 0rem;
    top: 0rem;
    width: 6.2rem;
    height: 6.2rem;
    animation-duration: 3s;
    animation-timing-function: steps(180); }
  .hypnoload span:nth-child(2) {
    left: 0.5rem;
    top: 0.5rem;
    width: 5.2rem;
    height: 5.2rem;
    animation-duration: 2.5s;
    animation-timing-function: steps(150); }
  .hypnoload span:nth-child(3) {
    left: 1rem;
    top: 1rem;
    width: 4.2rem;
    height: 4.2rem;
    animation-duration: 2s;
    animation-timing-function: steps(120); }
  .hypnoload.hyl-reverse span:nth-child(even) {
    animation-direction: reverse; }
  .hypnoload.hyl-rounded {
    width: 7.4rem;
    height: 7.4rem; }
    .hypnoload.hyl-rounded span {
      box-shadow: 0 0.6rem 0 #0000FF, 0 -0.6rem 0 #FF0000, 0.6rem 0 0 #00FF00, -0.6rem 0 0 #F0F000;
      border-color: transparent; }
    .hypnoload.hyl-rounded span:nth-child(1) {
      left: 0.6rem;
      top: 0.6rem; }
    .hypnoload.hyl-rounded span:nth-child(2) {
      left: 1.1rem;
      top: 1.1rem; }
    .hypnoload.hyl-rounded span:nth-child(3) {
      left: 1.6rem;
      top: 1.6rem; }
  .hypnoload.hyl-rounded-simple span {
    box-shadow: 0 0.6rem 0 #FF0000;
    border-color: transparent !important; }
  .hypnoload.hyl-colors span:nth-child(1) {
    border-top-color: #ff8080;
    border-bottom-color: #8080ff;
    border-left-color: #ffff71;
    border-right-color: #80ff80; }
  .hypnoload.hyl-colors.hyl-rounded span:nth-child(1) {
    border-color: transparent;
    box-shadow: 0 0.6rem 0 #8080ff, 0 -0.6rem 0 #ff8080, 0.6rem 0 0 #80ff80, -0.6rem 0 0 #ffff71; }
  .hypnoload.hyl-colors.hyl-rounded-simple span:nth-child(1) {
    border-color: transparent;
    box-shadow: 0 0.6rem 0 #ff8080; }
  .hypnoload.hyl-colors span:nth-child(2) {
    border-top-color: #ff5555;
    border-bottom-color: #5555ff;
    border-left-color: #ffff46;
    border-right-color: #55ff55; }
  .hypnoload.hyl-colors.hyl-rounded span:nth-child(2) {
    border-color: transparent;
    box-shadow: 0 0.6rem 0 #5555ff, 0 -0.6rem 0 #ff5555, 0.6rem 0 0 #55ff55, -0.6rem 0 0 #ffff46; }
  .hypnoload.hyl-colors.hyl-rounded-simple span:nth-child(2) {
    border-color: transparent;
    box-shadow: 0 0.6rem 0 #ff5555; }
  .hypnoload.hyl-colors span:nth-child(3) {
    border-top-color: #ff2b2b;
    border-bottom-color: #2b2bff;
    border-left-color: #ffff1c;
    border-right-color: #2bff2b; }
  .hypnoload.hyl-colors.hyl-rounded span:nth-child(3) {
    border-color: transparent;
    box-shadow: 0 0.6rem 0 #2b2bff, 0 -0.6rem 0 #ff2b2b, 0.6rem 0 0 #2bff2b, -0.6rem 0 0 #ffff1c; }
  .hypnoload.hyl-colors.hyl-rounded-simple span:nth-child(3) {
    border-color: transparent;
    box-shadow: 0 0.6rem 0 #ff2b2b; }

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