.rise-of-iron *
{
	box-sizing: border-box;
}

.rise-of-iron
{
	font-family: 'EB Garamond', serif;
	font-size: 1rem;
}

.rise-of-iron .text-header
{
	font-family: 'Lato', sans-serif;
}

.rise-of-iron .content
{
	color: white;
}

.rise-of-iron .content .text-header
{
	margin-bottom: 1rem;
	font-size: 4em;
	font-weight: bold;
	line-height: 1;
	text-shadow: 0 2px 1px rgba(0, 0, 0, 0.75);
}

.rise-of-iron .content .text-content
{
	font-size: 1.4em;

	text-shadow: 0 2px 1px rgba(0, 0, 0, 0.75);
}

	.rise-of-iron .content .text-content:first-letter
	{
		float:left;
		
		padding-right: 0.75rem;

		font-size: 6.5rem;
		line-height: 5.5rem;
	}

.rise-of-iron .content-max
{
	max-width: 1574px;
	padding: 0 18px;
	width: 100%;
	margin: 0 auto;
}


.rise-of-iron .border-button
{
	position: relative;
	display: block;

	padding: 1em;

	background: rgba(0, 0, 0, 0.5);
	border: 1px solid #d4be28;

	color: #FFF;
	font-family: 'Lato', sans-serif;
	letter-spacing: 0.5em;
	text-align: center;

	cursor: pointer;

	transition: 0.25s;
}

.rise-of-iron .pre-order-date {
	font-size: 1.5em;
	margin-bottom: 3rem;
    position: relative;
    display: block;
    padding: 1em;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #d4be28;
    color: #FFF;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.5em;
    text-align: center;
}

	.rise-of-iron .border-button span
	{
		font-size: 1.5em;
	}
		
	.rise-of-iron .border-button:after
	{
		content: "";
		position: absolute;

		top: -5px;
		left: -5px;
		right: -5px;
		bottom: -5px;

		border: 1px solid #d4be28;
				
		transition: 0.25s;
	}

	.rise-of-iron .border-button:hover
	{
		background: rgba(0, 0, 0, 0.75);
	}


.rise-of-iron .starting-video
{
	position: absolute;
	z-index: 5;

	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;

	background: #181718;
}

	.rise-of-iron .starting-video video
	{
		position: absolute;

		top: 0;
		left: 50%;
		height: 100%;

		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.rise-of-iron .starting-video .skip
	{
		position: absolute;

		bottom: 10%;
		left: 50%;

		opacity: 0.75;

		color: #f8e4ba;
		font-size: 18px;
		text-align: center;
		text-decoration: underline;

		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);

		cursor: pointer;
	}

		.rise-of-iron .starting-video .skip:hover
		{
			opacity: 1;
		}


.rise-of-iron .roi-content
{
	display: none;
}

