/* Major event styles 
 
 Id = $Id: major.css 5608 2018-06-15 15:25:14Z sschatz $
 URL = $URL: https://dev-wbm-svn.dev.uspto.gov/repos/live/static_content/trunk/10millionpatents/major.css $
 
*/

/* General settings */
body[data-aos-delay='3200'] [data-aos], [data-aos][data-aos][data-aos-delay='3200']{
	transition-delay: 3200ms;
}

body[data-aos-delay='3600'] [data-aos], [data-aos][data-aos][data-aos-delay='3600']{
	transition-delay: 3600ms;
}

body[data-aos-delay='4200'] [data-aos], [data-aos][data-aos][data-aos-delay='4200']{
	transition-delay: 4200ms;
}

body[data-aos-delay='4800'] [data-aos], [data-aos][data-aos][data-aos-delay='4800']{
	transition-delay: 4800ms;
}

body[data-aos-delay='5400'] [data-aos], [data-aos][data-aos][data-aos-delay='5400']{
	transition-delay: 5400ms;
}

.event-animation-switch {
	margin-top: 20px;
	margin-bottom: 20px;
}

.switch {
	text-align: center;
}

.switch>input:checked+label:before {
    background: #ffe5c4;
}

.switch>label:before {
	color: #870000;
}

.switch>label:after {
	background: #870000;
}

.animate>div, .animate>div>div {
	position: relative;
}

.animate {
	/*margin-top: 45px;*/
	overflow: hidden;
	width: 100%;
	/*height: 100%;*/
	height: 100vh;
	margin-top: -90px;
}

.event-node.major {
	width: 100%;
	background: url(images/Parchment_2000_small.jpg) repeat-y #ffe5c4;
	margin-top: 100px;
	margin-left: 0;
	padding-left: 0;
	height: 100vh;
	overflow: hidden;
}

.event-node.major:before {
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom, #5e0000, transparent);
	opacity: 0.3;
	height: 30px;
}

.event-node.major .top {
	background: url(images/P10M_MjA-TopScroll.png) no-repeat top right;
	height: 78px;
	/*width: 402px;*/
	width: 100%;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
	background-size: contain;
	top: 40px;
    /*top: 53px;
    left: 10px;*/
}

.event-node.major .event-date {
	font-size: 75px;
	margin-left: 15px;
	margin-top: -15px;
	color: #870000;
	max-width: 40%;
}

.event-node.major .event-desc {
	color: #5e0000;
	padding: 30px;
	line-height: 20px;
	/*margin-top: -835px;
	margin-top: -690px;*/
	text-align: left;
	font-weight: 600;
	
	position: absolute;
	top: 70px;
	
}

@media (min-width: 360px) {

	.event-node.major .event-desc {
		top: 85px;
	}
	
}


/* Large devices (desktops, 992px and up) */
@media (min-width: 768px) {
	
	.animate {
		margin-top: -189px;
		height: 450px;
	}
	
	.event-node.major {
		height: 450px;
		margin: 200px 0 0 0;
		padding: 0;
		overflow: visible;
	}
		
	.event-node.major .top, .event-node.major .bottom {
		display: block;
		z-index: 2;
	}

	.event-node.major .top {
		width: 370px;
		top: -42px;
		left: 50%;
		margin-left: -367px;
	}

	.event-node.major .bottom {
		background: url(images/P10M_MjA-BottomScroll.png) no-repeat top center;
		height: 78px;
		width: 370px;
		bottom: -49px;
		left: 50%;
		margin-left: 0;
	}
	
	.event-node.major .event-date, .event-node.major.right .event-date {
		left: 50%;
	}
	
	.event-node.major .event-date {
		font-size: 135px;
		margin-left: -310px;
		top: -143px;
		color: #ffe5c4;
		z-index: 20;
	}
	
	.event-node.major.right .event-date {
		margin-left: 40px;
	}
	
	.event-node.major .top, .event-node.major .bottom {
		-moz-transform: scaleX(1);
		-o-transform: scaleX(1);
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
	
	.event-node.major.right .top, .event-node.major.right .bottom {
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
		filter: FlipH;
		-ms-filter: "FlipH";
	}
	
	.event-node.major.right .top {
		margin-left: -3px;
	}

	.event-node.major.right .bottom {
		margin-left: -371px;
	}
	
	.event-node.major .event-desc {
		position: relative;
		margin-top: -450px;
		width: 40%;
		padding: 80px 0;
		font-size: 18px;
		line-height: 24px;
		padding-left: 30px;
		top: 0;
		margin-left: 0;
	}
	
}

@media (min-width: 992px) {

	.event-animation-switch {
		margin-left: 450px;
	}
	
	.event-node.major {
		margin: 300px 0 0 0;
	}
	
	.event-node.major .top {
		width: 402px;
		margin-left: -400px;
	}

	.event-node.major .bottom {
		width: 404px;
	}
	
	.event-node.major.right .bottom {
		margin-left: -403px;
	}

}

@media (min-width: 1600px) {
	.event-node.major {
		height: 600px;
	}
	
	.event-node.major .event-desc {
		margin-top: -600px;
		font-size: 22px;
		line-height: 28px;
	}

	.animate {
		height: 600px;
	}
	
}


/* First Patent Board */

#event-first-patent-board {
	margin-top: 4px;
}

.patent-board-left, .patent-board-right, .patent-board-color {
	width: 100%;
	height: 100%;
}

 .patent-board-right, .patent-board-color {
	margin-top: -100vh;
}

.patent-board-left {
	z-index: 2;
}

.patent-board-right {
	z-index: 1;
}

.patent-board-color {
	z-index: 3;
}

#event-first-patent-board .event-desc {
	z-index: 4;
}

@media only screen and (orientation: portrait) {
	
	.patent-board-left {
		background: url(images/timeline/patent-board/mobile/left.png) bottom center no-repeat;
		background-size: cover;
	}

	.patent-board-right {
		background: url(images/timeline/patent-board/mobile/bottom.png) bottom center no-repeat;
		background-size: cover;
	}

	.patent-board-color {
		background: url(images/timeline/patent-board/mobile/color.png) bottom center no-repeat;
		background-size: cover;
	}
	
}

@media (min-width: 400px) {
	
	#event-first-patent-board .event-desc {
		top: 85px;
	}
	
}

@media (min-width: 768px) {

	.patent-board-left {
		background: url(images/timeline/patent-board/left.png) center no-repeat;
		background-size: contain;
	}

	.patent-board-right {
		background: url(images/timeline/patent-board/right.png) center no-repeat;
		background-size: contain;
	}

	.patent-board-color {
		background: url(images/timeline/patent-board/color.png) center no-repeat;
		background-size: contain;
	}
	
	#event-first-patent-board {
		margin-top: 200px;
	}
	
	#event-first-patent-board .animate {
		margin-top: -188px;
	}
	
	.patent-board-left, .patent-board-right, .patent-board-color {
		height: 450px;
		left: 100%;
	}

	.patent-board-left {
		width: 494px;
		margin-left: -735px;
	}

	.patent-board-right {
		width: 371px;
		margin-top: -451px;
		margin-left: -371px;
	}

	.patent-board-color {
		width: 569px;
		margin-top: -450px;
		margin-left: -574px;
	}
	
	#event-first-patent-board .event-desc {
		width: 380px;
		margin-top: -510px;
		font-size: 14px;
		top: 0px;
	}
	
}

@media (min-width: 992px) {
	
	#event-first-patent-board .event-desc {
		width: 440px;
		margin-top: -495px;
		margin-left: 60px;
		font-size: 16px;
	}
	
}

