@import url("../../media/fonts/BrandonGrotesque/stylesheet.css");
@import url("../../media/fonts/Arvo/stylesheet.css");

@import url("global.header.css");
@import url("global.main.css");
@import url("global.footer.css");
@import url("global.ui.css");
@import url("global.dialogs.css");

/* Global Styles */
	/* Base */
		[data-viewport]
		{
			display: none !important;
		}

		html,
		body
		{
			color: #fff;
			font: 400 16px/20px "Brandon Grotesque", "Arial", "Helvetica", sans-serif;

			margin: 0;
			padding: 0;
			position: relative;

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

		html
		{
			background: #000;
			opacity: 1;
			-webkit-transition: opacity .5s;
			-webkit-transition-delay: opacity .25s;
			-ms-transition: opacity .5s;
			-ms-transition-delay: opacity .25s;
			transition: opacity .5s;
			transition-delay: opacity .25s;

			height: auto;
			min-height: 100vh;
			min-width: 1024px;
		}
		
		html.init
		{
			opacity: 0;
		}
		
		body
		{
			background: url("../../media/images/bg.jpg") 50% 0 fixed;
		}

		body.no-scroll
		{
			overflow: hidden !important;
		}
		
		body:after
		{
			box-sizing: border-box;
			display: block;
			position: absolute;
			 top: 0;
			 left: 0;
			 z-index: 10001;

			height: 100vh;
			width: 100%;

			content: "";
			pointer-events: none;
		}

		[role='region'][data-ajax]
		{
			opacity: 1;
			-webkit-transition: opacity 1.25s;
			transition: opacity 1.25s;

			z-index: 2;
		}

		html.init [role='region'][data-ajax],
		[role='region'][data-ajax].loading
		{
			opacity: 0;
		}

		template
		{
			visibility: hidden !important;

			display: none !important;
			overflow: hidden !important;

			height: 0 !important;
			width: 0 !important;
		}
		
		figure
		{
			display: block;
			margin: 0 auto;
		}
		
		hr
		{
			background: transparent;

			border: none;
			border-bottom: #999 solid 1px;
			clear: both;
			display: block;
			margin: 45px 0;
			padding: 0;

			height: 0;
			width: 100%;
		}

		img,
		a img
		{
			border: 0;
			margin: 0;
			outline: 0;
		}

		img
		{
			image-rendering: crisp-edges;
		}

		a
		{
			outline: none;
		}
		
		mark.block-wrap
		{
			background: inherit;

			color: inherit;

			display: inline-block;
		}

		:not(dialog) .envelope
		{
			box-sizing: border-box;
			display: block;
			margin: auto;

			height: 100%;
			max-width: 1200px;
			min-width: 768px;
			width: 100%;
		}

		.envelope:before,
		.envelope:after
		{
			clear: both;
			display: block;

			content: "";
		}

/* Media Queries */
	/* Large Displays */
		@media (min-width: 1221px) 
		{
			[data-viewport~="XL"]
			{
				display: block !important;
			}
		}
	
	/* Intermediary Displays */
		@media (min-width: 1024px)  and (max-width: 1220px) 
		{
			[data-viewport~="L"]
			{
				display: block !important;
			}
		}
	
	/* Small Displays */
		@media (max-width: 1023px) 
		{
			[data-viewport~="S"]
			{
				display: block !important;
			}

			html
			{
				min-width: 100vw;
			}

			:not(dialog) .envelope
			{
				max-width: none;
				min-width: 0;
			}
		}