/*
Disabled Template Fonts

@import url(font-awesome.min.css);
@import url("https://fonts.googleapis.com/css?family=Pacifico|Source+Sans+Pro:200,400");


*/

/* Grant Birkinbine - Imported my own fonts to replace the templates - They can be found in the same folder as the CSS file */

/*
@font-face {
    font-family: 'Raleway-ExtraLight';
    src: url('Raleway-ExtraLight.eot');
    src: url('Raleway-ExtraLight.eot?#iefix') format('embedded-opentype'),
       url('Raleway-ExtraLight.woff') format('woff'),
       url('Raleway-ExtraLight.ttf') format('truetype'),
       url('Raleway-ExtraLight.svg#Raleway-ExtraLight') format('svg');
}
*/

@font-face {
    font-family: 'Montserrat', sans-serif;
}


/* Button Pulse */
@keyframes shadow-pulse
{
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
  }
}

.button-pulse
{
  color: #F2F2F2;
  text-align: center;
  border-radius: 3px;
  animation: shadow-pulse 1s 10;
}

.button-pulse-long
{
  color: #F2F2F2;
  text-align: center;
  border-radius: 3px;
  animation: shadow-pulse 1s 100;
}



/*
.fontpro,.fontpro-35195 {
  font-family: 'Raleway-ExtraLight',sans-serif;
}
*/

/* End Grant Birkinbine */

/* Grant Birkinbine - I did not write this section but I will have an understanding of its purpose. This section is essentially a "reset" of the entire page. This section takes many of the block elements that occur on a typical page and resets their values (margin, padding, and border). On my previous website I had to do a simplified version of this since I was getting thin white rectangles around all of my Divs. This stood out against my gray background so I had to fix it with this method. */

	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%;
		font: inherit;
		vertical-align: baseline;
	}
	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;
	}

/* Box Model */

	*, *:before, *:after {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

@media screen and (min-width: 737px) {

			#scale {
				zoom: 85%
			}

		}

@media screen and (min-width: 1260px) {

			#scale {
				zoom: 80%
			}

		}
@media screen and (min-width: 1440px) {

			#scale {
				zoom: 75%
			}

		}

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

		html, body {
			min-width: 320px;
		}

	}

/* Grant Birkinbine */
	body {
		background: #f4f4f4;
	}
/* End Grant Birkinbine */

		body.is-loading *, body.is-loading *:before, body.is-loading *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

/* Grant Birkinbine */
	body {
		background-color: #f2f2f2;
		color: #686868;
	}
/* End Grant Birkinbine */

/* Grant Birkinbine - Here I wrote in my own fonts that I imported at the start of the CSS */

	body, input, select, textarea {
		font-family: 'Montserrat', sans-serif;
		font-size: 20pt;
		font-weight: 220;
		line-height: 1.75;
	}
/* End Grant Birkinbine */

/* Grant Birkinbine - I did not write the code for this media screen section however I do understand how it works. Media screen works by identifying the size of the browser window and then customizing the visual output depending on the screen size. For example, a screen with a max width of 360 pixels will produce a font size of 13pt in the upper banner section of the site. */

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

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

		}

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

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

		}

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

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

		}

/* End Grant Birkinbine */

	a {
		-moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		-webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		-ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		transition: color 0.2s ease, border-bottom-color 0.2s ease;
		text-decoration: none;
	}

		a:hover {
			border-bottom-color: transparent;
		}

/* Grant Birkinbine - This section adjusts the paragraph element. In this instance I used it to increase the spacing between the paragraph on the category tiles and the link buttons. */

	p {
		margin: 0 0 1.25em 0;
	}

/* End Grant Birkinbine */


/* Grant Birkinbine - This section sets the font, margin, text-transform, and spacing for all header elements. Most importantly all headers are set to uppercase font. This is mainly to set initial values that will later be altered by their respected media screen scripts. I set the letter spacing to .475 because I think the spacing goes well with the thin font! */

	h1, h2, h3, h4, h5, h6 {
		font-weight: 500;
		line-height: 1.55;
		margin: 0 0 16px 0;
		text-transform: uppercase;
        letter-spacing: 0.475rem;
		
	}