@media (min-width: 1200px) {
	
	#event-first-patent-board .event-desc {
		width: 40%;
		margin-top: -480px;
		font-size: 18px;
	}
	
}

@media (min-width: 1600px) {

	.patent-board-left, .patent-board-right, .patent-board-color {
		height: 600px;
	}
	
	.patent-board-left {
		width: 658px;
		margin-left: -1039px;
	}

	.patent-board-right {
		width: 495px;
		margin-top: -601px;
		margin-left: -556px;
	}

	.patent-board-color {
		width: 759px;
		margin-top: -600px;
		margin-left: -825px;
	}
	
	#event-first-patent-board .event-desc {
		margin-top: -585px;
		font-size: 22px;
	}
	
}

/* Burning of Washington DC */

.building, .soldiers, .fire {
	width: 100%;
	height: 100%;
}

 .soldiers, .fire {
	margin-top: -100vh;
}

.building {
	margin-top: 1px;
	z-index: 1;
}

.soldiers {
	z-index: 2;
}

.fire {
	width: 120%;
	z-index: 3;
}

@media only screen and (orientation: portrait) {
	.building {
		background: url(images/timeline/fire-dc/mobile/building.png) no-repeat bottom right;
		background-size: contain;
	}

	.soldiers {
		background: url(images/timeline/fire-dc/mobile/soldiers.png) no-repeat bottom left;
		background-size: contain;
	}

	.fire {
		background: url(images/timeline/fire-dc/mobile/fire.png) no-repeat bottom left;
		background-size: contain;
	}
}

@media (min-width: 768px) {

	#event-burn-first.event-node.major .event-desc {
		margin-left: 40px;
		margin-top: -495px;
		width: 50%;
		z-index: 5;
	}

	.building {
		width: 684px;
		height: 353px;
		left: 100%;
		margin-left: -230px;
		margin-top: 70px;
		background: url(images/timeline/fire-dc/patent-building.png) no-repeat top left;
		background-size: contain;
		z-index: 3;
	}

	.officers {
		width: 497px;
		height: 373px;
		left: 100%;
		margin-top: -296px;
		margin-left: -570px;
		background: url(images/timeline/fire-dc/officers.png) no-repeat top left;
		background-size: contain;
		z-index: 4;
	}

	.soldiers {
		width: 534px;
		height: 296px;
		left: 0%;
		margin-top: -350px;
		margin-left: -105px;
		background: url(images/timeline/fire-dc/soliders.png) no-repeat top left;
		background-size: contain;
		z-index: 1;
	}

	.fire {
		width: 748px;
		height: 200px;
		left: 100%;
		margin-top: -148px;
		margin-left: -1100px;
		background: url(images/timeline/fire-dc/fire.png) no-repeat top left;
		background-size: contain;
		z-index: 2;
	}
	
}

@media (min-width: 992px) {

	#event-burn-first.event-node.major .event-desc {
		margin-left: 12%;
		width: 35%;
	}

	.building {
		width: 684px;
		height: 353px;
		margin-left: -230px;
		margin-top: 70px;
	}

	.officers {
		width: 497px;
		height: 373px;
		margin-top: -331px;
		margin-left: -570px;
	}

	.soldiers {
		width: 534px;
		height: 296px;
		margin-top: -350px;
		margin-left: -105px;
	}

	.fire {
		width: 748px;
		height: 200px;
		margin-top: -148px;
		margin-left: -1250px;
	}
	
}

@media (min-width:1200px) {

	#event-burn-first.event-node.major .event-desc {
		margin-top: -470px;
	}
	
	.building {
		margin-left: -303px;
		margin-top: 70px;
	}

	.officers {
		margin-top: -331px;
		margin-left: -660px;
	}
	
	.soldiers {
		margin-top: -350px;
		margin-left: -35px;
	}
	
	.fire {
		width: 1047px;
		height: 280px;
		margin-top: -210px;
		margin-left: -1640px;
	}
	
}

@media (min-width: 1600px) {

	#event-burn-first.event-node.major .event-desc {
		/*margin-left: 15%;*/
		width: 35%;
		/*margin-top: -640px;*/
		margin-left: 12%;
		margin-top: -595px;
	}

	.building {
		width: 957px;
		height: 494px;
		margin-left: -428px;
		margin-top: 70px;
	}

	.officers {
		width: 696px;
		height: 522px;
		margin-top: -467px;
		margin-left: -960px;
	}

	.soldiers {
		width: 747px;
		height: 414px;
		margin-top: -480px;
		margin-left: -90px;
	}

	.fire {
		margin-left: -1910px;
	}
	
}

/* Patent office burns */

.patent-building, .patent-fire {
	width: 100%;
	height: 100%;
}

.patent-fire {
	margin-top: -100vh;
}

.patent-building {
	margin-top: 2px;
	z-index: 2;
}

.patent-fire {
	z-index: 3;
}

@media only screen and (orientation: portrait) {

	.patent-building {
		background: url(images/timeline/fire-dc/mobile/hotel.png) no-repeat top center;
		background-size: cover;
	}

	.patent-fire {
		background: url(images/timeline/fire-dc/mobile/fire-bottom.png) no-repeat bottom center;
		background-size: cover;
	}
}

@media (min-width: 768px) {
	
	#event-burn-second .event-desc {
		margin-left: 10%;
		margin-top: -500px;
		width: 80%;
		text-align: center;
	}

	.patent-building {
		width: 684px;
		height: 353px;
		left: 50%;
		margin-left: -335px;
		margin-top: 120px;
		background: url(images/timeline/fire-dc/patent-building.png) no-repeat top left;
		background-size: contain;
	}
	
	.patent-fire {
		width: 1200px;
		height: 204px;
		margin-top: -204px;
		background: url(images/timeline/fire-bucket/fire.png) no-repeat top left;
		background-size: cover;
	}
	
}

@media (min-width: 1200px) {

	#event-burn-second .event-desc {
		margin-left: 20%;
		margin-top: -500px;
		width: 60%;
	}
	
	.patent-fire {
		width: 2400px;
		height: 408px;
		margin-top: -306px;
	}
	
}

@media (min-width: 1600px) {

	#event-burn-second.event-node.major .event-desc {
		margin-left: 20%;
		width: 60%;
		margin-top: -625px;
	}

	.patent-building {
		width: 889px;
		height: 459px;
		margin-left: -450px;
		margin-top: 143px;
	}
	
	.patent-fire {
		margin-top: -408px;
	}
	
}

/* Telegraph */
.telegraph-hinge {
	z-index: 2;
	margin-top: 200px;
	left: 0;
	width: 401px;
	height: 109px;
}

.telegraph-base {
	left: 0;
	width: 414px;
	height: 736px;
	margin-top: -532px;
}

.morse-p, .morse-a, .morse-t, .morse-e, .morse-n, .morse-t-last {
	height: 28px;
	margin-top: -28px;
}

.morse-p {
	margin-top: -25px;
	margin-left: 25px;
	width: 92px;
}

.morse-a {
	width: 56px;
	margin-left: 117px;
}

.morse-t {
	width: 45px;
	margin-left: 173px;
}

.morse-e {
	width: 38px;
	margin-left: 218px;
}

.morse-n {
	width: 58px;
	margin-left: 256px;
}

.morse-t-last {
	width: 20px;
	margin-left: 314px;
}

