/* VDG Custom Application | Styling
// ------------------------------------------------------------------------------- //
*/

/* ----------------------------------------------------- */
/* Fonts */
/* GillSans */
@font-face {
 font-family: GillSansWeb;
 src: 	url("fonts/GillSans-Regular.eot") format("embedded-opentype"),
		url("fonts/GillSans-Regular.ttf") format("truetype");
}
@font-face {
 font-family: GillSansWeb-b1;
 src: 	url("fonts/GillSans-Bold.eot") format("embedded-opentype"),
		url("fonts/GillSans-Bold.ttf") format("truetype");
}


/* ----------------------------------------------------- */
/* General / Global */
* {
	box-sizing: border-box; margin: 0; padding: 0; list-style-type: none;
}

body {
	margin: 0; padding: 0; font-size: 14pt; font-family: GillSansWeb, arial; color: #fff; line-height: 1.25em; text-align: center; position: relative;
	background: #000;
}

.align_justify {
	text-align: justify !important;
}
.align_left {
	text-align: left !important;
}
.align_right {
	text-align: right !important;
}
.align_center {
	text-align: center !important;
}
.float_left {
	float: left;
}
.float_right {
	float: right;
}

ul.content_list {
	padding: 0px; margin: 10px; list-style-type: disc;
}

ul.content_list li {
	padding: 3px 10px; margin: 2px; margin-left: 15px; list-style-type: disc;
}

p.focus_text {
	font-size: 1.8em; line-height: 1.25em; margin-bottom: 10px;
}

p.small_text {
	font-size: 0.8em; line-height: 1.15em; color: #ddd; text-transform: uppercase;
}

/* ----------------------------------------------------- */
/* Links */
a {
	text-decoration: none; color: #ddd;
}
a:hover {
	color: #fff;
}
.button, .button_link {
	font-family: GillSansWeb-b1, GillSansWeb, arial; cursor: pointer; display: inline-block; zoom: 1; *display: inline; vertical-align: middle; padding: 6px 10px; border-radius: 3px; background: #fff; color: #000 !important;
}
.button:hover, .button_link:hover {
	background: #ddd; color: #000 !important;
}

/* ----------------------------------------------------- */
/* Headings */
h1,h2,h3,h4,h5,h6 {
	font-family: arial; word-spacing: 0px; margin: 10px auto; font-size: 2em; line-height: 1em; color: #5b6468; font-weight: normal;
	font-family: GillSansWeb-b1, GillSansWeb, arial;
}
h2,h4,h6 {
	color: #fff; font-family: GillSansWeb-b1, GillSansWeb, arial;
}
h3,h4 {
	font-size: 1.7em;
}
h5,h6 {
	font-size: 1.3em;
	color: #fff;
}

/* ----------------------------------------------------- */
/* Background */
.background_container {
	position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; text-align: center;
}
.background_container_inner {
	position: relative; text-align: center; margin: 0 auto; max-width: 1900px; height: 100%; display: block; min-height: 100vh;
}
.background_container .overlay_top {
	position: absolute; top: 0px; left: 0px; width: 100%; height: 10%; z-index: 3; opacity: 0.3;
	background: #000; background: linear-gradient(to bottom, #000000, transparent);
}
.background_container .overlay_left {
	position: absolute; top: 0px; left: 0px; width: 10%; height: 100%; z-index: 3;
	background: #000; background: linear-gradient(to right, #000000, transparent);
}
.background_container .overlay_right {
	position: absolute; top: 0px; right: 0px; width: 10%; height: 100%; z-index: 3;
	background: #000; background: linear-gradient(to right, transparent, #000000);
}
.background_container .overlay_image {
	position: relative; top: 0px; width: 100%; height: 100%; z-index: 1;
	background-size: cover; background-position: center center; background-repeat: no-repeat;
	opacity: 0.8;
}

