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

	RESETS                            

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


html
{
	height: 100%;
}

	.uiDisabled
	{
		
	}

html:after
{
	position: fixed;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;

	background: #060606;

	transition: opacity 0.25s !important;
}

html.documentReady:after
{
	opacity: 0;
	visibility: hidden;
}

html,body {
	margin: 0;
}

ul, li,
h1, h2, h3, h4, h5, h6
{
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6
{
		font-weight: 700;
	font-weight: normal;
}

ul, li
{
	list-style-type: none;
}

a
{
	text-decoration: none;
	cursor:pointer;
}

.ja em
{
	font-style:normal !important;
}

img
{
	border:0;
}


/*=======================================
	
	WEBVIEW SETTINGS FOR APP

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

html.WebViewMode header
{
	display: none !important;
}

html.WebViewMode body
{
	padding-top: 0 !important;
}

html.WebViewMode footer
{
	display: none !important;
}



/*=======================================
	
	GRID & COMMON LAYOUT RULES

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

.grid
{
	position: relative;
	box-sizing: border-box;

	max-width: 1280px;
	padding: 0 9px;
	margin: 0 auto;
}

	.grid.flex
	{  
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;

		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.grid.nopadding
	{
		padding: 0;
	}

	.grid *
	{
		box-sizing: border-box;
	}

	.grid [class*='grid-col-']
	{
		float: left;
		margin-left: 9px;
		margin-right: 9px;
	}

	.grid:after,
	.grid:before
	{
		content: " ";
		display: table;
	}

	.grid:after
	{
		clear: both;
	}

	.grid .grid-block
	{
		padding: 18px;
		margin-bottom: 18px;
		background: #181D25;
	}

	.grid .grid-col-1 
	{
		width: calc(8.33333% - 18px);
	}

	.grid .grid-col-2
	{
		width: calc(16.66667% - 18px);
	}

	.grid .grid-col-3
	{
		width: calc(25% - 18px);
	}

	.grid .grid-col-4
	{
		width: calc(33.33333% - 18px);
	}

	.grid .grid-col-5
	{
		width: calc(41.66667% - 18px);
	}

	.grid .grid-col-6
	{
		width: calc(50% - 18px);
	}

	.grid .grid-col-7
	{
		width: calc(58.33333% - 18px);
	}

	.grid .grid-col-8
	{
		width: calc(66.66667% - 18px);
	}

	.grid .grid-col-9
	{
		width: calc(75% - 18px);
	}

	.grid .grid-col-10
	{
		width: calc(83.33333% - 18px);
	}

	.grid .grid-col-11
	{
		width: calc(91.66667% - 18px);
	}

	.grid .grid-col-12
	{
		width: calc(100% - 18px);
	}

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

	.grid .grid-col-1-large 
	{
		width: calc(8.33333% - 18px);
	}

	.grid .grid-col-2-large 
	{
		width: calc(16.66667% - 18px);
	}

	.grid .grid-col-3-large 
	{
		width: calc(25% - 18px);
	}

	.grid .grid-col-4-large 
	{

		width: calc(33.33333% - 18px);
	}

	.grid .grid-col-5-large 
	{

		width: calc(41.66667% - 18px);
	}

	.grid .grid-col-6-large 
	{

		width: calc(50% - 18px);
	}

	.grid .grid-col-7-large 
	{
		width: calc(58.33333% - 18px);
	}

	.grid .grid-col-8-large 
	{

		width: calc(66.66667% - 18px);
	}

	.grid .grid-col-9-large 
	{
		width: calc(75% - 18px);
	}

	.grid .grid-col-10-large 
	{
		width: calc(83.33333% - 18px);
	}

	.grid .grid-col-11-large 
	{
		width: calc(91.66667% - 18px);
	}

	.grid .grid-col-12-large 
	{
		width: calc(100% - 18px);
	}

	.grid .grid-hide-large
	{
		display: none;
	}
}
	
@media only screen and (max-width : 992px) {

	.grid .grid-col-1-medium
	{
		width: calc(8.33333% - 18px);
	}

	.grid .grid-col-2-medium
	{
		width: calc(16.66667% - 18px);
	}

	.grid .grid-col-3-medium
	{
		width: calc(25% - 18px);
	}

	.grid .grid-col-4-medium
	{

		width: calc(33.33333% - 18px);
	}

	.grid .grid-col-5-medium
	{

		width: calc(41.66667% - 18px);
	}

	.grid .grid-col-6-medium
	{

		width: calc(50% - 18px);
	}

	.grid .grid-col-7-medium
	{
		width: calc(58.33333% - 18px);
	}

	.grid .grid-col-8-medium
	{

		width: calc(66.66667% - 18px);
	}

	.grid .grid-col-9-medium
	{
		width: calc(75% - 18px);
	}

	.grid .grid-col-10-medium
	{
		width: calc(83.33333% - 18px);
	}

	.grid .grid-col-11-medium
	{
		width: calc(91.66667% - 18px);
	}

	.grid .grid-col-12-medium
	{
		width: calc(100% - 18px);
	}

	.grid .grid-hide-medium
	{
		display: none;
	}
}

@media only screen and (max-width : 768px) {
	.grid .grid-col-1-mobile
	{
		width: calc(8.33333% - 18px);
	}

	.grid .grid-col-2-mobile
	{
		width: calc(16.66667% - 18px);
	}

	.grid .grid-col-3-mobile
	{
		width: calc(25% - 18px);
	}

	.grid .grid-col-4-mobile
	{
		width: calc(33.33333% - 18px);
	}

	.grid .grid-col-5-mobile
	{
		width: calc(41.66667% - 18px);
	}

	.grid .grid-col-6-mobile
	{
		width: calc(50% - 18px);
	}

	.grid .grid-col-7-mobile
	{
		width: calc(58.33333% - 18px);
	}

	.grid .grid-col-8-mobile
	{
		width: calc(66.66667% - 18px);
	}

	.grid .grid-col-9-mobile
	{
		width: calc(75% - 18px);
	}

	.grid .grid-col-10-mobile
	{
		width: calc(83.33333% - 18px);
	}

	.grid .grid-col-11-mobile
	{
		width: calc(91.66667% - 18px);
	}

	.grid .grid-col-12-mobile
	{
		width: calc(100% - 18px);
	}

	.grid .grid-hide-mobile
	{
		display: none;
	}
}

@media only screen and (max-width : 480px) {

	.grid .grid-col-1-tiny
	{
		width: calc(8.33333% - 18px);
	}

	.grid .grid-col-2-tiny
	{
		width: calc(16.66667% - 18px);
	}

	.grid .grid-col-3-tiny
	{
		width: calc(25% - 18px);
	}

	.grid .grid-col-4-tiny
	{
		width: calc(33.33333% - 18px);
	}

	.grid .grid-col-5-tiny
	{
		width: calc(41.66667% - 18px);
	}

	.grid .grid-col-6-tiny
	{
		width: calc(50% - 18px);
	}

	.grid .grid-col-7-tiny
	{
		width: calc(58.33333% - 18px);
	}

	.grid .grid-col-8-tiny
	{
		width: calc(66.66667% - 18px);
	}

	.grid .grid-col-9-tiny
	{
		width: calc(75% - 18px);
	}

	.grid .grid-col-10-tiny
	{
		width: calc(83.33333% - 18px);
	}

	.grid .grid-col-11-tiny
	{
		width: calc(91.66667% - 18px);
	}

	.grid .grid-col-12-tiny
	{
		width: calc(100% - 18px);
	}

	.grid .grid-hide-tiny
	{
		display: none;
	}
}

/*=======================================
	
	COMMON LAYOUT

=======================================*/
body
{
	position: relative;
	overflow-y: scroll;

	width: 100%;
	min-width: 960px;
	padding-top: 60px;

	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 16px;
	-webkit-font-smoothing: antialiased; /* Because Stvan whined */
}

	html.scroll-hidden body
	{
	}

	html.mobile-nav-enabled body
	{
		min-width: 320px;
	}

	.nav-open body
	{
		height: 100%;
		overflow: hidden;
	}

	body.loadingPage
	{
		cursor: progress;
	}

	body.noSubNav
	{
		padding-top: 60px;
	}

	body.noSubNav nav.Sub_Nav
	{
		display: none;
	}
	

.bg_secondary.JS
{
	height: auto;
}

.bg_separate
{
	position: fixed;
	top: 0;

	width: 100%;
	height: 100%;

	will-change: transform;

	transition: 0.5s;
	-webkit-transition: 0.5s;
}


#content
{
	position: relative;

	width: 100%;
}

#mainContent
{
	position: relative;
	display: inline-block;
	vertical-align: top;
	overflow: hidden;

	width: 100%;
	min-height: calc(100vh - 60px);
}

	.noSubNav #mainContent
	{
		min-height: 100vh;
	}

	.safari #mainContent
	{
		min-height: 800px;
	}

.text-content ul
{
	margin: 0 0 0 36px;
	list-style-type: disc;
}

	.text-content ul li
	{
		margin: 4px 0;
		list-style-type: disc;
	}

		.text-content ul ul li
		{
			list-style-type: circle;
		}

			.text-content ul ul ul li
			{
				list-style-type: square;
			}

/*=======================================
	
	SIDEBAR

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

#sidebar,
body.compact #sidebar.opened,
body.SidebarClosed #sidebar.opened
{
	position: fixed;
	overflow: hidden;
	top: 60px;
	right: 0;
	bottom: 0;

	vertical-align: top;

	width: 250px;
	margin-left: -4px;

	background: rgba(30, 36, 43, 0.9);
	border-left: 1px solid rgba(255,255,255,0.1);
	font-family:'Roboto', 'Open Sans', Arial, sans-serif;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);

	z-index: 99;

	transition: top 0.25s;
}
	
	html.scroll-hidden #sidebar{
		top: 0;
	}

.touch body.compact #sidebar.opened, 
.touch body.SidebarClosed #sidebar.opened { 
	overflow: auto !important; 
}

#sidebar .panel
{
	display:none;
}
	#sidebar .panel.on
	{
		display:table;
		width:100%;
		position:relative;
	}
#sidebar .tab   
{
	display:table-cell;
	table-layout:fixed;
	vertical-align:top;
}
	#sidebar .tab > .trigger
	{
		display: inline-block;
		font-size: 12px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		width: 100%;
		color:#acb2b8;
		background:#202637;
	}
		#sidebar .tab.current > .trigger,
		#sidebar .tab > .trigger:hover
		{
			background: none repeat scroll 0 0 #1A1E24;
			color:#fff;
		}

		#sidebar .tab h3
		{
			position: relative;
			overflow: hidden;
			white-space: nowrap;

			width: 100%;
			height: 46px;
			line-height: 46px;

			color: #b7bec1;
			text-overflow: ellipsis;
			font-size: 12px;
			font-weight: 500;
			text-indent: 12px;
			
			background: #151619;

			cursor:pointer;
		}
			#sidebar .tab h3.collapseTrigger
			{
				text-indent: 36px;

				cursor: pointer;
			}

			#sidebar .sectionContent
			{
				position: relative;
			}

			#sidebar .section h3.collapseTrigger:before
			{
				position: absolute;
				content: "+";

				left: 10px;
				top: 10px;

				width: 18px;
				height: 18px;
				line-height: 16px;

				text-indent: 0;
				text-align: center;
				font-size: 14px;

				border: 1px solid rgba(255,255,255,0.3);
				border-radius: 50%;
			}

			#sidebar .section.collapseTrigger.open h3:before
			{
				content: "-";
				
				font-size: 20px;
				line-height: 0.6;
				font-weight: 500;
			}

				.webkit #sidebar .section.open h3.collapseTrigger:before
				{
					line-height: 0.7;
				}

				.sidebarItem
				{
					position: relative;

					min-height: 41px;
					line-height: 18px;
					padding: 10px 10px 10px 60px;
					margin: -1px 0 0 0;

					color: #c6d2d9;

					font-size: 14px;
					font-weight: 400;

					border-left: 3px solid rgba(0,0,0,0);

					cursor: default;
				}

					.sidebarItem.active
					{
						background: rgba(0,0,0,0.2);	
					}

					.sidebarItem.sidebarButton
					{
						min-height: 0;
						background: #393d48;
						cursor: pointer;
					}

					.sidebarItem.hoverable:hover
					{
						background: #2d323b;
						
						border-left: 3px solid #0075ab;

						cursor: pointer;
					}

					.sidebarItem .label
					{
						padding: 4px 0 2px;
					}

					.sidebarItem .icon
					{
						position: absolute;
						top: 10px;
						left: 10px;

						width: 40px;
						height: 40px;

						background-size: cover;
					}

					.sidebarItem .value
					{
						font-weight: 200;
					}

					.sidebarItem .subtitle
					{
						position: relative;

						opacity: 0.4;
						font-size: 11px;
					}

#tooltips .tooltip,
#sidebar .tooltip
{
	position: fixed;
	top: 0;
	right: 249px;
	z-index: 100;

	opacity: 0;
	visibility: hidden;

	transition: opacity 0.5s ease;
	-webkit-transition: opacity 0.5s ease;
	-webkit-transform:translateZ(0);
}

		#tooltips .tooltip.on
		{
			opacity: 1;
			visibility: visible;
		}

.tabContent
{
	position:absolute;
	top: 50px;
	display:none;

	width:249px;
	left:0;
	padding-bottom:90px;
}
	.current .tabContent 
	{
		display:block;
	}

	
body.NoSidebar #sidebar
{
	display: none !important;
}

body.ClosedSidebar #sidebar.closed,
body.compact #sidebar,
body.compact #sidebar.closed
{
	right: 0;
	width: 0;
	overflow: visible;
	border: 0;
}

body.ClosedSidebar #sidebar.closed .customScrollHandle,
body.compact #sidebar.closed .customScrollHandle
{
	display: none;
}

body.compact #sidebarTab
{
	position: absolute;
	display: block;
	left: -30px;
		
	width: 30px;
	height: 150px;

	background: rgba(0,0,0,0.5);
	border: 0;

	cursor: pointer;

	display:none;
}
body.compact #sidebar .panel.on .tab.current > .trigger,
body.compact #sidebar.closed .panel.on .tab.current > .trigger,
body.ClosedSidebar #sidebar.closed .panel.on .tab.current > .trigger
{
	position: absolute;
	display: block;
	top: 71px;
	left: -100px;
	
	min-width: 150px;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;

	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
	border: 0 none;
	cursor: pointer;

	transform: rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-webkit-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);

	transition:all 2ms linear;
}
	body.compact #sidebar.opened .panel.on .tab.current > .trigger,
	body.ClosedSidebar #sidebar.opened .panel.on .tab.current > .trigger
	{
		position:static;
		display: inline-block;
		
		width: 100%;
		min-width:0;
		height: 61px;
		line-height: 46px;
		padding:0;

		-moz-transform:rotate(0);
		-webkit-transform:rotate(0);
		-ms-transform:rotate(0);
		transform:rotate(0);

		font-size: 12px;
		text-align: center;

		background: none repeat scroll 0 0 #1A1E24;
		color:#fff;
	}






#sidebarContent > .tabSections > div
{
	display: none;

	height: 65px;
	margin-top: 18px;

	color: #FFF;
		
	border-bottom: 1px solid #23282f;
	border-left: 3px solid rgba(0,0,0,0);
}
	
#sidebarContent > .tabSections.current > div
{
	display: block;
}	

#sidebarContent > .tabSections > div:hover
{
	background: #2d323b;
	border-left: 3px solid #0096db;

	cursor: pointer;
}
	
.AnchorHash
{
	width: 0px;
	height: 54px;
	position: relative;
	margin-top: -54px;
	display: block;
}



/*=======================================
	
	SECTION BANNER

=======================================*/
	
.sectionBanner
{
	position: relative;
	display: block;
	
	left: 0;
	
	width: 100%;
	height: 210px;
	min-width: 899px;
	
	transition: 0.25s;
}

	.mobile-nav-enabled .sectionBanner
	{
		min-width: 0;
	}

	.sectionBanner h2
	{
		color: #fff;
		font-family: Roboto,Arial,sans-serif;
		font-size: 56px;
		font-weight: 400;
		letter-spacing: 30px;
		line-height: 210px;
		text-align: center;
		text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		text-transform: uppercase;
	}

@media only screen and (max-height: 667px), (max-width: 1515px)
{
	.sectionBanner:not(.locked)
	{
		height: 105px;
		
		-moz-transition: height .25s ease;
		-o-transition: height .25s ease;
		-webkit-transition: height .25s ease;
		transition: height .25s ease;
	}

	.sectionBanner:not(.locked) h2 {
		font-size: 45px;
		line-height: 105px;
	}

	.sectionBanner.hasNav:not(.locked) h2
	{
		display: none;
	}
}



/*=======================================
	
	PARALLAX BANNER

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

.parallax-banner
{
	position: relative;
	overflow: hidden;

	width: 100%;
	height: calc(50vh - 60px);
	max-height: 590px;
	min-height: 300px;

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

	.react-large .parallax-banner
	{
		height: 40vh;
		min-height: 200px;
	}

	.react-medium .parallax-banner
	{
		height: 30vh;
		min-height: 100px;
	}

	.parallax-banner .image
	{
		position: absolute;

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

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


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

	FILTER BAR                            

=======================================*/
.filterBarContainer
{
	position: relative;

	min-height: 3.625rem;

	background: rgb(30, 36, 43);
	color: #F5F5F5;
}

	.mobile.react-mobile .filterBarContainer:after,
	.mobile.react-mobile .filterBarContainer:before
	{
		content: "";
		position: absolute;
		z-index: 5;

		top: 0;
		right: 0;
		width: 30px;
		height: 100%;
		opacity: 0;

		background: linear-gradient(to right, transparent, rgba(245,245,245,0.25));
		pointer-events: none;

		transition: 0.25s;
	}

		.mobile.react-mobile .filterBarContainer:before
		{
			right: auto;
			left: 0;
			
			background: linear-gradient(to left, transparent, rgba(245,245,245,0.25) );
		}

		.mobile.react-mobile .filterBarContainer.more-to-scroll-right:after
		{
			opacity: 1;
		}

		.mobile.react-mobile .filterBarContainer.more-to-scroll-left:before
		{
			opacity: 1;
		}

	.filterBarContainer.no-bg
	{
		background: transparent;
		color: rgb(245,245,245);
		border: 1px solid rgba(245,245,245,0.1);
		border-width: 1px 0;
	}

	.filterBar
	{
		line-height: 3.625rem;
		margin: 0 auto;
		max-width: 1280px;
		height: 100%;

		font-size: 0.875rem;
	}

		.mobile.react-mobile .filterBar
		{
			white-space: nowrap;

			overflow-x: auto;
			overflow-y: visible;

			font-size: 1rem;
		}

		.filterBar nav a
		{
			position: relative;
			display: inline-block;

			padding: 0 1.125rem;

			color: rgba(245,245,245,0.5);
		}

			.filterBar nav a.current
			{
				color: #F5F5F5;
			}

				.filterBar nav a.current:after
				{
					content: "";
					position: absolute;

					bottom: 0;
					left: 0;
					right: 0;
					height: 3px;

					background: rgba(206, 174, 50, 1);
				}

			.filterBar nav a:hover
			{
				color: #F5F5F5;
			}

		.filterBar p
		{
			border-left: 1px solid rgba(0, 0, 0, 0.2);
			font-weight: bold;
			line-height: 30px;
			margin: 0 auto 0 254px;
			padding-left: 18px;
			position: relative;
			top: 14px;
		}

		.filterBar #submitButton
		{
			border: 1px solid rgba(30, 36, 43, 0.2);
			cursor: pointer;
			line-height: 20px;
			padding: 10px 20px;
			position: absolute;
			right: 18px;
			top: 8px;
			transition: all 0.25s ease 0s;
		}

			.filterBar #submitButton:hover
			{
				color: #F5F5F5;
				background: rgb(71, 156, 228);
			}

		.filterBar [class*='grid-col-'] input[type=text]
		{
			position: relative;

			width: 100%;
			height: 30px;
			line-height: 30px;
			padding: 0 16px;
		}
		

		.filterBar select {

			padding: 5px 8px;

			color: #F5F5F5;
			border: none;
			box-shadow: none;
			background: rgba(30,36,43, 1);
			background-image: none;
			border: 1px solid rgba(245,245,245,0.1);

			font-size: 12px;
		}

			.filterBar select.changed
			{
				color: rgb(255, 206, 31);
			}

			.filterBar select:focus {
				outline: none;
			}

			.filterBar select:hover
			{
				background: rgba(40, 46, 53, 1);
			}

			.filterBar select:after
			{
				content: "\f0d7";
				font-family: FontAwesome;

				position: absolute;
				top: 9px;
				right: 7px;

				color: rgba(245, 245, 245, 1);
			}







		.filterBar .container_select {
			background: rgba(30, 36, 43, 1) none repeat scroll 0 0;
			border: 1px solid rgba(245, 245, 245, 0.1);
			display: inline-block;
			font-size: 11px;
			line-height: 1;
			margin-right: 9px;
			overflow: hidden;
			padding: 0 10px 0 0;
			position: relative;
			vertical-align: middle;
			width: auto;
		}
		.filterBar .container_select select {
			-moz-appearance: none;
			-webkit-appearance: none;
			appearance: none;
			background: rgba(30, 36, 43, 1) none repeat scroll 0 0;
			border: medium none;
			box-shadow: none;
			color: #f5f5f5;
			font-size: 12px;
			padding: 5px 8px;
			width: 130%;
		}
		.filterBar .container_select select.changed {
			color: rgb(255, 206, 31);
		}
		.filterBar .container_select select:focus {
			outline: medium none;
		}
		.filterBar .container_select select:hover {
			background: rgba(40, 46, 53, 1) none repeat scroll 0 0;
		}
		.filterBar .container_select::after {
			color: rgba(245, 245, 245, 1);
			content: "";
			font-family: FontAwesome;
			position: absolute;
			right: 7px;
			top: 9px;
		}


	/* Character switcher */
	.filterBar .character-switcher
	{
		position: relative;
		display: inline-block;	
		vertical-align: top;
		z-index: 10;

		height: 58px;
			
		-webkit-transition: 0.25s;
		transition: 0.25s;
	}

		.filterBar .character-switcher:after
		{
			content: "";
			position: absolute;
			display: block;
			z-index: 20;

			top: 12px;
			right: 0;
			width: 1px;
			height: 34px;

			background: rgba(30,36,43,0.1);
		}

		.filterBar .character-switcher i
		{
			position: absolute;
			z-index: 11;

			top: 0;
			right: 16px;
			height: 58px;
			line-height: 58px;
			
			-webkit-transition: 0.25s;
			transition: 0.25s;
		}

			.no-bg .filterBar .character-switcher:hover i
			{
				color: rgb(30,36,43);
			}

		.filterBar .character-switcher .character-item
		{
			position: relative;
			display: block;
			box-sizing: border-box;

			padding: 0 38px 0 52px;

			color: #F5F5F5;
			border: 0 solid rgba(71,156, 228, 0);
			border-width: 0 0 0 3px;
			
			-webkit-transition: 0.25s;
			transition: 0.25s;
		}

			.no-bg .filterBar .character-switcher .character-item
			{
				color: #f5f5f5;
			}

			.filterBar .character-switcher .character-item:nth-of-type(1)
			{
				margin-top: 0;
				z-index: 10;
			}

				.filterBar .character-switcher:hover .character-item:nth-of-type(1)
				{
					background: rgb(230,230,230);
					box-shadow: 0 0 5px rgba(0,0,0,0.5);
					color: rgb(30,36,43);
				}

			.filterBar .character-switcher .character-item:not(:nth-of-type(1))
			{
				height: 35px;
				line-height: 35px;
				margin-top: -35px;
				
				background: rgb(230,230,230);
				opacity: 0;
			}

				.filterBar .character-switcher:hover .character-item:not(:nth-of-type(1))
				{
					margin-top: 0;
					opacity: 1;
					color: rgb(30,36,43);
				}

				.filterBar .character-switcher .character-item:not(:nth-of-type(1)):hover
				{
					border-color: #479ce4;
					background: rgba(245, 245, 245, 1);
				}

			.filterBar .character-switcher .character-item .icon
			{
				position: absolute;
				
				top: 0;
				left: 15px;

				height: 100%;
				width: 23px;

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


	/* SEARCH */

	.companion-text-input input
	{
		background: transparent;

		width: 100%;
		height: 26px;
		padding: 4px;

		border: 0;
			
		line-height: 26px;
		font-size: 14px;
		color: #F5F5F5;

		transition: 0.5s;
	}

		.companion-text-input
		{
			position: relative;

			padding-right: 16px;

			border-bottom: 1px solid rgba(245,245,245,0.2);
		}

			.companion-text-input .fa
			{
				position: absolute;
				
				top: 50%;
				right: 0;
				width: 16px;
				margin-top: -8px;

				opacity: 0;
				color: #F5F5F5;
				
				transition: 0.25s;
			}

				.companion-text-input.contains-text .fa
				{
					opacity: 0.5;
					cursor: pointer;
				}

				.companion-text-input.contains-text .fa:hover
				{
					opacity: 1;
				}

			.companion-text-input:after
			{
				position: absolute;
				content: "";

				bottom: -1px;
				left:0;
				height: 2px;
				width: 0;
				
				background: rgba(206, 174, 50, 1);

				transition: 0.25s;
			}

				.companion-text-input.focused:after
				{
					width: 100%;
				}


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

	BREADCRUMB                            

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

.breadcrumb {
	color: rgba(245,245,245,.65);
	font-family: Roboto,Arial,sans-serif;
	font-size: 12px;
	font-weight: normal;
	height:44px;
	line-height: 44px;
	overflow:hidden;
	white-space: nowrap;
	z-index: 2;
}

	.breadcrumb a:last-child {
		background: none;
	}

	.breadcrumb a,
	.breadcrumb a:only-child {
		color: rgba(245, 245, 245, 0.65);
		display: inline;
		font-family: Roboto,Arial,sans-serif;
		font-size: 12px;
		font-weight: normal;
		letter-spacing: normal;
		margin: 0 6px;
		text-align: left;
		text-shadow: none;
		text-transform: none;
	}

	.breadcrumb > :first-child {
		margin-left: 0;
	}

	.breadcrumb a:hover {
		text-decoration: underline;
	}

	.breadcrumb span {
		color: rgba(245, 245, 245, 0.25);
		margin: 0 6px;
	}


	

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

	TOAST MESSAGES        

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

#toast-container
{
	position: fixed;
	z-index: 999;

	bottom: 18px;
	right: 18px;
}

	#toast-container .toast-message
	{
		position: relative;
		box-sizing: border-box;

		width: 350px;
		padding: 18px;
		margin-bottom: 5px;

		background: rgb(47, 54, 62);
		box-shadow: 0 5px 15px 5px rgba(0, 0, 0, 0.2);
		border-top: 3px solid rgba(206, 174, 50, 1);
		opacity: 0;
		cursor: pointer;
		
		color: rgb(245,245,245);
		font-size: 14px;
		font-weight: 400;
		line-height: 23px;

		-webkit-transform: translateY(10px);
		transform: translateY(10px);
		transition: 0.5s;
	}

		#toast-container .toast-message.warning-message
		{
			background: #e9d427;
		}

		#toast-container .toast-message.error-message
		{
			background: rgb(187, 99, 99);
			border-color: #F5F5F5;

			text-shadow: 0 1px rgba(0, 0, 0, 1);
			color: rgba(245, 245, 245, 1);
		}

		#toast-container .toast-message.on
		{
			opacity: 1;

			-webkit-transform: none;
			transform: none;
		}

		#toast-container .toast-message.off
		{
			opacity: 0;

			-webkit-transform: translateY(-10px);
			transform: translateY(-10px);
		}

		#toast-container .toast-message span
		{
			padding: 2px 4px;
			
			background: rgba(0, 0, 0, 0.3);
			border-radius: 5px;

			font-size: 13px;
			white-space: nowrap;
		}


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

	REUSABLES                            

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

.button
{
	display: inline-block;

	padding: 0 22px;
	line-height: 45px;

	font-size: 14px;
	font-weight: 800;
	color: rgb(30, 36, 43);

	background: #888;
	cursor: pointer;

	text-transform:uppercase;

	transition: background 0.25s, color 0.25s;
}

	.button:hover
	{
		background: #a3a3a3;
	}

	.button.blue
	{
		background: #479ce4;
		color: #f5f5f5;
	}

		.button.blue:hover
		{
			background: #59a8ea;
		}

	.button.comet-red
	{
		background: #992749;
		color: #f5f5f5;
	}

		.button.comet-red:hover
		{
			background: #ae3b5d;
		}

	.button.gold
	{
		background: rgb(255, 206, 31);
	}

		.button.gold:hover
		{
			background: rgb(255, 221, 102);
		}

	.button.darkblue
	{
		color: rgb(255, 206, 31);
		background: rgb(30,36,43);
	}

		.button.darkblue:hover
		{
			background: rgb(41, 47, 55);
		}

	.button.disabled,
	.button.disabled:hover
	{
		color: rgba(245,245,245,0.25);
		background: rgb(18, 22, 27);
	}

/* Old buttons - deprecated */
.btn_blue
{
	height: 12px;
	line-height: 12px;
	padding: 14px 18px;

	font-size: 12px;
	text-align: center;

	color: #FFF;
	background: #479ce4;
	box-shadow: none;
}
	.btn_blue:hover
	{
		background: #6ab5f5;
	}

	.btn_blue.unavailable
	{
		background: #c4c4c4;
	}



.select_special{
	position:relative;
}
	.select_special::after {
		background: none repeat scroll 0 0 #4b5157;
		bottom: 0;
		color: #000;
		content: "▼";
		display: inline-block;
		font-size: 7px;
		line-height: 19px;
		padding: 0 5px;
		pointer-events: none;
		position: absolute;
		right: 0;
		width: 10px;
	}

	.select_special select,
	.select_special option {
		background: none repeat scroll 0 0 #4b5157;
		margin: initial;
		padding: initial;
		width: 100%;
	}

	.select_special select {
		
		border: 1px solid rgba(0, 0, 0, 0);
		border-radius: 0;
		color: #fff;
		line-height: 18px;
		outline: medium none;
		padding: 0 0 0 3px;
		width: 100%;

		-webkit-box-shadow: 
			0 0px 0 #ccc,
			0 0px #fff inset;
		-webkit-appearance:none;

	}

		.select_special option {
			padding: 0 2px;
		}



.sectionHeader
{
	position: relative;
	display: inline-block;
	
	width: 100%;
	line-height: 19px;
	margin-bottom: 18px;

	color: rgb(255, 206, 31);
	text-shadow: 0 1px 1px rgba(0,0,0,.15);
	font-size: 18px;
	font-weight: 400; 
}

	body .sectionHeader a
	{
		color: rgb(255, 206, 31);
	}

		.sectionHeader a:hover
		{
			text-decoration: underline;
		}

	.sectionHeader.subHeader
	{
		margin-bottom: 9px;

		font-size: 12px;
		font-weight: 400;  
		letter-spacing: 0;
		text-transform: none;
		color: rgba(245,245,245,0.5);
	}

	hr
	{
		height: 0;
		margin: 18px 0;
		border: 0;
		border-bottom: 2px solid rgba(245, 245, 245, 0.1);
	}

	.sectionHeader hr
	{
		padding-top: 12px;
		margin: 0;
	}

		.sectionHeader.subHeader hr
		{
			padding-top: 6px;
		}

/* Title followed by a subtitle/description */
.standardTitle {
	color: #fff;
	display:block;
	font-size: 15px;
	margin-bottom: 5px;
}

	.standardTitleMedium
	{
		font-size: 14px;
	}

.standardDesc {
	color: rgba(245, 245, 245, 0.65);
	display:block;
	font-size: 14px;
	line-height: 19px;
}


/* Hoverable/selectable list */

.selectable-list-item
{
	position: relative;
	display: block;

	background: #14191E;
	border: 0 solid #479ce4;

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

	.selectable-list-item:hover,
	.selectable-list-item.hover
	{
		border-width: 0 0 0 3px;
		background: #1A2026;
	}
	
	.selectable-list-item.on
	{		
		border-width: 0 0 0 3px;
		background:  #1A2026;
	}


/* Item with icon */
.destiny-icon-item
{
	position: relative;

	min-height: 70px;
	padding-left: 85px;

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

	.destiny-icon-item .standardTitle
	{
		margin-bottom: 0;
	}

	.destiny-icon-item > .icon
	{
		position: absolute;

		top: 0;
		left: 0;
		width: 70px;
		height: 70px;

		border: 2px solid #F5F5F5;
		background-size: cover;

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

	.destiny-icon-item:hover
	{
		z-index: 99;

		background: rgba(245,245,245,0.05);
	}

/* Header with icon */
.destiny-icon-header
{
	padding: 20px 0;
	margin-bottom: 20px;
	clear: both;
	white-space: nowrap;

	border-bottom: 1px solid rgba(245,245,245,0.1);
}

	.destiny-icon-header > img {
		display: inline-block;
		vertical-align: middle;
		
		width: 98px;
		height: 98px;
		margin-right: 21px;

		border: 2px solid #fff;
	}

	.destiny-icon-header > .title {
		display: inline-block;
		vertical-align: middle;

		color: #fff;
		white-space: normal;
	}

	.destiny-icon-header h3 {
		font-size: 30px;
	}

	.destiny-icon-header .title p {
		color: rgba(245, 245, 245, 0.65);
		font-size: 15px;
		line-height: 24px;
	}

/* Image zoom on hover */
.image-zoom-hover
{
	overflow: hidden;
}

	.image-zoom-hover > .image,
	.image-zoom-hover > img
	{
		-webkit-transform: scale(1);
		transform: scale(1);

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

	.image-zoom-hover:hover > .image,
	.image-zoom-hover:hover > img
	{
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}



/* pager */
.pager-prev-next
{
	position: relative;
	clear: both;
	
	padding: 0 22px;

	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
	opacity: 1;

	font-size: 12px;
	line-height: 40px;
	text-align: center;

	transition: opacity 1s linear 0s;
}

	.pager-prev-next .pager-page
	{
		vertical-align: middle;

		padding: 4px 8px;

		background:  rgba(58, 66, 74, 0.25) none repeat scroll 0 0;
		border-radius: 3px;
	}

		.pager-prev-next .pager-page.current,
		.pager-prev-next .pager-page:hover,
		.pager-prev-next .pager-page:active
		{
			background: rgb(58, 66, 74);
		}

	.pager-prev-next .pager-button
	{
		vertical-align: middle;
		
		width: 24px;
		height: 24px;
		margin: 0 2px;
		padding: 4px 8px;

		background-color: transparent;
		background-position: center center;
		background-repeat: no-repeat;
		border-radius: 3px;
	}

	.pager-prev-next .pager-button:hover,
	.pager-prev-next .pager-button:active
	{
		background-color: #d1d2d3;
	}

	.pager-prev-next .pager-button.disabled:hover,
	.pager-prev-next .pager-button.disabled:active
	{
		background-color: transparent;
	}

	.pager-prev-next .pager-button.prev,
	.pager-prev-next .pager-button.prev.disabled:hover,
	.pager-prev-next .pager-button.prev.disabled:active
	{
		background-image: url("/img/theme/destiny/icons/icon_pager_prev_white.png");
	}

	.pager-prev-next .pager-button.prev:hover,
	.pager-prev-next .pager-button.prev:active
	{
		background-image: url("/img/theme/destiny/icons/icon_pager_prev_dark.png");
	}

	.pager-prev-next .pager-button.first,
	.pager-prev-next .pager-button.first.disabled:hover,
	.pager-prev-next .pager-button.first.disabled:active
	{
		background-image: url("/img/theme/destiny/icons/icon_pager_first_white.png");
	}

	.pager-prev-next .pager-button.first:hover,
	.pager-prev-next .pager-button.first:active
	{
		background-image: url("/img/theme/destiny/icons/icon_pager_first_dark.png");
	}

	.pager-prev-next .pager-button.next,
	.pager-prev-next .pager-button.next.disabled:hover,
	.pager-prev-next .pager-button.next.disabled:active
	{
		background-image: url("/img/theme/destiny/icons/icon_pager_next_white.png");
	}

	.pager-prev-next .pager-button.next:hover,
	.pager-prev-next .pager-button.next:active
	{
		background-image: url("/img/theme/destiny/icons/icon_pager_next_dark.png");
	}

	.pager-prev-next .pager-button.last,
	.pager-prev-next .pager-button.last.disabled:hover,
	.pager-prev-next .pager-button.last.disabled:active
	{
		background-image: url("/img/theme/destiny/icons/icon_pager_last_white.png");
	}

	.pager-prev-next .pager-button.last:hover,
	.pager-prev-next .pager-button.last:active
	{
		background-image: url("/img/theme/destiny/icons/icon_pager_last_dark.png");
	}

	.pager-prev-next a.disabled
	{
		cursor: default;
		opacity: 0.25;
	}








/* Item Header */

h3.item-header
{
	color: #f5f5f5;
	font-size: 30px;
}


/* App Store Buttons */
.btn_appStore
{
	background:url("/img/theme/destiny/btns/btn_appStore_notLoggedIn.png") no-repeat 0 0;
	background-size: auto 50px;
	width:190px;
	height:53px;
}
.es .btn_appStore
{
	background: url("/img/theme/destiny/btns/btn_appStore_notLoggedIn_es.png") no-repeat 0 0;
	background-size: auto 50px;
	width:190px;
	height:53px;
}
.fr .btn_appStore
{
	background: url("/img/theme/destiny/btns/btn_appStore_notLoggedIn_fr.png") no-repeat 0 0;
	background-size: auto 50px;
	width:190px;
	height:51px;
}
.it .btn_appStore
{
	background: url("/img/theme/destiny/btns/btn_appStore_notLoggedIn_it.png") no-repeat 0 0;
	background-size: auto 50px;
	width:190px;
	height:53px;
}
.pt-br .btn_appStore
{
	background: url("/img/theme/destiny/btns/btn_appStore_notLoggedIn2_pt-br.png") no-repeat 0 0;
	background-size: auto 50px;
	width:190px;
	height:53px;
}
.de .btn_appStore
{
	background: url("/img/theme/destiny/btns/btn_appStore_notLoggedIn_de.png") no-repeat 0 0;
	background-size: auto 50px;
	width:190px;
	height:53px;
}
.ja .btn_appStore
{
	background: url("/img/theme/destiny/btns/btn_appStore_notLoggedIn_ja.png") no-repeat 0 0;
	background-size: auto 50px;
	width:190px;
	height:53px;
}

.btn_googlePlay
{
	background:url("/img/theme/destiny/btns/btn_googlePlay_notLoggedIn.png") no-repeat 0 0;
	background-size: auto 50px;
	width:190px;
	height:60px;
}
.es .btn_googlePlay
{
	background:url("/img/theme/destiny/btns/btn_googlePlay_notLoggedIn_es.png") no-repeat 0 0;
	background-size: auto 50px;
	width:190px;
	height:60px;
}
.fr .btn_googlePlay
{
	background:url("/img/theme/destiny/btns/btn_googlePlay_notLoggedIn_fr.png") no-repeat 0 0;
	background-size: auto 50px;
	width:190px;
	height:60px;
}
.de .btn_googlePlay
{
	background:url("/img/theme/destiny/btns/btn_googlePlay_notLoggedIn_de.png") no-repeat 0 0;
	background-size: auto 50px;
	width:190px;
	height:60px;
}
.it .btn_googlePlay
{
	background:url("/img/theme/destiny/btns/btn_googlePlay_notLoggedIn_it.png") no-repeat 0 0;
	background-size: auto 50px;
	width:190px;
	height:60px;
}
.ja .btn_googlePlay
{
	background:url("/img/theme/destiny/btns/btn_googlePlay_notLoggedIn_ja.png") no-repeat 0 0;
	background-size: auto 50px;
	width:190px;
	height:60px;
}
.pt-br .btn_googlePlay
{
	background:url("/img/theme/destiny/btns/btn_googlePlay_notLoggedIn_pt_br.png") no-repeat 0 0;
	background-size: auto 50px;
	width:190px;
	height:60px;
}





	

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

	MOBILE - KEEP AT BOTTOM

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

html.mobile.no-ipad body {
  min-width: 0;
}

html.mobile.no-ipad header {
  min-width: 0;
}

html.mobile.no-ipad #sidebar {
  display: none;
}

html.mobile.no-ipad .bg_secondary {
  width: 100%;
  margin-left: 0;
}

html.mobile.no-ipad #content {
  width: 100% !important;
}