.background-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
    -webkit-filter: blur(28px);
    filter: blur(28px);
    overflow: hidden;
    height: 100%;
    overflow-x: hidden !important;
}

.shape {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.6;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

    -webkit-animation-name: float;
    animation-name: float;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
}
 
.first_shape {
    background-image: url('../images/BGShapes/first_shape.png');
    width: 600px;
    height: 700px;
    top: -177px;
    left: -63px;
}

.second_shape {
    background-image: url('../images/BGShapes/second_shape.png');
    width: 800px;
    height: 800px;
    top: 104px;
    right: 200px;
}

.third_shape {
    background-image: url('../images/BGShapes/third_shape.png');
    width: 600px;
    height: 700px;
    top: 437px;
    left: 50px;
}

.fourth_shape {
    background-image: url('../images/BGShapes/fourth_shape.png');
    width: 600px;
    height: 800px;
    top: -300px;
    right: 1200px;
}

.fifth_shape {
    background-image: url('../images/BGShapes/fifth_shape.png');
    width: 400px;
    height: 600px;
    top: 880px;
    right: 400px;
}

.sixth_shape {
    background-image: url('../images/BGShapes/sixth_shape.png');
     width: 500px;
    height: 500px;
    top: 1100px;
    left: 0px;
}

.seventh_shape {
    background-image: url('../images/BGShapes/seventh_shape.png');
    width: 600px;
    height: 700px;
    top: 1400px;
    right: -100px;
}

.eighth_shape {
    background-image: url('../images/BGShapes/eighth_shape.png');
  width: 1000px;
    height: 1000px;
    top: 1700px;
    left: 0px;
}

.ninth_shape {
    background-image: url('../images/BGShapes/ninth_shape.png');
    width: 800px;
    height: 1000px;
    top: 3400px;
    right: 500px;
}

.tenth_shape {
    background-image: url('../images/BGShapes/tenth_shape.png');
    width: 600px;
    height: 700px;
    top: -400px;
    right: -100px;
}

.eleventh_shape {
    background-image: url('../images/BGShapes/eleventh_shape.png');
    width: 1200px;
    height: 1200px;
    top: 2600px;
    left: -241px;
    transform: rotate(-138deg);
}

.twelfth_shape {
    background-image: url('../images/BGShapes/twelfth_shape.png');
    width: 1400px;
    height: 900px;
    top: 4000px;
    left: -150px;
}

.thirteenth_shape {
    background-image: url('../images/BGShapes/thirteenth_shape.png');
    width: 1000px;
    height: 1000px;
    top: 2600px;
    right: 0px;
}

.fourteenth_shape {
    background-image: url('../images/BGShapes/fourteenth_shape.png');
width: 800px;
    height: 800px;
    top: 5000px;
    left: 200px;
    transform: rotate(35deg);
}

.fifteenth_shape {
    background-image: url('../images/BGShapes/fifteenth_shape.png');
    width: 1200px;
    height: 1400px;
    top: 3920px;
    right: 152px;
    transform: rotate(315deg);
}

.sixteenth_shape{
    background-image: url('../images/BGShapes/eighth_shape.png');
        width: 800px;
    height: 800px;
    top: 5100px;
    right: 200px;
}


/* ========================
   RESPONZIVITA PRO BACKGROUND SHAPES
======================== */
@media (min-width: 2015px) and (max-width: 2225px) {
    .first_shape {
        width: 600px;
        height: 700px;
        top: -177px;
        left: -63px;
    }

    .second_shape {
        width: 900px;
        height: 1000px;
        top: 3px;
        right: 90px;
    }

    .fourth_shape {
        width: 700px;
        height: 800px;
        top: -300px;
        right: 900px;
    }

    .ninth_shape {
        width: 1000px;
        height: 1000px;
        top: 3400px;
        right: 100px;
    }
    
    .twelfth_shape {
        width: 1400px;
        height: 900px;
        top: 4000px;
        left: -300px;
    }

    .thirteenth_shape{
        width: 500px;
        height: 1000px;
        top: 2600px;
        right: 0px;
    }

    .fourteenth_shape {
        width: 800px;
        height: 800px;
        top: 5000px;
        left: 100px;
    }

    .fifteenth_shape {
        width: 1200px;
        height: 1400px;
        top: 3900px;
        right: 0px;
    }

    .sixteenth_shape {
        width: 800px;
        height: 800px;
        top: 5100px;
        right: 0px;
    }
}