/* End Grant Birkinbine */

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

	h1 {
		font-size: 2em;
        -webkit-transform-style: preserve-3d;

	}

	h2 {
		font-size: 1.75em;
	}

	h3 {
		font-size: 1.3em;
	}

	h4 {
		font-size: 1em;
	}

	h5 {
		font-size: 0.9em;
	}

	h6 {
		font-size: 0.7em;
	}

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

		h1 {
			font-size: 1.5em;
		}

		h2 {
			font-size: 1.25em;
		}

		h3 {
			font-size: 1em;
		}
        
        #adjust {
            font-size: .8em;
        }
        
        #mobilelogo {
            transform: translateY(-20px) scale(1.6);
        }
        
        #mobilelogo2 {
            transform: scale(2);
        }

	}


	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}

	

	a {
		color: inherit;
	}

		a:hover {
			color: darkgray!important;
		}

	h1, h2, h3, h4, h5, h6 {
		color: #444444;
	}

/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
        /* Grant Birkinbine - In this section I changed all the values for the fade in/out transitions of the buttons to make them respond faster*/
		-moz-transition: box-shadow 0.1s ease-in-out, background-color 0.1s ease-in-out, color 0.1s ease-in-out;
		-webkit-transition: box-shadow 0.1s ease-in-out, background-color 0.1s ease-in-out, color 0.1s ease-in-out;
		-ms-transition: box-shadow 0.1s ease-in-out, background-color 0.1s ease-in-out, color 0.1s ease-in-out;
		transition: box-shadow 0.1s ease-in-out, background-color 0.1s ease-in-out, color 0.1s ease-in-out;
        /* Grant Birkinbine */
		border-radius: 4px;
		border: 0;
		cursor: pointer;
		display: inline-block;
		font-weight: 400;
		height: 3.5em;
		line-height: 3.5em;
		padding: 0 2em 0 2.375em;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		text-transform: uppercase;
		letter-spacing: 0.325em;
		font-size: 0.725em;
	}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {
			margin-right: 0.5em;
		}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			display: block;
			margin: 0 0 1em 0;
			width: 100%;
		}

		input[type="submit"].big,
		input[type="reset"].big,
		input[type="button"].big,
		button.big,
		.button.big {
			font-size: 0.8em;
			padding: 0 2.5em 0 2.875em;
			height: 3.75em;
			line-height: 3.75em;
		}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			-moz-pointer-events: none;
			-webkit-pointer-events: none;
			-ms-pointer-events: none;
			pointer-events: none;
			opacity: 0.25;
		}

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

			input[type="submit"],
			input[type="reset"],
			input[type="button"],
			button,
			.button {
				padding: 0;
			}

		}

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		background-color: transparent;
		box-shadow: inset 0 0 0 2px #666666;
        /* Grant Birkinbine - I decided to make the font within the buttons a bit darker and used the !important command to overwrite their color from the h3 header element. */
		color: #424242 !important;
        /* End Grant Birkinbine */
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
            /* Grant Birkinbine - In this section I changed the button fade in color to light blue */
			color: #87b7d1 !important;
            /* End Grant Birkinbine */
			box-shadow: inset 0 0 0 2px #87b7d1;
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: rgba(239, 100, 128, 0.15);
		}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {
			color: #999999;
		}


/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}

		.icon > .label {
			display: none;
		}

		.icon.major {
			display: block;
			margin: 0 0 1.5em 0;
		}

			.icon.major:before {
				cursor: default;
				font-size: 2.5rem;
				box-shadow: inset 0 0 0 2px #666666;
				width: 2.5em;
				height: 2.5em;
				line-height: 2.5em;
				display: inline-block;
				border-radius: 100%;
				color: #666666;
			}

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

			.icon.major:before {
				font-size: 2rem;
			}

		}

