
.loaderouter{
	position: fixed;
     top: 0;
    left: 0;
    color: #000;
    margin: auto;
    background: #fff;
    width: 100%;
    height: 100%;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loadertext {
    color: #000;
    width: 100%;
    margin: auto;
    max-width: 630px;
}
.progress {
  background: #fffbfa;
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  padding:8px 5px;
  display: flex;
  height: 10px;
  width: 100%;
  box-shadow: 0 0 20px -2px rgba(0, 0, 0, 0.18);
  border:1px solid #fbc2cf;
  margin-bottom:20px
}
.loader {
  width: 50px;
  padding: 8px;
  margin:0 auto 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d85271;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}
/*
.progress-value {
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: #d85271 ;
  height: 8px;
  width: 33.33%;
}

.progress-value.value_two{width:66.66%}
.progress-value.value_three{width:100%}
  */
.loadertext h1 {
  text-align: center;
  font-size:35px;
}
.words-wrapper {
  display: inline-block;
  position: relative;
  text-align: center;
  width:100%;

 .text_sec {
  opacity:0;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  font-weight:200;
  width:100%;
  }
  
  .is-visible {
    position:relative;
    opacity:1;
    -webkit-animation: push-in 0.5s;
    -moz-animation: push-in 0.5s;
    animation: push-in 0.5s;
  }
  
  .is-hidden {
    -webkit-animation: push-out 0.5s;
    -moz-animation: push-out 0.5s;
    animation: push-out 0.5s;
  }
}

@-webkit-keyframes push-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }
  70% {
    opacity: 1;
    -webkit-transform: translateY(10%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes push-in {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -moz-transform: translateY(10%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@keyframes push-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateXY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -ms-transform: translateY(10%);
    -o-transform: translateY(10%);
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes push-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(110%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
}
@-moz-keyframes push-out {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -moz-transform: translateY(110%);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
}
@keyframes push-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateX(110%);
    -moz-transform: translateY(110%);
    -ms-transform: translateY(110%);
    -o-transform: translateY(110%);
    transform: translateY(110%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@media screen and (max-width: 990px) {
.loadertext h1 {
  font-size:30px;
}
}
@media screen and (max-width: 768px) {
.loadertext h1 {
  font-size:25px;
}
.loader {
  width: 35px;padding: 4px;margin:0 auto 10px;
}
}

@media screen and (max-width: 580px) {
	.loadertext {
    max-width: 90%;
	        margin-top: 50%;
}/*
.progress{
	margin-bottom:10px;
}*/
}
@media screen and (max-width: 420px) {
	.loadertext h1 {
  font-size:20px;
}
.loader {
  width: 30px;padding: 4px;
}
/*
.progress-value{
	height:5px
}
.progress{
	height:8px;
	padding:5px 3px
}*/
}