/* Scss Document */

@import 'variables';
@import 'reset';

body {
	overflow-x: hidden;
	font-family: $font2;
	}
a {
	color: inherit;
	text-decoration: none;
	}
.container {
	max-width: 1100px;
	margin: 0 auto;
	}
/*hero*/
.hero {
	background-image: url("../graphics/garage.jpg");
	height: 100vh;
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: 50%;
	background-color: rgba(0,0,0,.6);
	background-blend-mode: multiply;
	&.sell-hero {
		background: url("../graphics/sell-hero.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-color: rgba(0,0,0,.6);
		background-blend-mode: multiply;
		}
}
header {
	width: 100%;
	position: fixed;
	background-color: rgba(0,0,0,.8);
	-webkit-transition: .1s all ease-in-out;
	-o-transition: .1s all ease-in-out;
	transition: .1s all ease-in-out;
	z-index: 200;
	&#map-header {
		background-color: #000;
		}
	&.dark {
		background-color: #000;
		}
	#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: 10px;
		#header-left {
			#logo {
				img {
					max-width: 180px;
					-webkit-transition: .1s all ease-in-out;
					-o-transition: .1s all ease-in-out;
					transition: .1s all ease-in-out;
					}
				&.small {
					img {
						max-width: 130px;
						-webkit-transition: .1s all ease-in-out;
						-o-transition: .1s all ease-in-out;
						transition: .1s all ease-in-out;
						}
					}
				}
			}
		#header-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-align: end;
			    -ms-flex-align: end;
			        align-items: flex-end;
			#address {
				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: end;
				    -ms-flex-align: end;
				        align-items: flex-end;
				padding: 10px;
				i {
					font-size: 15px;
					color: $yellow;
					}
				p {
					line-height: 1.5;
					color: #fff;
					font-size: 14px;
					-webkit-transition: .1s all ease-in-out;
					-o-transition: .1s all ease-in-out;
					transition: .1s all ease-in-out;
					}
				&.small {
					address {
						padding: 5px 10px;
						}
					p {
						line-height: 1.2;
						font-size: 12px;
						}
					}
				}
			#menuBtn {
				display: none;
				}
			ul#nav {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				a {
					margin: 0 5px;
					li {
					padding: 8px;
					font-size: 15px;
					font-weight: 700;
					color: #fff;
					-webkit-transition: .1s all ease-in-out;
					-o-transition: .1s all ease-in-out;
					transition: .1s all ease-in-out;
					&:hover {
						background: $red + 20;
							}
					&.small {
						font-size: 14px;
						padding: 7px;
						}
						}
					}
				}
			}
		}
	}
/*******************MODAL SEARCH BOX****************/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 5%;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}

/* The Close Button */
.close {
    color: $yellow;
    float: right;
    font-size: 2rem;
    font-weight: bold;
	&:hover {
	color: $red;
    text-decoration: none;
    cursor: pointer;
		}
}

/* Modal Header */
.modal-header {
    padding: 1rem .5rem;
    background-color: #000;
    color: white;
	h2 {
		font-size: 24px;
		letter-spacing: 2px;
		font-weight: 700;
		}
}
/* Modal Content */
.modal-content {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-direction: column;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	        flex-direction: column;
    position: relative;
    margin: auto;
    padding: 0;
    width: 550px;
	border: 2px solid #fff;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */

@-webkit-keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}


iframe {
	width: 550px;
	height: 525px;
	background: #fff;
	}
/*******************END MODAL ***********************/
.spacer	{
	height: 170px;
	}
#topcall {
	margin-top: 5vh;
	h1 {
		font-weight: 700;
		font-size: 2.5rem;
		color: rgba(255,255,255,.9);
		text-transform: uppercase;
		margin: 5px;
		line-height: 1.3;
		}
	.line {
		width: 750px;
		height: 8px;
		background: $yellow;
		margin: 5px;
		}
	h2 {
		font-size: 2rem;
		color: rgba(255,255,255,.9);
		margin: 5px;
		max-width: 40ch;
		line-height: 1.3;
		span {
			color: #fff;
			font-weight: 700;
			letter-spacing: 3px;
			border-bottom: 2px solid $yellow;
			padding-bottom: 2px;
			}
		}
	&.map-topcall {
		h1, h2 {
			color: $grey;
			}
		h2 {
			max-width: 90ch;
			span {
				color: $red;
				}
			}
		}
}
#about {
	&.sell-about {
		background: #000;
		}
	}
