/* Scss Document */

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


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

.container {
	max-width: 1200px;
	margin: 0 auto;
	}
#top-header {
	background: $drkblue;
	#top-info {
	color: $yellow;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	width: 100%;
	-ms-flex-pack: end;
	    -webkit-justify-content: flex-end;
	        justify-content: flex-end;
	-webkit-align-items: flex-end;
	    -ms-flex-align: end;
	        align-items: flex-end;
	padding: .5rem 2.5rem .5rem 0;
	font-family: $main-font;
	text-align: right;
	line-height: .75;
	i {
		margin: 0 5px;
		}
		}
	}
#menuBtn {
	display: none;
	}
header {
	background: $yellow - 30;
	width: 100%;
	#inner-header {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: justify;
		    -webkit-justify-content: space-between;
		        justify-content: space-between;
		-ms-flex-align: center;
		    -webkit-align-items: center;
		        align-items: center;
		padding: 2rem .5rem;
		#logo {
	font-family: $logo-font;
	font-size: 2rem;
	color: $drkblue - 40;
	letter-spacing: 2px;
	#tagline {
		font-family: $main-font;
		font-size: 14px;
		color: #fff;
		font-style: italic;
		text-align: center;
		letter-spacing: 3px;
		padding: .75rem 0 0 0;
		}
	}
	}
}
	ul.mid-header,
	ul.header-info {
		li {
		color: #fff;
		line-height: 1.7;
			}
		}
		ul.mid-header{
			li {
				font-size: 21px;
				letter-spacing: 2px;
				font-weight: 700;
				}
			}
	ul.header-info {
		li {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: center;
		    -webkit-justify-content: center;
		        justify-content: center;
		-ms-flex-align: center;
		    -webkit-align-items: center;
		        align-items: center;
		&:hover {
			color: $drkblue - 30;
			}
		i {
			font-size: 24px;
			padding-right: 5px;
			}
		}
	}
			
ul.nav {
	background: $drkblue;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	    -webkit-align-items: center;
	        align-items: center;
	-ms-flex-pack: center;
	    -webkit-justify-content: center;
	        justify-content: center;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;
	li {
		padding: 1rem 2.5rem;
		color: $yellow; 
		&:hover {
			background: $yellow - 30;
			color: #fff;
			}
		}
	}
main {
	height: 400px;
	background-image: url("../graphics/cars.jpg");
	background-size: cover;
	position: relative;
	z-index: 1;
	#main-info {
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-direction: column;
		-webkit-flex-direction: column;
		        flex-direction: column;
		-ms-flex-pack: center;
		    -webkit-justify-content: center;
		        justify-content: center;
		-ms-flex-align: center;
		    -webkit-align-items: center;
		        align-items: center;
		text-align: center;
		color: #fff;
		height: 400px;
		&:after {
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background: rgba(0,0,0,.6);
			position: absolute;
			content: "";
			z-index: -1;
			}
	h1,h2,p {
		padding: 0 0 2rem 0;
		}
	h1 {
		font-family: $logo-font;
		font-size: 2.5rem;
		letter-spacing: 3px;
		span {
			font-style: italic;
			}
		}
	h2 {
		line-height: 1.5;
		max-width: 50ch;
		font-size: 18px;
		}
	#srchBtn {
		font-size: 1.4rem;
		background: $drkblue;
		color: #fff;
		padding: 10px 30px;
		border-radius: 2px;
		transition: .2s all ease-in-out;
		box-shadow: 0px 0px 4px $yellow;
		&:hover {
			background: $yellow;
			color: $drkblue;
			box-shadow: 0px 0px 4px $drkblue;
			}
		}
	}
}

#info {
	background: $drkblue;
	color: #fff;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	        flex-direction: column;
	-ms-flex-pack: center;
	    -webkit-justify-content: center;
	        justify-content: center;
	border-top: 2px solid #fff;
	border-bottom: 1px solid #fff;
	p {
		padding: 3rem 0;
		max-width: 800px;
		}
	p.sm-text {
		line-height: 1.5;
		font-size: 18px;
		-ms-flex-align: center;
		    -webkit-align-items: center;
		        align-items: center;
		max-width: 70ch;
		span {
			font-weight: 700;
			}
		}
	p.lg-text {
		line-height: 1.7;
		font-size: 24px;
		font-weight: 700;
		padding: 10px 0;
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		max-width: 52ch;
		text-align: center;
		}
	}
	
	/********************************************************************FOOTER**********************************/

