:root {
    --start: 0;
    --stopp: 0;
    --speed: 8s;
    /*--boxColor: #f4b7f7;
    --rotateSpeed: 30s;
    --bounceSpeed: 1.5s;
    --boxSize: 2em;*/
    --lengthRigh: 400px;
    --lengthLeft: -400px;
    --lengthRighFull: 800px;
    --lengthLeftFull: -800px;
    --cupColor1: #C2EBF5;
    --cupColor2: #91bdc7;
    --cupColor3: #999;
    --loaderColor: #666;
    /*--loaderColor: #006fff;*/
    --size-2: 5px;
    --size-3: 10px;
    --surface-2: #000;
    --radius-2: 5%;
    --shadow-2: 0 35px rgb(0,0,0,0.2);
    --spacer: 0.2rem;
}

#aquarium {
    background: transparent url(../HTML/BG_004-min.jpg) repeat 80% 80%;
    /*background-image: url('../HTML/BG_004-min.jpg');*/
    background-size: 100%;
    position: relative;
    height: 700px;
    z-index: 1;
    border-radius: 0;
    /* border: 1px solid red;*/
}

.aquariumBG {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-size: 100%;
    z-index: 3;
}
/*.aquariumFG {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: transparent url(../../Images/Black_20.png) repeat center center;
    background-color: #000;
    opacity: 0.5;
}*/
#f1, #f2, #f3, #f4, #f5, #f6, #f7, #f8, #f9 {
    width: 10%;
}

#f1 {
    /*width: 70px;*/
    z-index: 2;
    position: absolute;
    left: 2%;
    top: 50%;
    animation: fish1 11s linear 0s infinite forwards;
}

#f2 {
    /*width: 70px;*/
    z-index: 2;
    position: absolute;
    right: 2%;
    top: 20%;
    animation: fish2 8s linear 0s infinite forwards;
}

#f3 {
    /*width: 70px;*/
    z-index: 2;
    position: absolute;
    right: 2%;
    top: 0%;
    animation: fish3 6s linear 0s infinite forwards;
}

#f4 {
    /*width: 70px;*/
    z-index: 2;
    position: absolute;
    left: 2%;
    top: 30%;
    animation: fish4 14s linear 0s infinite forwards;
}

#f5 {
    /*width: 70px;*/
    z-index: 2;
    position: absolute;
    right: 2%;
    top: 40%;
    animation: fish5 19s linear 0s infinite forwards;
}

#f6 {
    /*width: 70px;*/
    z-index: 2;
    position: absolute;
    right: 2%;
    top: 55%;
    animation: fish6 16s linear 0s infinite forwards;
}

#f7 {
    /*width: 70px;*/
    z-index: 2;
    position: absolute;
    left: 2%;
    top: 7%;
    animation: fish7 9s linear 0s infinite forwards;
}

#f8 {
    /*width: 70px;*/
    z-index: 2;
    position: absolute;
    left: 2%;
    top: 70%;
    animation: fish8 7s linear 0s infinite forwards;
}

#f9 {
    /*width: 70px;*/
    z-index: 2;
    position: absolute;
    right: 2%;
    top: 77%;
    animation: fish9 20s linear 0s infinite forwards;
}

#b1 {
    /*width: 70px;*/
    z-index: 2;
    position: absolute;
    left: 20%;
    top: 60%;
    animation: bubble1 20s linear 0s infinite forwards;
}

#b2 {
    /*width: 70px;*/
    z-index: 2;
    position: absolute;
    right: 20%;
    top: 30%;
    animation: bubble2 15s linear 0s infinite forwards;
}

@keyframes fish1 {
    0% {
        transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.9);
    }

    50% {
        transform: translateX(900px) rotateX(0deg) rotateZ(0deg) scale(0.9);
    }

    51% {
        transform: translateX(900px) rotateX(180deg) rotateZ(180deg) scale(0.9);
    }

    100% {
        transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.9);
    }
}

@keyframes fish2 {
    0% {
        transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.9);
        /*        opacity: 1;
*/
    }

    50% {
        transform: translateX(-850px) rotateX(0deg) rotateZ(0deg) scale(0.9);
        /*   opacity: 0;*/
    }

    51% {
        transform: translateX(-850px) rotateX(180deg) rotateZ(180deg) scale(0.9);
    }

    100% {
        transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.9);
        /*   opacity: 0;*/
    }
}

@keyframes fish3 {
    0% {
        transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.7);
    }

    50% {
        transform: translateX(-900px) rotateX(0deg) rotateZ(0deg) scale(0.7);
    }

    51% {
        transform: translateX(-900px) rotateX(180deg) rotateZ(180deg) scale(0.7);
    }

    100% {
        transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.7);
    }
}

