/*

	Adapted from TEMPLATED's Introspect by GP-NET
	templated.co @templatedco, giantpygmy.net
	Released for free under the Creative Commons Attribution 3.0 license
	Header + Menu
*/



/* Header */

	body {
		position: relative;
		padding-top: 5em;

	}

	#header {
/* 		background: #1c1c1c;     */
		background: #2d5360;
		color: #d5d5d5;
		cursor: default;
		height: 5em;
		left: 0;
		line-height: 5em;
		position: fixed;
		text-align: right;
		top: 0;
		width: 100%;
		z-index: 10001;
	}

		#header .inner {
			max-width: 65em;
			width: calc(100% - 6em);
			margin: 0 auto;
			position: relative;

		}

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

				#header .inner {
					max-width: 90%;
					width: 90%;
				}

			}

		#header .logo {
			font-family: "Lato", sans-serif;
			display: inline-block;
			height: inherit;
			left: 0;
			line-height: inherit;
			margin: 0;
			padding: 0;
			position: absolute;
			top: 0;
			color: #9bc3ca;
			font-size: 1.30em;
  			letter-spacing: 5px;
			text-transform: none;
			font-weight: 700;
			padding: 0;
		}

			#header .logo:hover {
				color: rgba(255, 255, 255, 0.75);
			}

		#header a {
			font-family: "Lato", sans-serif;
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			display: inline-block;
			padding: 0 2em;
			color: #ffffff;
			text-decoration: none;
			text-transform: uppercase;
			font-weight: 700;
			font-size: .85em;
		}

			#header a:hover {
				color: #9bc3ca;
			}

			#header a:last-child {
				padding-right: 0em;
			}

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

				#header a {
					padding: 0 0.5em;
				}

			}

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

		#header {
			min-width: 320px;
		}

	}

/* Menu */

	#nav {
		display: inline-block;

	}

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

			#nav {
				display: none;
			}

		}

	.navPanelToggle {
		position: fixed;
		text-decoration: none;
		height: 4em;
		right: 3em;
		top: .75em;
		width: 4em;
		display: none;
		z-index: 10002;
	}

		.navPanelToggle:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
			color: #fff;
			display: block;
			font-size: 16px;
			height: 2.25em;
			left: 0.5em;
			line-height: 2.25em;
			position: absolute;
			text-align: center;
			top: 0.5em;
			width: 3.5em;
		}

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

			.navPanelToggle {
				display: block;
			}

		}

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

			.navPanelToggle {
				right: 1em;
			}

		}

		.navPanelToggle *:before {
			color: #9bc3ca;
			display: block;
			font-size: 26px;
			height: 2.25em;
			left: 0.5em;
			line-height: 2.25em;
			position: absolute;
			text-align: center;
			top: 0em;
			width: 3.5em;
		}

	#navPanel {
		-moz-transform: translatex(20em);
		-webkit-transform: translatex(20em);
		-ms-transform: translatex(20em);
		transform: translatex(20em);
		-moz-transition: -moz-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-webkit-transition: -webkit-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-ms-transition: -ms-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		overflow-y: auto;
		position: fixed;
		right: 0;
		top: 0;
		background: #1e393e;
		color: #fff;
		height: 100%;
		max-width: 80%;
		width: 20em;
		padding: 1.5em;
		text-transform: uppercase;
		z-index: 10003;
		display: none;
	}

		#navPanel.visible {
			-moz-transform: translatex(0);
			-webkit-transform: translatex(0);
			-ms-transform: translatex(0);
			transform: translatex(0);
			box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.2);
			visibility: visible;
		}

		#navPanel a:not(.close) {
			border-top: solid 1px rgba(255, 255, 255, 0.1);
			color: #fff;
			font-weight: 700;
			display: block;
			padding: 0.75em 0;
			text-decoration: none;
		}

			#navPanel a:not(.close):hover {
				color: #9bc3ca;
			}


			#navPanel a:not(.close):first-child {
				border: none;
			}

		#navPanel .close {
			text-decoration: none;
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			-webkit-tap-highlight-color: transparent;
			border: 0;
			color: #9bc3ca;
			cursor: pointer;
			display: block;
			height: 4em;
			padding-right: 1.25em;
			position: absolute;
			right: 0;
			text-align: right;
			top: 0;
			vertical-align: middle;
			width: 5em;
		}

			#navPanel .close:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
				content: '\f00d';
				width: 3em;
				height: 3em;
				line-height: 3em;
				display: block;
				position: absolute;
				right: 0;
				top: 0;
				text-align: center;
			}

			#navPanel .close:hover {
				color: inherit;
			}

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

			#navPanel {
				display: block;
			}

		}