:root{
    --animation-direction: 0.8s;
}

.animat_fadeInLeft{transform: translateX(-50%);opacity: .5;}
.animat_fadeInLeftPage{transform: translateX(-10%);opacity: 0;}
.animat_fadeInLeftNone{transform: translateX(-50%);opacity: 0;}
.animat_fadeInRight{transform: translateX(50%);opacity: .5;}
.animat_fadeInRightNone{transform: translateX(50%);opacity: 0;}
.animat_fadeInBottom{transform: translateY(40%);opacity: .5;}
.animat_fadeInTop{transform: translateY(-40%);opacity: .5;}
.animat_fadeInLeftBottom{transform: translate(-50%);opacity: 0;}
.animat_fadeInRightBottom{transform: translate(50%);opacity: 0;}
.animat_fadeIn{ opacity: 0;}

.animat_fadeInBottom.animat_translateY-50{transform: translateY(50%);}
.animat_fadeInBottom.animat_translateY-80{transform: translateY(80%);}
.animat_fadeInBottom.animat_translateY-110{transform: translateY(110%);}
.animat_fadeInBottom.animat_translateY-140{transform: translateY(140%);}

.start.animat_fadeInLeft{animation: fadeInLeft var(--animation-direction) ease-in-out forwards;}
.start.animat_fadeInLeftPage{animation: fadeInLeftPage var(--animation-direction) ease-in-out forwards;}
.start.animat_fadeInLeftNone{animation: fadeInLeftNone var(--animation-direction) ease-in-out forwards;}
.start.animat_fadeInRight{animation: fadeInRight var(--animation-direction) ease-in-out forwards;}
.start.animat_fadeInRightNone{animation: fadeInRightNone var(--animation-direction) ease-in-out forwards;}
.start.animat_fadeInTop{animation: fadeInTop var(--animation-direction) ease-in-out forwards;}
.start.animat_fadeInBottom{animation: fadeInBottom var(--animation-direction) ease-in-out forwards;}
.start.animat_fadeInLeftBottom{animation: fadeInLeftBottom var(--animation-direction) ease-in-out forwards;}
.start.animat_fadeInRightBottom{animation: fadeInRightBottom var(--animation-direction) ease-in-out forwards;}
.start.animat_fadeIn{animation: fadeShow var(--animation-direction) ease-in-out forwards;}

/* translateY start */
.start.animat_translateY-50{animation-name:fadeInBottom50;}
.start.animat_translateY-80{animation-name:fadeInBottom80;}
.start.animat_translateY-110{animation-name:fadeInBottom110;}
.start.animat_translateY-140{animation-name:fadeInBottom140;}

/* duration start */
.start.animat_duration-100ms{animation-duration: 0.1s;}
.start.animat_duration-200ms{animation-duration: 0.2s;}
.start.animat_duration-300ms{animation-duration: 0.3s;}
.start.animat_duration-400ms{animation-duration: 0.4s;}
.start.animat_duration-500ms{animation-duration: 0.5s;}
.start.animat_duration-600ms{animation-duration: 0.6s;}
.start.animat_duration-700ms{animation-duration: 0.7s;}
.start.animat_duration-800ms{animation-duration: 0.8s;}
.start.animat_duration-900ms{animation-duration: 0.9s;}
.start.animat_duration-1000ms{animation-duration: 1s;}
.start.animat_duration-1100ms{animation-duration: 1.1s;}
.start.animat_duration-1200ms{animation-duration: 1.2s;}
.start.animat_duration-1300ms{animation-duration: 1.3s;}
.start.animat_duration-1400ms{animation-duration: 1.4s;}
.start.animat_duration-1500ms{animation-duration: 1.5s;}
.start.animat_duration-1600ms{animation-duration: 1.6s;}
.start.animat_duration-1700ms{animation-duration: 1.7s;}
.start.animat_duration-1800ms{animation-duration: 1.8s;}
.start.animat_duration-1800ms{animation-duration: 1.9s;}
.start.animat_duration-2000ms{animation-duration: 2s;}
.start.animat_duration-2100ms{animation-duration: 2.1s;}
.start.animat_duration-2200ms{animation-duration: 2.2s;}
.start.animat_duration-2300ms{animation-duration: 2.3s;}
.start.animat_duration-2400ms{animation-duration: 2.4s;}
.start.animat_duration-2500ms{animation-duration: 2.5s;}
.start.animat_duration-2600ms{animation-duration: 2.6s;}
.start.animat_duration-2700ms{animation-duration: 2.7s;}
.start.animat_duration-2800ms{animation-duration: 2.8s;}
.start.animat_duration-2900ms{animation-duration: 2.9s;}
.start.animat_duration-3000ms{animation-duration: 3s;}
.start.animat_duration-1s{animation-duration: 1s;}
.start.start.animat_duration-2s{animation-duration: 2s;}
.start.animat_duration-3s{animation-duration: 3s;}
/* duration end */