@keyframes fish4 {
    0% {
        transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.8);
    }

    50% {
        transform: translateX(900px) rotateX(0deg) rotateZ(0deg) scale(0.8);
    }

    51% {
        transform: translateX(900px) rotateX(180deg) rotateZ(180deg) scale(0.8);
    }

    100% {
        transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.8);
    }
}

@keyframes fish5 {
    0% {
        transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.7);
    }

    50% {
        transform: translateX(-850px) rotateX(0deg) rotateZ(0deg) scale(0.7);
    }

    51% {
        transform: translateX(-850px) rotateX(180deg) rotateZ(180deg) scale(0.7);
    }

    100% {
        transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.7);
    }
}

@keyframes fish6 {
    0% {
        transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.6);
        opacity: 1;
    }

    50% {
        transform: translateX(-900px) rotateX(0deg) rotateZ(0deg) scale(0.6);
        /*   opacity: 0;*/
    }

    51% {
        transform: translateX(-900px) rotateX(180deg) rotateZ(180deg) scale(0.6);
    }

    100% {
        transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.6);
        /*   opacity: 0;*/
    }
}

@keyframes fish7 {
    0% {
        transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.7);
    }

    50% {
        transform: translateX(900px) rotateX(0deg) rotateZ(0deg) scale(0.7);
    }

    51% {
        transform: translateX(900px) rotateX(180deg) rotateZ(180deg) scale(0.7);
    }

    100% {
        transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.7);
    }
}

@keyframes fish8 {
    0% {
        transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.7);
    }

    50% {
        transform: translateX(900px) rotateX(0deg) rotateZ(0deg) scale(0.7);
    }

    51% {
        transform: translateX(900px) rotateX(180deg) rotateZ(180deg) scale(0.7);
    }

    100% {
        transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.7);
    }
}

@keyframes fish9 {
    0% {
        transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.7);
    }

    50% {
        transform: translateX(-900px) rotateX(0deg) rotateZ(0deg) scale(0.7);
    }

    51% {
        transform: translateX(-900px) rotateX(180deg) rotateZ(180deg) scale(0.7);
    }

    100% {
        transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.7);
    }
}

.boubleBox {
    width: 50%;
    position: absolute;
    bottom: 0;
    left: 30%;
    display: flex;
    z-index: 1;
    padding: 0 20px;
    /*border: 10px solid red;*/
}

    .boubleBox span {
        position: relative;
        bottom: 50px;
        display: block;
        margin: 0 auto;
        /*min-width: 4px;*/
        width: 90px;
        height: 90px;
        /*background: #000;*/
        background: url(../Fishes/Fish_Boble.png) center center no-repeat;
        border-radius: 50%;
        animation: boubleBrus 15s linear infinite;
        opacity: 0;
        /*filter: blur(8px);*/
        animation-delay: calc(var(--i) * 3s);
    }

@keyframes boubleBrus {
    0% {
        transform: translateY(0) scale(1);
    }

    25% {
        transform: translateY(-250px) translateX(100px) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translateY(-350px) translateX(200px) scale(1);
        opacity: 0;
    }

    75% {
        transform: translateY(-100px) translateX(100px) scale(1);
        opacity: 0.5;
    }

    100% {
        transform: translateY(-700px) translateX(-100px) scale(1);
        opacity: 0;
    }
}







