.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%;
		height:calc(100% - 60px);
		.set-btm{
			width:100%;
			text-align: right;
			padding:4%;
			position:absolute;
			bottom:0;
			left:0;
			* { color:$softwhite; }
			h1 { 
				margin-top:0;
				font-weight: 600;
				font-size: 5em;
				@media all and (min-width:100px){font-size:10px;}
				@media all and (min-width:150px){font-size:12px;}
				@media all and (min-width:200px){font-size:16px;}
				@media all and (min-width:250px){font-size:20px;}
				@media all and (min-width:300px){font-size:30px;}
				@media all and (min-width:400px){font-size:40px;}
				@media all and (min-width:500px){font-size:50px;}
				@media all and (min-width:640px){font-size:50px;}
				@media all and (min-width:740px){font-size:60px;}
				@media all and (min-width:880px){font-size:70px;}
				@media all and (min-width:1000px){font-size:80px;}
				@media all and (min-width:1440px){font-size:120px;}
			}
			h2 {
				border-right:2px solid $htblue;
				padding-right:2%;
				font-size: 3em;
				@media all and (min-width:100px){font-size:5px;}
				@media all and (min-width:150px){font-size:6px;}
				@media all and (min-width:200px){font-size:8px;}
				@media all and (min-width:250px){font-size:10px;}
				@media all and (min-width:300px){font-size:15px;}
				@media all and (min-width:400px){font-size:20px;}
				@media all and (min-width:500px){font-size:25px;}
				@media all and (min-width:640px){font-size:25px;}
				@media all and (min-width:740px){font-size:30px;}
				@media all and (min-width:880px){font-size:35px;}
				@media all and (min-width:1000px){font-size:40px;}
				@media all and (min-width:1440px){font-size:60px;}
			}
		}

		.bluebutton {
			&.entertainment {width:37%;}
			&.security {width:27%;}
			&.integration {width:33%;}
			margin: 1px 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", "no-repeat center/cover");
	width:100%;
	min-height: 125%;
	
	.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(40%, $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 {
	h1 {
		text-align:center;
		text-transform: uppercase;
		font-size: 2.7em;
		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%;
	width:100%;

	* { color:$softwhite; }

	.splash {
		top:0;
		min-height:600px;
		width:100%;
		position:fixed;
		z-index:1;
		@media all and(max-height:600px){
			position:absolute;
		}
		.splash-text {
			position:absolute;
			bottom:23%;
			left:0;
			right:0;
			text-align: center;
			.scroll2me {
				width:50px;
				height:50px;
			}
		}
	}
	.splashspacer{
		margin-top:-75px;
		min-height:600px;
		width:100%;
	}
	.postsplash {
		z-index:2;
		background:$hardgrey;
		text-align:center;
		.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");
	}
	.six-display {
		background:$softwhite;
		border:1px solid $softwhite;
		.tt {
			height:320px;
			border:1px solid $softwhite;
			padding:0;
			cursor:pointer;
			.front, .back {
				height:320px;
				position:absolute;
				height:100%;
				width:100%;
				overflow:hidden;
			}
			.back *{color:$softblack;}
			.front {
				h3, p{margin:0;background:$transblack;}
				h3 {
					margin-top:100px;
					padding-top:20px;
					text-transform: uppercase;
					position:relative;
					&:before {
						content:"";
						position:absolute;
						height:150px;
						width:100%;
						top:-150px;
						left:0;
						background:$transblack;
						transition:opacity 0.5s;
						opacity:1;
					}
				}
				p {
					position:relative;
					padding-bottom:20px;
					&:before {
						content:"";
						position:absolute;
						height:150px;
						width:100%;
						bottom:-150px;
						left:0;
						background:$transblack;
						transition:opacity 0.5s;
						opacity:1;
					}
				}
			}
			&.t1 .front{background:url(/img/t1.jpg) no-repeat center/cover;}
			&.t2 .front{background:url(/img/t2.jpg) no-repeat center/cover;}
			&.t3 .front{background:url(/img/t3.jpg) no-repeat center/cover;}
			&.t4 .front{background:url(/img/t4.jpg) no-repeat center/cover;}
			&.t5 .front{background:url(/img/t5.jpg) no-repeat center/cover;}
			&.t6 .front{background:url(/img/t6.jpg) no-repeat center/cover;}
		}
		.hover-wrap:hover{
			.tt:hover {
				h3:before,p:before{opacity:0;}
			}
		}
		&.t1-active {
			.hover-wrap:not(:hover){
				.t1{h3:before,p:before{opacity:0;}}
			}
		}
		&.t2-active {
			.hover-wrap:not(:hover){
				.t2{h3:before,p:before{opacity:0;}}
			}
		}
		&.t3-active {
			.hover-wrap:not(:hover){
				.t3{h3:before,p:before{opacity:0;}}
			}
		}
		&.t4-active {
			.hover-wrap:not(:hover){
				.t4{h3:before,p:before{opacity:0;}}
			}
		}
		&.t5-active {
			.hover-wrap:not(:hover){
				.t5{h3:before,p:before{opacity:0;}}
			}
		}
		&.t6-active {
			.hover-wrap:not(:hover){
				.t6{h3:before,p:before{opacity:0;}}
			}
		}
	}

	.six-display.fade-mode {
		.slide-container {display:none;}
		.tt .front {transition:opacity 0.3s;}
		.t1:hover .front {opacity:0;}
		.t2:hover .front {opacity:0;}
		.t3:hover .front {opacity:0;}
		.t4:hover .front {opacity:0;}
		.t5:hover .front {opacity:0;}
		.t6:hover .front {opacity:0;}
	}

	.six-display {
		.slide-container {
			padding:0;
			overflow:hidden;
			position:relative;
		 	height:200px;
		 	transition:height 0.3s;
		 	> .slide {
		 		position:absolute;
		 		width:100%;
		 		transition:left 0.3s;
				h3{
					text-transform: uppercase;
					span{@include underlineH(25%, $softblack);}
					margin-bottom:25px;
				}
		 		* {
		 			color:$softblack;
		 			text-align: center;
		 		}
		 	}
		}
		&.t0-active {
	 		.slide-container{height:100px;}
	 	}
		//Initial state
		&.t0-active {
			.t0-slide {left:0;}
			.t1-slide {left:100%;}
			.t2-slide {left:200%;}
			.t3-slide {left:300%;}
			.t4-slide {left:400%;}
			.t5-slide {left:500%;}
			.t6-slide {left:600%;}
		}

		//Active states
		&.t1-active {
			.t0-slide {left:-100%;}
			.t1-slide {left:0%;}
			.t2-slide {left:100%;}
			.t3-slide {left:200%;}
			.t4-slide {left:300%;}
			.t5-slide {left:400%;}
			.t6-slide {left:500%;}
		}
		&.t2-active {
			.t0-slide {left:-200%;}
			.t1-slide {left:-100%;}
			.t2-slide {left:0%;}
			.t3-slide {left:100%;}
			.t4-slide {left:200%;}
			.t5-slide {left:300%;}
			.t6-slide {left:400%;}
		}
		&.t3-active {
			.t0-slide {left:-300%;}
			.t1-slide {left:-200%;}
			.t2-slide {left:-100%;}
			.t3-slide {left:0%;}
			.t4-slide {left:100%;}
			.t5-slide {left:200%;}
			.t6-slide {left:300%;}
		}
		&.t4-active {
			.t0-slide {left:-400%;}
			.t1-slide {left:-300%;}
			.t2-slide {left:-200%;}
			.t3-slide {left:-100%;}
			.t4-slide {left:0%;}
			.t5-slide {left:100%;}
			.t6-slide {left:200%;}
		}
		&.t5-active {
			.t0-slide {left:-500%;}
			.t1-slide {left:-400%;}
			.t2-slide {left:-300%;}
			.t3-slide {left:-200%;}
			.t4-slide {left:-100%;}
			.t5-slide {left:0%;}
			.t6-slide {left:100%;}
		}
		&.t6-active {
			.t0-slide {left:-600%;}
			.t1-slide {left:-500%;}
			.t2-slide {left:-400%;}
			.t3-slide {left:-300%;}
			.t4-slide {left:-200%;}
			.t5-slide {left:-100%;}
			.t6-slide {left:0%;}
		}
	}

	.expertly-tailored {
		min-height:600px;
		background:url(/img/se-splash2.jpg) top/cover no-repeat;
		.blue-left{
			border-left:2px solid $htblue;
			text-align: left;
			padding-right:5%;
			margin-top:10%;
			margin-bottom:10%;
			h2 {
				margin-top:10px;
				font-weight:100;
			}
		}
		padding:5%;
	}
}
.integration {
	.splash {
		@include backgrounder("services-integration-splash", "jpg", "top/cover no-repeat");
	}
	.ff {min-height:450px;}
	.ff1 {background:url(/img/ff1.jpg) no-repeat right/cover;}
	.ff2 {
		background:$softwhite;
		padding:5%;
		* {color:$softblack;}
		h3 {
			@include underlineH(40%, $softblack);
			margin-bottom:5%;
		}
	}
	.ff3 {background:url(/img/ff3.jpg) no-repeat center/cover;}
	.ff4 {background:url(/img/ff4.jpg) no-repeat center/cover;}

	.how-we-build {
		background:$softwhite;
		img {
			margin-top:50px;
			width:50px;
			height:50px;
			border-radius:5px;
			background:$softblack;
		}
		* {color:$softblack;}
		h3{font-size:3.5em;}
		h4{font-size:2em;margin-bottom:50px;}
		h5{font-size:1.5em;}
	}
	.whole-home-control {
		background:url(/img/room-integration.jpg) center/cover no-repeat;
		*:not(.bluebutton) {text-align:left;}
		.center-bb{margin-top:100px;text-align: center;}
		position:relative;
		overflow:hidden;
		padding:3%;
		.ipad {
			min-height:450px;
			img {
				position:absolute;
				top:0;
				margin-top:50px;
				transition:top 1s;
				width:80%;
			}
		}
	}
}
.security {
	.splash {
		@include backgrounder("services-security-splash", "jpg", "top left/cover no-repeat");
	}
	.hover-p{
		.hover-for-p {
			background:$softwhite;
			height:200px;
			overflow-y:hidden;
			text-align: center;

			&.chillwhite {
				background:$chillwhite;
			}
			* {
				color:$softblack;
			}
			@media all and(max-width:640px){
				&:nth-child(even) {background:$chillwhite !important;}
				&:nth-child(odd) {background:$softwhite !important;}
			}
			h3 {
				margin-top:0;
				font-size: 1em;
				font-weight:600;
			}
			.icon-hiding {
				position:relative;
				width:10%;
			}
			img {
				transition:margin-top 0.5s ease;
				margin-top:70px;
			}

			&:hover img {
				margin-top:25px;
			}

			&:hover p {
				opacity:1;
			}
			p {
				opacity:0;
				transition:opacity 0.5s ease;
				font-size:0.8em;
			}
	
		}
	}
	.call2action {
		background:url(../img/uk-house.jpg) center/cover no-repeat;
		height:600px;
		text-align: left;
		.bluebutton:hover {
			color:white;
		}

		p {
			font-size: 1.2em;
			font-weight: 600;
			margin-top:30%;
			text-shadow: 5px 3px 10px rgba(0, 0, 0, 1);
		}
	}

	.camera {
		padding:3%;
		background:url(/img/axis-camera-big2.png) left top/contain no-repeat $softwhite;
		.camera-space {
			min-height:200px;
		}
		.text-pad {
			text-align: left;
			h2 {
				font-weight:100;
				font-size:2.7em;
				margin-bottom:50px;
			}
			*{color:$softblack;}
		}
		.bluebutton {
			margin-top:100px;
		}
	}
}

.page.markets {
	height:1%;
	.head-splash {
		//@include backgrounder("markets-background-header", "jpg", "no-repeat top/cover");
		@include std-shadow-in;
		background:url(../img/markets-background-full.jpg) no-repeat bottom/cover;
		padding:4%;
		text-align: center;
		h1,a{color:$softwhite;font-weight:600;}
		h1{@include std-shadow-text;font-size:2.7em;}
		.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;
				@media all and (max-width:400px){
					width:50%;
				}
				&.active {
					background:$hardblue;
					color:$softwhite;
				}
			}
		}
	}
	.slide-container {
		min-height:80%;
		position:relative;
		.slide {
			opacity:0;
			transition: opacity 1s ease,z-index 0s linear 1s;
			&.homeowners,&.developers {position:absolute;top:0;}
			&.active {
				opacity:1;
				z-index:1;
			}
			.bluebutton {
				width:48%;
			}
		}
	}
}
.page.about {
	height:1%;
	.minimummer {
		min-height:50%;
		> .row > .col {
			padding: 3%;
		}
	}
	h1 {
		font-size:2.7em;
		margin-bottom:50px;
		strong {
			color: $htblue;
			font-weight: 500;
		}
	}
	.customers-say {
		background:url(../img/customers-say.jpg) top left/cover no-repeat;
		min-height:600px;
		height:50%;
		@include std-shadow-in;
		position:relative;
		padding:5%;
		h2 {
			@include std-shadow-text;
			position:absolute;
			bottom:0;
			padding:2%;
			color:$softwhite;
			font-size:2.7em;
		}
	}
	.testimonials {
		padding:5%;
		p {font-style: italic;}
		.prevbtn,.nextbtn {
			width:30px;
			height:30px;
			@media all and(min-width:640px){
				position:absolute;
				top:50%;
				top:calc(50% - 15px);
			}
		}
		.nextbtn {
			float:right;
			@media all and(min-width:640px){right:-60px;}
		}
		.prevbtn {
			float:right;
			@media all and(min-width:640px){left:-60px;}
		}
	}
}
.page.contact {
	height:1%;
	.minimummer {
		min-height:80%;
		> .row > .col {
			padding: 3%;
		}
	}
	h1 {
		font-size:2.7em;
		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 {
		background:$softwhite;
		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;
	}
}