/* Image */

	.image {
		border-radius: 4px;
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image img {
			border-radius: 4px;
			display: block;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			margin: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			margin: 0 0 1em 1.5em;
			top: 0.25em;
		}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

		.image.main {
			display: block;
			margin: 0 0 3em 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}

/* Youtube iFrame */

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Map iFrame */

.map-container {
position: relative;
padding-bottom: 100%;
padding-top: 100%; height: 0; overflow: hidden;
}

.map-container iframe,
.map-container object,
.map-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* List */

	ol {
		list-style: decimal;
		margin: 0 0 2em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0 0 2em 0;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px;
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

		ul.icons {
			cursor: default;
			list-style: none;
			padding-left: 0;
		}

			ul.icons li {
				display: inline-block;
				padding: 0 1em 0 0;
			}

				ul.icons li:last-child {
					padding-right: 0;
				}

		ul.actions {
			cursor: default;
			list-style: none;
			padding-left: 0;
		}

			ul.actions li {
				display: inline-block;
				padding: 0 1em 0 0;
				vertical-align: middle;
			}

				ul.actions li:last-child {
					padding-right: 0;
				}

			ul.actions.small li {
				padding: 0 0.5em 0 0;
			}

			ul.actions.vertical li {
				display: block;
				padding: 1em 0 0 0;
			}

				ul.actions.vertical li:first-child {
					padding-top: 0;
				}

				ul.actions.vertical li > * {
					margin-bottom: 0;
				}

			ul.actions.vertical.small li {
				padding: 0.5em 0 0 0;
			}

				ul.actions.vertical.small li:first-child {
					padding-top: 0;
				}

			ul.actions.fit {
				display: table;
				margin-left: -1em;
				padding: 0;
				table-layout: fixed;
				width: calc(100% + 1em);
			}

				ul.actions.fit li {
					display: table-cell;
					padding: 0 0 0 1em;
				}

					ul.actions.fit li > * {
						margin-bottom: 0;
					}

				ul.actions.fit.small {
					margin-left: -0.5em;
					width: calc(100% + 0.5em);
				}

					ul.actions.fit.small li {
						padding: 0 0 0 0.5em;
					}

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

				ul.actions {
					margin: 0 0 2em 0;
				}

					ul.actions li {
						padding: 1em 0 0 0;
						display: block;
						text-align: center;
						width: 100%;
					}

						ul.actions li:first-child {
							padding-top: 0;
						}

						ul.actions li > * {
							width: 100%;
							margin: 0 !important;
						}

					ul.actions.small li {
						padding: 0.5em 0 0 0;
					}

						ul.actions.small li:first-child {
							padding-top: 0;
						}

			}

	dl {
		margin: 0 0 2em 0;
	}

		dl dt {
			display: block;
			font-weight: 400;
			margin: 0 0 1em 0;
		}

		dl dd {
			margin-left: 2em;
		}

	ul.alt li {
		border-top-color: #666666;
	}

/* Table */

	.table-wrapper {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	table {
		margin: 0 0 2em 0;
		width: 100%;
	}

		table tbody tr {
			border: solid 1px;
			border-left: 0;
			border-right: 0;
		}

		table td {
			padding: 0.75em 0.75em;
		}

		table th {
			font-size: 0.9em;
			font-weight: 400;
			padding: 0 0.75em 0.75em 0.75em;
			text-align: left;
		}

		table thead {
			border-bottom: solid 2px;
		}

		table tfoot {
			border-top: solid 2px;
		}

		table.alt {
			border-collapse: separate;
		}

			table.alt tbody tr td {
				border: solid 1px;
				border-left-width: 0;
				border-top-width: 0;
			}

				table.alt tbody tr td:first-child {
					border-left-width: 1px;
				}

			table.alt tbody tr:first-child td {
				border-top-width: 1px;
			}

			table.alt thead {
				border-bottom: 0;
			}

			table.alt tfoot {
				border-top: 0;
			}

	table tbody tr {
		border-color: #666666;
	}

		table tbody tr:nth-child(2n + 1) {
			background-color: rgba(144, 144, 144, 0.075);
		}

	table th {
		color: #444444;
	}

	table thead {
		border-bottom-color: #666666;
	}

	table tfoot {
		border-top-color: #666666;
	}

	table.alt tbody tr td {
		border-color: #666666;
	}

/* Item */

	.item {
		padding: 3em 3em 1em 3em;
		background-color: #f2f2f2;
		border-radius: 4px;
		text-align: center;
	}

		.item header {
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			margin: -3em 0 0em -3em;
			width: calc(100% + 6em);
			height: 15em;
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			background-color: #444;
			color: rgba(255, 255, 255, 0.75);
			position: relative;
			overflow: hidden;
		}

			.item header input, .item header select, .item header textarea {
				color: #ffffff;
			}

			.item header a {
				color: inherit;
			}

				.item header a:hover {
					color: #ffa216 !important;
				}

			.item header strong, .item header b {
				color: #ffffff;
			}

			.item header h1, .item header h2, .item header h3, .item header h4, .item header h5, .item header h6 {
				color: #ffffff;
			}

			.item header blockquote {
				border-left-color: #ffffff;
			}

			.item header code {
				background: rgba(255, 255, 255, 0.075);
				border-color: #ffffff;
			}

			.item header hr {
				border-bottom-color: #ffffff;
			}

			.item header a {
				-moz-transition: -moz-transform 0.2s ease;
				-webkit-transition: -webkit-transform 0.2s ease;
				-ms-transition: -ms-transform 0.2s ease;
				transition: transform 0.2s ease;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: block;
			}

				.item header a:before {
					content: '';
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
                    background-color: rgba(0, 0, 0, 0.25);
				}

			.item header:hover a {
				-moz-transform: scale(1.1);
				-webkit-transform: scale(1.1);
				-ms-transform: scale(1.1);
				transform: scale(1.1);
			}

			.item header > * {
				position: relative;
				z-index: 1;
			}

			.item header h3 {
				margin: 0;
				-moz-pointer-events: none;
				-webkit-pointer-events: none;
				-ms-pointer-events: none;
				pointer-events: none;
			}

	.items {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		width: calc(100% + 2em);
		margin: -2em 0 0 -2em;
	}

		.items .item {
			margin: 2em 0 0 2em;
			width: calc(50% - 2em);
		}

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

		.item header {
			height: 25em;
		}

		.items {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			-moz-flex-wrap: nowrap;
			-webkit-flex-wrap: nowrap;
			-ms-flex-wrap: nowrap;
			flex-wrap: nowrap;
			width: 100%;
			margin: 0;
		}

			.items .item {
				width: 100%;
				margin: 0 0 2em 0;
			}

				.items .item:last-child {
					margin-bottom: 0;
				}

	}

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

		.item header {
			height: 15em;
		}

		.items .item {
			margin: 0 0 1em 0;
		}

	}

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

		.item {
			padding: 2em 1em 0.1em 1em;
		}

			.item header {
				height: 12em;
				margin: -2em 0 2em -1em;
				width: calc(100% + 2em);
			}

	}

