/*--------------------------------------------------------------
    Loader 3
--------------------------------------------------------------*/

.loader3 { background-color: var(--wdtBodyBGColor) !important; height: 100%; width: 100vw; z-index: 99999; position: fixed;
    pointer-events: none; -webkit-transform: translateY(0%); transform: translateY(0%); transition: transform 375ms cubic-bezier(0.7, 0, 0.3, 1); }

.loader3 .loader-counter-3 { flex-direction: column; padding: 30px;
    position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

.loader3 .loader-counter-3 div.loader-text { position: relative; width: 100%; max-width: 400px; text-align: center; 
    letter-spacing: 10px; margin-bottom: clamp(0.75rem, 0.4615rem + 1.2821vw, 2rem); display: flex; justify-content: space-evenly; }
.loader3 .loader-counter-3 div.loader-text h4 {
    -webkit-animation: moveLetters 2.4s infinite ease-in-out;
            animation: moveLetters 2.4s infinite ease-in-out;
    transform: translatex(0);
    position: relative;
    display: inline-block; font-size: clamp(1.75rem, 1.4615rem + 1.2821vw, 3rem);
    opacity: 0; margin: 0; color: var(--wdtPrimaryColor);
  }
  
.loader3 .loader-counter-3 div.loader-text h4:nth-child(1) {
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
  }
  
.loader3 .loader-counter-3 div.loader-text h4:nth-child(2) {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
  
.loader3 .loader-counter-3 div.loader-text h4:nth-child(3) {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
  }
  
.loader3 .loader-counter-3 div.loader-text h4:nth-child(4) {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
  }
  
.loader3 .loader-counter-3 div.loader-text h4:nth-child(5) {
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
  }
  
.loader3 .loader-counter-3 div.loader-text h4:nth-child(6) {
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
  }
  
.loader3 .loader-counter-3 div.loader-text h4:nth-child(7) {
    -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
  }
  
@-webkit-keyframes moveLetters {
    0% { transform: translateX(-15vw); opacity: 0; }
    33.3%, 66% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(15vw); opacity: 0; }
  }
  
@keyframes moveLetters {
    0% { transform: translateX(-15vw); opacity: 0; }
    33.3%, 66% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(15vw); opacity: 0; }
  }

/* loader Process-bar */


.loader3 .loader-counter-3 div.loader-text ~ .loader { 
    border-radius: 10px;  height: 18px; display: inline-block; background: rgba(255, 255, 255, 0.15);  overflow: hidden; position: relative; width: 100%;max-width: 480px; font-size: 0;}
.loader3 .loader-counter-3 div.loader-text ~ .loader:after {
    content: ''; width: calc(var(--width) - 6px); height: 12px; background-color: var(--wdtPrimaryColor); 
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 75%, transparent 75%, transparent); 
    background-size: 15px 15px; position: absolute; top: 0; left: 3px; box-sizing: border-box; z-index: 1; bottom: 0; margin: auto; border-radius: inherit; }
.loader3 .loader-counter-3 div.loader-text ~ .loader:before { content: ""; position: absolute; width: 100%;  margin: auto;
    background-image: linear-gradient(0deg, var(--wdtBorderColor) 0%, var(--wdtBorderColor) 100% ); opacity: 1; height: 18px; 
    top: 0; left: 0; bottom: 0;  border-radius: inherit; z-index: 0; }