/* Fonts */

@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/Lato-Medium.eot');
    src: url('../fonts/lato/Lato-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/lato/Lato-Medium.woff2') format('woff2'),
        url('../fonts/lato/Lato-Medium.woff') format('woff'),
        url('../fonts/lato/Lato-Medium.svg#Lato-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/Lato-Heavy.eot');
    src: url('../fonts/lato/Lato-Heavy.eot?#iefix') format('embedded-opentype'),
        url('../fonts/lato/Lato-Heavy.woff2') format('woff2'),
        url('../fonts/lato/Lato-Heavy.woff') format('woff'),
		url('../fonts/lato/Lato-Heavy.ttf') format('truetype'),
        url('../fonts/lato/Lato-Heavy.svg#Lato-Heavy') format('svg');
    font-weight: 900;
    font-style: normal;
}

html {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-style: normal;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	color: #000000;
	font-size: 13.5px;
	letter-spacing: 0.025rem;
}

h1, h2, h3, h4, h5, h6, a, .collapsible.areas .collapsible-header {
	font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-style: normal;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

/* Misc */

a {
	color: #557395;
}

a.link-alt {
	color: #000000;
}

a:hover, a.link-alt:hover {
	text-decoration: none;
}

.width100 {
	width:100% !important;
}

.max-width100 {
	max-width:100% !important;
}

.height100{
	height:100vh !important;
	min-height: 500px
}

.margin0 {
	margin:0 !important;
}

.margin-bottom0 {
	margin-bottom:0 !important;
}

.margin-top0 {
	margin-top:0 !important;
}

.margin-horizontal0 {
	margin-left:0 !important;
	margin-right:0 !important;
}

.margin-guideHeader {
	margin-bottom: 20px !important;
}

.padding-horizontal0 {
	padding-left:0 !important;
	padding-right:0 !important;
}

.padding-width75 {
	padding: 0 75px;
}

.padding-width100 {
	padding: 0 100px;
}

.padding-width140 {
	padding: 0 140px;
}

.float0 {
	float:none !important;
}

.uppercase {
	text-transform: uppercase;
}

.padding-1rem {
	padding: 1rem;
}

.padding-2rem {
	padding: 2rem;
}
.padding-login {
	padding:  42px 140px;
}

.padding-top-1_5rem{
	padding-top: 1.5rem;
}
.container {
	padding: 70px 80px;
	max-width: 1024px;
	width: 100% !important;
}

footer .container {
	padding-top: 50px;
	padding-bottom: 60px;
}

.bg-light-grey {
	background-color: #f7f6f6;
}

.bg-light-blue {
	background-color: #e4f0fe;
}

.bg-dark-blue {
	background-color: #5d728a;
}

.home-header {
	position: relative;
	overflow: visible;
}

.home-header .home-image {
	width: 350px;
	margin: auto;
}

.home-header .home-image img {
	display: block;
	margin-bottom: 40px;
}

.key-image {
    width: 35px;
	margin: auto;
}

.menu-icon {
    width: 25px;
    display: block;
    padding: 5px;
	margin: 8px;
	cursor: pointer;
	right: 20px;
	position: absolute;
}

.dropdown-button.active {
	pointer-events: none;
}

h5.header-text {
	font-size: 115%;
	line-height: 150%;
	margin: 0 0 1.5rem 0;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
}

h6.heading {
	text-transform: uppercase;
	font-size: 100%;
	letter-spacing: 0.05rem;
	line-height: 130%;
	margin: 0 0 0.5rem 0;
}

h6.heading-alt {
	font-size: 100%;
	letter-spacing: 0.05rem;
	line-height: 175%;
	margin: 0;
	color: #557395;
}

h6.header-pricing {
	margin: 0.125rem 0 0 0;
}

.color-alt {
	color: #557395;
}

.white-text {
	color: #fdfdfe !important;
}

#town {
	position: relative;
    overflow: hidden;
    width: 800px;
    padding: 30px 0 60px 0;
	margin: auto;
}

#imagesequence {
	position: absolute;
	width: 80px;
	top: 20px;
	height: auto;
	z-index: 13;
}

.intro {
    width: 680px;
	display: inline-block;
}

.principles-table {
    display: table;
}

.principles-table-text, .principles-table-image {
    display: table-cell;
	vertical-align: middle;
	padding: 0 0.75rem;
	width: 50%;
}

.principles-table-image {
	text-align: center;
	max-width: 290px;
	margin: auto;
}

/* Animations */

#guide .row {
	margin-bottom: 50px;
	padding: 0 70px;
}

