/* Scss Document */

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

body {
	font-family: $font1;
	overflow-x: hidden;
	a {
		color: inherit;
		text-decoration: none;
		&:hover {
			cursor: pointer;
			}
		}
	}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 10px;
	}
/*#hero {
	width: 100%;
	background-image: url("../graphics/2.jpg");
	background-size: cover;
	background-position: bottom;
	min-height: 530px;
	padding: .25rem 0 8rem;
	position: relative;
	#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;
				justify-content: flex-end;
				align-items: flex-end;
				text-align: right;
		padding: 1rem 0;
		width: 100%;
		#inner-hero-right {
			margin: 5px;
			line-height: 1;
			color: $grey;
			h1 {
				font-size: 38px;
				font-family: $font2;
				margin: 10px auto;
				padding-bottom: 5px;
				border-bottom: 6px double $grey;
				display: inline-block;
				opacity: 0;
				animation: appear .25s .3s linear;
				animation-fill-mode: forwards;
				span {
					text-transform: uppercase;
					font-size: 51px;
					font-weight: 700;
					letter-spacing: 3px;
					text-shadow: 0px 2px 2px #fff;
					color: $red;
					}
				}
			p {
				font-family: $font1;
				margin: 10px auto;
				color: #fff;
				font-size: 15px;
				background-color: $grey - 50;
				padding: 5px 10px;
				max-width: 72ch;
				line-height: 1.4;
				animation: appear .25s .666s linear;
				animation-fill-mode: forwards;
				opacity: 0;
				border-radius: 7px;
				}
			#srchBtn {
				font-size: 16px;
				color: #fff;
				background: $red;
				padding: 15px 55px;
				margin: 10px 0;
				text-decoration: none;
				display: inline-block;
				-webkit-transition: .2s all ease-in-out;
				-o-transition: .2s all ease-in-out;
				transition: .2s all ease-in-out;
				text-transform: uppercase;
				animation: appear .25s 1s linear, growShrink .5s 1.3s 2 linear;
				animation-fill-mode: forwards;
				opacity: 0;
				border-radius: 8px;
				&:hover {
					background: $grey;
					box-shadow: 0px 3px 3px rgba(black, .5);
					transform: translateY(-3px);
					}
				&:active {
					transform: none;
					box-shadow: none;
					}
				}
			}
		}
	}
	*/
	
@-webkit-keyframes appear {
	100% {
		opacity: 1;
		}
	}
	
@keyframes appear {
	100% {
		opacity: 1;
		}
	}	
@-webkit-keyframes growShrink {
	50% {
		padding: 15px 45px;
		}
	}	
@keyframes growShrink {
	50% {
		padding: 15px 45px;
		}
	}
	
	
