/* 
 Styles for major timeline animations 

 Id = $Id: animations.css 5519 2018-03-09 17:49:22Z sschatz $
 URL = $URL: https://dev-wbm-svn.dev.uspto.gov/repos/live/static_content/trunk/10millionpatents/animations.css $
 
*/



[data-aos="custom-fade-out"] {
	opacity: 1;
	-webkit-transition-property:  opacity;
	transition-property: opacity;
}

[data-aos="custom-fade-out"].aos-animate {
	opacity: 0;
}

[data-aos="custom-grow-up"] {
	transform: scaleY(0);
	transform-origin : 50% 100%;
	-webkit-transform-origin : 50% 100%;
    -moz-transform-origin : 50% 100%;
    -o-transform-origin : 50% 100%;
    -ms-transform-origin : 50% 100%;
	-webkit-transition-property:  -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
}

[data-aos="custom-grow-up"].aos-animate {
	transform: scaleY(1);
}

[data-aos="fade-in"] {
	opacity: 0;
	-webkit-transition-property:  opacity;
	transition-property: opacity;
}

[data-aos="fade-in"].aos-animate {
	opacity: 1;
}


/* Telegraph */

@-webkit-keyframes hinge {
	0%, 50%, 100% {
	   -webkit-transform: rotate(0);
	   -webkit-transform-origin: bottom right; 
	   -webkit-animation-timing-function: ease-in-out;
	}
	25%, 75% {
	   -webkit-transform: rotate(-3deg); 
	   -webkit-transform-origin: bottom right; 
	   -webkit-animation-timing-function: ease-in-out;
	}
}

@keyframes hinge {
	0%, 50%, 100% { 
	   transform: rotate(0); 
	   transform-origin: bottom right; 
	   animation-timing-function: ease-in-out; 
	}
	25%, 75% { 
	   transform: rotate(-3deg); 
	   transform-origin: bottom right; 
	   animation-timing-function: ease-in-out; 
	}
}
 
.hinge {
	-webkit-animation-name: hinge;
	animation-name: hinge;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}


@keyframes ani-morse-p {
	0%, 20% { 
	   opacity: 0;
	   animation-timing-function: ease-in-out; 
	}
	25%, 100% { 
	   opacity: 1;
	   animation-timing-function: ease-in-out; 
	}
}
 
