/*=======================================

	COMMON

=======================================*/

body.Index
{
	background: rgb(30,36,43);
}

body.Index #mainContent,
body.Index #mainContent h1,
body.Index #mainContent h2,
body.Index #mainContent h3,
body.Index #mainContent h4,
body.Index #mainContent h5,
body.Index #mainContent h6
{
	font-family: 'Roboto', Arial, sans-serif;
}

body.Index .bg_separate
{
	padding-bottom: 100px;

	background: #12171C;
	background-size: cover;
	
	-webkit-transition: 0s;
	transition: 0s;
}

	.ie body.Index .bg_separate,
	.safari body.Index .bg_separate
	{
		top: 0;
		padding-bottom: 0;
	}

	.mobile body.Index .bg_separate
	{
		background: none;
	}

	.mobile body.Index
	{
		background: #12171C;
		background-attachment: fixed;
	}


/*=======================================

	SECTIONS

=======================================*/

.homesection
{
	position: relative;
	padding: 60px 0;

	-webkit-transition: padding 0.25s;
	transition: padding 0.25s;
	will-change: padding;
}

.countdown-timer
{
	position: relative;
	display: block;

	width: 100%;
	height: 100px;

	background-size: cover;
	background-position: 50% 50%;

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

	.countdown-timer:after
	{
		content: "";

		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		transition: 0.25s;
	}

		.countdown-timer:hover:after
		{
			background: rgba(245, 245, 245, 0.05);
		}

	.countdown-timer .time-remaining
	{
		position: relative;
		display: inline-block;

		height: 60px;
		margin: 40px auto 0;
		padding: 0 36px;
		
		line-height: 60px;
		font-size: 44px;
		font-weight: 500;
	}

	.countdown-timer .time-blurb
	{
		position: absolute;

		right: 18px;
		top: 20px;

		text-align: right;
		text-transform: uppercase;
		font-size: 12px;
	}
	
		.countdown-timer .time-blurb .time-of-day
		{
			font-size: 23px;
			font-weight: 500;
		}

		.countdown-timer .time-blurb .subtitle
		{
			letter-spacing: 3px;
			opacity: 0.5;
		}

.callout
{
	position: relative;
	overflow: hidden;
	
	height: 650px;
	height: calc(100vh - 200px);
	min-height: 450px;
	max-height: 647px;

	background: rgb(36,40,43);
	box-shadow: 0 0 30px rgba(0,0,0,0.4);

	transition: margin 0.25s;
}

	.callout .grid
	{
		height: 100%;

		padding: 164px 100px 100px;
	}

	.callout #toblur
	{
		position: absolute;
		z-index: -1;
		visibility: hidden;
	}

	.callout #blurred
	{
		position: absolute;
		display: block;

		opacity: 0.7;
	}

	.callout video
	{
		position: absolute;
		top: 50%;
		left: 50%;

		width: auto;
		height: auto;
		min-width: 100%;
		min-height: 100%;

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

	.callout .video-link
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

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

	.calloutLink
	{
		-webkit-transition: 0.25s;
		transition: 0.25s;
	}

		.calloutImage
		{
			position: absolute;
			top: 64px;
			left: 0;
			right: 0;
			bottom: 0;
			
			opacity: 0;
			background-position: 50% 50%;
			background-repeat: no-repeat;
			background-size: cover;

			box-shadow: 0 3px 15px rgba(0,0,0,0.2);
			
			-webkit-transition: top 0.5s, opacity 0.25s, box-shadow 0.25s;
			transition: top 0.5s, opacity 0.25s, box-shadow 0.25s;
		}

			.calloutLink:hover .calloutImage
			{
				box-shadow: 0 3px 30px rgba(0,0,0,0.6);
			}

		.calloutImage.active
		{
			opacity: 1;
		}

		.calloutContent
		{
			position: absolute;
			bottom: 100px;

			max-height: 75%;
			padding: 10px;
		
			color: #f5f5f5;
			background: rgba(0,0,0,0.2);
			text-shadow: 0 1px 2px rgba(0,0,0,0.15);
			box-shadow: 0 3px 15px rgba(0,0,0,0);

			font-size: 1rem;

			transition: 0.25s;
		}

			.react-mobile .calloutContent
			{
				left: 0;
				bottom: 0;
			}

			.calloutLink:hover .calloutContent
			{
				background: rgba(0,0,0,0.35);
				box-shadow: 0 3px 15px rgba(0,0,0,0.2);
			}

			.calloutContent h1
			{
				position: relative;

				margin-top: 10px;

				font-size: 2.5rem;
				font-weight: 500;
				line-height: 2.5rem;
			}

			.calloutContent .calloutDate
			{
				font-size: 1.5rem;
				font-weight: 200;
			}

			.calloutContent .calloutSummary
			{
				font-style: italic;
				font-size: 1.375rem;
			}

				.ja .calloutContent .calloutSummary
				{
					font-style: normal;
				}

		.event .calloutContent
		{
			top: 50%;
			left: 0;
			bottom: auto;
			
			width: 100%;
			max-height: none;
			margin-top: -220px;

			text-align: center;
			background: transparent;
		}

			.event > .grid
			{
				max-width: none;
			}

			.event .calloutImage
			{
				top: 0;
				opacity: 1;
			}

			.event .calloutContentSection
			{
				opacity: 0;

				-webkit-transform: scale(0.9);
				transform: scale(0.9);
			
				-webkit-transition: 0.5s;
				transition: 0.5s;
			}

				.event .calloutContentSection.on
				{
					opacity: 1;

					-webkit-transform: scale(1);
					transform: scale(1);
				}

			.event .calloutContent h1
			{
				line-height: 83px;
				font-size: 83px;
				font-weight: 100;
				letter-spacing: 12px;
				text-shadow: 0 1px 2px rgba(0,0,0,0.7);
			}

			.event .calloutContent .calloutSummary
			{
				font-style: normal;
				font-size: 27px;

				letter-spacing: 7px;
				padding-left: 7px;
			}

			.event .calloutContent .timedown
			{
				position: relative;
				
				height: 270px;
				margin-top: 50px;
			}

				.event .calloutContent .timedown .timeDialWrapper
				{
					position: absolute;
					top:  0;
					left: 50%;

					width: 270px;
					height: 270px;
					margin-left: -135px;
				}

				.event .calloutContent .timedown .timeAmounts
				{
					padding-top: 65px;

					font-weight: 100;
					font-size: 24px;
				}

.eventCalendar
{
	position: relative;

	width: 100%;

	background: #f5f5f5;
}

	.eventCalendar .grid
	{
		padding: 0;
	}

		.eventCalendar .calendarItem
		{
			position: relative;
			display: block;
			float: left;
			overflow: hidden;

			width: 20%; 
			height: 70px;
			padding: 17px 15px;

			color: rgb(30,36,43);
			font-size: 12px;
			
			-webkit-transition: 0.25s;
			transition: 0.25s;
			will-change: background;
		}

			.react-mobile .eventCalendar .calendarItem
			{
				float: none;
				width: 100%;
				border-bottom: 1px solid rgba(30, 36, 43, 0.15);
			}

			.eventCalendar .calendarItem:hover
			{
				background: rgba(255,206,31,1);
			}
	
			.eventCalendar .calendarItem:before,
			.eventCalendar .calendarItem:last-child:after
			{
				position: absolute;
				content: "";
				z-index: 5;

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

				background: rgba(30,36,43, 0.15);
			}
	
			.eventCalendar .calendarItem:last-child:after
			{
				left: auto;
				right: 0;
			}
			
			.eventCalendar .calendarItem .title
			{
				position: relative;
				white-space: nowrap;
				float: left;

				width: calc(100% - 40px);
			
				font-size: 13px;
				font-weight: 500;
			
				display: block;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.eventCalendar .calendarItem .icon 
			{
				position: relative;
				float: left;

				width: 30px;
				height: 30px;
				margin: 3px 10px 50px 0;

				background-size: cover;
				background-position: 50% 0;
			}

			.eventCalendar .calendarItem .date
			{
				position: relative;
				float: left;

				width: calc(100% - 40px);
				height: 18px;

				font-size: 12px;
				font-weight: 200;
			}

				.eventCalendar .calendarItem .date.today
				{
					border-bottom: 3px solid #ffce1f;
				}

				.eventCalendar .calendarItem .date em
				{
					font-weight: bold;
					font-style: normal;
				}

.eventAdvisors
{
	padding: 50px 0;
	margin-bottom: 18px;
}

	.eventAdvisors .grid .xur
	{
		display: block;

		height: 260px;
		
		background: url("/img/theme/bungienet/bgs/bg_xuravailable.jpg") 25% 0 no-repeat;
		background-size: cover;
		border-top: 3px solid #ffce1f;
	}

		.eventAdvisors .grid .xur .remaining
		{
			font-size: 20px;
		}

		.eventAdvisors .grid .xur .description
		{
			position: relative;
			float: right;

			padding-right: 40px;
			padding-top: 40px;

			font-size: 32px;
			color: #f5f5f5;
			text-shadow: 0 1px 2px rgba(0,0,0,0.3);
		}

		.eventAdvisors .grid .xur .items
		{
			margin-top: 20px;
		}

			.eventAdvisors .grid .xur .items .bucketItem
			{
				display: inline-block;

				margin-bottom: 0;
			}

				.eventAdvisors .grid .xur .items .bucketItem .itemPerks .itemPerk
				{
					opacity: 1;
				}

				.eventAdvisors .grid .xur .items .bucketItem .itemAction
				{
					display: none;
				}

				.eventAdvisors .grid .xur .items .bucketItem .destinyTooltip .cost .values .costName
				{
					color: inherit;
				}

				.xur .destinyTooltip .equipFailureReasons
				{
					display: none;
				}

	.eventAdvisors + .updates
	{
		padding-top: 0;
	}

.updates
{
	width: 100%;

	background-size: cover;
	color: #F5F5F5;
}

	.updates a
	{
		color: #f5f5f5;
	}

	.updates h6
	{
		margin-bottom: 6px;

		opacity: 0.75;

		font-size: 12px;
		color: #f5f5f5;
	}

	.updates .news .grid
	{
		padding: 0;
	}

	.updates .news
	{
	}

	.updates .news .item
	{
		position: relative;
		display: block;
		overflow: hidden;
		float: left;

		min-height: 100px;
		margin-top: 36px;
		
		-webkit-transition: background 0.25s;
		transition: background 0.25s;
	}

		.updates .news .item .image-zoom-hover
		{
			margin-bottom: 10px;
		}

		.updates .news .item .image
		{
			position: relative;
			
			width: 100%;
			height: 145px;

			background-size: cover;
			background-position: 50% 50%;
			background-color: rgba(0,0,0,0.2);
			
			-webkit-transition: 0.25s;
			transition: 0.25s;
		}

			.updates .news .item .image:after
			{
				content:"";
				position: absolute;
				top: 50%;
				bottom: 0;
				left: 0;
				right: 0;

				opacity: 0;
			
				-webkit-transition: 0.25s;
				transition: 0.25s;
			}

			.updates .news .item:hover .image:after
			{
				opacity: 1;
			}

		.updates .news .item .details
		{
			position: relative;
			
			color: #f5f5f5;
			
			-webkit-transition: 0.25s;
			transition: 0.25s;
		}

			.updates .news .item .details h6
			{
				margin-bottom: 2px;
				color: rgba(245,245,245,0.3);
			}

			.updates .news .item .details h2
			{
				position: relative;
				
				margin-bottom: 5px;

				font-size: 18px;
			
				-webkit-transition: 0.25s;
				transition: 0.25s;
			}

			.updates .news .item .details p
			{
				opacity: 0.6;
				font-size: 14px;
				font-weight: 200;
			
				-webkit-transition: 0.25s;
				transition: 0.25s;
			}

			.updates .news .featured
			{
				border-bottom: 1px solid rgba(245, 245, 245, 0.1);
				margin-bottom: 0;
				padding-bottom: 36px;
			}

				.updates .news .featured .item
				{
					margin-top: 18px;
				}

				.updates .news .featured .item .image
				{
					height: 200px;
				}

		.updates .news .viewAll
		{
			display: block;
			
			margin-top: 18px;
			padding-top: 18px;
			border-top: 2px solid rgba(245,245,245,0.1);

			-webkit-transition: 0.25s;
			transition: 0.25s;
		}

			.updates .news .viewAll:hover
			{
				padding-left: 5px;
			}

		.updates .news .non-featured .item:nth-of-type(3n + 1)
		{
			clear: left;
			margin-left: 0;
		}

		.updates .news .non-featured .item:nth-of-type(3n)
		{
			margin-right: 0;
		}

		.updates .patchnotes .item
		{
			margin-top: 0;
		}

	.updates .misc .item
	{
		position: relative;

		min-height: 188px;
		padding: 18px;
		
		background: #14191E;
		box-shadow: 0 1px 4px rgba(0,0,0,0.25);
	}

		.updates .misc .item .header
		{
			width: 100%;
			height: 40px;
			line-height: 40px;
			padding: 0 10px;

			background: rgba(245,245,245,0.1);
			border-bottom: 1px solid rgba(30,39,41,1);
			font-size: 13px;
			font-style: italic;
		}

		.updates .misc .item.marketing
		{
			
		}

			.updates .misc .item.marketing > a#PromoWidget
			{
				position: absolute;
				display: block;
				top: 0;
				left: 0;

				width: 100%;
				height: 100%;

				background-size: cover;
			}

		.updates .misc .item.director
		{
			box-shadow: 0 1px 4px rgba(0,0,0,0.1);
			border-top: 0;
		}

			.updates .misc .item.director .items
			{
				padding: 2.5% 5%;
			}

				.updates .misc .item.director .missionItem
				{
					position: relative;
					float: left;

					width: 25%;
					height: 80px;
				}

					.updates .misc .item.director .missionItem > .icon
					{
						position: relative;
						
						width: 100%;
						height: 100%;

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

					.updates .misc .item.director .missionItem[data-activitytype *= "PVP"] .destinyTooltip .itemDescription
					{
						display: none;
					}

					.updates .misc .item.director .missionItem[data-activitytype='ACTIVITY_TYPE_STRIKE_PLAYLIST'] .destinyTooltip .modifiers
					{
						display: none;
					}

				.updates .misc .item.director .resetTimer
				{
					width: 100%;
					margin-top: 30px;

					font-size: 13px;
					text-align: center;
				}

		.updates .misc .item.patchnotes
		{
			display: block;
			text-align: center;

			margin: initial;

			background-size: cover;
			background-position: 50% 50%;
			background-repeat: no-repeat;
			border-color: #ffce1f;
		}

			.updates .misc .item.patchnotes .header
			{
				text-align: left;
				background: rgba(0,0,0,0.4);
				border: 0;
				
				-webkit-transition: 0.25s;
				transition: 0.25s;
			}

				.updates .misc .item.patchnotes:hover .header
				{
					background: rgba(0,0,0,0.7);
				}

			.updates .misc .item .readmore
			{
				position: relative;
				display: inline-block;

				padding: 10px 20px;

				border: 2px solid #f5f5f5;
				color: #f5f5f5;
			
				-webkit-transition: 0.25s;
				transition: 0.25s;
			}

				.updates .misc .item .readmore:hover
				{
					background: #f5f5f5;
					color: rgba(36,40,43,1);
				}

	.updates .misc .item.director + .item.releases
	{
		margin-top: 18px;
	}

		.updates .misc .item.releases .release > a
		{
			display: block;		
		}

		.updates .misc .item.releases .release + .release
		{
			margin-top: 18px;
		}

		.updates .misc .item.releases img
		{
			position: relative;
			display: block;

			width: 100%;
			height: auto;
		}

		.updates .misc .item.releases .release.has-buttons
		{
		}

		.updates .misc .item.releases .release .image
		{
			position: absolute;

			top: 0;
			left: 0;

			width: 100%;
			height: 200px;

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

			.updates .misc .item.releases .release.has-buttons .image
			{
				height: 342px;
			}

		.updates .misc .item.releases .release .buttons
		{
			position: relative;

			padding-top: 18px;

			text-align: center;
		}

			.updates .misc .item.releases .release .button + .button
			{
				margin-left: 14px;
			}

.playerspot
{
	position: relative;
	overflow: hidden;
	z-index: 2;

	height: 720px;
	padding: 0;
	
	color: #f5f5f5;
	background: #000;
	box-shadow: 0 5px 35px rgba(0,0,0,0.5);
}

	.playerspot .grid
	{
		opacity: 0;
		transform: translateY(70px);
		transition: 0.5s ease !important;
	}

		.playerspot .grid.on
		{
			opacity: 1;
			transform: translateY(0);
		}

	.playerspot .bg
	{
		position: absolute;
		top: 0;
		left: 0;

		width: 100%;
		height: 720px;

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

	.playerspot .spotlightTop
	{
		padding-top: 70px;
	}

		.playerspot .spotlightInfo
		{
			margin: 0 0 14px 0;
		}
			
			.playerspot .spotlightInfo .platformName
			{
				margin: 40px 0 -5px -3px;
				font-size: 62px;
				font-weight: bold;
				text-transform: uppercase;
				line-height: 72px;
			}
			
				.playerspot .spotlightInfo .platformName a
				{
					color: #f5f5f5;
					
					-webkit-transition: 0.5s;
					transition: 0.5s;
					will-change: color;
				}
			
					.playerspot .spotlightInfo .platformName a:hover
					{
						color: rgba(233,185,16,1);
					}

			.playerspot .spotlightInfo .characterDetails
			{
				text-transform: lowercase;
				letter-spacing: 10px;
				font-weight: 200;
				margin-top: 4px;
			}

		.playerspot .findYourLegend
		{
			position: relative;
		}

			.playerspot .findYourLegend input
			{
				position: relative;

				height: 60px;
				width: 370px;
				padding: 25px 16px 8px;
				
				font-size: 15px;
				font-weight: 200;

				background: transparent;
				border: none;
			}

				.playerspot .findYourLegend input.searching
				{
					background: url('/img/theme/bungienet/icons/icon_loading_white.gif') 338px 28px no-repeat;
					background-size: 20px;
				}

			.playerspot .findYourLegend .border
			{
				position: absolute;
				box-sizing: border-box;
				z-index: 1;

				top: 0;
				left: 0;

				width: 370px;
				height: 60px;
					
				background: #fff;
				border: 0 solid rgba(0,0,0,0);
					
				-webkit-transition: 0.25s;
				transition: 0.25s;
			}
				
				.playerspot .findYourLegend input:focus ~ .border,
				.playerspot .findYourLegend input.filled ~ .border
				{
					border: 1px solid rgba(30,36,43, 0.2);
					border-width: 25px 8px 8px 8px;
				}

			.playerspot .findYourLegend label
			{
				position: absolute;
				z-index: 2;

				top: 0;
				left: 0;
				
				width: 370px;
				padding-left: 51px;
				line-height: 60px;
			
				font-weight: 200;
				font-size: 18px;
				cursor: text;
				color: rgb(30, 36, 43);
					
				-webkit-transform: translateZ(-1px);
				transform: translateZ(-1px);

				-webkit-transition: 0.25s;
				transition: 0.25s;
			}

				.playerspot .findYourLegend label span
				{	
					position: relative;
					display: block;
					
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
					
					-webkit-transition: 0.25s;
					transition: 0.25s;
				}
				
				.playerspot .findYourLegend input:focus,
				.playerspot .findYourLegend input.filled
				{
					z-index: 4;
				}
				
				.playerspot .findYourLegend input:focus + label,
				.playerspot .findYourLegend input.filled + label
				{
					z-index: 5;
					height: 25px;
				}
				
				.playerspot .findYourLegend input:focus + label span,
				.playerspot .findYourLegend input.filled + label span
				{
					color: rgb(30,36,43);
					
					-webkit-transform: translate3d(-42px, -10px, 0) scale3d(0.75, 0.75, 1) translateZ(1px);
					transform: translate3d(-42px, -10px, 0) scale3d(0.75, 0.75, 1) translateZ(1px);
				}
					
				.playerspot .findYourLegend input:focus ~ .fa-search,
				.playerspot .findYourLegend input.filled ~ .fa-search
				{
					opacity: 0;

				}

			.playerspot .findYourLegend .fa-search
			{
				position: absolute;
				left: 17px;
				z-index: 2;

				line-height: 60px;
				color: rgba(30,36,43,1);
				font-size: 20px;
				
				-webkit-transition: 0.25s;
				transition: 0.25s;
			}

			.playerspot .findYourLegend .foundPlayer
			{
				display: block;
				
				width: 370px;
				padding: 5px 9px 10px;

				background: rgba(30,36,43,0.9);
				color: #f5f5f5;
				font-weight: 200;
				
				font-size: 14px;

				-webkit-transition: 0.25s;
				transition: 0.25s;
			}

				.playerspot .findYourLegend .foundPlayer:hover
				{
					background: rgba(30,36,43,0.9);
					border-left: 3px solid #479ce4;
				}

				.playerspot .findYourLegend .foundPlayer .membershipType
				{
					display: inline-block;
					vertical-align: -4px;

					width: 19px;
					height: 19px;
					margin-right: 11px;

					background-size: cover;
				}

	.playerspot .spotlightBottom
	{
		margin-bottom: 70px;
	}

		.playerspot .spotlightBottom .highlight
		{
			height: 213px;
		}

		.playerspot .spotlightBottom .grid-col-6
		{
			margin: 0;
		}

		.playerspot .spotlightBottom .statsHeader
		{
			padding: 0 18px;
			margin-bottom: 1px;
			line-height: 38px;

			background: rgba(30,36,43,0.4);
			font-style: italic;
			font-size: 14px;
			text-shadow: 0 1px 2px rgba(0,0,0,0.3);
		}

		.playerspot .spotlightBottom .detail
		{
			padding: 18px 0 0 18px;

			background:  rgba(30,36,43,0.25);
			text-shadow: 0 1px 2px rgba(0,0,0,0.25);
			color: #f5f5f5;
		}

			.playerspot .spotlightBottom .detail .statItem
			{
				float: left;

				width: 33%;
				height: 65px;
			}

				.playerspot .spotlightBottom .detail .statItem .statName
				{
					text-transform: uppercase;
					font-size: 14px;
					font-weight: 200;
				}

				.playerspot .spotlightBottom .detail .statItem .statValue
				{
					font-size: 24px;
					font-weight: 200;
					line-height: 22px;
				}

.communityhub
{
	position: relative;
	overflow: hidden;
}

	.communityhub h6
	{
		color: rgba(245,245,245,0.5);
		font-style: italic;

		margin-bottom: 5px;
	}

	.communityhub .videoList
	{
		box-shadow: 0 1px 4px rgba(0,0,0,0.25);
		background: rgba(245,245,245,0.05);
	}

	.communityhub .featuredVideo
	{
		position: relative;
		display: block;

		height: 380px;
		padding: 125px 10px 0 36px;

		color: #f5f5f5;
		background: black;
		
		-webkit-transition: 0.25s;
		transition: 0.25s;
	}
		.react-mobile .featuredVideo{
			overflow:hidden;
			padding-top:0;
		}

		.communityhub .featuredVideo:hover
		{
			background: rgb(30,36,43);
		}

		.communityhub .featuredVideo .background
		{
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			opacity: 0.75;
			background-size: cover;
			background-position: 50% 50%;
		}

		.communityhub .featuredVideo .title
		{
			position: relative;
			z-index: 2;

			margin-bottom: 10px;
			padding-right: 100px;

			font-size: 24px;
			
			-webkit-transform: translateY(80px);
			transform: translateY(80px);

			-webkit-transition: 0.25s;
			transition: 0.25s;
		}
			.react-mobile .communityhub .featuredVideo .title{
				padding-right:0;
			}
			.communityhub .featuredVideo:hover .title
			{
				-webkit-transform: translateY(0);
				transform: translateY(0);
			}

			.communityhub .featuredVideo .icon
			{
				position: relative;
				display: block;
				top: 80px;
				z-index: 5;

				width: 70px;
				height: 70px;
				margin-bottom: 10px;

				background: url('/img/theme/bungienet/bgs/bg_youtube_play.svg') 50% 50% no-repeat;
				background-size: cover;
				opacity: 0.3;

				transform-origin: 0 0;

				-webkit-transition: 0.25s;
				transition: 0.25s;
			}

				.communityhub .featuredVideo:hover .icon
				{
					opacity: 0.1;
					transform: translateY(-27px) scale(2);
				}

		.communityhub .featuredVideo .description
		{
			position: relative;
			z-index: 2;

			padding-right: 100px;

			opacity: 0;
			font-size: 14px;
			font-weight: 200;
			
			-webkit-transform: translateY(40px);
			transform: translateY(40px);

			-webkit-transition: 0.25s;
			transition: 0.25s;
		}

			.communityhub .featuredVideo:hover .description
			{
				opacity: 0.75;
				
				-webkit-transform: translateY(0);
				transform: translateY(0);
			}
		
		#youtubeIframeWrapperDialogContainer
		{
			position: fixed;
			z-index: 10000;
			background: rgba(30,36,43, 0.7);
		}
		
		#youtubeIframeWrapperDialogContainer .simpleDialog
		{
			position: fixed;
		}

	.communityhub .listVideo
	{
		position: relative;
		display: block;

		height: 106px;
		padding: 18px;

		color: #f5f5f5;
		font-size: 18px;
	}
		.react-mobile .listVideo{
			height:auto;
			overflow:hidden;
		}
		
		.communityhub .listVideo:before
		{
			content: "";
			display: block;
			position: absolute;
			top: 50%;
			right: 5%;
			
			height: 35px;
			width: 35px;
			margin-top: -17px;

			background: url('/img/theme/bungienet/bgs/bg_youtube_play.png') 0 0 no-repeat;
			background-size: cover;
			opacity: 0.25;
		}
			.react-mobile .communityhub .listVideo:before{
				right: 6%;
				top: 70%;
			}

		.communityhub .listVideo .thumbnail
		{
			position: relative;
			float: left;

			width: 125px;
			height: 70px;
			margin-right: 18px;

			background-size: cover;
			background-position: 50% 50%;
		}
			.react-mobile .communityhub .listVideo .thumbnail{
				float:none;
				width:100%;
			}

		.communityhub .listVideo .videoInfo
		{
			position: relative;
			float: left;

			width: calc(90% - 145px);
		}
			
			.react-mobile .communityhub .listVideo .videoInfo {
				width: calc(90% - 21px);
			}

			.communityhub .listVideo .videoInfo .channel
			{
				font-size: 14px;
				font-weight: 200;
			}

	.communityhub .viewAll
	{
		display: block;

		height: 75px;
		line-height: 75px;
		margin: 3px 0 18px;

		text-align: center;
		color: #f5f5f5;

		background:  #181D25;
		box-shadow: 0 1px 4px rgba(0,0,0,0.25);
		
		-webkit-transition: 0.25s;
		transition: 0.25s;
	}

		.communityhub .viewAll:hover
		{
			background: #1A2026;
		}

@media only screen and (max-width: 1515px)
{
	.callout:not(.event)
	{
		margin-top: -64px;
	}

	.countdown-timer
	{
		margin-bottom: 64px;
	}

	.calloutImage
	{
		top: 0;
	}

	.homesection
	{
	}
}

@media only screen and (max-width: 1200px)
{
	.grid.fluid > .grid-col-7,
	.grid.fluid > .grid-col-6,
	.grid.fluid > .grid-col-5
	{
		width: 100%;
		margin: 0 0 18px 0;
	}
	
	.grid.fluid > .grid-col-6 + [class*="grid-col-"],
	.grid.fluid > .grid-col-5 + [class*="grid-col-"]
	{
		margin-left: 0;
	}
	
	.grid.fluid > .grid-col-3,
	.grid.fluid > .grid-col-4
	{
		width: calc(50% - 9px);
	}

	.updates .misc .item.releases
	{
		margin-top: 0;
	}
}