@font-face {
    font-family: Pricedown;
    src: url('../fonts/pricedown bl.ttf');
}

::-moz-selection {
    background: transparent;
    color: #000;
}
::selection {
    background: transparent;
    color: #000;
}

html, body {
    margin: 0;
    background-color: #333;
    background-image: url( "../images/bg/bg-noise.png" );
    font-family: Montserrat, Tahoma;
    overflow: hidden;
}

.img-fluid {
    width: 100%;
    height: 100%;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

div#controls {
    z-index: 99999999;
    position: absolute;
    right: 1em;
    top: 1em;
}

img#toggle-fullscreen {
    width:  2.5em;
    height: 2.5em;
    cursor: pointer;
}



#main {
    padding-bottom: 56.25%;
    width: 100%;
    cursor: crosshair;
    overflow: hidden;
    background-color: black;
    box-shadow: 0px 20px 80px rgba( 0, 0, 0, 0.5 );
}

#main.splash {
    /*background: url( "../images/bg/bg-splash.svg" ); */
    background-size: cover;
}

#gameover-html {
    display: none;
}

#gameover-html .go-title {
    font-family: Pricedown, Montserrat, Tahoma;
    font-size: 500%;
    color: #cc0000;
    position: absolute;
    left: 50%;
    top: 12%;
    transform: translateX(-50%) translateY(-50%);
}


#gameover-html .go-text {
    color: white;
    position: absolute;
    text-align: center;
    left: 50%;
    top: 25%;
    width: auto;
    max-width: 800px;
    height: auto;
    transform: translateX(-50%);
}

#gameover-html .btn-retry {
    position: absolute;
    left: 50%;
    top: 90%;
    transform: translateX(0%) translateY(-50%);
    margin-left: 0.4em;
}

#gameover-html .btn-leave {
    position: absolute;
    left: 50%;
    top: 90%;
    transform: translateX(-100%) translateY(-50%);
    margin-right: 0.4em;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 56.25%;
    z-index: -1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.bg-home-gorpe {
    background-image: url("../images/bg/bg-home-gorpe.svg");
}

.bg-strada {
    background-image: url("../images/bg/bg-strada.svg");
}

.bg-gracciano {
    background-image: url("../images/bg/bg-gracciano.svg");
}

.bg-evendance {
    background-image: url("../images/bg/bg-evendance.svg");
}

.bg-discoteca {
    background-image: url("../images/bg/bg-discoteca.svg");
}

.bg-gameover-police {
    background-image: url("../images/bg/bg-gameover-police.svg");
}

.bg-fight-team {
    background-image: url("../images/bg/bg-fight-team.jpg");
    background-size: cover;
}

.bg-after-team {
    background-image: url("../images/bg/bg-after-team.svg");
    background-size: cover;
}

.bg-heaven {
    background-image: url("../images/bg/bg-heaven.svg");
    background-size: cover;
}

.bg-car {
    background-image: url("../images/bg/bg-car.svg");
    background-size: cover;
}


.btn {
    font-size: 2vmin;
}

#start-game {
    text-transform: uppercase;
    padding: 0.5em 3em;
    top: 90%;
}

#skip-intro {
    position: absolute;
    text-transform: uppercase;
    padding: 0.5em 1.5em;
    bottom: 1em;
    right: 1em;
    display: none;
    z-index: 20000;
}

.gg-object {
    position: absolute;
    transform: translateX(-50%) translateY(-100%);
}

.modal-title {
    font-size: 3vmin;
}

.modal-body {
    font-size: 2vmin;
}

.modal-dialog {
    box-shadow: 0px 0px 80px rgba(0, 112, 208, 0.6);
    margin: 1.75rem 1.75rem 1.75rem auto;
    color: white;
}   

.modal-header {
    border-bottom: 1px solid #313539;
}

.modal-footer {
    border-top: 1px solid #313539;
}

.modal-content {
    background-color: #272822;
}

