/* Scss Document */

@import 'variables';
@import 'reset';
@import 'footer';
@import 'header';
@import 'sm-hero';
@import 'services';

body {
	overflow-x: hidden;
	font-family: $font1;
	}
a {
	color: inherit;
	text-decoration: none;
	}
.container {
	max-width: 90vw;
	margin: 0 auto;
	}
.spacer {
	min-height: 130px;
	}	
.hero {
	width: 100%;
	background: linear-gradient($tan, $grey);
		#inner-hero {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 4rem 1rem 2rem;
				#inner-hero-left {
					width: 60%;
					margin: 1%;
					min-height: 250px;
					background: #fff;
					display: flex;
					flex-direction: column;
					justify-content: center;
					box-shadow: inset 0px 0px 6px 4px rgba($grey + 80,.8);
					background-image: url("../graphics/tire_op.png");
					background-position: center 40%;
					background-repeat: no-repeat;
					background-attachment: fixed;
					background-color: $tan;
					background-blend-mode: screen;
					border: 3px solid #eee;
					h1 {
							color: #fff;
							font-family: $font2;
							font-size: 36px;
							padding: 10px;
							text-transform: uppercase;
							text-shadow: -1px 1px 2px $grey;
							margin: 0 auto;
							span {
								font-style: italic;
								text-align: center;
								}
							}
					}
				#inner-hero-right {
					width: 40%;
					margin: 1%;
					min-height: 250px;
					background-color: $grey - 50;
					background-image: url("../graphics/tire_op.png");
					background-position: center 40%;
					background-repeat: no-repeat;
					background-blend-mode: screen;
					background-attachment: fixed;
					display: flex;
					flex-direction: column;
					justify-content: center;
					box-shadow: inset 0px 0px 6px 4px rgba($grey + 80,.8);
					transition: .2s all ease-in-out;
					border: 3px solid #eee;
					&:hover {
						transform: translateY(-5px);
						box-shadow: inset 0px 0px 4px 2px rgba($grey,.8), 0px 3px 3px rgba($grey, .8);
						}
						h1 {
							color: #eee;
							font-family: $font2;
							font-size: 48px;
							padding: 10px;
							text-transform: uppercase;
							}
						p {
							color: $yellow;
							font-size: 16px;
							text-transform: uppercase;
							line-height: 1.2;
							font-weight: 700;
							padding: 10px;
							max-width: 38ch;
							}
					}
			}
	}
	
/*about*/
.about {
	width: 100%;
	background: #fff;
	#inner-about {
		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;
		padding: 1rem;
		h1 {
			font-size: 36px;
			color: $grey;
			font-weight: 900;
			margin: 20px;
			font-family: $font2;
			text-align: center;
			}
		.info-brk {
					width: 80%;
					height: 1px;
					background: $grey;
					margin: 10px auto;
					}
		}
	#inner-about-info {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		p {
			margin: 20px 40px;
			font-size: 17px;
			line-height: 1.7;
			max-width: 40ch;
			}
		}
	}
/*info*/
.info {
	background-color: $tan - 20;
	background-image: url("../graphics/tire_op.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	.inner-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;
		height: 400px;
		text-align: center;
		color: $lightgrey;
		h1,h2,p{
			line-height: 1.2;
			margin: 10px;
			}
		h1 {
			font-size: 42px;
			font-weight: 900;
			}
		h2 {
			font-size: 32px;
			}
		p {
			font-size: 21px;
			max-width: 80ch;
			}
		.srch {
				padding: 15px 40px;
				background: $red;
				border-radius: 5px;
				text-transform: uppercase;
				font-size: 21px;
				font-weight: 700;
				-webkit-transition: .2s ease-in-out;
				-o-transition: .2s ease-in-out;
				transition: .2s ease-in-out;
				margin: 10px 0;
				&:hover {
					-webkit-transform: translateY(-3px);
					    -ms-transform: translateY(-3px);
					        transform: translateY(-3px);
					-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,.75);
					        box-shadow: 0px 3px 3px rgba(0,0,0,.75);
					background: $lightgrey;
					color: $tan;
					}
				&:active {
					-webkit-transform: translate(0);
					    -ms-transform: translate(0);
					        transform: translate(0);
					-webkit-box-shadow: none;
					        box-shadow: none;
					}
				}
		}
	}
	
@media all and (max-width: 900px) {
	.hero {
	width: 100%;
	background: linear-gradient($yellow, $yellow - 60);
		#inner-hero {
			display: flex;
			flex-direction: column;
			padding: 2rem 0;
				#inner-hero-left {
					width: 100%;
					margin: 1%;
					}
				#inner-hero-right {
					width: 100%;
					margin: 1%;
					text-align: center;
					align-items: center;
					p {
						max-width: 100%;
						}
					}
			}
	}
	
	}
	
@media all and (max-width: 767px) {
	.spacer {
		display: none;
		}
	.about {
		#inner-about {
			#inner-about-info {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
						justify-content: center;
						align-items: center;
					}
			}
		}
	}