/* Scss Document */

@import 'reset';
@import 'variables';
@import 'header';
@import 'footer';
@import 'location';
@import 'contact';
@import 'cut-sheets';

body {
	font-family: $font2;
	position: relative;
	overflow-x: hidden;
	}
a {
	text-decoration: none;
	color: inherit;
	&:hover {
		color: inherit;
		}
	}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 35px;
	}
		
#hero {
	background: linear-gradient(130deg, #fff 60%, $yellow 60.01%);
	background-repeat: no-repeat;
	min-height: 85vh;
	background-attachment: fixed;
	margin-top: -30px;
	#inner-hero {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		#car-pic {
			flex: 2;
			img {
				max-width: 100%;
				}
			}
		#arrow {
			position: absolute;
			bottom: -35px;
			left: 50%;
			transform: translateX(-50%);
			i {
				font-size: 44px;
				animation: arrow-hover 3.5s linear infinite;
				}
			&:hover {
				cursor: pointer;
				}
			}
		}
	@keyframes arrow-hover {
		33% {
			transform: translateY(5px);
			}
		66% {
			transform: translateY(-5px);
			}
		100% {
			transform: none;
			}
		}
	#top-call {
		flex: 1;
		padding: 10px 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		min-height: 68vh;
		#starz {
			margin: 15px 0;
			margin-left: -8px;
			i {
				font-size: 32px;
				color: $yellow;
				margin: 0 8px;
				}
			}
		h1 {
			font-size: 48px;
			line-height: 1;
			text-transform: uppercase;
			font-family: $font2;
			color: $grey;
			letter-spacing: 3px;
			/*text-shadow: 0px 0px 5px rgba(0,0,0,.6);*/
			margin: 10px 0;
			span {
				font-weight: 700;
				color: $orange;
				}
			}
		p#top-call-info {
			font-size: 19px;
			line-height: 1.4;
			max-width: 66ch;
			margin: 10px 0;
			font-family: $font1;
			color: $grey;
			}
		}
	}

.hvr-sweep-to-right {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  margin: 15px 0;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  background: linear-gradient(120deg, $maroon, $orange);
  max-width: 200px;
 p {
	text-transform: uppercase;
	font-family: $font2;
	font-size: 19px;
	color: #fff;
	padding: 15px 25px;
	letter-spacing: 1px;
		i {
			margin-right: 5px;
			font-size: 16px;
			}
		}
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(120deg, $orange, $yellow);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
	
	
@-webkit-keyframes appear {
	100% {
		opacity: 1;
		}
	}
	
@keyframes appear {
	100% {
		opacity: 1;
		}
	}
	

	
#main-info {
	&.active {
		box-shadow: 0px 0px 22px rgba(0,0,0,.5);
		}
	#inner-main {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		width: 100%;
		padding: 3rem 0;
		}
	h1#service-call {
		width: auto;
		margin: 2rem auto;
		text-align: center;
		padding-bottom: 10px;
		border-bottom: 4px solid $yellow;
		font-size: 44px;
		text-transform: uppercase;
		color: $grey;
		letter-spacing: 4px;
		-webkit-transform: translateY(50px);
		    -ms-transform: translateY(50px);
		        transform: translateY(50px);
		opacity: 0;
		-webkit-transition: .3s all ease-in-out;
		-o-transition: .3s all ease-in-out;
		transition: .3s all ease-in-out;
		position: relative;
		&:after {
			position: absolute;
			content: "";
			width: 0; 
		    height: 0; 
			bottom: -24px;
			left: 50%;
			-webkit-transform: translateX(-50%);
			    -ms-transform: translateX(-50%);
			        transform: translateX(-50%);
		    border-left: 20px solid transparent;
		    border-right: 20px solid transparent;
		    border-top: 20px solid $yellow;
			}
		&.active {
			-webkit-transform: none;
			    -ms-transform: none;
			        transform: none;
			opacity: 1;
			}
		}
	#services {
		padding: 10px 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		margin: 15px 0;
		width: 100%;
		-webkit-transform: translateY(50px) scale(0.5);
		    -ms-transform: translateY(50px) scale(0.5);
		        transform: translateY(50px) scale(0.5);
		opacity: 0;
		-webkit-transition: .5s all ease-in-out;
		-o-transition: .5s all ease-in-out;
		transition: .5s all ease-in-out;
		&.active {
			-webkit-transform: none;
			    -ms-transform: none;
			        transform: none;
			opacity: 1;
			}
		.service-list {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			text-align: center;
			margin: 15px;
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
			img {
				max-width: 100%;
				margin: 10px 0;
				}
			h1 {
				font-size: 24px;
				text-transform: uppercase;
				margin: 5px 0;
				line-height: 1.1;
				color: $grey2;
				}
			p {
				font-family: $font1;
				max-width: 30ch;
				margin: 5px 0;
				line-height: 1.4;
				color: $grey;
				}
			}
		}
	}	

