/* Scss Document */

@import 'reset';
@import 'variables';
@import 'header';
@import 'footer';
@import 'location';
@import 'contact';

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

.container {
	max-width: 95vw;
	margin: 0 auto;
	padding: 0 5px;
	}

#hero {
	 min-height: 600px;
	 width: 100%;
	 position: relative;
	 padding: 10px 0;
		 background-image: url("../graphics/road.jpg");
		 background-size: cover;
		 background-repeat: no-repeat;
		 background-color: rgba(0,0,0,.6);
		 background-blend-mode: multiply;
	 &.locate-hero {
		 min-height: 350px;
		 background-image: url("../graphics/row.jpg");
		 background-position: top;
		 }
		 &.sell-hero {
			background-image: url("../graphics/contract.jpg");
			min-height: 350px;
			}
		&.contact-hero {
			background-image: url("../graphics/contact.jpg");
			background-position: 50% 70%;
			min-height: 350px;
			}
	#inner-hero {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		position: relative;
		z-index: 400;
		&.other-inner-hero {
			min-height: 250px;
			#top-call {
				h1 {
					font-size: 42px;
					}
				}
			}
		#top-call {
			color: #fff;
			margin: 30px 0;
			h1 {
				font-size: 54px;
				font-weight: 700;
				margin: 10px;
				text-shadow: 0px 2px 4px rgba(0,0,0,.5);
				text-transform: uppercase;
				}
			p {
				font-size: 24px;
				max-width: 54ch;
				margin: 10px;
				line-height: 1.5;
				text-shadow: 0px 1px 3px rgba(0,0,0,.5);
				}
			#srchBtn {
				display: inline-block;
				width: 220px;
				padding: 15px;
				background: $red;
				color: #fff;
				font-weight: 700;
				font-size: 18px;
				text-transform: uppercase;
				margin: 10px auto;
				-webkit-transition: .2s all ease-in-out;
				-o-transition: .2s all ease-in-out;
				transition: .2s all ease-in-out;
				border-radius: 4px;
				text-align: center;
				&:hover {
					background: #fff;
					color: $grey;
					}
				}
			}
		}
	#other-hero-inlay {
		position: absolute;
		bottom: -100px;
		width: calc(100% - 4rem);
		left: 50%;
		-webkit-transform: translateX(-50%);
		    -ms-transform: translateX(-50%);
		        transform: translateX(-50%);
		background: #fff;
		-webkit-box-shadow: 2px 6px 8px rgba(0,0,0,.7);
		        box-shadow: 2px 6px 8px rgba(0,0,0,.7);
		#inlay-wrap {
			text-align: center;
			padding: 2rem 1rem;
			h1 {
				margin: 10px;
				font-size: 32px;
				color: $grey;
				}
			p {
				font-size: 21px;
				line-height: 1.5;
				max-width: 66ch;
				margin: 10px auto;
				}
			}
		}
	#hero-services {
			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: 60%;
			z-index: 450;
			margin: 0 auto;
			position: absolute;
			bottom: -90px;
			left: 50%;
			-webkit-transform: translateX(-50%);
			    -ms-transform: translateX(-50%);
			        transform: translateX(-50%);
			.hero-service-sec {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				-ms-flex-pack: distribute;
				    justify-content: space-around;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-flex: 1;
				    -ms-flex: 1;
				        flex: 1;
				margin: 0 10px;
				padding: 40px 20px;
				background: $grey - 25;
				text-align: center;
				border-radius: 4px;
				h1 {
					font-size: 32px;
					color: #fff;
					letter-spacing: 1px;
					font-weight: 700;
					margin-top: -10px;
					}
				p {
					font-size: 21px;
					color: #fff;
					margin: 3px;
					max-width: 40ch;
					}
				}
			}
	}
#mid-sec {
	#inner-mid {
		padding: 2rem 10px;
		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;
		#mid-left {
			margin: 10px;
			img {
				max-width: 90%;
				}
			}
		#mid-right {
			margin: 10px;
			h1 {
				font-size: 26px;
				max-width: 35ch;
				line-height: 1.3;
				letter-spacing: 1px;
				text-transform: uppercase;
				font-weight: 700;
				color: #fff;
				span {
					text-transform: none;
					font-size: 22px;
					font-style: italic;
					font-weight: 400;
					color: $yellow;
					}
				}
			}
		}
	}
	
	/**********************************************************************************************************************/
	/**********************************************************************************************************************/
	
article {
	&.main {
		padding: 3rem 0;
		background: $grey - 25;
		height: auto;
		}
	
	.article-call {
			text-align: center;
			h1 {
			font-size: 44px;
			color: #fff;
			margin: 10px;
			}
			p {
				line-height: 1.6;
				color: #fff;
				margin: 10px auto;
				padding-bottom: 20px;
				font-size: 21px;
				max-width: 82ch;
				border-bottom: 3px solid #fff;
				}
			img {
				margin: -10px 10px 10px;
				max-width: 90%;
				}
			}
	}
	

/*******************/
/*******************************/

