/* CSS3 Animations */

/* tab-content animation - fadeIn */

@-webkit-keyframes fadeIn {

    0% { 

      opacity: 0;

    }

    100% {

  

      opacity: 1;

    }

}

@-o-keyframes fadeIn {

    0% { 

      opacity: 0;

    }

    100% {

  

      opacity: 1;

    }

}

@-moz-keyframes fadeIn {

    0% { 

      opacity: 0;

    }

    100% {

  

      opacity: 1;

    }

}

@keyframes fadeIn {

    0% { 

      opacity: 0;

    }

    100% {

  

      opacity: 1;

    }

}


.animation-fadeIn {

  -webkit-animation-duration: 2s;
  -o-animation-duration: 2s;
     -moz-animation-duration: 2s;
       animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       animation-fill-mode: both;

  -webkit-animation-name: fadeIn;
     -o-animation-name: fadeIn;
     -moz-animation-name: fadeIn;
       animation-name: fadeIn;

}

/* tab-content animation - slideUp  */

@-webkit-keyframes slideUp {

    0% { 

      -webkit-transform: translateY(10%); 

              transform: translateY(10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateY(0);

              transform: translateY(0);
      opacity: 1;

    }

}

@-o-keyframes slideUp {

    0% { 

      -webkit-transform: translateY(10%); 

              -o-transform: translateY(10%); 

         transform: translateY(10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateY(0);

              -o-transform: translateY(0);

         transform: translateY(0);
      opacity: 1;

    }

}

@-moz-keyframes slideUp {

    0% { 

      -webkit-transform: translateY(10%); 

              -o-transform: translateY(10%); 

         -moz-transform: translateY(10%); 

           transform: translateY(10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateY(0);

              -o-transform: translateY(0);

         -moz-transform: translateY(0);

           transform: translateY(0);
      opacity: 1;

    }

}

@keyframes slideUp {

    0% { 

      -webkit-transform: translateY(10%); 

              -o-transform: translateY(10%); 

         -moz-transform: translateY(10%); 

           transform: translateY(10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateY(0);

              -o-transform: translateY(0);

         -moz-transform: translateY(0);

           transform: translateY(0);
      opacity: 1;

    }

}

.animation-slideUp {

  -webkit-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
     -moz-animation-duration: 0.5s;
       animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       animation-fill-mode: both;

  -webkit-animation-name: slideUp;
     -o-animation-name: slideUp;
     -moz-animation-name: slideUp;
       animation-name: slideUp;

}

/* tab-content animation - slideDown */

@-webkit-keyframes slideDown {

    0% { 

      -webkit-transform: translateY(-10%); 

              transform: translateY(-10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateY(0);

              transform: translateY(0);
      opacity: 1;

    }

}

@-o-keyframes slideDown {

    0% { 

      -webkit-transform: translateY(-10%); 

              -o-transform: translateY(-10%); 

         transform: translateY(-10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateY(0);

              -o-transform: translateY(0);

         transform: translateY(0);
      opacity: 1;

    }

}

@-moz-keyframes slideDown {

    0% { 

      -webkit-transform: translateY(-10%); 

              -o-transform: translateY(-10%); 

         -moz-transform: translateY(-10%); 

           transform: translateY(-10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateY(0);

              -o-transform: translateY(0);

         -moz-transform: translateY(0);

           transform: translateY(0);
      opacity: 1;

    }

}

@keyframes slideDown {

    0% { 

      -webkit-transform: translateY(-10%); 

              -o-transform: translateY(-10%); 

         -moz-transform: translateY(-10%); 

           transform: translateY(-10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateY(0);

              -o-transform: translateY(0);

         -moz-transform: translateY(0);

           transform: translateY(0);
      opacity: 1;

    }

}

.animation-slideDown {

  -webkit-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
     -moz-animation-duration: 0.5s;
       animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       animation-fill-mode: both;

  -webkit-animation-name: slideDown;
     -o-animation-name: slideDown;
     -moz-animation-name: slideDown;
       animation-name: slideDown;

}

/* tab-content animation - slideLeft */

@-webkit-keyframes slideLeft {

    0% { 

      -webkit-transform: translateX(10%); 
              transform: translateX(10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;

    }

}

@-o-keyframes slideLeft {

    0% { 

      -webkit-transform: translateX(10%); 
              -o-transform: translateX(10%); 
         transform: translateX(10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateX(0);
              -o-transform: translateX(0);
         transform: translateX(0);
      opacity: 1;

    }

}

@-moz-keyframes slideLeft {

    0% { 

      -webkit-transform: translateX(10%); 
              -o-transform: translateX(10%); 
         -moz-transform: translateX(10%); 
           transform: translateX(10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateX(0);
              -o-transform: translateX(0);
         -moz-transform: translateX(0);
           transform: translateX(0);
      opacity: 1;

    }

}

@keyframes slideLeft {

    0% { 

      -webkit-transform: translateX(10%); 
              -o-transform: translateX(10%); 
         -moz-transform: translateX(10%); 
           transform: translateX(10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateX(0);
              -o-transform: translateX(0);
         -moz-transform: translateX(0);
           transform: translateX(0);
      opacity: 1;

    }

}

.animation-slideLeft {

  -webkit-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
     -moz-animation-duration: 0.5s;
       animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       animation-fill-mode: both;

  -webkit-animation-name: slideLeft;
     -o-animation-name: slideLeft;
     -moz-animation-name: slideLeft;
       animation-name: slideLeft;

}


/* tab-content animation - slideRight */

@-webkit-keyframes slideRight {

    0% { 

      -webkit-transform: translateX(-10%); 
              transform: translateX(-10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;

    }

}

@-o-keyframes slideRight {

    0% { 

      -webkit-transform: translateX(-10%); 
              -o-transform: translateX(-10%); 
         transform: translateX(-10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateX(0);
              -o-transform: translateX(0);
         transform: translateX(0);
      opacity: 1;

    }

}

@-moz-keyframes slideRight {

    0% { 

      -webkit-transform: translateX(-10%); 
              -o-transform: translateX(-10%); 
         -moz-transform: translateX(-10%); 
           transform: translateX(-10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateX(0);
              -o-transform: translateX(0);
         -moz-transform: translateX(0);
           transform: translateX(0);
      opacity: 1;

    }

}

@keyframes slideRight {

    0% { 

      -webkit-transform: translateX(-10%); 
              -o-transform: translateX(-10%); 
         -moz-transform: translateX(-10%); 
           transform: translateX(-10%);
      opacity: 0;

    }

    100% {

      -webkit-transform: translateX(0);
              -o-transform: translateX(0);
         -moz-transform: translateX(0);
           transform: translateX(0);
      opacity: 1;

    }

}

.animation-slideRight {

  -webkit-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
     -moz-animation-duration: 0.5s;
       animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       animation-fill-mode: both;

  -webkit-animation-name: slideRight;
     -o-animation-name: slideRight;
     -moz-animation-name: slideRight;
       animation-name: slideRight;

}


/* tab-content animation - zoomIn */

@-webkit-keyframes zoomIn {

    0% { 

      -webkit-transform: scale(0); 
              transform: scale(0);
      opacity: 0;

    }

    100% {

      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1;

    }

}

@-o-keyframes zoomIn {

    0% { 

      -webkit-transform: scale(0); 
              -o-transform: scale(0); 
         transform: scale(0);
      opacity: 0;

    }

    100% {

      -webkit-transform: scale(1);
              -o-transform: scale(1);
         transform: scale(1);
      opacity: 1;

    }

}

@-moz-keyframes zoomIn {

    0% { 

      -webkit-transform: scale(0); 
              -o-transform: scale(0); 
         -moz-transform: scale(0); 
           transform: scale(0);
      opacity: 0;

    }

    100% {

      -webkit-transform: scale(1);
              -o-transform: scale(1);
         -moz-transform: scale(1);
           transform: scale(1);
      opacity: 1;

    }

}

@keyframes zoomIn {

    0% { 

      -webkit-transform: scale(0); 
              -o-transform: scale(0); 
         -moz-transform: scale(0); 
           transform: scale(0);
      opacity: 0;

    }

    100% {

      -webkit-transform: scale(1);
              -o-transform: scale(1);
         -moz-transform: scale(1);
           transform: scale(1);
      opacity: 1;

    }

}

.animation-zoomIn {

  -webkit-animation-duration: 0.8s;
  -o-animation-duration: 0.8s;
     -moz-animation-duration: 0.8s;
       animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       animation-fill-mode: both;
  -webkit-animation-name: zoomIn;
     -o-animation-name: zoomIn;
     -moz-animation-name: zoomIn;
       animation-name: zoomIn;

}


/* tab-content animation - hingeBottom */

@-webkit-keyframes hingeBottom {

    0% { 

      -webkit-transform: rotateX(60deg); 
              transform: rotateX(60deg);
      -webkit-transform-origin: 0% 100%;
              transform-origin: 0% 100%;

    }

    25% {

      -webkit-transform: rotateX(-40deg);
              transform: rotateX(-40deg);
  
    }

    50% {

      -webkit-transform: rotateX(30deg);
              transform: rotateX(30deg);

    }

    75% {

      -webkit-transform: rotateX(-20deg);
              transform: rotateX(-20deg);

    }

    100% {

      -webkit-transform: rotateX(0) rotate(0);
              transform: rotateX(0) rotate(0);
      -webkit-transform-origin: 0% 100%;
              transform-origin: 0% 100%;

    }

}

@-o-keyframes hingeBottom {

    0% { 

      -webkit-transform: rotateX(60deg); 
              transform: rotateX(60deg);
      -webkit-transform-origin: 0% 100%;
              -o-transform-origin: 0% 100%;
         transform-origin: 0% 100%;

    }

    25% {

      -webkit-transform: rotateX(-40deg);
              transform: rotateX(-40deg);
  
    }

    50% {

      -webkit-transform: rotateX(30deg);
              transform: rotateX(30deg);

    }

    75% {

      -webkit-transform: rotateX(-20deg);
              transform: rotateX(-20deg);

    }

    100% {

      -webkit-transform: rotateX(0) rotate(0);
              transform: rotateX(0) rotate(0);
      -webkit-transform-origin: 0% 100%;
              -o-transform-origin: 0% 100%;
         transform-origin: 0% 100%;

    }

}

@-moz-keyframes hingeBottom {

    0% { 

      -webkit-transform: rotateX(60deg); 
              -moz-transform: rotateX(60deg); 
           transform: rotateX(60deg);
      -webkit-transform-origin: 0% 100%;
              -o-transform-origin: 0% 100%;
         -moz-transform-origin: 0% 100%;
           transform-origin: 0% 100%;

    }

    25% {

      -webkit-transform: rotateX(-40deg);
              -moz-transform: rotateX(-40deg);
           transform: rotateX(-40deg);
  
    }

    50% {

      -webkit-transform: rotateX(30deg);
              -moz-transform: rotateX(30deg);
           transform: rotateX(30deg);

    }

    75% {

      -webkit-transform: rotateX(-20deg);
              -moz-transform: rotateX(-20deg);
           transform: rotateX(-20deg);

    }

    100% {

      -webkit-transform: rotateX(0) rotate(0);
              -moz-transform: rotateX(0) rotate(0);
           transform: rotateX(0) rotate(0);
      -webkit-transform-origin: 0% 100%;
              -o-transform-origin: 0% 100%;
         -moz-transform-origin: 0% 100%;
           transform-origin: 0% 100%;

    }

}

@keyframes hingeBottom {

    0% { 

      -webkit-transform: rotateX(60deg); 
              -moz-transform: rotateX(60deg); 
           transform: rotateX(60deg);
      -webkit-transform-origin: 0% 100%;
              -o-transform-origin: 0% 100%;
         -moz-transform-origin: 0% 100%;
           transform-origin: 0% 100%;

    }

    25% {

      -webkit-transform: rotateX(-40deg);
              -moz-transform: rotateX(-40deg);
           transform: rotateX(-40deg);
  
    }

    50% {

      -webkit-transform: rotateX(30deg);
              -moz-transform: rotateX(30deg);
           transform: rotateX(30deg);

    }

    75% {

      -webkit-transform: rotateX(-20deg);
              -moz-transform: rotateX(-20deg);
           transform: rotateX(-20deg);

    }

    100% {

      -webkit-transform: rotateX(0) rotate(0);
              -moz-transform: rotateX(0) rotate(0);
           transform: rotateX(0) rotate(0);
      -webkit-transform-origin: 0% 100%;
              -o-transform-origin: 0% 100%;
         -moz-transform-origin: 0% 100%;
           transform-origin: 0% 100%;

    }

}

.animation-hingeBottom {

  -webkit-animation-duration: 0.8s;
  -o-animation-duration: 0.8s;
     -moz-animation-duration: 0.8s;
       animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       animation-fill-mode: both;

  -webkit-animation-name: hingeBottom;
     -o-animation-name: hingeBottom;
     -moz-animation-name: hingeBottom;
       animation-name: hingeBottom;

}


/* animation scaleX */

@-webkit-keyframes scaleX {

  0% {

    -webkit-transform: scaleX(0);

            transform: scaleX(0);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    opacity: 0;

  }

  100% {

    -webkit-transform: scaleX(1);

            transform: scaleX(1);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    opacity: 1;

  }

}

.animation-scaleX {

  -webkit-animation-duration: 1s;
  -o-animation-duration: 1s;
     -moz-animation-duration: 1s;
       animation-duration: 1s;
  -webkit-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
     -moz-animation-delay: 0.3s;
       animation-delay: 0.3s;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       animation-fill-mode: both;

  -webkit-animation-name: scaleX;
     -o-animation-name: scaleX;
     -moz-animation-name: scaleX;
       animation-name: scaleX;

}

/* animation scaleY */

@-webkit-keyframes scaleY {

  0% {

    -webkit-transform: scaleY(0);

            transform: scaleY(0);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    opacity: 0;

  }

  100% {

    -webkit-transform: scaleY(1);

            transform: scaleY(1);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    opacity: 1;

  }

}

.animation-scaleY {

  -webkit-animation-duration: 1s;
  -o-animation-duration: 1s;
     -moz-animation-duration: 1s;
       animation-duration: 1s;
  -webkit-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
     -moz-animation-delay: 0.3s;
       animation-delay: 0.3s;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       animation-fill-mode: both;

  -webkit-animation-name: scaleY;
     -o-animation-name: scaleY;
     -moz-animation-name: scaleY;
       animation-name: scaleY;

}

/* animation scale */

@-webkit-keyframes scale {

  0% {

    -webkit-transform: scale(0);

            transform: scale(0);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    opacity: 0;

  }

  100% {

    -webkit-transform: scale(1);

            transform: scale(1);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    opacity: 1;

  }

}

.animation-scale {

  -webkit-animation-duration: 1s;
  -o-animation-duration: 1s;
     -moz-animation-duration: 1s;
       animation-duration: 1s;
  -webkit-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
     -moz-animation-delay: 0.3s;
       animation-delay: 0.3s;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       animation-fill-mode: both;

  -webkit-animation-name: scale;
     -o-animation-name: scale;
     -moz-animation-name: scale;
       animation-name: scale;

}


/* SLIDER ANIMATION */

/* slide animation, 5 images, modify to fit your needs */

@-webkit-keyframes slide {

    0%, 15%, 100% { 

      left: 0; 

    }

    20%, 35%  { 

      left: -100%

    }

    40%, 55%    { 

      left: -200%;
      
    }

    60%, 75% { 

      left: -300%;

    }

    80%, 95% { 

      left: -400%; 

    }

}

/* progress bar animation */

@-webkit-keyframes progression {

    0%, 20%, 40%, 60%, 80%, 100% { 

        width:0%; 
        opacity:0; 

    }

    16%, 36%, 56%, 76%, 96% { 

        width:100%; 
        opacity:0.8; 

    }

    18%, 38%, 58%, 78%, 98% { 

      width:100%; 
      opacity:0; 

    }

}