/* Scss Document */

@import 'variables';
@import 'reset';
@import 'locate-us';

body {
	overflow-x: hidden;
	font-family: $font2;
	}
a {
	color: inherit;
	text-decoration: none;
	}
.container {
	max-width: 1300px;
	margin: 0 auto;
	}
/*hero*/
.hero {
	background-image: url("../graphics/desert.jpg");
	min-height: 100vh;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-color: rgba(0,0,0,.3);
	background-blend-mode: multiply;
	/*animation: slowZoom 15s linear infinite alternate;*/
}
header {
	width: 100%;
	position: fixed;
	-webkit-transition: .15s all ease-in-out;
	-o-transition: .15s all ease-in-out;
	transition: .15s all ease-in-out;
	z-index: 200;
	padding: 10px 5px;
	background: -webkit-linear-gradient($orange - 40, $orange);
	background: -o-linear-gradient($orange - 40, $orange);
	background: linear-gradient($orange - 40, $orange);
	&.dark {
		padding: 0 5px;
		}
	&:before {
		  content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;
          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                  box-shadow: 0px 0px 10px rgba(0,0,0,.8);
          z-index: 100;
	}
	#inner-header {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		padding: 30px 10px;
		#header-left {
			#logo {
				width: 115%;
				img {
					width: 100%;
					}
				h1 {
					font-size: 1.25rem;
					-webkit-transition: .1s all ease-in-out;
					-o-transition: .1s all ease-in-out;
					transition: .1s all ease-in-out;
					font-weight: 700;
					color: #fff;
					text-align: center;
					line-height: 1.1;
					font-family: $font2;
					letter-spacing: 1px;
					text-shadow: -1px 1px 1px #000;
					}
				}
			}
		#header-right {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			#menuBtn {
				display: none;
				}
			ul#nav {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
					margin: 0 5px;
						li {
					padding: 10px 8px;
					border-bottom: 2px solid transparent;
					font-size: 16px;
					letter-spacing: 1px;
					font-weight: 700;
					color: #fff;
					-webkit-transition: .15s all ease-in-out;
					-o-transition: .15s all ease-in-out;
					transition: .15s all ease-in-out;
					&:hover {
						background: $darkblue;
						box-shadow: 0px 2px 0px #fff,inset 0px 0px 3px 2px rgba(255,255,255,.2);
						transform: translateY(-2px);
						}
					&:active {
							transform: translateY(0);
							box-shadow: none;
							}
					ul#dropNav {
				display: none;
				position: absolute;
				top: 100%;
				left: 0;
				background: $darkblue;
				width: 200px;
				}
			&#dropdown {
				position: relative;
				&:hover {
					cursor: pointer;
					& > ul#dropNav {
					position: absolute;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-orient: vertical;
					-webkit-box-direction: normal;
					    -ms-flex-direction: column;
					        flex-direction: column;
					li {
						padding: 10px;
						color: #fff;
						-webkit-transition: .2s all ease-in-out;
						-o-transition: .2s all ease-in-out;
						transition: .2s all ease-in-out;
						&:hover {
							color: #fff;
							box-shadow: 0px 4px 0px,inset 0px 0px 3px 2px rgba(255,255,255,.2);
							transform: translateY(-2px);
						}
					}
				}
			}
						}
					}
				}
			}
		}
	}
.spacer	{
	}
#topcall {
	opacity: 0;
	-webkit-animation: showSlow .25s .5s linear;
	        animation: showSlow .25s .5s linear;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	padding: 2rem 5px;
	height: 100vh;
	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;
	margin: 0 1rem;
	#inner-topcall {
		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-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				text-align: center;
				h1 {
					color: #fff;
					font-size: 4rem;
					letter-spacing: 3px;
					font-weight: 700;
					margin: 5px 5px 15px 5px;
					text-transform: uppercase;
					}
		h2 {
		font-size: 2rem;
		color: #fff;
		text-transform: uppercase;
		margin: 5px;
		line-height: 1.3;
		letter-spacing: 3px;
		&:nth-of-type(2) {
			font-style: italic;
			font-size: 1.5rem;
			letter-spacing: 5px;
			font-weight: 700;
			}
		}
	.line {
		height: 3px;
		background: #fff;
		margin: 3px;
		}
	#srchBtn {
		font-size: 1.5rem;
		color: #fff;
		text-transform: uppercase;
		margin: 10px;
		line-height: 1.3;
		letter-spacing: 2px;
		padding: 10px 20px;
		background: $orange;
		-webkit-transition: .2s all ease-in-out;
		-o-transition: .2s all ease-in-out;
		transition: .2s all ease-in-out;
		border-bottom: 3px solid transparent;
		&:hover {
			background: $darkblue;
			-webkit-transform: translateY(-3px);
			    -ms-transform: translateY(-3px);
			        transform: translateY(-3px);
			border-bottom: 3px solid #fff;
			}
		&:active {
			-webkit-transform: translateY(0);
			    -ms-transform: translateY(0);
			        transform: translateY(0);
			border-bottom: 3px solid transparent;
			}
		}
		}
	
}