@media (min-width:0) and (max-width: 991px) {

    #aquarium {
        position: relative;
        width: 100%;
        height: 400px;
        border: 0px solid #ccc;
    }

    .aquariumBG {
        z-index: 3;
        border: 0px solid #ccc;
    }

    .aquariumFG {
        display: none !important;
    }

    img#f1, img#f2, img#f3, img#f4, img#f5, img#f6, img#f7, img#f8, img#f9, img#b1, img#b2 {
        width: 10% !important;
        height: 7% !important;
        height: auto !important;
    }
    /*    img#f1, img#f2, img#f3, img#f4, img#f5, img#f6, img#f7, img#f8, img#f9 {
        
}*/
    img#fN3 {
        top: 8%;
    }

    @keyframes fish1 {
        0% {
            transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.9);
        }

        50% {
            transform: translateX(var(--lengthRigh)) rotateX(0deg) rotateZ(0deg) scale(0.9);
        }

        51% {
            transform: translateX(var(--lengthRigh)) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }

        100% {
            transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }
    }

    @keyframes fish2 {
        0% {
            transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.9);
        }

        50% {
            transform: translateX(var(--lengthLeft)) rotateX(0deg) rotateZ(0deg) scale(0.9);
        }

        51% {
            transform: translateX(var(--lengthLeft)) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }

        100% {
            transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }
    }

    @keyframes fish3 {
        0% {
            transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.9);
            opacity: 1;
        }

        50% {
            transform: translateX(var(--lengthLeft)) rotateX(0deg) rotateZ(0deg) scale(0.9);
        }

        51% {
            transform: translateX(var(--lengthLeft)) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }

        100% {
            transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }
    }

    @keyframes fish4 {
        0% {
            transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.9);
            opacity: 1;
        }

        50% {
            transform: translateX(var(--lengthRigh)) rotateX(0deg) rotateZ(0deg) scale(0.9);
        }

        51% {
            transform: translateX(var(--lengthRigh)) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }

        100% {
            transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }
    }

    @keyframes fish5 {
        0% {
            transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.9);
            opacity: 1;
        }

        50% {
            transform: translateX(var(--lengthLeft)) rotateX(0deg) rotateZ(0deg) scale(0.9);
        }

        51% {
            transform: translateX(var(--lengthLeft)) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }

        100% {
            transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }
    }

    @keyframes fish6 {
        0% {
            transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.9);
            opacity: 1;
        }

        50% {
            transform: translateX(var(--lengthLeft)) rotateX(0deg) rotateZ(0deg) scale(0.9);
        }

        51% {
            transform: translateX(var(--lengthLeft)) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }

        100% {
            transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }
    }

    @keyframes fish7 {
        0% {
            transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.9);
            opacity: 1;
        }

        50% {
            transform: translateX(var(--lengthRigh)) rotateX(0deg) rotateZ(0deg) scale(0.9);
        }

        51% {
            transform: translateX(var(--lengthRigh)) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }

        100% {
            transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }
    }

    @keyframes fish8 {
        0% {
            transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.9);
            opacity: 1;
        }

        50% {
            transform: translateX(var(--lengthRigh)) rotateX(0deg) rotateZ(0deg) scale(0.9);
        }

        51% {
            transform: translateX(var(--lengthRigh)) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }

        100% {
            transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }
    }

    @keyframes fish9 {
        0% {
            transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.9);
            opacity: 1;
        }

        50% {
            transform: translateX(var(--lengthLeft)) rotateX(0deg) rotateZ(0deg) scale(0.9);
        }

        51% {
            transform: translateX(var(--lengthLeft)) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }

        100% {
            transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.9);
        }
    }

    @keyframes ufoN1 {
        0% {
            transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.8);
        }

        50% {
            transform: translateX(var(--lengthLeft)) rotateX(0deg) rotateZ(0deg) scale(0.8);
        }

        51% {
            transform: translateX(var(--lengthLeft)) rotateX(180deg) rotateZ(180deg) scale(0.8);
        }

        100% {
            transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.8);
        }
    }

    @keyframes ufoN2 {
        0% {
            transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.8);
            opacity: 1;
        }

        50% {
            transform: translateX(var(--lengthRigh)) rotateX(0deg) rotateZ(0deg) scale(0.8);
        }

        51% {
            transform: translateX(var(--lengthRigh)) rotateX(180deg) rotateZ(180deg) scale(0.8);
        }

        100% {
            transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.8);
        }
    }

    @keyframes ufoB3 {
        0% {
            transform: translateX(0) rotateX(0deg) rotateZ(0deg) scale(0.5);
            opacity: 1;
        }

        50% {
            transform: translateX(var(--lengthRigh)) rotateX(0deg) rotateZ(0deg) scale(0.5);
        }

        51% {
            transform: translateX(var(--lengthRigh)) rotateX(180deg) rotateZ(180deg) scale(0.5);
        }

        100% {
            transform: translateX(0) rotateX(180deg) rotateZ(180deg) scale(0.5);
        }
    }

    @keyframes bubble1 {
        0%, 100% {
            transform: translateX(0) translateY(0) rotateZ(0deg) scale(0.5);
            opacity: 0;
        }

        10% {
            opacity: 0.8;
        }

        50% {
            transform: translateY(-100px) rotateZ(180deg) scale(0.9);
        }

        99% {
            transform: translateX(300px) translateY(100px) rotateZ(360deg) scale(0.5);
            opacity: 0;
        }
    }

    @keyframes bubble2 {
        0%, 100% {
            transform: translateX(0) translateY(0) rotateZ(0deg) scale(0.5);
            opacity: 0;
        }

        10% {
            opacity: 0.8;
        }

        50% {
            transform: translateY(100px) rotateZ(180deg) scale(0.9);
        }

        99% {
            transform: translateX(-300px) translateY(100px) rotateZ(360deg) scale(0.5);
            opacity: 0;
        }
    }

    .boubleBox {
        display: none;
    }
}