body {
	 overflow: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}/* Backgrounds will cover all the section */

        .section,
        .slide{
            /* Important! Videos use absolute */
            position: relative;
            /* Making sure videos won't overflow */
            overflow: hidden;
            text-align: center;
            -webkit-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);display: flex;
        }

        .overlay-video {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100vw;
            height: 100vh;
            transform: translate(-50%, -50%);
            z-index: -100;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .overlay-video-static{
            position: absolute;
            right: 0;
            bottom: 0;
            top:0;
            right:0;
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
            background-color: black;
            background-image: /* our video */;
            background-position: center center;
            background-size: cover;
            object-fit: cover; /*cover video background */
            z-index: -100;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* Making the Youtube video cover the whole viewport */
        @media (min-aspect-ratio: 16/9) {
            .overlay-video {
                height: 56.25vw;
            }
        }
        @media (max-aspect-ratio: 16/9) {
            .overlay-video {
                width: 177.78vh;
            }
        }

.dot{
    background: transparent url({% static 'main/images/png/pattern.png' %}) repeat top left;
    height: 100vh;
    width: 100vw;
    position:fixed;
    z-index: 1;
    top: 0;
    left: 0;
    }

#loading-screen.hidden {
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    }

#fullscreenButton {
position: absolute;
top: 5px;
left: 5px;
z-index: 3;
color: #fff;
font-size: 0.7em;
letter-spacing: 1px;
font-weight: 300;
}



.float {
margin-top: 50vh;
            animation-name: floatAnimation;
            animation-duration: 12s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
        }

@keyframes floatAnimation {
    0% {
        transform: translate(0, 0) scale(1) translateX(0);
    }
    25% {
        transform: translate(0, 30px) scale(1.05) translateX(-5px); /* Меньше качаем влево */
    }
    50% {
        transform: translate(0, 60px) scale(1) translateX(5px); /* Легкое движение вправо */
    }
    75% {
        transform: translate(0, -30px) scale(0.95) translateX(-5px); /* Легкое движение вверх и сжимаем */
    }
    100% {
        transform: translate(0, 0) scale(1) translateX(0); /* Возвращаем в исходное положение */
    }
}

.fp-right {
margin-right: -15px;
}



        .section:nth-child(1) { background: #fb0086; }
        .section:nth-child(2) { background: #33FF57; }
        .section:nth-child(3) { background: #3357FF; }
        .section:nth-child(4) { background: #ff8400; }
        .section:nth-child(5) { background: #fbff00; }
        .section:nth-child(6) { background: #FF5733; }
        .section:nth-child(7) { background: #c86caf; }
        .section:nth-child(8) { background: #002fff; }
        .section:nth-child(9) { background: #ff0000; }
        .section:nth-child(10) { background: #268f0e; }