@media only screen and (orientation: portrait) {
	.telegraph-hinge {
		background: url(images/timeline/telegraph/mobile/telegraph-top.png) left center no-repeat;
	}

	.telegraph-base {
		background: url(images/timeline/telegraph/mobile/telegraph-base.png) left center no-repeat;
	}
	.morse-p {
		background: url(images/timeline/telegraph/mobile/morse-p.png) left center no-repeat;
		background-size: contain;
	}

	.morse-a {
		background: url(images/timeline/telegraph/mobile/morse-a.png) center no-repeat;
		background-size: contain;
	}

	.morse-t {
		background: url(images/timeline/telegraph/mobile/morse-t.png) center no-repeat;
		background-size: contain;
	}

	.morse-e {
		background: url(images/timeline/telegraph/mobile/morse-e.png) center no-repeat;
		background-size: contain;
	}

	.morse-n {
		background: url(images/timeline/telegraph/mobile/morse-n.png) center no-repeat;
		background-size: contain;
	}

	.morse-t-last {
		background: url(images/timeline/telegraph/mobile/morse-t-last.png) center no-repeat;
		background-size: contain;
	}
}

@media (min-width: 768px) {

	.telegraph-hinge, .telegraph-base, .morse-p, .morse-a, .morse-t, .morse-e, .morse-n, .morse-t-last {
		left: 50%;
	}

	#event-telegraph.event-node.major .event-desc {
		width: 90%;
		text-align: center;
		margin-top: -480px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.telegraph-hinge {
		background: url(images/timeline/telegraph/telegraph-top.png) center no-repeat;
		background-size: contain;
		z-index: 2;
		margin-top: 175px;
		margin-left: -320px;
		width: 316px;
		height: 74px;
	}

	.telegraph-base {
		background: url(images/timeline/telegraph/telegraph-base.png) center no-repeat;
		background-size: contain;
		margin-top: -15px;
		margin-left: -381px;
		width: 420px;
		height: 155px;
	}
	
	.morse-p, .morse-a, .morse-t, .morse-e, .morse-n, .morse-t-last {
		/*height: 24px;
		margin-top: -24px;*/
		height: 30px;
		margin-top: -30px;
	}

	.morse-p {
		background: url(images/timeline/telegraph/morse-p.png) center no-repeat;
		background-size: contain;
		margin-top: -160px;
	}

	.morse-a {
		background: url(images/timeline/telegraph/morse-a.png) center no-repeat;
		background-size: contain;
	}

	.morse-t {
		background: url(images/timeline/telegraph/morse-t.png) center no-repeat;
		background-size: contain;
	}

	.morse-e {
		background: url(images/timeline/telegraph/morse-e.png) center no-repeat;
		background-size: contain;
	}

	.morse-n {
		background: url(images/timeline/telegraph/morse-n.png) center no-repeat;
		background-size: contain;
	}

	.morse-t-last {
		background: url(images/timeline/telegraph/morse-t-last.png) center no-repeat;
		background-size: contain;
	}
	
}

@media (min-width: 992px) {
	
	.telegraph-hinge {
		margin-top: 150px;
		margin-left: -430px;
		width: 395px;
		height: 92px;
	}

	.telegraph-base {
		margin-top: -20px;
		margin-left: -507px;
		width: 525px;
		height: 194px;
	}
	
	.morse-p, .morse-a, .morse-t, .morse-e, .morse-n, .morse-t-last {
		/*height: 10px;
		margin-top: -10px;*/
		/*height: 34px;
		margin-top: -34px;*/
		height: 43px;
		margin-top: -43px;
	}

	.morse-p {
		margin-top: -194px;
		width: 131px;
	}

	.morse-a {
		width: 80px;
		margin-left: 131px;
	}

	.morse-t {
		width: 64px;
		margin-left: 211px;
	}

	.morse-e {
		width: 54px;
		margin-left: 275px;
	}

	.morse-n {
		width: 82px;
		margin-left: 329px;
	}

	.morse-t-last {
		width: 28px;
		margin-left: 411px;
	}
	
}

@media (min-width: 1200px) {
	
	.morse-p, .morse-a, .morse-t, .morse-e, .morse-n, .morse-t-last {
		/*height: 13px;
		margin-top: -13px;*/
		/*height: 43px;
		margin-top: -43px;*/
		height: 54px;
		margin-top: -54px;
	}
	
	.morse-p {
		margin-top: -200px;
		width: 164px;
	}

	.morse-a {
		width: 101px;
		margin-left: 164px;
	}

	.morse-t {
		width: 80px;
		margin-left: 265px;
	}

	.morse-e {
		width: 68px;
		margin-left: 345px;
	}

	.morse-n {
		width: 103px;
		margin-left: 413px;
	}
	
	.morse-t-last {
		width: 35px;
		margin-left: 516px;
	}
}

@media (min-width: 1600px) {

	#event-telegraph.event-node.major .event-desc {
		margin-top: -600px;
	}
	
	.telegraph-hinge {
		margin-top: 200px;
		margin-left: -526px;
		width: 526px;
		height: 123px;
	}

	.telegraph-base {
		margin-top: -26px;
		margin-left: -627px;
		width: 700px;
		height: 258px;
	}

	.morse-p, .morse-a, .morse-t, .morse-e, .morse-n, .morse-t-last {
		/*height: 17px;
		margin-top: -17px;*/
		/*height: 56px;
		margin-top: -56px;*/
		height: 70px;
		margin-top: -70px;
	}

	.morse-p {
		margin-top: -290px;
		width: 218px;
	}

	.morse-a {
		width: 134px;
		margin-left: 218px;
	}

	.morse-t {
		width: 106px;
		margin-left: 352px;
	}

	.morse-e {
		width: 90px;
		margin-left: 458px;
	}

	.morse-n {
		width: 137px;
		margin-left: 548px;
	}

	.morse-t-last {
		width: 46px;
		margin-left: 685px;
	}

}

/* Train/McCoy */
.train {
	width: 995px;
	height: 394px;
	margin-top: 215px;
	left: 50%;
	z-index: 1;
}

.tracks {
	width: 995px;
	height: 27px;
}

@media only screen and (orientation: portrait) {
	.train {
		background: url(images/timeline/mccoy/mobile/train.png) no-repeat bottom center;
		background-size: contain;
	}

	.tracks {
		background: url(images/timeline/mccoy/mobile/tracks.png) no-repeat top center;
		background-size: contain;
	}
}
#event-mccoy .event-desc {
	z-index: 5;
}

@media (min-width: 768px) {

	#event-mccoy .event-desc {
		margin-top: -500px;
		width: 70%;
		font-size: 16px;
		padding-right: 30px;
		text-align: left;
	}
	
	.train {
		width: 772px;
		height: 214px;
		margin-top: 230px;
		background: url(images/timeline/mccoy/train.png) no-repeat top center;
		background-size: contain;
	}
	
	.tracks {
		width: 1200px;
		height: 22px;
		margin-top: -17px;
		background: url(images/timeline/mccoy/tracks.png) no-repeat top center;
		background-size: contain;
	}
	
	.smoke-small {
		width: 47px;
		height: 44px;
		margin-top: -260px;
		margin-left: 97px;
		left: 50%;
		background: url(images/timeline/mccoy/smoke-1.png) no-repeat top center;
		background-size: contain;
		z-index: 4;
	}
	
	.smoke-medium {
		width: 141px;
		height: 113px;
		margin-top: -77px;
		margin-left: 124px;
		left: 50%;
		background: url(images/timeline/mccoy/smoke-2.png) no-repeat top center;
		background-size: contain;
		z-index: 3;
	}
	
	.smoke-large {
		width: 214px;
		height: 98px;
		margin-top: -155px;
		margin-left: 235px;
		left: 50%;
		background: url(images/timeline/mccoy/smoke-3.png) no-repeat top center;
		background-size: contain;
		z-index: 2;
	}
	
	.mccoy-signature {
		width: 239px;
		height: 185px;
		margin-top: -170px;
		margin-left: 163px;
		left: 50%;
		background: url(images/timeline/mccoy/mccoy-signature.png) no-repeat top center;
		background-size: contain;
		z-index: 2;
	}
}