.guide-image {
	position: relative;
	width: 100%;
	overflow: hidden;
    margin: auto;
	background-size: contain;
    background-repeat: no-repeat;
}

.guide-image img {
	display: block;
}

.guide-image div {
	position: absolute;
	width: 100%;
	top: 0;
}

.guide1#guide1-layer1 {
	background-image:url(../images/guide1-layer1.png);
	padding-top: 39.29%;
}

.guide1 #guide1-layer2 {
	width: 28%;
	left: 17%;
	top: 4%;
	opacity: 0;
	transform: translateX(-20px);
	transition: all 0.3s ease-out;
}

.guide1 #guide1-layer3 {
	width: 17%;
	left: 56%;
	top: 27%;
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.3s ease-out;
	transition-delay: 0.25s;
}

.guide1.animate #guide1-layer2, .guide1.animate #guide1-layer3 {
	opacity: 1;
	transform: none;
}

.guide2#guide2-layer1 {
	background-image:url(../images/guide2-layer1.png);
	padding-top: 39.29%;
}

.guide2 #guide2-layer2 {
	width: 17%;
	left: 73%;
	top: 40%;
	opacity: 0;
	transform: translate(15px, 20px);
	transition: all 0.5s ease-out;
}

.guide2.animate #guide2-layer2 {
	opacity: 1;
	transform: none;
}

.guide3#guide3-layer1 {
	background-image:url(../images/guide3-layer1.png);
	padding-top: 39.29%;
}

.guide3 #guide3-layer2, .guide3 #guide3-layer3, .guide3 #guide3-layer4, .guide3 #guide3-layer5, .guide3 #guide3-layer6 {
	width: 73%;
	left: 18%;
	top: 27%;
	opacity: 0;
	transition: all 0.5s ease-out;
}

.guide3 #guide3-layer3 {
	transition-delay: 0.15s;
}

.guide3 #guide3-layer4 {
	transition-delay: 0.3s;
}

.guide3 #guide3-layer5 {
	transition-delay: 0.45s;
}

.guide3 #guide3-layer6 {
	transition-delay: 0.6s;
}

.guide3.animate #guide3-layer3, .guide3.animate #guide3-layer4, .guide3.animate #guide3-layer5, .guide3.animate #guide3-layer6 {
	opacity: 1;
	transform: none;
}

.guide4#guide4-layer1 {
	background-image:url(../images/guide4-layer1.png);
	padding-top: 39.29%;
}

.guide4 #guide4-layer2 {
	width: 24%;
	left: 19%;
	top: 12%;
	opacity: 0;
	transition: all 0.3s ease-out;
}

.guide4 #guide4-layer3 {
	width: 10%;
	left: 45%;
	top: 7%;
	opacity: 0;
	transition: all 0.3s ease-out;
	transition-delay: 0.2s;
	transform: translateY(-10px);
}

.guide4 #guide4-layer4 {
	width: 24%;
	left: 57%;
	top: 25%;
	opacity: 0;
	transition: all 0.3s ease-out;
	transition-delay: 0.4s;
}

.guide4.animate #guide4-layer2, .guide4.animate #guide4-layer3, .guide4.animate #guide4-layer4 {
	opacity: 1;
	transform: none;
}

.guide5#guide5-layer1 {
	background-image:url(../images/guide5-layer1.png);
	padding-top: 39.29%;
}

.guide5 #guide5-layer2 {
	width: 56%;
	left: 7%;
	top: 20%;
	opacity: 0;
	transition: all 0.3s ease-out;
	transform: scale(0.75);
}

.guide5 #guide5-layer3 {
	width: 28%;
	left: 65%;
	top: 7%;
	opacity: 0;
	transition: all 0.3s ease-out;
	transition-delay: 0.3s;
}

.guide5.animate #guide5-layer2, .guide5.animate #guide5-layer3 {
	opacity: 1;
	transform: none;
}

.guide6#guide6-layer1 {
	background-image:url(../images/guide6-layer1.png);
	padding-top: 39.29%;
}

.guide6 #guide6-layer2 {
	width: 78%;
	left: 0;
	top: 3%;
	opacity: 0;
	transition: all 0.3s ease-out;
	transform: translateX(-10px);
}

.guide6 #guide6-layer3 {
	width: 38%;
	left: 63%;
	top: 50%;
	opacity: 0;
	transition: all 0.3s ease-out;
	transform: translateX(10px);
	transition-delay: 0.4s;
}

.guide6.animate #guide6-layer2, .guide6.animate #guide6-layer3 {
	opacity: 1;
	transform: none;
}

.guide7#guide7-layer1 {
	background-image:url(../images/guide7-layer1.png);
	padding-top: 39.29%;
}

