.page.index {
	@include backgrounder("index-background", "jpg", "no-repeat center center/cover");
	overflow:visible;
	position:absolute;
	height:100%; //Required because fuck you
	min-height:500px;
	.black-band {
		background:$transblack;
		min-height:500px;
		height:100%;
		.set-btm{
			width:100%;
			text-align: right;
			padding:4%;
			position:absolute;
			bottom:0;
			left:0;
			* { color:$softwhite; }
			h1 { 
				margin-top:0;
				font-size:7vw;
				font-weight: 600;
				@media all and(max-width:800px){font-size:10vw;}
			}
			h2 {
				font-size:3vw;
				border-right:2px solid $htblue;
				padding-right:2%;
				@media all and(max-width:800px){font-size:5vw;}
			}
		}

		.bluebutton {
			&.entertainment {width:37%;}
			&.security {width:27%;}
			&.integration {width:33%;}
			margin: 0.5% 0.5%;
			font-size:1vw;
			@media all and(max-width:1024px){font-size:1.45vw;}
			@media all and(max-width:800px){
				width:100% !important;
				font-size:1em !important;
			}
			img {
				@include ratio(1);
				width:30px;
				vertical-align:-10px;
			}
		}
	}
}

.page.process {
	@include backgrounder("process-background", "jpg", "fixed no-repeat top/cover");
	height:1%;
	position:relative;
	
	.process-band {
		@include std-shadow;
		.square-bg {display:none;}
		@media all and (max-width:480px){
			width:100%;
			background:$softwhite;
			.square-bg {
				display:block;
				@include ratio(1);
				background: url(../img/process-background-square.jpg) no-repeat top/cover;
			}
		}
	}

	.title-box	{
		padding-bottom:90px !important;
		h1 {
			line-height:70px;
			text-align:center;
			text-transform:uppercase;
			@include underlineH(33%, $softwhite);
		}
	}
	
	.wbg h3 {
		line-height:45px;
		padding-left:45px;
		&#icon-design { background:url(../img/icon-design.svg) no-repeat left/contain; }
		&#icon-supply { background:url(../img/icon-supply.svg) no-repeat left/contain; }
		&#icon-install { background:url(../img/icon-install.svg) no-repeat left/contain; }
		&#icon-support { background:url(../img/icon-support.svg) no-repeat left/contain; }
	}
	
	.cgbg {
		background:$chillgrey;
		*{color: $softwhite;}
		h3 {margin-top:0;}
		padding:5%;
	}
	
	.wbg {
		background:$transwhite;
		padding:3%;
	}

	.btm-process {
		h3 { font-weight: 600; }
		p { font-weight: 400; }
	}
}

.page.services {
	overflow-x:visible;
	h1 {
		text-align:center;
		text-transform: uppercase;
		span {
			@include underlineH(25%, $softblack);
		}
	}

	.biggie {
		@include ratio(2.5);
		min-height:400px;
		width:100%;
		clear:both;

		@include std-shadow-in;

		&.cinema {@include backgrounder("services-home-background-cinema", "jpg", "center/cover no-repeat");}
		&.audio {@include backgrounder("services-home-background-audio", "jpg", "center/cover no-repeat");}
		&.security {@include backgrounder("services-home-background-security", "jpg", "center/cover no-repeat");}
		&.automation {@include backgrounder("services-home-background-automation", "jpg", "center/cover no-repeat");}
	}
	.describe-service {
		width:50%;
		min-width:320px;
		max-width:940px;
		padding:3%;
		margin:-5% 2% 2% 2%;

		@include std-shadow;
		background:white;

		h2 {
			margin-top:0;
			strong {color:$htblue;}
			font-size:2.8em;
			@media all and (max-width:480px){font-size: 2.2em}
		}

		&.r {float:right;clear:both;}

		@media all and (max-width:1024px){
			margin:0 0 0 0;
			width:100%;
		}
	}
}

.servicepage {
	height:1%;
	position:none;
			* { color:$softwhite; }
	.splash {
		height:100%;
		width:100%;
		position:fixed;
		margin-top:-60px;
		z-index:1;
		.splash-text {
			position:absolute;
			bottom:20%;
			left:0;
			right:0;
			text-align: center;
			.scroll2me {
				width:50px;
				height:50px;
			}
		}
	}
	.postsplash {
		position:absolute;
		top:100%;
		z-index:2;
		background:$hardgrey;
		text-align:center;
		h2 {
			font-weight:600;
		}
		.top-icon-row {
			text-align:center;
			margin-top:-35px;
			.icon {
				background:$hardgrey;
				border-radius:50%;
				width:70px;
				height:70px;
			}
		}
	}
}

.entertainment {
	.splash {
		@include backgrounder("services-entertainment-splash", "jpg", "top/cover no-repeat");
	}
}
.integration {
	.splash {
		@include backgrounder("services-integration-splash", "jpg", "top/cover no-repeat");
	}
}
.security {
	.splash {
		@include backgrounder("services-security-splash", "jpg", "top/cover no-repeat");
	}
}








