.animated-section {
    opacity: 0;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated-section.slow {
    -webkit-animation-duration: 2s;
       -moz-animation-duration: 2s;
         -o-animation-duration: 2s;
            animation-duration: 2s;
}

.animated-section.animated-delay-1 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.animated-section.animated-delay-2 {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.animated-section.animated-delay-3 {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}
.animated-section.animated-delay-4 {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.animated-section.in-view.from-right {
    -webkit-animation-name: fadeFromRight;
    animation-name: fadeFromRight;
}

@-webkit-keyframes fadeFromRight{
    0% {
        opacity:0;
        -webkit-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0);
    }
    100% {
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}

@keyframes fadeFromRight{
    0% {
        opacity:0;
        -webkit-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0);
    }
    100% {
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}

.animated-section.in-view.from-left {
    -webkit-animation-name: fadeFromLeft;
    animation-name: fadeFromLeft;
}

@-webkit-keyframes fadeFromLeft{
    0% {
        opacity:0;
        -webkit-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0);
    }
    100% {
        opacity:1;
        -webkit-transform:none;
        transform:none
    }
}

@keyframes fadeFromLeft{
    0% {
        opacity:0;
        -webkit-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0);
    }
    100% {
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}

.animated-section.in-view.from-top {
    -webkit-animation-name: fadeFromTop;
    animation-name: fadeFromTop;
}

@-webkit-keyframes fadeFromTop{
    0% {
        opacity:0;
        -webkit-transform:translate3d(0,-100%,0);
        transform:translate3d(0,-100%,0);
    }
    100% {
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}

@keyframes fadeFromTop{
    0% {
        opacity:0;
        -webkit-transform:translate3d(0,-100%,0);
        transform:translate3d(0,-100%,0);
    }
    100% {
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}
.animated-section.in-view.from-bottom {
    -webkit-animation-name: fadeFromBottom;
    animation-name: fadeFromBottom;
}

@-webkit-keyframes fadeFromBottom{
    0% {
        opacity:0;
        -webkit-transform:translate3d(0,100%,0);
        transform:translate3d(0,100%,0);
    }
    100% {
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}

@keyframes fadeFromBottom{
    0% {
        opacity:0;
        -webkit-transform:translate3d(0,100%,0);
        transform:translate3d(0,100%,0);
    }
    100% {
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}

.animated-section.in-view.animate-grow {
    -webkit-animation-name: fadeGrow;
    animation-name: fadeGrow;
}

@-webkit-keyframes fadeGrow{
    0% {
        opacity:0;
        -webkit-transform: scale(0.6);
           -moz-transform: scale(0.6);
            -ms-transform: scale(0.6);
             -o-transform: scale(0.6);
                transform: scale(0.6);
    }
    100% {
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}

@keyframes fadeGrow{
    0% {
        opacity:0;
        -webkit-transform: scale(0.6);
           -moz-transform: scale(0.6);
            -ms-transform: scale(0.6);
             -o-transform: scale(0.6);
                transform: scale(0.6);
    }
    100% {
        opacity:1;
        -webkit-transform:none;
        transform:none;
    }
}