.guide7 #guide7-layer2 {
	width: 37%;
	left: 62.5%;
	top: 55%;
	opacity: 0;
	transition: all 0.3s ease-out;
	transform: translateX(10px);
	transition-delay: 0.2s;
}

.guide7.animate #guide7-layer2 {
	opacity: 1;
	transform: none;
}

.guide8#guide8-layer1 {
	background-image:url(../images/guide8-layer1.png);
	padding-top: 134.94%;
}

.guide8 #guide8-layer2 {
	width: 73%;
	left: 14%;
	top: 45%;
	opacity: 0;
	transition: all 0.3s ease-out;
}

.guide8 #guide8-layer3 {
	width: 73%;
	left: 14%;
	top: 60%;
	opacity: 0;
	transition: all 0.3s ease-out;
	transition-delay: 0.4s;
}

.guide8 #guide8-layer4 {
	width: 73%;
	left: 14%;
	top: 74%;
	opacity: 0;
	transition: all 0.3s ease-out;
	transition-delay: 0.8s;
}

.guide8.animate #guide8-layer2, .guide8.animate #guide8-layer3, .guide8.animate #guide8-layer4 {
	opacity: 1;
	transform: none;
}

/* Accordion */

.collapsible.areas {
	box-shadow: none;
	border: none;
	margin: 0;
}

.collapsible.areas > li {
	margin: 10px;
    border-bottom: 1px solid #557395; /* in case browser can't rgba */
    border-bottom: 1px solid rgba(33.3,45.1,58.4,0.15);
}

.collapsible.areas .collapsible-header {
	line-height: 1.3;
	padding: 0.5rem;
	font-size: 120%;
	color: #557395;
	background: none;
	border: none;
	display: inline-block;
}

.collapsible.areas .collapsible-header:hover, .collapsible.areas li.active .collapsible-header {
	color: #000000;
}

.collapsible.areas .collapsible-body {
    border-bottom: none;
    padding: 0.5rem;
}

.collapsible.areas .collapsible-body ul {
    padding-left: 1.25rem;
}

.collapsible.areas .collapsible-body ul li {
	list-style-type: disc;
	margin-bottom: 0.5rem;
}

/* Tabs */

.tabs.hidden-tabs .indicator {
	display:none;
}

.tabs.hidden-tabs {
	overflow-x: hidden;
	background-color: transparent;
	height: 22px;
	margin-bottom: 20px;
	display: block !important;
}

.tabs.hidden-tabs .tab {
	height: 22px;
	line-height: 22px;
}

.tabs.hidden-tabs .tab:first-child {
	border-right: 2px solid #000000;
	padding-right: 5px;
}

.tabs.hidden-tabs .tab a {
	color: #5d728a;
	font-size: 115%;
	display: inline-block;
	border-bottom: none;
	padding: 0 5px;
	background: none !important;
}

.tabs.hidden-tabs .tab a.active {
	color: #000000;
}

/* Forms */

input:not([type]),
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=time],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=tel],
input[type=number],
input[type=search],
textarea.materialize-textarea {
	border:1px solid #cccccc;
	-moz-box-shadow: 0 1px 2px #eee inset;
    -webkit-box-shadow: 0 1px 2px #eee inset;
    box-shadow: 0 1px 2px #eee inset;
}

textarea.materialize-textarea {
    min-height: 6rem;
}

/* Nav */

nav {
	line-height: inherit;
	z-index: 100;
	height: 42px;
	background-color: white;
	box-shadow: none;
	top: -150px;
	position: fixed;
	transition: top 1.8s;
}

nav .nav-wrapper {
    max-width: 1024px;
	margin-left: auto;
    margin-right: auto;
	background-color: white;
}

nav ul.text-nav a, nav ul.text-nav a:hover {
	border-bottom: 1px solid transparent;
	color: #000000;
	font-size: 75%;
	padding: 0 6px;
	background: none;
}

nav ul.text-nav a:hover {
	color: #c8c9ca;
}

nav ul.text-nav a.active {
	color: #8b8b8b;
	border-bottom-color: #8b8b8b;
}

nav ul.text-nav {
	text-transform: uppercase;
	float: right;
	margin: 12px 75px 12px 0;
}

nav a.brand-logo {
	width: 80px;
	font-size: inherit;
	margin: 10px 0 0 80px;
	opacity: 1;
	transition: all 0.15s ease;
	border: none;
	position: relative;
    left: auto;
	transform: none;
	position: relative;
}

nav a.brand-logo > img, .home-image img {
	pointer-events: none;
}