/* Wrapper */

	#wrapper {
		width: 64em;
		margin: 0 auto;
		max-width: calc(100% - 4em);
		padding: 4em 0 2em 0;
	}

		#wrapper > .main {
			margin-bottom: 4em;
		}

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

			#wrapper {
				padding: 2em 0 2em 0;
			}

				#wrapper > .main {
					margin-bottom: 2em;
				}

		}

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

			#wrapper {
				max-width: calc(100% - 2em);
				padding: 1em 0 0.1em 0;
			}

				#wrapper > .main {
					margin-bottom: 1em;
				}

		}

/* Header */

	#header {
		background-color: #444;
		color: rgba(255, 255, 255, 0.75);
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		padding: 8em 0 6em 0;
		background-image: url("../../eltimg/eltana.jpg");
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		text-align: center;
		position: relative;
		cursor: default;
        -webkit-transform-style: preserve-3d;
        overflow: hidden;

	}

		#header input, #header select, #header textarea {
			color: #ffffff;
		}

		#header a {
			color: inherit;
		}

			#header a:hover {
				color: #ffa216 !important;
			}

		#header strong, #header b {
			color: #ffffff;
		}

		#header h1, #header h2, #header h3, #header h4, #header h5, #header h6 {
			color: #ffffff;
            -webkit-transform-style: preserve-3d;

		}

		#header blockquote {
			border-left-color: #ffffff;
		}

		#header code {
			background: rgba(255, 255, 255, 0.075);
			border-color: #ffffff;
		}

		#header hr {
			border-bottom-color: #ffffff;
		}

		#header:before {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.25);
			-webkit-transform-style: preserve-3d;

		}

		#header h1 {
			margin-bottom: 0.5em;
            -webkit-transform-style: preserve-3d;

		}

		#header .inner {
			position: relative;
			z-index: 1;
            -webkit-transform-style: preserve-3d;

		}

		#header.alt {
			height: 20em;
			min-height: 20em;
			min-height: 75vh;
		}

			#header.alt:before {
				-moz-transition: background-color 3s ease;
				-webkit-transition: background-color 3s ease;
				-ms-transition: background-color 3s ease;
				transition: background-color 3s ease;
				-moz-transition-delay: 1s;
				-webkit-transition-delay: 1s;
				-ms-transition-delay: 1s;
				transition-delay: 1s;
			}

			#header.alt h1 {
				font-size: 4em;
				padding: 0 0.5em 0.25em 0.5em;
				border-bottom: solid 2px #ffffff;
				font-weight: 200;
				font-family: 'Raleway-ExtraLight',sans-serif;
				text-transform: uppercase;
				letter-spacing: 15px;
			}

			#header.alt p {
				text-transform: uppercase;
				letter-spacing: 0.325rem;
				font-weight: 400;
				font-size: 0.8em;
				padding: 0 1.25em;
			}

			#header.alt .inner {
				-moz-transition: opacity 2s ease;
				-webkit-transition: opacity 2s ease;
				-ms-transition: opacity 2s ease;
				transition: opacity 2s ease;
				opacity: 1;
			}

		body.is-loading #header.alt:before {
			background-color: black;
		}

		body.is-loading #header.alt .inner {
			opacity: 0;
		}

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

			#header {
				background-attachment: scroll;
			}

		}

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

			#header {
				padding: 4em 2em 2em 2em;
			}

				#header.alt h1 {
					font-size: 2.5em;
					padding-left: 0;
					padding-right: 0;
				}

				#header.alt p {
					padding: 0;
				}

				#header.alt .inner {
					max-width: 20em;
				}

		}

