﻿/***** BEGIN RESET *****/
@import url("https://use.typekit.net/eet4rjx.css");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 

/*-------- COLORS --------*/
:root {
  --green: #7FD858;
  --red: #A70812;
  --blue: #043167;
  --dark-blue: #041F41;
  --grey: #F8F8F8;
}

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

h1, h2, h3, h4 {
	font-family: 'effra-cc', sans-serif;
}

#home p, #thankyou p, #about p, #contact p, #financing p, #privacy p, #promotions p, #reviews p, #vehicle-finder p, #trade p, .my-site-header a, footer p, footer a  {
	font-family: 'effra-cc', sans-serif;
	font-size: 17px;
	line-height: 30px;
	color: var(--dark-blue);
}

/*-------- BODY STYLES --------*/


a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}


/*-------- UNIVERSAL STYLES ----------------*/
.wrapper {
	padding: 0 15px; 
	margin: 0 auto;
	max-width: 1830px;
}

.flex {display: flex;}
.fixed-background {
  background-image: url("/siteart/background.jpg");
  min-height: 300px;
  background-attachment: fixed;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-size: cover;	
}
.background-overlay {background-color: rgba(255, 255, 255, 0.85);}
.background-overlay-inner {background-color: rgba(255, 255, 255, 0.93);}
.sub-head-center {align-items: center; justify-content: center; gap: 20px; margin-bottom: 10px;}
.sub-head-left {align-items: center; gap: 20px; margin-bottom: 10px;}

.p-top {margin-top: 20px;}
.btn-top {margin-top: 60px;}
.p-top-sm {margin-top: 10px;}

