/* ///////// keyframe */
@-webkit-keyframes MoveUpDown1 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-40px);
    }
}

@keyframes MoveUpDown1 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-40px);
    }
}

@-webkit-keyframes MoveUpDown2 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(40px);
    }
}


@keyframes MoveUpDown2 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(40px);
    }
}


@-webkit-keyframes MoveCorner {
    0% {
        transform: translate(0%, 0%)
    }

    25% {
        transform: translate(-50%, 0%)
    }

    50% {
        transform: translate(-50%, 0%)
    }

    100% {
        transform: translate(-50%, 100%)
    }
}


@keyframes MoveCorner {
    0% {
        transform: translate(0%, 0%)
    }

    25% {
        transform: translate(-50%, 0%)
    }

    50% {
        transform: translate(-50%, 0%)
    }

    100% {
        transform: translate(-50%, 100%)
    }
}

@-webkit-keyframes MoveCorner-reverse {
    0% {

        left: 0px;
        top: 0px;
    }

    25% {

        left: 200px;
        top: 0px;
    }

    50% {

        left: 200px;
        top: 200px;
    }

    75% {

        left: 0px;
        top: 200px;
    }

    100% {

        left: 0px;
        top: 0px;
    }
}


@keyframes MoveCorner-reverse {
    0% {

        left: 0px;
        top: 0px;
    }

    25% {

        left: 200px;
        top: 0px;
    }

    50% {

        left: 200px;
        top: 200px;
    }

    75% {

        left: 0px;
        top: 200px;
    }

    100% {

        left: 0px;
        top: 0px;
    }
}

@keyframes MoveCorner-UpDown {
    0% {
        left: 0px;
        bottom: 0px;
    }

    25% {

        left: 200px;
        bottom: 200px;
    }

    50% {
        left: 0px;
        bottom: 0px;
    }

    75% {
        right: 200px;
        bottom: 200px;
    }

    100% {
        left: 0px;
        bottom: 0px;
    }
}


@-webkit-keyframes MoveCorner-UpDown {
    0% {
        left: 0px;
        bottom: 0px;
    }

    25% {

        left: 200px;
        bottom: 200px;
    }

    50% {
        left: 0px;
        bottom: 0px;
    }

    75% {
        right: 200px;
        bottom: 200px;
    }

    100% {
        left: 0px;
        bottom: 0px;
    }
}

@keyframes MoveCorner-UpDown2 {
    0% {
        left: 0px;
        bottom: 0px;
    }


    100% {
        right: 200px;
        bottom: 200px;
    }
}


@-webkit-keyframes MoveCorner-UpDown2 {
    0% {
        left: 0px;
        bottom: 0px;
    }


    100% {
        right: 200px;
        bottom: 200px;
    }
}


#landingSection {
    .animationRow {
        position: absolute;
        bottom: -7rem;

        .row {
            height: 100%;

            .col-auto:nth-of-type(1) {
                position: relative;
                top: 0;
                left: 8rem;
                -webkit-animation: MoveUpDown2 4s infinite alternate;
                animation: MoveUpDown2 4s infinite alternate;
            }

            .col-auto:nth-of-type(2) {
                position: relative;
                top: 10rem;
                -webkit-animation: MoveUpDown1 4s infinite alternate;
                animation: MoveUpDown1 4s infinite alternate;
            }

            .col-auto:nth-of-type(3) {
                position: relative;
                top: 16rem;
                right: 12rem;
                -webkit-animation: MoveUpDown2 4s infinite alternate;
                animation: MoveUpDown2 4s infinite alternate;
            }

            .col-auto:nth-of-type(4) {
                position: relative;
                right: 2rem;
                top: 10rem;
                -webkit-animation: MoveUpDown1 4s infinite alternate;
                animation: MoveUpDown1 4s infinite alternate;
            }

            .col-auto:nth-of-type(5) {
                position: relative;
                right: 6rem;
                top: 2rem;
                -webkit-animation: MoveUpDown2 4s infinite alternate;
                animation: MoveUpDown2 4s infinite alternate;
            }

            @media screen and (max-width: 991px) {
                .col-auto:nth-of-type(1) {
                    top: -10rem;
                    left: 3rem;
                }

                .col-auto:nth-of-type(3) {
                    top: 14rem;

                }

                .col-auto:nth-of-type(5) {
                    top: 13rem;
                }
            }
        }
    }
}



@-webkit-keyframes shake {

    0%,
    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90%,
    100% {
        left: 50px;
    }

    5%,
    15%,
    25%,
    35%,
    45%,
    55%,
    65%,
    75%,
    85%,
    95% {
        left: -50px;
    }
}

@keyframes shake {

    0%,
    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90%,
    100% {
        left: 50px;
    }

    5%,
    15%,
    25%,
    35%,
    45%,
    55%,
    65%,
    75%,
    85%,
    95% {
        left: -50px;
    }
}

@-webkit-keyframes shake-rotate {

    0%,
    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90%,
    100% {
        left: 50px;
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    5%,
    15%,
    25%,
    35%,
    45%,
    55%,
    65%,
    75%,
    85%,
    95% {
        left: -50px;
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
}

@keyframes shake-rotate {

    0%,
    10%,
    20%,
    30%,
    40%,
    50%,
    60%,
    70%,
    80%,
    90%,
    100% {
        left: 50px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    5%,
    15%,
    25%,
    35%,
    45%,
    55%,
    65%,
    75%,
    85%,
    95% {
        left: -50px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}