/* Main */

	#main {
		padding: 4em 4em 2em 4em;
		background-color: #ffffff;
		border-radius: 4px;
	}

		#main > header:first-child {
			text-align: center;
		}

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

			#main {
				padding: 2em 2em 0.1em 2em;
			}

		}

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

			#main {
				padding: 2em 1em 0.1em 1em;
			}

		}

/* Intro */

	#intro {
		padding: 4em 4em 2em 4em;
		background-color: #ffffff;
		border-radius: 4px;
		text-align: center;
	}

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

			#intro {
				padding: 2em 2em 0.1em 2em;
			}

		}

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

			#intro {
				padding: 2em 1em 0.1em 1em;
			}

				#intro p br {
					display: none;
				}

		}

/* CTA */

	#cta {
		padding: 2em 0 0.1em 0;
		text-align: center;
	}

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

			#cta {
				padding: 2em 2em 0.1em 2em;
			}

		}

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

			#cta {
				padding: 2em 1em 0.1em 1em;
			}

				#cta p br {
					display: none;
				}
            #cta strong {
                line-height: 1em;
            }

		}






.logo{
   height: 100%;
    width: 100%;
}
.logo span{
    padding: 0;
    margin: 10px;
    font-size: 1.3em;
    display: inline-block;
    line-height: 1.5em;
    text-align: center;
    letter-spacing: .02em
}

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

			.logo {
				display: block !important;    
            }
            .logo span{
                display: block !important; 
            }

		  }







/* Footer */

/* Grant Birkinbine - In this section I set the parameters for the alignment of the footer. I increased letter spacing to add room between the font awesome icons and the "Birki" at the bottom of the page. */
	#footer {
		text-align: center;
		margin-top: 4em;
        letter-spacing:.5em;
        overflow: hidden;
        margin-bottom: 1em;
	}

		#footer a {
			color: inherit;
		}

		#footer:before {
			content: '';
			display: inline-block;
			width: 6em;
			height: 2px;
			background-color: #666666;
			margin-bottom: 4em;
		}


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

			#footer {
				margin-top: 2em;
                text-align: center;
			}

				#footer:before {
					margin-bottom: 2em;
				}

		}

.flat-table {
  display: block;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 115%;
  overflow: auto;
  width: auto;
  margin-top: 40px;
  margin-bottom: 40px;
}
.flat-table th {
  background-color: #f0b310;
  color: white;
  font-weight: normal;
  padding: 20px 30px;
  text-align: center;
}
.flat-table td {
  background-color: #eeeeee;
  color: #6f6f6f;
  padding: 20px 30px;
}