@-webkit-keyframes showSlow {
	0% {
		-webkit-transform: translateY(-50vh);
		        transform: translateY(-50vh);
		opacity: 0;
		}
	100% {
		-webkit-transform: translateY(0);
		        transform: translateY(0);
		opacity: 1;
		}
	}

@keyframes showSlow {
	0% {
		-webkit-transform: translateY(-50vh);
		        transform: translateY(-50vh);
		opacity: 0;
		}
	100% {
		-webkit-transform: translateY(0);
		        transform: translateY(0);
		opacity: 1;
		}
	}
	
@-webkit-keyframes slowZoom {
	100% {
		background-color: rgba(0,0,0,.9);
		}
	}
	
@keyframes slowZoom {
	100% {
		background-color: rgba(0,0,0,.9);
		}
	}
	
/*about section*/

#about {
	background: $darkblue;
	#about-images {
		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;
		> div {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			min-height: 24vw;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			background-color: rgba(0,0,0,.4);
			background-blend-mode: multiply;
			&:hover {
				-webkit-transform: scale(1.05) rotate(1deg);
				    -ms-transform: scale(1.05) rotate(1deg);
				        transform: scale(1.05) rotate(1deg);
				background-color: transparent;
				-webkit-transition: .2s all ease-in-out;
			-o-transition: .2s all ease-in-out;
			transition: .2s all ease-in-out;
					}
			p {
				&.shown {
				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;
				text-align: center;
				font-size: 17px;
				padding: 10px;
				border-radius: 50%;
				color: $darkblue;
				background-color: rgba(255,255,255,.8);
				width: 110px;
				text-transform: uppercase;
				height: 110px;
				}
				
				}
			&:nth-of-type(1) {
				background-image: url("../graphics/automotive.jpg");
				}
			&:nth-of-type(2) {
				background-image: url("../graphics/road.jpg");
				&:hover {
				-webkit-transform: scale(1.05) rotate(-1deg);
				    -ms-transform: scale(1.05) rotate(-1deg);
				        transform: scale(1.05) rotate(-1deg);
					}
				}
			&:nth-of-type(3) {
				background-image: url("../graphics/deliver.jpg");
				}
			&:nth-of-type(4) {
				background-image: url("../graphics/keys.jpeg");
				&:hover {
				-webkit-transform: scale(1.05) rotate(-1deg);
				    -ms-transform: scale(1.05) rotate(-1deg);
				        transform: scale(1.05) rotate(-1deg);
					}
				}
			}
		}
	}

/*end about*/
	

/*slide section*/
#slide-wrap {
	background: url("../graphics/Capture.JPG");
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 100vh;
	background-attachment: fixed;
	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;
	}
#inner-slide {
	overflow: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	padding: 1rem 1.5rem;
	border: 3px solid #fff;
	background: rgba(0,0,0,.65);
	display: flex;
	margin: 1rem;
	position: relative;
			#left-slide {
				margin-left: 25px;
	h1 {
		color: #fff;
		font-size: 2.75rem;
		margin: 10px 0;
		span {
			color: $orange;
			font-style: italic;
			}
		}
	h2 {
		color: #fff;
		background-color: $green + 40;
		padding: 20px 40px;
		font-size: 28px;
		text-shadow: -1px 1px 0px $grey;
		box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,.5);
		position: relative;
		line-height: 1.3;
		max-width: 45ch;
		margin: 1rem 0;
		&:nth-of-type(2) {
			font-size: 4.5vw;
			background: none;
			box-shadow: none;
			text-shadow: none;
			margin: auto;
			span {
				color: $orange;
				}
			}
		}
	p {
			line-height: 1.4;
			color: #fff;
			margin: 5px 0;
			font-family: $font1;
			font-size: 17px;
			max-width: 70ch;
			text-align: justify;
			span {
				color: $green + 40;
				}
			a {
				text-decoration: underline;
				color: $orange;
				&:hover {
					color: $green;
					}
				}
			}
	}
#right-slide {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin-right: 25px;
	padding: 10px;
	background: $orange;
	#hours {
		margin: 5px 0;
		p {
			text-align: center;
			line-height: 1.3;
			color: #fff;
			&:nth-of-type(1) {
				font-size: 17px;
				font-weight: 700;
				}
			}
		}
	img {
		max-width: 120px;
		margin: 5px 0;
		&:last-child {
			max-width: 210px;
			}
		}
				iframe {
					width: 250px;
					}
				}
}

			
/*footer*/
.footer {
	background: -webkit-linear-gradient($orange - 40, $orange);
	background: -o-linear-gradient($orange - 40, $orange);
	background: linear-gradient($orange - 40, $orange);
	}
