/* 
    Created on : 22-Jul-2016, 14:34:37
    Author     : Matt Ainge and Martin Lyne
*/

/**
  ANIMATIONS
**/

:root{
	--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
	--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);

	--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
	--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
	--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-out-quint-natural: cubic-bezier(0.28, 0.63, 0.24, 1.1) ;
	--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
	--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);

	--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
	--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
	--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
	--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	--ease-in-out-circ-natural: cubic-bezier(0.49,-0.32, 0.46, 1.43) ;

	--speed-supersonic: 0.3s;
	--speed-fast: 0.4s;
	--speed-slow: 2s;
	--speed-crawl: 4s;
}


@keyframes tapped {
	0% { transform: scale(1); }
	50% { transform: scale(0.9); }
	100% { transform: scale(1); }
}

@keyframes spin { 
	from { 
		transform: rotate( 0deg ) ; 
	}
	to { 
		transform: rotate( 360deg ) ; 
	}
}

@keyframes rotatedspin { 
	from { 
		transform: rotate( 120deg ) ; 
	}
	to { 
		transform: rotate( 480deg ) ; 
	}
}

@keyframes rotate { 
	100% {
		transform: rotate( 120deg ) ;
	}
}

@keyframes pulse-and-scale {
	0% { transform: scale(0.9); opacity: 0.7; }
	50% { transform: scale(1); opacity: 1; }
	100% { transform: scale(0.9); opacity: 0.7; }
}

@keyframes pulse {
	0% { opacity: 0.3; }
	50% { opacity: 1; }
	100% { opacity: 0.3; }
}

@keyframes zoom {
	100% {
		transform: scale( 1.3, 1.3 ) ;
	}
}