/* dalay start */
.start.animation-delay-100ms{animation-delay: 0.1s;}
.start.animation-delay-200ms{animation-delay: 0.2s;}
.start.animation-delay-300ms{animation-delay: 0.3s;}
.start.animation-delay-400ms{animation-delay: 0.4s;}
.start.animation-delay-500ms{animation-delay: 0.5s;}
.start.animation-delay-600ms{animation-delay: 0.6s;}
.start.animation-delay-700ms{animation-delay: 0.7s;}
.start.animation-delay-800ms{animation-delay: 0.8s;}
.start.animation-delay-900ms{animation-delay: 0.9s;}
.start.animation-delay-1000ms{animation-delay: 1s;}
.start.animation-delay-1100ms{animation-delay: 1.1s;}
.start.animation-delay-1200ms{animation-delay: 1.2s;}
.start.animation-delay-1300ms{animation-delay: 1.3s;}
.start.animation-delay-1400ms{animation-delay: 1.4s;}
.start.animation-delay-1500ms{animation-delay: 1.5s;}
.start.animation-delay-1600ms{animation-delay: 1.6s;}
.start.animation-delay-1700ms{animation-delay: 1.7s;}
.start.animation-delay-1800ms{animation-delay: 1.8s;}
.start.animation-delay-1800ms{animation-delay: 1.9s;}
.start.animation-delay-2000ms{animation-delay: 2s;}
.start.animation-delay-2100ms{animation-delay: 2.1s;}
.start.animation-delay-2200ms{animation-delay: 2.2s;}
.start.animation-delay-2300ms{animation-delay: 2.3s;}
.start.animation-delay-2400ms{animation-delay: 2.4s;}
.start.animation-delay-2500ms{animation-delay: 2.5s;}
.start.animation-delay-2600ms{animation-delay: 2.6s;}
.start.animation-delay-2700ms{animation-delay: 2.7s;}
.start.animation-delay-2800ms{animation-delay: 2.8s;}
.start.animation-delay-2900ms{animation-delay: 2.9s;}
.start.animation-delay-3000ms{animation-delay: 3s;}
.start.animation-delay-1s{animation-delay: 1s;}
.start.start.animation-delay-2s{animation-delay: 2s;}
.start.animation-delay-3s{animation-delay: 3s;}
/* dalay end */