@media (min-width: 992px) {

	#event-mccoy .event-desc {
		margin-top: -480px;
		width: 60%;
		padding-left: 100px;
		padding-right: 0;
		font-size: 18px;
	}
	
}

@media (min-width: 1200px) {
	
	.train {
		margin-top: 223px;
	}
	
	.tracks {
		width: 1600px;
		height: 30px;
	}
	
	.smoke-small {
		margin-top: -268px;
	}
	
	.smoke-medium {
		margin-top: -77px;
	}
	
	.smoke-large {
		margin-top: -155px;
	}
	
}

@media (min-width: 1600px) {
	#event-mccoy .event-desc {
		margin-top: -600px;
		padding-left: 200px;
		font-size: 22px;
	}
	
	.train {
		width: 1157px;
		height: 320px;
		margin-top: 223px;
	}
	
	.tracks {
		width: 2400px;
		height: 44px;
		margin-top: -25px;
	}
	.smoke-small {
		width: 71px;
		height: 66px;
		margin-top: -401px;
		margin-left: 149px;
	}
	
	.smoke-medium {
		width: 211px;
		height: 95px;
		margin-top: -117px;
		margin-left: 198px;
	}
	
	.smoke-large {
		width: 321px;
		height: 146px;
		margin-top: -166px;
		margin-left: 360px;
	}
	
	.mccoy-signature {
		width: 318px;
		height: 246px;
		margin-top: -155px;
		margin-left: 235px;
	}
}

/* Brewing */

@media only screen 
  and (min-device-width: 320px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	.casks {
		width: 318px;
		height:397px;
		left: 50%;
		margin-left: -159px;
		margin-top: 98px;
		background: url(images/timeline/pasteur/mobile/casks.png) no-repeat top center;
		background-size: contain;
		z-index: 1;
	}

	.glass {
		width: 86px;
		height: 100px;
		background: url(images/timeline/pasteur/mobile/glass.png) no-repeat top center;
		background-size: contain;
		left: 50%;
		z-index: 4;
		margin-top: -72px;
	}

	.beer {
		width: 56px;
		height: 59px;
		background: url(images/timeline/pasteur/mobile/beer.png) no-repeat top center;
		background-size: contain;
		left: 50%;
		z-index: 3;
		margin-top: -61px;
	}

	.stream {
		width: 7px;
		height: 130px;
		background: url(images/timeline/pasteur/mobile/stream.png) no-repeat top center;
		background-size: contain;
		left: 50%;
		z-index: 2;
		margin-top: -107px;
	}

	.glass.left {
		margin-left: -40px;
		/*margin-top: -33px;*/
		margin-top: -46px;
	}

	.beer.left {
		margin-left: -35px;
		margin-top: -73px;
	}

	.stream.left {
		margin-left: -7px;
		margin-top: -135px;
	}

	.glass.center, .beer.center, .stream.center, .glass.right, .beer.right, .stream.right {
		display: none;
	}
}

@media only screen 
  and (min-device-width: 375px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
	.casks {
		width: 375px;
		height: 467px;
		left: 50%;
		margin-left: -187px;
		margin-top: 120px;
	}
}

@media only screen 
  and (min-device-width: 414px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

	.casks {
		width: 413px;
		height: 515px;
		margin-left: -206px;
		margin-top: 100px;
		background-size: auto;
	}

	.glass {
		width: 111px;
		height: 130px;
		background-size: auto;
	}

	.beer {
		width: 72px;
		height: 76px;
		background-size: auto;
	}

	.stream {
		width: 9px;
		height: 168px;
		background-size: auto;
	}

	.glass.left {
		margin-left: -48px;
		margin-top: -30px;
	}

	.beer.left {
		margin-left: -41px;
		margin-top: -95px;
	}

	.stream.left {
		margin-left: -8px;
		margin-top: -186px;
	}
}

@media (min-width: 768px) {
	
	#event-brew .event-desc {
		margin-top: -390px;
		width: 40%;
		margin-left: 5%;
	}
	
	#event-brew .animate {
		width: 100%;
		padding-left: 42%;
		position: relative;
	}
	
	.casks {
		width: 692px;
		height: 338px;
		left: 0;
		margin-left: 0;
		margin-top: 0;
		background: url(images/timeline/pasteur/casks.png) no-repeat top center;
		background-size: contain;
		z-index: 1;
	}
	
	.glass {
		width: 71px;
		height: 83px;
		margin-top: -70px;
		background: url(images/timeline/pasteur/glass.png) no-repeat top center;
		background-size: contain;
		z-index: 4;
	}
	
	.beer {
		width: 46px;
		height: 49px;
		margin-top: -61px;
		background: url(images/timeline/pasteur/beer.png) no-repeat top center;
		background-size: contain;
		z-index: 3;
	}
	
	.stream {
		width: 6px;
		height: 107px;
		margin-top: -109px;
		background: url(images/timeline/pasteur/stream.png) no-repeat top center;
		background-size: contain;
		z-index: 2;
	}
	
	.pasteur-signature {
		width: 272px;
		height: 135px;
		background: url(images/timeline/pasteur/pasteur-signature.png) no-repeat top center;
		background-size: contain;
		z-index: 2;
		margin-top: -185px;
		margin-left: -360px;
		left: 50%;
		position: relative;
	}
	
	.glass.center, .beer.center, .stream.center, .glass.right, .beer.right, .stream.right {
		display: block;
	}
	
	.glass.left {
		margin-left: 128px;
		margin-top: -35px;
		left: 0;
	}
	
	.beer.left {
		margin-left: 132px;
		left: 0;
	}
	
	.stream.left {
		margin-left: 153px;
		left: 0;
	}
	
	.glass.center {
		margin-left: 328px;
	}
	
	.beer.center {
		margin-left: 332px;
	}
	
	.stream.center {
		margin-left: 354px;
	}
	
	.glass.right {
		margin-left: 539px;
	}
	
	.beer.right {
		margin-left: 543px;
	}
	
	.stream.right {
		margin-left: 564px;
	}
	
}

@media (min-width: 992px) {
	
	#event-brew .event-desc {
		width: 32%;
		margin-left: 3%;
	}
	
	#event-brew .animate {
		width: 692px;
		left: 50%;
		margin-left: -198px;
		padding: 0;
	}
	
	.pasteur-signature {
		margin-left: -405px;
	}
}

@media (min-width: 1200px) {
	
	#event-brew .event-desc {
		width: 35%;
		margin-left: 5%;
	}
	
	#event-brew .animate {
		margin-left: -95px;
	}
	
}

@media (min-width: 1600px) {
	
	#event-brew .event-desc {
		width: 30%;
		margin-top: -445px;
	}
	
	#event-brew .animate {
		width: 1038px;
		margin-left: -238px;
	}
	
	.casks {
		width: 1038px;
		height: 473px;
	}
	
	.glass {
		width: 99px;
		height: 116px;
		margin-top: -98px;
	}
	
	.beer {
		width: 64px;
		height: 68px;
		margin-top: -85px;
	}
	
	.stream {
		width: 8px;
		height: 150px;
		margin-top: -152px;
	}
	
	.glass.left {
		margin-left: 212px;
		margin-top: -46px;
	}
	
	.beer.left {
		margin-left: 218px;
	}
	
	.stream.left {
		margin-left: 249px;
	}
	
	.glass.center {
		margin-left: 493px;
	}
	
	.beer.center {
		margin-left: 499px;
	}
	
	.stream.center {
		margin-left: 531px;
	}
	
	.glass.right {
		margin-left: 790px;
	}
	
	.beer.right {
		margin-left: 796px;
	}
	
	.stream.right {
		margin-left: 825px;
	}
	
}

