.pyramid {
    position: relative;
    margin: 100px auto;
    height: 500px;
    width: 100px;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: spin 10s linear infinite;
    -webkit-transform-origin: 116px 200px 116px;
    -moz-transform-style: preserve-3d;
    -moz-animation: spin 10s linear infinite;
    -moz-transform-origin: 116px 200px 116px;
    -ms-transform-style: preserve-3d;
    -ms-animation: spin 10s linear infinite;
    -ms-transform-origin: 116px 200px 116px;
    transform-style: preserve-3d;
    animation: spin 10s linear infinite;
    transform-origin: 116px 200px 116px;
}


@-webkit-keyframes spin {
    from {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    to {
        -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    to {
        -moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

@-ms-keyframes spin {
    from {
        -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    to {
        -ms-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

.pyramid > div {
    position: absolute;
    border-style: solid;
    border-width: 200px 0 200px 346px;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

    /* Put some text on each face */
    .pyramid > div:after {
        position: absolute;
        content: "ИС Теплоинформ";
        color: #E97A01;
        left: -250px;
        text-align: center;
    }
    /*rgba(252, 162, 50, 0.6) жёлтый #FFA034*/
    /*rgba(23, 79, 140, 0.6) синий #174f8c*/
    /*(233,122,1)#E97A01 тёмно-жёлтый*/

    .pyramid > div:first-child {
        border-color: transparent transparent transparent rgba(23, 79, 140, 0.6);
        -webkit-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
        -moz-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
        -ms-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
        transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
    }

    .pyramid > div:nth-child(2) {
        border-color: transparent transparent transparent rgba(23, 79, 140, 0.6);
        -webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
        -moz-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
        -ms-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
        transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
    }

    .pyramid > div:nth-child(3) {
        border-color: transparent transparent transparent rgba(23, 79, 140, 0.9);
        -webkit-transform: rotateX(60deg) rotateY(19.5deg);
        -moz-transform: rotateX(60deg) rotateY(19.5deg);
        -ms-transform: rotateX(60deg) rotateY(19.5deg);
        transform: rotateX(60deg) rotateY(19.5deg);
    }

    .pyramid > div:nth-child(4) {
        border-color: transparent transparent transparent rgba(23, 79, 140, 0.8);
        -webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
        -moz-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
        -ms-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
        transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
    }

.pyramid2 {
    position: relative;
    height: 250px;
    width: 50px;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: spin 10s linear infinite;
    -webkit-transform-origin: 58px 100px 58px;
    -moz-transform-style: preserve-3d;
    -moz-animation: spin 10s linear infinite;
    -moz-transform-origin: 58px 100px 58px;
    -ms-transform-style: preserve-3d;
    -ms-animation: spin 10s linear infinite;
    -ms-transform-origin: 58px 100px 58px;
    transform-style: preserve-3d;
    animation: spin 10s linear infinite;
    transform-origin: 58px 100px 58px;
}



.pyramid2 > div {
    position: absolute;
    border-style: solid;
    border-width: 100px 0 100px 172px;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

    /* Put some text on each face */
    .pyramid2 > div:after {
        position: absolute;
        content: "ИС Теплоинформ";
        color: #E97A01;
        left: -150px;
        text-align: center;
    }

    .pyramid2 > div:first-child {
        border-color: transparent transparent transparent rgba(23, 79, 140, 0.6);
        -webkit-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-200px);
        -moz-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-200px);
        -ms-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-200px);
        transform: rotateY(-19.5deg) rotateX(180deg) translateY(-200px);
    }

    .pyramid2 > div:nth-child(2) {
        border-color: transparent transparent transparent rgba(23, 79, 140, 0.6);
        -webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-200px);
        -moz-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-200px);
        -ms-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-200px);
        transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-200px);
    }

    .pyramid2 > div:nth-child(3) {
        border-color: transparent transparent transparent rgba(23, 79, 140, 0.9);
        -webkit-transform: rotateX(60deg) rotateY(19.5deg);
        -moz-transform: rotateX(60deg) rotateY(19.5deg);
        -ms-transform: rotateX(60deg) rotateY(19.5deg);
        transform: rotateX(60deg) rotateY(19.5deg);
    }

    .pyramid2 > div:nth-child(4) {
        border-color: transparent transparent transparent rgba(23, 79, 140, 0.8);
        -webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-58px) translateY(-100px) translateZ(163px);
        -moz-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-58px) translateY(-100px) translateZ(163px);
        -ms-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-58px) translateY(-100px) translateZ(163px);
        transform: rotateX(-60deg) rotateY(19.5deg) translateX(-58px) translateY(-100px) translateZ(163px);
    }

.localwaitblock {
    background-color: #d5f4ff;
    opacity: 0.6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.waitBlock {
    z-index: 3000;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    right: 0px;
    background-color: #d5f4ff;
    opacity: 0.5;
}

.blockUIText {
    padding: 15px;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 50px;
    width: 500px;
    background-color: #174f8c;
    color: #FFA034;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}