@media (min-width: 1735px) and (max-width: 2014px) {
   .second_shape{
    width: 700px;
    height: 700px;
    top: 150px;
    right: 77px;
   }
   
   .fourth_shape {
        width: 600px;
        height: 600px;
        top: -200px;
        right: 700px;
    }

    .eighth_shape{
        width: 1000px;
    height: 1000px;
    top: 1700px;
    left: -200px;
    }

    .seventh_shape{
        width: 600px;
        height: 700px;
        top: 1400px;
        right: 0px;
    }

    .eleventh_shape{
        width: 1000px;
        height: 1000px;
        top: 2800px;
        left: -280px;
    }

    .twelfth_shape {
        width: 1000px;
        height: 700px;
        top: 4200px;
        left: -200px;
    }

    .fifteenth_shape {
        width: 1200px;
        height: 1400px;
        top: 3900px;
        right: -200px;
    }

    .sixteenth_shape {
        width: 800px;
        height: 800px;
        top: 5100px;
        right: -100px;
    }

    .fourteenth_shape {
        width: 600px;
        height: 600px;
        top: 5050px;
        left: 100px;
    }
}

@media (min-width: 1560px) and (max-width: 1734px) {
    .first_shape {
        width: 400px;
        height: 700px;
        top: -190px;
        left: -31px;
    }

    .second_shape{
        width: 700px;
        height: 700px;
        top: 150px;
        right: 77px;
   }

    .fourth_shape {
        width: 600px;
        height: 600px;
        top: -200px;
        right: 700px;
    }

    .third_shape {
        width: 600px;
        height: 700px;
        top: 437px;
        left: 0px;
    }

    .fifth_shape {
        width: 400px;
        height: 500px;
        top: 820px;
        right: 300px;
    }

        .eighth_shape {
        width: 800px;
        height: 800px;
        top: 1850px;
        left: -200px;
    }

    .thirteenth_shape {
        width: 800px;
        height: 800px;
        top: 2200px;
        right: -300px;
    }

    .ninth_shape {
        width: 1500px;
        height: 1300px;
        top: 3100px;
        right: -300px;
    }

    .twelfth_shape {
        width: 700px;
        height: 600px;
        top: 4400px;
        left: -100px;
    }

    .fifteenth_shape {
        width: 1300px;
        height: 1600px;
        top: 3800px;
        right: -300px;
    }

    .sixteenth_shape {
        width: 800px;
        height: 800px;
        top: 5300px;
        right: -200px;
    }

    .fourteenth_shape {
        width: 500px;
        height: 500px;
        top: 5300px;
        left: 0px;
    }
}