#inner-about {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	padding: 5rem 10px;
	&.map-inner-about {
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		}
	.vertBrk {
		min-width: 8px;
		background: $red;
		margin-right: 15px;
		&.sell-brk {
			background: #fff;
			}
		}
	#info {
		margin: 5px 15px;
	ul.directions {
		margin: 2rem 0;
		min-width: 100%;
		h3.destination {
			font-weight: 700;
			font-size: 24px;
			margin: 10px 0;
			span {
				color: $red;
				font-size: 18px;
				}
			}
		li {
			list-style: disc outside;
			line-height: 1.4;
			max-width: 90%;
			}
		}
		h1 {
			font-size: 42px;
			color: $grey;
			font-weight: 700;
			margin: 10px 0;
			&.sell-title {
				color: $yellow;
				span {
					color: #fff;
					}
				}
			span {
				color: $red;
				}
			}
		p {
			line-height: 1.4;
			font-weight: 700;
			color: $grey;
			text-align: justify;
			&#sell-info {
				color: #fff;
				}
			a {
				text-decoration: underline;
				color: $red;
				&:hover {
					color: $yellow;
					}
				}
			}
		}
	}


/*service section*/

#lotPic {
	height: 85vh;
	width: 100%;
	background-image: url("../graphics/lot.JPG");
	background-size: cover;
	background-position: top right;
	background-attachment: fixed;
	}
	
#outer-serv-wrap {
	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;
	}
#service-wrap {
			display: -ms-flexbox;
			display: -webkit-box;
			display: flex;
			-ms-flex-pack: justify;
			    -webkit-box-pack: justify;
			       justify-content: center;
			-ms-flex-align: center;
			    -webkit-box-align: center;
			        align-items: center;
			margin: 0 .5rem;
			height: 85vh;
			z-index: 0;
			}
		.service-list {
			display: -ms-flexbox;
			display: -webkit-box;
			display: flex;
			-ms-flex-direction: column;
			    -webkit-box-orient: vertical;
			    -webkit-box-direction: normal;
			        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;
			margin: 0 1rem;
			background: #000;
			padding: 1rem;
			opacity: 0;
			max-width: 250px;
			border: 3px solid $yellow;
			-webkit-box-shadow: 0px 4px 5px $grey;
			        box-shadow: 0px 4px 5px $grey;
			-webkit-transform: translateX(-100px);
			        -ms-transform: translateX(-100px);
			    transform: translateX(-100px);
			-webkit-transition: .2s all ease-in-out;
			-o-transition: .2s all ease-in-out;
			transition: .2s all ease-in-out;
			&.active {
				opacity: 1;
				-webkit-transform: translateX(0);
				        -ms-transform: translateX(0);
				    transform: translateX(0);
				}
			&:nth-of-type(2) {
				opacity: 0;
				-webkit-transform: translateY(100px);
				        -ms-transform: translateY(100px);
				    transform: translateY(100px);
				&.active {
				opacity: 1;
				-webkit-transform: translateY(0);
				        -ms-transform: translateY(0);
				    transform: translateY(0);
				}
				}
			&:nth-of-type(3) {
				opacity: 0;
				-webkit-transform: translateX(100px);
				        -ms-transform: translateX(100px);
				    transform: translateX(100px);
				&.active {
				opacity: 1;
				-webkit-transform: translateX(0);
				        -ms-transform: translateX(0);
				    transform: translateX(0);
				}
			}
			h1 {
				font-weight: 700;
				font-size: 21px;
				color: $yellow;
				letter-spacing: 2px;
				text-align: center;
				margin-bottom: 1rem;
				text-transform: uppercase;
				}
			i {
				color: #fff;
				padding: 25px;
				background: $yellow;
				border-radius: 50%;
				font-size: 55px;
				}
			p.about-service {
				text-align: center;
				line-height: 1.4;
				letter-spacing: 1px;
				font-size: 15px;
				margin: 10px 0;
				color: #fff;
				}
		}
		ul.service-items {
			li {
				text-align: center;
				font-weight: 700;
				color: #fff;
				line-height: 1.3;
				margin: 5px 0;
				padding-bottom: 5px;
				border-bottom: 1px dotted rgba(255,255,255,.6);
				span {
					font-size: 12px;
					font-weight: normal;
					}
				a {
					color: $yellow;
					text-decoration: underline;
					&:hover {
						color: $red + 40;
						}
					}
				&:last-child{
					border-bottom: none;
					}
				}
			}
	
