/* ========================================
   IMPORTS
   ======================================== */

@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,900");

/* ========================================
   BASE STYLES
   ======================================== */

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

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

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

html {
	box-sizing: border-box;
	zoom: 0.8;
}

*, *:before, *:after {
	box-sizing: inherit;
}

/* Typography & Forms */
body {
	line-height: 1;
	-webkit-text-size-adjust: none;
}

body, input, textarea, select {
	font-family: 'Geologica', sans-serif;
	font-weight: 400;
	color: #919499;
	font-size: 14pt;
	line-height: 1.75em;
	letter-spacing: 0.025em;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	color: #484d55;
}

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

a {
	transition: color .25s ease-in-out;
	text-decoration: underline;
	color: #717479;
}

a:hover {
	text-decoration: none;
}

strong, b {
	font-weight: 700;
	color: #484d55;
}

em, i {
	font-style: italic;
}

hr {
	border: 0;
	border-top: solid 1px #ddd;
	margin: 2em 0;
}

input, select, textarea {
	appearance: none;
}

ol, ul {
	list-style: none;
}

p, ul, ol, dl, table, blockquote, form {
	margin-bottom: 2em;
}

body.is-preload *, body.is-preload *:before, body.is-preload *:after {
	animation: none !important;
	transition: none !important;
}

/* ========================================
   LAYOUT
   ======================================== */

/* Container */
.container {
	margin-left: 5%;
	margin-right: 5%;
}

/* Row System */
.row {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	align-items: stretch;
	margin-top: -50px;
	margin-left: -50px;
}

.row > * {
	padding: 50px 0 0 50px;
	box-sizing: border-box;
}

.row.aln-left {
	justify-content: flex-start;
}

.row.aln-center {
	justify-content: center;
}

.row.aln-right {
	justify-content: flex-end;
}

.row.aln-top {
	align-items: flex-start;
}

.row.aln-middle {
	align-items: center;
}

.row.aln-bottom {
	align-items: flex-end;
}

.row > .imp {
	order: -1;
}

.row > .col-1 { width: 8.33333%; }
.row > .off-1 { margin-left: 8.33333%; }
.row > .col-2 { width: 16.66667%; }
.row > .off-2 { margin-left: 16.66667%; }
.row > .col-3 { width: 25%; }
.row > .off-3 { margin-left: 25%; }
.row > .col-4 { width: 33.33333%; }
.row > .off-4 { margin-left: 33.33333%; }
.row > .col-5 { width: 41.66667%; }
.row > .off-5 { margin-left: 41.66667%; }
.row > .col-6 { width: 50%; }
.row > .off-6 { margin-left: 50%; }
.row > .col-7 { width: 58.33333%; }
.row > .off-7 { margin-left: 58.33333%; }
.row > .col-8 { width: 66.66667%; }
.row > .off-8 { margin-left: 66.66667%; }
.row > .col-9 { width: 75%; }
.row > .off-9 { margin-left: 75%; }
.row > .col-10 { width: 83.33333%; }
.row > .off-10 { margin-left: 83.33333%; }
.row > .col-11 { width: 91.66667%; }
.row > .off-11 { margin-left: 91.66667%; }
.row > .col-12 { width: 100%; }
.row > .off-12 { margin-left: 100%; }

/* ========================================
   COMPONENTS
   ======================================== */

/* Section/Article */
section, article {
	margin: 0 0 4em 0;
}

section > :last-child,
article > :last-child,
section:last-child {
	margin-bottom: 0;
}

header.style1 {
	text-align: center;
	padding: 3em 0;
}

header.style1 h2 {
	font-weight: 700;
	font-size: 2em;
	letter-spacing: 0.075em;
	line-height: 1.5em;
}

header.style1 p {
	color: #b1b4b9;
	display: block;
	margin: 1.15em 0 0 0;
	font-size: 1.3em;
	letter-spacing: 0.075em;
	line-height: 1.5em;
}

/* 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;
	padding: 0 1.5em 1em 0;
	top: 0.25em;
}

.image.right {
	float: right;
	padding: 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%;
}

/* Button */
button,
.button {
	transition: all .25s ease-in-out;
	display: inline-block;
	background: #444;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-decoration: none;
	border-radius: 10px;
	border: 0;
	outline: 0;
	cursor: pointer;
	padding: 0 2.25em;
	font-size: 0.9em;
	min-width: 12em;
	height: 4em;
	line-height: 4em;
}

