html
{
  box-sizing: border-box;
  font-size: 1em;
}

body
{
	font-family: 'Forza', sans-serif;
	font-size: 20px;
	overflow: hidden;
}


*, *:before, *:after 
{
  box-sizing: inherit;
  background-repeat: no-repeat;
}

.absolute-center
{
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

h1
{
	font-size: 200%;
}


ol.presentation 
{
	position: fixed;
	width: 100%;
	height: 100%;
	
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;

	/*position: absolute;
	width: 100%;
	height: 100%;*/

}

.suppress-transition
{
	transition: all 0s linear !important;
}

.grid
{
	background-color: #ffffff;
	background-image: url(../images/grid.svg);
	width: 20px; height: 20px;
	background-repeat: repeat;
	background-position: top left;
}


	/* some hacks here to clear up webkit blurring */

	ol.presentation > li.scene
	{
		position: absolute;		
		min-width: 100%;
		min-height: 100%;
		/* width: 200%;
		margin-left: -50%;
		height: 200%;
		margin-top: -50%;*/
		padding: 60px;
		z-index: 1;
		opacity: 0;		
		transition: transform 0.6s ease-in-out, opacity 0.6s linear;
		/*transform: scale(1.15);*/
		-webkit-font-smoothing: antialiased;
	}


	.logo-current
	{
		/*width: 1800px; 
		height: auto;*/
	}

	.annotated-space
	{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

		#compare .annotated-space.logo-current
		{
			transform: translate(-50%, -155%);
		}

		#compare .annotated-space.logo-modified
		{
			transform: translate(-50%, 5%);
		}


		.annotated-space.logo-current
		{
			background-image: url(../images/logo-spacex-current.svg);
			background-size: 1855px 229px;
			background-position: 273px 0;
			width: 2128px;
			height: 229px;
		}

		.annotated-space.logo-modified
		{
			background-image: url(../images/logo-spacex-modified.svg);
			background-size: 1708px 216px;
			background-position: 256px 12px;
			width: 2058px;
			height: 229px;
		}

			.annotation
			{
				font-size: 50%;
				position: absolute;
				z-index: 3;
				line-height: 1.4em;
				background-position: bottom left;
				transition: opacity 0.2s linear;
			}

				.annotation .text
				{
					top: 20px;
					right: 20px;
				}

					.annotation .text p
					{
						margin-left: 20px;
					}

				.annotation .lines
				{
					position: absolute;
					width: 0;
					height: 0;
					top: 0px;
					right: 0px;
					background-position: top right;
					opacity: 0;
					/*width: 200px;
					height: 200px;*/
				}

				.annotation .lines.sizer
				{
					width: 200px;
					height: 200px;
					top: 100px;
					right: 100px;
					background-size: contain;
				}				

				.annotation .fade-in
				{
					position: absolute;
					opacity: 0;
					transition: opacity 0.2s linear;
				}

					.annotation label
					{
						display: block;
						color: #839098;
						text-transform: uppercase;
						font-size: 120%;
						margin-bottom: 10px;
					}

						.annotation label::before
						{
							content: "_ ";
							color: #ce0000;
						}

				.annotation.weighting
				{
					top: -114px;
					left: 196px;
					width: 395px;
					height: 260px;
				}

					.annotation.weighting .text
					{
						width: 220px;
					}

					.annotation.weighting .lines
					{
						top: 40px;
						right: 236px;				
						background-image: url(../images/l-weighting.svg);		
						width: 99px; height: 200px;
					}

				.annotation.spacing
				{
					top: -100px;
					left: 403px;
					width: 1190px;
					height: 320px;
					font-size: 70%;
				}

					.annotation.spacing .text
					{
						top: 15px;
						width: 230px;
						right: 408px;
					}

					.annotation.spacing .lines
					{
						top: 40px;
						right: 571px;				
						background-image: url(../images/l-spacing.svg);		
						width: 124px; height: 250px;
						background-position: top center;
					}


				.annotation.breaking
				{
					top: -102px;
					left: 1170px;
					width: 300px;
					height: 340px;
				}

					.annotation.breaking .text
					{
						width: 180px;
					}

					.annotation.breaking .lines
					{
						top: 40px;
						right: 162px;				
						background-image: url(../images/l-breaking.svg);		
						width: 70px; height: 200px;
						background-position: top center;
					}					



				.annotation.chamfers
				{
					top: -102px;
					left: 873px;
					width: 855px;
					height: 390px;
					font-size: 60%;
				}

					.annotation.chamfers .text
					{
						width: 190px;
					}

					.annotation.chamfers .lines
					{
						top: 40px;
						right: 169px;				
						background-image: url(../images/l-chamfers.svg);		
						width: 649px; height: 336px;
						background-position: bottom right;
					}					


				.annotation.shard
				{
					top: -102px;
					left: 1683px;
					width: 480px;
					height: 280px;
				}

					.annotation.shard .text
					{
						right: 100px;
						width: 200px;
						text-align: right;
					}


					.annotation.shard .lines
					{
						top: 45px;
						right: 56px;				
						background-image: url(../images/l-shard.svg);		
						width: 50px; height: 88px;
						background-position: top center;
					}							

				.annotation.pinching
				{
					top:  90px;
					left: 1551px;
					width: 490px;
					height: 120px;
				}

					.annotation.pinching .text
					{
						width: 200px;
						top: 41px;
						right: 23px;
					}

						.annotation.pinching .text p
						{
							margin-left: 0;
						}

					.annotation.pinching .lines
					{
						top: -46px;
						right: 227px;				
						background-image: url(../images/l-pinching.svg);		
						width: 220px; height: 200px;
						background-position: center right;
					}		

				.annotation.heroes
				{
					top:  40px;
					left: 763px;
					width: 1040px;
					height: 460px;
					font-size: 70%;
				}

					.annotation.heroes .text
					{

						width: 300px;
						left: 191px;
						right: auto;
						top: 294px;
					}


					.annotation.heroes .lines
					{
						top: 4px;
						right: 148px;				
						background-image: url(../images/l-heroes.svg);		
						width: 830px; height: 300px;
						background-position: bottom center;
					}	


				.annotation.chamfering
				{
					top:  105px;
					left: 250px;
					width: 330px;
					height: 380px;
				}

					.annotation.chamfering .text
					{
						width: 210px;
						left: 99px;
						right: auto;
						top: 250px;
					}

					.annotation.chamfering .lines
					{
						top: 8px;
						right: 85px;				
						background-image: url(../images/l-chamfering.svg);		
						width: 230px; height: 249px;
						background-position: bottom center;
					}						

				.annotation.horizontal-weights
				{
					font-size: 70%;
					top:  166px;
					left: 3px;
					width: 1224px;
					height: 230px;
				}

					.annotation.horizontal-weights .text
					{
						width: 210px;
						right: auto;
						left: 20px;
						text-align: right;
					}

					.annotation.horizontal-weights .lines
					{
						top: 31px;
						left: 248px;				
						background-image: url(../images/l-horizontal-weights.svg);		
						width: 1190px; height: 61px;
						background-position: bottom center;
					}	


				.annotation.terminals
				{
					top: -124px;
					left: 194px;
					width: 570px;
					height: 290px;
				}

					.annotation.terminals .text
					{
						width: 220px;
						left: 245px;
					}

					.annotation.terminals .lines
					{
						top: 40px;
						left: 0;				
						right: auto;
						background-image: url(../images/l-terminals.svg);		
						background-position: top center;
						width: 570px; height: 227px;
						
					}


				.annotation.apex
				{
					top: -124px;
					left: 734px;
					width: 310px;
					height: 300px;
				}

					.annotation.apex .text
					{
						width: 140px;
						left: 93px;
					}

					.annotation.apex .lines
					{
						top: 40px;
						left: 50px;				
						right: auto;
						background-image: url(../images/l-apex.svg);		
						background-position: top center;
						width: 90px; height: 227px;						
					}


				.annotation.vertical-weights
				{
					top: -124px;
					left: 964px;
					width: 310px;
					height: 300px;
				}

					.annotation.vertical-weights .text
					{
						top: 34px;
						width: 170px;
						left: 88px;
					}

					.annotation.vertical-weights .lines
					{
						top: 55px;
						left: auto;				
						right: 205px;;
						background-image: url(../images/l-vertical-weights.svg);		
						background-position: top right;
						width: 113px; height: 231px;
					}

				.annotation.curves
				{
					top: -134px;
					left: 1194px;
					width: 580px;
					height: 300px;
				}

					.annotation.curves .text
					{
						width: 270px;
						left: 213px;
						top: 40px;
					}

					.annotation.curves .lines
					{
						top: 60px;
						left: 9px;				
						right: auto;
						background-image: url(../images/l-curves.svg);		
						background-position: top right;
						width: 244px; height: 251px;						
					}


				.annotation.final-point
				{
					top:  -20px;
					left: 1673px;
					width: 460px;
					height: 350px;
				}

					.annotation.final-point .text
					{
						text-align: right;
						width: 200px;
						left: 149px;
						right: auto;
						top: 194px;
					}


					.annotation.final-point .lines
					{
						top: -190px;
						right: 148px;				
						background-image: url(../images/l-final-point.svg);		
						width: 80px; height: 390px;
						background-position: bottom center;
					}	


				.annotation.inner-angles
				{
					top:  50px;
					left: 1463px;
					width: 390px;
					height: 390px;
				}

					.annotation.inner-angles .text
					{

						width: 200px;
						left: 154px;
						right: auto;
						top: 282px;
					}


					.annotation.inner-angles .lines
					{
						top: 48px;
						right: 158px;				
						background-image: url(../images/l-inner-angles.svg);		
						width: 151px; height: 410px;
						background-position: top center;
					}	


				.annotation.kerning
				{
					top:  50px;
					left: 469px;
					width: 992px;
					height: 380px;
					font-size: 65%;
				}

					.annotation.kerning .text
					{

						width: 200px;
						left: 731px;
						right: auto;
						top: 261px;
					}


					.annotation.kerning .lines
					{
						top: -10px;
						right: 0px;				
						background-image: url(../images/l-kerning.svg);		
						width: 989px; height: 278px;
						background-position: bottom right;
					}	


				.annotation.joints
				{
					top:  120px;
					left: 789px;
					width: 362px;
					height: 330px;
				}

					.annotation.joints .text
					{

						width: 200px;
						bottom: auto;
						left: 74px;
						right: auto;
						top: 192px;
					}


					.annotation.joints .lines
					{
						top: 70px;
						right: 260px;				
						background-image: url(../images/l-joints.svg);		
						width: 27px; height: 128px;
						background-position: bottom right;
					}	


				.annotation.finessing
				{
					top:  0px;
					left: 249px;
					width: 1732px;
					height: 400px;
					font-size: 100%;
				}

					.annotation.finessing .text
					{

						width: 270px;
						bottom: 0px;
						left: 0px;
						right: auto;
						top: auto;
					}


.unfurl-y,
.unfurl-xy
{
	transition: all 0.3s ease-out;
}


ul.controls-playback
{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 40px;
	text-align: center;
	z-index: 2;
	background-color: rgba(0,0,0,0.8);
	padding: 10px 0 10px 0;
}

	ul.controls-playback > li
	{
		font-size: 150%;
		color: #ffffff;
		opacity: 0.3;
		text-transform: uppercase;
		cursor: pointer;
		display: inline-block;
		max-width: 0px;
		overflow: hidden;
		text-align: center;
	}

	ul.controls-playback > li,
	ul.controls-playback > li:hover,
	ul.controls-playback > li.active	
	{
		transition: max-width 0.1s ease-in-out, text-shadow 0.1s ease-in-out, opacity 0.3s ease-in-out;
	}

		ul.controls-playback > li:hover,
		ul.controls-playback > li.active
		{
			opacity: 1;
		}

		ul.controls-playback > li:hover
		{
			text-shadow: 0px 0px 7px rgba(255,255,255,0.9);
		}

		ul.controls-playback > li.jump-to-segment
		{
			font-size: 300%;
			line-height: 45%;
		}