.intro_logo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000000000;
    background-color: black !important;
}

.intro_logo.gradient_blue #super_gradient,
.intro_logo.gradient_blue #main_gradient {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00556d+0,003750+80 */
    background: #00556d; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #00556d 0%, #003750 80%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #00556d 0%, #003750 80%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #00556d 0%, #003750 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00556d', endColorstr='#003750', GradientType=1); /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.intro_logo.gradient_blue #composer_text {
    color: white;
}

.intro_logo.gradient_white #super_gradient,
.intro_logo.gradient_white #main_gradient {
    background: white;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.intro_logo.gradient_white #composer_text {
    color: #003b7e;
}

.intro_logo.gradient_black #super_gradient,
.intro_logo.gradient_black #main_gradient {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#282828+0,000000+83 */
    background: #282828; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #282828 0%, #000000 83%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #282828 0%, #000000 83%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #282828 0%, #000000 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282828', endColorstr='#000000', GradientType=1); /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.intro_logo.gradient_black #composer_text {
    color: white;
}

#logo_animation_small {
    transform: scale(0.1);
    opacity: 0;
}

#intro_animation {
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    font-family: Source Sans Pro, sans-serif;
}

#super_gradient {

    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
}

#zoom_container {
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -315px;
    top: 50%;
    margin-top: -150px;
    height: 300px;
    width: 630px;
    z-index: 2;
}

#logo_animation_small {
    position: absolute;
    left: 50%;
    margin-left: -45px;
    width: 91px;
    z-index: 2;
    top: 50%;
    margin-top: -35px;
}

#composer_text {
    position: absolute;
    left: 354px;
    top: 50%;
    margin-top: -60px;
    width: 200px;
    height: 100px;
    line-height: 100px;
    font-family: Source Sans Pro, sans-serif;
    font-size: 2rem;
    color: white;

}

#logo_slottina {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -45px;
    margin-left: -110px;
    width: 390px;
    height: 60px;
    overflow: hidden;
}

.logo_slottina__rullo {
    position: absolute;
    display: flex;
    flex-direction: column-reverse;
    top: 0px;
}

.logo_slottina__rullo img {
    width: 50px;
}

.logo_slottina__rullo:nth-child(1) {
    left: 200px;
    transform: translateY(-100%);
}

.logo_slottina__rullo:nth-child(2) {
    left: 245px;
    transform: translateY(-100%);
}

.logo_slottina__rullo:nth-child(3) {
    left: 288px;
    transform: translateY(-100%);
}

#logo_games {
    height: 145px;
    position: absolute;
    left: 50%;
    margin-left: -70px;
    top: 84px;
}

#second_zoom_container {
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 50%;
    margin-top: -100px;
    height: 200px;
    width: 600px;
    z-index: 2;
    transform-origin: center center;
}

/*CUSTOM COLLABORAZIONE*/

.collabo #zoom_container {
    top: 50%;
    margin-top: -150px;
}

.collabo #second_zoom_container {
    margin-top: -200px;
    height: 400px;
}

#collabo_container{
    position: absolute;
    top: 50%;
    margin-top: 10px;
    width: 200px;
    left: 50%;
    margin-left: -95px;
    opacity: 0;
}

.text_collabo{
    float: left;
    width: 100%;
    text-align: center;
    color: #FFF;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.logo_collabo{
    float: left;
    width: 100%;
    text-align: center;
}

.logo_collabo img{
    width: 80%;
}