/* Scss Document */

@import 'reset';
@import 'variables';
@import 'header';
@import 'form';
@import 'testimonials';

body {
	background: url("../graphics/metal.jpg");
	background-attachment: fixed;
	font-family: $font1;
	}

.main-wrap {
	max-width: 1300px;
	margin: 0 auto;
	-webkit-box-shadow: 0px 0px 20px rgba(black, .5);
	        box-shadow: 0px 0px 20px rgba(black, .5);
	background: #fff;
	}
.container {
	width: 90%;
	margin: 20px auto;
	.inner-container {
		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;
		> div {
			margin: 0 10px;
			}
		.left-container {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			width: 65%;
			.top-left-cont {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: start;
				    -ms-flex-align: start;
				        align-items: flex-start;
				margin: 10px 0;
				> div {
					margin: 0 20px;
					}
				#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: start;
					    -ms-flex-align: start;
					        align-items: flex-start;
					h1 {
						font-family: $font2;
						font-size: 32px;
						font-weight: 700;
						letter-spacing: 1px;
						margin: 10px 0;
						color: $grey;
						line-height: 1.2;
						span {
							text-transform: uppercase;
							color: $red + 35;
							position: relative;
							&:after {
								content: "\f061";
								font-family: FontAwesome;
								font-size: 28px;
								color: $red;
								position: absolute;
								top: 50%;
								-webkit-transform: translateY(-50%);
								    -ms-transform: translateY(-50%);
								        transform: translateY(-50%);
								margin-left: 5px;
								}
							}
						}
					p {
						font-size: 15px;
						max-width: 60ch;
						line-height: 1.4;
						margin: 5px 0;
						}
					}
					.main-photo {
						background-size: cover;
						background-image: url("../graphics/stack.JPG");
						-webkit-box-shadow: 0px 5px 7px rgba(black, .5);
						        box-shadow: 0px 5px 7px rgba(black, .5);
						min-height: 270px;
						width: 100%;
						background-position: center;
						background-color: rgba(black, .5);
						background-blend-mode: multiply;
						h1 {
								margin: 10px;
								font-size: 21px;
								font-family: $font2;
								text-transform: uppercase;
								padding-bottom: 5px;
								border-bottom: 2px solid #fff;
								color: #fff;
								display: inline-block;
								}
							p {
								margin: 5px 10px;
								font-size: 15px;
								line-height: 1.4;
								max-width: 75ch;
								padding: 5px 10px;
								background: rgba(white, .8);
								color: #000;
								}
						&#form-photo {
							background-image: url("../graphics/contact.jpg");
							background-color: transparent;
							}
						&#paypal-photo {
							background-image: url("../graphics/buy.jpg");
							}
						&#directions-photo {
							background-image: url("../graphics/driver.jpg");
							background-position: center;
							background-color: rgba(white, .7);
							background-blend-mode: screen;
							h1 {
								color: $grey;
								border-bottom: 2px solid $grey;
								span {
									color: $red;
									}
								}
							}
						&#hiring-photo {
							background-image: url("../graphics/hiring.png");
							background-position: center;
							background-size: contain;
							background-repeat: no-repeat;
							background-color: transparent;
							-webkit-box-shadow: none;
							        box-shadow: none;
							}
						}
				#srch {
					iframe {
						width: 400px;
						height: 300px;
						overflow: hidden;
						}
					}
				#mobile-search-button {
					display: none;
					a {
						color: inherit;
						text-decoration: none;
						}
					}
				}
			iframe#map {
						margin: 10px 20px;
						box-shadow: 0px 4px 6px rgba($grey, .4);
						min-height: 300px;
						}
			h1.about-title {
				margin: 10px 20px;
				text-transform: uppercase;
				padding-bottom: 5px;
				border-bottom: 1px solid $red;
				font-size: 21px;
				font-family: $font2;
				letter-spacing: 1px;
				max-width: 60%;
				}
			h2.about-subtitle {
				margin: 10px 20px;
				font-size: 18px;
				font-weight: 700;
				}
			p.about-info {
						margin: 20px;
						max-width: 90%;
						line-height: 1.4;
						padding: 5px;
						a {
							color: $red;
							&:hover {
								color: $blue;
								}
							}
						}
			ul.about-list {
				margin: 5px 50px;
				li {
					margin: 5px 0;
					font-size: 17px;
					list-style: disc outside;
					}
				}
			.bottom-left-cont {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				width: 100%;
				-webkit-box-pack: justify;
				    -ms-flex-pack: justify;
				        justify-content: space-between;
				margin: 10px 0 10px 20px;
				padding: 20px 0;
				border-bottom: 1px solid $grey;
				border-top: 1px solid $grey;
				.info-box {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-orient: vertical;
					-webkit-box-direction: normal;
					    -ms-flex-direction: column;
					        flex-direction: column;
					h1 {
						font-family: $font2;
						color: $red;
						font-weight: 700;
						margin-bottom: 10px;
						text-transform: uppercase;
						}
					p {
						line-height: 1.2;
						}
					}
				.breaker {
					height: 70px;
					width: 1px;
					background: $grey;
					}
				}
			.btm-info {
				margin: 10px 0 10px 20px;
				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;
				width: 100%;
					h1 {
						font-size: 17px;
						color: $grey;
						font-weight: 700;
						font-family: $font2;
						}
				.memberships {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-orient: vertical;
					-webkit-box-direction: normal;
					    -ms-flex-direction: column;
					        flex-direction: column;
					width: 70%;
					.top-memb, .btm-memb {
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-pack: justify;
						    -ms-flex-pack: justify;
						        justify-content: space-between;
						margin: 10px 0;
						.org {
							margin: 15px;
							}
						}
					}
				}
			}
		.nav {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			width: 25%;
			margin: 10px 0;
			h1#nav-phone {
				margin: 5px 0;
				font-size: 21px;
				font-weight: 700;
				color: $red;
				font-family: $font2;
				line-height: 1.2;
				span {
					color: $grey;
					}
				}
			a {
				margin: 5px 0;
				padding: 7px 10px;
				background: $blue;
				color: #fff;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				font-size: 15px;
				text-decoration: none;
				text-transform: uppercase;
				-webkit-transition: .2s all ease-in-out;
				-o-transition: .2s all ease-in-out;
				transition: .2s all ease-in-out;
				&:nth-of-type(2) {
					background: $green;
					}
				&:nth-of-type(3) {
					background: $yellow - 20;
					}
				&:nth-of-type(4) {
					background: $orange;
					}
				&:nth-of-type(5) {
					background: royalblue;
					}
				&:nth-of-type(6) {
					background: $purple;
					}
				&:nth-of-type(7) {
					background: $brown;
				}
				&:nth-of-type(8) {
					background: firebrick;
				}
				&:hover {
					background: $grey;
					-webkit-transform: translateX(10px);
					    -ms-transform: translateX(10px);
					        transform: translateX(10px);
					}
				i {
					padding: 5px;
					font-size: 18px;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					border: 1px solid #fff;
					color: #fff;
					margin-right: 5px;
					}
				}
			}
		}
	}
	
	
