@charset "UTF-8";

/*


	─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
	─██████████████─████████──████████─████████████████───██████████████─██████████████─██████████─██████──────────██████─██████████████─
	─██░░░░░░░░░░██─██░░░░██──██░░░░██─██░░░░░░░░░░░░██───██░░░░░░░░░░██─██░░░░░░░░░░██─██░░░░░░██─██░░██████████──██░░██─██░░░░░░░░░░██─
	─██░░██████████─████░░██──██░░████─██░░████████░░██───██░░██████░░██─██░░██████████─████░░████─██░░░░░░░░░░██──██░░██─██░░██████████─
	─██░░██───────────██░░░░██░░░░██───██░░██────██░░██───██░░██──██░░██─██░░██───────────██░░██───██░░██████░░██──██░░██─██░░██─────────
	─██░░██───────────████░░░░░░████───██░░████████░░██───██░░██████░░██─██░░██───────────██░░██───██░░██──██░░██──██░░██─██░░██─────────
	─██░░██─────────────██░░░░░░██─────██░░░░░░░░░░░░██───██░░░░░░░░░░██─██░░██───────────██░░██───██░░██──██░░██──██░░██─██░░██──██████─
	─██░░██───────────████░░░░░░████───██░░██████░░████───██░░██████░░██─██░░██───────────██░░██───██░░██──██░░██──██░░██─██░░██──██░░██─
	─██░░██───────────██░░░░██░░░░██───██░░██──██░░██─────██░░██──██░░██─██░░██───────────██░░██───██░░██──██░░██████░░██─██░░██──██░░██─
	─██░░██████████─████░░██──██░░████─██░░██──██░░██████─██░░██──██░░██─██░░██████████─████░░████─██░░██──██░░░░░░░░░░██─██░░██████░░██─
	─██░░░░░░░░░░██─██░░░░██──██░░░░██─██░░██──██░░░░░░██─██░░██──██░░██─██░░░░░░░░░░██─██░░░░░░██─██░░██──██████████░░██─██░░░░░░░░░░██─
	─██████████████─████████──████████─██████──██████████─██████──██████─██████████████─██████████─██████──────────██████─██████████████─
	─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────


*/

/*-------------------------------------------------------------------*/
/*-------------------------Fonts for web use-------------------------*/
/*-------------------------------------------------------------------*/

@font-face {
	font-family: 'ClanWebW03-Medium';
	src: url('../fonts/ffclan/WOFF/FF Clan Medium.woff');
}

@font-face {
	font-family: 'ClanWebW03-Book';
	src: url('../fonts/ffclan/WOFF/FF Clan Book.woff');
}

@font-face {
	font-family: 'ClanWebW03-Bold';
	src: url('../fonts/ffclan/WOFF/FF Clan Bold.woff');
}

/*-------------------------------------------------------------------*/
/*-----------------------------Global--------------------------------*/
/*-------------------------------------------------------------------*/

*, *:focus, *:hover, *:active {
	outline: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
	background: #FFF;
	scroll-behavior: smooth;
}

/*-------------------------------------------------------------------*/
/*--------------------------Content Grid-----------------------------*/
/*-------------------------------------------------------------------*/



.content {
	margin: 0 auto;
	padding: 10px;
	box-sizing: border-box;
	width: auto;
	display: grid;
	grid-template-columns: [col-1] 1fr [col-2] 1fr [col-3] 1fr [col-4] 1fr [col-5];
	grid-template-rows:
		[row-1]
			700px
		/* [row-2]
			400px
		[row-3]
			300px
		[row-4]
			400px
		[row-5]
			700px */
		[row-2]
			400px
		[row-3]
			300px
		[row-4]
			400px
		[row-5]
			700px
		[row-6]
			400px
		[row-7]
			300px
		[row-8]
			400px
		[row-9]
			700px
		[row-10];
	grid-gap: 10px 10px;
}

/*-------------------------------------------------------------------*/
/*-------------------------------Grids-------------------------------*/
/*-------------------------------------------------------------------*/

