/*

    The grid system allows four types of media: 
    - tm -> tiny (-=480px)
    - sm -> small (-=720px)
    - mm -> medium (-=992px)
    - lm -> large (+993px)

 */

/*****************************************************************************************************************************/

/* - Animations */

/*****************************************************************************************************************************/

.anim-before-from-top:before,
.anim-after-from-top:after,
.anim-tm-from-top,
.anim-sm-from-top,
.anim-mm-from-top,
.anim-lm-from-top,
.anim-from-top,

.anim-before-from-bottom:before,
.anim-after-from-bottom:after,
.anim-tm-from-bottom,
.anim-sm-from-bottom,
.anim-mm-from-bottom,
.anim-lm-from-bottom,
.anim-from-bottom,

.anim-from-right,
.anim-tm-from-right,
.anim-sm-from-right,
.anim-mm-from-right,
.anim-lm-from-right,

.anim-from-left,
.anim-tm-from-left,
.anim-sm-from-left,
.anim-mm-from-left,
.anim-lm-from-left {
    opacity: 0;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -ms-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -ms-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
}

.anim-before-from-top:before,
.anim-after-from-top:after,
.anim-from-top,
.anim-tm-from-top {
    -webkit-transform: translateY(-200px);
    -moz-transform: translateY(-200px);
    -ms-transform: translateY(-200px);
    -o-transform: translateY(-200px);
    transform: translateY(-200px);
}

.anim-before-from-bottom:before,
.anim-after-from-bottom:after,
.anim-from-bottom,
.anim-tm-from-bottom {
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    -ms-transform: translateY(200px);
    -o-transform: translateY(200px);
    transform: translateY(200px);
}

.anim-from-right,
.anim-tm-from-right {
    -webkit-transform: translateX(200px);
    -moz-transform: translateX(200px);
    -ms-transform: translateX(200px);
    -o-transform: translateX(200px);
    transform: translateX(200px);
}

.anim-from-left,
.anim-tm-from-left {
    -webkit-transform: translateX(-200px);
    -moz-transform: translateX(-200px);
    -ms-transform: translateX(-200px);
    -o-transform: translateX(-200px);
    transform: translateX(-200px);
}

.active .anim-before-from-top:before,
.active.anim-before-from-top:before,
.active .anim-after-from-top:after,
.active.anim-after-from-top:after,
.active .anim-from-top,
.active .anim-tm-from-top,
.active .anim-before-from-bottom:before,
.active.anim-before-from-bottom:before,
.active .anim-after-from-bottom:after,
.active.anim-after-from-bottom:after,
.active .anim-from-bottom,
.active .anim-tm-from-bottom,
.active .anim-from-left,
.active .anim-tm-from-left,
.active .anim-from-right,
.active .anim-tm-from-right {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    -ms-transform: translateX(0) translateY(0);
    -o-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
    opacity: 1;
}

.anim-rank-1,
.anim-tm-rank-1 {
    -webkit-transition-delay: .15s;
    -moz-transition-delay: .15s;
    -ms-transition-delay: .15s;
    -o-transition-delay: .15s;
    transition-delay: .15s;
}

.anim-rank-2,
.anim-tm-rank-2 {
    -webkit-transition-delay: .3s;
    -moz-transition-delay: .3s;
    -ms-transition-delay: .3s;
    -o-transition-delay: .3s;
    transition-delay: .3s;
}

.anim-rank-3,
.anim-tm-rank-3 {
    -webkit-transition-delay: .45s;
    -moz-transition-delay: .45s;
    -ms-transition-delay: .45s;
    -o-transition-delay: .45s;
    transition-delay: .45s;
}

.anim-rank-4,
.anim-tm-rank-4 {
    -webkit-transition-delay: .6s;
    -moz-transition-delay: .6s;
    -ms-transition-delay: .6s;
    -o-transition-delay: .6s;
    transition-delay: .6s;
}

.anim-rank-5,
.anim-tm-rank-5 {
    -webkit-transition-delay: .75s;
    -moz-transition-delay: .75s;
    -ms-transition-delay: .75s;
    -o-transition-delay: .75s;
    transition-delay: .75s;
}

.anim-rank-6,
.anim-tm-rank-6 {
    -webkit-transition-delay: .9s;
    -moz-transition-delay: .9s;
    -ms-transition-delay: .9s;
    -o-transition-delay: .9s;
    transition-delay: .9s;
}

@media screen and (min-width: 481px) {

    .anim-sm-from-top {
        -webkit-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
        -o-transform: translateY(-200px);
        transform: translateY(-200px);
    }

    .anim-sm-from-bottom {
        -webkit-transform: translateY(200px);
        -moz-transform: translateY(200px);
        -ms-transform: translateY(200px);
        -o-transform: translateY(200px);
        transform: translateY(200px);
    }

    .anim-sm-from-right {
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -ms-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px);
    }

    .anim-sm-from-left {
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        -o-transform: translateX(-200px);
        transform: translateX(-200px);
    }

    .active .anim-sm-from-top,
    .active .anim-sm-from-bottom,
    .active .anim-sm-from-left,
    .active .anim-sm-from-right {
        -webkit-transform: translateX(0) translateY(0);
        -moz-transform: translateX(0) translateY(0);
        -ms-transform: translateX(0) translateY(0);
        -o-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0);
        opacity: 1;
    }

    .anim-sm-rank-1 {
        -webkit-transition-delay: .15s;
        -moz-transition-delay: .15s;
        -ms-transition-delay: .15s;
        -o-transition-delay: .15s;
        transition-delay: .15s;
    }

    .anim-sm-rank-2 {
        -webkit-transition-delay: .3s;
        -moz-transition-delay: .3s;
        -ms-transition-delay: .3s;
        -o-transition-delay: .3s;
        transition-delay: .3s;
    }

    .anim-sm-rank-3 {
        -webkit-transition-delay: .45s;
        -moz-transition-delay: .45s;
        -ms-transition-delay: .45s;
        -o-transition-delay: .45s;
        transition-delay: .45s;
    }

    .anim-sm-rank-4 {
        -webkit-transition-delay: .6s;
        -moz-transition-delay: .6s;
        -ms-transition-delay: .6s;
        -o-transition-delay: .6s;
        transition-delay: .6s;
    }

    .anim-sm-rank-5 {
        -webkit-transition-delay: .75s;
        -moz-transition-delay: .75s;
        -ms-transition-delay: .75s;
        -o-transition-delay: .75s;
        transition-delay: .75s;
    }

    .anim-sm-rank-6 {
        -webkit-transition-delay: .9s;
        -moz-transition-delay: .9s;
        -ms-transition-delay: .9s;
        -o-transition-delay: .9s;
        transition-delay: .9s;
    } 
}

