.okvir {
    background: #607d8b;
}

.box{
    position: absolute;
    top: calc(50% - 15vh);
    left: calc(50% - 10vw);
    transform: perspective(100vw) rotateY(-45deg);
    -webkit-transform: perspective(100vw) rotateY(-45deg);
    -moz-transform: perspective(100vw) rotateY(-45deg);
    -ms-transform: perspective(100vw) rotateY(-45deg);
    -o-transform: perspective(100vw) rotateY(-45deg);
    width: 20vw;
    height: 35vh;
    transform-style: preserve-3d;
}

.box::before {
    content: '';
    position: absolute;
    bottom: -10vh;
    left: 0;
    width: 100%;
    height: 5vh;
    background: #000;
    filter: blur(4vw);
    -webkit-filter: blur(4vw);
    opacity: 0.5;
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
}
.box div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: animate 5s linear infinite;
    -webkit-animation: animate 5s linear infinite;
}

.box div span{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #f1f1f1, #bbb, #f1f1f1);
    border-radius: 2vw;
    -webkit-border-radius: 2vw;
    -moz-border-radius: 2vw;
    -ms-border-radius: 2vw;
    -o-border-radius: 2vw;
} 

.box div span:nth-child(1) {
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
}

.box div span:nth-child(2) {
    transform: rotateX(45deg);
    -webkit-transform: rotateX(45deg);
    -moz-transform: rotateX(45deg);
    -ms-transform: rotateX(45deg);
    -o-transform: rotateX(45deg);
}

.box div span:nth-child(3) {
    transform: rotateX(-45deg);
    -webkit-transform: rotateX(-45deg);
    -moz-transform: rotateX(-45deg);
    -ms-transform: rotateX(-45deg);
    -o-transform: rotateX(-45deg);
}

.box div span:nth-child(4) {
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
}

@keyframes animate{
    0%{
        transform: perspective(100vw) rotateX(0deg);
        -webkit-transform: perspective(100vw) rotateX(0deg);
        -moz-transform: perspective(100vw) rotateX(0deg);
        -ms-transform: perspective(100vw) rotateX(0deg);
        -o-transform: perspective(100vw) rotateX(0deg);
    }
    100% {
        transform: perspective(100vw) rotateX(359deg);
        -webkit-transform: perspective(100vw) rotateX(359deg);
        -moz-transform: perspective(100vw) rotateX(359deg);
        -ms-transform: perspective(100vw) rotateX(359deg);
        -o-transform: perspective(100vw) rotateX(359deg);
    }
}

span{
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 3vh;
    color: aqua;
}

.trzinka{
    width: auto;
    height: 10vh;
}

.obrni {
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
}