/* -------- POSIZIONAMENTI --------- */

.centerRelativeX {
    margin-left: auto;
    margin-right: auto;
}

.centerRelativeY {
    margin-top: auto;
    margin-bottom: auto;
}

.centerRelative {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.centerAbsolute_left_y {
    --absoluteX: 0;
    --absoluteY: 50%;
    --absoluteXTranslation: 0;
    --absoluteYTranslation: -50%;
}

.centerAbsolute_top_x {
    --absoluteX: 50%;
    --absoluteY: 0;
    --absoluteXTranslation: -50%;
    --absoluteYTranslation: 0;
}

.centerAbsolute_bottom_x {
    --absoluteX: 50%;
    --absoluteY: 100%;
    --absoluteXTranslation: -50%;
    --absoluteYTranslation: -100%;
}

.centerAbsolute_right_y {
    --absoluteX: 100%;
    --absoluteY: 50%;
    --absoluteXTranslation: -100%;
    --absoluteYTranslation: -50%;
}

.centerAbsolute_center {
    --absoluteX: 50%;
    --absoluteY: 0;
    --absoluteXTranslation: -50%;
    --absoluteYTranslation: 0;
}

.centerAbsolute {
    left: var(--absoluteX);
    top: var(--absoluteY);
    transform: translate(var(--absoluteXTranslation),var(--absoluteYTranslation));
}

/* -------- GRIGLIE DI POSIZIONAMENTO --------- */

.doubleColumns {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 85% 1fr;
}

/*LAMPEGGIO*/

.blink {
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}


/*LAMPEGGIO*/

.screwRotation {
    animation: screwRotation-animation 1s cubic-bezier(0.39, 0.58, 0.57, 1) infinite;
    -webkit-animation: screwRotation-animation 1s cubic-bezier(0.39, 0.58, 0.57, 1) infinite;
}

@keyframes screwRotation-animation {
    0% {
        background-image: repeating-linear-gradient(-225deg, transparent 0%, transparent 10%, black 10%, black 20%);
    }

    100% {
        background-image: repeating-linear-gradient(-225deg, black 0%, black 10%, transparent 10%, transparent 20%);
    }
}

@-webkit-keyframes screwRotation-animation {
    0% {
        background-image: repeating-linear-gradient(-225deg, transparent 0%, transparent 10%, black 10%, black 20%);
    }

    100% {
        background-image: repeating-linear-gradient(-225deg, black 0%, black 10%, transparent 10%, transparent 20%);
    }
}



/*LAMPEGGIO*/

.rotation {
    transform-origin: 0 0;
    animation: rotation-animation 1s linear infinite;
    -webkit-animation: rotation-animation 1s linear infinite;
}

@keyframes rotation-animation {
    0% {
        transform: rotate(0deg) translate(-50%,-50%);
    }

    100% {
        transform: rotate(360deg) translate(-50%,-50%);
    }
}

@-webkit-keyframes rotation-animation {
    0% {
        transform: rotate(0deg) translate(-50%,-50%);
    }

    100% {
        transform: rotate(360deg) translate(-50%,-50%);
    }
}




/*EFFETTO VIBRAZIONE CON POSIZIONAMENTO ASSOLUTO CENTRATO */




.vibrateCalm {
    -webkit-animation: vibrateCalm 0.15s linear infinite;
    animation: vibrateCalm 0.15s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 300px;
    perspective: 300px;
}

@keyframes vibrateCalm {
    0.50%, 90% {
        -webkit-transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
    }

    0.50%, 80% {
        -webkit-transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
    }

    30%, 50%, 70% {
        -webkit-transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
    }

    0.50%, 60% {
        -webkit-transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
    }
}




.vibrate {
    -webkit-animation: vibrate 0.15s linear infinite;
    animation: vibrate 0.15s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 300px;
    perspective: 300px;
}


@keyframes vibrate {
    0.50%, 90% {
        -webkit-transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
    }

    0.50%, 80% {
        -webkit-transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
    }

    30%, 50%, 70% {
        -webkit-transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% - 0.2rem), -50%, 0);
    }

    0.50%, 60% {
        -webkit-transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
        transform: translate3d(calc(-50% + 0.2rem), -50%, 0);
    }
}

/*EFFETTO BARRA CARICAMENTO*/

.progress_line, .progress_line:before {
    height: 100%;
    width: 100%;
    margin: 0;
}

.progress_line {
    background-color: #b3d4fc;
    display: -webkit-flex;
    display: flex;
}

    .progress_line:before {
        background-color: #3f51b5;
        content: '';
        -webkit-animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        animation: running-progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

@-webkit-keyframes running-progress {
    0% {
        margin-left: 0px;
        margin-right: 100%;
    }

    50% {
        margin-left: 25%;
        margin-right: 0%;
    }

    100% {
        margin-left: 100%;
        margin-right: 0;
    }
}

@keyframes running-progress {
    0% {
        margin-left: 0px;
        margin-right: 100%;
    }

    50% {
        margin-left: 25%;
        margin-right: 0%;
    }

    100% {
        margin-left: 100%;
        margin-right: 0;
    }
}

.animation-rotate {
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-transition-timing-function: linear;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
    }
}