#loaderBG {    
  background-color: #1e2227;
  filter: alpha(opacity = 50); 
  align-items: center;    
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1111;
  display: block;
  opacity: 0.9;
  /* background:url("../images/popup_bg.png") repeat; */
}
.is-loading:after,
.is-loading-lg:after,
.loader11 {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background: 0 0;
    border: 3px solid #f44336;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: 1s spin linear infinite
}

.is-loading-lg:after,
.loader-lg {
    width: 2rem;
    height: 2rem;
    border-width: 5px
}

.is-loading-sm:after,
.loader-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px
}

.is-loading,
.is-loading-lg {
    position: relative;
    color: transparent !important
}

.is-loading>*,
.is-loading-lg>* {
    opacity: .2 !important
}

.is-loading:after,
.is-loading-lg:after,
.loader,
.loader1 {
    position: absolute;
    top: calc(50% - 1.5rem/2);
    left: calc(50% - 1.5rem/2);
    content: ''
}

.gifBg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin-top: -150px; /* Half the height */
  margin-left: -150px; /* Half the width */
  /* background-color: #fff;
  border-radius: 1rem; */
} 

.is-loading-lg:after {
    top: calc(50% - 2rem/2);
    left: calc(50% - 2rem/2)
}

.is-loading-sm:after {
    top: calc(50% - 1rem/2);
    left: calc(50% - 1rem/2)
}

.btn-danger.is-loading:after,
.btn-default.is-loading:after,
.btn-info.is-loading:after,
.btn-primary.is-loading:after,
.btn-secondary.is-loading:after,
.btn-success.is-loading:after,
.btn-warning.is-loading:after,
.card-danger.is-loading:after,
.card-default.is-loading:after,
.card-info.is-loading:after,
.card-primary.is-loading:after,
.card-secondary.is-loading:after,
.card-success.is-loading:after,
.card-warning.is-loading:after,
.is-loading-danger:after,
.is-loading-default:after,
.is-loading-info:after,
.is-loading-primary:after,
.is-loading-secondary:after,
.is-loading-success:after,
.is-loading-warning:after,
.loader-danger,
.loader-default,
.loader-info,
.loader-primary,
.loader-secondary,
.loader-success,
.loader-warning {
    border-bottom-color: transparent !important
}

.btn-danger.is-loading:after,
.btn-default.is-loading:after,
.btn-info.is-loading:after,
.btn-primary.is-loading:after,
.btn-secondary.is-loading:after,
.btn-success.is-loading:after,
.btn-warning.is-loading:after,
.card-danger.is-loading:after,
.card-default.is-loading:after,
.card-info.is-loading:after,
.card-primary.is-loading:after,
.card-secondary.is-loading:after,
.card-success.is-loading:after,
.card-warning.is-loading:after {
    border-color: #fff
}

.is-loading-default:after,
.loader-default {
    border-color: #1a2035
}

.is-loading-primary:after,
.loader-primary {
    border-color: #1572e8
}

.is-loading-secondary:after,
.loader-secondary {
    border-color: #6861ce
}

.is-loading-info:after,
.loader-info {
    border-color: #48abf7
}

.is-loading-success:after,
.loader-success {
    border-color: #31ce36
}

.is-loading-warning:after,
.loader-warning {
    border-color: #ffad46
}

.is-loading-danger:after,
.loader-danger {
    border-color: #f25961
}

@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}


.custom-menu svg {
    position: absolute;
    bottom: 0;
    left: 5px;
    width: 100%;
    height: auto; 
}

.custom-menu svg path.first-path {
    animation: scrollanim 1s ease-in-out infinite;
    animation-delay: 0.8s;
}

.custom-menu svg path.second-path {
    animation: scrollanim2 1s ease-in-out infinite;
}

@-webkit-keyframes scrollanim {
  0% {
    -webkit-transform: translate(-40px, 0);
    opacity: 0;
  }
  60% {
    -webkit-transform: translate(0, 0);
    opacity: 0.8;
  }
}
@-moz-keyframes scrollanim {
  0% {
    -moz-transform: translate(0, -40px);
    opacity: 0;
  }
  60% {
    -moz-transform: translate(0, 0);
    opacity: 0.8;
  }
}
@keyframes scrollanim {
  0% {
    -webkit-transform: translate(-20px, 0);
    -moz-transform: translate(-20px, 0);
    -ms-transform: translate(-20px, 0);
    -o-transform: translate(-20px, 0);
    transform: translate(-20px, 0);
    opacity: 0;
  }
  60% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 0.8;
  }
}
@-webkit-keyframes scrollanim2 {
  0% {
    -webkit-transform: translate(-20px, 0);
    opacity: 0;
  }
  60% {
    -webkit-transform: translate(0, 0px);
    opacity: 0.6;
  }
}
@-moz-keyframes scrollanim2 {
  0% {
    -moz-transform: translate(-20px, 0);
    opacity: 0;
  }
  60% {
    -moz-transform: translate(0, 0px);
    opacity: 0.6;
  }
}
@keyframes scrollanim2 {
  0% {
    -webkit-transform: translate(-20px, 0);
    -moz-transform: translate(-20px, 0);
    -ms-transform: translate(-20px, 0);
    -o-transform: translate(-20px, 0);
    transform: translate(-20px, 0);
    opacity: 0;
  }
  60% {
    -webkit-transform: translate(0, 0px);
    -moz-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    -o-transform: translate(0, 0px);
    transform: translate(0, 0px);
    opacity: 0.6;
  }
}


.loader-circle {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background: 0 0;
    border: 3px solid #f44336;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: 1s spin linear infinite
}

.loader {
  width: 64px;
  height: 64px;
  position: relative;
  background-image:
    linear-gradient(#f3f3f3 16px, transparent 0) ,
    linear-gradient(#FF3D00 16px, transparent 0) ,
    linear-gradient(#FF3D00 16px, transparent 0) ,
    linear-gradient(#f3f3f3 16px, transparent 0);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: left top , left bottom , right top , right bottom;
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  0% {
    width: 64px;
    height: 64px;
    transform: rotate(0deg)
  }
  50% {
    width: 30px;
    height: 30px;
    transform: rotate(180deg)
  }
  100% {
    width: 64px;
    height: 64px;
    transform: rotate(360deg)
  }
}