@-webkit-keyframes fadeInLeft{
    0%{
        transform: translateX(-50%);
        opacity: 0.5;
    }
    100%{
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes fadeInLeft{
    0%{
        transform: translateX(-50%);
        opacity: 0.5;
    }
    100%{
        transform: translateX(0%);
        opacity: 1;
    }
}

@-webkit-keyframes fadeInLeftPage{
    0%{
        transform: translateX(-10%);
        opacity: 0;
    }
    100%{
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes fadeInLeftPage{
    0%{
        transform: translateX(-10%);
        opacity: 0;
    }
    100%{
        transform: translateX(0%);
        opacity: 1;
    }
}


@-webkit-keyframes fadeInLeftNone{
    0%{
        transform: translateX(-50%);
        opacity: 0;
    }
    100%{
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes fadeInLeftNone{
    0%{
        transform: translateX(-50%);
        opacity: 0;
    }
    100%{
        transform: translateX(0%);
        opacity: 1;
    }
}

@-webkit-keyframes fadeInRight {
    0%{
        transform: translateX(50%);
        opacity: 0.5;
    }
    100%{
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes fadeInRight{
    0%{
        transform: translateX(50%);
        opacity: 0.5;
    }
    100%{
        transform: translateX(0%);
        opacity: 1;
    }
}
@-webkit-keyframes fadeInRightNone{
    0%{
        transform: translateX(50%);
        opacity: 0;
    }
    100%{
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes fadeInRightNone{
    0%{
        transform: translateX(50%);
        opacity: 0;
    }
    100%{
        transform: translateX(0%);
        opacity: 1;
    }
}

@-webkit-keyframes fadeInTop{
    0%{
        transform: translateY(-40%);
        opacity: 0.5;
    }
    100%{
        transform: translateY(0%);
        opacity: 1;
    }
}
@keyframes fadeInTop{
    0%{
        transform: translateY(-40%);
        opacity: 0.5;
    }
    100%{
        transform: translateY(0%);
        opacity: 1;
    }
}

/* fadeInBottom start */

@-webkit-keyframes fadeInBottom{
    0% {
        opacity: 0.5; -webkit-transform: translate3d(0, 30% , 0);
        transform: translate3d(0, 30% , 0)
    }
    to {
        opacity: 1; -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@keyframes fadeInBottom{
    0% {
        opacity: 0.5; -webkit-transform:translate3d(0px, 30% ,0px);
        transform:translate3d(0, 30% ,0)
    }
    to {
        opacity: 1;-webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@-webkit-keyframes fadeInBottom50{
    0% {
        opacity: 0.5; -webkit-transform: translate3d(0, 50% , 0);
        transform: translate3d(0, 50% , 0)
    }
    to {
        opacity: 1; -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@keyframes fadeInBottom50{
    0% {
        opacity: 0.5; -webkit-transform:translate3d(0px, 50% ,0px);
        transform:translate3d(0, 50% ,0)
    }
    to {
        opacity: 1;-webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@-webkit-keyframes fadeInBottom80{
    0% {
        opacity: 0.5; -webkit-transform: translate3d(0, 80% , 0);
        transform: translate3d(0, 80% , 0)
    }
    to {
        opacity: 1; -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@keyframes fadeInBottom80{
    0% {
        opacity: 0.5; -webkit-transform:translate3d(0px, 80% ,0px);
        transform:translate3d(0, 80% ,0)
    }
    to {
        opacity: 1;-webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@-webkit-keyframes fadeInBottom110{
    0% {
        opacity: 0.5; -webkit-transform: translate3d(0, 110% , 0);
        transform: translate3d(0, 110% , 0)
    }
    to {
        opacity: 1; -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@keyframes fadeInBottom110{
    0% {
        opacity: 0.5; -webkit-transform:translate3d(0px, 110% ,0px);
        transform:translate3d(0, 110% ,0)
    }
    to {
        opacity: 1;-webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@-webkit-keyframes fadeInBottom140{
    0% {
        opacity: 0.5; -webkit-transform: translate3d(0, 140% , 0);
        transform: translate3d(0, 140% , 0)
    }
    to {
        opacity: 1; -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@keyframes fadeInBottom140{
    0% {
        opacity: 0.5; -webkit-transform:translate3d(0px, 140% ,0px);
        transform:translate3d(0, 140% ,0)
    }
    to {
        opacity: 1;-webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@-webkit-keyframes fadeInLeftBottom{
    0% {
        opacity: 0; -webkit-transform:translate3d(-50% , 140% ,0px);
        transform:translate3d(-50% , 140% ,0)
    }
    to {
        opacity: 1;-webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@keyframes fadeInLeftBottom{
    0% {
        opacity: 0; -webkit-transform:translate3d(-50% , 140% ,0px);
        transform:translate3d(-50% , 140% ,0)
    }
    to {
        opacity: 1;-webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@-webkit-keyframes fadeInRightBottom{
    0% {
        opacity: 0; -webkit-transform:translate3d(50% , 140% ,0px);
        transform:translate3d(50% , 140% ,0)
    }
    to {
        opacity: 1;-webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@keyframes fadeInRightBottom{
    0% {
        opacity: 0; -webkit-transform:translate3d(50% , 140% ,0px);
        transform:translate3d(50% , 140% ,0)
    }
    to {
        opacity: 1;-webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}
@-webkit-keyframes fadeShow {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeShow {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* fadeInBottom end */