/* Option Overview */

    /*is anmimated*/
    .ProjectImageRight[data-animation] {}
    /*animation type*/
    .ProjectImageRight[data-animation="SlideInRight"] {}
    .ProjectImageRight[data-animation="SlideInBottom"] {}
    .ProjectImageRight[data-animation="FadeIn"] {}
    /*current enter*/
    .ProjectImageRight[data-animation="SlideInRight"].enter {}
    /*already entered*/
    .ProjectImageRight[data-animation="SlideInRight"].entered {}
    /*already ended*/
    .ProjectImageRight[data-animation="SlideInRight"].ended {}
    /*current leave*/
    .ProjectImageRight[data-animation="SlideInRight"].leave {}
    /*current enter forward*/
    .ProjectImageRight[data-animation="SlideInRight"][data-direction="FORWARD"].enter {}
    /*current enter reverse*/
    .ProjectImageRight[data-animation="SlideInRight"][data-direction="REVERSE"].enter {}
    /*current leave forward*/
    .ProjectImageRight[data-animation="SlideInRight"][data-direction="FORWARD"].leave {}
    /*current leave reverse*/
    .ProjectImageRight[data-animation="SlideInRight"][data-direction="REVERSE"].leave {}
    /*Progress >= 0% && < 10% */
    .ProjectImageRight[data-animation="SlideInRight"][data-progress^="0"] {}
    /*Progress current >= 0% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-0 {}
    /*Progress already >= 0% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-already-0 {}

    /*Progress >= 10% && < 20% */
    .ProjectImageRight[data-animation="SlideInRight"][data-progress^="1"] {}
    /*Progress current >= 10% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-1 {}
    /*Progress already >= 10% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-already-1 {}

    /*Progress >= 20% && < 30% */
    .ProjectImageRight[data-animation="SlideInRight"][data-progress^="2"] {}
    /*Progress current >= 20% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-2 {}
    /*Progress already >= 20% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-already-2 {}

    /*Progress >= 30% && < 40% */
    .ProjectImageRight[data-animation="SlideInRight"][data-progress^="3"] {}
    /*Progress current >= 30% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-3 {}
    /*Progress already >= 30% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-already-3 {}

    /*Progress >= 40% && < 50% */
    .ProjectImageRight[data-animation="SlideInRight"][data-progress^="4"] {}
    /*Progress current >= 40% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-4 {}
    /*Progress already >= 40% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-already-4 {}

    /*Progress >= 50% && < 60% */
    .ProjectImageRight[data-animation="SlideInRight"][data-progress^="5"] {}
    /*Progress current >= 50% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-5 {}
    /*Progress already >= 50% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-already-5 {}

    /*Progress >= 60% && < 70% */
    .ProjectImageRight[data-animation="SlideInRight"][data-progress^="6"] {}
    /*Progress current >= 60% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-6 {}
    /*Progress already >= 60% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-already-6 {}

    /*Progress >= 70% && < 80% */
    .ProjectImageRight[data-animation="SlideInRight"][data-progress^="7"] {}
    /*Progress current >= 70% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-7 {}
    /*Progress already >= 70% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-already-7 {}

    /*Progress >= 80% && < 90% */
    .ProjectImageRight[data-animation="SlideInRight"][data-progress^="8"] {}
    /*Progress current >= 80% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-8 {}
    /*Progress already >= 80% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-already-8 {}

    /*Progress >= 90% */
    .ProjectImageRight[data-animation="SlideInRight"][data-progress^="9"] {}
    /*Progress current >= 90% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-9 {}
    /*Progress already >= 90% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-already-9 {}

    /*Progress current >= 100% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-10 {}
    /*Progress already >= 100% */
    .ProjectImageRight[data-animation="SlideInRight"].progress-already-10 {}