@media (min-width: 1350px) and (max-width: 1559px) {
    .fifth_shape {
        width: 400px;
        height: 500px;
        top: 820px;
        right: 300px;
    }


    .first_shape {
        width: 400px;
        height: 700px;
        top: -190px;
        left: -31px;
    }

    .third_shape {
        width: 600px;
        height: 700px;
        top: 437px;
        left: 0px;
    }

    .fourth_shape {
        width: 600px;
        height: 600px;
        top: -200px;
        right: 500px;
    }

    .second_shape {
        width: 500px;
        height: 500px;
        top: 300px;
        right: 50px;
    }

    .eighth_shape {
        width: 600px;
        height: 700px;
        top: 1850px;
        left: -200px;
    }

     .twelfth_shape {
        width: 700px;
        height: 600px;
        top: 4400px;
        left: -100px;
    }

    .fifteenth_shape {
        width: 1300px;
        height: 1600px;
        top: 3800px;
        right: -300px;
    }


    .thirteenth_shape {
        width: 600px;
        height: 800px;
        top: 2200px;
        right: -200px;
    }

    .eleventh_shape {
        width: 800px;
        height: 900px;
        top: 2800px;
        left: -241px;
    }

    .ninth_shape {
        width: 1000px;
        height: 1000px;
        top: 3500px;
        right: -200px;
    }

        .sixteenth_shape {
        width: 800px;
        height: 800px;
        top: 5100px;
        right: -200px;
    }

        .fifteenth_shape {
        width: 1000px;
        height: 1000px;
        top: 4200px;
        right: -200px;
    }

      .fourteenth_shape {
        width: 500px;
        height: 500px;
        top: 5300px;
        left: 0px;
    }
}

@media (min-width: 1145px) and (max-width: 1349px) {
    .first_shape {
        width: 400px;
        height: 700px;
        top: -250px;
        left: -50px;
    }

    .second_shape {
        width: 500px;
        height: 500px;
        top: 300px;
        right: -50px;
    }

    .third_shape {
        width: 600px;
        height: 700px;
        top: 437px;
        left: -200px;
    }

    .fourth_shape {
        width: 500px;
        height: 500px;
        top: -150px;
        right: 400px;
    }

    .fifth_shape {
        width: 400px;
        height: 600px;
        top: 800px;
        right: 200px;
    }

    .sixth_shape {
        width: 400px;
        height: 400px;
        top: 1100px;
        left: 0px;
    }

    .seventh_shape {
        width: 400px;
        height: 500px;
        top: 1500px;
        right: -50px;
    }

    .eighth_shape
    {
        width: 700px;
    height: 800px;
    top: 2150px;
    left: -200px;
    }

    .eleventh_shape {
        width: 800px;
        height: 800px;
        top: 2900px;
        left: -241px;
    }

    .thirteenth_shape {
        width: 700px;
        height: 700px;
        top: 3300px;
        right: -200px;
    }

    .ninth_shape {
        width: 800px;
        height: 1000px;
        top: 3700px;
        right: 0px;
    }

    .twelfth_shape {
        width: 1000px;
        height: 600px;
        top: 4000px;
        left: -300px;
    }

    .fifteenth_shape {
        width: 1000px;
        height: 1200px;
        top: 4200px;
        right: -200px;
    }

    .fourteenth_shape {
        width: 600px;
        height: 600px;
        top: 5300px;
        left: -100px;
    }

    .sixteenth_shape {
        width: 600px;
        height: 600px;
        top: 5300px;
        right: -150px;
    }
}

@media (min-width: 835px) and (max-width: 1144px) {
    .fourth_shape {
        width: 400px;
        height: 400px;
        top: -100px;
        right: 150px;
    }

     .first_shape {
        width: 400px;
        height: 700px;
        top: -250px;
        left: -50px;
    }

    .second_shape {
        width: 500px;
        height: 500px;
        top: 300px;
        right: -50px;
    }

    .third_shape {
        width: 600px;
        height: 700px;
        top: 437px;
        left: -200px;
    }

    .fifth_shape {
        width: 300px;
        height: 400px;
        top: 900px;
        right: 0px;
    }

    .sixth_shape {
        width: 300px;
        height: 300px;
        top: 1100px;
        left: 0px;
    }

       .seventh_shape {
        width: 400px;
        height: 500px;
        top: 1500px;
        right: -50px;
    }

     .eighth_shape
    {
        width: 600px;
    height: 700px;
    top: 2200px;
    left: -200px;
    }

    .eleventh_shape {
        width: 800px;
        height: 800px;
        top: 2900px;
        left: -241px;
    }

    .thirteenth_shape {
        width: 500px;
        height: 500px;
        top: 3500px;
        right: -50px;
    }

    .ninth_shape {
        width: 700px;
        height: 800px;
        top: 3900px;
        left: -300px;
    }

    .twelfth_shape {
        display: none;
    }

    .fifteenth_shape {
        width: 1000px;
        height: 1200px;
        top: 4200px;
        right: -200px;
    }

    .fourteenth_shape {
        width: 400px;
        height: 400px;
        top: 5900px;
        left: 0px;
    }

    .sixteenth_shape {
        width: 600px;
        height: 600px;
        top: 5300px;
        right: -150px;
    }

    .fifteenth_shape {
        width: 900px;
        height: 800px;
        top: 4600px;
        right: -200px;
    }

    .sixteenth_shape {
        width: 500px;
        height: 500px;
        top: 5300px;
        right: -100px;
    }

}