nav ul.dropdown-content.text-nav {
   width: max-content !important;
   height: auto !important;
   top: 42px !important;
   margin: 0;
   box-shadow: none;
   transform-origin: 50% 0px !important;
}

nav ul.dropdown-content.text-nav li {
	color: #000000;
	border: none;
	min-height: 25px;
	padding: 5px 10px;
}

nav ul.dropdown-content.text-nav li:hover, nav ul.dropdown-content.text-nav li.active {
    background: none;
}

nav ul.dropdown-content.text-nav li > a {
	display: inline-block;
}

.key-nav {
	position: absolute;
	overflow: hidden;
	right: 0;
	top: 50px
}

.key-nav ul {
	width: 20px;
	height: 52px;
	background:transparent url(../images/key-nav.png) no-repeat;
	float: right;
	margin: 20px 20px 0 0;
}

.key-nav ul li {
	margin: 0;
	padding: 0;
}

.key-nav ul li a {
	text-decoration: none;
	padding: 0;
	margin: 0;
	width: 20px;
	border: none;
	pointer-events: none;
}

.key-nav ul li a:hover {
	background-color: transparent;
}

.key-nav ul li a.active {
	border-bottom: none;
}

.key-nav ul li a#key-nav-home {
	height: 17px;
}

.key-nav ul li a#key-nav-home.active {
	background:transparent url(../images/key-nav-step1.png) no-repeat;
}

.key-nav ul li a#key-nav-areas {
	height: 9px;
}

.key-nav ul li a#key-nav-areas.active {
	background:transparent url(../images/key-nav-step2.png) no-repeat;
}

.key-nav ul li a#key-nav-guide {
	height: 9px;
}

.key-nav ul li a#key-nav-guide.active {
	background:transparent url(../images/key-nav-step3.png) no-repeat;
}

.key-nav ul li a#key-nav-pricing {
	height: 5px;
}

.key-nav ul li a#key-nav-pricing.active {
	background:transparent url(../images/key-nav-step4.png) no-repeat;
}

.key-nav ul li a#key-nav-about {
	height: 6px;
}

.key-nav ul li a#key-nav-about.active {
	background:transparent url(../images/key-nav-step5.png) no-repeat;
}

.key-nav ul li a#key-nav-contact {
	height: 6px;
}

.key-nav ul li a#key-nav-contact.active {
	background:transparent url(../images/key-nav-step6.png) no-repeat;
}

/* Media Queries */

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

	html {
		font-size: 13.5px;
	}
	
}

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

	.key-nav ul {
		margin-right: 10px;
	}
	
	#town {
		width: 100%;
		padding-bottom: 40px;
	}

	.container {
		padding: 70px 40px;
	}

	.intro {
		width: 80%;
	}

	.padding-width75, .padding-width100 {
		padding: 0 40px;
	}

	.padding-width140 {
		padding: 0 60px;
	}

	.padding-top-1_5rem {
		padding-top: 1.5rem;
	}

	#guide .row {
		padding: 0 20px;
	}

}

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

	html {
		font-size: 13.5px;
		letter-spacing: 0;
	}

	h5.header-text {
		letter-spacing: 0.0125rem;
	}
	
	h6.heading {
		letter-spacing: 0.0125rem;
	}
	
	h6.heading-alt {
		letter-spacing: 0.0125rem;
	}

	.container {
		padding: 70px 5%;
	}

	nav a.brand-logo {
		margin-left: 30px;
	}

	nav ul#dropdown-mobile.text-nav {
		margin: 0;
		top: auto !important;
		left: auto !important;
		right: 0;
		width: 50% !important;
	}
	
	nav ul#dropdown-mobile.text-nav li {
		min-height: auto;
		border-bottom: 1px solid #eeeeee;
		text-transform: uppercase;
		background-color: white;
	}

	nav ul#dropdown-mobile.text-nav a {
		border: none;
		padding: 10px 15px;
	}

	.key-nav {
		display: none;
	}
	
	.home-header .home-image {
		width: 250px;
	}
	
	.key-image {
		width: 25px;
		margin: auto;
	}

	.intro {
		width: 90%;
	}

	#guide .guide-image {
		padding-bottom: 25px;
	}

	#imagesequence {
		width: 50px;
	}

	.tabs.hidden-tabs {
		margin-bottom: 0;
	}

	.padding-width75, .padding-width100 {
		padding: 0 5%;
	}

	.padding-width140 {
		padding: 0 10%;
	}

	.principles-table-text, .principles-table-image {
		display: block;
		vertical-align: top;
		width: 100%;
	}
	
	.principles-table-image {
		padding-top: 2rem;
	}

}