/*debut loader*/

#bgajax {

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background-color:rgba(255, 255, 255, 0.5) !important;
  background-color: transparent;
  display: none;
  z-index: 9999;
  cursor: none;

}



#bgajax img {
  width: 100px;
  height: 100px;
  top: 300px;
  position:fixed;
  display:none;
}

#bgpopup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.9);
  /*background-color:transparent;*/
  display:none;

  z-index:250;
  /*cursor: none;*/
}


.loader {
  margin: auto;

  width: 100px;

  height: 100px;
}
.loader:before {
  content:'';
  display: block;
  padding-top: 100%;
}
.showbox {
  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;
}

.circular {
  animation: rotate 2s linear infinite;
  height: 100px;
  transform-origin: center center;
  width: 100px;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
}


.path {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  animation:
          dash 1.5s ease-in-out infinite,
          color 6s ease-in-out infinite
;
  stroke-linecap: round;
}

@keyframes rotate{
  100%{
    transform: rotate(360deg);
  }
}
@keyframes dash{
  0%{
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50%{
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35px;
  }
  100%{
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124px;
  }
}
@keyframes color{
  100%, 0%{
    stroke: #004E98;
  }
  40%{
    stroke: #00914A;
  }
  66%{
    stroke: #ffa700;
  }
  80%, 90%{
    stroke: #d62d20;
  }
}

/*end loader*/