@import url("https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700");
@import url("font-awesome.min.css");

/* Reset */

	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		color: #FFF;
		font: inherit;
		vertical-align: baseline;
		/*background-color: #2D3130;*/
	}

	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	blockquote, q {
		quotes: none;
	}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	body {
		-webkit-text-size-adjust: none;
	}

	body {
		background: #2D3130;
		font-family: 'PT Sans', sans-serif;
		font-size: 10pt;
		line-height: 2em;
		color: #7a8186;
	}

/* Logo */

	#logo {
		position: relative;
		padding: 2em 0em 2em 0em;
		letter-spacing: 3px;
		text-align: center;
		color: #FFF;
		/*margin-top: 5em;*/
	}

		#logo a {
			text-decoration: none;
		}

		#logo div {
			position: relative;
			display: inline-block;
			/*padding: 0 6em 0 6em;*/
			/*box-shadow: 0px 1px 0px #4A514F, 0px -1px 0px #4A514F;*/
			height: auto;
			text-align: left;
			/*background-color: rgba(0, 125, 0, .3);*/
		}

		#logo h1 {
			position: relative;
			display: inline;
			/*padding: 0em 0.50em;*/
			/*top: -0.25em;*/
			/*text-transform: uppercase;*/
			font-size: 2.800em;
			font-weight: 700;
			letter-spacing: .125em;
			/*background: #2D3130;*/
			color: #FFF;
		}

		#logo span {
			display: block;
			margin-top: 0.35em;
			/*padding-top: .250em;*/
			letter-spacing: 0.07em;
			font-size: .5em;
			font-weight: 400;
			letter-spacing: .175em;
			color: #FFF;
			/*color: rgba(255, 255, 255, 0.5);*/
			border-top: 2px solid #00A886;
		}

		#logo img {
			height: 100px;
			width: auto;
			padding: 0 1.5em 0 0;
		}

		#logo-txt {
			top: -1.125em;
		}

/* 404 */

	#wrapper {
		position: absolute;
		width: 60%;
		height: 80%;
		left: 20%;
		top: 10%;
		text-align: center;
	}

		#wrapper img {
			position: absolute;
			background-color: transparent;
			width: auto;
			max-width: 256px;
			height: auto;
			max-height: 256px;
			top: 50%;
			left: 50%;
			margin-top: -128px;
			margin-left: -110px;
		}

		#wrapper span {
			background-color: transparent;
		}

/* Button */

	.cat_buttons {
		position: absolute;
		text-align: center;
		padding: .5em .8em;
		width: auto;
		height: auto;

		font-weight: 700;
		font-size: 1.4em;
		letter-spacing: .1em;
		text-decoration: none;

		/*box-shadow: 0 2px 0 0 rgba(0, 0, 0, .75);*/
	}

	.cat_buttons:after {
		content: "\002794";
		position: absolute;
		left: 99%;
		white-space: nowrap;
		font-size: 1.5em;
		color: #2D3130;
		line-height: 1.6em;
		top: 0;

		-moz-transition: color 0.2s;
		-webkit-transition: color 0.2s;
		-ms-transition: color 0.2s;
		transition: color 0.2s;
	}

	.cat_buttons:hover:after {
		content: "\002794";
		position: absolute;
		left: 99%;
		white-space: nowrap;
		font-size: 1.5em;
		color: #FFF;
		line-height: 1.6em;
		top: 0;
	}

	.cat_buttons:before {
		content: "";
		position: absolute;
		left: 99%;
		top: 0;
		width: 0;
		height: 100%;
		background-color: #F36500;

		-moz-transition: width 0.2s ease-in-out;
		-webkit-transition: width 0.2s ease-in-out;
		-ms-transition: width 0.2s ease-in-out;
		transition: width 0.2s ease-in-out;
	}

	.cat_buttons:hover:before {
		content: "";
		position: absolute;
		left: 99%;
		top: 0;
		width: 2.250em;
		height: 100%;
		background-color: #F36500;
	}

	#error_button {
		left: 50%;
		transform: translateX(-50%);
		background-color: #F36500;
		margin-top: 1em;
		margin-left: .4em;
		margin-top: -1.5em;
		color: #FFF;
		top: calc(50% + 200px);
	}




/* ================================================================================================
==================================================================================== MEDIA QUERIES
============================================================================================== */

/* ================================================================ Normal */

	@media screen and (min-width: 961px) and (max-width: 1280px) {

		/* Basic */

			body, input, textarea, select {
				font-size: 9.5pt;
			}
	}

/* ================================================================ Narrower */

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

		/* Basic */

			html, body {
				overflow-x: hidden;
			}
	}

/* ================================================================ Mobile */

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

		/* Basic */

			body, input, textarea, select {
				line-height: 1.75em;
				font-size: 9.5pt;
				letter-spacing: 0.05em;
			}

			body {
				padding-top: 0px;
				min-width: 320px;
			}

			/* Logo */

			#logo {
				padding: 0;
				margin-top: 2em;
			}

			#logo div:not(#logo-txt) {
				clear: right;
				float: left;
				left: 50%;
				transform: translateX(-50%);
				padding-bottom: 2.5em;
			}

			#logo-txt {
				clear: left;
				float: left;
				left: 50%;
				transform: translateX(-50%);
				text-align: center;
				margin-bottom: 2em;
			}

			#logo-txt h1:before {
				content: "\002002 \002009";
			}
	}

/* ================================================================ Old Mobile */

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

		/* Logo */

			#logo img {
				height: 80px;
			}

			#logo-txt h1 {
				font-size: 2.500em;
			}

			#logo span {
				font-size: .45em;
				letter-spacing: .250em;
			}

			#logo-txt h1:before {
				content: "\002000 \002009";
			}

		/* 404 */

			#wrapper img {
				max-width: 192px;
				max-height: 192px;
				margin-top: -96px;
				margin-left: -82px;
			}
	}