/* BEGIN RESET */
* {background:transparent; border:0; margin:0; padding:0; font-family: 'Roboto Condensed', sans-serif; font-style:normal; line-height:1.4em; -webkit-text-size-adjust: none;}
ol, ul, li {list-style: none; font-size:15px; line-height:1.6;}
ul {padding:0 0;}
.clear {clear: both; height:0px; margin:0;}

h1 {font-size:32px; text-transform:uppercase; line-height: 1.2;}
h2 {font-size:28px; text-transform:uppercase; font-weight:700; line-height:1.1em;}
h3 {font-size:22px; font-weight:700; text-transform: uppercase;}
h4 {font-size:18px; color:#fff; margin-bottom:5px; text-transform: uppercase;}
h5 {font-size:16px; font-weight:700;}
h6 {font-size:20px; font-weight:700; text-transform:uppercase;}

p {font-size:16px; line-height:1.6rem; margin-bottom:8px;}

a {text-decoration:none; transition: .2s ease-in;}
a h1 {color:#000;}
/* BASIC STYLES */
body {overflow-x:hidden; background:#fff; line-height: 1.6;}
#contentwrap {width:90%; margin:0 auto;}
#site-width {width:85%; max-width: 1500px; margin:30px auto 10px;}
.col_three {display:inline-block; width:30%; vertical-align:top; text-align:left!important; margin-bottom:10px;}

.col_two {display:inline-block; width:48%; vertical-align:top; text-align:left!important; }
.col_two_last {display:inline-block; width:48%; vertical-align:top; text-align:left!important;}
.col_two_last img {width:100%;}

ul.breadcrumb {float:right; list-style: none; font-size: 10px; margin-bottom:10px;}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {padding: 3px; color: #ccc;}
ul.breadcrumb li a {color: #0f3c6c;}

#locations_mobile {display:none;}
#locations_desktop {display:block;}

/* HEADER */
.navwrap {background:#0f3c6c; padding:6px 0; text-align:center;}
header {background:#fff; padding:8px 0 10px; border-bottom:1px solid #ccc; top:0;}
.logo {float:left; width:29%; margin-top:1.1%;}
.logo img {width:100%;}
.headerright {float:right; width:65%; font-size:16px; line-height:1.3em; color:#000; text-align:left; margin-top:5px; gap:2vw; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-end; flex-wrap: nowrap;}
.headerright a {color:#000;}
.graybtn {background:#404040; padding:4px 0; width:150px!important; text-align:center; color:#fff!important; margin-top:5px; font-size:13px;}
.graybtn:hover {background:linear-gradient(#404040, #4e4c4c);}

.col_four {display: flex;flex-direction: column; align-items: flex-start; margin-top: 4px;margin-bottom: 4px; flex-wrap:nowrap}
.isuzu_col {justify-content: flex-start;align-items: center;text-align: center;}
.isuzu_col img {height: 80px;}




/* CONTENT STYLES */
.tagline {width:650px; top:35%; left:10%; color:#fff; position:absolute; z-index: 10; font-size:55px; line-height:1; text-align: left; text-shadow: 1px 1px 8px #222;}
.tagline strong {line-height: 1;}
button#cta {background:#0f3c6c; display:inline-block; padding:10px 0; text-align:center; color:#fff; font-weight:700; width:49%; margin:0px auto 0; cursor:pointer; font-size:16px;}
button#cta:hover {background:linear-gradient(#0f3c6c, #0F2F5B);}

/* Base Hero Section */
.s13-hero {
    position: relative;
    width: 100%;
    height: 85vh; /* Adjust to take almost the full page */
    overflow: hidden;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Stacking behavior */
    text-align: center;
}

.s13-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Keeps image in the background */
}

.s13-tagline {
    position: relative;
    z-index: 2;
    color: white;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    max-width: 80%;
    padding: 20px;
}
.s13-tagline strong {
	line-height: 1.2;
}

.s13-disclaimer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent background for readability */
    color: white;
    padding: 10px 15px;
    font-size: 12px;
    text-align: center;
	box-sizing: border-box;
    z-index: 2; /* Ensures it appears over the image */
}


.cta-buttons {
    margin-top: 20px;
    position: relative;
    z-index: 2;
}

#cta {
    background-color: #d71920;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    margin: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}

#cta:hover {
    background-color: #a11216;
}

/* Feature Section Layout */
.feature-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 5%;
    background-color: #f8f8f8;
}

.feature-container {
    display: flex;
    max-width: 1200px;
    align-items: center;
    gap: 40px;
}

.feature-image {
    flex: 1;
}

.feature-image img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.feature-text {
    flex: 1;
    font-family: 'Montserrat', sans-serif;
}

.feature-text h2 {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
    color: #000;
}

.feature-text .bold-text {
    font-weight: 700;
}

.feature-text p {
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
    margin: 15px 0;
}

.feature-link {
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    color: #000;
    border-bottom: 2px solid #000;
    transition: all 0.3s ease;
}

.feature-link:hover {
    color: #666;
    border-bottom: 2px solid #666;
}

/* Responsive Styles */
@media screen and (max-width: 800px) {
    /* Hero Section: Stack Text Underneath */
    .s13-hero {
        height: auto;
        flex-direction: column;
    	padding-bottom: 60px; /* Adjust padding for mobile */
    }

    .s13-disclaimer {
        position: relative; /* Allow it to naturally flow below */
        bottom: auto;
    }

    .s13-hero img {
        position: relative; /* Ensure it moves naturally */
        height: auto;
    }

    .s13-tagline {
        font-size: 1.5rem;
        max-width: 100%;
        padding: 20px;
    }

    .cta-buttons {
        text-align: center;
    }

    #cta {
        font-size: 1rem;
        padding: 12px 24px;
        width: 100%;
        max-width: 300px;
    }

    /* Feature Section: Stack Image & Text */
    .feature-container {
        flex-direction: column;
        text-align: center;
    }

    .feature-image, 
    .feature-text {
        width: 100%;
    }

    .feature-text {
        padding: 20px;
    }
}

.whole {background:#0f3c6c; display:block; padding:10px 0; text-align:center; color:#fff; font-weight:700; width:100%; margin:0px auto 0; cursor:pointer; font-size:16px;}
.whole:hover {background:linear-gradient(#0f3c6c, #0F2F5B);}


/* CONTENT SYTLES */
.pageleft {float:left; width:60%;}
.pageleft a {color:#0f3c6c;}
.pageright {float:right; width:35%;}

.maptext {float:left; width:50%;}
.maptext a {color:#0f3c6c;}
.map {float:right; width:45%}
.gray {border-bottom:1px solid #ccc; padding-top:15px; margin-bottom:20px;}

.pagelogo {width:275px; margin-bottom:10px;}
.icbus {width:95px; margin-bottom:10px; vertical-align:middle;}

#idealease a {color:#0039a6;}
#hero-video {width: 100%;}

/* ICON BUTTONS */
.homeinventory {width:16.6666%; float:left; background-color:#000;}
.homeinventory img {width:100%;}
.ts-modal-content {color:#000 !important;}

.hovereffect {width: 100%; height: 100%; float: left; overflow: hidden; position: relative; text-align: center; cursor: default;}
.hovereffect .overlay {width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0;}

.hovereffect img {display: block; position: relative; -webkit-transition: all 0.4s ease-in; transition: all 0.4s ease-in;}
.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="https://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
  filter: grayscale(1) blur(3px);
  -webkit-filter: grayscale(1) blur(3px);
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.hovereffect a.info {display:inline-block; margin:0 auto; padding-top:22%; font-size:24px; font-weight:700; width:100%; height:100%; color:#fff; line-height:30px;}

.configurator-wrapper .sub-nav {display: block; margin: 0 0 3em;}
.configurator-wrapper .sub-nav a {color: #0f3c6c; font-weight: 600;}
.configurator-wrapper .sub-nav a:hover {color: #000; text-decoration: underline;}
.configurator-wrapper h2 {display: block; margin-bottom: .75em; color: #0f3c6c;}
.configurator-wrapper p strong {display: block; font-size: 18px; text-decoration: underline; letter-spacing: .5px;}
.models-wrapper {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.models-wrapper a {width: calc(29.33% - 1em); margin: 1%; padding: 1em; border: dotted 3px #ccc;}
.models-wrapper a:hover {border: 3px dotted #0f3c6c;}
.models-wrapper img {width: 100%; height: auto;}

/* electric pages */
.configurator-wrapper .flex-wrapper {width: 100%; display: flex; justify-content: space-between; align-items: center; margin: 1em auto; padding: 1.5em 5%; border: 1px solid #ddd; box-sizing: border-box;}
.configurator-wrapper .flex-wrapper img {width: 100%; max-width: 333px; height: auto; padding-left: 10%;}

/*LOCATIONS */
#map {background: url(../siteart/BG-4.jpg) no-repeat; background-color:#000; background-size:cover; width:100%; position:relative;}

#map img {width:55%; height:auto; float: left;}

#locations-map{ width: 41%; padding:2%; margin: 0; float:right; height: 100%; color:#fff;}
.locations-map-text{text-align: left;}
.locations-map-text p {margin:0; font-size:16px !important;}

.locations-map-text a {color:#fff !important;}
.locations-map-text a:hover{color:#0f3c6c!important;}	
.orange {border-bottom:1px solid #0f3c6c; padding-top:15px; margin-bottom:20px;}

/* BROCHURE TABS */
.tabs {width: 100%; display: flex; flex-wrap: wrap; margin: 2em 0;}
.tabs label {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  width: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .75em 1vw;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  background: #404040; 
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
  -webkit-transition: background ease 0.2s;
  transition: background ease 0.2s;
}
.tabs .tab {
  -webkit-box-ordinal-group: 100;
  -webkit-order: 99;
  -ms-flex-order: 99;
  order: 99;
  flex-grow: 1;
  width: 100%;
  padding: 4em 10%;
  display: none;
  background: #f4f4f4;
}
.tabs label:hover, .tabs input[type="radio"]:checked + label:hover {color: #fff; background: #4e4c4c;}
.tabs input[type="radio"] { position: absolute; opacity: 0;}
.tabs input[type="radio"]:checked + label {background: #f1591e; color: #fff;}
.tabs input[type="radio"]:checked + label + .tab {display: flex; flex-direction: column;}
.tab h3 {margin: 0 0 2em; color: #000; text-decoration: underline; text-align: left;}
.tab a {width: calc(50% - 2em); margin: 1em; display: block;}
.tab img {width: 100%; height: auto;}
.tab img:hover {opacity: .8; transition: .3s ease-in-out all;}


 /* FORM */
.field {margin:6px;}
.field-half {float:left; width:calc(50% - 12px); margin:6px;}
.field-third {float:left; width:calc(33.33% - 12px); margin:6px;}
#required {color:#636466;}
input.text {padding:5px 0; border:1px solid #000;}
select {width:101.5%; padding:5px 0; border:1px solid #000;}
textarea {width:calc(100% - 25px); margin:6px; border:1px solid #333; padding:10px; font-family: 'Roboto Condensed', sans-serif; colpr:#000; height:80px;}
input.button{float:left; width:350px; font-weight:bold; text-transform:uppercase; color:#fff; height:28px; line-height:28px; text-align:center; font-size:16px;  padding:0 20px; background:#404040; border:0; margin:2px 0;}
input.button:hover {background-position:bottom; cursor:pointer; background:linear-gradient(#0f3c6c, #0F2F5B);}
form h3 {text-align: center; background: #0f3c6c; color: #fff; padding: 10px; margin: 20px 0; letter-spacing: 1px; clear: both;}

.sign-up {padding:10px 0; width:100%; margin-bottom:30px; }
.sign-up p {font-weight:bold; text-transform:uppercase; }
.sign-up input.text {width:100%; background:#fff; color:#000; margin-bottom:10px; padding-left:5px;}

a.button {width:350px; font-weight:bold; text-transform:uppercase; color:#fff; height:28px; line-height:28px; display:block; text-align:center; padding:0 0; float:left; background:#404040;margin:5px 0 10px;display:block!important;}
a.button:hover {background-position:bottom; text-decoration:none; color:#fff; background:linear-gradient(#0f3c6c, #0F2F5B);}

.CaptchaWhatsThisPanel a {color:#000!important; font-size:12px;}
.CaptchaMessagePanel {font-weight:normal!important; font-size:12px;}
input#CaptchaAnswer {width: 100%; padding: 5px;}
.CaptchaAnswerPanel {padding: 0!important; border:1px solid #ccc; background:#fff; color:#000 !important; text-align:left;}
.CaptchaPanel {width:350px; text-align:left!important; display:block!important; padding:0!important;}
.CaptchaImage {text-align:left!important; display:block!important; width:60%;}

/*IDEALEASE*/
.idealease-logo {
    margin: 30px 0 15px;
}

.idealease-logo img {
    max-width: 100%;
    width: 250px;
}

/* FOOTER */
footer {background:#0f3c6c; color:#fff; font-size:15px; padding:40px 0; font-size:14px;}
footer a {color:#fff; font-size:15px;}
footer a:hover {color:#3e6aa6;}
.col_left {float:left; width:25%; padding-bottom:30px; border-right:1px solid #3e6aa6;}
.whitebtn {display:block; width:90%; border:1px solid #3e6aa6; padding:5px 0; text-align:center; margin:10px 0; font-weight:700;}
.col_right {float:right; width:70%; }
hr {border-bottom:1px solid #3e6aa6; padding-top:10px; margin-bottom:20px;}
.foot_left {float:left; width:75%; padding:15px 0;}
.foot_left a {color:#fff; font-weight: 400;}
.foot_right {float:right; width:25%; text-align:right; padding:15px 0;}
.foot_right a {font-size:22px;}
  
.footmanulogo img {height:60px; margin:0 .5% 0 0; display:inline-block; vertical-align:middle;}
/************************************************ Responsive Styles **/
@media screen and (max-width: 1520px)  {
h3 {font-size:20px;}
h4 {font-size:16px;}

.tagline {font-size:45px; width:550px;}

.hovereffect a.info {padding-top:19%; font-size:20px;}

.locations-map-text {padding:0% 1.5%;}	
.locations-map-text p {font-size:14px !important; line-height:20px;}
	
	
}


@media screen and (max-width: 1280px)  {
button {padding:5px 0; font-size:14px;}
	
.tagline {font-size:36px; width: 450px; top: 32%;}
	
.models-wrapper a {width: calc(45% - 1em);}
	
.locations-map-text p {font-size:12px !important; line-height:15px;}
.orange {padding:5px 0; margin;5px auto;}
	
.foot_manu {display:block; margin-top:10px;}
	
header {padding: 6px 0 8px;}
.headerright {gap: 1.5vw;font-size: 15px;}
.isuzu_col img {height: 65px;}
}

@media screen and (max-width: 1024px)  {
h4 {font-size:14px;}
p {font-size:14px;}
	
.configurator-wrapper .flex-wrapper {flex-wrap: wrap; justify-content: center; padding: 1.5em;}
.configurator-wrapper .flex-wrapper img {padding-left: 0; margin-top: 1em;}

.logo {float:none; width:50%; margin:0 auto;}
.headerright {float:none; width:100%; margin:0 auto; text-align:center; font-size:14px;}
.graybtn {background:#404040; padding:4px 0; width:150px!important; text-align:center; color:#fff!important; margin-top:0px; font-size:13px;}
	
.col_four {text-align:inherit!important; margin:10px 0; flex-wrap: wrap;}	


.logo {float: none; width: 50%; margin: 0 auto 10px;}
.headerright {float: none;width: 100%;justify-content: center;flex-wrap: wrap;text-align: center;gap: 24px;margin-top: 0;}
.col_four {align-items: center;margin: 6px 0;}


	
	
.homeinventory {width:33.33%;}	
	
.tagline {position:relative; width:90%; color:#000; text-align:center; left:0; right: 0; top:0; margin:20px auto; text-shadow: none;}
	
.hovereffect a.info {padding-top:19%; font-size:18px;}
	
.tabs label {width: 30.9%; font-size: 16px;}
.tabs label.lrg {width: 100%;}

#map img {width:100%; height:auto; float: none;}
#locations-map{ width: 90%; padding:2%; margin: 0 auto; float:none; height: 100%; color:#fff;}
	
}

@media screen and (max-width: 780px)  {
h3 {font-size:18px;}
h4 {font-size:13px;}

.logo {float:none; width:70%; margin:0 auto;}
.isuzu_col img {height: 60px;}


.homeinventory {width:50%;}		
	
.pageleft {float:left; width:100%;}
.pageright {float:right; width:100%;}	
	
.models-wrapper a {width: calc(100% - 1em);}

.field, .field-half, .field-third, form h3 {width:100%;}
textarea {width: 97.5%;}

.maptext {float:none; width:100%;}
.map {float:none; width:100%;}

}


@media screen and (max-width: 625px)  {
.graybtn {margin:5px auto 0;}

.col_three {width:49%; margin-bottom:20px;}	
.col_two {width:100%;}	
.col_two_last {width:100%;}	
	
.mobile-margin-top{margin-top: 10px;}
	
.col_left {float:none; width:100%; border-right:none; border-bottom:1px solid #3e6aa6; padding-bottom:20px; margin-bottom:20px;}
.whitebtn {width:100%; font-size:13px;}
.col_right {float:none; width:100%;}
.foot_left {float:none; width:100%;}
.foot_right {float:none; width:100%; text-align:left;}
	
.tabs label {width: 47.55%; font-size: 15px;}
	
.tab a {width: calc(100% - 2em);}
	
#locations_desktop {display:none;}
#locations_mobile {display:block;}
#map {background:#fff;}
#locations-map {display:none;}
	
.headerright {flex-direction: column;align-items: center;gap: 18px;}
.isuzu_col {width: 100%;}
.isuzu_col img {height: 55px;}
	
}

@media screen and (max-width: 500px)  {
header {padding:10px 0 0;}	
.col_three {width:100%; margin-bottom:20px;}	
button {width:100%;}	
.foot_manu {width:100%; text-align:center;}		
header {padding: 6px 0;}
.logo {width: 85%;}

	
}

@media screen and (max-width: 375px)  {
.homeinventory {width:100%;}	
}