@charset "utf-8";

/* all Devices whithout Touch*/

        [alt="war"] {
            background-image: var(--imageWar);
        }

        [alt="warcollage"] {
            background-image: unset !important;
            background-color: var(--warBlendYellow) !important;
            background-blend-mode: unset !important;
        }

        .bgOverlay:nth-child(4) .scrollPic .imgBG {
            mask-image: var(--imageWarMask);
            mask-size: var(--scrollPicSize);
            mask-repeat: var(--repeateBg);
            mask-position: center top;
            -webkit-mask-image: var(--imageWarMask);
            -webkit-mask-size: var(--scrollPicSize);
            -webkit-mask-repeat: var(--repeateBg);
            -webkit-mask-position: center top;
            background-size: var(--scrollPicSize);
        }

        .bgOverlay:nth-child(4) .scrollPic .imgDust {
            mask-image: var(--imageDustMask2);
            mask-size: var(--scrollPicSize);
            mask-repeat: var(--repeateBg);
            mask-position: center top;
            -webkit-mask-image: var(--imageDustMask2);
            -webkit-mask-size: var(--scrollPicSize);
            -webkit-mask-repeat: var(--repeateBg);
            -webkit-mask-position: center top;
            background-size: var(--scrollPicSize);

            animation-name: aniDust;
            animation-duration: 2.5s;
            animation-iteration-count: infinite;
            -webkit-animation-name: aniDustWK;
            -webkit-animation-duration: 2.5s;
            -webkit-animation-iteration-count: infinite;
        }

        .bgOverlay:nth-child(4) .scrollPic .imgDustFix {
            mask-image: var(--imageDustMask);
            mask-size: var(--scrollPicSize);
            mask-repeat: var(--repeateBg);
            mask-position: center top;
            -webkit-mask-image: var(--imageDustMask);
            -webkit-mask-size: var(--scrollPicSize);
            -webkit-mask-repeat: var(--repeateBg);
            -webkit-mask-position: center top;
            background-size: var(--scrollPicSize);

            animation-name: aniFlame;
            /*animation-duration: 1.5s; */
            animation-duration: 75ms;
            animation-iteration-count: infinite;
            animation-direction: reverse;
            animation-delay: 250ms;
            -webkit-animation-name: aniFlameWK;
            /*-webkit-animation-duration: 1.5s; */
            -webkit-animation-duration: 75ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: reverse;
            -webkit-animation-delay: 250ms;
        }


        .bgOverlay:nth-child(4) .scrollPic .imgFlame {
            background-image: var(--imageWar_o);
            mask-image: var(--imageFlameMask);
            mask-size: var(--scrollPicSize);
            mask-repeat: var(--repeateBg);
            mask-position: center top;
            -webkit-mask-image: var(--imageFlameMask);
            -webkit-mask-size: var(--scrollPicSize);
            -webkit-mask-repeat: var(--repeateBg);
            -webkit-mask-position: center top;

            animation-name: aniFlame;
            /*animation-duration: 1.5s; */
            animation-duration: 75ms;
            animation-iteration-count: infinite;
            animation-direction: reverse;
            animation-delay: 250ms;
            -webkit-animation-name: aniFlameWK;
            /*-webkit-animation-duration: 1.5s; */
            -webkit-animation-duration: 75ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: reverse;
            -webkit-animation-delay: 250ms;
        }

        .bgOverlay:nth-child(4) .scrollPic .imgMiddle {
            mask-image: var(--imageMiddleMask);
            mask-size: var(--scrollPicSize);
            mask-repeat: var(--repeateBg);
            mask-position: center top;
            -webkit-mask-image: var(--imageMiddleMask);
            -webkit-mask-size: var(--scrollPicSize);
            -webkit-mask-repeat: var(--repeateBg);
            -webkit-mask-position: center top;
            background-size: var(--scrollPicSize);
        }

        .bgOverlay:nth-child(4) .scrollPic .imgFG {
            mask-image: var(--scrollPicImage4Foreground);
            mask-size: var(--scrollPicSize);
            mask-repeat: var(--repeateBg);
            mask-position: center top;
            -webkit-mask-image: var(--scrollPicImage4Foreground);
            -webkit-mask-size: var(--scrollPicSize);
            -webkit-mask-repeat: var(--repeateBg);
            -webkit-mask-position: center top;
            background-size: var(--scrollPicSize);
        }

        .bgOverlay:nth-child(4) .scrollPic .imgRubble {
            background-image: var(--scrollPicImage4);
            mask-image: var(--imageRubbleMask);
            mask-size: var(--scrollPicSize);
            mask-repeat: var(--repeateBg);
            mask-position: center top;
            -webkit-mask-image: var(--imageRubbleMask);
            -webkit-mask-size: var(--scrollPicSize);
            -webkit-mask-repeat: var(--repeateBg);
            -webkit-mask-position: center top;
        }

        #explainEnd:hover .imgFlame,
        #explainEnd:target .imgFlame {
            animation-name: aniFlame_hover;
            -webkit-animation-name: aniFlameWK_hover;
        }

        #explainEnd:hover .imgDust,
        #explainEnd:target .imgDust {
            animation-name: aniDust_hover;
            -webkit-animation-name: aniDustWK_hover;
        }

/*
        body #Main:not(:hover, :active, :focus) :is(.naviBG) {
            visibility: hidden !important;
        }
*/