//General styles
html {
	a {
		text-decoration: none;
		color:$softblack;
	}
	* {
		font-family:Open Sans,sans-serif !important;
		font-weight:100;
	}
	strong {
		font-weight: 600;
	}
	.row {
		max-width:100%;
	}
} 

//Used breakpoints
//1023
//800
//640
//480


.response-band {
	position:relative;
	width:40%;
	float:right;
	margin-right:8%;
	@media all and (max-width: 1023px){
		width:55%;
		margin:0;
	}
	@media all and (max-width: 639px){
		width:65%;
		margin:0;
	}
}

.bluebutton {
	cursor:pointer;
	display:inline-block;
	width:150px;
	line-height:45px;
	text-align: center;
	font-size:1.1em;
	font-weight:600;
	color:$softwhite;
	background:$htblue;
	border:2px solid transparent !important;
	transition: color .3s ease,background .3s ease,border .3s ease, border-radius .3s ease;
	&:hover{
		background:transparent;
		border:2px solid $htblue !important;
		border-radius:9px;
		&.mtb {
			color:$softblack;
		}
	}
}

.snap-top-menu {
	padding:0 0 0 0;
	background:$softwhite;
	height:40px;
	a {
		text-align:center;
		width:33%;
		margin:0 0;
		display:inline-block;
		font-size:1.5em;
		text-transform:uppercase;
		@media all and (max-width:640px) {
			font-size:3.5vw;
		}
	}
	&.fixed {
		position:fixed;
		top:0;
		width:100%;
	}
	&.snap-top-persistant {
		z-index:10;
		&:not(.fixed){
			display:none;
		}
	}
	&.snap-top-static.hidden {
		opacity:0;
	}
}

//Header
header {
	@include std-shadow;
	background:$softblack;
	width:100%;
	padding-top:2px;
	height:60px;
	display:inline-block;
	padding-right:3%;
	padding-left:3%;
	z-index:10;
	position:fixed;

	nav {
		> ul {
			float:right;
			@include wipe-list;

			> li { 
				float:left;
				padding: 0 15px;
				vertical-align:-50%;

				a {
					font-weight: 600 !important;
					font-size: 1.1em;
					font-variant: small-caps;
					text-transform: lowercase;
					line-height:55px;
					&:hover {
						color:$htblue-solid !important;
					}
				}
				&:first-child { padding-left: 0; }
				ul {
					display:none;
				}
			}
		}
	}
	.company {
		float:left;
		h1 {
			img {
				height:40px;
				width:40px;
				vertical-align: -11px;
				margin-right:7px;
				border-radius: 15%;
			}
			margin:0;
			line-height: 60px;
			font-size:1.6em;
		}
	}

	* {
		color:$softwhite !important;
	}
}


//Default body styles
html,body{position:relative; height:100%;width:100%;}
body {
	overflow-x: hidden;
	overflow-y: scroll;
	> main {
		overflow-x: hidden;
		overflow-y: visible;
		width: 100%;
		min-height: 100%;
		min-height: calc(100% - 60px);
		margin: -7px auto;
		> .page {
			position:absolute;
			overflow-y: visible;
			width: 100%;
			height:1%;
			min-height: 100%;
			min-height: calc(100% - 60px);
			// &.animate {
			// 	transition: opacity 0.2s ease-out;
			// 	float: left;
			// 	position: relative;
			// }
			// &.leave {
			// 	margin-right: -100%;
			// }
			// &.leave.active {
			// 	opacity: 0;
			// }
			// &.enter {
			// 	opacity: 0;
			// }
			// &.enter.active, &.leave {
			// 	opacity: 1;
			// }
		}
	}
}

//Footer
footer {
	background:$softblack;
	border-top:2px solid $softwhite;
	padding:2.5%;
	*:not(.company-name):not(strong) {font-weight:500;}
	h3, h2, *:not(li) > a {
		color:$softwhite;
	}

	h3, h2 {
		font-size:1.2em;
	}

	ul {
		@include wipe-list;
		> li > a {
			color: $footeracolor;
			font-size:0.9em;
		}
	}

	.logo-to-the-left {
		margin-top:1rem;

		.company-name {
			font-size:1.5em;
		}
		.copyright {
			font-size:0.75em;
		}
		img {
			height:32px;
			width:32px;
			vertical-align: -30%;
			border-radius:15%;
			margin-right:3px;
		}
	}
}