/* Light bulb */
.bulb {
	width: 214px;
	height: 450px;
	margin: 160px auto 0 auto;
	z-index: 2;
}

.light-glow {
	width: 380px;
	height: 333px;
	margin: -450px auto 0 auto;
}

.light-filament {
	width: 214px;
	height: 450px;
	margin: -333px auto 0 auto;
}

.edison-signature {
	width: 144px;
	height: 124px;
	margin-top: -155px;
}

@media only screen and (orientation: portrait) {
	.bulb {
		background: url(images/timeline/edison/light_bulb.png) center top no-repeat;
		background-size: contain;
	}

	.light-glow {
		background: url(images/timeline/edison/glow.png) center no-repeat;
		background-size: contain;
	}

	.light-filament {
		background: url(images/timeline/edison/filament.png) center top no-repeat;
		background-size: contain;
	}

	.edison-signature {
		background: url(images/timeline/edison/edison-signature.png) center no-repeat;
		background-size: contain;
	}
}

@media (min-width: 768px) {
	.bulb {
		background: url(images/timeline/edison/light_bulb.png) center top no-repeat;
		background-size: contain;
		margin: 0 auto;
	}

	.light-glow {
		background: url(images/timeline/edison/glow.png) center no-repeat;
		background-size: contain;
	}

	.light-filament {
		background: url(images/timeline/edison/filament.png) center top no-repeat;
		background-size: contain;
	}

	.edison-signature {
		background: url(images/timeline/edison/edison-signature.png) center no-repeat;
		background-size: contain;
		width: 181px;
		margin-left: -300px;
		left: 50%;
	}
	
	#event-light-bulb .event-desc {
		left: 50%;
		width: 35%;
		margin-top: -285px;
		margin-left: 105px;
	}
}

@media (min-width: 992px) {

	#event-light-bulb .event-desc {
		margin-top: -240px;
		margin-left: 120px;
	}
}

@media (min-width: 1600px) {

	.bulb {
		width: 286px;
		height: 600px;
	}

	.light-glow {
		width: 506px;
		height: 445px;
		margin-top: -600px;
	}

	.light-filament {
		width: 286px;
		height: 600px;
		margin-top: -445px;
	}

	.edison-signature {
		width: 302px;
		height: 206px;
		margin-top: -215px;
		margin-left: -400px;
	}

	#event-light-bulb .event-desc {
		width: 26%;
		margin-top: -275px;
	}
	
}

/* Flying Machine */

.plane {
	width: 75%;
	height: 100vh;
	z-index: 3;
}

.wright-signature {
	width: 163px;
	height: 96px;
	z-index: 4;
	margin-top: -116px;
	margin-left: 15px;
}

#event-flying-machine .event-desc {
	top: 95px;
	z-index: 2;
}

@media only screen and (orientation: portrait) {
	#event-flying-machine {
		background: #ffe5c4 url(images/timeline/wright/mobile/wright-bg.png) bottom right no-repeat;
		background-size: cover;
	}

	.plane {
		background: url(images/timeline/wright/mobile/plane.png) center no-repeat;
		background-size: contain;
	}

	.wright-signature {
		background: url(images/timeline/wright/wright-signature.png) center no-repeat;
		background-size: contain;
	}
}

@media (min-width: 768px) {

	#event-flying-machine {
		background: #ffe5c4 url(images/timeline/wright/wright-bg.png) center right no-repeat;
		background-size: cover;
	}
	
	.wright {
		margin-top: -372px;
		overflow: hidden;
		width: 100%;
		height: 450px;
	}

	.plane {
		width: 564px;
		height: 160px;
		background: url(images/timeline/wright/plane.png) center no-repeat;
		background-size: contain;
		z-index: 3;
		margin-top: 175px;
		left: 50%;
		margin-left: -380px;
	}
	
	.wright-signature {
		width: 163px;
		height: 96px;
		background: url(images/timeline/wright/wright-signature.png) center no-repeat;
		background-size: contain;
		margin-left: 125px;
		margin-top: 0px;
	}
	
	#event-flying-machine .event-desc {
		width: 50%;
		top: 0;
		margin-top: -475px;
	}
	
}

@media (min-width: 992px) {

	.plane {
		width: 671px;
		height: 191px;
		margin-top: 145px;
	}
	
	.wright-signature {
		width: 182px;
		height: 106px;
		margin-top: -50px;
		margin-left: 25px;
	}
	
	#event-flying-machine .event-desc {
		margin-top: -435px;
	}
	
}

@media (min-width: 1200px) {

	.plane {
		margin-left: -300px;
	}
	
	.wright-signature {
		margin-top: -45px;
		margin-left: 105px;
	}
	
	#event-flying-machine .event-desc {
		width: 40%;
		top: 40px;
		padding-left: 40px;
	}
	
}

@media (min-width: 1600px) {

	.wright {
		margin-top: -520px;
		height: 600px;
	}
	
	.plane {
		width: 939px;
		height: 267px;
		margin-left: -480px;
	}
	
	.wright-signature {
		width: 273px;
		height: 159px;
		margin-top: -27px;
	}
	
	
	#event-flying-machine .event-desc {
		margin-top: -565px;
		margin-left: 80px;
	}
	
}

/* Plant */
.plant {
	width: 100%;
	height: 100vh;
	margin-top: 1px;
}

.leaves {
	width: 100%;
	height: 100vh;
	margin-top: -100vh;
}

.bud-1 {
	width: 100%;
	height: 100vh;
	margin-top: -100vh;
}

@media only screen and (orientation: portrait) {
	.plant {
		background: url(images/timeline/plant/mobile/branch.png) center bottom no-repeat;
		background-size: contain;
	}

	.leaves {
		background: url(images/timeline/plant/mobile/color.png) center bottom no-repeat;
		background-size: contain;
	}

	.bud-1 {
		background: url(images/timeline/plant/mobile/blooms.png) center bottom no-repeat;
		background-size: contain;
	}
}

@media (min-width: 768px) {
	
	#event-rose .animate {
		margin-top: -189px;
		height: 450px;
		width: 100%;
		overflow: hidden;
	}
	
	.plant, .leaves, .bud-1, .bud-2, .bud-3, .bud-4, .bud-5, .rosenberg-signature {
		left: 100%;
	}

	.plant {
		width: 613px;
		height: 450px;
		margin-left: -590px;
		background: url(images/timeline/plant/branch.png) center no-repeat;
		background-size: contain;
	}

	.leaves {
		margin-top: -450px;
		width: 613px;
		height: 450px;
		margin-left: -590px;
		background: url(images/timeline/plant/color.png) center no-repeat;
		background-size: contain;
	}
	
	.bud-1 {
		margin-top: -420px;
		margin-left: -276px;
		width: 89px;
		height: 71px;
		background: url(images/timeline/plant/smallrose.png) center no-repeat;
		background-size: 60%;
	}

	.bud-2 {
		margin-left: -140px;
		width: 169px;
		height: 172px;
		background: url(images/timeline/plant/rightrose.png) center no-repeat;
		background-size: 60%;
	}

	.bud-3 {
		margin-top: 10px;
		margin-left: -230px;
		width: 194px;
		height: 196px;
		background: url(images/timeline/plant/bottomrose.png) center no-repeat;
		background-size: 50%;
	}

	.bud-4 {
		margin-top: -432px;
		margin-left: -567px;
		width: 83px;
		height: 92px;
		background: url(images/timeline/plant/smallrose-left.png) center no-repeat;
		background-size: 60%;
	}

	.bud-5 {
		margin-top: -55px;
		margin-left: -480px;
		width: 170px;
		height: 172px;
		background: url(images/timeline/plant/leftrose.png) center no-repeat;
		background-size: 70%;
	}

	.rosenberg-signature {
		margin-top: 60px;
		margin-left: -550px;
		width: 181px;
		height: 106px;
		background: url(images/timeline/plant/8-Signature-Plant.png) center no-repeat;
		background-size: contain;
	}

	#event-rose .event-desc {
		width: 35%;
		margin-top: -400px;
	}

}