#main-info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 20px 0 0;
	#main-left {
		-webkit-box-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
		margin: 10px 10px 10px 20px;
		.main-left-sec {
			min-height: 240px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			background-blend-mode: multiply;
			background-color: rgba(black, .6);
			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: end;
			    -ms-flex-pack: end;
			        justify-content: flex-end;
			-webkit-box-align: start;
			    -ms-flex-align: start;
			        align-items: flex-start;
					&.map-main-left-sec {
						&:nth-of-type(1) {
							background: url("../graphics/mech1.jpg");
							background-position: right;
							background-color: rgba(0,0,0,.6);
							background-blend-mode: multiply;
							}
						&:nth-of-type(2) {
							background: url("../graphics/lot3.JPG");
							background-position: center;
							background-color: rgba(0,0,0,.6);
							background-blend-mode: multiply;
							}
						}
			p {
				margin: 15px 35px;
				color: #fff;
				text-transform: uppercase;
				font-size: 24px;
				}
			h1 {
				margin: 10px 35px 50px 35px;
				color: #fff;
				font-size: 38px;
				font-weight: 700;
				a {
					text-decoration: underline;
					&:hover {
						color: $yellow;
						}
					}
				}
			&:nth-of-type(1) {
				margin-bottom: 20px;
				background-image: url("../graphics/row.jpg");
				}
			&:nth-of-type(2) {
				background-image: url("../graphics/mech1.jpg");
				}
			}
		}
	#main-right {
		margin: 10px 20px 10px 10px;
		-webkit-box-flex: 2;
		    -ms-flex: 2;
		        flex: 2;
		min-height: 500px;
		background-position: bottom;
		background-repeat: no-repeat;
		background-color: $yellow - 30;
		background-size: 50%;
		background-image: url("../graphics/tire.png");
		&.map-main-right {
			background-image: none;
			}
		h1 {
			margin: 35px 35px 15px;
			color: $grey - 20;
			font-size: 38px;
			font-weight: 700;
			}
		p {
			margin: 10px 35px;
			color: #fff;
			font-size: 19px;
			max-width: 88ch;
			line-height: 1.5;
			}
		}
	}
	

#main-btm {
	margin: 10px;
	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: 2rem 0;
	h1#service-call {
		text-align: center;
		margin: 20px 0 0;
		color: $grey;
		font-size: 36px;
		font-weight: 700;
		}
	#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: 24px;
				color: $red - 20;
				margin: 5px;
				}
			h1 {
				font-size: 24px;
				text-transform: uppercase;
				margin: 5px 0;
				line-height: 1.1;
				color: $grey;
				}
			p {
				font-family: $font1;
				max-width: 40ch;
				margin: 5px 0;
				line-height: 1.4;
				color: $grey;
				}
			}
		}
	}
	
#btm-hero {
	min-height: 350px;
	background-image: url("../graphics/Capture.JPG");
	background-position: center;
	background-size: cover;
	background-color: rgba(black,.5);
	background-blend-mode: multiply;
	background-attachment: fixed;
	#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;
		min-height: 350px;
		color: #fff;
		h1 {
			font-size: 36px;
			font-weight: 700;
			margin: 15px;
			}
		.breaker {
			margin: 15px;
			width: 300px;
			background: $red;
			height: 3px;
			}
		p {
			max-width: 66ch;
			line-height: 1.5;
			font-size: 21px;
			margin: 15px;
			}
		}
	}
	
@media all and (max-width: 885px) {
	#hero {
		#inner-hero {
			#top-call {
				h1 {
					font-size: 44px;
					}
				p {
					font-size: 18px;
					}
				}
			}
			#hero-services {
				width: 80%;
				.hero-service-sec {
				padding: 30px 10px;
				text-align: center;
				i {
					font-size: 18px;
					}
				p {
					font-size: 16px;
					}
			}
		}
	}
#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;
		text-align: center;
		}
	}
#main-info {
	-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;
	#main-left {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 auto;
		        flex: 0 0 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
		margin: 10px 10px 0 0;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		.main-left-sec {
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
			margin: 10px;
			min-height: 270px;
			&:nth-of-type(2) {
				margin-bottom: 20px;
				}
			}
		}
	}
article {
	.article-call {
		max-width: 80%;
		margin: 0 auto;
	h1 {
		font-size: 32px;
		}
	p {
		font-size: 18px;
		}
	}
	}
#main-btm {
	#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;
		width: 100%;
	}
	}
article {
	&.btm {
		.btm-call {
	.btm-call-left {
		h1 {
			font-size: 32px;
			letter-spacing: 2px;
			}
		}
	.btm-call-right {
		p {
			font-size: 24px;
			}
		.btm-line {
			height: 1px;
			}
		}
	}
	.btm-info {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
			}
		}
	&.photos {
		.sup-wrap {
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			margin: 0;
			.sup-sec {
				width: 90%;
				margin: 1rem auto;
				height: 250px;
				}
			}
		}
	}
}
@media all and (max-width: 650px) {
	#main-info {
		#main-left {
			-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;
			.main-left-sec {
				-webkit-box-flex: 1;
				    -ms-flex: 1;
				        flex: 1;
				width: 100vw;
				margin: 0;
				&:nth-of-type(2) {
					margin: 0;
					}
				}
			}
		#main-right {
			width: 100vw;
			}
		}
	}