@include keyframes(slide) {
	0%,
	15%,
	100% {
		transform: translate(0%, 0%);
	}
	25%,
	40% {
		transform: translate(0%, 100%);
	}
	50%,
	65% {
		transform: translate(100%, 100%);
	}
	75%,
	90% {
		transform: translate(100%, 0%);
	}
}
@include keyframes(slideIn) {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }
    80% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100%);
    }
}

.slideIn {
    @include animation (slideIn 2s ease infinite);
}

@include keyframes(slideInUp) {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.slideInUp {
    animation-name: slideInUp;
}

@include keyframes(slideInRight) {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        visibility: visible;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

@include keyframes(slideInDown) {
    0% {
        transform: translateY(-100%);
        visibility: visible;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

@include keyframes(slideInLeft) {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        visibility: visible;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

@include keyframes(slideDown) {
    0% {
        transform: translateY(-100%);
    }
    50% {
        transform: translateY(8%);
    }
    100% {
        transform: translateY(0%);
    }
}

.slideDown {
    animation-name: slideDown;
    -webkit-animation-name: slideDown;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    visibility: visible !important;
}

@include keyframes(slideOutUp) {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        visibility: hidden;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
}

@include keyframes(slideOutRight) {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        visibility: hidden;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
}

@include keyframes(slideOutDown) {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        visibility: hidden;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown;
}

@include keyframes(slideOutLeft) {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        visibility: hidden;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
}