/* Table of contents
–––––––––––––––––––––––––––––––––––––––––––––––––– 

- Fade in Left
- Fade in Right
- Fade in Down
- Fade in Up

- Slide in Left
- Slide in Right
- Slide in Up
- Slide in Down

- Zoom in
- Rotate in

- Bounce
- Pulse
- Rotate
- Wobble

<script>
    $(window).scroll(function() {
        $('#animatedElement').each(function(){  
        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow+400) {
                $(this).addClass("Animation");   
            }
        });
    });
</script>


<script>
    $('#animatedElement').click(function() {
        $(this).addClass("slideUp");
    });
</script>


*/
.hidden{ visibility: hidden;}



/* Fade Left
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.fadeleft{
    animation-name: fadeleft;
    -webkit-animation-name: fadeleft;	

    animation-duration: 1.5s;	
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;		

    visibility: visible !important;	
}

@keyframes fadeleft {
    0% { transform: translate3d(-1000px, 0, 0); opacity: 0.0;	}
    100% {  transform: none; opacity: 1;	}		
}

@-webkit-keyframes fadeleft {
    0% { -webkit-transform: translate3d(-1000px, 0, 0); opacity: 0.0;	}
    100% { -webkit-transform: none); opacity: 1;	} }		
    

    /* Fade Right
    –––––––––––––––––––––––––––––––––––––––––––––––––– */
.faderight{
    animation-name: faderight;
    -webkit-animation-name: faderight;	

    animation-duration: 1.5s;	
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;		

    visibility: visible !important;	
}

@keyframes faderight {
    0% { transform: translate3d(1000px, 0, 0); opacity: 0.0;	}
    100% {  transform: none; opacity: 1;	}		
}

@-webkit-keyframes faderight {
    0% { -webkit-transform: translate3d(1000px, 0, 0); opacity: 0.0;	}
    100% { -webkit-transform: none); opacity: 1; }		
}


