/*

    + Class animation name :
        +> ant-floatin
        +> ant-flyin
        +> ant-fadein
        +> ant-spinin
        +> ant-expandin

    ++ Class property :
        +> proty-dir-hafttop
        +> proty-dir-haftright
        +> proty-dir-haftleft
        +> proty-dir-haftbottom

        ( floatin )
        +> proty-dir-top
        +> proty-dir-right
        +> proty-dir-bottom
        +> proty-dir-left

        ( flyin )
        +> proty-dir-distant-top
        +> proty-dir-distant-right
        +> proty-dir-distant-bottom
        +> proty-dir-distant-left

        ( turnin )
        +> proty-dir-turn-left
        +> proty-dir-turn-right

        +> proty-reverse
/

/*  Properties: */
.proty-dir-haftleft {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.proty-dir-halfright {
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    -o-transform: translateX(50%);
    transform: translateX(50%);
}
.proty-dir-halftop {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.proty-dir-halfbottom {
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}
.proty-dir-left {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
}
.proty-dir-right {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}
.proty-dir-top {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}
.proty-dir-bottom {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
}
.proty-dir-distant-left {
    -webkit-transform: translateX(-400%);
    -moz-transform: translateX(-400%);
    -ms-transform: translateX(-400%);
    -o-transform: translateX(-400%);
    transform: translateX(-400%);
}
.proty-dir-distant-right {
    -webkit-transform: translateX(400%);
    -moz-transform: translateX(400%);
    -ms-transform: translateX(400%);
    -o-transform: translateX(400%);
    transform: translateX(400%);
}
.proty-dir-distant-top {
    -webkit-transform: translateY(-400%);
    -moz-transform: translateY(-400%);
    -ms-transform: translateY(-400%);
    -o-transform: translateY(-400%);
    transform: translateY(-400%);
}
.proty-dir-distant-bottom {
    -webkit-transform: translateY(400%);
    -moz-transform: translateY(400%);
    -ms-transform: translateY(400%);
    -o-transform: translateY(400%);
    transform: translateY(400%);
}
.proty-dir-turn-left {
    -webkit-transform: translate(-200%,-100%) rotateZ(-90deg);
    -moz-transform: translate(-200%,-100%) rotateZ(-90deg);
    -ms-transform: translate(-200%,-100%) rotateZ(-90deg);
    -o-transform: translate(-200%,-100%) rotateZ(-90deg);
    transform: translate(-200%,-100%) rotateZ(-90deg);
    -webkit-transform-origin: -100% 0;
    -ms-transform-origin: -100% 0;
    transform-origin: -100% 0;
}
.proty-dir-turn-right {
    -webkit-transform: translate(200%,-100%) rotateZ(90deg);
    -moz-transform: translate(200%,-100%) rotateZ(90deg);
    -ms-transform: translate(200%,-100%) rotateZ(90deg);
    -o-transform: translate(200%,-100%) rotateZ(90deg);
    transform: translate(200%,-100%) rotateZ(90deg);
    -webkit-transform-origin: 200% 0;
    -ms-transform-origin: 200% 0;
    transform-origin: 200% 0;
}
.proty-reverse {
    webkit-animation-direction: reverse;
    animation-direction: reverse;
}

/*=========== Fade in ============*/
.ant-fadein-hover {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}
.ant-fadein-hover:hover {
    opacity: 1;
}
.ant-fadein {
    opacity: 0;
    animation: fadein 2.5s;
    -webkit-animation: fadein 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadein {
    0%  {}
    100% {
        opacity: 1;
    }
}
@keyframes fadein {
    0%  {}
    100% {
        opacity: 1;
    }
}

/*=========== Float in ============*/

.ant-floatin {
    opacity: 0;
    -webkit-animation-fill-mode: both;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-name: floatin;
    animation-fill-mode: both;
    animation-duration: 1.5s;
    animation-name: floatin;
}
@-webkit-keyframes floatin {
    0% {}
    100% {
        opacity: 1;
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        transform: translate(0,0);
    }
}
@keyframes floatin {
    0% {}
    100% {
        opacity: 1;
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        transform: translate(0,0);
    }
}

/*=========== Fly in ============*/

.ant-flyin {
    opacity: 0;
    -webkit-animation-fill-mode: both;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-name: flyin;
    animation-fill-mode: both;
    animation-duration: 0.7s;
    animation-name: flyin;
}
@-webkit-keyframes flyin {
    0% {}
    100% {
        opacity: 1;
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        transform: translate(0,0);
    }
}
@keyframes flyin {
    0% {}
    100% {
        opacity: 1;
        -webkit-transform: translate(0,0);
        -moz-transform: translate(0,0);
        -ms-transform: translate(0,0);
        -o-transform: translate(0,0);
        transform: translate(0,0);
    }
}

/*=========== Turn in ============*/

.ant-turnin {
    opacity: 0;
    -webkit-animation-fill-mode: both;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-name: turnin;
    animation-fill-mode: both;
    animation-duration: 0.7s;
    animation-name: turnin;
}
@-webkit-keyframes turnin {
    0% {}
    100% {
        opacity: 1;
        -webkit-transform: translate(0,0) rotate(0);
        -moz-transform: translate(0,0) rotate(0);
        -ms-transform: translate(0,0) rotate(0);
        -o-transform: translate(0,0) rotate(0);
        transform: translate(0,0) rotate(0);
    }
}
@keyframes turnin {
    0% {

    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0,0) rotate(0);
        -moz-transform: translate(0,0) rotate(0);
        -ms-transform: translate(0,0) rotate(0);
        -o-transform: translate(0,0) rotate(0);
        transform: translate(0,0) rotate(0);
    }
}

/*=========== spin in ============*/

.ant-spinin {
    opacity: 0;
    -webkit-animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-name: spinin;
    -moz-animation-fill-mode: both;
    -moz-animation-duration: 1s;
    -moz-animation-name: spinin;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-name: spinin;
}
@-webkit-keyframes spinin {
    0% {}
    100% {
        opacity: 1;
        -webkit-transform: scale(1,1) rotate(0);
        -moz-transform: scale(1,1) rotate(0);
        -ms-transform: scale(1,1) rotate(0);
        -o-transform: scale(1,1) rotate(0);
        transform: scale(1,1) rotate(0);
    }
}
@-moz-keyframes spinin {
    0% {}
    100% {
        opacity: 1;
        -webkit-transform: scale(1,1) rotate(0);
        -moz-transform: scale(1,1) rotate(0);
        -ms-transform: scale(1,1) rotate(0);
        -o-transform: scale(1,1) rotate(0);
        transform: scale(1,1) rotate(0);
    }
}
@keyframes spinin {
    0% {}
    100% {
        opacity: 1;
        -webkit-transform: scale(1,1) rotate(0);
        -moz-transform: scale(1,1) rotate(0);
        -ms-transform: scale(1,1) rotate(0);
        -o-transform: scale(1,1) rotate(0);
        transform: scale(1,1) rotate(0);
    }
}

/*=========== Expand in ============*/

.ant-expandin-hover {
    opacity: 0;
    -webkit-transform: scale(0.4,0.4);
    -moz-transform: scale(0.4,0.4);
    -ms-transform: scale(0.4,0.4);
    -o-transform: scale(0.4,0.4);
    transform: scale(0.4,0.4);

    -webkit-transition: -webkit-transform 0.5s ease;
    -moz-transition: -moz-transform 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease;
    -o-transition: -o-transform 0.5s ease;
    transition: transform 0.5s ease;
}
.ant-expandin-hover:hover {
    opacity: 1;
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}
.ant-expandin {
    opacity: 0;
    -webkit-transform: scale(0.4,0.4);
    -moz-transform: scale(0.4,0.4);
    -ms-transform: scale(0.4,0.4);
    -o-transform: scale(0.4,0.4);
    transform: scale(0.4,0.4);
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: expandin;
    -webkit-animation-duration: 1.2s;
    animation-fill-mode: both;
    animation-name: expandin;
    animation-duration: 1.2s;
}
@-webkit-keyframes expandin {
    0% {}
    100% {
        opacity: 1;
        -webkit-transform: scale(1,1);
        -moz-transform: scale(1,1);
        -ms-transform: scale(1,1);
        -o-transform: scale(1,1);
        transform: scale(1,1);
    }
}
@keyframes expandin {
    0% {}
    100% {
        opacity: 1;
        -webkit-transform: scale(1,1);
        -moz-transform: scale(1,1);
        -ms-transform: scale(1,1);
        -o-transform: scale(1,1);
        transform: scale(1,1);
    }
}

/*=========== Reveal ============*/

.ant-reveal-hover {
    width: 0;
    overflow: hidden;
    -webkit-transition: -webkit-transform 0.5s ease;
    -moz-transition: -moz-transform 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease;
    -o-transition: -o-transform 0.5s ease;
    transition: transform 0.5s ease;
}
.ant-reveal-hover:hover {
    width: auto;
    overflow: visible;
}
.ant-reveal {
    -webkit-animation-fill-mode: both;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-name: reveal;
    animation-fill-mode: both;
    animation-duration: 1.2s;
    animation-name: reveal;
}
@-webkit-keyframes reveal {
    0% {
        width: 0;
        overflow: hidden;
    }
    100% {

        overflow: visible;
    }
}
@keyframes reveal {
    0% {
        width: 0;
    }
    100% {

        overflow: visible;
    }
}