@media (min-width: 992px) {

	.plant {
		margin-left: -750px;
	}

	.leaves {
		margin-left: -750px;
	}
	
	.bud-1 {
		margin-left: -436px;
	}

	.bud-2 {
		margin-left: -300px;
	}

	.bud-3 {
		margin-left: -390px;
	}

	.bud-4 {
		margin-left: -727px;
	}

	.bud-5 {
		margin-left: -640px;
	}

	.rosenberg-signature {
		margin-left: -750px;
	}

	#event-rose .event-desc {
		margin-top: -375px;
	}

}

@media (min-width: 1200px) {
	#event-rose .event-desc {
		width: 30%;
		margin-left: 15%;
	}
}

@media (min-width: 1600px) {

	#event-rose .animate {
		height: 600px;
	}

	.plant {
		width: 821px;
		height: 600px;
		margin-left: -1050px;
	}

	.leaves {
		width: 821px;
		height: 600px;
		margin-top: -600px;
		margin-left: -1050px;
	}

	.bud-1 {
		margin-top: -550px;
		margin-left: -613px;
		width: 89px;
		height: 71px;
		background-size: 80%;
	}

	.bud-2 {
		margin-top: 20px;
		margin-left: -410px;
		width: 169px;
		height: 172px;
		background-size: 80%;
	}

	.bud-3 {
		margin-top: 110px;
		margin-left: -550px;
		width: 194px;
		height: 196px;
		background-size: 70%;
	}

	.bud-4 {
		margin-top: -545px;
		margin-left: -1010px;
		width: 83px;
		height: 92px;
		background-size: 80%;
	}

	.bud-5 {
		margin-top: -35px;
		margin-left: -840px;
		width: 170px;
		height: 172px;
		background-size: 80%;
	}

	.rosenberg-signature {
		margin-top: 95px;
		margin-left: -1050px;
		width: 243px;
		height: 142px;
	}
	
	#event-rose .event-desc {
		width: 30%;
		margin-left: 15%;
		margin-top: -450px;
	}

}

/* Slinky */
.slinky-top {
	width: 100%;
	height: 100vh;
}

.slinky-left-extended, .slinky-left-contracted, .slinky-right-extended, .slinky-right-contracted {
	width: 100%;
	height: 100vh;
	margin-top: -100vh;
}

.slinky-left-contracted {
	opacity: 0;
}

.slinky-right-extended {
	opacity: 0;
}

@media only screen and (orientation: portrait) {
	.slinky-top {
		background: url(images/timeline/slinky/mobile/slinky-top.png) center no-repeat;
		background-size: cover;
	}

	.slinky-left-extended {
		background: url(images/timeline/slinky/mobile/left-extended.png) center no-repeat;
		background-size: cover;
	}

	.slinky-left-contracted {
		background: url(images/timeline/slinky/mobile/left-contracted.png) center no-repeat;
		background-size: cover;
	}

	.slinky-right-extended {
		background: url(images/timeline/slinky/mobile/right-extended.png) center no-repeat;
		background-size: cover;
	}

	.slinky-right-contracted {
		background: url(images/timeline/slinky/mobile/right-contracted.png) center no-repeat;
		background-size: cover;
	}
}

@media (min-width: 768px) {
	
	#event-slinky .animate {
		margin-top: -150px;
	}
	 
	.slinky-top, .slinky-left-extended, .slinky-left-contracted, .slinky-right-extended, .slinky-right-contracted {
		left: 50%;
	}

	.slinky-left-extended, .slinky-left-contracted, .slinky-right-extended, .slinky-right-contracted {
		width: 461px;
		height: 362px;
		margin-top: -362px;
		margin-left: -90px;
	}

	.slinky-top {
		width: 425px;
		height: 183px;
		margin-left: -60px;
		background: url(images/timeline/slinky/slinky-top.png) center no-repeat;
		background-size: contain;
	}

	.slinky-left-extended {
		margin-top: -188px;
		background: url(images/timeline/slinky/left-extended.png) center no-repeat;
		background-size: contain;
	}

	.slinky-left-contracted {
		background: url(images/timeline/slinky/left-contracted.png) center no-repeat;
		background-size: contain;
	}

	.slinky-right-extended {
		background: url(images/timeline/slinky/right-extended.png) center no-repeat;
		background-size: contain;
	}

	.slinky-right-contracted {
		background: url(images/timeline/slinky/right-contracted.png) center no-repeat;
		background-size: contain;
	}
}

@media (min-width: 992px) {

	.slinky-left-extended, .slinky-left-contracted, .slinky-right-extended, .slinky-right-contracted {
		margin-left: 0px;
	}

	.slinky-top {
		margin-left: 30px;
	}
	
	#event-slinky .event-desc {
		margin-left: 50px;
	}
}

@media (min-width: 1600px) {

	.slinky-left-extended, .slinky-left-contracted, .slinky-right-extended, .slinky-right-contracted {
		width: 691px;
		height: 542px;
		margin-top: -542px;
	}

	.slinky-top {
		width: 637px;
		height: 243px;
		margin-left: 44px;
	}

	.slinky-left-extended {
		margin-top: -267px;
	}
	
	#event-slinky .event-desc {
		margin-left: 100px;
	}
	
}

/* Submarine */
.sub-patent {
	width: 579px;
	height: 356px;
	margin-left: -480px;
	margin-top: 210px;
	z-index: 4;
}

.sub-overlay {
	z-index: 3;
	margin-top: -100vh;
}

.sub {
	width: 579px;
	height: 356px;
	margin-left: -480px;
	margin-top: -356px;
	z-index: 4;
}

.ocean {
	width: 100%;
	height: 100vh;
	z-index: 2;
	margin-top: -356px;
}

.bubbles {
	width: 500px;
	height: 78px;
	margin-top: -204px;
	z-index: 3;
}

@media only screen and (orientation: portrait) {
	.sub-patent {
		background: url(images/timeline/submarine/mobile/sub-patent.png) center no-repeat;
		background-size: contain;
	}

	.sub {
		background: url(images/timeline/submarine/mobile/sub.png) center no-repeat;
		background-size: contain;
	}

	.ocean {
		background: url(images/timeline/submarine/mobile/ocean.png) top left no-repeat;
		background-size: cover;
	}

	.bubbles {
		background: url(images/timeline/submarine/mobile/bubbles.png) center no-repeat;
		background-size: contain;
	}
}

@media (min-width: 768px) {

	#event-submarine .animate {
		z-index: 1;
	}
	
	.sub-patent {
		background: url(images/timeline/submarine/sub-patent.png) center no-repeat;
		background-size: contain;
		margin-top: 80px;
		z-index: 4
	}
	
	.sub-overlay {
		z-index: 3;
		margin-top: 0;
	}
	
	.sub {
		background: url(images/timeline/submarine/sub.png) center no-repeat;
		background-size: contain;
		height: 351px;
		margin-top: -402px;
	}
	
	.ocean {
		background: url(images/timeline/submarine/ocean.png) top left no-repeat;
		background-size: cover;
		width: 1600px;
		height: 450px;
		margin-top: -405px;
		top: 0;
		position: relative;
	}
	
	.bubbles {
		background: url(images/timeline/submarine/bubbles.png) center no-repeat;
		background-size: contain;
	}
	
	#event-submarine.event-node.major .event-desc {
		z-index: 5;
		margin-top: -470px;
		width: 46%;
		margin-left: 53%;
		font-size: 16px;
	}

}

