/*--------------------------------------------------------------
    Loader
--------------------------------------------------------------*/

.pre-loader2 {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999991;
  background-color: var(--wdtBodyBGColor);
  transition: transform 400ms linear 100ms;
  -webkit-transition: transform 400ms linear 100ms;
}

.pre-loader2 .loader-inner {
  width: 100%;
  height: fit-content;
  margin: auto;
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
}

.pre-loader2 .loader-inner .loader-2-svg {
  position: absolute;
  bottom: 0;
  left: var(--left);
  z-index: 1;
  transition: left 500ms linear;
  -webkit-transition: left 500ms linear;
}

/* .pre-loader2 .loader-inner:before {
    content: "";
    position: absolute;
    display: block;
    width: 100vw;
    left: 0;
    height: 50px;
    background: var(--wdtHeadAltColor);
    bottom: -25px;
    box-shadow: 0 0 10px 0 rgb(var(--wdtHeadAltColorRgb),0.6);
    -webkit-box-shadow: 0 0 10px 0 rgb(var(--wdtHeadAltColorRgb),0.6);
}

.pre-loader2  .loader-inner:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -2px;
    width: 100vw;
    left: 0;
    height: 2px;
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--wdtAccentTxtColor) 50%, transparent 50%);
    background-size: 50px 100%; 
} */

svg.wdt-car-loader .wdt-cus-car-loader-svg-01 { 
    fill:none;
    stroke:var(--wdtPrimaryColor, #d70007);
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
}

svg.wdt-car-loader .wdt-cus-car-loader-svg-02 { 
    fill: var(--wdtBodyBGColor, #ffffff);
    stroke: var(--wdtPrimaryColor, #d70007);
    stroke-width: 6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.pre-loader2.loader2 .loader-inner svg.wdt-car-loader {
    stroke: var(--wdtPrimaryColor);
    /* animation: wdt-car-loader-shake 0.3s ease-in-out 10 alternate;
    -webkit-animation: wdt-car-loader-shake 0.3s ease-in-out 10 alternate; */
    font-size: 100%;
    width: clamp(7.5rem, 6rem + 7.5vw, 15rem); /*240px - 120px*/
    height: clamp(2.5rem, 2rem + 2.5vw, 5rem); /*80px - 40px*/
    overflow: visible;
}

.pre-loader2.loader2 .loader-inner svg.wdt-car-loader .wdt-loader-car-body {
  stroke: var(--wdtPrimaryColor);
  /* animation: wdt-car-loader-shake 0.3s ease-in-out 10 alternate;
  -webkit-animation: wdt-car-loader-shake 0.3s ease-in-out 10 alternate; */
}

.pre-loader2.loader2 .loader-inner svg.wdt-car-loader .wdt-loader-car-wheel-left,
.pre-loader2.loader2 .loader-inner svg.wdt-car-loader .wdt-loader-car-wheel-right {
  stroke: var(--wdtPrimaryColor);
  /* animation: wdt-car-loader-shake 0.3s ease-in-out 10 alternate;
  -webkit-animation: wdt-car-loader-shake 0.3s ease-in-out 10 alternate; */
}

.pre-loader2.loader2 .loader-inner svg.wdt-car-loader .wdt-loader-car-line {
  stroke: var(--wdtPrimaryColor);
  transform-origin: center right;
  stroke-dasharray: 22;
  animation: wdt-car-loader-line 0.8s ease-in-out infinite;
  animation-fill-mode: both;
}

.pre-loader2.loader2 .loader-inner svg.wdt-car-loader .wdt-loader-car-line.wdt-loader-car-line-top {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

.pre-loader2.loader2 .loader-inner svg.wdt-car-loader .wdt-loader-car-line.wdt-loader-car-line-middle {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}

.pre-loader2.loader2 .loader-inner svg.wdt-car-loader .wdt-loader-car-line.wdt-loader-car-line-bottom {
  animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}

@keyframes wdt-car-loader-shake {
	0% { transform: translateY(-2%); -webkit-transform: translateY(-2%); }
	100% { transform: translateY(4%); -webkit-transform: translateY(4%); }
}

@-webkit-keyframes wdt-car-loader-shake {
	0% { transform: translateY(-2%); -webkit-transform: translateY(-2%); }
	100% { transform: translateY(4%); -webkit-transform: translateY(4%); }
}

@keyframes wdt-car-loader-line {
	0% { stroke-dashoffset: 22; }
	25% { stroke-dashoffset: 22; }
	50% { stroke-dashoffset: 0; }
	51% { stroke-dashoffset: 0; }
	80% { stroke-dashoffset: -22; }
	100% { stroke-dashoffset: -22; }
}

@-webkit-keyframes wdt-car-loader-line {
	0% { stroke-dashoffset: 22; }
	25% { stroke-dashoffset: 22; }
	50% { stroke-dashoffset: 0; }
	51% { stroke-dashoffset: 0; }
	80% { stroke-dashoffset: -22; }
	100% { stroke-dashoffset: -22; }
}



/*--------------------------------------------------------------
    Responsive
--------------------------------------------------------------*/

/*----*****---- << Mobile (Landscape) >> ----*****----*/

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {}


/* Common Styles for the devices below 479px width */

@media only screen and (max-width: 479px) {}