/*--------------------------------------------------------------------------------------*/

:root {
    --process-ring-size: 500px;
    --process-circle-size: 280px;
    --process-logo-size: 120px; 
}

.processing {
    display: none;
    position: absolute;
    background-color: #1E1E1E;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 9000;
}

    .processing .ring {
        position: absolute;
        width: var(--process-ring-size);
        height: var(--process-ring-size);
        top: calc((100% - var(--process-ring-size)) / 2);
        left: calc((100% - var(--process-ring-size)) / 2);
        background-image: url(/images/Progress-ring.png);
        background-size: cover;
        background-color: transparent;
        -webkit-animation-name: spin;
        -webkit-animation-duration: 8000ms;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        -moz-animation-name: spin;
        -moz-animation-duration: 8000ms;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;
        -ms-animation-name: spin;
        -ms-animation-duration: 8000ms;
        -ms-animation-iteration-count: infinite;
        -ms-animation-timing-function: linear;
        animation-name: spin;
        animation-duration: 8000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        filter: invert(52%) sepia(92%) saturate(666%) hue-rotate(353deg) brightness(100%) contrast(102%);
        -ms-filter: invert(52%) sepia(92%) saturate(666%) hue-rotate(353deg) brightness(100%) contrast(102%);
        -moz-filter: invert(52%) sepia(92%) saturate(666%) hue-rotate(353deg) brightness(100%) contrast(102%);
        -webkit-filter: invert(52%) sepia(92%) saturate(666%) hue-rotate(353deg) brightness(100%) contrast(102%);
    }

    .processing .circle {
        position: absolute;
        width: var(--process-circle-size);
        height: var(--process-circle-size);
        top: calc((100% - var(--process-circle-size)) / 2);
        left: calc((100% - var(--process-circle-size)) / 2);
        background-image: url(/images/Progress-circle.png);
        background-size: cover;
        background-color: transparent;
    }

    .processing ._1956 {
        position: absolute;
        width: var(--process-logo-size);
        height: var(--process-logo-size);
        top: calc((100% - var(--process-logo-size)) / 2);
        left: calc((100% - var(--process-logo-size)) / 2);
        background-image: url(/images/_1956.png);
        background-size: cover;
        background-color: transparent;
    }
/*--------------------------------------------------------------------------------------*/

@keyframes rotation {
    to {
        transform: rotate(360deg);
    }
}

@-ms-keyframes rotation {
    to {
        -ms-transform: rotate(360deg);
    }
}

@-moz-keyframes rotation {
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes rotation {
    to {
        -webkit-transform: rotate(360deg);
    }
}


/*--------------------------------------------------------------------------------------*/

@-ms-keyframes spin {
    0% {
        -ms-transform: rotate(0deg);
        filter: none;
    }

    25% {
        -ms-transform: rotate(90deg);
        filter: invert(61%) sepia(66%) saturate(1700%) hue-rotate(62deg) brightness(118%) contrast(124%);
    }

    50% {
        -ms-transform: rotate(180deg);
        filter: invert(95%) sepia(94%) saturate(3117%) hue-rotate(348deg) brightness(109%) contrast(101%);
    }

    75% {
        -ms-transform: rotate(270deg);
        filter: invert(52%) sepia(92%) saturate(666%) hue-rotate(353deg) brightness(100%) contrast(102%);
    }

    100% {
        -ms-transform: rotate(360deg);
        filter: none;
    }
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -moz-filter: none;
    }

    25% {
        -moz-transform: rotate(90deg);
        -moz-filter: invert(61%) sepia(66%) saturate(1700%) hue-rotate(62deg) brightness(118%) contrast(124%);
    }

    50% {
        -moz-transform: rotate(180deg);
        -moz-filter: invert(95%) sepia(94%) saturate(3117%) hue-rotate(348deg) brightness(109%) contrast(101%);
    }

    75% {
        -moz-transform: rotate(270deg);
        -moz-filter: invert(52%) sepia(92%) saturate(666%) hue-rotate(353deg) brightness(100%) contrast(102%);
    }

    100% {
        -moz-transform: rotate(360deg);
        -moz-filter: none;
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -webkit-filter: none;
    }

    25% {
        -webkit-transform: rotate(90deg);
        -webkit-filter: invert(61%) sepia(66%) saturate(1700%) hue-rotate(62deg) brightness(118%) contrast(124%);
    }

    50% {
        -webkit-transform: rotate(180deg);
        -webkit-filter: invert(95%) sepia(94%) saturate(3117%) hue-rotate(348deg) brightness(109%) contrast(101%);
    }

    75% {
        -webkit-transform: rotate(270deg);
        -webkit-filter: invert(52%) sepia(92%) saturate(666%) hue-rotate(353deg) brightness(100%) contrast(102%);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -webkit-filter: none;
    }
}

