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

.pre-loader {height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 999991;background-color: #fff;}
.loader-inner {padding: 25px;position: absolute;left: 50%;top: 50%;text-align: center;width: auto;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.loader-text {display: inline-block;font-family: var(--wdtFontTypo_Alt);font-size: 3.75rem;font-weight: bold !important;letter-spacing: 1px;line-height: normal;text-transform: uppercase;background-size: 200% auto;-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;text-fill-color: transparent;-webkit-animation: textclip 1.5s linear infinite;animation: textclip 1.5s linear infinite;}
.sign {position: absolute;bottom: 0;right: 0;-webkit-transform: translate(-20%, -100%);transform: translate(-20%, -100%);font-size: 3rem;color: #282828;}
.text {position: relative;top: 5rem;color: #f1f1f1;font-size: 1.8rem;font-weight: 700;}
.line {position: relative;width: 40rem;height: 0.6rem;border-radius: 3rem;background: var(--wdtBodyBGColor);box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.line::before {content: "";position: absolute;top: 0;left: 0;width: 0;border-radius: 3rem;height: 100%;background: var(--wdtPrimaryColor);-webkit-animation: line_drow 10s ease-out infinite;animation: line_drow 10s ease-out infinite;-webkit-animation-timing-function: cubic-bezier(0.71, 0.22, 0.29, 0.73);animation-timing-function: cubic-bezier(0.71, 0.22, 0.29, 0.73);}
.line .pen {position: absolute;top: -26px;left: 0;width: 10rem;height: 1rem;line-height: 4rem;background: var(--wdtBodyBGColor);box-shadow: rgba(99, 99, 99, 0.2) 0px 0px 15px 0px;text-align: center;-webkit-transform: translate(1%, -365%) rotate(-45deg);transform: translate(1%, -365%) rotate(-45deg);-webkit-transform-origin: center;transform-origin: center;-webkit-animation: pen_move 10s ease-out infinite;animation: pen_move 10s ease-out infinite;-webkit-animation-timing-function: cubic-bezier(0.71, 0.22, 0.29, 0.73);animation-timing-function: cubic-bezier(0.71, 0.22, 0.29, 0.73);}
.line .pen .pen_overlay {position: absolute;top: 0;left: 0;height: 100%;width: 100%;overflow: hidden;}
.line .pen .pen_overlay::after {content: "";position: absolute;top: 0;left: 0;height: 100%;width: 100%;background: var(--wdtPrimaryColor);z-index: -1;-webkit-animation: color_empty 10s ease-out infinite;animation: color_empty 10s ease-out infinite;-webkit-animation-timing-function: cubic-bezier(0.71, 0.22, 0.29, 0.73);animation-timing-function: cubic-bezier(0.71, 0.22, 0.29, 0.73);}
.line .pen .pen_overlay::before {content: "";position: absolute;top: 0;right: 0;height: 100%;width: 0%;background: var(--wdtPrimaryColor);z-index: -1;-webkit-animation: color_full 10s ease-out infinite;animation: color_full 10s ease-out infinite;-webkit-animation-timing-function: cubic-bezier(0.71, 0.22, 0.29, 0.73);animation-timing-function: cubic-bezier(0.71, 0.22, 0.29, 0.73);}
.line .pen .pen_top {position: absolute;top: 0;left: 0;width: 8%;height: 100%;-webkit-transform: translateX(-95%);transform: translateX(-95%);background: var(--wdtSecondaryColor);}
.line .pen .pen_top::before {content: "";position: absolute;top: 0;left: 0;height: 0.8rem;border-style: solid;border-color: transparent var(--wdtSecondaryColor) transparent transparent;border-width: 0.5rem 1rem 0.5rem 0;-webkit-transform: translateX(-101%);transform: translateX(-101%);}
.line .pen .pen_top::after {content: "";position: absolute;top: 50%;left: -100%;width: 0.2rem;height: 0.2rem;border-radius: 1rem 0 0 1rem;background: var(--wdtPrimaryColor);-webkit-transform: translate(-0%, -50%);transform: translate(-0%, -50%);}
.line .pen .pen_bottom {position: absolute;top: 0;right: 0;width: 12%;height: 102%;border-radius:0;-webkit-transform: translate(90%, -1%);transform: translate(90%, -1%);background: var(--wdtSecondaryColor);}
      
@-webkit-keyframes line_drow 
{
    0%,90%,100%{width: 0;}
    50%,60%{width: 100%;}
}

@keyframes line_drow 
{
    0%,90%,100% {width: 0;}
    50%,60% {width: 100%;}
}

@-webkit-keyframes color_empty 
{
    0% {left: 0;}
    50%,60% {left: -100%;}
    90%,100% {left: -100%;}
}

@keyframes color_empty 
{
    0% {left: 0;}
    50%,60% {left: -100%;}
    90%,100% {left: -100%;}
}

@-webkit-keyframes color_full 
{
    0% {width: 0;}
    50%,60% {width: 0;}
    90%,100% {width: 100%;}
}

@keyframes color_full 
{
    0% {width: 0;}
    50%,60% {width: 0;}
    90%,100% {width: 100%;}
}
      
@-webkit-keyframes pen_move 
{
    0% 
    {
    left: 0;
    -webkit-transform: translate(1%, -365%) rotate(-45deg);
    transform: translate(1%, -365%) rotate(-45deg);
    }
    50% 
    {
    left: 100%;
    -webkit-transform: translate(1%, -365%) rotate(-45deg);
    transform: translate(1%, -365%) rotate(-45deg);
    }
    55% 
    {
    left: 100%;
    -webkit-transform: translate(1%, -385%) rotate(-45deg);
    transform: translate(1%, -385%) rotate(-45deg);
    }
    60% 
    {
    left: 100%;
    -webkit-transform: translate(-8%, -310%) rotate(140deg);
    transform: translate(-8%, -310%) rotate(140deg);
    }
    90% 
    {
    left: 0%;
    -webkit-transform: translate(-8%, -310%) rotate(140deg);
    transform: translate(-8%, -310%) rotate(140deg);
    }
    95% 
    {
    left: 0%;
    -webkit-transform: translate(-8%, -450%) rotate(140deg);
    transform: translate(-8%, -450%) rotate(140deg);
    }
    100% 
    {
    -webkit-transform: translate(1%, -365%) rotate(315deg);
    transform: translate(1%, -365%) rotate(315deg);
    }
}

@keyframes pen_move 
{
    0% 
    {
    left: 0;
    -webkit-transform: translate(1%, -365%) rotate(-45deg);
    transform: translate(1%, -365%) rotate(-45deg);
    }
    50% 
    {
    left: 100%;
    -webkit-transform: translate(1%, -365%) rotate(-45deg);
    transform: translate(1%, -365%) rotate(-45deg);
    }
    55% 
    {
    left: 100%;
    -webkit-transform: translate(1%, -385%) rotate(-45deg);
    transform: translate(1%, -385%) rotate(-45deg);
    }
    60% 
    {
    left: 100%;
    -webkit-transform: translate(-8%, -310%) rotate(140deg);
    transform: translate(-8%, -310%) rotate(140deg);
    }
    90% 
    {
    left: 0%;
    -webkit-transform: translate(-8%, -310%) rotate(140deg);
    transform: translate(-8%, -310%) rotate(140deg);
    }
    95% 
    {
    left: 0%;
    -webkit-transform: translate(-8%, -450%) rotate(140deg);
    transform: translate(-8%, -450%) rotate(140deg);
    }
    100% 
    {
    -webkit-transform: translate(1%, -365%) rotate(315deg);
    transform: translate(1%, -365%) rotate(315deg);
    }
}


/*--------------------------------------------------------------
    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
--------------------------------------------------------------*/

    /*----*****---- << 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) {

    }