/*paypal form*/

form#paypal-form {
	margin: 20px 40px;
	}
	
/*directions list*/
						
						#directions-wrap {
							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: start;
							    -ms-flex-align: start;
							        align-items: flex-start;
							#inner-directions {
								display: -webkit-box;
								display: -ms-flexbox;
								display: flex;
								-webkit-box-align: start;
								    -ms-flex-align: start;
								        align-items: flex-start;
								-ms-flex-pack: distribute;
								    justify-content: space-around;
								margin: 20px;
								}
							}
						h1#map-call {
							font-family: $font2;
							padding-bottom: 5px;
							border-bottom: 2px solid $red;
							color: $red;
							font-size: 21px;
							line-height: 1.2;
							margin: 10px 20px;
							span {
								color: $grey;
								}
							}
						ul#direction-list {
								padding: 10px 40px;
								li {
									line-height: 2;
									list-style: disc outside;
									font-size: 15px;
									color: $grey;
									font-weight: 700;
									}
								}

	
@media all and (max-width: 1300px) {
	.main-wrap {
		max-width: 1000px;
		}
	.container {
		width: 95%;
		.inner-container {
		.left-container {
			.top-left-cont {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
						#main-info {
							h1 {
								span {
									&:after {
									content: "\f063";
									}
								}
							}
						}
				}
			}
		}
		}
	
	}
@media all and (max-width: 1000px) {
	.main-wrap {
		max-width: 700px;
		}
	.container {
		width: 90%;
	.inner-container {
	.left-container {
		.bottom-left-cont {
			width: 100%;
			-ms-flex-wrap: wrap;
			    flex-wrap: wrap;
			margin: 10px;
			.info-box {
				h1 {
					font-size: 16px;
					}
				p {
					font-size: 14px;
					}
				}
			}
		.top-left-cont {
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			> div {
				margin: 0;
				}
			#about-photo {
						width: 425px;
						}
			#srch {
				iframe {
					margin: 0 -10px;
					}
				}
			}
		.bottom-left-cont  {
			margin: 10px;
			}
		.btm-info {
			margin: 10px;
			}
		}
	}
}
}
@media all and (max-width: 767px) {
	.main-wrap {
		max-width: 90vw;
		}
	.container {
	.inner-container {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		padding-bottom: 20px;
		> div {
			margin: 10px;
			}
		.nav {
			width: 90%;
			margin: 0 auto;
			}
		.left-container {
			width: 100%;
			margin: 0;
				.bottom-left-cont {
					width: 100%;
					}
				.top-left-cont {
					#srch {
						display: none;
						iframe {
							max-width: 400px;
							width: 80vw;
							overflow: hidden;
							}
						}
					#about-photo {
						width: 100%;
						}
					#mobile-search-button {
						padding: 10px 40px;
						text-align: center;
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						background: -webkit-linear-gradient($red + 40, $red);
						background: -o-linear-gradient($red + 40, $red);
						background: linear-gradient($red + 40, $red);
						color: #fff;
						font-weight: 700;
						font-family: $font2;
						-webkit-transition: .2s all ease-in-out;
						-o-transition: .2s all ease-in-out;
						transition: .2s all ease-in-out;
						margin: 10px 0;
						text-transform: uppercase;
						&:hover {
							-webkit-transform: translateY(-5px);
							    -ms-transform: translateY(-5px);
							        transform: translateY(-5px);
							-webkit-box-shadow: 0px 3px 3px rgba(black, .3);
							        box-shadow: 0px 3px 3px rgba(black, .3);							
							}
						&:active {
							-webkit-transform: none;
							    -ms-transform: none;
							        transform: none;
							-webkit-box-shadow: none;
							        box-shadow: none;
							}
						}
					}
				.btm-info {
						.memberships {
							width: 90%;
							}
						}
				}
			}
		}
	
	.memberships {
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-orient: vertical;
					-webkit-box-direction: normal;
					    -ms-flex-direction: column;
					        flex-direction: column;
					width: 70%;
					.top-memb, .btm-memb {
						-webkit-box-orient: vertical;
						-webkit-box-direction: normal;
						    -ms-flex-direction: column;
						        flex-direction: column;
						margin: 10px 0;
						.org {
							margin: 15px;
							img {
								max-width: 100%;
								}
							}
						}
					}
		
/*directions list*/
						
	#directions-wrap {
		#inner-directions {
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
				}
			}
	}