/* Scss Document */

@import 'variables';
@import 'reset';
@import 'config';
@import 'flexgrid';
@import 'header';
@import 'locate_us';

*,*:before,*:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	}
body {
	font-family: $font1;
	position: relative;
	overflow-x: hidden;
	-webkit-animation: fadeIn 1s linear;
	        animation: fadeIn 1s linear;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	opacity: 0;
	}
@keyframes fadeIn {
	opacity: 1;
	}
a {
	text-decoration: none;
	color: inherit;
	}
#menuBtn {
	display: none;
	}
.container {
	max-width: 95vw;
	margin: 0 auto;
	}
#hero-wrap {
	height: 100%;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: 0 auto;
	position: relative;
	#top-call {
		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;
		text-align: center;
		z-index: 5;
		height: 375px;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		-webkit-transform: translateY(-50%) translateX(-50%);
		    -ms-transform: translateY(-50%) translateX(-50%);
		        transform: translateY(-50%) translateX(-50%);
		-webkit-animation: fadeIn 3s linear;
		        animation: fadeIn 3s linear;
		-webkit-animation-fill-mode: forwards;
		        animation-fill-mode: forwards;
		opacity: 0;
		.breaker {
			width: 80vw;
			max-width: 500px;
			padding: 0 5px;
			height: 3px;
			background: #fff;
			margin: 30px 0;
			}
		h1 {
		font-size: 52px;
		color: #fff;
		letter-spacing: 3px;
		font-family: $font3;
		font-weight: 700;
		text-shadow: -2px 2px 5px rgba(0,0,0,.5);
		text-transform: capitalize;
		}
		h2 {
			font-family: $font3;
			font-size: 21px;
			color: #fff;
			letter-spacing: 3px;
			text-transform: uppercase;
			}
			}
	#img-list {
	position: relative;
	height: 80vh;
	width: 100%;
	background-color: #fff;
	li {
		position: absolute;
		top: 0;
		left: 0;
		list-style: none;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center;
		background-color: rgba(0,0,0,.25);
		background-blend-mode: multiply;
		height: 100%;
		width: 100%;
		z-index: 0;
		opacity: 0;
	  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;
		&:nth-of-type(1) {
			-webkit-animation: fade 12s infinite both;
			        animation: fade 12s infinite both;
			background-image: url("../graphics/sm-lot.jpg");
			background-size: cover;
			}
		&:nth-of-type(2) {
			-webkit-animation: fade 12s 4s infinite both;
			        animation: fade 12s 4s infinite both;
			background-image: url("../graphics/sm-inside.jpg");
			}
		&:nth-of-type(3) {
			-webkit-animation: fade 12s 8s infinite both;
			        animation: fade 12s 8s infinite both;
			background-image: url("../graphics/sm-store.jpg");
			}
		}
		
	}
}

@-webkit-keyframes fadeIn {
	100% {
		opacity: 1;
		}
	}

@keyframes fadeIn {
	100% {
		opacity: 1;
		}
	}
@-webkit-keyframes fade {
	33% {
		opacity: 1;
		}
	66% {
		opacity: 0;
		}
	}
@keyframes fade {
	33% {
		opacity: 1;
		}
	66% {
		opacity: 0;
		}
	}