@media(min-width: 480px) and (max-width: 834px){
    .first_shape {
        width: 300px;
        height: 700px;
        top: -250px;
        left: -50px;
    }

    .fourth_shape {
        width: 400px;
        height: 400px;
        top: -100px;
        right: 50px;
    }
    .second_shape {
        width: 500px;
        height: 500px;
        top: 300px;
        right: -50px;
    }

    .third_shape {
        width: 600px;
        height: 700px;
        top: 437px;
        left: -200px;
    }

    .fifth_shape {
        width: 300px;
        height: 400px;
        top: 900px;
        right: 0px;
    }

    .sixth_shape {
        width: 300px;
        height: 300px;
        top: 1100px;
        left: 0px;
    }

       .seventh_shape {
        width: 400px;
        height: 500px;
        top: 1500px;
        right: -50px;
    }

     .eighth_shape
    {
        width: 600px;
    height: 700px;
    top: 2200px;
    left: -200px;
    }

        .eleventh_shape {
        width: 800px;
        height: 800px;
        top: 5000px;
        left: -241px;
    }
    .thirteenth_shape {
        width: 500px;
        height: 500px;
        top: 3100px;
        right: -50px;
    }

    .ninth_shape {
        width: 700px;
        height: 800px;
        top: 3900px;
        left: -300px;
    }

    .twelfth_shape {
        display: none;
    }

        .fifteenth_shape {
        width: 900px;
        height: 800px;
        top: 5600px;
        right: -250px;
    }

        .fourteenth_shape {
        width: 400px;
        height: 400px;
        top: 7300px;
        left: -100px;
    }

    .sixteenth_shape {
        width: 600px;
        height: 600px;
        top: 5300px;
        right: -150px;
    }

       .sixteenth_shape {
        width: 500px;
        height: 500px;
        top: 6600px;
        right: -200px;
    }
}

@media (max-width: 480px) {
     .first_shape {
        width: 400px;
        height: 700px;
        top: -200px;
        left: -50px;
    }

    .second_shape {
        width: 500px;
        height: 500px;
        top: 300px;
        right: -50px;
    }

        .third_shape {
        width: 600px;
        height: 700px;
        top: 600px;
        left: -200px;
    }

        .fifth_shape {
        width: 300px;
        height: 400px;
        top: 1000px;
        right: 0px;
    }

        .sixth_shape {
        width: 300px;
        height: 300px;
        top: 1600px;
        left: 0px;
    }

          .seventh_shape {
        width: 400px;
        height: 500px;
        top: 2600px;
        right: -150px;
    }

         .eighth_shape {
        width: 600px;
        height: 700px;
        top: 3300px;
        left: -200px;
    }

            .eleventh_shape {
        width: 800px;
        height: 800px;
        top: 5400px;
        left: -241px;
    }
        .thirteenth_shape {
        width: 400px;
        height: 500px;
        top: 4850px;
        right: -50px;
    }

    .ninth_shape {
        width: 700px;
        height: 800px;
        top: 3900px;
        left: -300px;
    }

    .twelfth_shape {
        display: none;
    }

            .fifteenth_shape {
        width: 900px;
        height: 800px;
        top: 6700px;
        right: -350px;
    }
           .fourteenth_shape {
        width: 400px;
        height: 400px;
        top: 9100px;
        left: -100px;
    }

        .sixteenth_shape {
        width: 500px;
        height: 500px;
        top: 7800px;
        right: 150px;
    }

    .fourth_shape {
        width: 400px;
        height: 400px;
        bottom: 1000px;
        right: -50px;
    }
}