/* ----------------------------------------------------- */
/* Page Title */
.content_title {
	display: block; padding: 30px 10px; text-align: center; color: #fff; background: none; border-width: 0 0 1px 0; border-radius: 1px 1px 0 0; margin: 0 auto; margin-bottom: 0px;
}
.content_title h2 {
	display: block; font-weight: normal; text-align: center; vertical-align: middle; color: #fff; margin: 0; padding: 10px; font-size: 1.6em; line-height: 1.1em; font-family: GillSansWeb, arial;
	color: #ddd;
}
.content_title h2 .primary {
	font-size: 1.5em; line-height: 1em; display: inline-block; vertical-align: middle; padding: 0 10px; text-transform: uppercase; font-family: GillSansWeb-b1, GillSansWeb, arial;
	color: #fff;
}
.content_title h2 .tagline {
	display: inline-block; vertical-align: middle; padding: 0 10px;
}

/* ----------------------------------------------------- */
/* Logo / Header */
.content_header {
	width: 100%; position: relative; background: #00c00; text-align: center;
}
.content_header .logo_box {
	display: block; width: 100%; margin: 0 auto; padding: 5%; text-align: center;
}
.content_header .logo_box .logo {
	display: block; width: 80%; max-width: 600px; margin: 0 auto; border: 0;
	-webkit-filter: drop-shadow( 0px 0px 10px rgba(0, 0, 0, 0.45));
	filter: drop-shadow( 0px 0px 10px rgba(0, 0, 0, 0.45));
}

/* ----------------------------------------------------- */
/* Contact Info */
.contact_info {
	font-size: 1.2em; line-height: 1.1em; padding-top: 30px; margin: 0 auto; margin-top: 40px; border-top: 1px solid #ddd; max-width: 550px;
	padding-bottom: 30px;
}
.contact_info .email {
	display: block; margin: 0; padding: 10px; vertical-align: middle;
}
.contact_info .email a {
	color: #fff;
}
.contact_info .email a:hover {
	color: #ddd;
}

/* ----------------------------------------------------- */
/* Hosting */
.hosting {
	position: relative; z-index: 5; width: 100%; text-align: center; font-size: 0.6em; line-height: 1.1em; padding: 10px; background: #222222; color: #ddd;
}
.hosting a {
	color: #ddd;
}
.hosting a:hover {
	color: #fff;
}


/* ----------------------------------------------------- */
/* Containers */
.foreground_container {
	position: relative; z-index: 5; min-height: 100vh; display: flex; flex-direction: column;
}
.content_spacer {
	width: 100%; flex-grow: 1;
}
.content_wrapper {
	margin: 0 auto; padding: 0px; text-align: center; width: 100%; border-radius: 0px;
	position: relative; top: 0px; left: 0px;
	background: #000; background: linear-gradient(to bottom, transparent, #000000);
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}
.content_inner_wrapper {
	display: block; word-spacing: 0px; text-align: center;
}
.content_inner_wrapper.content_item {
	text-align: center; color: #fff; 
}

/* ----------------------------------------------------- */
/* Notes */
.note_box {
	word-spacing: 0px; display: block; padding: 6px 10px; margin: 0.5% auto; background: #f4f4f4 url('note_fade.png') repeat-x top center; color: #888; border: 1px solid #ddd; text-align: left; font-size: 0.9em; line-height: 1.1em; border-radius: 3px;
}

/* ----------------------------------------------------- */
/* Clears */
.clear_div {
	clear: both; display: block; padding: 0; margin: 0; width: 100%; height: 1px;
}

/* ----------------------------------------------------- */
/* RESPONSIVE / MOBILE */
/* ------ */
/* Tablet */
@media only screen and (max-width: 1200px) {	
	body { font-size: 13pt; }
	.background_container .overlay_image {
		background-position: left center;
	}
	.content_header .logo_box .logo {
		max-width: 400px;
	}
}
/* ------ */
/* Mobile */
@media only screen and (max-width: 780px) {	
	body { font-size: 12pt; }
	.background_container .overlay_image {
		background-position: left center;
	}
}
/* ----------------------------------------------------- */
/* // EOF */
/* ----------------------------------------------------- */