.modal-backdrop.show {
    opacity: 0;
}

.modal-img {
    margin-right: 2em;
}

.pixelated {
    image-rendering: -moz-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    /*image-rendering: -webkit-optimize-contrast;*/
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}


#main.stage-truzzoteca #chiodo {
    animation: rotating-spyral 8s linear infinite;
    z-index: 2000;
}

#main.stage-truzzoteca #chiodoHud {
    z-index: 2001;
}

#main.stage-fight-shooter .villainMove {
    top: 120% !important;
    width: 30% !important;
    left: 50% !important;
}




#main.stage-shooter-gameover .bg-discoteca,
#main.stage-fight-shooter .bg-discoteca {
    animation: discoteca 4s infinite alternate;
}

#main.stage-fight-shooter #gorpe {
    z-index: 9999;
}

#main.stage-fight-shooter #lights {
    z-index: 10000;
}

#main.stage-fight-shooter #overlay {
    z-index: 20000;
}



#main.stage-fight-shooter .truzza:not(.died) {
    animation: truzzaMove 4s infinite ease-in-out;
}


@keyframes discoteca {
    0%{
        filter:hue-rotate(0deg)
    }
    25%{
        filter:hue-rotate(90deg)
    }
    50%{
        filter:hue-rotate(180deg)
    }
    to {
        filter:hue-rotate(270deg)
    }
}


@keyframes rinculo {
    0%{
        transform: rotate( 0deg ) translateX( -50% ) translateY( -100% ) scale( 1, 1 );
    }
    to {
        transform: rotate( 15deg )  translateX( -45% ) translateY( -20% ) scale( 1.7, 1.7 );
    }
}

@keyframes carica {
    0%{
        transform: rotate( 0deg ) translateX( -50% ) translateY( -100% ) scale( 1, 1 );
    }
    to {
        transform: rotate( -10deg )  translateX( -45% ) translateY( -70% ) scale( 1.3, 1.3 );
    }
}


@keyframes truzzaMove {
    0%{
        transform: translateX( -50% ) translateY( -100% );
    }
    25%{
        transform: translateX( 100% ) translateY( -100% );
    }
    50%{
        transform: translateX( -50% ) translateY( -100% );
    }
    75% {
        transform: translateX( -150% ) translateY( -100% );
    }
    to {
        transform: translateX( -50% ) translateY( -100% );
    }
}



@keyframes discoteca-final {
    0%{
        filter:hue-rotate(0deg)
    }
    50%{
        filter:hue-rotate(90deg)
    }
    to {
        filter:hue-rotate(0deg)
    }
}

@keyframes tocco-morte {
    0%{
        transform: rotate( 0deg ) translateX( -50% ) translateY( -100% ) scale( 1, 1 );
    }
    50% {
        transform: rotate( 14deg )  translateX( -95% ) translateY( -89% ) scale( 0.7, 0.7 );
    }
    to {
        transform: rotate( 0deg ) translateX( -50% ) translateY( -100% ) scale( 1, 1 );
    }
}

#fight-shooter-hud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: none;
    z-index: 100000;
}


#fight-shooter-hud #kills,
#fight-shooter-hud #death-text,
#fight-shooter-hud #fight-text {
    display: none;
}

#fight-shooter-hud #blood-drop-1,
#fight-shooter-hud #blood-drop-2,
#fight-shooter-hud #blood-drop-3 {
    display: none;
}


