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

    .pre-loader {
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999991;
        background-color: #fff;
    }
    .loader-inner {
        display: grid;
        place-items: center;
        height: 100%;
        width: 100%;
    }
      
      .wdt-artboard {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        position: absolute;
      }
      .wdt-artboard .wdt-square {
        display: flex;
        position: absolute;
        transform-origin: center center;
        width: 50px;
        height: 50px;
        background: var(--wdtPrimaryColor);
      }
      .wdt-artboard .wdt-square:nth-child(1) {
        -webkit-animation: motion 2s infinite cubic-bezier(0.89, 0.03, 0.06, 1.5);
        animation: motion 2s infinite cubic-bezier(0.89, 0.03, 0.06, 1.5);
      }
      .wdt-artboard .wdt-path {
        display: block;
        position: relative;
        height: 10px;
        width: 80px;
        overflow: hidden;
        top: 35px;
      }
      .wdt-artboard .wdt-path .wdt-small-squares > div {
        position: absolute;
        display: inline-flex;
        width: 10px;
        height: 10px;
        background: var(--wdtSecondaryColor);
        margin: 0px 15px;
        top: 0px;
        left: 0;
        -webkit-animation: dynamic 4s infinite cubic-bezier(0.89, 0.03, 0.06, 1.5);
        animation: dynamic 4s infinite cubic-bezier(0.89, 0.03, 0.06, 1.5);
      }
      .wdt-artboard .wdt-path .wdt-small-squares > div:nth-child(1) {
        left: 0px;
      }
      .wdt-artboard .wdt-path .wdt-small-squares > div:nth-child(2) {
        left: 40px;
      }
      .wdt-artboard .wdt-path .wdt-small-squares > div:nth-child(3) {
        left: 80px;
      }
      .wdt-artboard .wdt-path .wdt-small-squares > div:nth-child(4) {
        left: 120px;
      }
      .wdt-artboard .wdt-path .wdt-small-squares > div:nth-child(5) {
        left: 160px;
      }
      .wdt-artboard .wdt-path .wdt-small-squares > div:nth-child(6) {
        left: 200px;
      }
      .wdt-artboard .wdt-path .wdt-small-squares > div:nth-child(7) {
        left: 240px;
      }
      .wdt-artboard .wdt-path .wdt-small-squares > div:nth-child(8) {
        left: 280px;
      }
      
      @-webkit-keyframes beat {
        to {
          transform: scale(1.4);
        }
      }
      
      @keyframes beat {
        to {
          transform: scale(1.4);
        }
      }
      @-webkit-keyframes motion {
        50% {
          transform: rotate(90deg);
        }
        100% {
          transform: rotate(180deg);
        }
      }
      @keyframes motion {
        50% {
          transform: rotate(90deg);
        }
        100% {
          transform: rotate(180deg);
        }
      }
      @-webkit-keyframes dynamic {
        0% {
          transform: translateX(0px);
        }
        25% {
          transform: translateX(-40px);
        }
        50% {
          transform: translateX(-80px);
        }
        75% {
          transform: translateX(-120px);
        }
        100% {
          transform: translateX(-160px);
        }
      }
      @keyframes dynamic {
        0% {
          transform: translateX(0px);
        }
        25% {
          transform: translateX(-40px);
        }
        50% {
          transform: translateX(-80px);
        }
        75% {
          transform: translateX(-120px);
        }
        100% {
          transform: translateX(-160px);
        }
      }
      


    /*--------------------------------------------------------------
    Accents
    --------------------------------------------------------------*/

    .pre-loader { background-color: var(--wdtBodyBGColor); }
    .loader-text { background-image: linear-gradient(to right, var(--wdtPrimaryColor) 10%, var(--wdtHeadAltColor) 50%, var(--wdtPrimaryColor) 60%); }


    /*--------------------------------------------------------------
    Responsive
    --------------------------------------------------------------*/