/* Scss Document */

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

body {
	font-family: $font2;
	position: relative;
	overflow-x: hidden;
	position: relative;
	&:before {
		  content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;
          -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,.6);
           box-shadow: 0px 0px 8px rgba(0,0,0,.6);
          z-index: 100;
		}
	}
a {
	text-decoration: none;
	color: inherit;
	&:hover {
		color: inherit;
		}
	}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 35px;
	}
	
#hero {
	background-image: url("../graphics/tireop.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	#inner-hero {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: 100%;
		.hero-sec {
			min-height: 350px;
			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;
			position: relative;
			padding: 0 20px;
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
					.inner-hero-sec {
						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;
						color: $red;
						text-align: center;
					h1 {
						font-size: 44px;
						letter-spacing: 2px;
						margin: 20px 20px 10px;
						text-transform: uppercase;
						font-weight: 700;
						}
					p {
						font-size: 24px;
						letter-spacing: 1px;
						line-height: 1.3;
						font-family: $font1;
						margin: 15px 20px;
						max-width: 55ch;
						}
					#srchBtn {
						width: 250px;
						padding: 10px 15px;
						background: $grey;
						color: #fff;
						text-align: center;
						margin: 20px;
						font-size: 18px;
						text-transform: uppercase;
						font-weight: 700;
						font-family: $font1;
						&:hover {
							background: $red;
							}
						}
					}
				}
			}
		}	

	
#main-btm {
	margin: 10px 20px 20px;
	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: 1rem 0;
	h1#service-call {
		text-align: center;
		margin: 10px 0 0;
		color: $grey;
		font-size: 34px;
		letter-spacing: 1px;
		font-weight: 600;
		}
	#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;
			margin: 15px;
			-webkit-box-flex: 1;
			text-align: center;
			    -ms-flex: 1;
			        flex: 1;
			img {
				max-width: 100%;
				margin: 10px 0;
				}
			h1 {
				font-size: 18px;
				text-transform: uppercase;
				margin: 5px;
				line-height: 1.1;
				color: $red;
				}
			p {
				font-family: $font1;
				max-width: 40ch;
				margin: 5px;
				color: $grey;
				}
			}
		}
	}
	
#btm-hero {
	background: -webkit-linear-gradient(left, $blue - 40, $blue - 60);
	background: -o-linear-gradient(left, $blue - 40, $blue - 60);
	background: linear-gradient(90deg, $blue - 40, $blue - 60);
	#inner-btm-hero {
		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;
		color: #fff;
		text-align: center;
		padding: 30px 10px;
		h1 {
			font-size: 32px;
			margin: 25px 15px;
			max-width: 66ch;
			}
		#btm-search {
			padding: 15px 30px;
			background: #fff;
			color: $blue - 30;
			font-size: 21px;
			text-align: center;
			&:hover {
				background: $grey - 30;
				color: #fff;
				}
			}
		}
	}
	
	/*@media all and (max-width: 800px) {
		.container {
			padding: 0 10px;
			}
		#hero {
			#inner-hero {
				#inner-hero-contents {
					#top-call {
				h1 {
					font-size: 32px;
					}
				p {
					font-size: 17px;
					}
				}
			img {
				max-width: 100%;
				}
			}
		}
	}
	#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;
			}
		}
}*/