//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;
	@media all and(max-width:400px){width:135px;}
	line-height:45px;
	text-align: center;
	font-size:1.1em;
	font-weight:600;
	color:$softwhite;
	background:$htblue;
	border:2px solid transparent !important;
	margin-top:1px;
	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;
		}
	}
}
.prev-next {
	.arrow {
		cursor: pointer;
		position:absolute;
		top:55vh;
		height:60px;
		width:60px;
		border-radius:100%;
		text-align: center;
		opacity: 0.6;
		transition: transform 0.3s linear;
		z-index:2;
	}
	.prev {
		left:40px;
		background:url(/img/prev-arrow.svg) center/cover;
	}
	.next {
		right:40px;
		background:url(/img/next-arrow.svg) center/cover;
	}
	@media all and(orientation:portrait) {
		.prev{transform:rotateX(90deg) !important}
		.next{transform:rotateX(90deg) !important}
	}
	@media all and(max-width:1440px) {
		.prev{transform:rotateX(90deg) !important}
		.next{transform:rotateX(90deg) !important}
	}
	.hidden {
		&.prev{transform:rotateX(90deg) !important}
		&.next{transform:rotateX(90deg) !important}
	}

}
.snap-top-menu {
	@media all and(min-height:900px){
		margin-top:60px;
	}

	padding:0 0 0 0;
	background:$softwhite;
	.col{
		width:33%;
		margin:0 0;
		display:inline-block;
		text-align:center;
		height:40px;
		padding:0;
		a {
			position:relative;
			line-height:40px;
			vertical-align:middle;
			font-size:1.5em;
			text-transform:uppercase;
			img {display:none;}
			@media all and (min-width:800px) {
				padding-left:35px;
				&.entertainment{background:url(/img/icon-entertainment-black.svg) left/contain no-repeat;}
				&.security{background:url(/img/icon-security-black.svg) left/contain no-repeat;}
				&.integration{background:url(/img/icon-integration-black.svg) left/contain no-repeat;}
			}
			@media all and (max-width:600px) {font-size:20px;}
			@media all and (max-width:500px) {font-size:15px;}
			@media all and (max-width:400px) {font-size:12px;}
			@media all and (max-width:321px) {font-size:10px;}
		}
	}
	&.fixed {
		position:fixed;
		top:0;
		width:100%;
	}
	&.snap-top-persistant {
		z-index:9;
		@include std-shadow;
		&:not(.fixed){
			display:none;
		}
	}
	&.snap-top-static.hidden {
		opacity:0;
	}
}

//Header
header {
	top:0;
	position:absolute;
	@media all and(min-height:900px){
		position:fixed;
	}

	@include std-shadow;
	background:$softblack;
	width:100%;
	height:60px;
	padding-right:3%;
	padding-left:3%;
	z-index:10;

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

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

				&.current > a:before {
					opacity:1;
				}

				> a {
					font-variant:small-caps;
					font-size: 1.1em;
					font-weight:600 !important;
					position:relative;
					&:before {
						position:absolute;
						bottom:-3px;
						left:5px;
						right:5px;
						content:" ";
						border-bottom:1.7px solid $softwhite;
						opacity:0;
						transition:opacity 0.5s ease;
					}
				}

				a {
					font-weight: 600 !important;
					font-size: 1.1em;
					font-variant: small-caps;
					text-transform: lowercase;
					line-height:55px;
					&:hover {
						color:$htblue-solid !important;
						&:before{border-bottom:1.7px solid $htblue-solid;}
					}
				}
				&:first-child { padding-left: 0; }
				ul {
					display:none;
				}
			}
		}
	}

	.burger {display:none;}
	.coverer {
		width:0px;height:0px;
		transition:background 1s ease;
	}
	@media all and(max-width:800px){
		.burger {
			display:block;
			height:60px;
			position:absolute;
			height:60px;
			width:50px;
			right:2%;
		}
		&.visible {
			position:fixed;
			nav > ul{right:0;}

			.coverer{
				display:block;
				position:fixed;
				width:100%;
				height:100%;
				top:60px;
				left:0;
				background:$transblack;
			}
		}
		nav {
			>ul {
				z-index:12;
				display:block;
				position:fixed;
				top:60px;
				height:100%;
				background:$softerblack;
				right:-100%;
				transition:right 0.5s ease;
				min-width:200px;
				width:25%;
				>li {
					margin:0;
					text-align: center;
					width:100%;
					padding:0;
				}
			}
		}
	}
	.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;
			@media all and(max-width:400px){
				font-size: 1.3em;
			}
		}
	}

	* {
		color:$softwhite !important;
	}
}


//Default body styles
html,body{height:100%;width:100%;position:relative;}
body {
	overflow-x: hidden;
	overflow-y: scroll;
	> main {
		overflow-x: hidden;
		overflow-y: visible;
		width: 100%;
		min-height: 100%;
		min-height: calc(100% - 60px);
		> .page {
			position:absolute;
			&:not(.servicepage){
				margin-top:60px;
			}
			@media all and(min-height:900px){
				margin-top:60px;
			}
			overflow-y: visible;
			width: 100%;
			height:1%;
			min-height: 100%;
			min-height: calc(100% - 60px);
		}
	}
	&.anim-fade .page {
		&.animate {
			transition: right 0.5s ease-out, opacity 0.5s linear;
			position: absolute;
			right:0;
		}
		&.leave {
			
		}
		&.leave.active {
			opacity: 0;
		}
		&.enter {
			opacity: 0;
		}
		&.enter.active, &.leave {
			opacity: 1;
		}
	}
	&.anim-neg .page {
		&.animate {
			transition: right 0.5s ease-out, opacity 0.5s linear;
			position: absolute;
		}
		&.leave {
			right:-100%;
		}
		&.leave.active {
			right:-100%;
		}
		&.enter {
			right:100%;
		}
		&.enter.active, &.leave {
			right:0;
		}
	}
	&.anim-pos .page {
		&.animate {
			transition: right 0.5s ease-out, opacity 0.5s linear;
			position: absolute;
		}
		&.leave {
			right:100%;
		}
		&.leave.active {
			right:100%;
		}
		&.enter {
			right:-100%;
		}
		&.enter.active, &.leave {
			right:0;
		}
	}
}

//Footer
footer {
	background:$softblack;
	border-top:2px solid $softwhite;
	padding-top:35px;
	padding-bottom:35px;
	padding-left:2%;
	*: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;
		}
	}
	* {
		text-align: left !important;
	}
}