/* 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;
	background-image: url("../graphics/overlay.png");
		background-blend-mode: screen;
		background-color: #eee;
	}
a {
	text-decoration: none;
	color: inherit;
	&:hover {
		color: inherit;
		}
	}

.container {
	max-width: 95vw;
	margin: 0 auto;
	padding: 0 5px;
	}
	
#top-border {
	width: 100%;
	background: $grey;
	margin: 20px 0px;
	height: 5px;
	}

#hero {
	#inner-hero {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		#hero-left {
			min-height: 500px;
			-webkit-box-flex: 75%;
			    -ms-flex: 75%;
			        flex: 75%;
			background-image: url("../graphics/steer.jpg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			margin-right: 5px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			background-blend-mode: multiply;
			background-color: rgba(0,0,0,.5);
			border: 4px solid #fff;
			&.map {
				background-image: none;
				background-color: transparent;
				iframe {
					height: 100%;
					width: 100%;
				}
			}
			&.contact-hero {
				background-image: none;
				background-color: $grey;
				h1 {
					font-size: 32px;
				}
				p {
					font-size: 16px;
				}
			}
			h1 {
				color: #fff;
				font-size: 64px;
				letter-spacing: 1px;
				line-height: 1.2;
				padding: 10px 20px;
				max-width: 20ch;
				font-weight: 700;
				}
			p {
				font-family: $font1;
				font-size: 18px;
				line-height: 1.4;
				margin: 10px 20px;
				max-width: 66ch;
				color: #fff;
				}
				#srchBtn {
				padding: 5px 0;
				background: $red;
				margin: 10px 20px;
				display: inline-block;
				width: 250px;
				text-align: center;
				p {
					font-size: 24px;
					letter-spacing: 1px;
					text-transform: uppercase;
					font-family: $font2;
					margin: 0;
					}
				&:hover {
					background: $red - 50;	
					}
				}
			}
		#hero-right {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			min-height: 500px;
			margin: -10px 0 -10px 5px;
			-webkit-box-flex: 25%;
			    -ms-flex: 25%;
			        flex: 25%;
			.hero-right-sec {
				height: 20%;
				background: $red;
				margin: 10px 0 10px 10px;
				border: 4px solid #fff;
				background-position: right;
				background-size: auto;
				background-repeat: no-repeat;
				padding: 5px 0;
				-webkit-transition: .2s all ease-in-out;
				-o-transition: .2s all ease-in-out;
				transition: .2s all ease-in-out;
				position: relative;
				a {
					position: absolute;
					height: 100%;
					width: 100%;
					top: 0;
					left: 0;
					}
				h1 {
					padding: 5px;
					text-transform: uppercase;
					margin: 2.5px 5px;
					background: #fff;
					color: $grey;
					display: inline-block;
					}
				p {
					margin: 5px;
					color: #fff;
					line-height: 1.3;
					max-width: 90%;
					font-family: $font1; 
					}
				&:nth-of-type(1) {
					background-image: url("../graphics/sm-rims.png");
					background-blend-mode: multiply;
					height: 30%;
					&:hover {
						background-blend-mode: screen;
						}
					}
				&:nth-of-type(2) {
					background-color: $grey;
					text-align: right;
					height: 60%;
					background-image: url("../graphics/trucktree.jpg");
					background-blend-mode: screen;
					background-position: 10% center;
					background-size: 100%;
					&:hover {
						background-blend-mode: multiply;
						}
					}
				&:nth-of-type(3) {
					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;
					background: none;
					border: none;
					height: 50%;
					img {
						margin: 5px 0;
						&:nth-of-type(1) {
							height: 117px;
							width: 130px;
							}
						&:nth-of-type(2) {
							height: 41px;
							width: 193px;
							}
						}
					}
				&:nth-of-type(4) {
					background: none;
					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;
					border: none;
					i {
						margin: 0 5px;
						font-size: 42px;
						}
					}
				}
			}
		}
	}
	
	.four-wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: 10px -5px 40px;
		.four-sec-wrap {
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
			.four-sec {
			min-height: 20vw;
			margin: 10px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			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;
			&:nth-of-type(1) {
				background-image: url("../graphics/tow2.jpg");
				}
			&#four-two {
				background-image: url("../graphics/shelf.jpg");
				}
			&#four-three {
				background-image: url("../graphics/front.JPG");
				}
			&#four-four {
				background-image: url("../graphics/tow1.jpg");
				}
			}
		h1, p {
			margin: 2px auto;
			}
		h1 {
			text-align: center;
			background: $red - 20;
			padding: 5px;
			color: #fff;
			font-size: 21px;
			text-transform: uppercase;
			margin: 0 10px;
			}
		p {
			font-family: $font1;
			font-size: 18px;
			letter-spacing: 1px;
			margin: 5px 10px;
			max-width: 85%;
			line-height: 1.4;
			}
		}
	}
	
@media all and (max-width: 885px) {
	#hero {
		#inner-hero {
			-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;
			#hero-left {
				width: 100%;
				margin: 0;
					&.map {
						iframe {
							min-height: 500px;
						}
					}
				}
			#hero-right {
				width: 100%;
				min-height: 0;
				margin: 0;
				.hero-right-sec {
					margin: 0;
					&:nth-of-type(3) {
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-orient: horizontal;
						-webkit-box-direction: normal;
						    -ms-flex-direction: row;
						        flex-direction: row;
						}
					}
				}
			}
		}
	.four-wrap {
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		.four-sec-wrap {
			min-width: 40vw;
			.four-sec {
				margin: 20px 10px;
				min-height: 200px;
				}
			}
		}
	}
@media all and (max-width: 650px) {
	.four-wrap {
		.four-sec-wrap {
			min-width: 50vw;
			}
		}
	}