/* ImageRight Block */

    /*Basic settings*/
    .ProjectImageRight[data-animation] {
        overflow: visible;
    }
    .ProjectImageRight[data-animation] .wrapper > .image-wrapper {
        position: relative;
    }

    /*SlideInRight settings*/

        /*Initial SlideInRight*/
        .ProjectImageRight[data-animation="SlideInRight"] .wrapper > .image-wrapper > img {
            position: relative;
            right: -100%;
            opacity: 0;
            -webkit-transition: right 800ms ease 0ms, opacity 1000ms ease 200ms;
            -moz-transition: right 800ms ease 0ms, opacity 1000ms ease 200ms;
            -ms-transition: right 800ms ease 0ms, opacity 1000ms ease 200ms;
            -o-transition: right 800ms ease 0ms, opacity 1000ms ease 200ms;
            transition: right 800ms ease 0ms, opacity 1000ms ease 200ms;
        }

        /*On entered SlideInRight*/
        .ProjectImageRight[data-animation="SlideInRight"][data-progress^="2"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInRight"][data-progress^="3"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInRight"][data-progress^="4"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInRight"][data-progress^="5"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInRight"][data-progress^="6"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInRight"][data-progress^="7"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInRight"][data-progress^="8"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInRight"][data-progress^="9"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInRight"].progress-2 .wrapper > .image-wrapper > img {
            right: 0;
            opacity: 1;
        }

        /*On leave reverse SlideInRight*/
        .ProjectImageRight[data-animation="SlideInRight"][data-direction="REVERSE"].leave .wrapper > .image-wrapper > img {
            right: -100%;
            opacity: 0;
        }


    /*SlideInBottom settings*/

        /*Initial SlideInBottom*/
        .ProjectImageRight[data-animation="SlideInBottom"] .wrapper > .image-wrapper > img {
            position: relative;
            top: 100vh;
            opacity: 0;
            -webkit-transition: top 800ms ease 0ms, opacity 1000ms ease 200ms;
            -moz-transition: top 800ms ease 0ms, opacity 1000ms ease 200ms;
            -ms-transition: top 800ms ease 0ms, opacity 1000ms ease 200ms;
            -o-transition: top 800ms ease 0ms, opacity 1000ms ease 200ms;
            transition: top 800ms ease 0ms, opacity 1000ms ease 200ms;
        }

        /*On entered SlideInBottom*/
        .ProjectImageRight[data-animation="SlideInBottom"][data-progress^="2"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInBottom"][data-progress^="3"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInBottom"][data-progress^="4"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInBottom"][data-progress^="5"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInBottom"][data-progress^="6"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInBottom"][data-progress^="7"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInBottom"][data-progress^="8"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInBottom"][data-progress^="9"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="SlideInBottom"].progress-2 .wrapper > .image-wrapper > img {
            top: 0;
            opacity: 1;
        }

        /*On leave reverse SlideInBottom*/
        .ProjectImageRight[data-animation="SlideInBottom"][data-direction="REVERSE"].leave .wrapper > .image-wrapper > img {
            top: 100vh;
            opacity: 0;
        }


    /*FadeIn settings*/

        /*Initial FadeIn*/
        .ProjectImageRight[data-animation="FadeIn"] .wrapper > .image-wrapper > img {
            position: relative;
            opacity: 0;
            -webkit-transition: opacity 1000ms ease 200ms;
            -moz-transition: opacity 1000ms ease 200ms;
            -ms-transition: opacity 1000ms ease 200ms;
            -o-transition: opacity 1000ms ease 200ms;
            transition: opacity 1000ms ease 200ms;
        }

        /*On entered FadeIn*/
        .ProjectImageRight[data-animation="FadeIn"][data-progress^="2"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="FadeIn"][data-progress^="3"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="FadeIn"][data-progress^="4"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="FadeIn"][data-progress^="5"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="FadeIn"][data-progress^="6"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="FadeIn"][data-progress^="7"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="FadeIn"][data-progress^="8"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="FadeIn"][data-progress^="9"] .wrapper > .image-wrapper > img,
        .ProjectImageRight[data-animation="FadeIn"].progress-2 .wrapper > .image-wrapper > img {
            opacity: 1;
        }

        /*On leave reverse FadeIn*/
        .ProjectImageRight[data-animation="FadeIn"][data-direction="REVERSE"].leave .wrapper > .image-wrapper > img {
            opacity: 0;
        }