button:hover,
.button:hover {
	background-color: #f98780;
}

button.large,
.button.large {
	font-size: 1em;
	min-width: 14em;
}

button.style1,
.button.style1 {
	background: #3C6E71 url("images/overlay.png");
	color: #fff;
}

button.style1:hover,
.button.style1:hover {
	background-color: #2c5052;
}

button.style1:active,
.button.style1:active {
	background-color: #4e8e92;
}

button.style2,
.button.style2 {
	background: none;
	color: #606167;
	box-shadow: inset 0 0 2px 0 #a0a1a7;
}

button.style2:hover,
.button.style2:hover {
	box-shadow: inset 0 0 2px 0 #606167;
}

button.style2:active,
.button.style2:active {
	box-shadow: inset 0 0 2px 0 #202127;
}

button.style3,
.button.style3 {
	background: #2f333b url("images/overlay.png");
	color: #fff;
}

button.style3:hover,
.button.style3:hover {
	background-color: #1d1f24;
}

button.style3:active,
.button.style3:active {
	background-color: #454b56;
}

/* List */
ul {
	list-style: disc;
	padding-left: 1em;
}

ul li {
	padding-left: 0.5em;
}

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

ul.style2 li {
	border-top: solid 1px #eee;
	padding: 1.5em 0 0 0;
	margin: 1.5em 0 0 0;
}

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

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

ul.style3 li {
	border-top: solid 1px #eee;
	padding: 0.5em 0 0 0;
	margin: 0.5em 0 0 0;
}

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

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

ol li {
	padding-left: 0.25em;
}

/* Actions */
ul.actions {
	list-style: none;
	padding-left: 0;
	margin: 3em 0 0 0;
	display: flex;
	justify-content: center;
}

ul.actions li {
	display: inline-block;
	margin: 0 0.75em;
	padding-left: 0;
}

ul.actions li:first-child {
	margin-left: 0;
}

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

ul.actions.special {
	text-align: center;
}

/* Feature List */
.feature-list {
	max-width: 58em;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	display: flex;
	justify-content: center;
	padding: 0;
}

.feature-list section {
	border-top: solid 1px #eee;
	padding-top: 0;
	padding-left: 5em;
	position: relative;
}

.feature-list img {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	height: 100%;
}

.feature-list h3 {
	color: #3C6E71 !important;
	margin: -0.35em 0 0.75em 0;
	font-size: 1.5em;
	letter-spacing: 0.05em;
}

.feature-list h3:before {
	display: block;
	color: #fff;
	background: #2f333b url("images/overlay.png");
	border-radius: 2.5em;
	text-align: center;
	width: 2.5em;
	height: 2.5em;
	line-height: 2.5em;
	margin-right: 0.75em;
	position: absolute;
	left: 0;
	margin-top: -0.5em;
}

.feature-list.small section {
	padding-left: 3.5em;
}

.feature-list.small h3:before {
	font-size: 0.8em;
	padding-left: 0.12em;
	padding-top: 0.05em;
}

/* Icons */
.icon {
	text-decoration: none;
	color: #fff;
}

.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	font-size: 1.25em;
}

.icon > .label {
	display: none;
}

.icon.solid:before {
	font-weight: 900;
}

.icon.brands:before {
	font-family: 'Font Awesome 5 Brands';
}

/* Wrapper */
.wrapper {
	position: relative;
	padding: 7em 0 9em 0;
}

.wrapper .title {
	position: absolute;
	top: -2em;
	left: 50%;
	text-align: center;
	text-transform: uppercase;
	display: block;
	font-weight: 700;
	letter-spacing: 0.25em;
	font-size: 1.6em;
	width: 25em;
	height: 2em;
	line-height: 3.25em;
	margin-bottom: -3.5em;
	margin-left: -12.5em;
	padding-top: 0.1em;
	border-radius: 10px 10px 0 0;
}

.wrapper .title:before {
	content: '';
	position: absolute;
	bottom: -38px;
	left: -35px;
	width: 35px;
	height: 38px;
	background: url("images/shadow.png");
}

