.transitions-container {
    position: relative;
}

.agil-fade {
    opacity: 1;
    transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
}

.agil-fade.fast {
    transition: opacity .15s ease-out;
    -webkit-transition: opacity .15s ease-out;
    -moz-transition: opacity .15s ease-out;
    -ms-transition: opacity .15s ease-out;
    -o-transition: opacity .15s ease-out;
}

.agil-fade.out, .agil-slide.out {
    opacity: 0;
}

.agil-slide {
    opacity: 1;
    transform: translate(0%);
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}

.agil-slide.fast {
    transition: all .15s ease-out;
    -webkit-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    -ms-transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
}

.agil-slide.right {
    opacity: 0;
    top: 0;
    transform: translate(50%)
}

.agil-slide.left {
    opacity: 0;
    top: 0;
    transform: translate(-50%)
}

.agil-slide.top {
    opacity: 0;
    top: 0;
    transform: translateY(-15%);
}

.agil-slide.bottom {
    opacity: 0;
    top: 0;
    transform: translateY(15%)
}

.agil-slide.fade {
    opacity: 0;
    top: 0;
}

.absolute {
    position: absolute !important;
}