#bit, #pallino, #control {
    position: absolute;
    z-index: 100000;
    left: 50%;
    width: 121px;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
}
#bit {
    position: fixed;
    top: 0;
    transform: translate(-62%, 22%);
    animation-name: daSinistra;
}
#pallino {
    position: fixed;
    width: 19px;
    top: 15px;
    transform: translate(-60%, 50%);
    animation-name: centrale;
}
#control {
    position: fixed;
    transform: translate(-37%, 25%);
    animation-name: daDestra;
}
#logo {
    animation-name: logo;
    animation-duration: 2.5s;
}

/*
#container {
    animation: load 3s ease;
} 
@keyframes daSinistra {
    0% {
        opacity: 1;
        transform: translateX(-100vw) scale(3);
        top: 50%;
    }
    11% {
        opacity: 1;
        transform: translateX(-100%) scale(3);
        top: 50%;
    }
    50% {
        opacity: 1;
        transform: translateX(-100%) scale(3);
        top: 50%;
    }
    99% {        
        opacity: 1;
        top: 0;
    }
}
@keyframes daDestra {
    0% {
        opacity: 1;
        transform: translateX(100vw) scale(3);
        top: 50%;
    }
    15% {
        opacity: 1;
        transform: translateX(100vw) scale(3);
        top: 50%;
    }
    26% {
        opacity: 1;
        transform: translate(-10%, 10%) scale(3);
        top: 50%;
    }
    50% {
        opacity: 1;
        transform: translate(-10%, 10%) scale(3);
        top: 50%;
    }
    99% {        
        opacity: 1;
        top: 0;
    }
}
@keyframes centrale {
    0% {
        opacity: 1;
        transform: translate(-120%, -30%) scale(0);
        top: 50%;
    }
    30% {
        opacity: 1;
        transform: translate(-120%, -30%) scale(0);
    }
    45% {
        opacity: 1;
        top: 50%;
        transform: translate(-120%, -30%) scale(3);
    }
    50% {
        opacity: 1;
        top: 50%;
        transform: translate(-120%, -30%) scale(3);
    }
    99% {       
        top: 15px; 
        opacity: 1;
    }
}
@keyframes logo {
    0% {
        opacity: 0;
    }
    99% {       
        opacity: 0;
    }
}

@media (max-width: 800px){
    @keyframes daSinistra {
        0% {
            opacity: 1;
            transform: translateX(-100vw) scale(2);
            top: 50%;
        }
        11% {
            opacity: 1;
            transform: translateX(-70%) scale(2);
            top: 50%;
        }
        50% {
            opacity: 1;
            transform: translateX(-70%) scale(2);
            top: 50%;
        }
        99% {        
            opacity: 1;
            top: 0;
        }
    }
    @keyframes daDestra {
        0% {
            opacity: 1;
            transform: translateX(100vw) scale(2);
            top: 50%;
        }
        15% {
            opacity: 1;
            transform: translateX(100vw) scale(2);
            top: 50%;
        }
        26% {
            opacity: 1;
            transform: translate(-10%, 10%) scale(2);
            top: 50%;
        }
        50% {
            opacity: 1;
            transform: translate(-10%, 10%) scale(2);
            top: 50%;
        }
        99% {        
            opacity: 1;
            top: 0;
        }
    }
    @keyframes centrale {
        0% {
            opacity: 1;
            transform: translate(-20%, 20%) scale(0);
            top: 50%;
        }
        30% {
            opacity: 1;
            transform: translate(-20%, 20%) scale(0);
        }
        45% {
            opacity: 1;
            top: 50%;
            transform: translate(-20%, 20%) scale(2);
        }
        50% {
            opacity: 1;
            top: 50%;
            transform: translate(-20%, 20%) scale(2);
        }
        99% {       
            top: 15px; 
            opacity: 1;
        }
    }    
}
*/