/* ImageLeft Block */

    /*Basic settings*/
    .ProjectImageLeft[data-animation] {
        overflow: visible;
    }
    .ProjectImageLeft[data-animation] .wrapper > .image-wrapper {
        position: relative;
    }

    /*SlideInLeft settings*/

        /*Initial SlideInLeft*/
        .ProjectImageLeft[data-animation="SlideInLeft"] .wrapper > .image-wrapper > img {
            position: relative;
            left: -100%;
            opacity: 0;
            -webkit-transition: left 800ms ease 0ms, opacity 1000ms ease 200ms;
            -moz-transition: left 800ms ease 0ms, opacity 1000ms ease 200ms;
            -ms-transition: left 800ms ease 0ms, opacity 1000ms ease 200ms;
            -o-transition: left 800ms ease 0ms, opacity 1000ms ease 200ms;
            transition: left 800ms ease 0ms, opacity 1000ms ease 200ms;
        }

        /*On entered SlideInLeft*/
        .ProjectImageLeft[data-animation="SlideInLeft"][data-progress^="2"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInLeft"][data-progress^="3"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInLeft"][data-progress^="4"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInLeft"][data-progress^="5"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInLeft"][data-progress^="6"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInLeft"][data-progress^="7"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInLeft"][data-progress^="8"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInLeft"][data-progress^="9"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInLeft"].progress-2 .wrapper > .image-wrapper > img {
            left: 0;
            opacity: 1;
        }

        /*On leave reverse SlideInLeft*/
        .ProjectImageLeft[data-animation="SlideInLeft"][data-direction="REVERSE"].leave .wrapper > .image-wrapper > img {
            left: -100%;
            opacity: 0;
        }


    /*SlideInBottom settings*/

        /*Initial SlideInBottom*/
        .ProjectImageLeft[data-animation="SlideInBottom"] .wrapper > .image-wrapper > img {
            position: relative;
            top: 100vh;
            opacity: 0;
            -webkit-transition: top 800ms ease 0ms, opacity 1000ms ease 200ms;
            -moz-transition: top 800ms ease 0ms, opacity 1000ms ease 200ms;
            -ms-transition: top 800ms ease 0ms, opacity 1000ms ease 200ms;
            -o-transition: top 800ms ease 0ms, opacity 1000ms ease 200ms;
            transition: top 800ms ease 0ms, opacity 1000ms ease 200ms;
        }

        /*On entered SlideInBottom*/
        .ProjectImageLeft[data-animation="SlideInBottom"][data-progress^="2"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInBottom"][data-progress^="3"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInBottom"][data-progress^="4"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInBottom"][data-progress^="5"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInBottom"][data-progress^="6"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInBottom"][data-progress^="7"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInBottom"][data-progress^="8"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInBottom"][data-progress^="9"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="SlideInBottom"].progress-2 .wrapper > .image-wrapper > img {
            top: 0;
            opacity: 1;
        }

        /*On leave reverse SlideInBottom*/
        .ProjectImageLeft[data-animation="SlideInBottom"][data-direction="REVERSE"].leave .wrapper > .image-wrapper > img {
            top: 100vh;
            opacity: 0;
        }


    /*FadeIn settings*/

        /*Initial FadeIn*/
        .ProjectImageLeft[data-animation="FadeIn"] .wrapper > .image-wrapper > img {
            position: relative;
            opacity: 0;
            -webkit-transition: opacity 1000ms ease 200ms;
            -moz-transition: opacity 1000ms ease 200ms;
            -ms-transition: opacity 1000ms ease 200ms;
            -o-transition: opacity 1000ms ease 200ms;
            transition: opacity 1000ms ease 200ms;
        }

        /*On entered FadeIn*/
        .ProjectImageLeft[data-animation="FadeIn"][data-progress^="2"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="FadeIn"][data-progress^="3"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="FadeIn"][data-progress^="4"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="FadeIn"][data-progress^="5"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="FadeIn"][data-progress^="6"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="FadeIn"][data-progress^="7"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="FadeIn"][data-progress^="8"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="FadeIn"][data-progress^="9"] .wrapper > .image-wrapper > img,
        .ProjectImageLeft[data-animation="FadeIn"].progress-2 .wrapper > .image-wrapper > img {
            opacity: 1;
        }

        /*On leave reverse FadeIn*/
        .ProjectImageLeft[data-animation="FadeIn"][data-direction="REVERSE"].leave .wrapper > .image-wrapper > img {
            opacity: 0;
        }