﻿* {
    box-sizing: border-box;
}

body {
    background: #003265;
    overflow: hidden;
}

.wrap {
    perspective-origin: 50% 50%;
}

.pagina {
    display: grid;
    grid-template-columns: 30%;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /*    background-image: url("img/bg-pattern2.png") !important;*/
    background-color: #ffffff;
}
.mud-table {
    table-layout: auto !important;
}

.svg {
    /*stroke: #ffffff;*/
    position: absolute;
    bottom: -100vh;
    transform-style: preserve-3d;
    width: 200px;
}

    .svg:nth-child(1) {
        left: -1%;
        -webkit-animation: raise1 15s linear infinite;
        animation: raise1 15s linear infinite;
        -webkit-animation-delay: -4s;
        animation-delay: -4s;
        transform: scale(-0.3) rotate(121deg);
        z-index: -6;
        filter: blur(-5px);
    }

@-webkit-keyframes raise1 {
    to {
        bottom: 150vh;
        transform: scale(-0.3) rotate(211deg);
    }
}

@keyframes raise1 {
    to {
        bottom: 150vh;
        transform: scale(-0.3) rotate(211deg);
    }
}

.svg:nth-child(2) {
    left: 27%;
    -webkit-animation: raise2 21s linear infinite;
    animation: raise2 21s linear infinite;
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    transform: scale(0) rotate(31deg);
    z-index: -5;
    filter: blur(-4px);
}

@-webkit-keyframes raise2 {
    to {
        bottom: 150vh;
        transform: scale(0) rotate(78deg);
    }
}

@keyframes raise2 {
    to {
        bottom: 150vh;
        transform: scale(0) rotate(78deg);
    }
}

.svg:nth-child(3) {
    left: 81%;
    -webkit-animation: raise3 7s linear infinite;
    animation: raise3 7s linear infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    transform: scale(0.3) rotate(72deg);
    z-index: -4;
    filter: blur(-3px);
}

@-webkit-keyframes raise3 {
    to {
        bottom: 150vh;
        transform: scale(0.3) rotate(128deg);
    }
}

@keyframes raise3 {
    to {
        bottom: 150vh;
        transform: scale(0.3) rotate(128deg);
    }
}

.svg:nth-child(4) {
    left: 47%;
    -webkit-animation: raise4 18s linear infinite;
    animation: raise4 18s linear infinite;
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    transform: scale(0.6) rotate(204deg);
    z-index: -3;
    filter: blur(-2px);
}

@-webkit-keyframes raise4 {
    to {
        bottom: 150vh;
        transform: scale(0.6) rotate(106deg);
    }
}

@keyframes raise4 {
    to {
        bottom: 150vh;
        transform: scale(0.6) rotate(106deg);
    }
}

.svg:nth-child(5) {
    left: 64%;
    -webkit-animation: raise5 12s linear infinite;
    animation: raise5 12s linear infinite;
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    transform: scale(0.9) rotate(115deg);
    z-index: -2;
    filter: blur(-1px);
}

@-webkit-keyframes raise5 {
    to {
        bottom: 150vh;
        transform: scale(0.9) rotate(323deg);
    }
}

@keyframes raise5 {
    to {
        bottom: 150vh;
        transform: scale(0.9) rotate(323deg);
    }
}

.svg:nth-child(6) {
    left: -3%;
    -webkit-animation: raise6 18s linear infinite;
    animation: raise6 18s linear infinite;
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    transform: scale(1.2) rotate(34deg);
    z-index: -1;
    filter: blur(0px);
}

@-webkit-keyframes raise6 {
    to {
        bottom: 150vh;
        transform: scale(1.2) rotate(331deg);
    }
}

@keyframes raise6 {
    to {
        bottom: 150vh;
        transform: scale(1.2) rotate(331deg);
    }
}

.svg:nth-child(7) {
    left: 92%;
    -webkit-animation: raise7 7s linear infinite;
    animation: raise7 7s linear infinite;
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
    transform: scale(1.5) rotate(328deg);
    z-index: 0;
    filter: blur(1px);
}

@-webkit-keyframes raise7 {
    to {
        bottom: 150vh;
        transform: scale(1.5) rotate(155deg);
    }
}

@keyframes raise7 {
    to {
        bottom: 150vh;
        transform: scale(1.5) rotate(155deg);
    }
}

.svg:nth-child(8) {
    left: 53%;
    -webkit-animation: raise8 8s linear infinite;
    animation: raise8 8s linear infinite;
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
    transform: scale(1.8) rotate(259deg);
    z-index: 1;
    filter: blur(2px);
}

@-webkit-keyframes raise8 {
    to {
        bottom: 150vh;
        transform: scale(1.8) rotate(320deg);
    }
}

@keyframes raise8 {
    to {
        bottom: 150vh;
        transform: scale(1.8) rotate(320deg);
    }
}

.svg:nth-child(9) {
    left: 21%;
    -webkit-animation: raise9 19s linear infinite;
    animation: raise9 19s linear infinite;
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
    transform: scale(2.1) rotate(19deg);
    z-index: 2;
    filter: blur(3px);
}

@-webkit-keyframes raise9 {
    to {
        bottom: 150vh;
        transform: scale(2.1) rotate(264deg);
    }
}

@keyframes raise9 {
    to {
        bottom: 150vh;
        transform: scale(2.1) rotate(264deg);
    }
}

.svg:nth-child(10) {
    left: 100%;
    -webkit-animation: raise10 13s linear infinite;
    animation: raise10 13s linear infinite;
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
    transform: scale(2.4) rotate(59deg);
    z-index: 3;
    filter: blur(4px);
}

@-webkit-keyframes raise10 {
    to {
        bottom: 150vh;
        transform: scale(2.4) rotate(12deg);
    }
}

@keyframes raise10 {
    to {
        bottom: 150vh;
        transform: scale(2.4) rotate(12deg);
    }
}