.grid-content {
	width: auto;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.grid-content-a {
	background: url('../images/promotion/july_4th_2024_large.jpg') center center no-repeat;
	background-size: cover;
  grid-column: col-1 / col-5;
  grid-row: row-1 / row-2;
	position: relative;
}

/* .grid-content-b {
	background: url('../image/content/turbo-a.png') center center no-repeat, url('../image/content/topographic2.png') center center no-repeat #8a9088;
	background-size: contain, cover, cover;
  grid-column: col-1 / col-3;
  grid-row: row-2 / row-4;
}

.grid-content-c {
	background: url('../image/content/ic-200-bw.png') center center no-repeat, url('../image/content/topographic2.png') center center no-repeat #8a9088;
	background-size: 60%, 200%, cover;
  grid-column: col-3 / col-4;
  grid-row: row-2 / row-3;
}

.grid-content-d {
	background: url('../image/content/ic-500-bw.png') center center no-repeat, url('../image/content/topographic2.png') center center no-repeat #8a9088;
	background-size: 60%, 200%, cover;
  grid-column: col-4 / col-5;
  grid-row: row-2 / row-3;
}

.grid-content-e {
	background: url('../image/content/turbo-b.png') center center no-repeat, url('../image/content/topographic2.png') center center no-repeat #8a9088;
	background-size: contain, 200%, cover;
  grid-column: col-1 / col-2;
  grid-row: row-4 / row-5;
}

.grid-content-f {
	background: url('../image/content/turbo-c.png') center center no-repeat, url('../image/content/topographic2.png') center center no-repeat #8a9088;
	background-size: contain, 200%, cover;
  grid-column: col-2 / col-3;
  grid-row: row-4 / row-5;
}

.grid-content-g {
	background: url('../image/content/ic-1000-bw.png') center center no-repeat, url('../image/content/topographic2.png') center center no-repeat #8a9088;
	background-size: 50%, cover, cover;
	grid-column: col-3 / col-5;
  grid-row: row-3 / row-5;
}

.grid-content-h {
	background: url('../image/content/diesel.jpg') center center no-repeat;
	background-size: cover;
	grid-column: col-1 / col-5;
  grid-row: row-5 / row-6;
} */

.grid-content-b {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../image/content/silverado.jpg') center center no-repeat;
	background-size: cover;
  grid-column: col-1 / col-2;
  grid-row: row-2 / row-3;
	position: relative;
}

.grid-content-c {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../image/content/brz.jpg') center center no-repeat;
	background-size: cover;
  grid-column: col-2 / col-3;
  grid-row: row-2 / row-3;
	position: relative;
}

.grid-content-d {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../image/content/240sx.jpg') center center no-repeat;
	background-size: cover;
	grid-column: col-3 / col-5;
  grid-row: row-2 / row-4;
	position: relative;
}

.grid-content-e {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../image/content/datsun.jpg') center center no-repeat;
	background-size: cover;
	grid-column: col-1 / col-3;
  grid-row: row-3 / row-5;
	position: relative;
}

.grid-content-f {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../image/content/gtr.jpg') center center no-repeat;
	background-size: cover;
	grid-column: col-3 / col-4;
  grid-row: row-4 / row-5;
	position: relative;
}

.grid-content-g {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../image/content/e46.jpg') center center no-repeat;
	background-size: cover;
	grid-column: col-4 / col-5;
  grid-row: row-4 / row-5;
	position: relative;
}

.grid-content-h {
	background: url('../image/content/mazda-1.jpg') center center no-repeat;
	background-size: cover;
	grid-column: col-1 / col-5;
  grid-row: row-5 / row-6;
	position: relative;
}

.grid-content-i {
	background: url('../image/content/radiators.png') center center no-repeat #EBEBEB;
	background-size: 30%, cover;
	grid-column: col-1 / col-3;
	grid-row: row-6 / row-8;
	position: relative;
}

.grid-content-j {
	background: url('../image/content/turbo-kits.png') center bottom no-repeat #EBEBEB;
	background-size: contain, cover;
	grid-column: col-3 / col-4;
	grid-row: row-6 / row-7;
	position: relative;
}

.grid-content-k {
	background: url('../image/content/headers.png') center bottom no-repeat #EBEBEB;
	background-size: contain, cover;
	grid-column: col-4 / col-5;
	grid-row: row-6 / row-7;
	position: relative;
}

.grid-content-l {
	background: url('../image/content/rods.png') center bottom no-repeat #EBEBEB;
	background-size: contain, cover;
	grid-column: col-1 / col-2;
	grid-row: row-8 / row-9;
	position: relative;
}

.grid-content-m {
	background: url('../image/content/coilovers.png') bottom right no-repeat #EBEBEB;
	background-size: 60%, cover;
	grid-column: col-2 / col-3;
	grid-row: row-8 / row-9;
	position: relative;
}

.grid-content-n {
	background: url('../image/content/awic.png') center center no-repeat #EBEBEB;
	background-size: 50%, cover;
	grid-column: col-3 / col-5;
	grid-row: row-7 / row-9;
	position: relative;
}

.grid-content-o {
	background: url('../image/content/chevrolet.jpg') center center no-repeat;
	background-size: cover;
	grid-column: col-1 / col-5;
  grid-row: row-9 / row-10;
	position: relative;
}

/*-------------------------------------------------------------------*/
/*------------------------Content Taglines---------------------------*/
/*-------------------------------------------------------------------*/

.content-tagline {
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	text-decoration: none;
	padding: 0 0 0 0;
	margin: 50px 0 0 50px;
}

.content-tagline h1 {
	font-family: 'ClanWebW03-Bold', sans-serif;
	font-size: 25px;
	line-height: normal;
	font-weight: 500;
	padding: 0;
	margin: 0 0 15px 0;
	text-transform: uppercase;
	color: #FFF;
}

.content-tagline p {
	font-family: 'ClanWebW03-Book', sans-serif;
	font-size: 15px;
	line-height: 1.7em;
	font-weight: 500;
	padding: 0;
	margin: 0 0 40px 0;
	max-width: 400px;
	color: #FFF;
}

/* .content-tagline-a p, .content-tagline-b p, .content-tagline-c p,
.content-tagline-d p, .content-tagline-e p, .content-tagline-f p,
.content-tagline-g p, .content-tagline-h p, .content-tagline-o p,
.content-tagline-a h1, .content-tagline-b h1, .content-tagline-c h1,
.content-tagline-d h1, .content-tagline-e h1, .content-tagline-f h1,
.content-tagline-g h1, .content-tagline-h h1, .content-tagline-o h1, {
	color: #FFF;
} */

.content-tagline-i p, .content-tagline-j p, .content-tagline-k p,
.content-tagline-l p, .content-tagline-m p, .content-tagline-n p,
.content-tagline-i h1, .content-tagline-j h1, .content-tagline-k h1,
.content-tagline-l h1, .content-tagline-m h1, .content-tagline-n h1 {
	color: #000;
}

.content-tagline a {
	font-family: 'ClanWebW03-Medium', sans-serif;
	font-size: 15px;
	line-height: normal;
	font-weight: 500;
	text-decoration: none;
	color: #FFF;
	background: #f25529;
	padding: 20px 40px ;
	border-radius: 10px;
	margin: 0;
	transition: all ease-in-out 0.1s;
}

.content-tagline a:hover {
	color: #FFF;
	background: #c54825;
}

.image-anchor {
	top: 0;
	position: absolute;
	z-index: 1;
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: all ease-in-out .25s;
}

.image-anchor:hover {
	background: rgba(255, 255, 255, 0.1);
}

/*-------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/
/*---------------------------Media Queries---------------------------*/
/*-------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/

/*-------------------------------------------------------------------*/
/*----------------------------1680 Pixels----------------------------*/
/*-------------------------------------------------------------------*/

@media screen and (max-width: 1680px) {

/*-------------------------------------------------------------------*/
/*--------------------------Content Grid-----------------------------*/
/*-------------------------------------------------------------------*/

	.content {
		grid-template-rows:
			[row-1]
				600px
			/* [row-2]
				300px
			[row-3]
				200px
			[row-4]
				300px
			[row-5]
				600px */
			[row-2]
				300px
			[row-3]
				200px
			[row-4]
				300px
			[row-5]
				600px
			[row-6]
				300px
			[row-7]
				200px
			[row-8]
				300px
			[row-9]
				600px
			[row-10];
	}

/*-------------------------------------------------------------------*/
/*------------------------Content Taglines---------------------------*/
/*-------------------------------------------------------------------*/

	.content-tagline {
		margin: 30px 0 0 30px;
	}

}

/*-------------------------------------------------------------------*/
/*----------------------------1366 Pixels----------------------------*/
/*-------------------------------------------------------------------*/

@media screen and (max-width: 1366px) {

	.content {
		grid-template-rows:
			[row-1]
				500px
			/* [row-2]
				250px
			[row-3]
				150px
			[row-4]
				250px
			[row-5]
				500px */
			[row-2]
				250px
			[row-3]
				150px
			[row-4]
				250px
			[row-5]
				500px
			[row-6]
				250px
			[row-7]
				150px
			[row-8]
				250px
			[row-9]
				500px
			[row-10];
	}

/*-------------------------------------------------------------------*/
/*------------------------Content Taglines---------------------------*/
/*-------------------------------------------------------------------*/

	.content-tagline h1 {
		font-size: 20px;
		margin: 0 0 10px 0;
	}

	.content-tagline p {
		font-size: 12px;
		margin: 0 0 10px 0;
	}

	.content-tagline a {
		font-size: 12px;
		padding: 0;
		margin: 0;
		background: none;
		text-decoration: underline;
		color: #FFF;
		font-family: 'ClanWebW03-Bold', sans-serif;
	}

	.content-tagline a:hover {
		background: none;
		filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
	}

	/* .content-tagline-b, .content-tagline-c, .content-tagline-d,
	.content-tagline-e, .content-tagline-f, .content-tagline-g, */
	.content-tagline-i, .content-tagline-j, .content-tagline-k,
	.content-tagline-l, .content-tagline-m, .content-tagline-n {
		color: #000;
	}

	/* .grid-content .content-tagline-b a, .grid-content .content-tagline-c a, .grid-content .content-tagline-d a,
	.grid-content .content-tagline-e a, .grid-content .content-tagline-f a, .grid-content .content-tagline-g a, */
	.grid-content .content-tagline-i a, .grid-content .content-tagline-j a, .grid-content .content-tagline-k a,
	.grid-content .content-tagline-l a, .grid-content .content-tagline-m a, .grid-content .content-tagline-n a {
		color: #000;
		background: none;
	}

	/* .grid-content .content-tagline-b a:hover, .grid-content .content-tagline-c a:hover, .grid-content .content-tagline-d a:hover,
	.grid-content .content-tagline-e a:hover, .grid-content .content-tagline-f a:hover, .grid-content .content-tagline-g a:hover, */
	.grid-content .content-tagline-i a:hover, .grid-content .content-tagline-j a:hover, .grid-content .content-tagline-k a:hover,
	.grid-content .content-tagline-l a:hover, .grid-content .content-tagline-m a:hover, .grid-content .content-tagline-n a:hover {
		color: #f25529;
		background: none;
	}

}

/*-------------------------------------------------------------------*/
/*----------------------------1040 Pixels----------------------------*/
/*-------------------------------------------------------------------*/

@media screen and (max-width: 1040px) {

	.content {
		grid-template-columns: [col-1] 1fr [col-2] 1fr [col-3];
		grid-template-rows:
			[row-1]
				400px
			/* [row-2]
				350px
			[row-3]
				350px
			[row-4]
				350px
			[row-5]
				400px */
			[row-2]
				350px
			[row-3]
				350px
			[row-4]
				350px
			[row-5]
				400px
			[row-6]
				350px
			[row-7]
				350px
			[row-8]
				350px
			[row-9]
				400px
			[row-10];
	}

/*-------------------------------------------------------------------*/
/*-------------------------------Grids-------------------------------*/
/*-------------------------------------------------------------------*/

	.grid-content-a {
	  grid-column: col-1 / col-3;
	  grid-row: row-1 / row-2;
	}

	/* .grid-content-b {
	  grid-column: col-1 / col-2;
	  grid-row: row-2 / row-3;
	}

	.grid-content-c {
	  grid-column: col-2 / col-3;
	  grid-row: row-4 / row-5;
	}

	.grid-content-d {
	  grid-column: col-2 / col-3;
	  grid-row: row-3 / row-4;
	}

	.grid-content-e {
	  grid-column: col-1 / col-2;
	  grid-row: row-3 / row-4;
	}

	.grid-content-f {
	  grid-column: col-1 / col-2;
	  grid-row: row-4 / row-5;
	}

	.grid-content-g {
		grid-column: col-2 / col-3;
	  grid-row: row-2 / row-3;
	}

	.grid-content-h {
		grid-column: col-1 / col-3;
	  grid-row: row-5 / row-6;
	} */

	.grid-content-b {
	  grid-column: col-1 / col-2;
	  grid-row: row-2 / row-3;
	}

	.grid-content-c {
	  grid-column: col-2 / col-3;
	  grid-row: row-2 / row-3;
	}

	.grid-content-d {
		grid-column: col-1 / col-2;
	  grid-row: row-3 / row-4;
	}

	.grid-content-e {
		grid-column: col-2 / col-3;
	  grid-row: row-3 / row-4;
	}

	.grid-content-f {
		grid-column: col-1 / col-2;
	  grid-row: row-4 / row-5;
	}

	.grid-content-g {
		grid-column: col-2 / col-3;
	  grid-row: row-4 / row-5;
	}

	.grid-content-h {
		grid-column: col-1 / col-3;
	  grid-row: row-5 / row-6;
	}

	.grid-content-i {
		background: url('../image/content/radiators.png') center center no-repeat #EBEBEB;
		background-size: 30%, cover;
	  grid-column: col-1 / col-2;
	  grid-row: row-6 / row-7;
	}

	.grid-content-j {
		background: url('../image/content/turbo-kits.png') center bottom no-repeat #EBEBEB;
		background-size: contain, cover;
		grid-column: col-2 / col-3;
		grid-row: row-6 / row-7;
	}

	.grid-content-k {
		background: url('../image/content/headers.png') center bottom no-repeat #EBEBEB;
		background-size: contain, cover;
		grid-column: col-1 / col-2;
		grid-row: row-7 / row-8;
	}

	.grid-content-l {
		background: url('../image/content/rods.png') center bottom no-repeat #EBEBEB;
		background-size: contain, cover;
		grid-column: col-2 / col-3;
		grid-row: row-7 / row-8;
	}

	.grid-content-m {
		background: url('../image/content/coilovers.png') bottom right no-repeat #EBEBEB;
		background-size: 70%, cover;
		grid-column: col-1 / col-2;
		grid-row: row-8 / row-9;
	}

	.grid-content-n {
		background: url('../image/content/awic.png') center center no-repeat #EBEBEB;
		background-size: 70%, cover;
		grid-column: col-2 / col-3;
		grid-row: row-8 / row-9;
	}

	.grid-content-o {
		grid-column: col-1 / col-3;
	  grid-row: row-9 / row-10;
	}

	.content #mc_embed_signup {
		width: 100%;
	}

}

/*-------------------------------------------------------------------*/
/*----------------------------680 Pixels-----------------------------*/
/*-------------------------------------------------------------------*/

@media screen and (max-width: 680px) {

	body {
		background: #FFF;
	}

	.content {
		grid-template-columns: [col-1] 1fr [col-2];
		grid-template-rows:
			[row-1]
				500px
			/* [row-2]
				500px
			[row-3]
				500px
			[row-4]
				500px
			[row-5]
				500px
			[row-6]
				500px
			[row-7]
				500px
			[row-8]
				500px */
			[row-2]
				500px
			[row-3]
				500px
			[row-4]
				500px
			[row-5]
				500px
			[row-6]
				500px
			[row-7]
				500px
			[row-8]
				500px
			[row-9]
				500px
			[row-10]
				500px
			[row-11]
				500px
			[row-12]
				500px
			[row-13]
				500px
			[row-14]
				500px
			[row-15]
				500px
			[row-16];
	}

/*-------------------------------------------------------------------*/
/*----------------------