/* PRELOAD SPINNER */

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #f5f5f5;
  }
  
  #loader {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .cssload-spinner {
    height: 50px;
    width: 50px;
    margin: 0 auto;
    position: relative;
    animation: cssload-invert 1.7s infinite steps(2, end);
    -o-animation: cssload-invert 1.7s infinite steps(2, end);
    -ms-animation: cssload-invert 1.7s infinite steps(2, end);
    -webkit-animation: cssload-invert 1.7s infinite steps(2, end);
    -moz-animation: cssload-invert 1.7s infinite steps(2, end);
  }
  
  .cssload-ball {
    height: 100%;
    width: 100%;
    position: absolute;
    border-radius: 50%;
    top: 0;
    left: 0;
    background: rgb(255,51,102);
  }
  
  .cssload-ball-1 {
    animation: cssload-ball1 0.85s infinite alternate linear;
    -o-animation: cssload-ball1 0.85s infinite alternate linear;
    -ms-animation: cssload-ball1 0.85s infinite alternate linear;
    -webkit-animation: cssload-ball1 0.85s infinite alternate linear;
    -moz-animation: cssload-ball1 0.85s infinite alternate linear;
  }
  
  .cssload-ball-2 {
    animation: cssload-ball2 0.85s infinite alternate linear;
    -o-animation: cssload-ball2 0.85s infinite alternate linear;
    -ms-animation: cssload-ball2 0.85s infinite alternate linear;
    -webkit-animation: cssload-ball2 0.85s infinite alternate linear;
    -moz-animation: cssload-ball2 0.85s infinite alternate linear;
  }
  
  .cssload-ball-3 {
    animation: cssload-ball3 0.85s infinite alternate linear;
    -o-animation: cssload-ball3 0.85s infinite alternate linear;
    -ms-animation: cssload-ball3 0.85s infinite alternate linear;
    -webkit-animation: cssload-ball3 0.85s infinite alternate linear;
    -moz-animation: cssload-ball3 0.85s infinite alternate linear;
  }
  
  .cssload-ball-4 {
    animation: cssload-ball4 0.85s infinite alternate linear;
    -o-animation: cssload-ball4 0.85s infinite alternate linear;
    -ms-animation: cssload-ball4 0.85s infinite alternate linear;
    -webkit-animation: cssload-ball4 0.85s infinite alternate linear;
    -moz-animation: cssload-ball4 0.85s infinite alternate linear;
  }
  
  @keyframes cssload-invert {
    100% {
      transform: rotate(180deg);
    }
  }
  
  @-o-keyframes cssload-invert {
    100% {
      -o-transform: rotate(180deg);
    }
  }
  
  @-ms-keyframes cssload-invert {
    100% {
      -ms-transform: rotate(180deg);
    }
  }
  
  @-webkit-keyframes cssload-invert {
    100% {
      -webkit-transform: rotate(180deg);
    }
  }
  
  @-moz-keyframes cssload-invert {
    100% {
      -moz-transform: rotate(180deg);
    }
  }
  
  @keyframes cssload-ball1 {
    12% {
      transform: none;
    }
    26% {
      transform: translateX(25%) scale(1, 0.8);
    }
    40% {
      transform: translateX(50%) scale(0.8, 0.8);
    }
    60% {
      transform: translateX(50%) scale(0.8, 0.8);
    }
    74% {
      transform: translate(50%, 25%) scale(0.6, 0.8);
    }
    88% {
      transform: translate(50%, 50%) scale(0.6, 0.6);
    }
    100% {
      transform: translate(50%, 50%) scale(0.6, 0.6);
    }
  }
  
  @-o-keyframes cssload-ball1 {
    12% {
      -o-transform: none;
    }
    26% {
      -o-transform: translateX(25%) scale(1, 0.8);
    }
    40% {
      -o-transform: translateX(50%) scale(0.8, 0.8);
    }
    60% {
      -o-transform: translateX(50%) scale(0.8, 0.8);
    }
    74% {
      -o-transform: translate(50%, 25%) scale(0.6, 0.8);
    }
    88% {
      -o-transform: translate(50%, 50%) scale(0.6, 0.6);
    }
    100% {
      -o-transform: translate(50%, 50%) scale(0.6, 0.6);
    }
  }
  
  @-ms-keyframes cssload-ball1 {
    12% {
      -ms-transform: none;
    }
    26% {
      -ms-transform: translateX(25%) scale(1, 0.8);
    }
    40% {
      -ms-transform: translateX(50%) scale(0.8, 0.8);
    }
    60% {
      -ms-transform: translateX(50%) scale(0.8, 0.8);
    }
    74% {
      -ms-transform: translate(50%, 25%) scale(0.6, 0.8);
    }
    88% {
      -ms-transform: translate(50%, 50%) scale(0.6, 0.6);
    }
    100% {
      -ms-transform: translate(50%, 50%) scale(0.6, 0.6);
    }
  }
  
  @-webkit-keyframes cssload-ball1 {
    12% {
      -webkit-transform: none;
    }
    26% {
      -webkit-transform: translateX(25%) scale(1, 0.8);
    }
    40% {
      -webkit-transform: translateX(50%) scale(0.8, 0.8);
    }
    60% {
      -webkit-transform: translateX(50%) scale(0.8, 0.8);
    }
    74% {
      -webkit-transform: translate(50%, 25%) scale(0.6, 0.8);
    }
    88% {
      -webkit-transform: translate(50%, 50%) scale(0.6, 0.6);
    }
    100% {
      -webkit-transform: translate(50%, 50%) scale(0.6, 0.6);
    }
  }
  
  @-moz-keyframes cssload-ball1 {
    12% {
      -moz-transform: none;
    }
    26% {
      -moz-transform: translateX(25%) scale(1, 0.8);
    }
    40% {
      -moz-transform: translateX(50%) scale(0.8, 0.8);
    }
    60% {
      -moz-transform: translateX(50%) scale(0.8, 0.8);
    }
    74% {
      -moz-transform: translate(50%, 25%) scale(0.6, 0.8);
    }
    88% {
      -moz-transform: translate(50%, 50%) scale(0.6, 0.6);
    }
    100% {
      -moz-transform: translate(50%, 50%) scale(0.6, 0.6);
    }
  }
  
  @keyframes cssload-ball2 {
    12% {
      transform: none;
    }
    26% {
      transform: translateX(25%) scale(1, 0.8);
    }
    40% {
      transform: translateX(50%) scale(0.8, 0.8);
    }
    60% {
      transform: translateX(50%) scale(0.8, 0.8);
    }
    74% {
      transform: translate(50%, -25%) scale(0.6, 0.8);
    }
    88% {
      transform: translate(50%, -50%) scale(0.6, 0.6);
    }
    100% {
      transform: translate(50%, -50%) scale(0.6, 0.6);
    }
  }
  
  @-o-keyframes cssload-ball2 {
    12% {
      -o-transform: none;
    }
    26% {
      -o-transform: translateX(25%) scale(1, 0.8);
    }
    40% {
      -o-transform: translateX(50%) scale(0.8, 0.8);
    }
    60% {
      -o-transform: translateX(50%) scale(0.8, 0.8);
    }
    74% {
      -o-transform: translate(50%, -25%) scale(0.6, 0.8);
    }
    88% {
      -o-transform: translate(50%, -50%) scale(0.6, 0.6);
    }
    100% {
      -o-transform: translate(50%, -50%) scale(0.6, 0.6);
    }
  }
  
  @-ms-keyframes cssload-ball2 {
    12% {
      -ms-transform: none;
    }
    26% {
      -ms-transform: translateX(25%) scale(1, 0.8);
    }
    40% {
      -ms-transform: translateX(50%) scale(0.8, 0.8);
    }
    60% {
      -ms-transform: translateX(50%) scale(0.8, 0.8);
    }
    74% {
      -ms-transform: translate(50%, -25%) scale(0.6, 0.8);
    }
    88% {
      -ms-transform: translate(50%, -50%) scale(0.6, 0.6);
    }
    100% {
      -ms-transform: translate(50%, -50%) scale(0.6, 0.6);
    }
  }
  
  @-webkit-keyframes cssload-ball2 {
    12% {
      -webkit-transform: none;
    }
    26% {
      -webkit-transform: translateX(25%) scale(1, 0.8);
    }
    40% {
      -webkit-transform: translateX(50%) scale(0.8, 0.8);
    }
    60% {
      -webkit-transform: translateX(50%) scale(0.8, 0.8);
    }
    74% {
      -webkit-transform: translate(50%, -25%) scale(0.6, 0.8);
    }
    88% {
      -webkit-transform: translate(50%, -50%) scale(0.6, 0.6);
    }
    100% {
      -webkit-transform: translate(50%, -50%) scale(0.6, 0.6);
    }
  }
  
  @-moz-keyframes cssload-ball2 {
    12% {
      -moz-transform: none;
    }
    26% {
      -moz-transform: translateX(25%) scale(1, 0.8);
    }
    40% {
      -moz-transform: translateX(50%) scale(0.8, 0.8);
    }
    60% {
      -moz-transform: translateX(50%) scale(0.8, 0.8);
    }
    74% {
      -moz-transform: translate(50%, -25%) scale(0.6, 0.8);
    }
    88% {
      -moz-transform: translate(50%, -50%) scale(0.6, 0.6);
    }
    100% {
      -moz-transform: translate(50%, -50%) scale(0.6, 0.6);
    }
  }
  
  @keyframes cssload-ball3 {
    12% {
      transform: none;
    }
    26% {
      transform: translateX(-25%) scale(1, 0.8);
    }
    40% {
      transform: translateX(-50%) scale(0.8, 0.8);
    }
    60% {
      transform: translateX(-50%) scale(0.8, 0.8);
    }
    74% {
      transform: translate(-50%, 25%) scale(0.6, 0.8);
    }
    88% {
      transform: translate(-50%, 50%) scale(0.6, 0.6);
    }
    100% {
      transform: translate(-50%, 50%) scale(0.6, 0.6);
    }
  }
  
  @-o-keyframes cssload-ball3 {
    12% {
      -o-transform: none;
    }
    26% {
      -o-transform: translateX(-25%) scale(1, 0.8);
    }
    40% {
      -o-transform: translateX(-50%) scale(0.8, 0.8);
    }
    60% {
      -o-transform: translateX(-50%) scale(0.8, 0.8);
    }
    74% {
      -o-transform: translate(-50%, 25%) scale(0.6, 0.8);
    }
    88% {
      -o-transform: translate(-50%, 50%) scale(0.6, 0.6);
    }
    100% {
      -o-transform: translate(-50%, 50%) scale(0.6, 0.6);
    }
  }
  
  @-ms-keyframes cssload-ball3 {
    12% {
      -ms-transform: none;
    }
    26% {
      -ms-transform: translateX(-25%) scale(1, 0.8);
    }
    40% {
      -ms-transform: translateX(-50%) scale(0.8, 0.8);
    }
    60% {
      -ms-transform: translateX(-50%) scale(0.8, 0.8);
    }
    74% {
      -ms-transform: translate(-50%, 25%) scale(0.6, 0.8);
    }
    88% {
      -ms-transform: translate(-50%, 50%) scale(0.6, 0.6);
    }
    100% {
      -ms-transform: translate(-50%, 50%) scale(0.6, 0.6);
    }
  }
  
  @-webkit-keyframes cssload-ball3 {
    12% {
      -webkit-transform: none;
    }
    26% {
      -webkit-transform: translateX(-25%) scale(1, 0.8);
    }
    40% {
      -webkit-transform: translateX(-50%) scale(0.8, 0.8);
    }
    60% {
      -webkit-transform: translateX(-50%) scale(0.8, 0.8);
    }
    74% {
      -webkit-transform: translate(-50%, 25%) scale(0.6, 0.8);
    }
    88% {
      -webkit-transform: translate(-50%, 50%) scale(0.6, 0.6);
    }
    100% {
      -webkit-transform: translate(-50%, 50%) scale(0.6, 0.6);
    }
  }
  
  @-moz-keyframes cssload-ball3 {
    12% {
      -moz-transform: none;
    }
    26% {
      -moz-transform: translateX(-25%) scale(1, 0.8);
    }
    40% {
      -moz-transform: translateX(-50%) scale(0.8, 0.8);
    }
    60% {
      -moz-transform: translateX(-50%) scale(0.8, 0.8);
    }
    74% {
      -moz-transform: translate(-50%, 25%) scale(0.6, 0.8);
    }
    88% {
      -moz-transform: translate(-50%, 50%) scale(0.6, 0.6);
    }
    100% {
      -moz-transform: translate(-50%, 50%) scale(0.6, 0.6);
    }
  }
  
  @keyframes cssload-ball4 {
    12% {
      transform: none;
    }
    26% {
      transform: translateX(-25%) scale(1, 0.8);
    }
    40% {
      transform: translateX(-50%) scale(0.8, 0.8);
    }
    60% {
      transform: translateX(-50%) scale(0.8, 0.8);
    }
    74% {
      transform: translate(-50%, -25%) scale(0.6, 0.8);
    }
    88% {
      transform: translate(-50%, -50%) scale(0.6, 0.6);
    }
    100% {
      transform: translate(-50%, -50%) scale(0.6, 0.6);
    }
  }
  
  @-o-keyframes cssload-ball4 {
    12% {
      -o-transform: none;
    }
    26% {
      -o-transform: translateX(-25%) scale(1, 0.8);
    }
    40% {
      -o-transform: translateX(-50%) scale(0.8, 0.8);
    }
    60% {
      -o-transform: translateX(-50%) scale(0.8, 0.8);
    }
    74% {
      -o-transform: translate(-50%, -25%) scale(0.6, 0.8);
    }
    88% {
      -o-transform: translate(-50%, -50%) scale(0.6, 0.6);
    }
    100% {
      -o-transform: translate(-50%, -50%) scale(0.6, 0.6);
    }
  }
  
  @-ms-keyframes cssload-ball4 {
    12% {
      -ms-transform: none;
    }
    26% {
      -ms-transform: translateX(-25%) scale(1, 0.8);
    }
    40% {
      -ms-transform: translateX(-50%) scale(0.8, 0.8);
    }
    60% {
      -ms-transform: translateX(-50%) scale(0.8, 0.8);
    }
    74% {
      -ms-transform: translate(-50%, -25%) scale(0.6, 0.8);
    }
    88% {
      -ms-transform: translate(-50%, -50%) scale(0.6, 0.6);
    }
    100% {
      -ms-transform: translate(-50%, -50%) scale(0.6, 0.6);
    }
  }
  
  @-webkit-keyframes cssload-ball4 {
    12% {
      -webkit-transform: none;
    }
    26% {
      -webkit-transform: translateX(-25%) scale(1, 0.8);
    }
    40% {
      -webkit-transform: translateX(-50%) scale(0.8, 0.8);
    }
    60% {
      -webkit-transform: translateX(-50%) scale(0.8, 0.8);
    }
    74% {
      -webkit-transform: translate(-50%, -25%) scale(0.6, 0.8);
    }
    88% {
      -webkit-transform: translate(-50%, -50%) scale(0.6, 0.6);
    }
    100% {
      -webkit-transform: translate(-50%, -50%) scale(0.6, 0.6);
    }
  }
  
  @-moz-keyframes cssload-ball4 {
    12% {
      -moz-transform: none;
    }
    26% {
      -moz-transform: translateX(-25%) scale(1, 0.8);
    }
    40% {
      -moz-transform: translateX(-50%) scale(0.8, 0.8);
    }
    60% {
      -moz-transform: translateX(-50%) scale(0.8, 0.8);
    }
    74% {
      -moz-transform: translate(-50%, -25%) scale(0.6, 0.8);
    }
    88% {
      -moz-transform: translate(-50%, -50%) scale(0.6, 0.6);
    }
    100% {
      -moz-transform: translate(-50%, -50%) scale(0.6, 0.6);
    }
  }