#mid {
	background-image: url("../graphics/building.JPG");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: rgba(0,0,0,.45);
	background-blend-mode: multiply;
	&.active {
		display: none;
		}
	#inner-mid {
		padding: 4rem 10px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		h1 {
			margin: 20px 20px 10px;
			font-size: 36px;
			text-transform: uppercase;
			color: #fff;
			line-height: 1.4;
			text-align: center;
			-webkit-transition: .4s cubic-bezier(.5, 1, .75, 1);
		     -o-transition: .4s cubic-bezier(.5, 1, .75, 1);
		     transition: .4s cubic-bezier(.5, 1, .75, 1);
			 -webkit-transform: rotateX(180deg); 
			  transform: rotateX(180deg);
			  opacity: 0;
			  &.active {
				  -webkit-transform: none;
				      -ms-transform: none;
				          transform: none;
				  opacity: 1;
				  }
			}
		p {
			margin: 20px;
			line-height: 1.7;
			max-width: 88ch;
			text-align: center;
			color: #fff;
			font-family: $font1;
			font-size: 18px;
			-webkit-transition: .4s all ease-in-out;
			-o-transition: .4s all ease-in-out;
			transition: .4s all ease-in-out;
			-webkit-transform: scale(.5);
			    -ms-transform: scale(.5);
			        transform: scale(.5);
			opacity: 0;
			&.active {
				-webkit-transform: none;
				    -ms-transform: none;
				        transform: none;
				opacity: 1;
				}
			}
		}
	}


	
#overlay {
	min-height: 500px;
	margin-top: 50px;
	position: relative;
	#top {
		height: 400px;
		width: 80%;
		margin: 0 auto;
		border: 15px solid #fff;
		-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.6);
		        box-shadow: 0px 0px 6px rgba(0,0,0,.6);
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translateY(-50%) translateX(-50%);
		    -ms-transform: translateY(-50%) translateX(-50%);
		        transform: translateY(-50%) translateX(-50%);
		z-index: 5;
		background: #fff;
			#inner-top {
				position: relative;
				height: 100%;
				width: 100%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				.bg {
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				position: absolute;
				height: 100%;
				width: 100%;
				background-color: rgba(0,0,0,.75);
				background-blend-mode: multiply;
				top: 0;
				left: 0;
				opacity: 0;
				&:nth-of-type(1) {
					background-image: url("../graphics/slider1.jpg");
					-webkit-animation: inner-bg 15s both infinite;
					        animation: inner-bg 15s both infinite;
					}
				&:nth-of-type(2) {
					background-image: url("../graphics/slider2.jpg");
					-webkit-animation: inner-bg 15s 5s both infinite;
					        animation: inner-bg 15s 5s both infinite;
					}
				&:nth-of-type(3) {
					background-image: url("../graphics/slider3.jpg");
					-webkit-animation: inner-bg 15s 10s both infinite;
					        animation: inner-bg 15s 10s both infinite;
					}
				}
			}
		}
			#inner-call {
					position: absolute;
					top: 12%;
					left: 10%;
					-webkit-transform: translateY(-50%), translateX(-50%);
					    -ms-transform: translateY(-50%), translateX(-50%);
					        transform: translateY(-50%), translateX(-50%);
					z-index: 25;
					h1 {
						font-size: 36px;
						text-transform: uppercase;
						letter-spacing: 2px;
						margin: 20px;
						color: #fff;
						}
					p {
						margin: 20px;
						max-width: 48ch;
						line-height: 1.5;
						color: #fff;
						font-family: $font1;
						}
					.hvr-sweep-to-right {
						display: inline-block;
						text-align: center;
						margin: 20px;
						p {
							color: #fff;
							font-family: $font2;
							letter-spacing: 2px;
							padding: 0;
							}
						}
					}
	#behind {
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		    -ms-transform: translateY(-50%);
		        transform: translateY(-50%);
		left: 0;
		height: 200px;
		width: 100%;
		background: -webkit-linear-gradient(275deg, $yellow + 25, $maroon);
		background: -o-linear-gradient(275deg, $yellow + 25, $maroon);
		background: linear-gradient(175deg, $yellow + 25, $maroon);
		z-index: -1;
		-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.7);
		        box-shadow: 0px 0px 6px rgba(0,0,0,.7);
		}
	}
	
#bottom-call {
	text-align: center;
	padding-bottom: 2rem;
	h1 {
		font-size: 34px;
		color: $grey;
		text-transform: uppercase;
		line-height: 1.4;
		font-weight: 700;
		letter-spacing: 3px;
		margin: 20px 0;
		}
	p {
		line-height: 1.7;
		max-width: 88ch;
		font-family: $font1;
		font-size: 18px;
		margin: 20px auto;
		}
	}
	
	
@-webkit-keyframes inner-bg {
	33% {
		opacity: 1;
		}
	66% {
		opacity: 0;
		}
	}
	
	
