﻿#waitblockid {
    z-index: 3000;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    right: 0px;
    background-color: #d5f4ff;
    opacity: 0.9;
}

.blockUI {
    padding: 15px;
    border-radius: 10px;
    margin: 0 auto;
    width: 500px;
    background-color: #174f8c;
    color: #FFA034;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

#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);
    }
