/*============= PRELOADER CSS AREA ===============*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-w;
  z-index: 999999;
}

.preloader {
  width: 70px;
  height: 70px;
  display: inline-block;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  span {
    position: absolute;
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background: $bg-color2;
    animation: preloader 1.3s linear infinite;
  }
  
}
.preloader2 {
  width: 70px;
  height: 70px;
  display: inline-block;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  span {
    position: absolute;
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background: $bg-color3;
    animation: preloader 1.3s linear infinite;
  }
  
}
.preloader3 {
  width: 70px;
  height: 70px;
  display: inline-block;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  span {
    position: absolute;
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background: $bg43;
    animation: preloader 1.3s linear infinite;
  }
  
}
.preloader4 {
  width: 70px;
  height: 70px;
  display: inline-block;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  span {
    position: absolute;
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background:$bg-color9;
    animation: preloader 1.3s linear infinite;
  }
  
}
.preloader5 {
  width: 70px;
  height: 70px;
  display: inline-block;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  span {
    position: absolute;
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background:$color7;
    animation: preloader 1.3s linear infinite;
  }
}
.preloader6 {
  width: 70px;
  height: 70px;
  display: inline-block;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  span {
    position: absolute;
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background:$color9;
    animation: preloader 1.3s linear infinite;
  }
}
.preloader span:last-child {
  animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
}
.preloader2{
  span:last-child {
    animation-delay: -0.8s;
    -webkit-animation-delay: -0.8s;
  }
}
.preloader3{
  span:last-child {
    animation-delay: -0.8s;
    -webkit-animation-delay: -0.8s;
  }
}
.preloader4{
  span:last-child {
    animation-delay: -0.8s;
    -webkit-animation-delay: -0.8s;
  }
}
.preloader5{
  span:last-child {
    animation-delay: -0.8s;
    -webkit-animation-delay: -0.8s;
  }
}
.preloader6{
  span:last-child {
    animation-delay: -0.8s;
    -webkit-animation-delay: -0.8s;
  }
}

// PAGE PROGRESS STARTS //
  .progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 30px;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
  }
  .progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 99;
  }
  .progress-wrap::after {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
  }
  .progress-wrap:hover::after {
    opacity: 0;
  }
  .progress-wrap::before {
    position: absolute;
    font-family: "FontAwesome";
    content: "\f062";
    text-align: center;
    line-height: 56px;
    font-size: 18px;
    opacity: 0;
    left: 0;
    top: 0;
    height: 56px;
    width: 56px;
    cursor: pointer;
    display: block;
    z-index: 2;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
  }
  .progress-wrap:hover::before {
    opacity: 1;
  }
  .progress-wrap svg path {
    fill: none;
  }
  .progress-wrap svg.progress-circle path {
    stroke: $title-color1;
    stroke-width: 4;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
  }
  
//   PAGE PROGRESS ENDS //

  /*============= PRELOADER CSS AREA ENDS ===============*/