.page.markets {
	height:1%;
	.head-splash {
		//@include backgrounder("markets-background-header", "jpg", "no-repeat top/cover");
		@include std-shadow-in;
		background:url(../img/testcover.jpg) no-repeat bottom/cover;
		padding:4%;
		text-align: center;
		h1,a{color:$softwhite;font-weight:600;}
		h1{@include std-shadow-text;}
		.slide-picker {
			@include std-shadow;
			margin:auto;
			max-width:600px;
			background:$softwhite;
			border-radius:10px;
			a {
				cursor:pointer;
				color:$hardblue;
				display:inline-block;
				width:30%;
				margin:5px 0;
				height:40px;
				line-height:40px;
				border-radius: 9px;
				font-weight:600;
				&.active {
					background:$hardblue;
					color:$softwhite;
				}
			}
		}
	}
	.slide-container {
		min-height:80%;
		position:relative;
		.slide {
			opacity:0;
			transition: opacity 1s ease,z-index 0s linear 1s;
			margin:auto;
			&.homeowners, &.developers {position:absolute;top:0;}

			&.active {
				opacity:1;
				z-index:1;
			}
		}
	}
}

.page.contact {
	height:1%;
	.minimummer {
		min-height:80%;
		> .row > .col {
			padding: 5%;
		}
	}
	h1 {
		font-size:3.5em;
		margin-bottom:50px;
		strong {
			color: $htblue;
		}
	}
	.map {
		background:url(../img/map.png) center/cover no-repeat;
		height:300px;
		@include std-shadow-in;
		text-align: center;
		vertical-align: middle;
		line-height: 300px;

		a {
			width:100%;
		}
		img {
			width:60px;
			display:inline-block;
			transition:width 0.1s, height 0.1s;
			&:hover {
				width:65px;
			}
		}
	}
	.formCover {
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		z-index:-1;
		transition:opacity 0.5s ease;
		opacity:0;
		img.imgload {
			position:absolute;
			height:50%;
			top:25%;
			width:50%;
			right:25%;
			transition:transform 500s linear;
			background:transparent;
		}
		.imgfail{display:none;width:50%;margin-left:25%;background:transparent;}
		a.tryAgain{display:none;text-decoration:underline;cursor:pointer;}
		a.sendAnother{display:none;text-decoration:underline;cursor:pointer;}
	}
	.pending .formCover {
		z-index:5;
		opacity:1;
		> *:not(img) {display:none;}
		img.imgload {
			opacity:1;
			transform:rotate(36000deg);
		}
	}
	.success .formCover {
		z-index:5;
		opacity:1;
		img {display:none;}
		a.sendAnother{display:block}
	}
	.fail .formCover {
		z-index:5;
		opacity:1;
		> *:not(img) {display:none;}
		img.imgload {display:none;}
		img.imgfail {display:block;}
		a.tryAgain{display:block;}
	}

	form {
		margin-top:-42px;
		position:relative;
		label{
			display:block;
			background:transparent;
			transition:margin 0.3s ease;
			margin-top:5px;
			cursor:text;
		}
		div.empty label {
			margin-top:30px;
			margin-bottom:-30px;
			color:rgba(0,0,0,0.2);
		}

		div.filled-in, div.active, div.valid, div.invalid {
			label {
				margin-bottom:0;
				margin-top:0;
				color:$softgrey;	
			}
			textarea {
				@media all and(min-height:500px)
				{
					height:300px;
				}
			}
		}

		div.valid {
			label {
				margin-bottom:0;
			}
			input,textarea {
				&::-ms-clear {
				    display: none;
				}
				background:url(../img/valid.svg) top right/20px no-repeat;
				border-bottom:1px solid $htblue;
			}
		}
		div.invalid {
			label {
				margin-bottom:0;
			}
			input,textarea {
				background:url(../img/nope.svg) top right/20px no-repeat;
			}
		}
		input:focus,textarea:focus {
			border-bottom:1px solid $htblue;
		}
		input,textarea {
			border-bottom:1px solid $softgrey;
			color:$softblack;
			margin-bottom:0;
			box-shadow:none;
		}


		*
		{
			border:none;
			padding:5px;
		}
		div:not(:last-of-type)
		{
			margin-top:0%;
		}
		input:not([type="submit"]) {
			background:transparent;
			outline:0;
			width:100%;
		}

		textarea {
			background:transparent;
			width:100%;
			height:100px;
			transition:height 0.3s ease 0.2s;
			outline:0;
			@media all and(min-height:500px)
			{
				&:focus {
					height:300px;
				}
			}
		}
	}
	.bar-under-title {
		text-align:center;
		position:relative;
		padding-bottom:50px;
	}
	.bar-under-title:after {
		content:"";
		display:block;
		position:absolute;
		bottom:25px;
		width:50%;
		margin-left:25%;
		border-top: 2px solid $softwhite;
	}
	.contact-padding {
		padding:5%;
	}

	.bluebutton {
		padding:0;
		box-shadow:none;
	}
}