.gg-object .progress {
    position: absolute;
    width: 120%;
    height: 16%;
    height: 12%;
    top: -30%;
    background-color: #000000;
    box-shadow: 0px 0px 11px #00000050;
    border-radius: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.gg-object .progress .progress-bar {
    background: linear-gradient(to right, #ffab35 0%,#ff0000 100%);
}


.gg-object .progress.villain .progress-bar {
    background: linear-gradient(to right, #9a35ff 0%,#ff00d0 100%);
}


#main.stage-fight-team .gabberita:not(.died):not(.stopped) {
    animation: gabberitaMove 10s infinite linear;
}


@keyframes gabberitaMove {
    0%{
        transform: translateX( -50% ) translateY( -100% );
    }
    25%{
        transform: translateX( 200% ) translateY( -100% );
    }
    50%{
        transform: translateX( -50% ) translateY( -100% );
    }
    75% {
        transform: translateX( -250% ) translateY( -100% );
    }
    to {
        transform: translateX( -50% ) translateY( -100% );
    }
}


@keyframes rotating-spyral {
    from{
        transform: translateX(-50%) translateY(-100%) rotate(0deg);
    }
    to{
        transform: translateX(-50%) translateY(-100%) rotate(-360deg);
    }
}







#fight-final-hud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: none;
    z-index: 100000;
}


#fight-final-hud #electroniflux,
#fight-final-hud #lefthand,
#fight-final-hud #righthand,
#fight-final-hud #fight-text {
    display: none;
}





#main.stage-fight-final .villainMove {
    top: 120% !important;
    width: 30% !important;
    left: 50% !important;
}

#main.stage-fight-final .projectileMove {
    top: 120% !important;
    width: 50% !important;
    height: 50% !important;
    left: 50% !important;
}


#main.stage-fight-final .faceMove {
    top: 50% !important;
    width: 10% !important;
    height: 10% !important;
    left: 50% !important;
}




#main.stage-final-gameover .bg-discoteca,
#main.stage-final-winner .bg-discoteca,
#main.stage-fight-final .bg-discoteca {
    animation: discoteca-final 4s infinite alternate;

}

#main.stage-fight-final #spyral {
    animation: rotating-spyral 4s linear infinite;
}

#main.stage-fight-final #spyral.double {
    animation: rotating-spyral 8s alternate infinite;
}

#main.stage-fight-final #spyral.ending {
    animation: rotating-spyral 2s linear infinite;
}


#main.stage-fight-final .projectile {
    transform-origin: 40% 40%;
    animation: rotating-spyral 1.5s linear infinite;
}


#main.stage-fight-final #gorpe {
    z-index: 9999;
}

#main.stage-fight-final #lights {
    z-index: 10000;
}

#main.stage-fight-final #overlay {
    z-index: 20000;
}

#main.stage-fight-final #overlay-trans {
    z-index: 20001;
}


#main.stage-fight-final .truzza:not(.died) {
    animation: truzzaMove 4s infinite ease-in-out;
}

#main.stage-fight-final {
    cursor: none;
}

#main.stage-fight-final #hand-dx {
    transition-duration: 0.8s;
    transform-origin: 75% 90%;
}

#main.stage-fight-final #hand-dx.normal {
    transform: translateX(-50%) translateY(-100%) rotate(0deg);
}

#main.stage-fight-final #hand-dx.face {
    transform: translateX(-50%) translateY(-100%) rotate(86deg);
}
#main.stage-fight-final #hand-dx.attack {
    transform: translateX(-50%) translateY(-100%) rotate(-46deg);
}


#main.stage-fight-final #hand-sx {
    transition-duration: 0.5s;
    transform-origin: 30% 91%;
}

#main.stage-fight-final #hand-sx.normal {
    transform: translateX(-50%) translateY(-100%) rotate(0deg);
}

#main.stage-fight-final #hand-sx.face {
    transform: translateX(-50%) translateY(-100%) rotate(-86deg);
}
#main.stage-fight-final #hand-sx.attack {
    transform: translateX(-50%) translateY(-100%) rotate(46deg);
}


#main.stage-final-winner #spyral {
    filter:hue-rotate(157deg) brightness(1.2);
    animation: rotating-spyral 4s linear infinite;
    z-index: -1;
}



.modal-position-center.modal-dialog {
    margin: 1.75rem auto 1.75rem auto;
}