//preloader css
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: $white;
  .preloader-wrap {
    display: block;
    position: relative;
    text-align: center;
    top: 40%;
    .preloader {
      position: absolute;
      left: 50%;
      margin-left: -35px;
      height: 60px;
      width: 70px;
      overflow: hidden;

      i {
        display: block;
        width: 20px;
        height: 20px;
        background: $headings-color;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -8px 0 0 -8px;
        opacity: 1;
        -webkit-transform: translate3d(60px, 0, 0);
        overflow: hidden;
        text-indent: -9999px;
        border: 2px solid $white;
      }
      i:nth-child(1) {
        background: $primary;
        -webkit-animation: kohost 1.75s ease-in-out infinite;
        -moz-animation: kohost 1.75s ease-in-out infinite;
        -ms-animation: kohost 1.75s ease-in-out infinite;
        -o-animation: kohost 1.75s ease-in-out infinite;
        animation: kohost 1.75s ease-in-out infinite;
      }
      i:nth-child(2) {
        background: $accent;
        -webkit-animation: kohost 1.75s ease-in-out infinite 0.3s;
        -moz-animation: kohost 1.75s ease-in-out infinite 0.3s;
        -ms-animation: kohost 1.75s ease-in-out infinite 0.3s;
        -o-animation: kohost 1.75s ease-in-out infinite 0.3s;
        animation: kohost 1.75s ease-in-out infinite 0.3s;
      }
      i:nth-child(3) {
        background: $warning;
        -webkit-animation: kohost 1.75s ease-in-out infinite 0.6s;
        -moz-animation: kohost 1.75s ease-in-out infinite 0.6s;
        -ms-animation: kohost 1.75s ease-in-out infinite 0.6s;
        -o-animation: kohost 1.75s ease-in-out infinite 0.6s;
        animation: kohost 1.75s ease-in-out infinite 0.6s;
      }

      @-webkit-keyframes kohost {
        0% {
          opacity: 0;
          -webkit-transform: translate3d(60px, 0, 0);
          -moz-transform: translate3d(60px, 0, 0);
          -ms-transform: translate3d(60px, 0, 0);
          -o-transform: translate3d(60px, 0, 0);
          transform: translate3d(60px, 0, 0);
        }
        30% {
          opacity: 1;
          -webkit-transform: translate3d(0, 0, 0);
          -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
        70% {
          opacity: 1;
          -webkit-transform: translate3d(0, 0, 0);
          -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
        100% {
          opacity: 0;
          -webkit-transform: translate3d(-300px, 0, 0);
          -moz-transform: translate3d(-300px, 0, 0);
          -ms-transform: translate3d(-300px, 0, 0);
          -o-transform: translate3d(-300px, 0, 0);
          transform: translate3d(-300px, 0, 0);
        }
      }
      @-o-keyframes kohost {
        0% {
          opacity: 0;
          -webkit-transform: translate3d(60px, 0, 0);
          -moz-transform: translate3d(60px, 0, 0);
          -ms-transform: translate3d(60px, 0, 0);
          -o-transform: translate3d(60px, 0, 0);
          transform: translate3d(60px, 0, 0);
        }
        30% {
          opacity: 1;
          -webkit-transform: translate3d(0, 0, 0);
          -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
        70% {
          opacity: 1;
          -webkit-transform: translate3d(0, 0, 0);
          -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
        100% {
          opacity: 0;
          -webkit-transform: translate3d(-300px, 0, 0);
          -moz-transform: translate3d(-300px, 0, 0);
          -ms-transform: translate3d(-300px, 0, 0);
          -o-transform: translate3d(-300px, 0, 0);
          transform: translate3d(-300px, 0, 0);
        }
      }
      @keyframes kohost {
        0% {
          opacity: 0;
          -webkit-transform: translate3d(60px, 0, 0);
          -moz-transform: translate3d(60px, 0, 0);
          -ms-transform: translate3d(60px, 0, 0);
          -o-transform: translate3d(60px, 0, 0);
          transform: translate3d(60px, 0, 0);
        }
        30% {
          opacity: 1;
          -webkit-transform: translate3d(0, 0, 0);
          -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
        70% {
          opacity: 1;
          -webkit-transform: translate3d(0, 0, 0);
          -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
        100% {
          opacity: 0;
          -webkit-transform: translate3d(-300px, 0, 0);
          -moz-transform: translate3d(-300px, 0, 0);
          -ms-transform: translate3d(-300px, 0, 0);
          -o-transform: translate3d(-300px, 0, 0);
          transform: translate3d(-300px, 0, 0);
        }
      }

    }
  }

}