@media (min-width: 992px) {

	#event-submarine.event-node.major .event-desc {
		width: 37%;
		margin-left: 60%;
		font-size: 17px;
	}

}

@media (min-width: 1200px) {

	#event-submarine.event-node.major .event-desc {
		font-size: 18px;
		margin-top: -450px;
	}

}

@media (min-width: 1600px) {

	.sub-patent {
		width: 810px;
		height: 498px;
		margin-left: -625px;
		margin-top: 50px;
	}
	
	.sub {
		width: 810px;
		height: 491px;
		margin-left: -625px;
		margin-top: -589px;
	}
	
	.ocean {
		width: 2398px;
		height: 600px;
		margin-top: -510px;
	}
	
	.bubbles {
		width: 700px;
		height: 109px;
		margin-top: -282px;
		z-index: 2;
	}
	
	#event-submarine.event-node.major .event-desc {
		margin-top: -575px;
		margin-left: 55%;
	}

}

/* Saturn V */
.saturn-v {
	width: 100%;
	height: 100vh;
	margin-top: 78px;
	z-index: 2;
}

.flame-center {
	z-index: 1;
}

.flame-center {
	width: 100%;
	height: 100vh;
	margin-top: -100vh;
}

.smoke-center {
	width: 100%;
	height: 100vh;
	margin-top: -100vh;
}

@media only screen and (orientation: portrait) {
	.saturn-v {
		background: url(images/timeline/saturn-v/mobile/saturn-v.png) center no-repeat;
		background-size: contain;
	}

	.flame-center {
		background: url(images/timeline/saturn-v/mobile/flames.png) center no-repeat;
		background-size: contain;
	}

	.smoke-center {
		background: url(images/timeline/saturn-v/mobile/smoke.png) center no-repeat;
		background-size: contain;
	}
}

@media (min-width: 768px) {

	.flame-left, .flame-center, .flame-right , .saturn-v, .smoke-left, .smoke-center, .smoke-right, .eddins-signature, .rocketmen {
		left: 50%;
	}

	.saturn-v {
		width: 412px;
		height: 500px;
		margin-top: 0;
		background: url(images/timeline/saturn-v/saturn-v.png) center no-repeat;
		background-size: contain;
		z-index: 2;
	}

	.flame-left, .flame-center, .flame-right {
		z-index: 1;
	}

	.flame-left {
		width: 108px;
		height: 119px;
		background: url(images/timeline/saturn-v/flame-left.png) center no-repeat;
		background-size: contain;
		margin-left: 36px;
		margin-top: -191px;
	}

	.flame-center {
		width: 107px;
		height: 117px;
		background: url(images/timeline/saturn-v/flame-center.png) center no-repeat;
		background-size: contain;
		margin-left: 150px;
		margin-top: -53px;
	}

	.flame-right {
		width: 117px;
		height: 128px;
		background: url(images/timeline/saturn-v/flame-right.png) center no-repeat;
		background-size: contain;
		margin-left: 250px;
		margin-top: -179px;
	}

	.smoke-left {
		width: 154px;
		height: 184px;
		background: url(images/timeline/saturn-v/smoke-left.png) center no-repeat;
		background-size: contain;
		margin-top: -235px;
		margin-left: -73px;
	}

	.smoke-center {
		width: 411px;
		height: 193px;
		margin-top: 0;
		background: url(images/timeline/saturn-v/smoke-center.png) center no-repeat;
		background-size: contain;
	}

	.smoke-right {
		width: 132px;
		height: 170px;
		background: url(images/timeline/saturn-v/smoke-right.png) center no-repeat;
		background-size: contain;
		margin-left: 335px;
		margin-top: -365px;
	}

	.eddins-signature {
		width: 131px;
		height: 94px;
		background: url(images/timeline/saturn-v/eddins-signature.png) center no-repeat;
		background-size: contain;
		margin-left: -285px;
		margin-top: -100px;
	}
	
	.rocketmen {
		width: 131px;
		height: 94px;
		background: url(images/timeline/saturn-v/people.png) center no-repeat;
		background-size: contain;
		margin-left: -180px;
		margin-top: -100px;
	}

	#event-saturn-v .event-desc {
		width: 40%;
		margin-top: -470px;
	}
}

@media (min-width: 1600px) {

	.saturn-v {
		width: 577px;
		height: 700px;
	}

	.flame-left {
		width: 151px;
		height: 167px;
		margin-left: 51px;
		margin-top: -300px;
	}

	.flame-center {
		width: 149px;
		height: 163px;
		margin-left: 210px;
		margin-top: -85px;
	}

	.flame-right {
		width: 169px;
		height: 178px;
		margin-left: 351px;
		margin-top: -250px;
	}

	.smoke-left {
		width: 216px;
		height: 257px;
		margin-top: -320px;
		margin-left: -100px;
	}

	.smoke-center {
		width: 575px;
		height: 270px;
		margin-top: -5px;
	}

	.smoke-right {
		width: 185px;
		height: 238px;
		margin-left: 460px;
		margin-top: -550px;
	}

	.eddins-signature {
		width: 219px;
		height: 157px;
		margin-left: -380px;
	}
	
	.rocketmen {
		margin-top: -130px;
	}

	#event-saturn-v .event-desc {
		margin-left: 50px;
		margin-top: -520px;
	}
	
}

/* Fire bucket */
.bucket-full {
	z-index: 2;
	width: 100%;
	height: 100vh;
	margin-top: -30px;
}

.bucket-empty {
	z-index: 1;
	margin-left: 2px;
	width: 100%;
	height: 100vh;
	margin-top: -100vh;
}

.water {
	width: 617px;
	height: 259px;
	margin-top: -235px;
	left: 50%;
	margin-left: -309px;
}

.fire-bucket-fire {
	width: 100%;
	height: 100vh;
	margin-top: calc(-100vh + 60px); 
}

@media only screen and (orientation: portrait) {
	.bucket-full {
		background: url(images/timeline/fire-bucket/mobile/bucket-full.png) center bottom no-repeat;
		background-size: contain;
	}

	.bucket-empty {
		background: url(images/timeline/fire-bucket/mobile/bucket-empty.png) center bottom no-repeat;
		background-size: contain;
	}

	.water {
		background: url(images/timeline/fire-bucket/mobile/water.png) center bottom no-repeat;
		background-size: contain;
	}

	.fire-bucket-fire {
		background: url(images/timeline/fire-bucket/mobile/fire.png) center bottom no-repeat;
		background-size: contain;
	}
}

@media (min-width: 768px) {
	#event-fire-bucket .animate {
		/*margin-top: -188px;*/
	}
	
	.bucket-full {
		width: 267px;
		height: 300px;
		background: url(images/timeline/fire-bucket/bucket-full.png) center bottom no-repeat;
		background-size: contain;
		left: 50%;
		margin-left: 200px;
		margin-top: 1px;
		z-index: 2;
	}

	.bucket-empty {
		width: 267px;
		height: 300px;
		background: url(images/timeline/fire-bucket/bucket-empty.png) center bottom no-repeat;
		background-size: contain;
		left: 50%;
		margin-top: -300px;
		margin-left: 200px;
		z-index: 1;
	}

	.water {
		width: 553px;
		height: 233px;
		background: url(images/timeline/fire-bucket/water.png) center bottom no-repeat;
		background-size: contain;
		left: 50%;
		margin-left: 65px;
		margin-top: -95px;
	}

	.fire-bucket-fire {
		width: 100%;
		height: 300px;
		background: url(images/timeline/fire-bucket/fire.png) center bottom no-repeat;
		background-size: contain;
		margin-top: -250px;
		margin-left: 0;
	}
	
	#event-fire-bucket .event-desc {
		margin-top: -480px;
	}

}

