body {
    margin:0;
    padding:0;
}

.circule {
    position: absolute;
    display: block;
    margin-left: -240px;
    width: 560px;
    left: 50%;
    top: 150px;
    opacity: 1;
}

.circule_2 {
    position: absolute;
    display: block;
    margin-left: -370px;
    width: 780px;
    left: 50%;
    top: 30px;
    z-index: -5;
    opacity: 1;
    transform:scale(0.5);
    animation:zoom_cv_5 5s ease-in-out forwards;
    
}




.cv_1 {
    animation: cvet_zoom 10s ease-in-out infinite;
}

.shad {
top:-5px;
}

.img_position {
    position: absolute;
    width:100%;
    height:100%;
}
.grid_back {
    display: grid;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position:relative;
}


.cvet_1 {
    position: relative;
    top: 230px;
    left: 50px;
    width: 220px;

    z-index: 2;
    height: 220px;
}

.cvet_2, .cvet_3, .cvet_4, .cvet_5, .cvet_6, .cvet_7, .cvet_8, .cvet_9, .cvet_10, .cvet_11, .cvet_12, .cvet_13{
    position: absolute;
    width: 250px;
    z-index: 1;
    height: 250px;
}



    .cvet_2.position {
        top: 240px;
        right: -20px;
    }



    .cvet_3.position {
        top: 450px;
        left: 40px;
    }

    .cvet_4.position {
        top: 450px;
        width: 350px;
        height: 350px;
        left: 350px;
        z-index: -1;
    }


    .cvet_5.position {
        top: 510px;
        width: 240px;
        height: 240px;
        left: 520px;
        z-index: 1;
    }


    .cvet_6.position {
        top: 335px;
        width: 240px;
        height: 240px;
        left: 35px;
        z-index: 2;
    }

    .cvet_7.position {
        top: 420px;
        width: 440px;
        height: 440px;
        left: 160px;
        z-index: -1;
    }


    .cvet_8.position {
        top: 415px;
        width: 150px;
        height: 150px;
        right: 20px;
        z-index: 1;
    }


    .cvet_9.position {
        top: 350px;
        width: 190px;
        height: 190px;
        left: 15px;
        z-index: 1;
    }

    .cvet_10.position {
        top: 540px;
        width: 190px;
        height: 190px;
        left: 185px;
        z-index: -1;
    }


    .cvet_11.position {
        top: 650px;
        width: 140px;
        height: 140px;
        left: 285px;
        z-index: -2;
    }

    .cvet_12.position {
        top: 450px;
        width: 120px;
        height: 140px;
        left: 45px;
        z-index: 2;
    }

    .cvet_13.position {
        top: 190px;
        width: 120px;
        height: 140px;
        right: 55px;
        z-index: -2;
    }

.cv_1_1 {
    transform-origin: 50% 50%;
    transform: scale(0.5) rotate(0);
    animation: zoom_cv_1 5s ease-in-out forwards;
    transition: transform 3s !important;
}




.cv_1_2 {
    transform-origin: 50% 50%;
    transform: scale(0.5) rotate(0);
    animation: zoom_cv_1 5s 1s ease-in-out forwards;
    transition: transform 4s !important;
}

.cv_1_3 {
    transform-origin: 50% 50%;
    transform: scale(0.5) rotate(0);
    animation: zoom_cv_1 5s 2s ease-in-out forwards;
    transition: transform 5s !important;
}




.cvet_1:hover .interaction {
    transform: scale(0.4) rotate(45deg) !important;
    transform-origin: 50% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 1s !important;
}


.cvet_2:hover .interaction {
    transform: scale(0.4) rotate(45deg) !important;
    transform-origin: 50% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 1s !important;
}

.cvet_3:hover .interaction {
    transform: scale(0.4) rotate(45deg) !important;
    transform-origin: 50% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 1s !important;
}


.cvet_5:hover .interaction {
    transform: scale(0.4) rotate(45deg) !important;
    transform-origin: 50% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 1s !important;
}



.cvet_6:hover .interaction {
    transform: scale(0.4) rotate(45deg) !important;
    transform-origin: 50% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 1s !important;
}

.cvet_7:hover .interaction {
    transform: scale(0.4) rotate(45deg) !important;
    transform-origin: 50% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 1s !important;
}



.cvet_8:hover .interaction, .cvet_9:hover .interaction, .cvet_12:hover .interaction {
    transform: scale(0.6) rotate(45deg) !important;
    transform-origin: 50% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 2s !important;
}

.cvet_8:hover .interaction_2, .cvet_9:hover .interaction_2, .cvet_12:hover .interaction_2 {
    transform: scale(0.4) rotate(45deg) !important;
    transform-origin: 50% 50%;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 1s !important;
}



.interaction {
    transform: scale(1) rotate(90deg) !important;
    transform-origin: 50% 50%;
    transition: transform 5s !important;
    width: 100%;
    height: 100%;
    position: absolute;
}



.interaction_2 {
    transform: scale(1) rotate(90deg) !important;
    transform-origin: 50% 50%;
    transition: transform 3s !important;
    width: 100%;
    height: 100%;
    position: absolute;
}