.wrapper .title:after {
	transform: scaleX(-1);
	content: '';
	position: absolute;
	bottom: -38px;
	right: -35px;
	width: 35px;
	height: 38px;
	background: url("images/shadow.png");
}

.wrapper.style1 {
	background: #3C6E71 url("images/overlay.png");
	color: rgba(255, 255, 255, 0.75);
}

.wrapper.style1 .title {
	background: #3C6E71 url("images/overlay.png");
	color: #fff;
}

.wrapper.style1 h1, .wrapper.style1 h2, .wrapper.style1 h3, 
.wrapper.style1 h4, .wrapper.style1 h5, .wrapper.style1 h6, 
.wrapper.style1 strong, .wrapper.style1 b, .wrapper.style1 a {
	color: #fff;
}

.wrapper.style2 {
	background: #fff;
}

.wrapper.style2 .title {
	background: #fff;
	color: #484d55;
}

.wrapper.style3 {
	background: #D9D9D9 url("images/overlay.png");
}

.wrapper.style3 .title {
	background: #D9D9D9 url("images/overlay.png");
	color: #484d55;
}

/* Page Wrapper */
#page-wrapper > section {
	margin-bottom: 0;
}

/* Header */
#header {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 25em;
	background-size: cover;
	padding: 0;
}

#header:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("images/overlay.png");
}

.homepage #header {
	height: 50em;
	text-shadow: 3px 3px 3px black;
}

/* Logo */
#logo {
	width: 100%;
	text-align: center;
	position: relative;
	top: 1.5em;
}

#logo h1 {
	font-weight: 900;
	text-transform: uppercase;
	color: #fff;
	font-size: 3em;
	letter-spacing: 0.25em;
}

#logo p {
	color: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
	margin: 1.25em 0 0 0;
	display: block;
	letter-spacing: 0.2em;
	font-size: 1.5em;
}

/* Social List */
#social-list {
	font-size: 2em;
	margin-top: 2em;
}

#social-list > ul {
	display: inline-block;
	padding: 1em 0;
}

#social-list > ul > li {
	display: inline-block;
	text-align: center;
	padding: 0 1.5em;
}

#social-list > ul > li > a {
	color: #fff;
}

#social-list > ul > li > a:hover {
	color: #bcbcbc;
}

/* Nav */
#nav {
	position: fixed;
	display: block;
	top: 1em;
	width: 100%;
	text-align: center;
	z-index: 10002;
	align-items: center;
}

#nav > ul {
	display: inline-block;
	padding: 0 1em;
	border-radius: 10px;
	box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 1);
	background-color: rgba(40, 43, 52, 0.9);
}

#nav > ul > li {
	display: inline-block;
	text-align: center;
	padding: 0 1.5em;
}

#nav > ul > li > ul {
	display: none;
}

#nav > ul > li > a, #nav > ul > li > span {
	display: block;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1em;
	letter-spacing: 0.25em;
	height: 4em;
	line-height: 4em;
	transition: all .25s ease-in-out;
	outline: 0;
}

#nav > ul > li:hover > a {
	color: #9d9d9d;
}

#nav > ul > li.active > a, #nav > ul > li.active > span {
	color: #fff;
}

.dropotron {
	background: rgba(44, 50, 63, 0.925) url("images/overlay.png");
	padding: 1.25em 1em;
	border-radius: 0.35em;
	box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.25);
	min-width: 12em;
	text-align: left;
	margin-top: -1.25em;
	margin-left: -1px;
	list-style: none;
}

.dropotron.level-0 {
	margin-top: -1px;
	margin-left: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.dropotron a, .dropotron span {
	transition: all .25s ease-in-out;
	display: block;
	color: rgba(255, 255, 255, 0.75);
	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.7em;
	letter-spacing: 0.25em;
	border-top: solid 1px rgba(255, 255, 255, 0.15);
	line-height: 3em;
}

.dropotron li {
	padding-left: 0;
}

.dropotron li:first-child a, .dropotron li:first-child span {
	border-top: 0;
}

.dropotron li:hover > a, .dropotron li:hover > span {
	color: #fff;
}

/* Intro */
#intro {
	padding-bottom: 10em;
	text-align: center;
}

