/* Scss Document */

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

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 {
	margin: 15px 10px 0;
	img {
		max-width: 100%;
		margin: 10px;
		}
	&.about-hero {
		background-color: rgba($grey, .6);
		background-image: url("../graphics/smhero.jpg");
		background-blend-mode: multiply;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50% 40%;
		padding: 2rem 0 4rem;
		margin: 15px 10px;
		#top-call {
			h1, p {
				color: #fff;
				}
			h1 {
				font-size: 34px;
				}
			p {
				font-size: 18px;
				}
			}
		}
	&.contact-hero {
		background-image: url("../graphics/contact.jpg");
		background-position: 50% 60%;
		#top-call {
			padding: 2rem 0 4rem;
			h1, p {
				color: #fff;
				}
			h1 {
				font-size: 34px;
				}
			p {
				font-size: 18px;
				}
			}
		}
	&.scrap-hero {
		background-image: url("../graphics/scrap.jpg");
		background-size: cover;
		background-position: center;
		background-color: rgba(0,0,0,.6);
		background-blend-mode: multiply;
		#top-call {
			padding: 4rem 0;
			h1, p {
				color: #fff;
				}
			}
		}
	#top-call {
		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;
						-webkit-box-align: center;
						    -ms-flex-align: center;
						        align-items: center;
						text-align: center;
		z-index: 3;
		padding: 10px 0;
		h1 {
			font-size: 54px;
			line-height: 1;
			text-transform: uppercase;
			font-family: $font2;
			color: $grey2;
			margin: 40px 0 5px;
			span {
				font-weight: 700;
				}
			}
		p {
			font-size: 22px;
			line-height: 1.4;
			max-width: 52ch;
			margin: 5px 0;
			color: $grey2;
			}
		#btns {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			margin: 10px 0;
			position: relative;
			.btn {
				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: 7px 60px;
				background: -webkit-linear-gradient(left, $gold + 30, $gold - 80);
				background: -o-linear-gradient(left, $gold + 30, $gold - 80);
				background: linear-gradient(90deg, $gold + 30, $gold - 80);
				-webkit-transition: .15s all ease-in-out;
				-o-transition: .15s all ease-in-out;
				transition: .15s all ease-in-out;
				p {
					text-transform: uppercase;
					letter-spacing: 1px;
					font-size: 19px;
					font-weight: 700;
					color: #fff;
					i {
						margin-right: 5px;
						font-size: 16px;
						}
					}
				&:hover {
					background: -webkit-linear-gradient(left, $grey2 + 50, $grey2);
					background: -o-linear-gradient(left, $grey2 + 50, $grey2);
					background: linear-gradient(90deg, $grey2 + 50, $grey2);
					}
				}
			}
		}
	}
	
@-webkit-keyframes appear {
	100% {
		opacity: 1;
		}
	}
	
@keyframes appear {
	100% {
		opacity: 1;
		}
	}
	
	