.footer-cont {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-ms-flex-align: start;
	 -webkit-box-align: start;
	 align-items: flex-start;
	padding: 1rem 2rem;
	color: #fff;
	h1 {
		font-size: 24pxrem;
	margin-bottom: 10px;
	font-weight: 700;
	letter-spacing: 2px;
		}
	li {
		line-height: 1.7;
	font-family: $font2;
	i {
		padding-right: .5rem;
		}
		}
	}
.footer a:hover {
	color: $darkblue;
	}
	#copy {
		padding: 5px;
		background: $darkblue;
		font-size: 14px;
		color: #fff;
		text-align: center;
		}
		
/*sell to us page*/
#mailForm {
	margin: 1rem auto;
	padding: 1rem;
}
#mailForm h1 {
	font-size: 16px;
}
#mailForm label {
	color: $grey;
	
	font-weight: 700;
}
#mailForm .junkerDetails {
	border: 5px double $red;
	margin: .5em 0;
	padding: 1em;
}
#mailForm .fixed {
	display: inline-block;
	width: 10ch;
}
#mailForm .block {
	display: block;
	margin-bottom: 1em;
}
#mailForm .req, #mailForm label.req {
	color: $red - 80;
}
#mailForm .note, #check {
	margin: 1em 0;
}
#mailForm textarea {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
		height: 6em;
	outline: none;
	resize: none;
	width: 100%;
}
#mailForm input[type="submit"], #mailForm input[type="reset"] {
	background: $grey - 40;
	background: $red;
	color: #fff;
	padding: 1rem 4rem;
}
#mailForm input[type="submit"]:hover, #mailForm input[type="reset"]:hover {
	background: $red;
	color: #fff;
	border-color: $red;
}
	
@media all and (max-width: 805px) {
	header {
		max-width: 100vw;
	#inner-header {
		-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;
		padding: 10px;
		#logo {
			margin-left: -15px;
			}
		#header-right {
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
				#address {
					-webkit-box-orient: vertical;
					-webkit-box-direction: normal;
					    -ms-flex-direction: column;
					        flex-direction: column;
					}
			#menuBtn {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-ms-flex-align: center;
	    -webkit-box-align: center;
	        align-items: center;
	padding: 15px;
	border-radius: 50%;
	z-index: 100;
	font-size: 24px;
	background: $darkblue;
	margin-top: 10px;
	i {
		color: #fff;
		}
	}
	ul#nav {
		display: none;
			}
	#nav.active {
		position: absolute;
		top: 100%;
			display: -ms-flexbox;
			display: -webkit-box;
			display: flex;
			-ms-flex-direction: column;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
	        flex-direction: column;
			-ms-flex-align: start;
			    -webkit-box-align: start;
			        align-items: flex-start;
			padding-bottom: 0;
			width: 100vw;
			left: -10px;
			top: 100%;
			background: $darkblue;
				a {
					width: 100vw;
					margin: 0 auto;
					li {
					display: -ms-flexbox;
					display: -webkit-box;
					display: flex;
					-ms-flex-direction: column;
					-webkit-box-orient: vertical;
					-webkit-box-direction: normal;
							flex-direction: column;
					-ms-flex-align: start;
						-webkit-box-align: start;
							align-items: flex-start;
					padding: 15px 10px;
					color: #fff;
					&:hover {
						transform: none;
						box-shadow: none;
						}
					}
					}
				}
			}
		}
	}
.hero {
	background-position: 50%;
	min-height: 140vh;
	background-position: top center !important;
	}
#topcall {
	height: 140vh;
	width: auto;
	padding-top: 85px;
	.line {
		max-width: 70vw;
		}
	}
/*about images*/

#about {
	#about-images {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		> div {
			width: 100vw;
			min-height: 35vh;
				}
			}
		}

/*end about*/
#inner-slide {
	-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;
	padding: 1rem;
	margin: 3rem;
			#left-slide {
				margin-left: 0;
				order: -2;
	h1 {
		font-size: 2rem;
		text-align: center;
		}
	h2 {
		font-size: 1.75rem;
		max-width: none;
		text-align: center;
		&:nth-of-type(2) {
			font-size: 7vw;
			}
		}
	p {
			max-width: 100%;
			}
			#right-slide {
				margin-left:0;
				}
	}
	#right-slide {
				margin-right: 0;
				iframe {
					width: 80vw;
					height: 400px;
					}
				}
}
.footer-cont {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	> ul {
		margin: 10px 0;
		}
	}

/** form page mobile **/

#form-call {
	height: auto;
	padding: 2rem 0;
	h1 {
		font-size: 3rem;
		}
	p {
		font-size: 1rem;
		}
	}
.junkerDetails input {
	display: block;
	margin: .5rem 0;
	}	

}
	
@media all and (max-width: 470px) {
	/*slide section*/

	.vertBrk2 {
		display: none;
		}
	
			#slide {
				width: 100%;
				border: none;
				float: none;
				margin: none;
				}
	}