@media screen and (min-width: 721px) {

    .anim-mm-from-top {
        -webkit-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
        -o-transform: translateY(-200px);
        transform: translateY(-200px);
    }

    .anim-mm-from-bottom {
        -webkit-transform: translateY(200px);
        -moz-transform: translateY(200px);
        -ms-transform: translateY(200px);
        -o-transform: translateY(200px);
        transform: translateY(200px);
    }

    .anim-mm-from-right {
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -ms-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px);
    }

    .anim-mm-from-left {
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        -o-transform: translateX(-200px);
        transform: translateX(-200px);
    }

    .active .anim-mm-from-top,
    .active .anim-mm-from-bottom,
    .active .anim-mm-from-left,
    .active .anim-mm-from-right {
        -webkit-transform: translateX(0) translateY(0);
        -moz-transform: translateX(0) translateY(0);
        -ms-transform: translateX(0) translateY(0);
        -o-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0);
        opacity: 1;
    }

    .anim-mm-rank-1 {
        -webkit-transition-delay: .15s;
        -moz-transition-delay: .15s;
        -ms-transition-delay: .15s;
        -o-transition-delay: .15s;
        transition-delay: .15s;
    }

    .anim-mm-rank-2 {
        -webkit-transition-delay: .3s;
        -moz-transition-delay: .3s;
        -ms-transition-delay: .3s;
        -o-transition-delay: .3s;
        transition-delay: .3s;
    }

    .anim-mm-rank-3 {
        -webkit-transition-delay: .45s;
        -moz-transition-delay: .45s;
        -ms-transition-delay: .45s;
        -o-transition-delay: .45s;
        transition-delay: .45s;
    }

    .anim-mm-rank-4 {
        -webkit-transition-delay: .6s;
        -moz-transition-delay: .6s;
        -ms-transition-delay: .6s;
        -o-transition-delay: .6s;
        transition-delay: .6s;
    }

    .anim-mm-rank-5 {
        -webkit-transition-delay: .75s;
        -moz-transition-delay: .75s;
        -ms-transition-delay: .75s;
        -o-transition-delay: .75s;
        transition-delay: .75s;
    }

    .anim-mm-rank-6 {
        -webkit-transition-delay: .9s;
        -moz-transition-delay: .9s;
        -ms-transition-delay: .9s;
        -o-transition-delay: .9s;
        transition-delay: .9s;
    }
}

@media screen and (min-width: 993px) {

    .anim-lm-from-top {
        -webkit-transform: translateY(-200px);
        -moz-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
        -o-transform: translateY(-200px);
        transform: translateY(-200px);
    }

    .anim-lm-from-bottom {
        -webkit-transform: translateY(200px);
        -moz-transform: translateY(200px);
        -ms-transform: translateY(200px);
        -o-transform: translateY(200px);
        transform: translateY(200px);
    }

    .anim-lm-from-right {
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -ms-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px);
    }

    .anim-lm-from-left {
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        -o-transform: translateX(-200px);
        transform: translateX(-200px);
    }

    .active .anim-lm-from-top,
    .active .anim-lm-from-bottom,
    .active .anim-lm-from-left,
    .active .anim-lm-from-right {
        -webkit-transform: translateX(0) translateY(0);
        -moz-transform: translateX(0) translateY(0);
        -ms-transform: translateX(0) translateY(0);
        -o-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0);
        opacity: 1;
    }

    .anim-lm-rank-1 {
        -webkit-transition-delay: .15s;
        -moz-transition-delay: .15s;
        -ms-transition-delay: .15s;
        -o-transition-delay: .15s;
        transition-delay: .15s;
    }

    .anim-lm-rank-2 {
        -webkit-transition-delay: .3s;
        -moz-transition-delay: .3s;
        -ms-transition-delay: .3s;
        -o-transition-delay: .3s;
        transition-delay: .3s;
    }

    .anim-lm-rank-3 {
        -webkit-transition-delay: .45s;
        -moz-transition-delay: .45s;
        -ms-transition-delay: .45s;
        -o-transition-delay: .45s;
        transition-delay: .45s;
    }

    .anim-lm-rank-4 {
        -webkit-transition-delay: .6s;
        -moz-transition-delay: .6s;
        -ms-transition-delay: .6s;
        -o-transition-delay: .6s;
        transition-delay: .6s;
    }

    .anim-lm-rank-5 {
        -webkit-transition-delay: .75s;
        -moz-transition-delay: .75s;
        -ms-transition-delay: .75s;
        -o-transition-delay: .75s;
        transition-delay: .75s;
    }

    .anim-lm-rank-6 {
        -webkit-transition-delay: .9s;
        -moz-transition-delay: .9s;
        -ms-transition-delay: .9s;
        -o-transition-delay: .9s;
        transition-delay: .9s;
    }
}