/*Loader start*/


.splash-container {
    background-color: #3a3a3a;
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.1s ease-in-out;
}

.splash-container-hidden {
    visibility: hidden;
    opacity: 0;
}

.bootstrap-splash {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.bootstrap-splash_rubix,
.bootstrap-splash_rubix div:after,
.bootstrap-splash_rubix div:before {
    background: url("/img/logo-tranzit.svg");
}

@keyframes bootstrap-splash_rubix-left {
    0% {
        transform: rotateX(0);
    }
    25% {
        transform: rotateX(100deg);
    }
    40% {
        transform: rotateX(85deg);
    }
    49.9% {
        transform: rotateX(90deg);
    }
    50% {
        transform: rotateX(0) rotateY(90deg);
    }
    100% {
        transform: rotateX(0) rotateY(90deg);
    }
}

@keyframes bootstrap-splash_rubix-right {
    0% {
        transform: rotateX(90deg);
    }
    25% {
        transform: rotateX(-10deg);
    }
    40% {
        transform: rotateX(5deg);
    }
    49.9% {
        transform: rotateX(0);
    }
    50% {
        transform: rotateX(90deg) rotateZ(90deg);
    }
    100% {
        transform: rotateX(90deg) rotateZ(90deg);
    }
}

@keyframes bootstrap-splash_rubix-top {
    0% {
        transform: rotateY(0) rotateX(90deg);
    }
    49.9% {
        transform: rotateY(0) rotateX(90deg);
    }
    50% {
        transform: rotateY(90deg);
    }
    75% {
        transform: rotateY(-10deg);
    }
    90% {
        transform: rotateY(5deg);
    }
    100% {
        transform: rotateY(0);
    }
}

@keyframes bootstrap-splash_rubix-bottom {
    0% {
        transform: rotateY(90deg) rotateZ(-90deg);
    }
    49.9% {
        transform: rotateY(90deg) rotateZ(-90deg);
    }
    50% {
        transform: rotateY(0) rotateZ(0);
    }
    75% {
        transform: rotateY(100deg) rotateZ(0);
    }
    90% {
        transform: rotateY(85deg) rotateZ(0);
    }
    100% {
        transform: rotateY(90deg) rotateZ(0);
    }
}

.bootstrap-splash_bg-dark,
.bootstrap-splash_bg-light {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-color: #000000;*/
    /*background-image: url("/img/loader-background.jpg");*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: all 1s ease-in-out;
}

.bootstrap-splash_bg-dark {
    /*filter: grayscale(100) brightness(0.2);*/
}

.breadcrumb-block nav {
    background: #ffffff !important;
}

.breadcrumb {
    background: #ffffff !important;
    padding-left: 25px;
}

.bootstrap-splash_logo-hashtag {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    /*position: absolute;*/
    /*bottom: -80%;*/
    /*left: 4%;*/
}

.bootstrap-splash_rubix-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.bootstrap-splash_rubix {
    /*position: absolute;*/
    /*left: 50%;*/
    /*top: 50%;*/
    /*transform: translate(-50%, -50%);*/
    width: 100px;
    height: 100px;
}

.bootstrap-splash_rubix div {
    width: 100%;
    height: 100%;
    position: absolute;
}

.bootstrap-splash_rubix div:after,
.bootstrap-splash_rubix div:before {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: absolute;
}

.bootstrap-splash_rubix .bootstrap-splash_left:after,
.bootstrap-splash_rubix .bootstrap-splash_right:after,
.bootstrap-splash_rubix .bootstrap-splash_left:before,
.bootstrap-splash_rubix .bootstrap-splash_right:before {
    width: 50%;
    height: 100%;
    background-size: 200% 100%;
}

.bootstrap-splash_rubix .bootstrap-splash_left {
    animation-name: bootstrap-splash_rubix-left;
}

.bootstrap-splash_rubix .bootstrap-splash_right {
    left: 50%;
    animation-name: bootstrap-splash_rubix-right;
}

.bootstrap-splash_rubix .bootstrap-splash_right:after,
.bootstrap-splash_rubix .bootstrap-splash_right:before {
    background-position: -100% 0;
}

.bootstrap-splash_rubix .bootstrap-splash_top:after,
.bootstrap-splash_rubix .bootstrap-splash_bottom:after,
.bootstrap-splash_rubix .bootstrap-splash_top:before,
.bootstrap-splash_rubix .bootstrap-splash_bottom:before {
    width: 100%;
    height: 50%;
    background-size: 100% 200%;
}

.bootstrap-splash_rubix .bootstrap-splash_top {
    animation-name: bootstrap-splash_rubix-top;
}

.bootstrap-splash_rubix .bootstrap-splash_bottom {
    top: 50%;
    animation-name: bootstrap-splash_rubix-bottom;
}

.bootstrap-splash_rubix .bootstrap-splash_bottom:after,
.bootstrap-splash_rubix .bootstrap-splash_bottom:before {
    background-position: 0 -100%;
}

@supports (transform-style: preserve-3d) {
    .bootstrap-splash_rubix {
        background: none;
        transform: scale(1.6);
        perspective: 250px;
    }

    .bootstrap-splash_rubix div:after,
    .bootstrap-splash_rubix div:before {
        content: "";
    }

    .bootstrap-splash_rubix div {
        transform-style: preserve-3d;
        animation: bootstrap-splash_rubix-left 1.9s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
    }

    .bootstrap-splash_rubix div:after {
        transform: translateZ(49px);
    }

    .bootstrap-splash_rubix .bootstrap-splash_left:before,
    .bootstrap-splash_rubix .bootstrap-splash_right:before {
        transform: rotateX(-90deg) translateZ(50px);
    }

    .bootstrap-splash_rubix .bootstrap-splash_top:before,
    .bootstrap-splash_rubix .bootstrap-splash_bottom:before {
        transform: rotateY(-90deg) translateZ(50px);
    }
}


/*Loader end*/