#intro .container {
	border-radius: 0.35em;
	box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.8);
	margin: 0 20%;
}

#intro p.style1 {
	font-size: 1.5em;
	letter-spacing: 0.075em;
}

#intro p.style2 {
	font-weight: 600;
	color: #fff;
	font-size: 2em;
	letter-spacing: 0.075em;
	line-height: 1.35em;
	padding: 1em 8% 0.5em 8%;
	margin-bottom: 0;
}

#intro p.style2 a {
	color: inherit;
	text-decoration: none;
}

#intro p.style3 {
	font-size: 1.6em;
	padding: 0.5em 5% 2em 5%;
	margin-bottom: 0;
	color: #eee;
}

/* Features */
#features header.style1 {
	padding-bottom: 5em;
}

#features ul.actions {
	margin-top: 5em;
}

/* Tiles */
.tiles {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	margin-top: 0;
}

.tiles.aln-center {
	justify-content: center;
}

.tiles article {
	transition: transform 0.5s ease, opacity 0.5s ease, box-shadow 0.5s ease;
	position: relative;
	width: calc(33.33333% - 4em);
	aspect-ratio: 16 / 9;
	margin: 3em 2em;
}

.tiles article > .image {
	transition: transform 0.5s ease;
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
}

.tiles article > .image img {
	display: block;
	width: 100%;
	height: 100%;
}

.tiles article > .image .pin {
	position: absolute;
	right: 2em;
	top: 1em;
	transform: rotate(45deg);
	text-shadow: 2px 2px 2px black;
}

.tiles article > .image:before {
	pointer-events: none;
	transition: background-color 0.5s ease, opacity 0.5s ease;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	z-index: 1;
}

.tiles article > .image:after {
	pointer-events: none;
	transition: opacity 0.5s ease;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 0.25;
	z-index: 2;
}

.tiles article > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: background-color 0.5s ease, transform 0.5s ease;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1em;
	border-radius: 4px;
	border-bottom: 0;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	z-index: 3;
}

.tiles article > a > :last-child {
	margin: 0;
}

.tiles article > a:hover {
	color: #ffffff !important;
}

.tiles article > a .content {
	transition: transform 0.5s ease, opacity 0.5s ease;
	width: 100%;
	transform: scale(0.5);
	max-height: 15em;
	line-height: 1.5;
	margin-top: 0.35em;
	opacity: 0;
	text-shadow: 3px 3px 3px black;
}

.tiles article > a .content > h2 {
	color: #fff;
	margin-bottom: 1em;
	font-size: 2em;
	text-transform: uppercase;
}

.tiles article > a .content p {
	color: #fff;
	margin-bottom: 1em;
	font-size: 1.5em;
}

.tiles article > a .content > :last-child {
	margin-bottom: 0;
}

body:not(.is-touch) .tiles article:hover > .image {
	transform: scale(1.1);
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5);
}

body:not(.is-touch) .tiles article:hover > .image:before {
	background-color: #000;
	opacity: 0.5;
}

body:not(.is-touch) .tiles article:hover > .image:after {
	opacity: 0;
}

body:not(.is-touch) .tiles article:hover .content {
	transform: scale(1);
	opacity: 1;
}

body.is-preload .tiles article {
	transform: scale(0.9);
	opacity: 0;
}

body.is-touch .tiles article .content {
	max-height: 15em;
	opacity: 1;
}

/* Footer */
#contact {
	background: #282b34 url("images/overlay.png");
	color: #eee;
	padding-bottom: 2em;
}

#contact .container {
	margin: 1em 10% 0 10%;
}

#contact h1, #contact h2, #contact h3, #contact h4, 
#contact h5, #contact h6, #contact strong, #contact b, #contact a {
	color: #fff;
}

#contact a:hover {
	color: #bcbcbc;
}

#contact hr {
	border-top-color: rgba(255, 255, 255, 0.05);
}

#contact .title {
	background: #282b34 url("images/overlay.png");
	color: #eee;
}

#contact header.style1 {
	padding-bottom: 6em;
	margin-bottom: 6em;
	border-bottom: solid 1px rgba(255, 255, 255, 0.05);
}

#contact header.style1 h2 {
	color: #fff;
}

#contact header.style1 .p {
	color: inherit;
}