.footer {
	background: $yellow;
	i {
		padding-right: 5px;
		}
	a {
		color: inherit;
		}
	}
.footer-cont {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: justify;
	    -webkit-justify-content: space-between;
	        justify-content: space-between;
	-ms-flex-align: start;
	    -webkit-align-items: flex-start;
	        align-items: flex-start;
	padding: 1rem;
	color: $drkblue;
	}
.footer-cont h1 {
	font-size: 1.3rem;
	font-weight: 700;
	padding-bottom: 1rem;
	letter-spacing: 2px;
	color: $drkblue - 40;
	}
.footer-cont li {
	line-height: 1.7;
	padding-right: .5rem;
}
#footer-mid li:hover, #footer-right li:hover {
	color: $drkblue - 20;
	cursor: pointer;
	}
p#copy {
	color: $drkblue;
	letter-spacing: 1px;
	padding: 1rem .5rem;
	background: $yellow;
	}
	
@media all and (max-width: 872px) {
	header {
	#inner-header {
		#logo {
	font-family: $logo-font;
	font-size: 1.5rem;
	letter-spacing: 1px;
	}
	}
}
	ul.mid-header,
	ul.header-info {
		li {
		line-height: 1.4;
			}
		}
		ul.mid-header{
			li {
				font-size: 18px;
				}
			}
	ul.header-info {
		li {
		i {
			font-size: 21px;
			}
		}
	}
	}
@media all and (max-width: 800px) {
	#top-info {
		text-align: center;
		font-size: 12px;
		width: 100%;
		}
	#inner-header {
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column;
		#logo {
			margin-bottom: 1rem;
			text-align: center;
			}
		#header-right {
			margin-top: 1rem;
			}
		}
	#menuBtn {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-pack: flexend;
	    -webkit-justify-content: flex-end;
	        justify-content: flex-end;
	-ms-flex-align: center;
	    -webkit-align-items: center;
	        align-items: center;
	padding: .5rem;
	margin: 0;
	z-index: 100;
	color: #fff;
	font-size: 2rem;
	background: $drkblue;
	width: 100%;
	i {
		padding-right: 1rem;
		}
		p {
			font-size: 14px;
			padding-right: 10px;
			}
	}
	.nav {
		display: none;
		position: absolute;
		}

.nav.active {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	        flex-direction: column;
			-ms-flex-align: start;
			    -webkit-align-items: flex-start;
			        align-items: flex-start;
			padding: 0rem .5rem 0rem .5rem;
			height: auto;
			width: auto;
			top: 0;
			left: 0;
			position: relative;
			transition: .2s all ease-in-out;
				}
.nav li {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	        flex-direction: column;
	padding: .5rem;
	line-height: 1.5;
	color: #fff;
	font-size: 1.3rem;
}
.nav a {
	width: 100%;
	}
.nav li:hover {
	background: #fff;
	color: #1a1a1a;
	}
	/****end nav****/
	
	main {
	height: auto;
	padding: 4rem .5rem;
	#main-info {
		height: auto;
		padding: 0 .5rem 2rem .5rem;
	h1,h2,p {
		padding: 0 .5rem 2rem .5rem;
		}
	h1 {
		font-family: $logo-font;
		font-size: 1.75rem;
		letter-spacing: 1px;
		span {
			font-style: italic;
			}
		}
	h2 {
		line-height: 1.5;
		max-width: 50ch;
		font-size: 16px;
		}
	#srchBtn {
		font-size: 1.1rem;
		background: $drkblue;
		color: #fff;
		padding: 10px 30px;
		border-radius: 2px;
		transition: .2s all ease-in-out;
		box-shadow: 0px 0px 4px $yellow;
		&:hover {
			background: $yellow;
			color: $drkblue;
			box-shadow: 0px 0px 4px $drkblue;
			}
		}
	}
}

#info {
	p, p.lg-one {
		padding: 2rem;
		}
	}
	
	
	
	/*footer*/
.footer-cont {
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	}
.footer-cont > ul {
	margin: 1rem 0;
	}
	}