@keyframes spin {

    0% {
        transform: rotate(180deg);
        filter: none;
    }

    25% {
        transform: rotate(270deg);
        filter: invert(52%) sepia(92%) saturate(666%) hue-rotate(353deg) brightness(100%) contrast(102%);
    }

    50% {
        transform: rotate(360deg);
        filter: invert(89%) sepia(30%) saturate(2011%) hue-rotate(101deg) brightness(104%) contrast(104%);
    }

    75% {
        transform: rotate(0deg);
        filter: invert(89%) sepia(30%) saturate(2011%) hue-rotate(101deg) brightness(104%) contrast(104%);
    }

    100% {
        transform: rotate(90deg);
        filter: none;
    }
}

/*--------------------------------------------------------------------------------------*/




/*--------------------------------------------------------------------------------------*/
/* filter color change */
:root {
    --chromecolor-000: #808080;
    --chromecolor-025: #00ffff;
    --chromecolor-050: #ffffff;
    --chromecolor-075: #00ffff;
    --chromecolor-100: #808080; 
}
@-ms-keyframes drop_shadow_colors {
    0% {
        filter: drop-shadow(0 0 30px var(--chromecolor-000));
    }

    25% {
        filter: drop-shadow(0 0 30px var(--chromecolor-025));
    }

    50% {
        filter: drop-shadow(0 0 30px var(--chromecolor-050));
    }

    75% {
        filter: drop-shadow(0 0 30px var(--chromecolor-075));
    }

    100% {
        filter: drop-shadow(0 0 30px var(--chromecolor-100));
    }
}

@-moz-keyframes drop_shadow_colors {

    0% {
        -moz-filter: drop-shadow(0 0 30px var(--chromecolor-000));
    }

    25% {
        -moz-filter: drop-shadow(0 0 30px var(--chromecolor-025));
    }

    50% {
        -moz-filter: drop-shadow(0 0 30px var(--chromecolor-050));
    }

    75% {
        -moz-filter: drop-shadow(0 0 30px var(--chromecolor-075));
    }

    100% {
        -moz-filter: drop-shadow(0 0 30px var(--chromecolor-100));
    }
}

@-webkit-keyframes drop_shadow_colors {

    0% {
        -webkit-filter: drop-shadow(0 0 30px var(--chromecolor-000));
    }

    25% {
        -webkit-filter: drop-shadow(0 0 30px var(--chromecolor-025));
    }

    50% {
        -webkit-filter: drop-shadow(0 0 30px var(--chromecolor-050));
    }

    75% {
        -webkit-filter: drop-shadow(0 0 30px var(--chromecolor-075));
    }

    100% {
        -webkit-filter: drop-shadow(0 0 30px var(--chromecolor-100));
    }
}

@keyframes drop_shadow_colors {

    0% {
        filter: drop-shadow(0 0 30px var(--chromecolor-000));
    }

    25% {
        filter: drop-shadow(0 0 30px var(--chromecolor-025));
    }

    50% {
        filter: drop-shadow(0 0 30px var(--chromecolor-050));
    }

    75% {
        filter: drop-shadow(0 0 30px var(--chromecolor-075));
    }

    100% {
        filter: drop-shadow(0 0 30px var(--chromecolor-100));
    }
}

.processing .processing-message {
    color:white;
    position:absolute;
    top:20%;
    width:100%; 
    font-size:30px;
}