/* -- SVG css -- */

.cls-2a{
    fill:#00b2dd;
}

.cls-3a{
    fill:#77bc1f;
}

.cls-4a{
    fill:#00a657;
}

/*--------------------
Opening Ceremony
---------------------*/

body.opening #dimension-opening-logo {
    display: none;
}
#dimension-opening-logo {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 900;
}
#dimension-opening-logo .cls-3a {
    -webkit-animation: load-in3a 2s ease-out infinite;
    animation: load-in3a 2s ease-out infinite;
}
@-webkit-keyframes load-in3a
{
    0% {
        opacity: 0;
        transform: translate(12px, -20px);
    }
    25% {
        opacity: .3;
        transform: translate(-9.79px, -5.27px);
    }
    100% {
        opacity: .3;
        transform: translate(-9.79px, -5.27px);
    }
}
@keyframes load-in3a
{
    0% {
        opacity: 0;
        transform: translate(5px, -15px);
    }
    25% {
        opacity: 1;
        transform: translate(-9.79px, -5.27px);
    }
    100% {
        opacity: 1;
        transform: translate(-9.79px, -5.27px);
    }
}
#dimension-opening-logo .cls-2a {
    -webkit-animation: load-in2a 2s ease-out infinite;
    animation: load-in2a 2s ease-out infinite;
}
@-webkit-keyframes load-in2a
{
    0% {
        opacity: 0;
        transform: translate(-20px, -12px);
    }
    30% {
        opacity: 0;
        transform: translate(-20px, -12px);
    }
    50% {
        opacity: 1;
        transform: translate(-9.79px, -5.27px);
    }
    100% {
        opacity: 1;
        transform: translate(-9.79px, -5.27px);
    }
}
@keyframes load-in2a
{
    0% {
        opacity: 0;
        transform: translate(-20px, -12px);
    }
    30% {
        opacity: 0;
        transform: translate(-20px, -12px);
    }
    50% {
        opacity: 1;
        transform: translate(-9.79px, -5.27px);
    }
    100% {
        opacity: 1;
        transform: translate(-9.79px, -5.27px);
    }
}

#dimension-opening-logo .cls-4a {
    -webkit-animation: load-in4a 2s ease-out infinite;
    animation: load-in4a 2s ease-out infinite;
}
@-webkit-keyframes load-in4a
{
    0% {
        opacity: 0;
        transform: translate(-9.79px, 0px);
    }
    50% {
        opacity: 0;
        transform: translate(-9.79px, 0px);
    }
    75% {
        opacity: 1;
        transform: translate(-9.79px, -5.27px);
    }
    100% {
        opacity: 1;
        transform: translate(-9.79px, -5.27px);
    }
}
@keyframes load-in4a
{
    0% {
        opacity: 0;
        transform: translate(-9.79px, 0px);
    }
    50% {
        opacity: 0;
        transform: translate(-9.79px, 0px);
    }
    75% {
        opacity: 1;
        transform: translate(-9.79px, -5.27px);
    }
    100% {
        opacity: 1;
        transform: translate(-9.79px, -5.27px);
    }
}

.dimensionIcon .cls-3a {
    -webkit-animation: load-in3a 2s ease-out;
    animation: load-in3a 2s ease-out;
}
.dimensionIcon .cls-2a {
    -webkit-animation: load-in2a 2s ease-out;
    animation: load-in2a 2s ease-out;
}
.dimensionIcon .cls-4a {
    -webkit-animation: load-in4a 2s ease-out;
    animation: load-in4a 2s ease-out;
}

.dimensionIcon.loading .cls-3a {
    -webkit-animation: load-in3a 2s ease-out infinite;
    animation: load-in3a 2s ease-out infinite;
}
.dimensionIcon.loading .cls-2a {
    -webkit-animation: load-in2a 2s ease-out infinite;
    animation: load-in2a 2s ease-out infinite;
}
.dimensionIcon.loading .cls-4a {
    -webkit-animation: load-in4a 2s ease-out infinite;
    animation: load-in4a 2s ease-out infinite;
}