/* ====== ANIMACE ====== */
@-webkit-keyframes float {
  0%, 100% {
    -webkit-transform: translateY(0) translateX(0) rotate(var(--rotate, 0deg));
            transform: translateY(0) translateX(0) rotate(var(--rotate, 0deg));
  }
  50% {
    -webkit-transform: translateY(-20px) translateX(10px) rotate(calc(var(--rotate, 0deg) + 2deg));
            transform: translateY(-20px) translateX(10px) rotate(calc(var(--rotate, 0deg) + 2deg));
  }
}

@keyframes float {
  0%, 100% {
    -webkit-transform: translateY(0) translateX(0) rotate(var(--rotate, 0deg));
            transform: translateY(0) translateX(0) rotate(var(--rotate, 0deg));
  }
  50% {
    -webkit-transform: translateY(-20px) translateX(10px) rotate(calc(var(--rotate, 0deg) + 2deg));
            transform: translateY(-20px) translateX(10px) rotate(calc(var(--rotate, 0deg) + 2deg));
  }
}

.shape {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.6;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;

    /* Přidáno pro animaci */
    animation-name: float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

.first_shape {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    --rotate: 90deg;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.second_shape {
    -webkit-animation-duration: 5.5s;
    animation-duration: 5.5s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.third_shape, .fourth_shape, .fifth_shape, .sixth_shape, .seventh_shape,
.eighth_shape, .ninth_shape, .tenth_shape, .eleventh_shape, .twelfth_shape,
.thirteenth_shape, .fourteenth_shape, .fifteenth_shape, .sixteenth_shape {
    -webkit-transform: rotate(var(--rotate, 0deg));
    transform: rotate(var(--rotate, 0deg));
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
}

.third_shape { --rotate: 0deg; -webkit-animation-duration: 6.5s; animation-duration: 6.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.fourth_shape { --rotate: 0deg; -webkit-animation-duration: 7.2s; animation-duration: 7.2s; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.fifth_shape { --rotate: 0deg; -webkit-animation-duration: 6.1s; animation-duration: 6.1s; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
.sixth_shape { --rotate: 0deg; -webkit-animation-duration: 6.8s; animation-duration: 6.8s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.seventh_shape { --rotate: 0deg; -webkit-animation-duration: 7.1s; animation-duration: 7.1s; -webkit-animation-delay: 1.1s; animation-delay: 1.1s; }
.eighth_shape { --rotate: 0deg; -webkit-animation-duration: 5.9s; animation-duration: 5.9s; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.ninth_shape { --rotate: 0deg; -webkit-animation-duration: 6.3s; animation-duration: 6.3s; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.tenth_shape { --rotate: 0deg; -webkit-animation-duration: 6.6s; animation-duration: 6.6s; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }
.eleventh_shape { --rotate: -138deg; -webkit-animation-duration: 7.4s; animation-duration: 7.4s; -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }
.twelfth_shape { --rotate: 0deg; -webkit-animation-duration: 6.7s; animation-duration: 6.7s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.thirteenth_shape { --rotate: 0deg; -webkit-animation-duration: 6.2s; animation-duration: 6.2s; -webkit-animation-delay: 1s; animation-delay: 1s; }
.fourteenth_shape { --rotate: 35deg; -webkit-animation-duration: 6.9s; animation-duration: 6.9s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.fifteenth_shape { --rotate: 315deg; -webkit-animation-duration: 7s; animation-duration: 7s; -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }
.sixteenth_shape { --rotate: 0deg; -webkit-animation-duration: 6.4s; animation-duration: 6.4s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }