.animated {
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated-n {
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 0s;
}
.animated-f {
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 0.2s;
}
.animated-s {
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 0.5s;
}
.animated-title {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 0.5s;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

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

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

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

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

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

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(80px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

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

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

/*---swing---*/
@-webkit-keyframes swing
{
    0%
    {
        opacity: 0;
    }
    15%
    {
        opacity: 0.3;
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }
    30%
    {
        opacity: 0.5;
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
    50%
    {
        opacity: 0.7;
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
    65%
    {
        opacity: 0.8;
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    80%
    {
        opacity: 0.9;
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    100%
    {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes swing
{
    0%
    {
        opacity: 0;
    }
    15%
    {
        opacity: 0.3;
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }
    30%
    {
        opacity: 0.5;
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
    50%
    {
        opacity: 0.7;
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
    65%
    {
        opacity: 0.8;
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
    80%
    {
        opacity: 0.9;
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    100%
    {
        opacity: 1 !important;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes swingLeft
{
    0%
    {
        opacity: 0;
    }
    15%
    {
        opacity: 0.3;
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }
    30%
    {
        opacity: 0.5;
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
    }
    50%
    {
        opacity: 0.7;
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
    65%
    {
        opacity: 0.8;
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    80%
    {
        opacity: 0.9;
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    100%
    {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swingLeft
{
    0%
    {
        opacity: 0;
    }
    15%
    {
        opacity: 0.3;
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }
    30%
    {
        opacity: 0.5;
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
    }
    50%
    {
        opacity: 0.7;
        -webkit-transform: translateX(6px);
        transform: translateX(6px);
    }
    65%
    {
        opacity: 0.8;
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }
    80%
    {
        opacity: 0.9;
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    100%
    {
        opacity: 1 !important;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
.swingLeft
{
    -webkit-animation: swingLeft 1s ease;
    animation: swingLeft 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 0.8s;
}
.swing
{
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 0.8s;
}
.swing-d
{
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    animation-delay: 1s;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
/*---end---*/
.delay-1{animation-delay: 0.40s;}
.delay-2{animation-delay: 0.50s;}
.delay-3{animation-delay: 0.60s;}
.delay-4{animation-delay: 0.70s;}
.delay-5{animation-delay: 0.80s;}
.delay-6{animation-delay: 0.90s;}
.delay-7{animation-delay: 1s;}
.delay-8{animation-delay: 1.1s;}
.delay-9{animation-delay: 1.2s;}
.delay-10{animation-delay: 1.3s;}
.delay-11{animation-delay: 1.4s;}
.delay-12{animation-delay: 1.5s;}
.delay-13{animation-delay: 1.6s;}
.delay-14{animation-delay: 1.7s;}
.delay-15{animation-delay: 1.8s;}
.delay-16{animation-delay: 1.9s;}
.delay-17{animation-delay: 2s;}
.delay-18{animation-delay: 2.1s;}