.center {
	.inner-center {
		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;
		background: #eee;
		padding: 9rem 0 8rem;
		&#contact-center {
			padding: 9rem 0 5rem;
			background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)), url("../graphics/cars.png");
			background-size: 150%;
			background-position: center;
			background-repeat: no-repeat;
			background-attachment: fixed;
			position: relative;
			}
		&#location-center {
			height: 300px;
			padding: 2rem 0;
			width: 100%;
			position: relative;
			transition: .2s all ease-in-out;
			iframe {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				}
			&:hover {
				height: 500px;
				}
			}
		h1 {
			margin: 20px 0 40px;
			font-size: 42px;
			line-height: 1.2;
			letter-spacing: 2px;
			font-family: $font2;
			color: $grey;
			font-weight: 700;
			opacity: 0;
			-webkit-animation: appear .25s .3s linear;
			        animation: appear .25s .3s linear;
			-webkit-animation-fill-mode: forwards;
			        animation-fill-mode: forwards;
			}
		p {
			max-width: 75ch;
			line-height: 1.4;
			text-align: center;
			color: $grey;
			margin: 20px auto 50px;
			font-family: $font2;
			font-size: 21px;
			opacity: 0;
			-webkit-animation: appear .25s .6s linear;
			        animation: appear .25s .6s linear;
			-webkit-animation-fill-mode: forwards;
			        animation-fill-mode: forwards;
			}
		.center-chart {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			-ms-flex-pack: distribute;
			    justify-content: space-around;
			width: 100%;
			position: relative;
			i {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				height: 85px;
				width: 85px;
				border-radius: 50%;
				color: #fff;
				background: $red;
				font-size: 38px;
				z-index: 4;
				&:nth-of-type(1) {
					opacity: 0;
				-webkit-animation: appear .25s .9s linear;
				        animation: appear .25s .9s linear;
				-webkit-animation-fill-mode: forwards;
				        animation-fill-mode: forwards;
					}
				&:nth-of-type(2) {
					opacity: 0;
				-webkit-animation: appear .25s 1.2s linear;
				        animation: appear .25s 1.2s linear;
				-webkit-animation-fill-mode: forwards;
				        animation-fill-mode: forwards;
					}
				&:nth-of-type(3) {
					opacity: 0;
				-webkit-animation: appear .25s 1.5s linear;
				        animation: appear .25s 1.5s linear;
				-webkit-animation-fill-mode: forwards;
				        animation-fill-mode: forwards;
					}
				}
			.mid-line {
				position: absolute;
				height: 4px;
				width: 75%;
				top: 50%;
				left: 50%;
				-webkit-transform: translateX(-50%);
				    -ms-transform: translateX(-50%);
				        transform: translateX(-50%);
				background: $grey;
				z-index: 3;
				opacity: 0;
				-webkit-animation: appear .25s 1.8s linear;
				        animation: appear .25s 1.8s linear;
				-webkit-animation-fill-mode: forwards;
				        animation-fill-mode: forwards;
				}
			}
		#srchBtn {
			padding: 10px 70px;
			text-align: center;
			border: 2px solid $red;
			margin: 50px 0 20px;
			display: inline-block;
			color: $red;
			font-family: $font2;
			font-size: 21px;
			border-radius: 21px;
			-webkit-transition: .2s all ease-in-out;
			-o-transition: .2s all ease-in-out;
			transition: .2s all ease-in-out;
			opacity: 0;
			-webkit-animation: appear .25s 1.8s linear;
			        animation: appear .25s 1.8s linear;
			-webkit-animation-fill-mode: forwards;
			        animation-fill-mode: forwards;
			&:hover {
				padding: 10px 100px;
				background: $red;
				color: #fff;
				-webkit-box-shadow: 0px 3px 3px rgba($grey, .86);
				        box-shadow: 0px 3px 3px rgba($grey, .86);
				}
			}
		}
	&#center-2 {
		.inner-center {
			padding: 5rem 0;
			h1 {
				font-size: 32px;
				color: $red;
				-webkit-animation: none;
				        animation: none;
				opacity: 1;
				}
			p {
				-webkit-animation: none;
				        animation: none;
				opacity: 1;
				}
			img {
				-webkit-box-shadow: 0px 7px 5px rgba(black, .75);
				        box-shadow: 0px 7px 5px rgba(black, .75);
				width: 100%;
				}
			}
		}
	}
	
.left-right {
	background: #fff;
	.inner-left-right {
		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: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		width: 100%;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		padding: 50px 0 25px;
		h1 {
			margin-bottom: 50px;
			text-align: center;
			font-family: $font2;
			color: $grey;
			display: inline-block;
			padding-bottom: 10px;
			border-bottom: 1px solid $red;
			font-size: 36px;
			position: relative;
			}
	.btm-left-right {
		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;
		> div {
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
			}
	.btm-info {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		p {
			margin: 10px 60px;
			line-height: 1.4;
			font-size: 18px;
			span {
				font-weight: 700;
				color: $grey;
				font-family: $font2;
			}
		}
	  }
	  .btm-photo {
		  max-width: 550px;
		  img {
			  width: 100%;
			  height: auto;
			  -webkit-box-shadow: 0px 3px 7px rgba(black, .75);
			          box-shadow: 0px 3px 7px rgba(black, .75);
			  &#btm-photo-2 {
				  -webkit-box-shadow: none;
				          box-shadow: none;
				  }
			  }
		  }
	/* .btm-photo {
		 height: 370px;
		 width: 100%;
		 background-size: cover;
		 background-image: url("../graphics/1.jpg");
		 margin: 10px 5px;
		 box-shadow: 0px 3px 7px rgba(black, .75);
		 &#btm-photo-2 {
			 background-image: url("../graphics/truck1.png");
			 box-shadow: none;
			 background-size: 100%;
			 background-repeat: no-repeat;
			 transform: scaleX(-1);
			 margin-left: -5%;
			 margin-right: 5%;
			 }
		 }*/
	}
  }
}
	
@media all and (max-width: 840px) {
	.center {
		.inner-center {
			padding: 3rem 0;
			&#contact-center {
			padding: 3rem 0;
			}
			}
		}
	.left-right {
		.inner-left-right {
			h1 {
				font-size: 24px;
				margin: 20px 0;
					}
			.btm-left-right {
				-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;
				.btm-photo {
					margin: 20px 5px;
					}
				}
			}
		}
	}