.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* ------------------------------------------ */

@-webkit-keyframes coursesAnimatedIn {
    from {
        height: 0;
    }
    to {
        height: 650px;
    }
}

@keyframes coursesAnimatedIn {
    from {
        height: 0;
    }
    to {
        height: 650px;
    }
}

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

/* ------------------------------------------ */

@-webkit-keyframes coursesAnimatedOut {
    from {
        height: 650px;
    }
    to {
        height: 0;
    }
}

@keyframes coursesAnimatedOut {
    from {
        height: 650px;
    }
    to {
        height: 0;
    }
}

.coursesAnimatedOut {
    -webkit-animation-name: coursesAnimatedOut;
    animation-name: coursesAnimatedOut;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
/* ------------------------------------------ */

@-webkit-keyframes coursesAnimatedInContainer {
    from {
        height: 0;
    }
    to {
        height: 750px;
    }
}

@keyframes coursesAnimatedInContainer {
    from {
        height: 0;
    }
    to {
        height: 750px;
    }
}

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

/* ------------------------------------------ */

@-webkit-keyframes coursesAnimatedOutContainer {
    from {
        height: 750px;
    }
    to {
        height: 0;
    }
}

@keyframes coursesAnimatedOutContainer {
    from {
        height: 750px;
    }
    to {
        height: 0;
    }
}

.coursesAnimatedOutContainer {
    -webkit-animation-name: coursesAnimatedOutContainer;
    animation-name: coursesAnimatedOutContainer;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

/* ------------------------------------------ */

@-webkit-keyframes traineeAnimatedIn {
    from {
        opacity: 0;
        display: none;
    }
    to {
        opacity: 1;
        display: inline-block;
    }
}

@keyframes traineeAnimatedIn {
    from {
        opacity: 0;
        display: none;
    }
    to {
        opacity: 1;
        display: inline-block;
    }
}

.traineeAnimatedIn {
    -webkit-animation-name: traineeAnimatedIn;
    animation-name: traineeAnimatedIn;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

/* ------------------------------------------ */

@-webkit-keyframes traineeAnimatedOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-animation-play-state: paused;
    }
}

@keyframes traineeAnimatedOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        animation-play-state: paused;
    }
}

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

/* ------------------------------------------ */

@-webkit-keyframes searchEngineAnimatedIn {
    from {
        margin-left: -320px;
    }
    to {
        margin-left: 0px;
    }
}

@keyframes searchEngineAnimatedIn {
    from {
        margin-left: -320px;
    }
    to {
        margin-left: 0px;
    }
}

.searchEngineAnimatedIn {
    -webkit-animation-name: searchEngineAnimatedIn;
    animation-name: searchEngineAnimatedIn;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
}

/* ------------------------------------------ */

@-webkit-keyframes searchEngineAnimatedOut {
    from {
        margin-left: 0px;
    }
    to {
        margin-left: -320px;
    }
}

@keyframes searchEngineAnimatedOut {
    from {
        margin-left: 0px;
    }
    to {
        margin-left: -320px;
    }
}

.searchEngineAnimatedOut {
    -webkit-animation-name: searchEngineAnimatedOut;
    animation-name: searchEngineAnimatedOut;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
}

/* ------------------------------------------ */

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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