/* Initiate scroll detection */
.animate {
    transition: all 3s ease;
}

div.animate {
    transition: all 1.5s ease;
}

/* Slides the element up */
.easeup {
    position: relative;
    top: 100px;
}

.easeup.active {
    top: 0px;
}

/* Fades the element in */
.fadein {
    opacity: 0;
}

.fadein.active {
    opacity: 1;
}

/* Slides the element in from the right */
.infromright {
    width: 100%;
}

.infromright.active {
    animation: in-from-right 2s;
}

@keyframes in-from-right {
    from {
        margin-left: 100%;
    }

    to {
        margin-left: 0%;
    }
}

/* Slides the element in from the left */
.infromleft {
    width: 100%;
}

.infromleft.active {
    animation: in-from-left 2s;
}

@keyframes in-from-left {
    from {
        margin-left: -100%;
    }

    to {
        margin-left: 0%;
    }
}