.ani-morse-p {
	-webkit-animation-name: ani-morse-p;
	animation-name: ani-morse-p;
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@keyframes ani-morse-a {
	0%, 30% { 
	   opacity: 0;
	   animation-timing-function: ease-in-out; 
	}
	35%, 100% { 
	   opacity: 1;
	   animation-timing-function: ease-in-out; 
	}
}
 
.ani-morse-a {
	-webkit-animation-name: ani-morse-a;
	animation-name: ani-morse-a;
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@keyframes ani-morse-t {
	0%, 40% { 
	   opacity: 0;
	   animation-timing-function: ease-in-out; 
	}
	45%, 100% { 
	   opacity: 1;
	   animation-timing-function: ease-in-out; 
	}
}
 
.ani-morse-t {
	-webkit-animation-name: ani-morse-t;
	animation-name: ani-morse-t;
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@keyframes ani-morse-e {
	0%, 50% { 
	   opacity: 0;
	   animation-timing-function: ease-in-out; 
	}
	55%, 100% { 
	   opacity: 1;
	   animation-timing-function: ease-in-out; 
	}
}
 
.ani-morse-e {
	-webkit-animation-name: ani-morse-e;
	animation-name: ani-morse-e;
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@keyframes ani-morse-n {
	0%, 60% { 
	   opacity: 0;
	   animation-timing-function: ease-in-out; 
	}
	65%, 100% { 
	   opacity: 1;
	   animation-timing-function: ease-in-out; 
	}
}
 
.ani-morse-n {
	-webkit-animation-name: ani-morse-n;
	animation-name: ani-morse-n;
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@keyframes ani-morse-t-last {
	0%, 70% { 
	   opacity: 0;
	   animation-timing-function: ease-in-out; 
	}
	75%, 100% { 
	   opacity: 1;
	   animation-timing-function: ease-in-out; 
	}
}
 
.ani-morse-t-last {
	-webkit-animation-name: ani-morse-t-last;
	animation-name: ani-morse-t-last;
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

/* Train/McCoy */

@-webkit-keyframes train-animation {
	0% {
	   -webkit-transform: translateX(950px);
	   -webkit-animation-timing-function: linear;
	}
	100% {
		-webkit-transform: translateX(-2500px);
	}
}

@keyframes train-animation {
	0% {
	   transform: translateX(950px);
	   animation-timing-function: linear;
	}
	100% {
		transform: translateX(-2200px);
	}
}

@-webkit-keyframes train-smoke-small-animation {
	0% {
		opacity: 0;
	   -webkit-transform: translateX(950px);
		-webkit-animation-timing-function: linear;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(-2200px);
	}
}

@keyframes train-smoke-small-animation {
	0% {
		opacity: 0;
		transform: translateX(950px);
		animation-timing-function: linear;
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateX(-2200px);
	}
}

@-webkit-keyframes train-smoke-medium-animation {
	0% {
		opacity: 0;
	   -webkit-transform: translateX(950px);
		-webkit-animation-timing-function: linear;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(-2200px);
	}
}

@keyframes train-smoke-medium-animation {
	0% {
		opacity: 0;
		transform: translateX(950px);
		animation-timing-function: linear;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateX(-2200px);
	}
}

@-webkit-keyframes train-smoke-large-animation {
	0% {
		opacity: 0;
	   -webkit-transform: translateX(950px);
		-webkit-animation-timing-function: linear;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(-2200px);
	}
}

@keyframes train-smoke-large-animation {
	0% {
		opacity: 0;
		transform: translateX(950px);
		animation-timing-function: linear;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: translateX(-2200px);
	}
}

.train-animation {
	-webkit-animation-name: train-animation;
	animation-name: train-animation;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
	 
.train-smoke-small-animation {
	-webkit-animation-name: train-smoke-small-animation;
	animation-name: train-smoke-small-animation;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
 
.train-smoke-medium-animation {
	-webkit-animation-name: train-smoke-medium-animation;
	animation-name: train-smoke-medium-animation;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
 
.train-smoke-large-animation {
	-webkit-animation-name: train-smoke-large-animation;
	animation-name: train-smoke-large-animation;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}



/* Flying Machine */
[data-aos="custom-plane"] {
	-webkit-transform: translate(0px, 0px) scale(1);
	transform: translate(0px, 0px) scale(1);
	-webkit-transition-property:  -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
}

[data-aos="custom-plane"].aos-animate {
	-webkit-transform: translate(400px, -150px) scale(0.3);
	transform: translate(400px, -150px) scale(0.3);
}

@media (max-width: 768px) {
	[data-aos="custom-plane"] {
		-webkit-transform: translate(0px, 0px) scale(1);
		transform: translate(0px, 0px) scale(1);
		-webkit-transition-property:  -webkit-transform;
		transition-property: -webkit-transform;
		transition-property: transform;
		transition-property: transform, -webkit-transform;
	}

	[data-aos="custom-plane"].aos-animate {
		-webkit-transform: translate(180px, -100px) scale(0.3);
		transform: translate(180px, -100px) scale(0.3);
	}
}
	
/* Slinky */

@-webkit-keyframes slinky-left-extend {
	0%, 50%, 100% {
	   -webkit-opacity: 0;
	   -webkit-animation-timing-function: ease-in-out;
	}
	25%, 75% {
	   -webkit-opacity: 1;
	   -webkit-animation-timing-function: ease-in-out;
	}
}

@keyframes slinky-left-extend {
	0%, 50%, 100% {
	   opacity: 0;
	   animation-timing-function: ease-in-out;
	}
	25%, 75% {
	   opacity: 1;
	  animation-timing-function: ease-in-out;
	}
}
 
.slinky-left-extend {
	-webkit-animation-name: slinky-left-extend;
	animation-name: slinky-left-extend;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
 
@-webkit-keyframes slinky-left-contract {
	0%, 50%, 100% {
	   -webkit-opacity: 1;
	   -webkit-animation-timing-function: ease-in-out;
	}
	25%, 75% {
	   -webkit-opacity: 0;
	   -webkit-animation-timing-function: ease-in-out;
	}
}

@keyframes slinky-left-contract {
	0%, 50%, 100% {
	   opacity: 1;
	   animation-timing-function: ease-in-out;
	}
	25%, 75% {
	  opacity: 0;
	  animation-timing-function: ease-in-out;
	}
}
 
.slinky-left-contract {
	-webkit-animation-name: slinky-left-contract;
	animation-name: slinky-left-contract;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
 
@-webkit-keyframes slinky-right-extend {
	0%, 50%, 100% {
	   -webkit-opacity: 1;
	   -webkit-animation-timing-function: ease-in-out;
	}
	25%, 75% {
	   -webkit-opacity: 0;
	   -webkit-animation-timing-function: ease-in-out;
	}
}

@keyframes slinky-right-extend {
	0%, 50%, 100% {
	   opacity: 1;
	   animation-timing-function: ease-in-out;
	}
	25%, 75% {
	  opacity: 0;
	  animation-timing-function: ease-in-out;
	}
}
 
.slinky-right-extend {
	-webkit-animation-name: slinky-right-extend;
	animation-name: slinky-right-extend;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
 
@-webkit-keyframes slinky-right-contract {
	0%, 50%, 100% {
	   -webkit-opacity: 0;
	   -webkit-animation-timing-function: ease-in-out;
	}
	25%, 75% {
	   -webkit-opacity: 1;
	   -webkit-animation-timing-function: ease-in-out;
	}
}

@keyframes slinky-right-contract {
	0%, 50%, 100% {
	   opacity: 0;
	   animation-timing-function: ease-in-out;
	}
	25%, 75% {
	  opacity: 1;
	  animation-timing-function: ease-in-out;
	}
}
 
.slinky-right-contract {
	-webkit-animation-name: slinky-right-contract;
	animation-name: slinky-right-contract;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

/* Saturn V */
[data-aos="move-up-rocket"] {
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition-property:  -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
}

[data-aos="move-up-rocket"].aos-animate {
	-webkit-transform: translateY(-200px);
	transform: translateY(-200px);
	opacity: 1;
}

[data-aos="move-up-scale-flame"] {
	-webkit-transform: translateY(0px) scale(0.1);
	transform: translateY(0px) scale(0.1);
	opacity: 0;
	-webkit-transition-property:  opacity, -webkit-transform;
	transition-property: opacity, -webkit-transform;
	transition-property: transform, opacity;
	transition-property: transform, opacity, -webkit-transform;
}

[data-aos="move-up-scale-flame"].aos-animate {
	-webkit-transform: translateY(-180px) scale(1);
	transform: translateY(-180px) scale(1);
	opacity: 1;
}

[data-aos="custom-slide-left"] {
	-webkit-transform: translateX(0px);
	transform: translateX(0px);
	-webkit-transition-property:  -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
}

[data-aos="custom-slide-left"].aos-animate {
	-webkit-transform: translateX(-450px);
	transform: translateX(-450px);
}

@media (max-width: 767px) {

	[data-aos="move-up-rocket"] {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
		-webkit-transition-property:  -webkit-transform;
		transition-property: -webkit-transform;
		transition-property: transform;
		transition-property: transform, -webkit-transform;
	}

	[data-aos="move-up-rocket"].aos-animate {
		-webkit-transform: translateY(-100px);
		transform: translateY(-100px);
		opacity: 1;
	}

	[data-aos="move-up-scale-flame"] {
		-webkit-transform: translateY(0px) scaleY(0.1);
		transform: translateY(0px) scaleY(0.1);
		opacity: 0;
		-webkit-transition-property:  opacity, -webkit-transform;
		transition-property: opacity, -webkit-transform;
		transition-property: transform, opacity;
		transition-property: transform, opacity, -webkit-transform;
	}

	[data-aos="move-up-scale-flame"].aos-animate {
		-webkit-transform: translateY(-80px) scaleY(1);
		transform: translateY(-80px) scaleY(1);
		opacity: 1;
	}
	
}

@media (min-width: 1600px) {

	[data-aos="move-up-rocket"].aos-animate {
		-webkit-transform: translateY(-300px);
		transform: translateY(-300px);
		opacity: 1;
	}

	[data-aos="move-up-scale-flame"] {
		-webkit-transform: translateY(0px) scale(0.1);
		transform: translateY(0px) scale(0.1);
		opacity: 0;
		-webkit-transition-property:  opacity, -webkit-transform;
		transition-property: opacity, -webkit-transform;
		transition-property: transform, opacity;
		transition-property: transform, opacity, -webkit-transform;
	}

	[data-aos="move-up-scale-flame"].aos-animate {
		-webkit-transform: translateY(-250px) scale(1);
		transform: translateY(-250px) scale(1);
		opacity: 1;
	}
	
}

/* Fire bucket */

[data-aos="move-scale-bucket-full"] {
	-webkit-transform: translate(0px, 0px) scale(1);
	transform: translate(0px, 0px) scale(1);
	opacity: 1;
	-webkit-transition-property:  opacity, -webkit-transform;
	transition-property: opacity, -webkit-transform;
	transition-property: transform, opacity;
	transition-property: transform, opacity, -webkit-transform;
}

[data-aos="move-scale-bucket-full"].aos-animate {
	-webkit-transform: translate(-200px, -150px) scale(0.5);
	transform: translate(-200px, -150px) scale(0.5);
	opacity: 0;
}

[data-aos="move-scale-bucket-empty"] {
	-webkit-transform: translate(0px, 0px) scale(1);
	transform: translate(0px, 0px) scale(1);
	-webkit-transition-property:  -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
}

[data-aos="move-scale-bucket-empty"].aos-animate {
	-webkit-transform: translate(-200px, -150px) scale(0.5);
	transform: translate(-200px, -150px) scale(0.5);
}

[data-aos="move-scale-water"] {
	-webkit-transform: translate(0px, 0px) scale(0.5);
	transform: translate(0px, 0px) scale(0.5);
	opacity: 0;
	-webkit-transition-property:  opacity, -webkit-transform;
	transition-property: opacity, -webkit-transform;
	transition-property: transform, opacity;
	transition-property: transform, opacity, -webkit-transform;
}

[data-aos="move-scale-water"].aos-animate {
	-webkit-transform: translate(-200px, -150px) scale(1);
	transform: translate(-200px, -150px) scale(1);
	opacity: 1;
}

[data-aos="move-fire-down"] {
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition-property:  -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
}

[data-aos="move-fire-down"].aos-animate {
	-webkit-transform: translateY(130px);
	transform: translateY(130px);
}

@media (max-width: 767px) {
	[data-aos="move-scale-bucket-full"] {
		-webkit-transform: translate(0px, 0px) scale(1);
		transform: translate(0px, 0px) scale(1);
		opacity: 1;
		-webkit-transition-property:  opacity, -webkit-transform;
		transition-property: opacity, -webkit-transform;
		transition-property: transform, opacity;
		transition-property: transform, opacity, -webkit-transform;
	}

	[data-aos="move-scale-bucket-full"].aos-animate {
		-webkit-transform: translate(-100px, -75px) scale(0.75);
		transform: translate(-100px, -75px) scale(0.75);
		opacity: 0;
	}

	[data-aos="move-scale-bucket-empty"] {
		-webkit-transform: translate(0px, 0px) scale(1);
		transform: translate(0px, 0px) scale(1);
		-webkit-transition-property:  -webkit-transform;
		transition-property: -webkit-transform;
		transition-property: transform;
		transition-property: transform, -webkit-transform;
	}

	[data-aos="move-scale-bucket-empty"].aos-animate {
		-webkit-transform: translate(-100px, -75px) scale(0.75);
		transform: translate(-100px, -75px) scale(0.75);
	}

	[data-aos="move-scale-water"] {
		-webkit-transform: translate(0px, -20px) scaleY(0.2);
		transform: translate(0px, -20px) scaleY(0.2);
		opacity: 0;
		transform-origin: top center;
		-webkit-transform-origin: top center;
		-moz-transform-origin: top center;
		-o-transform-origin: top center;
		-ms-transform-origin: top center;
		-webkit-transition-property: opacity, -webkit-transform;
		transition-property: opacity, -webkit-transform;
		transition-property: transform, opacity;
		transition-property: transform, opacity, -webkit-transform;
	}

	[data-aos="move-scale-water"].aos-animate {
		-webkit-transform: translate(-100px, -120px) scaleY(1);
		transform: translate(-100px, -120px) scaleY(1);
		opacity: 1;
	}

	[data-aos="move-fire-down"] {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
		-webkit-transition-property:  -webkit-transform;
		transition-property: -webkit-transform;
		transition-property: transform;
		transition-property: transform, -webkit-transform;
	}

	[data-aos="move-fire-down"].aos-animate {
		-webkit-transform: translateY(100px);
		transform: translateY(100px);
	}

}

@media (min-width: 1600px) {

	[data-aos="move-scale-bucket-full"].aos-animate {
		-webkit-transform: translate(-200px, -210px) scale(0.5);
		transform: translate(-200px, -210px) scale(0.5);
		opacity: 0;
	}
	
	[data-aos="move-scale-bucket-empty"].aos-animate {
		-webkit-transform: translate(-200px, -210px) scale(0.5);
		transform: translate(-200px, -210px) scale(0.5);
	}

	[data-aos="move-scale-water"] {
		-webkit-transform: translate(0px, 0px) scale(0.5);
		transform: translate(0px, 0px) scale(0.5);
		opacity: 0;
		-webkit-transition-property:  opacity, -webkit-transform;
		transition-property: opacity, -webkit-transform;
		transition-property: transform, opacity;
		transition-property: transform, opacity, -webkit-transform;
	}

}