/**
 *  demo D
 */
* {
  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: 4rem;
  height: 4rem;
  letter-spacing: 3px; }
  .hypnoload span {
    display: block;
    border: 0.5rem solid transparent;
    border-top-color: #42D6A8;
    border-left-color: #64C0CA;
    border-bottom-color: #42D6A8;
    border-right-color: #64C0CA;
    border-radius: 50%;
    animation: hypnoload-spin 7s steps(420) infinite;
    position: absolute;
    will-change: transform; }
  .hypnoload span:nth-child(1) {
    left: 0rem;
    top: 0rem;
    width: 4rem;
    height: 4rem;
    animation-duration: 7s;
    animation-timing-function: steps(420); }
  .hypnoload span:nth-child(2) {
    left: 0.5rem;
    top: 0.5rem;
    width: 3rem;
    height: 3rem;
    animation-duration: 6.66667s;
    animation-timing-function: steps(400); }
  .hypnoload span:nth-child(3) {
    left: 1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
    animation-duration: 6.33333s;
    animation-timing-function: steps(380); }
  .hypnoload.hyl-reverse span:nth-child(even) {
    animation-direction: reverse; }
  .hypnoload.hyl-rounded {
    width: 5rem;
    height: 5rem; }
    .hypnoload.hyl-rounded span {
      box-shadow: 0 0.5rem 0 #42D6A8, 0 -0.5rem 0 #42D6A8, 0.5rem 0 0 #64C0CA, -0.5rem 0 0 #64C0CA;
      border-color: transparent; }
    .hypnoload.hyl-rounded span:nth-child(1) {
      left: 0.5rem;
      top: 0.5rem; }
    .hypnoload.hyl-rounded span:nth-child(2) {
      left: 1rem;
      top: 1rem; }
    .hypnoload.hyl-rounded span:nth-child(3) {
      left: 1.5rem;
      top: 1.5rem; }
  .hypnoload.hyl-rounded-simple span {
    box-shadow: 0 0.5rem 0 #42D6A8;
    border-color: transparent !important; }
  .hypnoload.hyl-colors span:nth-child(1) {
    border-top-color: #29bc8e;
    border-bottom-color: #29bc8e;
    border-left-color: #40afbb;
    border-right-color: #40afbb; }
  .hypnoload.hyl-colors.hyl-rounded span:nth-child(1) {
    border-color: transparent;
    box-shadow: 0 0.5rem 0 #29bc8e, 0 -0.5rem 0 #29bc8e, 0.5rem 0 0 #40afbb, -0.5rem 0 0 #40afbb; }
  .hypnoload.hyl-colors.hyl-rounded-simple span:nth-child(1) {
    border-color: transparent;
    box-shadow: 0 0.5rem 0 #29bc8e; }
  .hypnoload.hyl-colors span:nth-child(2) {
    border-top-color: #2cca99;
    border-bottom-color: #2cca99;
    border-left-color: #4bb6c1;
    border-right-color: #4bb6c1; }
  .hypnoload.hyl-colors.hyl-rounded span:nth-child(2) {
    border-color: transparent;
    box-shadow: 0 0.5rem 0 #2cca99, 0 -0.5rem 0 #2cca99, 0.5rem 0 0 #4bb6c1, -0.5rem 0 0 #4bb6c1; }
  .hypnoload.hyl-colors.hyl-rounded-simple span:nth-child(2) {
    border-color: transparent;
    box-shadow: 0 0.5rem 0 #2cca99; }
  .hypnoload.hyl-colors span:nth-child(3) {
    border-top-color: #34d3a2;
    border-bottom-color: #34d3a2;
    border-left-color: #57bbc6;
    border-right-color: #57bbc6; }
  .hypnoload.hyl-colors.hyl-rounded span:nth-child(3) {
    border-color: transparent;
    box-shadow: 0 0.5rem 0 #34d3a2, 0 -0.5rem 0 #34d3a2, 0.5rem 0 0 #57bbc6, -0.5rem 0 0 #57bbc6; }
  .hypnoload.hyl-colors.hyl-rounded-simple span:nth-child(3) {
    border-color: transparent;
    box-shadow: 0 0.5rem 0 #34d3a2; }

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