.sbb-loading,
.sbb-loading-small {
    height: 3em;
    padding-top: 1.2em;
    display: flex
}

.sbb-loading-1 {
    width: 5.8em;
    height: .6em;
    -webkit-perspective: 8em;
    perspective: 8em;
    margin: 0 auto;
    transform-origin: center;
    transform: translate3d(-3em,0,0);
    backface-visibility: hidden;
}

.sbb-loading-2 {
    position: relative;
    -webkit-transform: rotateY(50deg) translateZ(1em);
    transform: rotateY(50deg) translateZ(1em);
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sbb-loading-3 {
    position: relative;
    display: flex;
    -webkit-animation: .23s linear infinite loading_container_small;
    animation: .23s linear infinite loading_container_small;
}

.sbb-loading-item {
    width: 1em;
    height: .6em;
    margin-right: .2em;
    background: var(--sbb-color-red);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    outline: transparent solid 1px;
    -webkit-animation: .23s linear infinite loading_rectangle1;
    animation: .23s linear infinite loading_rectangle1;
}

.sbb-loading-item.first {
    -webkit-animation: .23s linear infinite loading_rectangle1;
    animation: .23s linear infinite loading_rectangle1;
}

.sbb-loading-item.second {
    -webkit-animation: .23s linear infinite loading_rectangle2;
    animation: .23s linear infinite loading_rectangle2;
}

.sbb-loading-item.third {
    -webkit-animation: .23s linear infinite loading_rectangle3;
    animation: .23s linear infinite loading_rectangle3;
}

.sbb-loading-item.fourth {
    -webkit-animation: .23s linear infinite loading_rectangle4;
    animation: .23s linear infinite loading_rectangle4;
}

.sbb-loading-item.fifth {
    -webkit-animation: .23s linear infinite loading_rectangle5;
    animation: .23s linear infinite loading_rectangle5;
    margin-right: 0;
}

@-webkit-keyframes loading_container_small {
    0% {
        -webkit-transform: translateX(1.2em);
        transform: translateX(1.2em)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes loading_container_small {
    0% {
        -webkit-transform: translateX(1.2em);
        transform: translateX(1.2em)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes loading_rectangle1 {
    0% {
        opacity: .5
    }

    100% {
        opacity: 0
    }
}

@keyframes loading_rectangle1 {
    0% {
        opacity: .5
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes loading_rectangle2 {
    0% {
        opacity: 1
    }

    100% {
        opacity: .5
    }
}

@keyframes loading_rectangle2 {
    0% {
        opacity: 1
    }

    100% {
        opacity: .5
    }
}

@-webkit-keyframes loading_rectangle3 {
    0% {
        opacity: .5
    }

    100% {
        opacity: 1
    }
}

@keyframes loading_rectangle3 {
    0% {
        opacity: .5
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes loading_rectangle4 {
    0% {
        opacity: .25
    }

    100% {
        opacity: .5
    }
}

@keyframes loading_rectangle4 {
    0% {
        opacity: .25
    }

    100% {
        opacity: .5
    }
}

@-webkit-keyframes loading_rectangle5 {
    0% {
        opacity: 0
    }

    100% {
        opacity: .25
    }
}

@keyframes loading_rectangle5 {
    0% {
        opacity: 0
    }

    100% {
        opacity: .25
    }
}