.loader {
  position: relative;
  width: 80px;
  margin:0px auto !important;
  top:20px;
}
.loadtxt{
  position: relative;
  text-align:center;
  font-family:arial;
  font-weight:600;
}

.duo {
  height: 20px;
  width: 50px;
  background: hsla(0, 0%, 0%, 0.0);
  position: absolute;
  
}

.duo, .dot {
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.duo1 {
  left: 0;
}

.duo2 {
  left: 30px
}


.dot {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #209CEE;
  position: absolute;
}

.dot-a {
  left: 0px;  
}

.dot-b {
  right: 0px;
}


@keyframes spin {
    0% { transform: rotate(0deg) }
   50% { transform: rotate(180deg) }
  100% { transform: rotate(180deg) }
}

@keyframes onOff {
    0% { opacity: 0; }
   49% { opacity: 0; }
   50% { opacity: 1; }
  100% { opacity: 1; }
}

.duo1 {
  animation-name: spin;
}

.duo2 {
  animation-name: spin;
  animation-direction: reverse;
}

.duo2 .dot-b {
  animation-name: onOff;
}

.duo1 .dot-a {
  opacity: 0;
  animation-name: onOff;
  animation-direction: reverse;
}

#loaderbox{
    display:none;
}
#loaderboxcont{
    width:350px;
    height:270px;
    border:1px solid lightgray;
    background-color:white;
    border-radius:5px;
    text-align:center;
    position:fixed;
    z-index:99999;
    left:40%;
    top:30%;
    padding-top:5%;
    box-shadow:1px 1px 5px 1px lightgray;
}
#loaderboxbg{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    left:0px;
    top:0px;
    clear:both;
    background-color:black;
    opacity:0.4;
}

@media screen and (max-width:800px) {
  #loaderboxcont{
    width:200px;
    height:120px;
    border:1px solid lightgray;
    background-color:white;
    border-radius:5px;
    text-align:center;
    position:fixed;
    z-index:99999;
    left:30%;
    top:40%;
    padding-top:5%;
    box-shadow:1px 1px 5px 1px lightgray;
  }
}