#main-info {
	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;
		.tri-wrap {
			display: -webkit-box;

			display: -ms-flexbox;
			display: flex;
			margin: 10px;
			width: 100%;
			.tri-sec {
				min-height:210px;
				-webkit-box-flex: 1;
				    -ms-flex: 1;
				        flex: 1;
				margin: 10px 5px;
				background-image: url("../graphics/row.jpg");
				background-color: rgba(0,0,0,.5);
				background-blend-mode: multiply;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				background-attachment: fixed;
				&:nth-of-type(1) {
					margin-left: 0;
					}
				&:nth-of-type(4) {
					margin-right: 0;
					}
				}
			}
	.lr-wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		margin: 10px;
		width: 100%;
		border-top: 2px solid $grey2;
		padding-top: 10px;
		&#about-lr-wrap {
			border-top: none;
			padding-top: 0;
			}
		.left, .right {
			margin: 20px 0;
			min-height: 200px;
			}
		.left {
				width: 60%;
				h1 {
					margin: 0 0 5px 15px;
					font-size: 38px;
					color: $grey2;
					font-family: $coolfont;
					}
				h2 {
					margin: 0 0 5px 15px;
					font-size: 28px;
					color: $gold - 40;
					font-family: $coolfont;
					}
				p {
					max-width: 90%;
					line-height: 1.4;
					font-size: 18px;
					margin: 15px;
					}
				#scrap-btn {
					padding: 5px 30px;
					background: $grey2;
					margin: 15px;
					max-width: 210px;
					display: inline-block;
					&:hover {
						background: $gold;
						> p {
							color: #fff;
							}
						}
					p {
						color: #fff;
						text-align: center;
						font-weight: 700;
						font-size: 18px;
						}
					}
			}
		.right {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
					width: 40%;
			background-image: url("../graphics/mech1.jpg");
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			background-color: rgba(black, .7);
			background-blend-mode: multiply;
			padding: 15px;
			min-height: 300px;
			position: relative;
			&#about-right {
				background-image: url("../graphics/sun.jpg");
				min-height: 380px;
				}
			h1 {
				font-size: 36px;
				color: #fff;
				margin: 5px 15px;
				}
			p {
				color: #fff;
				line-height: 1.5;
				font-size: 19px;
				max-width: 45ch;
				margin: 5px 15px;
				font-family: $font1;
				}
			img {
				max-width: 210px;
				margin: 5px 15px;
				}
			}
		}
	}
#main-btm {
	margin: 10px 20px 20px;
	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;
	&.location-btm {
		padding: 1rem 0;
		}
	h1#service-call {
		text-align: center;
		margin: 10px 0 0;
		color: $grey;
		line-height: 1.3;
		font-family: $font2;
		font-size: 42px;
		font-weight: 700;
		}
	#about-info {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		padding: 2rem 0;
		.about-par {
			margin: 15px;
			p {
				line-height: 1.5;
				font-size: 17px;
				font-family: $font1;
				max-width: 65ch;
				text-align: justify;
				}
			}
		}
	#services {
		padding: 10px 0;
		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;
		margin: 15px 0;
		.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;
			i {
				font-size: 28px;
				height: 60px;
				width: 60px;
				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;
				background: $gold;
				color: $grey2;
				border-radius: 50%;
				}
			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;
				}
			}
		}
	}
	
#btm-hero {
	background-image: url("../graphics/drive.jpg");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	background-color: rgba(black, .6);
	background-blend-mode: multiply;
	margin: 0 10px 10px;
	#inner-btm-hero {
		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;
		color: #fff;
		padding: 1rem 0;
		text-align: center;
		h1 {
			font-size: 28px;
			font-family: $font1;
			font-weight: 700;
			margin: 15px;
			}
		.breaker {
			margin: 15px;
			width: 40%;
			background: $gold;
			height: 3px;
			}
		p {
			max-width: 62ch;
			line-height: 1.5;
			font-size: 19px;
			margin: 15px;
			}
		}
	}
	
@media all and (max-width: 890px) {
	#main-info {
		.lr-wrap {
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			.right {
				height: auto;
				padding: 20px 0;
				width: 100%;
				min-height: 180px;
				}
			.left {
				width: 100%;
				h2 {
					font-size: 21px;
					line-height: 1.2;
					}
				}
			}
		.tri-wrap {
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			.tri-sec {
				min-height: 70px;
				max-height: 70px;
				margin: 2.5px 0;
				}
			}
		}
}
	

	
@media all and (max-width: 800px) {
	#hero {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		}
		#mid-sec {
		#inner-mid {
			-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;
			#mid-right {
				h1 {
					font-size: 21px;
					}
				}
			}
		}
	}
	
@media all and (max-width: 770px) {
	.spacer {
		display: none;
		}
	}
	
@media all and (max-width: 650px) {
	#hero {
		min-height: none;
		height: auto;
		&.about-hero {
			#top-call {
				min-height: 300px;
				}
			}
		#top-call {
			padding: 2px 0;
			min-height: 0;
			height: auto;
			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-btm {
		margin: 10px;
		#about-info {
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			}
		#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;
			}
		}
	}

}