#contact .feature-list {
	max-width: 100%;
	height: 100%;
}

#contact .feature-list section {
	border-top: 0;
	padding-top: 1em;
	margin: 0 3em 3em 0;
}

#contact .feature-list h3:before {
	background: #3d4249 url("images/overlay.png");
}

/* Copyright */
#copyright {
	text-align: center;
	padding-top: 3em;
	margin-top: 3em;
	border-top: solid 1px rgba(255, 255, 255, 0.05);
}

#copyright ul {
	display: inline-block;
	border-radius: 0.35em;
	box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.25);
	padding: 0.75em 2em;
	font-size: 0.9em;
}

#copyright ul li {
	display: inline-block;
	margin-left: 1em;
	padding-left: 1em;
	border-left: solid 1px rgba(255, 255, 255, 0.05);
}

#copyright ul li:first-child {
	border-left: 0;
	margin-left: 0;
	padding-left: 0;
}

#copyright a {
	color: inherit;
}

#copyright a:hover {
	color: #fff;
}

/* Nav Panel (Mobile) */
#navPanel, #titleBar {
	display: none;
}

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

/* Breakpoint: 1680px */
@media screen and (max-width: 1680px) {
	.tiles article > a .content > h2 {
		font-size: 1.7em;
	}

	.tiles article > a .content p {
		font-size: 1.3em;
	}

	#intro p.style2 {
		font-size: 1.8em;
	}

	#intro p.style3 {
		font-size: 1.4em;
	}

	.feature-list h3 {
		font-size: 1.4em;
	}

	.tiles article {
		width: calc(50% - 5em);
		margin: 3em 1.5em;
	}
}

/* Breakpoint: 1280px */
@media screen and (max-width: 1280px) {
	#nav > ul > li > a, #nav > ul > li > span {
		font-size: 0.8em;
	}

	#logo h1 {
		font-size: 2.6em;
	}

	#logo p {
		font-size: 1.25em;
	}

	#social-list {
		font-size: 1.6em;
	}
	
	.wrapper .title {
		font-size: 1.4em;
	}
	
	.tiles article > a .content > h2 {
		font-size: 1.4em;
	}

	.tiles article > a .content p {
		font-size: 1.2em;
	}

	.button.large {
		font-size: 0.8em;
	}

	#intro p.style2 {
		font-size: 1.6em;
	}

	#intro p.style3 {
		font-size: 1.2em;
	}

	.feature-list h3 {
		font-size: 1.15em;
	}

	#contact a, #contact p {
		font-size: 0.8em;
	}

	.row > .col-12-medium { width: 100%; }
}

/* Breakpoint: 980px */
@media screen and (max-width: 980px) {
	#nav > ul > li > a, #nav > ul > li > span {
		font-size: 0.7em;
	}
	
	#logo h1 {
		font-size: 2.4em;
	}

	#logo p {
		font-size: 1.15em;
	}

	#social-list {
		font-size: 1.5em;
	}
	
	.wrapper .title {
		font-size: 1.3em;
	}

	.tiles article {
		width: 70%;
		margin: 3em 1.5em;
	}
	
	.tiles article > a .content > h2 {
		font-size: 1.3em;
	}

	.tiles article > a .content p {
		font-size: 1.1em;
	}

	.button.large {
		font-size: 0.8em;
	}

	#intro p.style2 {
		font-size: 1.5em;
	}

	#intro p.style3 {
		font-size: 1.1em;
	}

	.feature-list h3 {
		font-size: 1.15em;
	}

	.row > .col-12-medium { width: 100%; }
}

