/* Scss Document */

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

body {
	overflow-x: hidden;
	font-family: $font3;
	background: #e6ecf0;
	}
a {
	color: inherit;
	text-decoration: none;
	}
.container {
	max-width: 1100px;
	margin: 0 auto;
	}
#top-photo {
	height: 300px;
	width: 100%;
	background-image: url("../graphics/hero.jpg");
	background-size: cover;
	background-color: rgba(0,0,0,.45);
	background-blend-mode: multiply;
	background-position: 50% 72%;
	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;
		h1 {
			text-align: center;
			font-family: $font2;
			font-size: 42px;
			text-transform: uppercase;
			color: #fff;
			letter-spacing: 1px;
			text-shadow: 0px 0px 12px rgba(0,0,0,.8);
			}
	}
	
	
	
ul#top-fader {
	height: 320px;
	max-width: 100%;
	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;
	color: $grey;
	margin: 20px 10px;
	position: relative;
	-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,.7);
	        box-shadow: 0px 2px 4px rgba(0,0,0,.7);
	border: 1px solid $grey;
	background: #fff;
	h1 {
		font-size: 32px;
		margin: 15px 15px 5px;
		z-index: 100;
		font-family: $font2;
		padding-bottom: 15px;
		border-bottom: 5px double $red;
		color: $blue - 60;
		}
	p {
		max-width: 50ch;
		line-height: 1.7;
		margin: 5px 15px 15px;
		z-index: 100;
		}
	li {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		opacity: 0;
		&:nth-of-type(1) {
			background-image: url("../graphics/slide1.jpg");
			-webkit-animation: imgFade 24s infinite both;
			        animation: imgFade 24s infinite both;
			}
		&:nth-of-type(2) {
			background-image: url("../graphics/slide3.jpg");
			-webkit-animation: imgFade 24s 8s infinite both;
			        animation: imgFade 24s 8s infinite both;
			}
		&:nth-of-type(3) {
			background-image: url("../graphics/slide2.jpg");
			-webkit-animation: imgFade 24s 16s infinite both;
			        animation: imgFade 24s 16s infinite both;
			}
		}
	}
@-webkit-keyframes imgFade {
	33% {
		opacity: 1;
		}
	66% {
		opacity: 0;
		}
	}
@keyframes imgFade {
	33% {
		opacity: 1;
		}
	66% {
		opacity: 0;
		}
	}
	
	
/*call boxes*/
#call-boxes {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	margin: 20px 0;
	.box {
		width: 33%;
		min-height: 160px;
		margin: 0 1%;
		-webkit-box-shadow: 0px 2px 4px rgba($grey, .6);
		        box-shadow: 0px 2px 4px rgba($grey, .6);
		text-align: 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;
		color: #fff;
		padding: 10px 5px;
		background: -webkit-linear-gradient($red, $red - 90);
		background: -o-linear-gradient($red, $red - 90);
		background: linear-gradient($red, $red - 90);
		&:nth-of-type(2) {
			background: -webkit-linear-gradient($blue, $blue - 90);
			background: -o-linear-gradient($blue, $blue - 90);
			background: linear-gradient($blue, $blue - 90);
			}
		i {
			height: 45px;
			width: 45px;
			border-radius: 50%;
			background: #fff;
			color: $blue - 70;
			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;
			font-size: 26px;
			}
		h1 {
			font-family: $font2;
			margin: 5px;
			font-weight: 700;
			font-size: 24px;
			}
		p {
			max-width: 90%;
			margin: 5px;
			line-height: 1.3;
		}
	}
}

.info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	.info-content{
		h1 {
			font-size: 32px;
			font-family: $font2;
			color: $red;
			margin: 10px;
			text-shadow: 0px 1px 0px rgba($grey, .3);
			&#stop {
				color: $blue;
				}
			&#last {
				color: $blue;
				font-weight: 700;
				}
			}
		p {
			max-width: 95%;
			line-height: 1.4;
			color: $grey;
			margin: 15px 10px;
			}
		}
	.sidebar {
		margin: 10px;
		img {
			padding: 5px;
			border: 1px solid $grey;
			}
		ul#fader {
			height: 400px;
			width: 60vw;
			max-width: 620px;
			position: relative;
			padding: 5px;
			border: 1px solid $grey;
			li {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				opacity: 0;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				&:nth-of-type(1) {
					background-image: url("../graphics/shelves.jpg");
					-webkit-animation: fader 21s infinite both;
					        animation: fader 21s infinite both;
					}
				&:nth-of-type(2) {
					background-image: url("../graphics/tirestack.jpg");
					-webkit-animation: fader 21s 7s infinite both;
					        animation: fader 21s 7s infinite both;
					}
				&:nth-of-type(3) {
					background-image: url("../graphics/engine.jpg");
					-webkit-animation: fader 21s 14s infinite both;
					        animation: fader 21s 14s infinite both;
					}
				}
			}
		}
	@-webkit-keyframes fader {
		33% {
			opacity: 1;
			}
		66% {
			opacity: 0;
			}
		}
	@keyframes fader {
		33% {
			opacity: 1;
			}
		66% {
			opacity: 0;
			}
		}
	ul#offer {
		margin: 15px 10px;
		li {
			line-height: 1.5;
			list-style: disc outside;
			font-weight: 700;
			color: $red;
			font-size: 16px;
			letter-spacing: 1px;
			max-width: 30ch;
			margin-left: 15px;
			}
		}
	.button {
		margin: 10px;
		background: $blue - 70;
		color: #fff;
		text-align: center;
		max-width: 270px;
		padding: 10px 20px;
		-webkit-transition: .2s all ease-in-out;
		-o-transition: .2s all ease-in-out;
		transition: .2s all ease-in-out;
		&:hover {
			-webkit-transform: translateY(-3px);
			    -ms-transform: translateY(-3px);
			        transform: translateY(-3px);
			-webkit-box-shadow: 0px 2px 4px rgba($grey, .6);
			        box-shadow: 0px 2px 4px rgba($grey, .6);
			background: $red;
			}
		&:active {
			-webkit-transform: none;
			    -ms-transform: none;
			        transform: none;
			-webkit-box-shadow: none;
			        box-shadow: none;
			}
		}
	}
	
	
/*embedded search*/

iframe {
	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;
	height: 500px;
	width: 100%;
	border-top: 5px solid #fff;
	border-bottom: 5px solid #fff;
	}
	
@media all and (max-width: 875px) {
	#top-photo {
		h1 {
			font-size: 24px;
			max-width: 25ch;
			}
		}
	ul#top-fader {
		height: auto;
		li {
			display: none;
			}
		}
	#call-boxes {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		.box {
			margin: 5px 0;
			width: 90%;
			}
		}
	.info {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		.info-content {
			h1 {
				font-size: 26px;
				}
			}
		.sidebar {
			img {
				display: none;
				}
			ul#fader {
				width: 98%;
				max-width: 98vw;
				}
			}
		}
	}