.large-sec {
	height: auto;
	width: 100%;
	background-size: cover;
	background-image: url("../graphics/parts.png");
	background-attachment: fixed;
	margin-bottom: 65vh;
	background-color: rgba(0,0,0,.5);
	background-blend-mode: multiply;
	border-bottom: 5px solid #fff;
	#inner-large-sec {
		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;
			align-items: center;
		height: auto;
		padding: 3rem 0;
	.top-btm-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: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		position: relative;
		&#left {
			justify-content: center;
			align-items: center;
			}
		&#right {
			flex-direction: row;
			align-items: center;
			}
		h1, h2 {
			color: #fff;
			font-family: $font3;
			font-size: 2.5rem;
			letter-spacing: 2.5px;
			text-transform: uppercase;
			text-align: center;
			padding: 5px;
			}
		h1 {
			font-size: 6rem;
			font-weight: 700;
			letter-spacing: 0px;
			}
		h2 {
			&.ital {
				color: $red + 65;
				font-style: italic;
				letter-spacing: 1px;
				font-weight: 700;
				font-size: 3rem;
				}
			}
		}
	#inner-center {
		background: rgba(255,255,255,.85);
		padding: 2rem 4rem;
		border: 6px dashed $red;
		margin: 3rem auto;
		box-shadow: inset 0px 0px 3px 3px rgba(0,0,0,.7);
		h1 {
			font-size: 2.5rem;
			color: $grey - 60;
			font-family: $font3;
			letter-spacing: 2px;
			margin-bottom: 15px;
			font-weight: 700;
			text-align: center;
			border-bottom: 3px solid $red + 45;
			padding-bottom: 12px;
			span {
				font-style: italic;
				color: $red + 45;
				}
			}
		p {
				text-align: justify;
				line-height: 1.3;
				color: $grey - 60;
				font-size: 18px;
				max-width: 80ch;
				margin: 0 auto;
				}
		}
    }
}


footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: -1;
	background-color: $grey - 80;
	background-image: url("../graphics/faded.png");
	background-position: bottom;
	background-repeat: no-repeat;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	overflow: hidden;
	#inner-footer {
		height: 65vh;
		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;
		text-align: center;
		h1#dlapp {
			color: #fff;
			margin: 5px;
			font-family: $font3;
			font-size: 21px;
			letter-spacing: 1px;
			}
		> ul {
			margin: 5px 0;	
			&#app-call {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				li {
					margin: 0 10px;
					-webkit-transition: .2s all ease-in-out;
					-o-transition: .2s all ease-in-out;
					transition: .2s all ease-in-out;
					&:hover {
						-webkit-transform: translateY(-5px);
						    -ms-transform: translateY(-5px);
						        transform: translateY(-5px);
						}
					}
				}
			&#footer-contact {
				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;
				li {
					margin: 0 70px;
					padding: 10px 40px;
					border: 1px solid $red + 65;
					border-radius: 20px;
					&:hover {
						background: $red;
						color: #fff;
						}
					&:nth-of-type(2) {
						font-family: $font2;
						font-size: 21px;
						letter-spacing: 2px;
						color: rgba(255,255,255,.25);
						text-transform: uppercase;
						border: none;
						&:hover {
							background: transparent;
							color: rgba(255,255,255,.25);
							}
						}
					}
				}	
			&#footer-info {
				li {
					margin: 5px 0;
					}
				}
			&#footer-social {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
					li {
						margin: 0 10px;
						display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
						i {
							font-size: 32px;
							background: #fff;
							padding: 10px;
							border-radius: 50%;
							color: $grey - 80;
							-webkit-transition: .2s all ease-in-out;
							-o-transition: .2s all ease-in-out;
							transition: .2s all ease-in-out;
							&:hover {
								background: transparent;
								color: #fff;
								}
							}
						}
				}
			li {
				color: #fff;
				font-family: $font3;
				text-transform: uppercase;
				letter-spacing: 2px;
				-webkit-transition: .2s all ease-in-out;
				-o-transition: .2s all ease-in-out;
				transition: .2s all ease-in-out;
				}	
			}
		}
	}

@media all and (max-width: 767px) {
	#hero-wrap {
		#top-call {
			h1 {
				font-size: 36px;
				padding: 0 10px;
				}
			}
		#img-list {
			li {
				height: 175%;
				}
			}
		}
	.large-sec {
	#inner-large-sec {
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	.top-btm-sec {
		&#right {
			flex-direction: column;
			}
		h1, h2 {
			font-size: 1.75rem;
			width: 100%;
			text-align: center;
			}
		h1 {
			font-size: 3rem;
			}
		h2 {
			&.ital {
				font-size: 25px;
				}
			}
		p {
			}
		}
	#inner-center {
		h1 {
			font-size: 1.5rem;
			}
		}
    }
}
footer {
	#inner-footer {
		>ul {
			&#app-call {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				}
			}
		}
	}
	}