@keyframes inner-bg {
	33% {
		opacity: 1;
		}
	66% {
		opacity: 0;
		}
	}
	
	
#last {
	min-height: 650px;
	width: 100%;
	background: url("../graphics/sped-bg.png");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	margin: 2rem 0;
	#inner-last {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		#last-top {
			h1 {
				text-transform: uppercase;
				font-size: 44px;
				color: $grey;
				margin: 10px 60px 30px;
				padding-bottom: 3px;
				border-bottom: 3px solid $orange;
				display: inline-block;
				}
			}
		#last-btm {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-pack: distribute;
			    justify-content: space-around;
			-webkit-box-align: start;
			    -ms-flex-align: start;
			        align-items: flex-start;
			.section {
				width: 100%;
				.bg {
					height: 400px;
					width: 80%;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
					margin: auto;
					-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.7);
					        box-shadow: 0px 0px 10px rgba(0,0,0,.7);
					background-image: url("../graphics/row.jpg");
					&#contact-bg {
						background-image: url("../graphics/contact.jpg");
						}
					}
				.info {
					padding: 20px 0;
					background: #fff;
					width: 80%;
					margin: auto;
					p {
						color: $grey;
						font-size: 21px;
						font-family: $font2;
						text-transform: uppercase;
						margin: 10px 30px;
						text-align: center;
						padding-bottom: 5px;
						border-bottom: 2px solid $orange;
						display: -webkit-inline-box;
						display: -ms-inline-flexbox;
						display: inline-flex;
						-webkit-box-pack: center;
						    -ms-flex-pack: center;
						        justify-content: center;
						-webkit-box-align: center;
						    -ms-flex-align: center;
						        align-items: center;
						}
					}
				}
			}
		}
	}
	
#map-preview-wrap {
	padding: 2rem 0;
	#map-preview {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		width: 100%;
		height: 30vh;
		background: url("../graphics/map.JPG");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		p {
			text-align: center;
			font-size: 32px;
			font-weight: 700;
			color: $grey;
			text-transform: uppercase;
			letter-spacing: 3px;
			}
		&:hover {
			background-color: rgba(0,0,0,.6);
			background-blend-mode: multiply;
			> p {
				color: #fff;
				}
			}
		}
	}	

	
ul#assoc-list {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 1rem 0;
	li {
		margin: 15px;
		}
	}	
	
@media all and (max-width: 1100px) {
	#hero {
		#inner-hero {
			#car-pic {
				img {
					max-width: 100%;
					}
				}
			}
		}
	}
@media all and (max-width: 885px) {
	.spacer {
		display: none;
		}
	#hero {
		min-height: 550px;
		#inner-hero {
			flex-direction: column;
			#top-call {
				min-height: 450px;
				}
			}
		}
}
	
@media all and (max-width: 650px) {
	#hero {
		min-height: none;
		height: auto;
		&.about-hero {
			}
		#top-call {
			min-height: 0;
			height: auto;
			#starz {
				i {
					font-size: 21px;
				}
			}
			h1 {
				font-size: 34px;
				}
			p {
				font-size: 19px;
				}
			#btns {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				#or {
					top: 35%;
					}
			.btn {
				p {
					font-size: 15px;
					}
				}
			}
		}
	}
	#main-info {
		#inner-main {
			h1#service-call {
				font-size: 32px;
				}
			#services {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
		margin: 0;
		.service-list {
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			width: 100%;
			margin: 10px 0;
			}
		}
	}
	}
#mid {
	#inner-mid {
		h1 {
			font-size: 28px;
			}
		p {
			font-size: 16px;
			}
		}
	}
#overlay {
	#top {
			width: 100%;
			border: 5px solid #fff;
			min-height: 650px;
		}
	#inner-call {
		left: 6%;
				h1 {
					font-size: 28px;
					}
				p {
					font-size: 15px;
					max-width: 35ch;
					}
				}
	#behind {
		height: 150px;
		}
	}
#bottom-call {
	margin-top: 100px;
	h1 {
		font-size: 32px;
		}
		p {
			font-size: 16px;
			}
	}
#last {
	#inner-last {
		padding-bottom: 1rem;
		#last-top {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			h1 {
				font-size: 32px;
				text-align: center;
				}
			}
		#last-btm {
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			.section {
				margin: 10px;
				.bg {
					height: 300px;
					}
				}
			}
		}
	}
	#map-preview-wrap {
		#map-preview {
			p {
				font-size: 22px;
				}
			}		
		}
	ul#assoc-list {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		li {
			margin: 10px;
			}
		}
}


@media all and (max-width: 450px) {
	.container {
		padding: 0 10px;
	}
	#overlay {
		min-height: none;
		display: flex;
		justify-content: center;
		align-items: center;
		#top {
			width: 100vw;
			border: none;
		}
	}
}