/*---Headings---*/
.heading-lg {font-size: 80px; color: #fff; text-transform: uppercase; line-height: 90px;}
.heading-md {font-size: 50px; line-height: 60px; color: var(--dark-blue); margin-bottom: 20px; text-transform: uppercase;}
.heading-sm {font-size: 40px; line-height: 50px; color: #fff; margin-bottom: 20px; text-transform: uppercase;}
.heading-mdsm {font-size: 30px; line-height: 40px; color: var(--dark-blue); margin-bottom: 15px; text-transform: uppercase;}
.sub-head {font-size: 20px!important; color: var(--red)!important; font-weight: 700;}

.red-line {margin: 0; width: 60px; border-bottom: #A70812 3px solid; border-top: 0; border-left: 0; border-right: 0;}
.white-line {margin: 0; height: 90px; border-left: #fff 3px solid; border-top: 0; border-bottom: 0; border-right: 0;}

/*---Buttons---*/
.btn-red, .btn-white {
	display: inline-block;
	text-align: center;
	width: 200px;
	padding: 15px 0;
	background-color: var(--red);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	transition: all .4s ease-out;
	font-family: 'effra-cc', sans-serif;
	border: none;
	cursor: pointer;
}
.btn-red:hover {background-color: var(--green); color: var(--dark-blue);}

.btn-white {background-color: #fff!important; color: var(--dark-blue)!important;}
.btn-white:hover {background-color: var(--green)!important;}


/*--- HERO STYLES ---------------------*/
.home-hero, .inner-hero {background: url("/siteart/home-hero.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--dark-blue);}
.home-hero > div, .inner-hero > div {background-color: rgba(4,49,103,.75);}
.home-hero .wrapper {padding-top: 450px!important; padding-bottom: 130px!important;}

.inner-hero .wrapper {padding-top: 300px; padding-bottom: 130px!important;}
.inner-hero .flex {align-items: center; gap: 20px;}
.inner-hero .flex a {font-family: 'effra-cc', sans-serif; font-size: 17px; line-height: 30px; color: #fff; transition: all .4s ease-out; font-weight: 700;}
.inner-hero .flex a:hover {color: var(--green);}
.inner-hero .flex p {color: #fff!important;}
.inner-hero .flex hr {margin: 0; height: 20px; border-top: 0; border-bottom: 0; border-left: 0; border-right: solid 1px #fff;}

/*---col-3---*/
.col-3 {padding-top: 40px; padding-bottom: 80px; background: var(--blue); clip-path: polygon(0% 0%, 100% 0%, 100% 77.27%, 50% 100%, 0% 77.27%); z-index: 1; position: relative;}
.col-3 .flex {justify-content: space-around; align-items: center; gap: 20px;}
.col-3 a {color: #fff; font-family: 'effra-cc', sans-serif; font-size: 17px; font-weight: 700; transition: all .4s ease-out;}
.col-3 a:hover {color: var(--green);}
.col-3 a i {margin-left: 10px;}
.green-triangle {clip-path: polygon(0% 0%, 100% 0%, 100% 77.27%, 50% 100%, 0% 77.27%); background: var(--green); height: 220px; z-index: 0; position: relative; margin-top: -212px;}

/*---BODY--------------------------------*/
/*---inventory-cards---*/
.inventory-cards {gap: 20px; padding-top: 130px!important; padding-bottom: 130px!important;}
.inventory-cards .flex {gap: 20px;}
.inventory-cards > .red-card {max-width: 820px; width: 100%; height: 740px; background: var(--red);}
.inventory-cards .red-card img {width: 100%; height: 100%; object-fit: cover; opacity: .3;}
.inventory-cards .red-card {position: relative; transition: all .4s ease-out;}
.inventory-cards .red-card:hover {background: var(--blue)!important;}
.inventory-cards .red-card:hover i {color: var(--blue);}
.inventory-cards > div:last-child {min-width: 500px;}
.inventory-cards > div:last-child .flex {margin-bottom: 20px;}
.inventory-cards > div:last-child .flex .red-card {max-width: 485px; width: 100%; height: 360px; background: var(--red);}
.inventory-cards > div:last-child > .red-card {max-width: 990px; width: 100%; height: 360px; background: var(--red);}
.inventory-cards .red-card i {position: absolute; top: 15px; right: 15px; color: var(--red); background: #fff; padding: 10px 11px; border-radius: 50px; font-size: 20px;}
.inventory-cards .red-card .heading-sm {position: absolute; left: 40px; bottom: 10px; right: 40px;}

/*---center-section---*/
.center-section  {padding-bottom: 130px!important;}
.center-section {text-align: center;}
.center-section > div:nth-child(3) {margin: 0 auto; max-width: 1200px;}

/*---col-varried---*/
.col-varried > .flex {gap: 20px; justify-content: center;}
.col-varried .img-height {height: 450px; max-width: 990px; width: 100%;}
.col-varried .img-height img {width: 100%; height: 100%; object-fit: cover;}
.col-varried > .img-height {max-width: 2000px!important; margin-top: 20px;}

.col-varried .wrapper {padding-top: 130px!important; padding-bottom: 130px!important;}
.col-varried .col-2 {gap: 30px; justify-content: space-between; align-items: flex-end; margin-bottom: 100px;}
.col-varried .col-2 > div:first-child {max-width: 730px; width: 100%;}

.col-varried .box-3 {justify-content: center; gap: 30px;}
.col-varried .white-box {background: #fff; border: solid 1px #043167; padding: 70px 30px; box-sizing: border-box; max-width: 600px; width: 100%; text-align: center;}
.col-varried .white-box i {color: var(--red); font-size: 40px;}
.col-varried .white-box .heading-sm {color: var(--dark-blue)!important; margin-top: 50px; margin-bottom: 50px;}
.col-varried .white-box .flex {justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;}
.col-varried .white-box hr {margin: 0; height: 20px; border-left: #041F41 1px solid; border-top: 0; border-bottom: 0; border-right: 0;}
.col-varried .white-box a {font-family: 'effra-cc', sans-serif; font-size: 17px; line-height: 30px; color: var(--dark-blue); transition: all .4s ease-out;}
.col-varried .white-box a:hover {color: var(--red); font-weight: 700;}

/*--------PAGE STYLES--------------------*/
/*---thankyou---*/
#thankyou .center-section {padding-top: 130px!important;}
#thankyou .center-section > div:nth-child(3) {max-width: 700px!important;}
.center-section .flex {gap: 15px; justify-content: center; flex-wrap: wrap;}

/*---Promotions---*/
#promotions .img-left .img-height {height: 400px; width: auto;}
#promotions .img-left .img-height img {object-fit: contain;}
#promotions .img-left {padding-top: 130px!important;}
#promotions .img-left > .flex {padding: 50px; box-sizing: border-box; border: #041F41 solid 1px; background: #fff; gap: 100px; align-items: center; max-width: 100%;}
#promotions .img-left .btn-top {gap: 15px; flex-wrap: wrap;}

/*---About---*/
#about .center-section {padding-top: 130px!important;}
.list-section {justify-content: space-between; gap: 40px; align-items: flex-start; padding-bottom: 130px!important;}
.list-section > div:first-child ul {gap: 20px; flex-wrap: wrap; margin-top: 40px; max-width: 700px; width: 100%; min-width: 400px;}
.list-section > div:first-child ul li {background: #fff; border: #041F41 solid 1px; padding: 10px 0; width: 180px; text-align: center; }
.list-section > div:last-child {background: url("/siteart/about-service.jpg") no-repeat; background-size: cover; background-position: center; max-width: 1000px;
    width: 100%;}
.list-section > div:last-child > div {background: rgba(167, 8, 18, .65);}
.list-section > div:last-child .content-right {padding: 70px; }
.list-section > div:last-child .heading-md, .list-section > div:last-child li p {color: #fff!important;}
.list-section > div:last-child li i {padding: 8px 10px; background: #fff; color: var(--red); border-radius: 50px; margin-right: 10px;}
.list-section > div:last-child li {margin-bottom: 10px;}
.list-section > div:last-child .p-top, .list-section > div:last-child .p-top a {color: #fff!important; font-weight: 700!important; font-size: 20px!important;}
.list-section > div:last-child p a:hover {text-decoration: underline;}

.img-left {gap: 100px; align-items: center; padding-bottom: 130px!important;}
.img-left .img-height {max-width: 900px; width: 100%; height: 600px;}
.img-left .img-height img {width: 100%; height: 100%; object-fit: cover;}
.img-left > div:last-child {max-width: 700px; width: 100%;}

#about .col-varried {padding-bottom: 130px!important;}
#about .col-varried .white-box .heading-sm {margin-bottom: 10px; }
#about .col-varried .sub-heading {font-weight: 700; margin-bottom: 35px;}

/*---reviews---*/
.box-reviews {justify-content: center; gap: 20px; flex-wrap: wrap; padding-top: 130px!important; padding-bottom: 130px!important;}
.box-reviews .white-box {background: #fff; padding: 50px 30px; box-sizing: border-box; border: #043167 solid 1px; max-width: 32%; width: 100%; text-align: center;}
.box-reviews .white-box .heading-sm {color: var(--dark-blue); font-size: 30px!important; line-height: 40px!important; margin-bottom: 10px!important;}
.box-reviews i {font-size: 40px; color: var(--red); margin-bottom: 40px;}
.box-reviews .sub-heading {font-weight: 700; margin-bottom: 30px; font-size: 17px; color: var(--dark-blue);}
.box-reviews .flex {gap: 5px; justify-content: center; margin-top: 30px;}
.box-reviews .flex i {color: var(--red); font-size: 12px; margin-bottom: 0;}


/*---Contact---*/
.img-right {justify-content: space-between; align-items: center; padding-top: 130px!important; gap: 40px;}
.img-right .img-height {max-width: 950px; width: 100%; height: 600px;}
.img-right .heading-sm {color: var(--dark-blue); margin-top: 30px;}
.img-right li {margin-bottom: 10px;}
.img-right li a {font-size: 17px; font-family: 'effra-cc', sans-serif; color: var(--dark-blue); transition: all .4s ease-out;}
.img-right li a:hover {color: var(--red); font-weight: 700;}
.img-right li i {color: var(--red); margin-right: 15px;}
.img-right li span {font-weight: 700;}

/*---Value Your Trade---*//*---Vehicle Finder---*//*---Financing---*/
.finance-calc {padding-bottom: 130px;}
.finance-calc .flex {background: #fff; border: solid 1px #043167; padding: 70px; box-sizing: border-box; justify-content: space-between; gap: 40px;}
.finance-calc button {margin-top: 15px;}
.finance-info {min-width: 530px;}
.finance-info p {margin-top: 15px;}

.finance-out {display: flex; flex-direction: column; align-items: center; background: var(--grey); padding: 50px; max-width: 900px; width: 100%; box-sizing: border-box; height: 100%;}
.finance-out i {color: var(--red); font-size: 50px; margin-bottom: 30px;}
.finance-out .heading-sm {text-align: center; color: var(--dark-blue); margin-bottom: 60px;}
.finance-out .heading-sm span {font-weight: 400; font-size: 30px;}
.finance-out p span {color: var(--red)!important; font-size: 50px; text-align: center;}

/*--------FORM STYLES--------------------*/
.vehicle-form p a {color: var(--dark-blue); transition: all .4s ease-out;}
.vehicle-form p a:hover {color: var(--red); font-weight: 700;}
#submit-btn {display: flex; justify-content: flex-end;}
.form-all {
	box-sizing: border-box;
	max-width: 1100px!important; width: 100%;
	margin: 0 auto!important;
	text-align: center;
	padding-top: 130px!important;padding-bottom: 130px!important;
}

.form-all .heading-sm {color: var(--dark-blue); text-align: left; text-transform: none; font-size: 30px; margin-top: 30px;}
.form-all .heading-xsm {color: var(--dark-blue); text-align: left; font-size: 20px; margin-bottom: 20px; margin-top: 30px;}
.form-all #hideRemove1 {display: flex;}

.label {font-family: 'effra-cc', sans-serif;text-align: left!important;font-weight: 500;font-size: 17px;color: var(--dark-blue);}
.label-row {margin-bottom: 15px;}
.flex-row {display: flex;width: 100%; gap: 15px; margin-bottom: 15px;}

/*Form Half*/
.form-half select, .form-half input {
	display: inline-block; 
	width: 100%; 
	padding: 15px;
	border: solid 1px #041F41;
	background: #fff;
	font-family: 'effra-cc', sans-serif;
	box-sizing: border-box;
	color: var(--dark-blue);
	font-size: 17px;}
.form-half {display: inline-block;width: 50%;}

/*Form Third*/
.form-third {display: inline-block;width: 33.3%;}
.form-third input, .form-third select, .finance-calc input {
	padding: 15px;
	width: 100%;
	border: solid 1px #041F41;
	background: #fff;
	font-family: 'effra-cc', sans-serif;
	box-sizing: border-box;
	color: var(--dark-blue);
	font-size: 17px;}
.form-third select {color: var(--dark-grey);}

/*Form Full Small*/
.form-full-sm {display: inline-block; width: 100%;}
.form-full-sm input, .form-full-sm select {
	padding: 17px;
	width: 100%;
	border: solid 1px #041F41;
	background: #fff;
	font-family: 'effra-cc', sans-serif;
	box-sizing: border-box;
	color: var(--dark-blue);
	font-size: 17px;
}

/*Form Message*/
.form-full {margin: 15px 0 30px 0;}
.form-full textarea {
	width: 100%;
	padding: 15px;
	border: solid 1px #041F41;
	background: #fff;
	box-sizing: border-box;
	margin-bottom: -8px;
	font-family: 'effra-cc', sans-serif;
	font-size: 17px;
}

/*Checkbox*/
.checkbox-agree fieldset {display: flex; align-items: flex-start; gap: 10px;}
.checkbox {text-align:left; margin-bottom:20px!important;margin-top: 0;}
.checkbox fieldset > label > .label-row {display: inline-block;}
.checkbox p {margin-bottom: 10px;}
.checkbox fieldset label {display: inline-block;}
.checkbox .flex {justify-content: space-between;}


/*-------- FOOTER STYLES ----------------*/
.my-site-footer {border-top: solid 10px #7FD858; background: var(--blue); padding-top: 80px;}
.my-site-footer > .flex {justify-content: space-between; gap: 30px; padding-bottom: 80px;}
.my-site-footer > .flex > .flex {gap: 150px;}
.my-site-footer ul.flex {gap: 20px;}

.my-site-footer img {max-width: 150px;}
.my-site-footer > .flex > div:first-child p {max-width: 430px; margin-top: 20px;}

.my-site-footer .p-heading {font-size: 20px!important; font-weight: 700!important; margin-bottom: 30px;}
.my-site-footer p, .my-site-footer a {color: #fff!important; transition: all .4s ease-out;}
.my-site-footer li {margin-top: 15px;}
.my-site-footer i {color: var(--green); margin-right: 10px;}
.my-site-footer a:hover {color: var(--green)!important;}
.my-site-footer li span {font-weight: 700!important;}


/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/

.list-top-section .list-listings-count, .return-links span, .return-links i {color: var(--red)!important;}
.listing-prices__retail-price, #no-compare-listings {color: var(--blue)!important;}

.list-container-flexrow .view-listing-details-link, .faceted-search-content .selected-facets-container .selected-facet, .recommended-listings-section .view-all-link, .captcha-placeholder button, #list-page-print-this, #compare-page-print-this {background: var(--red)!important; transition: all .4s ease-out;}
.list-container-flexrow .view-listing-details-link:hover, .faceted-search-content .selected-facets-container .selected-facet:hover, .detail__cta-buttons button:hover, .recommended-listings-section .view-all-link:hover, .detail-contact-bar button:hover, .captcha-placeholder button:hover, #list-page-print-this:hover, #compare-page-print-this:hover {background: var(--green)!important; color: var(--dark-blue)!important;}

/*---------- RESPONSIVE STYLES ----------*/


@media only screen and (min-width: 2000px) {
	.col-varried > .img-height {margin: 20px auto 0!important;}
}

@media only screen and (max-width: 1550px) {
	.my-site-footer > .flex > .flex {gap: 30px; min-width: 682px;}
}

@media only screen and (max-width: 1330px) {
	.box-reviews .white-box {padding: 30px 15px;}
}

@media only screen and (max-width: 1230px) {
	.list-section > div:last-child .content-right {padding: 30px;}
	.img-left, #promotions .img-left > .flex {gap: 40px;}
	.box-reviews .white-box {max-width: 48%;}
	.finance-info {min-width: 350px;}
}

@media only screen and (max-width: 1150px) {
	#about .col-varried .box-3 {flex-wrap: wrap;}
	#about .col-varried .white-box {max-width: 100%;}
	.finance-calc .flex {padding: 40px;}
	.finance-out {padding: 30px;}
}

@media only screen and (max-width: 1000px) {
	.my-site-footer > .flex {flex-wrap: wrap; gap: 50px;}
	.my-site-footer > .flex > .flex {gap: 50px; flex-wrap: wrap; min-width: 100px;}
}

@media only screen and (max-width: 900px) {
	.inventory-cards .red-card .heading-sm {bottom: -10px; left: 20px; right: 20px;}
	.col-varried .white-box .heading-sm {margin-top: 20px; margin-bottom: 20px;}
	.col-varried .white-box {padding: 30px 20px; max-width: 900px;}
	.col-varried .box-3 {flex-wrap: wrap; gap: 20px;}
	.list-section {flex-wrap: wrap;}
	.list-section > div:first-child ul {min-width: 100px;}
	.img-left, #promotions .img-left > .flex {flex-wrap: wrap;}
	.img-left .img-height, #promotions .img-left .img-height {height: 300px;}
	.box-reviews .white-box .heading-sm {font-size: 25px!important; line-height: 35px!important;}
	.finance-calc .flex {flex-wrap: wrap;}
	.finance-info {width: 100%; min-width: 100px;}
}

@media only screen and (max-width: 780px) {
	.col-3 .flex {flex-direction: column;}
	.white-line {border-left: 0; border-bottom: #fff 3px solid; height: auto; max-width: 800px; width: 100%;}
	.green-triangle {margin-top: -472px; height: 480px;}
	.inventory-cards {flex-wrap: wrap;}
	.inventory-cards > div:last-child {min-width: 100px;}
	.inventory-cards > .red-card {height: 360px;}
}

@media only screen and (max-width: 730px) {
	.heading-lg {font-size: 50px; line-height: 60px;}
	.heading-md {font-size: 40px; line-height: 50px;}
	.heading-sm {font-size: 30px; line-height: 40px;}
	.heading-mdsm {font-size: 20px; line-height: 30px;}

	.sub-head {font-size: 17px!important;}
	.green-triangle {margin-top: -442px; height: 450px;}
	.img-right {flex-wrap: wrap;}
	.img-right .img-height {height: 300px;}
	.box-reviews .white-box {max-width: 100%;}
	
	.home-hero .wrapper {padding-top: 250px!important; padding-bottom: 80px!important;}
	.inventory-cards, .col-varried .wrapper, .form-all {padding-top: 80px!important; padding-bottom: 80px!important;}
	.center-section, .list-section, .img-left, #about .col-varried, #promotions .img-left {padding-bottom: 80px!important;}
	.img-right, #about .center-section, #thankyou .center-section {padding-top: 80px!important;}
}

@media only screen and (max-width: 600px) {
	.inventory-cards .red-card {height: 240px!important;}
	.col-varried > .flex, .col-varried .col-2 {flex-wrap: wrap;}
	.col-varried .img-height {height: 200px;}
	#promotions .img-left > .flex {padding: 30px 20px;}
}

@media only screen and (max-width: 500px) {
	.flex-row {flex-wrap: wrap;}
	.form-half, .form-third {width: 100%;}
	.finance-calc .flex {padding: 30px 20px;}
	.finance-out {padding: 20px;}
}

@media only screen and (max-width: 430px) {
	.list-section > div:first-child ul li {width: 100%;}
	.list-section > div:last-child .content-right {padding: 20px;}
}

@media only screen and (max-width: 380px) {
	.heading-lg {font-size: 45px; line-height: 55px;}
	.heading-md {font-size: 38px;}
	.heading-sm {font-size: 28px;}
	.sub-head {font-size: 17px!important;}
	.inventory-cards > div:last-child .flex {flex-wrap: wrap;}
	.box-reviews .white-box .heading-different {font-size: 20px!important;}
}

@media only screen and (max-width: 340px) {
	.heading-lg {font-size: 42px; line-height: 52px;}
	.heading-md {font-size: 35px; line-height: 45px;}
	.heading-sm {font-size: 25px; line-height: 35px;}
	.sub-head {font-size: 17px!important;}
}