@media (min-width: 1200px) {

	.fire-bucket-fire {
		width: 100%;
		height: 408px;
		margin-top: -220px;
	}
	
	#event-fire-bucket .event-desc {
		width: 35%;
		margin-left: 40px;
	}
	
}

@media (min-width: 1400px) {

	.fire-bucket-fire {
		width: 100%;
		height: 800px;
		margin-top: -540px;
	}
	
}

@media (min-width: 1600px) {

	.bucket-full {
		width: 374px;
		height: 419px;
		margin-left: 200px;
	}

	.bucket-empty {
		width: 374px;
		height: 419px;
		margin-top: -419px;
		margin-left: 200px;
	}

	.water {
		width: 774px;
		height: 326px;
		margin-left: 10px;
		margin-top: -200px;
	}
	
	.fire-bucket-fire {
		width: 100%;
		height: 800px;
		margin-top: -460px;
	}

	#event-fire-bucket .event-desc {
		margin-top: -600px;
	}
	
}

/* Headquarters */
.sketch, .buildings {
	width: 100%;
	height: 100vh;
	margin-top: 1px;
}

.buildings {
	margin-top: -100vh;
}

@media only screen and (orientation: portrait) {
	.sketch {
		background: url(images/timeline/hq/mobile/sketch.png) center no-repeat;
		background-size: cover;
	}

	.buildings {
		background: url(images/timeline/hq/mobile/buildings.png) center no-repeat;
		background-size: cover;
	}
}

#event-hq .event-desc {
	top: 88px;
}

@media (min-width: 768px) {

	.sketch, .buildings {
		height: 450px;
		width: 100%;
	}

	.sketch {
		background: url(images/timeline/hq/sketch.png) left center no-repeat;
		background-size: cover;
		margin-top: 1px;
	}

	.buildings {
		background: url(images/timeline/hq/buildings.png) left center no-repeat;
		background-size: cover;
		margin-top: -450px;
	}

	#event-hq .event-desc {
		width: 48%;
		left: 43%;
		top: 0;
		margin-left: -20%;
		margin-top: -490px;
		text-align: center;
	}
}

@media (min-width: 1600px) {

	.sketch, .buildings {
		height: 600px;
	}

	.buildings {
		margin-top: -600px;
	}
	
	#event-hq .event-desc {
		margin-top: -620px;
	}
	
}

/* Patent Samples */
#event-ten-millionth .animate {
	margin-top: 0;
}

.patent-samples>div {
	height: 100vh;
	margin-top: -100vh;
}

#event-ten-millionth .year {
	margin: 20px;
	padding: 10px;
	background-color: #ffe5c4;
	display: inline-block;
	color: #870000;
	font-weight: bold;
	font-size: 30px;
	font-weight: bold;
	display: none;
}

.patent-sample-2018 {
	height: 100vh;
	margin-top: -100vh;
}

.patent-samples>div.patent-sample-1790 {
	margin-top: 0;
}

@media only screen and (orientation: portrait) {
	#event-ten-millionth .top, #event-ten-millionth .event-date, , #event-ten-millionth .event-desc {
		display: none;
	}
	
	#event-ten-millionth .year {
		display: inline-block;
	}
	
	.patent-sample-2018 {
		background: #695756 url(images/timeline/design/newpatentcover.jpg) no-repeat top center;
		background-size: cover;
	}

	.patent-samples>div.patent-sample-1790 {
		background: url(images/timeline/design/1790_FirstPatent.png) no-repeat top center;
	}

	.patent-sample-1800 {
		background: url(images/timeline/design/1800_Design.png) no-repeat top center;
	}

	.patent-sample-1827 {
		background: url(images/timeline/design/1827-design.png) no-repeat top center;
	}

	.patent-sample-1838 {
		background: url(images/timeline/design/1838_Design.png) no-repeat top center;
	}

	.patent-sample-1867 {
		background: url(images/timeline/design/1867-design.png) no-repeat top center;
	}

	.patent-sample-1903 {
		background: url(images/timeline/design/1944-design.png) no-repeat top center;
	}

	.patent-sample-1976 {
		background: url(images/timeline/design/1976-FordPatent.jpg) no-repeat top center;
	}

	.patent-sample-1985 {
		background: url(images/timeline/design/1985-design.png) no-repeat top center;
	}
}

@media only screen and (min-width: 768px) {

	#event-ten-millionth .animate {
		margin-top: -189px;
	}
	
	.patent-samples {
		width: 70%;
		height: 100%;
		float: left;
	}
	
	#event-ten-millionth .year {
		display: inline-block;
	}

	.patent-samples>div {
		border-right: 2px solid;
		height: 50%;
		width: 25%;
		float: left;
		color: #870000;
		vertical-align: bottom;
		margin-top: 0;
	}
	
	.patent-samples>div:nth-child(-n+4) {
		border-bottom: 2px solid;
	}
	
	.patent-sample-2018 {
		background: url(images/timeline/design/newpatentcover.jpg) no-repeat top center;
		background-size: contain;
		width: 30%;
		height: 100%;
		float: left;
		margin-top: 0;
	}
	
	.patent-samples>div.patent-sample-1790 {
		background: url(images/timeline/design/1790_FirstPatent.png) no-repeat top center;
	}

	.patent-sample-1800 {
		background: url(images/timeline/design/1800_Design.png) no-repeat top center;
	}

	.patent-sample-1827 {
		background: url(images/timeline/design/1827-design.png) no-repeat top center;
	}

	.patent-sample-1838 {
		background: url(images/timeline/design/1838_Design.png) no-repeat top center;
	}

	.patent-sample-1867 {
		background: url(images/timeline/design/1867-design.png) no-repeat top center;
	}

	.patent-sample-1903 {
		background: url(images/timeline/design/1944-design.png) no-repeat top center;
	}

	.patent-sample-1976 {
		background: url(images/timeline/design/1976-FordPatent.jpg) no-repeat top center;
	}

	.patent-sample-1985 {
		background: url(images/timeline/design/1985-design.png) no-repeat top center;
	}
}

#event-patent-ten-million {
	height: 450px;
}

#event-patent-ten-million .animate {
	margin-top: 0px;
}

.patent-counter, .patent-static-counter {
	text-align: left;
	color: #870000;
	font-size: 5em;
	font-weight: 300;
	padding: 15px;
}

#event-patent-ten-million.event-node.major .event-desc {
	top: 195px;
}

@media only screen and (min-width: 768px) {

	#event-patent-ten-million .animate {
		margin-top: -189px;
	}

	.patent-counter, .patent-static-counter {
		font-size: 11em;
		padding: 20px;
	}
	
	#event-patent-ten-million.event-node.major .event-desc {
		width: 100%;
	}
	
}

@media only screen and (min-width: 1024px) {

	#event-patent-ten-million .animate {
		margin-top: -209px;
	}

	.patent-counter, .patent-static-counter {
		width: 960px;
		font-size: 14.5em;
		padding: 25px;
		margin: 0 auto;
	}
	
	#event-patent-ten-million.event-node.major .event-desc {
		top: 250px;
		text-align: center;
	}
	
}

@media only screen and (min-width: 1200px) {

	#event-patent-ten-million .patent-counter, .patent-static-counter {
		font-size: 14.5em;
	}
	
}

.curtain {
	width: 50%;
	height: 100%;
	background-color: orange;
	margin-top: -600px;
}