/*slide section*/
#slide-wrap {
	background: #000;
	}
#inner-slide {
	padding: 5rem 10px;
	overflow: auto;
	margin: 0 15px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	p {
			line-height: 1.5;
			font-weight: 700;
			color: #fff;
			text-align: justify;
			margin-top: 5px;
			a {
				text-decoration: underline;
				color: $yellow;
				&:hover {
					color: $red;
					}
				}
			}
	}
	.vertBrk2 {
		min-width: 8px;
		background: $yellow;
		margin-left: 15px;
		}
	
			#slide {
				min-width: 400px;
				height: 300px;
				background-image: url("../graphics/slide.jpg");
				background-position: center left;
				-webkit-animation: slideAni 15s steps(5) infinite;
				        animation: slideAni 15s steps(5) infinite;
				float: left;
				margin: 10px 20px 10px 0;
				border: 2px solid $yellow;
				}
		@-webkit-keyframes slideAni {
				100% {
					background-position: -2000px;
					}
				}
		@keyframes slideAni {
				100% {
					background-position: -2000px;
					}
				}	
				
/*footer*/
.footer {
	background: $grey;
	}
.footer-cont {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: justify;
	        -webkit-box-pack: justify;
	        justify-content: space-between;
	-ms-flex-align: start;
	        -webkit-box-align: start;
	        align-items: flex-start;
	padding: 2rem .5rem 4rem .5rem;
	color: #fff;
	> ul {
		margin: 0 10px;
		}
	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;
		}
		}
	}
#smmap {
	border: 2px solid $yellow;
	iframe {
		width: 200px;
		height: 200px;
		border: 5px solid $yellow;
		}
	}
#footer-mid li:hover, #footer-right li:hover {
	color: $red + 25;
	}
	#copy {
		padding: 5px;
		background: $red;
		font-size: 14px;
		color: #fff;
		}
		
/*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;
}

/*map page*/

#map {
	height: 70vh;
	min-height: 500px;
	width: 100vw;
	margin-top: 5rem;
	iframe {
		height: 100%;
		width: 100%;
		}
	}

/*end map*/

@media all and (max-width: 840px) {
	header {
	#inner-header {
		#header-right {
			ul#nav {
				a {
					margin: 0 3px;
					li {
					padding: 5px;
					font-size: 14px;
						}
					}
				}
			}
		}
	}
	}
	
@media all and (max-width: 767px) {
	.spacer {
		height: 220px;
		}
	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;
		#header-right {
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
			#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: $red;
	i {
		color: #fff;
		}
	}
	ul#nav {
		display: none;
			}
	#nav.active {
			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: 90vw;
			left: 0;
			top: 100%;
			margin-top: 10px;
			background: #fff;
				a {
					width: 90vw;
					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: $grey;
					&:hover {
						color: #fff;
						}
					}
					}
				}
			}
		}
	}
.hero {
	background-position: center;
	min-height: 140vh;
	}
#topcall {
	margin-top: 9vh;
	.line {
		max-width: 70%;
		}
	}
#lotPic {
	height: auto;
	}
/*info*/
#inner-about {
	#info {
		h1 {
			font-size: 6vw;
			&.sell-title {
				span {

					}
				}
			}
		}
	}
/*end info*/
#service-wrap {
	height: auto;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	padding: 3rem 5px;
	}
.service-list {
	margin: 10px 0;
	}
.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*/
#inner-slide {
	padding: 5rem 10px;
	margin: 0 15px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	overflow-x: hidden;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	}
	.vertBrk2 {
		display: none;
		}
	
			#slide {
				width: 100%;
				border: none;
				float: none;
				margin: none;
				}
	}