.rise-of-iron .header
{
	position: relative;

	width: 100%;
	height: 90vh;
	min-height: 959px;

	background: url("/pubstatic/StaticPages/RiseOfIron/Images/bg_header.jpg") 50% 0 no-repeat;
	background-size: cover;
}

	.react-mobile .rise-of-iron .header
	{
		font-size: 1rem;

		height: 75vh;
		min-height: 0;
	}
	
	.rise-of-iron .header video
	{
		position: absolute;
		z-index: 1;

		top: 0;
		left: 50%;
		width: auto;
		min-width: 100%;
		min-height: 100%;

		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

		.react-mobile .rise-of-iron .header video
		{
			height: 100%;		
		}

	.rise-of-iron .header .header-content
	{
		position: relative;
		z-index: 2;
		align-self: flex-end;

		margin: 0 auto;
		padding-bottom: 7.25em;

		text-align: center;
		color: #FFF;
	}

		.rise-of-iron .header .header-content img
		{
			display: block;

			width: 90%;
			max-width: 849px;
			margin: 0 auto;
		}

		.rise-of-iron .header .header-content .release
		{
			margin-bottom: 1.5em;

			font-weight: bold;
			letter-spacing: 1.5em;
		}

			.rise-of-iron .header .header-content .release span
			{
				font-size: 3.4375em;
			}

		.rise-of-iron .header .header-content .trailer-button
		{
			max-width: 90%;
			margin: 0 auto;
		}

.rise-of-iron .slider
{
	position: relative;

	width: 100%;
	height: 51.875rem;
}
	
	.rise-of-iron .slider .content
	{
		position: absolute;
		z-index: 5;

		bottom: 0;
		left: 0;

		padding: 0 0 10rem 10rem;

		max-width: 46rem;
	}
	
		.react-mobile .rise-of-iron .slider .content
		{
			width: auto;
			padding: 5rem;
		}
	
		.react-tiny .rise-of-iron .slider .content
		{
			font-size: 0.9rem;
		}

	.rise-of-iron .slider .images .image
	{
		position: absolute;

		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		background-size: cover;
		background-position: 70% 0;
		background-repeat: no-repeat;
		opacity: 0;

		transition: 0.5s;
	}
	
		.rise-of-iron .slider .images .image:after
		{
			content: "";
			position: absolute;

			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			background: url("/pubstatic/StaticPages/RiseOfIron/Images/left_vignette.png") 0 0 repeat-y;
		}

			.react-tiny .rise-of-iron .slider .images .image:after
			{
				opacity: 0.5;
			}

		.rise-of-iron .slider .images .image.active
		{
			opacity: 1;
			z-index: 2;
		}

			.react-tiny .rise-of-iron .slider .images .image.active
			{
				opacity: 0.5;
			}

	.rise-of-iron .slider .controls
	{
		position: absolute;
		justify-content: center;
		
		top: 3rem;
		width: 100%;

		z-index: 4;
	}

		.rise-of-iron .slider .controls .pip
		{
			position: relative;

			width: 24px;
			height: 24px;
			margin: 0 12px;
			
			background: rgba(0, 0, 0, 0.5);
			border: 1px solid #d4be28;

			cursor: pointer;
			-webkit-transform: rotateZ(45deg);
			transform: rotateZ(45deg);

			transition: 0.5s;
		}

			.rise-of-iron .slider .controls .pip:hover,
			.rise-of-iron .slider .controls .pip.active
			{
				background: rgba(0, 0, 0, 0.75);
			}

			.rise-of-iron .slider .controls .pip:after
			{
				content: "";
				position: absolute;

				top: 0;
				left: 0;
				right: 0;
				bottom: 0;

				border: 1px solid #d4be28;
				opacity: 0;
				
				transition: 0.25s;
			}

			.rise-of-iron .slider .controls .pip:hover:after,
			.rise-of-iron .slider .controls .pip.active:after
			{
				top: -5px;
				left: -5px;
				right: -5px;
				bottom: -5px;
				
				opacity: 1;
			}

	.rise-of-iron .slider.slider-1
	{
		
	}
	
		.rise-of-iron .slider.slider-1 .image[data-index="0"] { background-image: url("/pubstatic/StaticPages/RiseOfIron/Images/bg_heroes_1.jpg"); }
		.rise-of-iron .slider.slider-1 .image[data-index="1"] { background-image: url("/pubstatic/StaticPages/RiseOfIron/Images/bg_heroes_2.jpg"); }
		.rise-of-iron .slider.slider-1 .image[data-index="2"] { background-image: url("/pubstatic/StaticPages/RiseOfIron/Images/bg_heroes_3.jpg"); }
		.rise-of-iron .slider.slider-1 .image[data-index="3"] { background-image: url("/pubstatic/StaticPages/RiseOfIron/Images/bg_heroes_4.jpg"); }

	.rise-of-iron .slider.slider-2
	{
		
	}
	
		.rise-of-iron .slider.slider-2 .image[data-index="0"] { background-image: url("/pubstatic/StaticPages/RiseOfIron/Images/bg_enemies_1.jpg"); }
		.rise-of-iron .slider.slider-2 .image[data-index="1"] { background-image: url("/pubstatic/StaticPages/RiseOfIron/Images/bg_enemies_2.jpg"); }
		.rise-of-iron .slider.slider-2 .image[data-index="2"] { background-image: url("/pubstatic/StaticPages/RiseOfIron/Images/bg_enemies_3.jpg"); }
		.rise-of-iron .slider.slider-2 .image[data-index="3"] { background-image: url("/pubstatic/StaticPages/RiseOfIron/Images/bg_enemies_4.jpg"); }


.rise-of-iron .bg-separator
{
	height: 11vw;

	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

	.rise-of-iron .bg-separator-1 { background-image: url("/pubstatic/StaticPages/RiseOfIron/Images/divider_1.jpg"); }
	.rise-of-iron .bg-separator-2 { background-image: url("/pubstatic/StaticPages/RiseOfIron/Images/divider_2.jpg"); }
	.rise-of-iron .bg-separator-3 { background-image: url("/pubstatic/StaticPages/RiseOfIron/Images/divider_3.jpg"); }


.rise-of-iron .destinations
{
	position: relative;

	padding: 9vw 0;
	min-height: 25rem;

	background: url("/pubstatic/StaticPages/RiseOfIron/Images/bg_destinations.jpg") 50% 50% no-repeat;
	background-size: cover;
}

	.rise-of-iron .destinations .content-max
	{
		max-width: 1600px;
	}

	.rise-of-iron .destinations img
	{
		display: block;
		float: left;

		max-width: calc(50% - 9px);
		width: auto;
		height: auto;	

		transition: 0.25s;
		cursor: pointer;
	}

		.rise-of-iron .destinations img:first-child
		{
			margin-right: 18px;
		}

		.react-tiny .rise-of-iron .destinations img
		{
			float: none;
			max-width: 100%;
			margin: 0 0 18px 0;
		}

		.rise-of-iron .destinations img:hover
		{
			opacity: 0.8;
		}

	.rise-of-iron .destinations .destination
	{
		position: relative;
		align-items: center;
		
		height: 0;

		opacity: 0;
		pointer-events: none;

		background-size: cover;
	}

		.rise-of-iron .destinations .destination.iron-lords
		{
			background-image: url("/pubstatic/StaticPages/RiseOfIron/Images/bg_iron_lords.jpg");
		}

		.rise-of-iron .destinations .destination.plaguelands
		{
			background-image: url("/pubstatic/StaticPages/RiseOfIron/Images/bg_plaguelands.jpg");
		}

		.rise-of-iron .destinations .destination .content
		{
			max-width: 936px;
			margin: 0 auto;
			padding: 2rem;

			text-align: center;
		}

			.rise-of-iron .destinations .destination .content .text-content:first-letter
			{
				float: none;
				font-size: inherit;
				padding-right: 0;
				line-height: inherit;
			}

		.rise-of-iron .destinations .destination .close
		{
			display: inline-block;

			width: 5.5rem;
			height: 0;
			padding-top: 5.75rem;
			margin-top: 2rem;

			background: url("/pubstatic/StaticPages/RiseOfIron/Images/close-box.png") 0 0 no-repeat;
			background-size: contain;
			
			font-family: 'Lato', sans-serif;
			letter-spacing: 4px;
			text-align: center;

			cursor: pointer;
		}

		.rise-of-iron .destinations.show-il,
		.rise-of-iron .destinations.show-pl
		{
			padding: 0;
		}

		.rise-of-iron .destinations.show-il .content-max,
		.rise-of-iron .destinations.show-pl .content-max
		{
			display: none;
		}

		.rise-of-iron .destinations.show-il .destination.iron-lords,
		.rise-of-iron .destinations.show-pl .destination.plaguelands
		{
			height: auto;
			padding: 4vw 0;
			opacity: 1;
			pointer-events: auto;

			transition: opacity 1s;
		}


.rise-of-iron .gear-grid
{
	position: relative;

	overflow: hidden;

	height: 51.875rem;
}
	
	.rise-of-iron .gear-grid:after
	{
		content: "";
		position: absolute;
		z-index: 3;

		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		background: url("/pubstatic/StaticPages/RiseOfIron/Images/left_vignette.png") 0 0 repeat-y;
	}
	
	.rise-of-iron .gear-grid .content
	{
		position: absolute;
		z-index: 5;

		bottom: 0;
		left: 0;

		padding: 0 0 10rem 10rem;

		max-width: 46rem;
	}
	
		.react-mobile .rise-of-iron .gear-grid .content
		{
			width: auto;
			padding: 5rem;
		}
	
		.react-tiny .rise-of-iron .gear-grid .content
		{
			font-size: 0.9rem;
		}

	.gear-grid .gear-item
	{
		position: relative;
		float: left;
			
		width: 20%;
		height: 33.3333%;

		margin: 0;
	}

		.react-tiny .rise-of-iron .gear-grid .gear-item
		{
			opacity: 0.75;
		}

		.gear-grid .gear-item:nth-of-type(6n)
		{
			margin-right: 0;
		}

		.gear-grid .gear-item .image
		{
			position: absolute;
			top: 0;
			left: 0;

			width: 100%;
			height: 100%;

			background-size: cover;
			opacity: 0;
				
			-webkit-transition: opacity 2s linear !important;
			transition: opacity 2s linear !important;
		}

			.gear-grid .gear-item .image.on
			{
				z-index: 2;
				opacity: 1;
			}

		.react-large .gear-grid .gear-item
		{
			width: 25%;
		}

		.react-medium .gear-grid .gear-item
		{
			width: 33.3333%;
		}

		.react-mobile .gear-grid .gear-item
		{
			width: 50%;
		}

.rise-of-iron .raid
{
	position: relative;

	height: 51.875rem;

	background: url("/pubstatic/StaticPages/RiseOfIron/Images/bg_raid.jpg") 70% 0 no-repeat;
	background-size: cover;
}
	
	.rise-of-iron .raid:after
	{
		content: "";
		position: absolute;
		z-index: 3;

		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		background: url("/pubstatic/StaticPages/RiseOfIron/Images/left_vignette.png") 0 0 repeat-y;
	}
	
	.rise-of-iron .raid .content
	{
		position: absolute;
		z-index: 5;

		bottom: 0;
		left: 0;

		padding: 0 0 10rem 10rem;

		max-width: 46rem;
	}
	
		.react-mobile .rise-of-iron .raid .content
		{
			width: auto;
			padding: 5rem;
		}
	
		.react-tiny .rise-of-iron .raid .content
		{
			font-size: 0.9rem;
		}

.rise-of-iron .order
{
	min-height: 51.875rem;
	padding: 3rem 0;

	background: url("/pubstatic/StaticPages/RiseOfIron/Images/bg_preorder.jpg") 70% 0 no-repeat;
	background-size: cover;

	color: #FFF;
	font-size: 1rem;
}

	.rise-of-iron .order .content-max
	{
		max-width: 992px;
	}

	.rise-of-iron .order .box-and-order
	{
	}

		.react-tiny .rise-of-iron .order .box-and-order
		{
			-ms-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;

			height: auto;
		}

		.rise-of-iron .order .box-and-order .box-art
		{
			-ms-flex: 7 0;
			-webkit-flex: 7 0;
			flex: 7 0;

			padding-right: 3rem;
		}

			.safari .rise-of-iron .order .box-and-order .box-art
			{
				flex-basis: auto;
			}

			.rise-of-iron .order .box-and-order .box-art img
			{
				width: 100%;
			}

			.react-tiny .rise-of-iron .order .box-and-order .box-art
			{
				-ms-flex: none;
				-webkit-flex: none;
				flex: none;

				width: 100%;
				padding: 0 2rem;
			}

		.rise-of-iron .order .box-and-order .info
		{
			-ms-flex: 10 0;
			-webkit-flex: 10 0;
			flex: 10 0;

			padding-top: 1rem;

			text-align: center;
		}

			.safari .rise-of-iron .order .box-and-order .info
			{
				flex-basis: auto;
				max-width: 100%;
			}

		.rise-of-iron .order .box-and-order .info .release
		{
			margin-bottom: 1.5em;
			
			font-weight: bold;
			letter-spacing: 1.5em;
		}

			.rise-of-iron .order .box-and-order .info .release span
			{
				font-size: 3.4375em;
			}

		.rise-of-iron .order .box-and-order .info .gjally
		{
			cursor: pointer;

			transition: 0.25s;
		}

			.rise-of-iron .order .box-and-order .info .gjally:hover
			{
				-webkit-transform: scale(1.025);
				transform: scale(1.025);
			}

			.rise-of-iron .order .box-and-order .info .gjally img
			{
				max-width: 100%;
			}

				.react-tiny .rise-of-iron .order .box-and-order .info .gjally img
				{
					width: 100%;
				}

		.rise-of-iron .order .box-and-order .info .preorder-button
		{
			margin-bottom: 3rem;
		}

	.rise-of-iron .order .bungie-store
	{
		position: relative;
		display: block;

		padding: 2.5rem;
		margin-top: 3rem;

		background: rgba(0, 0, 0, 0.5);
		border: 1px solid #d4be28;

		color: #FFF;

		transition: 0.25s;
	}

		.rise-of-iron .order .bungie-store:hover
		{
			background: rgba(0, 0, 0, 0.75);
		}

		.rise-of-iron .order .bungie-store .logo
		{
			width: 40%;
			height: 42px;

			background: url("/pubstatic/StaticPages/RiseOfIron/Images/bungie_store.png") 0 0 no-repeat;
			background-size: contain;
		}

			.react-tiny .rise-of-iron .order .bungie-store .logo
			{
				width: 100%;
			}

		.rise-of-iron .order .bungie-store .tagline
		{
			width: 40%;
			margin-top: 2rem;
			
			font-family: 'Lato', sans-serif;
			font-size: 1.125rem;
			letter-spacing: 8px;
			line-height: 2rem;
			text-align: center;
		}

			.react-tiny .rise-of-iron .order .bungie-store .tagline
			{
				width: 100%;
			}

		.rise-of-iron .order .bungie-store .shirts
		{
			position: absolute;

			top: -1rem;
			bottom: -1rem;
			right: 0;
			width: 54%;
			
			background: url("/pubstatic/StaticPages/RiseOfIron/Images/shirts.png") 0 0 no-repeat;
			background-size: contain;
		}

			.react-tiny .rise-of-iron .order .bungie-store .shirts
			{
				position: relative;

				top: auto;
				bottom: auto;
				right: auto;
				width: 100%;
				height: 10rem;
				margin: 1rem 0;

				background-position: 50%;
			}

.rise-of-iron .footer
{
	height: 58.4375rem;

	background: url("/pubstatic/StaticPages/RiseOfIron/Images/footer.jpg") 50% 0 no-repeat;
	background-size: cover;
}