/* Breakpoint: 736px*/
@media screen and (max-width: 736px) {
	.homepage #header {
		height: 45em;
	}

	.wrapper {
		padding: 3em 0 8em 0;
	}

	.wrapper .title {
		font-size: 1.1em;
	}

	#logo h1 {
		font-size: 1.9em;
		padding-left: 5%;
		padding-right: 5%;
	}

	#intro {
		padding-top: 6em;
	}

	#intro p.style2 {
		font-size: 1.4em;
	}

	#intro p.style3 {
		font-size: 1em;
	}

	#contact {
		padding-top: 6em;
	}
	
	.feature-list {
		max-width: 40em;
	}
	
	.feature-list section {
		padding-top: 4em;
	}
	
	#nav {
		display: none;
	}
		
	.tiles {
		margin: 3em 10%;
	}
	
	.tiles article {
		width: 100%;
		margin: 3em 10%;
	}

	.tiles article > a .content > h2 {
		font-size: 1em;
	}

	.tiles article > a .content p {
		font-size: 0.8em;
	}

	#intro .container {
		margin: 0 10%;
	}
	
	/* Mobile Nav Panel */
	#page-wrapper {
		backface-visibility: hidden;
		transition: transform 0.5s ease;
		padding-bottom: 1px;
	}
	
	#titleBar {
		backface-visibility: hidden;
		transition: transform 0.5s ease;
		display: block;
		height: 44px;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10001;
		background: none;
	}
	
	#titleBar .title {
		display: none;
	}
	
	#titleBar .toggle {
		text-decoration: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 60px;
		height: 44px;
	}
	
	#titleBar .toggle:before {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
		text-transform: none !important;
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		transition: all .15s ease-in-out;
		text-decoration: none;
		content: '\f0c9';
		font-size: 14px;
		position: absolute;
		top: 6px;
		left: 6px;
		display: block;
		width: 54px;
		height: 38px;
		line-height: 38px;
		text-align: center;
		color: rgba(255, 255, 255, 0.75);
		background-color: rgba(92, 95, 103, 0.5);
		border-radius: 0.25em;
	}
	
	#titleBar .toggle:active:before {
		background-color: rgba(92, 95, 103, 0.75);
	}
	
	#navPanel {
		backface-visibility: hidden;
		transform: translateX(-275px);
		transition: transform 0.5s ease;
		display: block;
		height: 100%;
		left: 0;
		overflow-y: auto;
		position: fixed;
		top: 0;
		width: 275px;
		z-index: 10002;
		background: #242730 url("images/overlay.png");
		box-shadow: inset -3px 0 4px 0 rgba(0, 0, 0, 0.1);
	}
	
	#navPanel .link {
		display: block;
		color: rgba(255, 255, 255, 0.5);
		text-transform: uppercase;
		text-decoration: none;
		font-size: 0.85em;
		letter-spacing: 0.15em;
		height: 44px;
		line-height: 44px;
		border-top: solid 1px rgba(255, 255, 255, 0.05);
		margin: 0 15px;
	}
	
	#navPanel .link:first-child {
		border-top: 0;
	}
	
	#navPanel .indent-1 { display: inline-block; width: 1em; }
	#navPanel .indent-2 { display: inline-block; width: 2em; }
	#navPanel .indent-3 { display: inline-block; width: 3em; }
	#navPanel .indent-4 { display: inline-block; width: 4em; }
	#navPanel .indent-5 { display: inline-block; width: 5em; }
	
	#navPanel .depth-0 {
		color: #fff;
	}
	
	body.navPanel-visible #page-wrapper {
		transform: translateX(275px);
	}
	
	body.navPanel-visible #titleBar {
		transform: translateX(275px);
	}
	
	body.navPanel-visible #navPanel {
		transform: translateX(0);
	}
}

/* Breakpoint: 480px */
@media screen and (max-width: 480px) {
	#logo h1 {
		font-size: 2em;
	}
	
	#logo p {
		font-size: 0.8em;
		padding-left: 10%;
		padding-right: 10%;
	}

	#social-list {
		font-size: 1.3em;
	}

	#social-list > ul > li {
		padding: 0 1em;
	}

	.wrapper {
        padding-top: 0.5em;
    }

	.tiles article {
		margin: 2em 0.4em;
	}

	.tiles article > .image .pin {
		font-size: 0.6em;
	}

	#intro p.style2 {
		font-size: 1.2em;
	}

	#intro p.style3 {
		font-size: 0.8em;
	}

	.button.large {
        font-size: 0.6em;
    }

	.row > .col-6 { width: 100%;}

	.feature-list h3 {
		font-size: 1em;
	}

	#contact .feature-list {
		align-items: center;
	}

	#contact .feature-list section {
		margin-bottom: 0;
	}

	.feature-list img {
		height: 60%;
	}

	#copyright ul {
		font-size: 0.6em;
	}
}