.rot_1 {
    animation: rot_1_1 30s linear infinite;
}


.rot_2 {
    animation: rot_1_1 60s linear infinite reverse;
}

.rot_3 {
    animation: rot_1_1 160s linear infinite ;
}


@keyframes rot_1_1 {
    100% {
        transform: rotate(359deg);
    }
}


@keyframes zoom_cv_1 {

    0% {
        transform: scale(0.5) rotate(0);
    }

    100% {
        transform: scale(1) rotate(40deg);
    }
}


.pr_1 {
    z-index: 5;
    position: absolute;
    width: 280px;
    margin-left: -100px;
    top: 198px;
    left: 50%;

}


.pr_2 {
    z-index: 5;
    position: absolute;
    width: 280px;
    margin-left: -99px;
    top: 197px;
    left: 50%;
}


.cls_s-1 {
    stroke-dasharray:   10050;
    stroke-dashoffset: 10050;
    stroke-width:2;
    fill: #ffffff00;
    stroke: white;
    animation: dash 5s linear alternate forwards;
}


.cls_s-2 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    stroke-width: 2;
    fill: #ffffff00;
    stroke: white;
    animation: dash_2 2s 0.5s linear alternate forwards;
}



.cls_s-3 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    stroke-width: 2;
    fill: #ffffff00;
    stroke: white;
    animation: dash_2 2s 0.8s linear alternate forwards;
}

.cls_s-4 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    stroke-width: 2;
    fill: #ffffff00;
    stroke: white;
    animation: dash_2 2s 0.8s linear alternate forwards;
}

.cls_s-5 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    stroke-width: 2;
    fill: #ffffff00;
    stroke: white;
    animation: dash_2 2s 0.9s linear alternate forwards;
}



.cls_s-6 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    stroke-width: 2;
    fill: #ffffff00;
    stroke: white;
    animation: dash_2 2s 1s linear alternate forwards;
}



.cls_s-7 {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    stroke-width: 2;
    fill: #ffffff00;
    stroke: white;
    animation: dash_3 2s 1.1s linear alternate forwards;
}


.cls_s-8 {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    stroke-width: 2;
    fill: #ffffff00;
    stroke: white;
    animation: dash_3 2s 1.3s linear alternate forwards;
}


.cls_s-9 {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    stroke-width: 2;
    fill: #ffffff00;
    stroke: white;
    animation: dash_3 2s 1.5s linear alternate forwards;
}


.cls_s-15 {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    stroke-width: 1;
    fill: #ffffff00;
    stroke: white;
    animation: dash_3 2s 2s linear alternate forwards;
}

@keyframes dash {
    from {
        stroke-dashoffset: 10050;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes dash_2 {
    from {
        stroke-dashoffset: 1000;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes dash_3 {
    from {
        stroke-dashoffset: 2000;
    }

    to {
        stroke-dashoffset: 0;
    }
}



.bgg_0 {
    /*    background: radial-gradient(circle, #ffffdb 0%, rgba(255, 255, 219, 0.0) 85%);
*/
    background: radial-gradient(circle, #13ffd7 -15%, rgba(255, 255, 219, 0.0) 80%);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -5;
}

.bgg_1 {
/*    background: radial-gradient(circle, #ffffdb 0%, #006d9c 85%);
*/    background-color: #006d9c;
    width:100%;
    height: 100%;
    position: absolute;
    z-index: -5;
}


.bgg_2 {
/*    background: radial-gradient(circle, #ffffdb 0%, #7500ae 85%);
*/    background-color: #7500ae;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -5;
    opacity: 0;
    animation: opas_1 40s 5s ease-in-out infinite;
}



@keyframes opas_1 {

    0%, 100% {
    opacity:0;
    }

    50% {
        opacity: 1;
    }

}

@keyframes zoom_cv_5 {

    0% {
        transform: scale(0.5) rotate(-15deg);
    }

    80% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1) rotate(00deg);
    }
}


.cen {
    width: 1px;
    position: absolute;
    margin-top: -460px;
    top: 50%;
    left: 50%;
}

.grid_item {
    /*    background-image: url('//uzd-uploads.azureedge.net/upload/CustomLandingPageFiles/id-19594/ver-86/images/Asset 26.svg');
*/ width: 800px;
    height: 800px;
    align-self: center;
    position: relative;
    justify-self: center;
    margin-left: -425px;
}

@keyframes cvet_zoom {
    to {
    transform:rotate(360deg);
    }
}


@media screen and (max-width: 767px) {
    .grid_item {
        transform: scale(0.8);
        margin-left: -410px;
    }

    .cen {


        margin-top: -420px;

    }



}



@media screen and (max-width: 667px) {
    .grid_item {
        transform: scale(0.7);
        margin-left: -410px;
    }
}


@media screen and (max-width: 500px) {
    .grid_item {
        transform: scale(0.6);
        margin-left: -410px;
    }
}

@media screen and (max-width: 400px) {
    .grid_item {
        transform: scale(0.50);
        margin-left: -410px;
    }
}