@media screen and (min-width: 1080px) {
    

    /***** Moonlight block ****/
    @keyframes moonlightAppears {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(0);
        }
    }

    .moonlightAppears {
        animation: moonlightAppears 1.5s ease-in-out forwards;
    }

    /***** Shadow block ****/
    @keyframes shadowAppears {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(0);
        }
    }

    .shadowAppears {
        animation: shadowAppears 1.5s ease-in-out forwards;
    }

    /***** JAW logo ****/
    @keyframes JAWlogoZoomOut {
        from {
            opacity: 1;
            transform: scale(1);
        }
        to {
            opacity: 0;
            transform: scale(0.5);
        }
    }

    .JAWlogoZoomOut {
        animation: JAWlogoZoomOut 1.5s ease-in-out forwards;
    }


    /***** Arrows ****/
    @keyframes arrowsAppears {
        from {
            opacity: 0;
            transform: translateY(100px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .arrowsAppears {
        animation: arrowsAppears 1.5s ease-in-out forwards;
    }

    @keyframes arrowsLoop {
        from {
            transform: translateY(-30px);
        }
        to {
            transform: translateY(0);
        }
    }


}