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

.right-slide-in-item {
    position: relative;
    opacity: 0%;

    -moz-animation-name: rightSlideIn;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.6s;

    -webkit-animation-name: rightSlideIn;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.6s;

    animation-name: rightSlideIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.6s;
}


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

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

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

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

.left-slide-in-item {
    position: relative;
    opacity: 0%;

    -moz-animation-name: leftSlideIn;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 0.6s;

    -webkit-animation-name: leftSlideIn;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 0.6s;

    animation-name: leftSlideIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.6s;
}


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

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

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

/******************************/
/*      Animation delays      */
/******************************/

.delay1 {
    animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
}

.delay2 {
    animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}

.delay3 {
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
}

/******************************/
/*   Animation when in view   */
/******************************/

.animation-element.bottom-slide-in-item {
  opacity: 0;
  -moz-transform: translateY(+80px);
  -webkit-transform: translateY(+80px);
  transform: translateY(+80px);
  -moz-transition: all 500ms;
  -webkit-transition: all 500ms;  
  transition: all 500ms;
  transition-timing-function: ease-out;
}

.animation-element.bottom-slide-in-item.in-view {
  opacity: 1;
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.animation-element.right-slide-in-item {
  opacity: 0;
  -moz-transform: translateX(+80px);
  -webkit-transform: translateX(+80px);
  transform: translateX(+80px);
  -moz-transition: all 500ms;
  -webkit-transition: all 500ms;  
  transition: all 500ms;
  transition-timing-function: ease-out;
}

.animation-element.right-slide-in-item.in-view {
  opacity: 1;
  -moz-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.animation-element.left-slide-in-item {
  opacity: 0;
  -moz-transform: translateX(-80px);
  -webkit-transform: translateX(-80px);
  transform: translateX(-80px);
  -moz-transition: all 500ms;
  -webkit-transition: all 500ms;  
  transition: all 500ms;
  transition-timing-function: ease-out;
}

.animation-element.left-slide-in-item.in-view {
  opacity: 1;
  -moz-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.animation-element.fade-in-item {
  opacity: 0;
  -moz-transition: all 200ms;
  -webkit-transition: all 200ms;
  transition: all 600ms;
  transition-timing-function: ease-out;
}

.animation-element.fade-in-item.in-view {
  opacity: 1;
}