@keyframes value-added-on {
	0% { background-color: #013691; }
	100% { background-color: #151515 ; }
}

@keyframes value-added-above {
	0% { background-color: #013691; }
	50% { background-color: #151515; }
	100% { background-color: #D2020D ; }
}


.loaded .animated
{
	transition:			box-shadow, color, font-size, transform, opacity, visibility, flex-basis,
	                    left, top, bottom, right, width, height, max-height, min-width, max-width, background-color,
	                    border-width, border-color, margin, padding 0.8s;
	-moz-transition:	box-shadow, color, font-size, transform, opacity, visibility, flex-basis,
	                    left, top, bottom, right, width, height, max-height, min-width, max-width, background-color,
	                    border-width, border-color, margin, padding 0.8s;
	-webkit-transition: box-shadow, color, font-size, transform, opacity, visibility, flex-basis,
	                    left, top, bottom, right, width, height, max-height, min-width, max-width, background-color,
	                    border-width, border-color, margin, padding 0.8s;
	-o-transition:		box-shadow, color, font-size, transform, opacity, visibility, flex-basis,
	                    left, top, bottom, right, width, height, max-height, min-width, max-width, background-color,
	                    border-width, border-color, margin, padding 0.8s;
	-ms-transition:		box-shadow, color, font-size, transform, opacity, visibility, flex-basis,
	                    left, top, bottom, right, width, height, max-height, min-width, max-width, background-color,
	                    border-width, border-color, margin, padding 0.8s;
	
	/*	transition: font-size 0s ;  /* Disabled font-size, the property used for responsiveness */ 
	
	-webkit-transition-timing-function: var( --ease-in-out-circ-natural, cubic-bezier(.87,-.31,.19,1.44) ) ;
	   -moz-transition-timing-function: var( --ease-in-out-circ-natural, cubic-bezier(.87,-.31,.19,1.44) ) ;
		 -o-transition-timing-function: var( --ease-in-out-circ-natural, cubic-bezier(.87,-.31,.19,1.44) ) ;
			transition-timing-function: var( --ease-in-out-circ-natural, cubic-bezier(.87,-.31,.19,1.44) ) ;
	
	-webkit-animation-duration: 0.8s ;
	   -moz-animation-duration: 0.8s ;
	        animation-duration: 0.8s ;
			
	-webkit-transition-duration: 0.8s ;
	   -moz-transition-duration: 0.8s ;
	        transition-duration: 0.8s ;
			
    -webkit-animation-timing-function: var( --ease-in-out-circ-natural, cubic-bezier(.87,-.31,.19,1.44) ) ;
            animation-timing-function: var( --ease-in-out-circ-natural, cubic-bezier(.87,-.31,.19,1.44) ) ;
	
	-webkit-animation-fill-mode: forwards ;
	   -moz-animation-fill-mode: forwards ;
	        animation-fill-mode: forwards ;
			
	overflow: hidden; 
}


/* Animation and transition speeds */
.loaded .animated.supersonic {
	-webkit-animation-duration: var(--speed-supersonic);
	animation-duration: var(--speed-supersonic);
	-webkit-transition-duration: var(--speed-supersonic);
	transition-duration: var(--speed-supersonic);
}
.loaded .animated.fast {
	-webkit-animation-duration: var(--speed-fast);
	animation-duration: var(--speed-fast);
	-webkit-transition-duration: var(--speed-fast);
	transition-duration: var(--speed-fast);
}
.loaded .animated.slow
{
	-webkit-animation-duration: var(--speed-fast);
	animation-duration: var(--speed-fast);
	-webkit-transition-duration: var(--speed-fast);
	transition-duration: var(--speed-fast);
}
.loaded .animated.crawl
{
	-webkit-animation-duration: var(--speed-crawl) !important ;
	animation-duration: var(--speed-crawl) !important ;
	-webkit-transition-duration: var(--speed-crawl) !important ;
	transition-duration: var(--speed-crawl) !important ;
}


/** Animation classes **/
.loaded .animated.spin {
	-webkit-animation: spin 4s linear infinite;
	   -moz-animation: spin 4s linear infinite;
	        animation: spin 4s linear infinite;
}

.loaded .animated.rotate.spin {
	-webkit-animation: rotatedspin 4s linear infinite;
	   -moz-animation: rotatedspin 4s linear infinite;
	        animation: rotatedspin 4s linear infinite;
}

.loaded .animated.bounce {
	-webkit-animation: zoom 0.15s linear 4 alternate;
	   -moz-animation: zoom 0.15s linear 4 alternate;
	        animation: zoom 0.15s linear 4 alternate;
}

.loaded .animated.reverse {
	-webkit-animation-direction: reverse; 
	   -moz-animation-direction: reverse; 
	     -o-animation-direction: reverse; 
		    animation-direction: reverse;
}

.loaded .animated.flip {
	perspective: 1000px ;
	transform: rotateY( 720deg ) ;
}

.animated.value-added {
	background-color: #013691 ;	
	-webkit-animation-timing-function: linear ;
	   -moz-animation-timing-function: linear ;
	        animation-timing-function: linear ;
}
.loaded .animated.value-added.on {
	-webkit-animation-name: value-added-on ; 
	   -moz-animation-name: value-added-on ; 
	        animation-name: value-added-on ; 
}
.loaded .animated.value-added.above {
	-webkit-animation-name: value-added-above ;
	   -moz-animation-name: value-added-above ;
	        animation-name: value-added-above ;
}

.loaded .animated.pulse {
	-webkit-animation: pulse 2s infinite ease-in-out;
	   -moz-animation: pulse 2s infinite ease-in-out;
	        animation: pulse 2s infinite ease-in-out;
}

.loaded .animated.roll-left {
	/*-webkit-animation: pulse 2s infinite ease-in-out ;*/
	/*-moz-animation: pulse 2s infinite ease-in-out ;*/
	/*animation: pulse 2s infinite ease-in-out ;*/
	transform: rotate( -720deg ) ;
	-moz-transition-timing-function: ease-in-out ;
}

.loaded .animated.roll-right {
	/*-webkit-animation: pulse 2s infinite ease-in-out ;*/
	/*-moz-animation: pulse 2s infinite ease-in-out ;*/
	/*animation: pulse 2s infinite ease-in-out ;*/
	transform: rotate( 720deg ) ;
	-moz-transition-timing-function: ease-in-out ;
}


.loaded .animated.pulse-and-scale {
	-webkit-animation: pulse-and-scale 2s infinite ease-in-out ;
	-moz-animation: pulse-and-scale 2s infinite ease-in-out ;
	animation: pulse-and-scale 2s infinite ease-in-out ;
}

.loaded .animated.tapped {
	-webkit-animation: tapped 0.5s ease-in-out ;
	-moz-animation: tapped 0.5s ease-in-out ;
	animation: tapped 0.5s ease-in-out ;
}

/** Transform classes **/
.loaded .animated.rotate {
	-moz-transform: rotate( 120deg ) ;
	transform: rotate( 120deg ) ;
}

.animated.delay {
	animation-delay: 1s ;
}

.animated.delay-longer {
	animation-delay: 2s ;
}

.no-leadin {
	-webkit-transition-timing-function: var( --ease-out-quart, cubic-bezier(0.65, 1.62, 0.7, 0.99) ) !important ;
       -moz-transition-timing-function: var( --ease-out-quart, cubic-bezier(0.65, 1.62, 0.7, 0.99) ) !important ;
	     -o-transition-timing-function: var( --ease-out-quart, cubic-bezier(0.65, 1.62, 0.7, 0.99) ) !important ;
		    transition-timing-function: var( --ease-out-quart, cubic-bezier(0.65, 1.62, 0.7, 0.99) ) !important ;
			
    -webkit-animation-timing-function: var( --ease-out-quart, cubic-bezier(0.65, 1.62, 0.7, 0.99) ) !important ;
            animation-timing-function: var( --ease-out-quart, cubic-bezier(0.65, 1.62, 0.7, 0.99) ) !important ;
}

