﻿body
{
	padding-top: 74px;

	background-size: cover;
	background-attachment: fixed;
	background-color: #202129;
	background-position: 30% 0;
}

body.Subclass .backgrounds
{
	position: fixed;
	height: 100vh;
}

body.Titan .backgrounds .bg1
{
	background-image: url("../images/subclasses/bg-titan.jpg");
}

body.Hunter .backgrounds .bg1
{
	background-image: url("../images/subclasses/bg-hunter.jpg");
}

body.Warlock .backgrounds .bg1
{
	background-image: url("../images/subclasses/bg-warlock.jpg");
}

body.Subclass .backgrounds .bg1 video
{
	position: absolute;
	display: none;
	width: auto;
	height: auto;
	min-width: 100%;
}

	.objectfitcover body.Subclass .backgrounds .bg1 video
	{
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 0 0;
	}

h1
{
	position: relative;

	padding: 10px 0;
	margin-bottom: 20px;

	border: 1px solid #FFF;
	border-width: 6px 0 2px;

	font-size: 4.75rem;
	font-weight: bold;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

	html:not(.en) h1
	{
		font-size: 3rem;
	}

	h1 .tinytext
	{
		bottom: 5px;
		right: 5px;
	}

h4
{
	position: relative;

	padding-bottom: 10px;

	font-style: italic;
	font-weight: 500;

	border-bottom: 2px solid #FFF;
}

	h4 .tinytext
	{
		right: 5px;
		bottom: 5px;
	}

span.tinytext
{
	position: absolute;
	font-size: 0.4375rem;
	font-family: Roboto, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: white;
}

a span.tinytext
{
	color: white;
}

#wrapper
{
	position: relative;

	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 18px 200px;
}

#content
{
	float: right;

	max-width: 602px;
	margin-top: 180px;
	padding: 18px;
	font-family: Roboto, sans-serif;

	background-position: 50% 0;
	background-repeat: no-repeat;
}

	.Titan #content
	{
		background-image: url("../images/subclasses/icon-titan-subclass.png");
	}

	.Warlock #content
	{
		background-image: url("../images/subclasses/icon-warlock-subclass.png");
	}

	.Hunter #content
	{
		background-image: url("../images/subclasses/icon-hunter-subclass.png");
	}

	html:not(.mobile) #content > *
	{
		opacity: 0;

		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);

		-webkit-transition: opacity 0.5s, transform 0.5s;
		transition: opacity 0.5s, transform 0.5s;
	}

		html:not(.mobile) #content > .on
		{
			opacity: 1;

			-webkit-transform: translateY(0);
			transform: translateY(0);
		}

	.pre-details
	{
	}

		.pre-details h4
		{
			border: 0;
		}

	.quote
	{
		margin-bottom: 20px;

		font-style: italic;
	}

	.screenshots
	{
		margin: 80px 0 30px;
	}

		.screenshots .screenshot
		{
			position: relative;
			float: left;

			cursor: pointer;
		}

			.screenshots  .screenshot:nth-of-type(2)
			{
				margin-left: 15px;
			}

			.screenshots .tinytext
			{
				left: 0;
				top: -12px;
			}

			.screenshots .screenshot .scale-wrap
			{
				overflow: hidden;

				width: 275px;
				height: 155px;

				border: 1px solid white;
				background: rgba(0, 0, 0, 0.2);
			}

			.screenshots .screenshot img
			{
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;

				-webkit-transition: 0.25s;
				transition: 0.25s;
			}

			.screenshots .screenshot:hover img
			{
				-webkit-transform: scale(1.05);
				transform: scale(1.05);
			}

	.ability
	{
		padding: 25px 0 25px 93px;

		font-size: 1.125rem;

		background-position: 0 50%;
		background-repeat: no-repeat;
	}

		.ability h3
		{
			font-size: 1.5rem;
			font-weight: bold;
		}
		
		.Titan .ability.super		{ background-image: url("../images/subclasses/icon-titan-super.png"); }
		.Titan .ability.one			{ background-image: url("../images/subclasses/icon-titan-ability1.png"); }
		.Titan .ability.two			{ background-image: url("../images/subclasses/icon-titan-ability2.png"); }
		.Titan .ability.three		{ background-image: url("../images/subclasses/icon-titan-ability3.png"); }
		
		.Warlock .ability.super		{ background-image: url("../images/subclasses/icon-warlock-super.png"); }
		.Warlock .ability.one		{ background-image: url("../images/subclasses/icon-warlock-ability1.png"); }
		.Warlock .ability.two		{ background-image: url("../images/subclasses/icon-warlock-ability2.png"); }
		.Warlock .ability.three		{ background-image: url("../images/subclasses/icon-warlock-ability3.png"); }
		
		.Hunter .ability.super		{ background-image: url("../images/subclasses/icon-hunter-super.png"); }
		.Hunter .ability.one		{ background-image: url("../images/subclasses/icon-hunter-ability1.png"); }
		.Hunter .ability.two		{ background-image: url("../images/subclasses/icon-hunter-ability2.png"); }
		.Hunter .ability.three		{ background-image: url("../images/subclasses/icon-hunter-ability3.png"); }

	.separator
	{
		position: relative;

		padding-top: 5px;
		border-bottom: 2px solid white;
	}

		.separator .tinytext
		{
			right: 5px;
			bottom: 5px;
		}

	.comic
	{
		position: relative;
		
		margin: 76px 0 112px;

		border: 1px solid white;
		cursor: pointer;
	}

		.comic:after
		{
			content: url("../images/subclasses/icon-pa-presents.png");

			position: absolute;
			left: 20px;
			top: -48px;

			-webkit-transition: 0.25s;
			transition: 0.25s;
		}

			.comic:hover:after
			{
				top: -58px;
			}

		.comic img
		{
			width: 100%;
			height: auto;
		}

		.comic .read-more
		{
			position: absolute;

			bottom: 0;
			left: 0;

			width: 100%;
			height: 61px;

			font-size: 1.5rem;
			font-weight: bold;
			text-align: center;
			line-height: 61px;
			letter-spacing: 5px;

			background: rgba(0, 0, 0, 0.8);

			-webkit-transition: 0.25s;
			transition: 0.25s;
		}

			.comic:hover .read-more
			{
				background: black;
			}

	.shirt
	{
		position: relative;

		height: 246px;
		margin-top: 36px;
	}

		.shirt .shirt-image
		{
			position: absolute;
			z-index: 5;

			top: -40px;
			left: 18px;
			width: 231px;
			height: 246px;

			background-size: contain;
			background-position: 0 50%;
			background-repeat: no-repeat;
		}

			.Titan .shirt .shirt-image { background-image: url("../images/subclasses/shirt-titan.png"); }
			.Warlock .shirt .shirt-image { background-image: url("../images/subclasses/shirt-warlock.png"); }
			.Hunter .shirt .shirt-image { background-image: url("../images/subclasses/shirt-hunter.png"); }

		.shirt .details
		{
			position: relative;

			width: 100%;
			height: 169px;
			padding-top: 25px;
			padding-left: 250px;

			border: 1px solid white;
			border-width: 1px 0;
		}

			.pt-br .shirt .details
			{
				height: 189px;
			}

		.shirt .button-link
		{
			display: inline-block;
			border-color: white;
			padding-right: 20px;
			line-height: 20px;
			letter-spacing: 5px;
			font-size: 0.875rem;
		}

		.shirt .tinytext
		{
			right: 5px;
			left: auto;
			top: -12px;
		}

@media all and (max-width: 960px)
{

	body.Titan,
	body.Warlock,
	body.Hunter
	{
		background-position: 0 0;
		background-size: auto 100%;
		background-repeat: no-repeat;
	}
	
	h1
	{
		font-size: 2.5rem;
	}

	#content
	{
		float: none;
		margin: 0 auto;
		padding-top: 0;
		background: none !important;
	}

	#wrapper
	{
		margin-top: 65vh;
		padding-top: 20px;
		background: rgba(0, 0, 0, 0.75);
	}

	.screenshots .screenshot
	{
		float: none;
		margin: 10px auto 20px !important;
	}

	.shirt
	{
		height: auto;

		border: none;
	}

	.shirt .shirt-image
	{
		position: relative;
		left: auto;
		margin: 0 auto;
	}

	.shirt .details
	{
		padding-left: 0;
		padding-top: 0;
		border: 0;
		text-align: center;
	}

	.comic .read-more
	{
		height: 30px;
		line-height: 30px;
		font-size: 1.125rem;
	}

	video
	{
		display: none !important;
	}
}