/* Fade Up 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.fadeup{
    animation-name: fadeup;
    -webkit-animation-name: fadeup;	

    animation-duration: 1.5s;	
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;		

    visibility: visible !important;	
}

@keyframes fadeup {
    0% { transform: translate3d(0, -1000px, 0); opacity: 0.0;	}
    100% {  transform: none; opacity: 1;	}		
}

@-webkit-keyframes fadeup {
    0% { -webkit-transform: translate3d(0, -1000px, 0); opacity: 0.0;	}
    100% { -webkit-transform: none); opacity: 1; }		
}


/* Fade Down
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.fadedown{
    animation-name: fadedown;
    -webkit-animation-name: fadedown;	

    animation-duration: 1.5s;	
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;		

    visibility: visible !important;	
}

@keyframes fadedown {
    0% { transform: translate3d(0, 1000px, 0); opacity: 0.0;	}
    100% {  transform: none; opacity: 1;	}		
}

@-webkit-keyframes fadedown {
    0% { -webkit-transform: translate3d(0, 1000px, 0); opacity: 0.0;	}
    100% { -webkit-transform: none); opacity: 1; }		
}
    

/* Slide Left
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.slideleft{
    animation-name: slideleft;
    -webkit-animation-name: slideleft;	

    animation-duration: 0.5s;	
    -webkit-animation-duration: 0.5s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;		

    visibility: visible !important;	
}

@keyframes slideleft {
    0% { transform: translate3d(-100%, 0, 0); }
    75% { transform: translate3d(10%, 0, 0); }
    100% {  transform: none; }		
}

@-webkit-keyframes slideleft {
    0% { -webkit-transform: translate3d(-100%, 0, 0); }
    75% { -webkit-transform: translate3d(10%, 0, 0); }
    100% {  -webkit-transform: none; } }		
    
    
/* Slide Right
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.slideright{
    animation-name: slideright;
    -webkit-animation-name: slideright;	

    animation-duration: 0.5s;	
    -webkit-animation-duration: 0.5s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;		

    visibility: visible !important;	
}

    @keyframes slideright {
    0% { transform: translate3d(100%, 0, 0); }
    75% { transform: translate3d(-10%, 0, 0); }
    100% {  transform: none; }		
}

    @-webkit-keyframes slideright {
    0% { -webkit-transform: translate3d(100%, 0, 0); }
    75% { -webkit-transform: translate3d(-10%, 0, 0); }
    100% {  -webkit-transform: none; } }
    
    
/* Slide Up
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.slideup{
    animation-name: slideup;
    -webkit-animation-name: slideup;	

    animation-duration: 0.5s;	
    -webkit-animation-duration: 0.5s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;		

    visibility: visible !important;	
}

    @keyframes slideup {
        0% { transform: translate3d(0, -100%, 0); }
        75% { transform: translate3d(0, 10%, 0); }
        100% {  transform: none; }		
}

    @-webkit-keyframes slideup {
        0% { -webkit-transform: translate3d(0, -100%, 0); }
        75% { -webkit-transform: translate3d(0, 10%, 0); }
        100% {  -webkit-transform: none; } }
  
    
/* Slide Down
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.slidedown{
    animation-name: slidedown;
    -webkit-animation-name: slidedown;	

    animation-duration: 0.5s;	
    -webkit-animation-duration: 0.5s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;		

    visibility: visible !important;	
}

    @keyframes slidedown {
        0% { transform: translate3d(0, 100%, 0); }
        75% { transform: translate3d(0, -10%, 0); }
        100% {  transform: none; } }

    @-webkit-keyframes slidedown {
        0% { -webkit-transform: translate3d(0, 100%, 0); }
        75% { -webkit-transform: translate3d(0, -10%, 0); }
        100% {  -webkit-transform: none; } }
    
 
/* Zoom In
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.zoomin{
    animation-name: zoomin;
    -webkit-animation-name: zoomin;	

    animation-duration: 0.5s;	
    -webkit-animation-duration: .5s;

    animation-timing-function: ease-out;	
    -webkit-animation-timing-function: ease-out;		

    visibility: visible !important;	
}

    @keyframes zoomin {
        0% { transform: scale3d(.1, .1, .1); }
        100% {  transform:  none; }	}

    @-webkit-keyframes zoomin {
        0% { -webkit-transform: scale3d( .1, .1, .1); }
        100% {  -webkit-transform:  none; }	}
    
 
/* Rotate In
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.rotatein{
    animation-name: rotatein;
    -webkit-animation-name: rotatein;	

    animation-duration: 1s;	
    -webkit-animation-duration: 1s;


    visibility: visible !important;	
}

@keyframes rotatein {
        0% { transform: rotate3d( 0, 0, 1, -200deg);
                transform-origin: center;
                opacity: 0;}
        100% { transform:  none;
                    transform-origin: center;
                    opacity: 1;}	}

@-webkit-keyframes rotatein {
    0% {  -webkit-transform: rotate3d( 0, 0, 1, -200deg);
            -webkit-transform-origin: center;
            opacity: 0;}
    100% {  -webkit-transform:  none;
                -webkit-transform-origin: center;
                opacity: 1;}	}
    


/* Bounce
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bounce{
    animation-name: bounce;
    -webkit-animation-name: bounce;	

    animation-duration: 3s;	
    -webkit-animation-duration: 3s;
    
    transform-origin: bottom;
    -webkit-transform-origin: bottom;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    	
    -webkit-animation-timing-function:ease-in;
    animation-timing-function:ease-in;

}

@keyframes bounce {
    0%   { transform: translate3d( 0, -0px, 0); }
    25%  { transform: translate3d( 0, -30px, 0); }
    50%  { transform: translate3d( 0, -0px, 0);   }
    75%  { transform: translate3d( 0, -30px, 0); }
    100% { transform: translate3d( 0, -0px, 0); }
}
@-webkit-keyframes bounce {
    0%   { -webkit-transform: translate3d( 0, -0px, 0); }
    25%  { -webkit-transform: translate3d( 0, -30px, 0); }
    50%  { -webkit-transform: translate3d( 0, -0px, 0); }
    75%  { -webkit-transform: translate3d( 0, -30px, 0); }
    100% { -webkit-transform: translate3d( 0, -0px, 0); }
}


/* Pulse
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.pulse{
    animation-name: pulse;
    -webkit-animation-name: pulse;	

    animation-duration: 1.5s;	
    -webkit-animation-duration: 1.5s;
    
    transform-origin: bottom;
    -webkit-transform-origin: bottom;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    
    animation-timing-function: ease-in-out;	
    -webkit-animation-timing-function: ease-in-out;

    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

@keyframes pulse {
    0%   { transform: scale3d( 1, 1, 1); }
    50%  { transform: scale3d( 1.05, 1.05, 1.05); }
    100% { transform: scale3d( 1, 1, 1); }
}

@-webkit-keyframes pulse {
    0%   { -webkit-transform: scale3d( 1, 1, 1); }
    50%  { -webkit-transform: scale3d( 1.05, 1.05, 1.05); }
    100% { -webkit-transform: scale3d( 1, 1, 1); }	}


/* Rotate
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.rotate{
    animation-name: rotate;
    -webkit-animation-name: rotate;	

    animation-duration: 3s;	
    -webkit-animation-duration: 3s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    
    -webkit-transform-origin: center;
    transform-origin: center;

}

@keyframes rotate {
    0%   { transform: rotate3d( 0, 0, 1, -360deg); }
    100% { transform: rotate3d( 1, 1, 1, 0deg); }
}
@-webkit-keyframes rotate {
    0%   { -webkit-transform: rotate3d( 0, 0, 1, -360deg); }
    100% { -webkit-transform: rotate3d( 1, 1, 1, 0deg); }
}


/* Wobble
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.wobble{
    animation-name: wobble;
    -webkit-animation-name: wobble;	

    animation-duration: 1.5s;	
    -webkit-animation-duration: 1.5s;

    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    
    -webkit-transform-origin: center;
    transform-origin: center;

    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

@keyframes wobble {
    0% { transform: none; }
    15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
    30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
    45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
    60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
    75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
    100% { transform: none; }
}
@-webkit-keyframes wobble {
    0% { -webkit-transform: none; }
    15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
    30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
    45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
    60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
    75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
    100% { -webkit-transform: none; }
}