:root {
    --panel-bg: #e0e0e0;
    --panel-radius: 12px;
    --row-gap: 14px;
  }


img, table				        {border:0;}

a						        {font-weight:200; color:#40b47a; text-decoration:none;}
a:hover					        {text-decoration:underline;}

h1, h2, h3, h4                  {font-weight:700; }
h1						        {font: normal normal bold 48px/65px New-Hero, Sans-Serif; padding:0; margin:0 0 0.5em 0;}
h2                              {font: normal normal bold 34px/55px New-Hero, Sans-Serif; padding: 0;margin: 1em 0 0.8em 0; }
h3						        {font: normal normal bold 34px/55px New-Hero, Sans-Serif; padding:0; margin:1em 0 0.5em 0;}
h4						        {font: normal normal bold 34px/55px New-Hero, Sans-Serif;  padding:0; margin:1em 0 0.5em 0; font-weight:200;}

p						        {margin:0 0 1em 0; font: normal normal normal 16px/25px New-Hero, sans-serif; }

table, table tr, 
table tr td                     {font:200 1em/1.5em arial, verdana, sans-serif;}

html 					        {margin:0; padding:0;}
body 					        {margin:0; padding:0; color:#111; font:200 15px/1.5em New-Hero, sans-serif; background-color:#f0f0f0; -webkit-text-size-adjust:100%;}


/* Body layout */
#wrapper 				        {width:100%; margin:0 auto; text-align:left;}

#top                            {display:none;}

#uc {position:absolute; left: 10px; top: 10px;}
#uc img {height:50px;}
#ucMob {display:none;}

#head 					        {width:100%; height:70px; margin:0; padding:0; border-top:28px solid #434748; border-bottom:6px solid #60eca5; background-color:rgba(35,35,35,0.9); display:block; position:relative; z-index:100;}
#head .inner                    {width:1100px; height:70px; margin:0 auto; padding:0; display:block; position:relative;}
#nav-rwd, 
#head .inner #nav-rwd-open      {display:none;}

#head .inner #logo                  {position:absolute; left:-28px; top:0; width:334px; height:82px; z-index:100;}
#head .inner #logo img.plate        {height:110px; width:auto; border:0; position:absolute; z-index:10; top:0; left:0;}
#head .inner #logo img.logo         {height:60px; width:auto; border:0; position:absolute; z-index:20; top:15px; left:60px;}

#head .inner #nav					{height:76px; width:auto; margin:0; padding:0; display:block; float:right;}
#head .inner #nav ul                {list-style:none; margin:0; padding:0; width:auto; height:76px; display:block;}
#head .inner #nav ul li			    {float:left; padding:0; margin:0; display:block; height:70px; border-bottom:6px solid #60eca5;}
#head .inner #nav ul li a			{text-decoration:none; padding:0 15px; margin:10px 0 0 0; display:block; text-align:center; font:500 16px/50px "futura-pt", Arial, Verdana, Sans-serif; color:#fff; text-transform:uppercase; border-left:1px solid #424242;}
#head .inner #nav ul li.on          {border-color:#40b47a;}
#head .inner #nav ul li.first a     {padding-left:10px; border:0;}

.header                         { padding-block: 8px; }

/* Page layout */
.clearfix:after 			    { content:"."; display:block; height:0; clear:both; visibility:hidden; }
* html .clearfix 			    { height:1%; }

.bg-white                       { background-color: #FFF; }
.bg-light                       { background-color: #f9f9f9; }
.bg-accent                      { background-color: #EB730B; }
.bg-alabaster                   { background-color: #F6F6F6; }  /* Alabaster – a very soft off-white */
.bg-cultured                    { background-color: #F0F0F0; }  /* Cultured – a clean, muted white-gray */ 
.bg-gray                        { background-color: #F0F0F0 !important; }  /* Cultured – a clean, muted white-gray */
.bg-gunmetal                    { background-color: #434648; }  /* Gunmetal – deep bluish-gray */
.bg-mediumgray                  { background-color: #707070; }  /* Medium Gray – neutral mid-tone */
.bg-charcoal                    { background-color: #232323; }  /* Charcoal – very dark gray */
.bg-black                       { background-color: #000000; }  /* Black – pure black */

.inv-text                       { color: #FFF; }
.accent-text                    { color: #EB730B; }

.error-msg                      { background-color: red; color: white; }

.icon-instagram,
.icon-facebook,
.icon-right,
.icon-mail,
.icon-phone,
.icon-pin                       { display: inline-block; width: 20px; height: 20px; margin-right: 5px; background-position: center; background-repeat: no-repeat; background-size:contain; line-height: 1; vertical-align: middle;}
.icon-pin                       { background-image: url('/gfx/location-pin.png'); }
.icon-phone                     { background-image: url('/gfx/phone_outline.png'); }
.icon-mail                      { background-image: url('/gfx/mail.png'); }
.icon-right                     { height: 16px; background-image: url('/gfx/arrow-right-short.png'); }
.icon-facebook                  { background-image: url('/gfx/facebook@2x.png'); }
.icon-instagram                 { background-image: url('/gfx/bxl-instagram-alt.png'); }

.no-padding                     { padding: 0px !important; }
.no-top-padding                 { padding-top: 0px !important; }
.pb-40                          { padding-bottom: 40px !important;}
.pt-40                          { padding-top: 40px !important; }
.pt-30                          { padding-top: 30px;}

.openform-pnl                   { padding-bottom: 24px; border-bottom: 1px solid #eee; margin: 0 24px 24px 24px; }
.breadcrumbs                    { font-size:14px;}
.vehiclelist .section:has(.breadcrumbs){ background-color: white; }
.vehiclelist:has(.searchbar-pnl) .section.breadcrumbsarea { background-color: #F0F0F0; }



.share-pnl { text-align: center; }
.share-pnl .label { color: #EB730B; display: block; margin-bottom: 10px; font-size: 1.3rem; }
.share-pnl > div { margin-inline: auto; display: inline-block; }
.share-pnl a span { background-color: #eb730b !important; }

.contact-form.various-widths {display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; }
.contact-form.various-widths .cf_width50 { flex: 0 1 48%; width: 48%; display: inline-block;}
.contact-form.various-widths .cf_width100 { flex: 1 1 100%; }

.contact-form.various-widths input[type="radio"] {width: auto;}

.contact-form.various-widths table {
    background-color: #F5FBFF;
    border-radius: 5px 5px 5px 5px;
    padding: 5px 50px 0px 5px;
    border: 2px solid #1F72B9;
    margin: 0 0 1em 0;
}
.contact-form.various-widths table {
    background-color: transparent;
    border-radius: 5px 5px 5px 5px;
    padding: 5px 0;
    border: none;
}

.contact-form.various-widths table tr td:first-of-type {
    border: 2px solid #1f72b9;
    padding: 10px 10px 0px 10px;
    background-color: #f5fbff;
    border-radius: 5px;
}
.contact-form.various-widths input[type='submit'].btnSend { background-color: #2A353D; border:none;}

.acf-template .contact-form.various-widths input:not([type="submit"]), 
.acf-template .contact-form.various-widths textarea, 
div.contact-form input, div.contact-form textarea, div.contact-form select , .contact-form.various-widths table tr td:first-of-type , 
.contact-form.various-widths table tr:first-of-type td:first-of-type{
background-color: #ffffff;
border-color: #B1BAC0;
border-radius: 3px 3px 3px 3px;
}





.arrow {
  position: relative;  /* if you need to position the pseudo-element absolutely */
  padding-right: 24px; /* make room for the image */
}
.btn {
  color: #FFF;
  background-color: #EB730B;
  border: none;
  padding: 0.9em 1.5em 0.75em 1.5em;  /* base padding */
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
  margin: 5px;
}

/* Remove any absolute positioning — keep it inline */
.btn.arrow::after {
  background-image: url('/gfx/arrow-right-short.svg');
  display: inline-flex;       /* makes it take up space */
  width: 1em;                  /* or the exact w/h of your icon */
  height: 1em;
  margin-left: 0.5em;          /* spacing between text and arrow */
  vertical-align: middle;      /* align nicely with text */
  content: "";
  background-repeat: no-repeat;
  align-items: center;
  background-position: center;
  margin-top: -0.2em;
  
}
    /*.arrow::after {
        content: "";
        display: inline-block;
        width: 16px; 
        height: 16px;
        margin-left: 8px; 
        vertical-align: middle; 
        background-image: url('/gfx/arrow-right-short.svg');
        background-repeat: no-repeat;
        background-size: contain; 
    }*/
.section                        { text-align: center; }
.section > .constraints:empty   { display: none; } /* Hide empty sections */
.singlevehicle .section.border,  
.section.border                 { padding-block: clamp(4rem, 3vw, 6rem); }    
.section .constraints           { width: min(1202px, calc(100% - 56px)); margin-inline: auto; }
.section .constraints.text-box  { width: min(900px, calc(100% - 56px));}
.section .constraints.wider     { width: min(900px, calc(100% - 20px));}
.section.border > :is(h1, h2, h3, h4),  
.section.border .constraints > :is(h1, h2, h3, h4),
.section.border .textblock:first-child :is(h1, h2),
.section.border .constraints .textblock:first-child :is(h1, h2) { margin-top: 0; }
.startpage .section.no-padding-on-startpage {padding:0;}

/*.section.text-left { text-align: left; }*/

.gallery img { display: block; }
.gallery img,
.frame {max-width: 100%; width: 100%; }

.hide-on-desktop                { display: none; }
.hide-on-mobile                 { }
.price-phone > div              { flex: 1 1 50%; text-align: center; }
.d-flex                         { display: flex; } 
.flex-col                       { flex-direction: column; }
.flex-between                   { justify-content: space-between; }
.flex-around                    { justify-content: space-around; }
.flex-vcenter                   { align-items: center; }
.flex-top                       { align-items: start; }
.flex-wrap                      { flex-wrap: wrap; }
.sub-flex > div                 { display: flex; flex-wrap: wrap; }
.sub-flex-vcenter > div         { align-items: center; }
.sub-flex-hcenter > div         { justify-content: center; }
#logo                           { display: flex; margin-top: 3px; }


.content					    {width:100%; margin:0; padding:0; position:relative; z-index:0; background-position:top center; background-repeat:no-repeat; background-size:cover;}
.content .inner                 {margin:0 auto;  min-height:200px;}

.content .inner .content-breadcrumb				    {margin-bottom:15px; padding:0 15px; line-height:40px; background-color:#e3e3e3; float:left; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
.content .inner .content-breadcrumb a			    {color:#787878; font:200 16px/30px "futura-pt", Arial, Verdana, Sans-serif;}
.content .inner .content-breadcrumb a:hover	    	{color:#787878; text-decoration:none;}
.content .inner .content-breadcrumb a:first-child   {font-weight:700;}

.content .inner .content-menu               {width:auto; float:left; clear:left; list-style:none; padding:0; margin:0 0 1em 0;}
.content .inner .content-menu li            {width:auto; float:left; padding:0; margin:0 10px 10px 0;}
.content .inner .content-menu li a          {display:block; padding:0 15px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; background-color:#60eca5; color:#fff; font:400 16px/30px "futura-pt", Arial, Verdana, Sans-serif;}
.content .inner .content-menu li a:hover    {text-decoration:none;}
.content .inner .content-menu li.on a       {background-color:#40b47a;}

.content .inner #breadcrumbs                {font:700 1em/1.25em "Asap", Arial, Verdana, Sans-serif;}
.content .inner #breadcrumbs a              {font:700 1em/1.25em "Asap", Arial, Verdana, Sans-serif; color:#222;}
.content .inner #breadcrumbs a:last-child   {color:#0881a2;}

.content .inner .submenu    {text-align:center; width:100%; max-width:1000px; margin:-0.5em 0 1em 0;}
.content .inner .submenu a	{font:700 1.25em/2.25em New-Hero, Sans-serif; background-color:#222; color:#fff; text-decoration:none; padding:0 1em; margin:0 0.5em 1em 0.5em; display:inline-block; text-shadow:2px 2px rgba(0,0,0,0.2); text-align:center; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}

.content .submenu ul { list-style: none; }
.content .submenu li {
    width: auto;
    float: left;
    padding: 0;
    margin: 0 10px 10px 0;
}
.content .submenu li a {
    display: inline-block;
    padding: 0 15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #60eca5;
    color: #fff;
    font: 400 16px/30px New-Hero, Sans-serif;
}

.consumerinformation { display: flex; flex-direction: column; justify-content:center;}
.consumerinformation .icon { max-width: 50px; text-align: center;width: 100%;margin: auto; }
/* Footer layout */
#footer					{width:100%; clear:left; position:relative; background-color:#232323; border-bottom:1px solid #2c2c2c; color: white; padding-bottom: 6rem;}
#footer .footer-section           { display: flex; flex-wrap: wrap; }
#footer .section.partners  { padding-block: 4rem 2rem;}
#footer .section.bottom  { padding-top: 2rem;}
#footer .footer-section > div     { flex: 1 1 25%; text-align: left; }
#footer .footer-partners          { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; align-items: center; }
#footer .footer-partners h2       { margin: 0; }
#footer .footer-partners .images  { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } 
.footer-partners .images .image { margin: 10px;}
.footer-partners .images .image img { max-width: 150px;}
#footer a				{font-weight:normal; color:#f0f0f0; text-decoration:none;}
#footer a:hover         {text-decoration:underline;}

.footer-cols {
    overflow:hidden;
}

.footer-cols .footer-col {
    color: #f0f0f0;
    font:400 1.2em/1.25em "futura-pt", Arial, Verdana, Sans-serif;
    float:left;
    width:20%;
    box-sizing:border-box;
    text-align:center;
    height:202px;
    position: relative;
}
.footer-cols .first {
    border-right:1px solid #2c2c2c;
    line-height: 1.2;
    padding-top: 50px;
}
.footer-cols .second    {
    border-right:1px solid #2c2c2c;
}
.footer-cols .third     {
    border-right:1px solid #2c2c2c;
}
.footer-cols .fourth    {
    border-right:1px solid #2c2c2c;
}
.footer-cols .fifth     {
}
.footer-cols .footer-col img {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    margin:auto;
    max-width:90%;
}
	
.footer-cols .footer-col .socialMediaDiv { height: 100px; margin: 50px 0 0 0;}

.footer-cols .footer-col h3 { color: #fff; margin: 0 0 10px 0; }
.footer-cols .footer-col .socialMediaLogo {position:relative; display:inline;}
.Puffs:has(.puffitem.flow-leftright.label) {text-align: left; }
.puffitem {}

.puffitem.leftright { display: flex; flex-wrap: wrap; gap: max( 10px, 1vw); justify-content: space-between; margin-bottom: 3rem; }

.puffitem.leftright:last-child { margin-bottom: 0; }
.puffitem.leftright .image,
.puffitem.leftright .content { flex: 0 0 47%; }
    
.puffitem.leftright .image img { max-width: 100%; object-fit:cover; height: 100%; }
.puffitem.leftright.img-left .image { order: 0; height: 65vw; max-height: 420px;}
.puffitem.leftright.img-right .image { order: 1; height: 65vw; max-height: 420px;}


.puffitem.flow-leftright { justify-content: start; }
.puffitem.flow-leftright.label { display: inline-block; width: max(180px,calc(100% / 5)); padding-inline: 20px;}
.puffitem.flow-leftright.image { display: inline-block; padding-inline: 10px;}
.puffitem.flow-leftright.image .image img { max-width: 150px; }

.left-align-puffs > div { text-align: left; }
.center-align-puffs > div { text-align: center; }
.right-align-puffs > div { text-align: right; }

.topmenu .navbar			{ list-style: none; margin: 0; padding: 0; display: flex; font-size: 1.2em;}
.topmenu .navbar li         {}

.topmenu .navbar li a       { display: block; padding: 0.75rem 0.75rem; color: white; text-decoration: none; position: relative; text-decoration: none;}
.menu a::after              { content: ""; position: absolute; bottom: 0;  left: 0; width: 0; height: 2px; background-color: currentColor; transition: width 0.3s ease; }
.menu a:hover::after        { width: 100%; }
.topmenu .navbar li a:hover { /*background-color: #555;*/}

.header #responsive-menu-btn  {display:none; font-size: 2.5rem; }

.w-100              { width: 100%; }
.mw-200             { min-width: 100px; }
.text-left          { text-align: left; }
.get-intouch-form   { text-align: left; max-width: 594px; padding:24px;}
.get-intouch-form   div.contact-form { width: 100%;}


/* 
    FaqGrid
*/
.faqgrid {
    display: flex;
    gap: 1rem;
    flex-direction: row;
    margin-top: 40px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.faqgrid.cols-1 {    
    justify-content: center;
}

.faqgrid.cols-1 > div { flex: 1 1 100%; max-width: 600px; }
.faqgrid.cols-2 > div { flex: 0 1 48%; }

@media (max-width: 600px) {
    .faqgrid.cols-2 > div { flex: 0 1 100%; }
    .faqgrid.cols-2.vertical > div:nth-child(odd) { order: 1; }
    .faqgrid.cols-2.vertical > div:nth-child(even) { order: 2; }
}

/*
    DisplayGrid
*/

.displaygrid.frame.cols-3,
.displaygrid.frame {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 cols by default */
    margin-top: 40px;
}

.displaygrid.frame.cols-4 {    
    grid-template-columns: repeat(4, minmax(0, 1fr));     
}

.displaygriditem.frame { color: black; font-size: 1.1em; text-align: left; margin-bottom: 20px;}
.displaygrid.cols-4 .displaygriditem.frame { font-size: 0.9em; }
.displaygriditem .content { height: 100%; border: 1px solid #e1e1e1; background-color: #FFF; }
.displaygriditem a { cursor: pointer; text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%;}
.displaygriditem .loan { border: 1px solid #ccc; text-align: right; padding-right:5px; }
.displaygriditem .brand,
.displaygriditem .title,
.displaygriditem .info,
.displaygriditem .separator, 
.displaygriditem .price { padding-inline: 1em; } 
.displaygriditem .price { padding-bottom: 1em; } 
.displaygriditem .brand { padding-top: 11px; font-size: 1em; }
.displaygriditem .image img { width: 100%; max-width: 100%; aspect-ratio: 2/1.5; display: block; }
.displaygriditem .image { position: relative; }
.displaygriditem .image .notification { position: absolute; top: 10px; right: 10px;}
.displaygriditem .image .notification .item { border-radius: 5px; background-color: #EB730B; color: white; padding: 2px 7px; top: 10px; right: 10px;}
.displaygriditem .title { font-size: 1.2em; font-weight: 600; padding-top: 10px; min-height: 4.2rem;}
.displaygriditem .info { padding-top: 10px; margin-top: auto; margin-bottom:0;}
.displaygriditem .price { padding-top: 10px; font-size: 1.2em; font-weight: 600; margin-top: 0; margin-bottom: 0; display: flex; gap: 2rem;}
.displaygriditem .price .ex-vat-price { color: #888; font-size: 0.8em; font-weight: 100; margin-top: 0; margin-bottom: 0; min-height: 22px;}
.displaygriditem .price .previous-price { color: #888; text-decoration: line-through; }
.displaygriditem .separator { padding-top: 1em;}
.displaygriditem .separator div { height:1px; background-color: #e1e1e1; }
.displaygriditem .info { color: #999999; display: flex; justify-content: space-between; align-items: center; }

.displaygriditem .title {
    color: #4d4d4d; 
    font-size: 1.1em;
    padding-top: 1.2em;
    padding-bottom: 0.7em;
}

.displaygriditem .reserved { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.4); z-index:3;display: flex; justify-content: center; align-items: center; }
.displaygriditem .reserved .label { color: white; font-size: 30px;}


.reserved-pnl { background-color: #eb490b; padding: 1rem 2rem;}
.reserved-pnl .label { color: white; margin-bottom: 0; font-size: 20px; }


.warranty-service-text tr td { border: 1px solid #636363; }


@media (max-width: 900px) {
  .displaygrid.frame  { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 2 cols */
}

@media (max-width: 600px) {
  .displaygrid.frame { grid-template-columns: 1fr; } /* 1 col */
  .displaygriditem .title { height: unset; }
}
.displaygridsort { margin-bottom: clamp(10px, 4vw, 30px); }
.displaygridsort .bar { display: flex; flex-wrap: wrap; justify-content: space-around; border-block: 1px solid black; gap:1px; border-inline: 1px solid #fff;}
.displaygridsort .bar .label { flex: 1 1 100%; font-size: 18px; margin-inline: -1px; background-color: #fff; padding-bottom:10px;}
.displaygridsort .bar .option { font-size: 18px; padding: 10px; flex: 1; display:flex; align-items: center; }
.displaygridsort .bar .option:last-child {border-right: none;}
.displaygridsort .bar .option label { font-size: 0.7em;text-transform: uppercase;font-weight: 600;color: #666; }
.displaygridsort .bar .option select { flex: 1; margin-left: 10px;}

.displaygridsort .bar .option select { font-size: 18px;min-height: 40px; padding: 10px 6px 10px 10px; background-color: transparent; border: 1px solid black;}

.displaygridsort.simple .bar { border: none; }
.displaygridsort.simple  .bar .option select { width: 323px; }
.displaygridsort.simple { display:flex; justify-content: center; }


.singlevehicle .constraints.grid { display:grid; grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); grid-template-rows: auto auto; }
.singlevehicle .col1 { grid-column: 1; }
.singlevehicle .col2 { grid-column: 2; }
.singlevehicle .row1 { grid-row: 1; }
.singlevehicle .row2 { grid-row: 2; }
.flex-col { display: flex; flex-direction: column; }


@media (max-width: 1000px) { 
    .header #responsive-menu-btn  {display:block;}
    .header .topmenu { display: none; } 
}

@media (max-width: 700px) {
    .singlevehicle .constraints.grid { grid-template-columns: 1fr; } /* 1 col */  
    .singlevehicle .col2 { grid-column: 1; }

    .pricycalculator.frame { margin-top: 40px; padding:0; max-width:unset; min-width: 0px;}    
    .openform-pnl { padding-top: 24px; }
    .hide-on-desktop                { display: block; }
    .hide-on-mobile                { display: none; }
    .get-intouch-form { padding: 24px 0; }
    #footer .footer-partners h2 { margin-bottom: 20px; }
    #footer .footer-partners > * { flex: 1 1 100% !important; }
}

.item-container { display: flex; justify-content: space-between; }
.price-container { display: flex; flex-direction:column; align-items: start;}
.price-container .prices .prev { font-size: 1.3em; text-decoration: line-through; }
.price-container .prices .ex-vat {color: #777;}
.price-container .prices .min-payment {margin-top: 10px;font-size: 1.2em;}



.phone-container .layout { 
    margin: 0;
    display: flex;
    justify-content: center;    
    color: inherit;
    flex-wrap: wrap;
}
    .phone-container .layout > div { flex: 1 1 100%; }

.phone-container .layout .call-to-action {
    text-align: center;
}
.phone-container .layout .phone-number {
    text-align: center;
    line-height: 40px;
    font-size: 26px;
    font-weight: 700;
}
.phone-container .layout .icon { 
    display: inline;
    
}
.phone-container .layout .icon .circle 
 {
        display: inline-block;

    margin: 7px 0 0 7px;
    
    border: 1px solid #e9e9e9;
    border-radius: 50%;
    background: #f6f6f6;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-family: Fontawesome;
    font-size: 20px;
    color: #666;
}

/* When changing this, be sure to change .phone-container in mediaquery 550px */
.phone-container.small { margin-top: 10px;}
.phone-container.small .layout { align-items: center;}
.phone-container.small .layout .icon {margin: auto;}    
.phone-container.small .layout .icon .circle { width: 18px;height: 18px;line-height: 18px; font-size: 14px;margin-right: 3px;padding: 4px;    }    
.phone-container.small .layout .call-to-action{ grid-row: 1/2;grid-column:2/3; text-align: left;}
.phone-container.small .layout .phone-number{ grid-row: 2/3; grid-column:1/3; }

.gallery {
  max-width: 100%;
  margin: 0 auto;
}

.gallery .f-carousel__slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
    /* Hide all but the first thumbnail on page */
    /*.fb-hidden { display: none; }
    .gallery img.hidden-thumb { display: none; }
        */
.gallery a { width: 100%; }

.vehicle-page-link { color: #888; font-size: 1.8em; font-weight: 600;}

.vehicleinfo { text-align: left; /*padding-right: 10px;*/ box-sizing: border-box; margin-top: 18px;}
.vehicleinfo .head { border-bottom: 1px solid #777; }
    .vehicleinfo .head .title h1 { font-size: clamp(24px, 4vw, 33px); line-height:1.3; margin:0; }
    .vehicleinfo .head .subtitle h2 { font-size: clamp(18px, 3.5vw, 22px); line-height:1.3; font-weight: 200; margin: 10px 0 0 0; }
    .vehicleinfo .infobar {margin-top: 23px; padding-bottom: 15px; gap: 7px; }
    .vehicleinfo .infobar > div {margin-inline: 2px; }
    .vehicleinfo .body {margin-top: 20px; }
    
    .vehicleinfo .tabs {margin-top: 20px; }
    .vehicleinfo .description { margin-top: 1rem; }
    .vehicleinfo .description h2 { margin-bottom: 0; }
    .vehicleinfo .description .content { /*white-space: pre-line; */}

.vehicleinfo input[type="radio"] {
    display: none;
  }

  /* Tab labels */
  .vehicleinfo .tab-label {
    display: inline-block;
    padding: 8px 16px;
    background: #ccc;
    cursor: pointer;
    margin-right: 4px;
    border-radius: 4px 4px 0 0;
  }

  /* Content panels */
  .vehicleinfo .tab-content {
    display: none;
    padding: 16px;
    border: 1px solid #ccc;
    border-top: none;
    background: #f9f9f9;
  }

  /* Show panel when radio is checked */
  .vehicleinfo #tab1:checked ~ .content1 {
    display: block;
  }
  .vehicleinfo #tab2:checked ~ .content2 {
    display: block;
  }

  
  .vehicleinfo #tab1:checked + .tab-label,
  .vehicleinfo #tab2:checked + .tab-label {
    background: #EB730B;
    border-bottom: 1px solid #fff;
    color: #fff;
  }

    .dist-top-8 {margin-top:8px;}
    
    .features {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 8px 16px; /* row gap / column gap */
    }

    .feature-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        line-height: 1.4;
    }

    .feature-item i {
        color: orange;
        font-size: 0.9em;
           line-height: 1.8;
    }


.showvehicle { position: relative; }
.showvehicle .notification { position: absolute; top: 10px; right: 10px;}
.showvehicle .notification .item { border-radius: 5px; background-color: #EB730B; color: white; padding: 2px 7px; top: 10px; right: 10px; transform: rotateZ(16deg) scale(1.5);}


    

/* Optional: tighter layout on very small screens */
@media (max-width: 500px) {
    .features {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

.vehicle-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 20px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.spec-block {
  border-top: 2px solid orange;
  padding-top: 8px;
}

.spec-title {
  font-weight: bold;
  margin-bottom: 8px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 6px;
}

.spec-title i {
  color: #999;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.spec-row span {
  color: #666;
}

.spec-row strong {
  font-weight: bold;
}

/* Optional: make the font a bit bigger on mobile */
@media (max-width: 500px) {
  .vehicle-specs {
    font-size: 16px;
  }
  .vehicleinfo .tab-content { padding-inline:4px; }
  .pricycalculator { padding: 4px;}
  /*.section .constraints { margin-inline: 0; }*/
}

  
.pricycalculator { box-sizing: border-box; max-width: 420px; min-width: 290px; margin: 0 auto; font-family: New-Hero, sans-serif; padding: 0 24px 24px 24px;  }
.pricycalculator .wrap { margin-bottom: 15px; }
.pricycalculator .panel { background: #f4f4f4; border-radius: var(--panel-radius); padding: 18px 16px; }
.pricycalculator .row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-bottom: 8px; }
.pricycalculator .wrap .label { color:#222; font-size:16px; text-align: left;}
.pricycalculator .val { font-weight:600; }
.pricycalculator .slider { margin: 4px 0 16px; }
.pricycalculator input[type=range] { width: 100%; accent-color: #EB730B; }
.pricycalculator .hr { height: 1px; background: #c9c9c9; margin: 10px 0 14px; border:0; }
.pricycalculator .summary .row { margin: 6px 0; }
.pricycalculator .label { color:#444; }
.pricycalculator .top { }
.pricycalculator .top .label { font-weight: 600; }

.pricycalculator .top input { width: 120px; padding: 3px 8px; border-radius:8px; border:none; text-align:right; font-size:20px; background-color: transparent; }
.pricycalculator .note { font-size:14px; color:#666; margin-top:8px; }

.price-container .incprice,
.pricycalculator .top .price { font-size: 38px; font-weight: 600; text-align: left; width:100%; display: inline-block; line-height:1;}


.searchbar-pnl .action-area {display:flex;justify-content:space-between; flex-wrap: wrap;margin-top: 20px;}

.displaygridsearchresult { text-align: left; width: auto; max-width: auto; }


.accordion-item.more-options .accordion-trigger {margin-top: 20px;}
.accordion-item.more-options .options {margin-top: 0px;}
.accordion-item.more-options .options .option {border-top: none;}
.accordion-item.more-options .circle { width: auto; border-radius: 2px; height: auto; padding: 10px 15px; background-color: transparent;}
/*.accordion-item.more-options .circle .icon { color: #EB730B; padding: 0 5px; }*/
.accordion-item.more-options .circle .icon { color: #777; font-size: 16px; font-family: New-Hero, sans-serif; }

.accordion-item.faq { }
.accordion-item.faq .accordion-trigger { justify-content: start; align-items: center; border: 1px solid #459bac; transition: background 1s ease; border-radius: 3px; padding-block: 5px; }
.accordion-item.faq.open .accordion-trigger { background-color: #459bac; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }
.accordion-item.faq .accordion-trigger .circle { border: none; background-color: transparent;}
.accordion-item.faq .accordion-trigger .headline p { margin: 0px;}
.accordion-item.faq .accordion-panel { text-align: left; padding-inline: 2rem; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
.accordion-item.faq .accordion-panel .accordion-panel-inner { padding-top: 1rem;  }
.accordion-item.faq.open .accordion-panel { border: 1px solid #459bac;  }
 
.accordion-item.faq .headline { font-size: 1.3rem; line-height: 1.4; }

.f-button.is-next,
.f-button.is-prev { border-radius: 50px; background-color: rgba(255,255,255,0.7); }
.f-button.is-next:hover:not([disabled]),
.f-button.is-prev:hover:not([disabled]) {background-color: white; }

.puffitem.flow-leftright.label p {
    display: inline-block;
    border-bottom: 1px solid #dadada;
    font-weight: 600;
    width: 100%;
    padding-bottom: 12px;
    margin-bottom: 13px;
}
.puffitem.flow-leftright.label p::after {
    background-image: url('/gfx/arrow-right-short.svg');
    display: inline-flex;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    vertical-align: middle;
    content: "";
    background-repeat: no-repeat;
    align-items: center;
    background-position: center;
    margin-top: -0.2em;
    filter: invert(1);
    position: absolute;
    right: 0;
    transform: translateY(50%);    
}


a:hover {
    text-decoration: none;
}

/*
.bg-white {
background-color:transparent;
}
*/

.header {
    padding-block: 20px;
}

.content .submenu li a{
padding:10px 15px;
border-radius:0px;
background-color:#EB730B;
}

.submenu.fullmenu{
display:none;
}

a {
    color: #EB730B;
}

div.contact-form input[type='submit'] {
background-color:#EB730B;
 font-family: New-Hero, sans-serif;
 border: none;
}

div.contact-form {
    margin: 1em 0 4em 0;
}

div.contact-form p{
 font-family: New-Hero, sans-serif;
}




.btn {
    font-weight: 600;
}

.puff-list .puffitem span {
    font-family: New-Hero, sans-serif;
}

.puff-list {
    padding: 2em 0;
}

.puff-list .puffitem .link {
    margin-top: 20px;
}







.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple, .msd .select2-container--default .select2-selection--multiple {
    background-color: transparent;
    border: 1px solid black;
}


.options .option .content select {
    background-color: transparent;
    padding-inline: 5px;
}

.options .option .content select:not(.w-100) { width: 45%;}

.options .option {
    padding: 20px 20px !important;
}

.search-input {
    border: 1px solid #000000 !important;
    padding: 1rem 2.5rem 1rem 1rem !important;
}

.options .option .content select {
    font-size: 16px !important;
    
}

.displaygridsort .options .option .content select { padding-inline: 5px; }


.displaygridsort select  {
  appearance: none;          /* Remove default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('data:image/svg+xml;utf8,<svg fill="%23000" height="28" viewBox="0 0 24 24" width="28" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 2px center;
  background-color: white;
  padding-right: 30px;       /* Make space for the arrow */
  border: 1px solid #ccc;
  border-radius: 4px;
}


.btn {
    font-family: New-Hero, sans-serif;
padding: 0.9em 1.5em;
}







.displaygriditem .title, .info {
font-size: 0.9em;
    line-height: 1.4;
min-height:auto;
}
.displaygriditem .title {
    font-size: 1.1em;
}

.brand{
font-size: 0.7em;
}

.displaygriditem .price {
    
    font-size: unset;
}


._head { height: 80vh; margin-top: 67px; }
._head ._content { position: relative; height: 100%; }
._head ._content img { width: 100%; height: 100%; object-fit:cover; display:block; min-height: 350px; }
._head ._content ._txt {z-index: 3; position:relative; display:flex; justify-content: center; align-items: center; flex-direction: column; padding: 20px; width: 100%; height: 100%; box-sizing:border-box; }
._head ._content ._txt ._top { height: auto; font-size: clamp(34px, 4vw, 66px); line-height: 1.4; color: white; font-weight: 600; text-align: center; padding-bottom: 4rem; }
._head ._content ._txt a { }
._head ._content ._background { inset: 0; position: absolute; }




#footer a, #footer p {
    line-height: 2rem;
}

.displaygridsort .sortddl { border-radius: 0; }


.contact-layout { display: flex; gap:10px; }
.contact-layout > div { flex: 1 1 50%;max-width: 100%; }
.contact-content img { max-width: 100%;object-fit: cover; }                 
.contact-layout iframe { max-width: 100%; }


@media only screen and (max-width: 1570px) {
    #head .inner {float:right;}
}

@media only screen and (max-width: 1340px) {
    
}

    @media only screen and (max-width: 1200px) {
        #uc img { height: 40px; }
        .displaygrid.frame.cols-3,
        .displaygrid.frame { grid-template-columns: repeat(2, minmax(0, 1fr)); /* 3 cols by default */ }
        .displaygrid.frame.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); /* 3 cols by default */ }
    }

    @media only screen and (max-width: 1100px) {
        #wrapper { width: 100%; }

        #top { display: block; text-align: center; line-height: 2.4em; background-color: #434748; color: #ffffff; font-size: 2em; }
            #top span { background: url(/gfx/footer-icon-phone.png) center left no-repeat; padding-left: 30px; }
            #top a { text-decoration: none; color: #363636; }

        #uc { height: 50px; left: 277px; top: 15px; z-index: 2; }

        #head { border-top: 0; }
            #head .inner { width: 100%; background-color: #383838; }

                #head .inner #nav-rwd-open { display: inline-block; position: absolute; top: 10px; right: 10px; height: 20px; font: 200 1em/20px "futura-pt", Arial, Verdana, Sans-serif; padding: 15px 20px; border: 1px solid #ccc; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; cursor: pointer; }
                    #head .inner #nav-rwd-open img { float: right; height: 20px; width: auto; display: block; }
                    #head .inner #nav-rwd-open span { float: left; height: 20px; line-height: 20px; padding-right: 17px; font-size: 1.25em; color: #fff; }
                #head .inner #nav-rwd-open { -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; }
                    #head .inner #nav-rwd-open:hover { background-color: rgba(0,0,0,0.1); }

                #head .inner #logo { position: absolute; left: -50px; top: 0; width: 499px; height: 131px; z-index: 100; }
                    #head .inner #logo img.plate { }
                    #head .inner #logo img.logo { top: 15px; height: 55px; }

                #head .inner #nav { display: none; }

        .content { width: 100%; }
            .content .inner { min-height: 300px; max-width: 100%; }

        .responsive-menu-mask { z-index: 200; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
        .responsive-menu-mask-body { overflow: hidden; }

        #nav-rwd { z-index: 300; width: 90%; max-width: 290px; min-height: 100%; height: 100%; padding: 0; display: block; top: 0; right: -90%; position: fixed; background-color: rgba(255,255,255,0.9); /*background-color:#f5f5f5;*/ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; overflow: auto; overflow-x: hidden; }
            #nav-rwd.on { right: 0; box-shadow: rgba(0,0,0,0.2) -5px 0 10px; }

        #nav-rwd-header { display: block; text-align: left; font: 200 1em/4.8em "futura-pt", Arial, Verdana, Sans-serif; height: 4.8em; background-color: rgba(35,35,35,0.9); color: #fff; border-bottom: 6px solid #60eca5; }
            #nav-rwd-header span { font-size: 2em; padding-left: 0.5em; color: #fff; }
            #nav-rwd-header a { display: inline-block; height: 2em; line-height: 26px; padding: 15px; cursor: pointer; float: right; margin: 0.2em 0.2em 0 0; }
                #nav-rwd-header a img { float: right; height: 2em; width: auto; display: block; }

        #nav-rwd ul { list-style: none; margin: 0; padding: 0; width: 100%; height: auto; overflow: auto; display: block; border-bottom: 3px solid #ccc !important; }
            #nav-rwd ul li { float: left; padding: 0; margin: 0; display: block; height: auto; width: 100%; clear: left; }
                #nav-rwd ul li a { text-decoration: none; padding: 0 0 0 1em; margin: 0; display: block; border-bottom: 1px solid #ccc; font: 200 14px/3em "futura-pt", Arial, Verdana, Sans-serif; background-color: #fff; color: #363636; }
                #nav-rwd ul li.on a { background-color: #eee; }

        #footer .section.bottom .footer-section { flex-wrap: wrap; }
        #footer .section.bottom .footer-section > div { flex: 1 1 50%; padding-bottom: 2rem;}
    }


    @media only screen and (max-width: 980px) {
        .footer-cols .footer-col { color: #f0f0f0; font: 400 1.2em/1.25em "futura-pt", Arial, Verdana, Sans-serif; float: left; width: 33.3%; box-sizing: border-box; text-align: center; height: 202px; position: relative; }
        .footer-cols .first { border-right: 1px solid #2c2c2c; }
        .footer-cols .second { border-right: 1px solid #2c2c2c; }
        .footer-cols .third { border-right: 1px solid #2c2c2c; }
        .footer-cols .fourth { margin-left: 15.15%; border-right: 1px solid #2c2c2c; }
        .footer-cols .fifth { }
    }
/*
    @media only screen and (max-width: 860px) {
        .content { margin: 0; padding: 0; width: 100%; }
            .content .inner { width: 96%; padding: 2% 0; }
                .content .inner img { max-width: 100%; height: auto; display: block; }
        .puffcontent .inner { max-height: none; height: auto; }

        #footer .left.first { font-size: 1em; }
        .header #responsive-menu-btn  {display:block;}
        .topmenu {display: none;}
    }
*/
    @media only screen and (max-width: 800px) {
        .puffitem.leftright .content,
        .puffitem.leftright .image { flex: 0 0 100%; }
        .puffitem.leftright .image { order: 0; }
        .puffitem.leftright .content { order: 1; }

        .column-at-800 > div { flex: 1 1 100% !important; }
        .contact-layout { flex-wrap: wrap; }
        .contact-layout > div { flex: 1 1 100%; }

    }

    @media only screen and (max-width: 600px) {
        /*body    {font-size:12px;}*/
        h1 { font-size: 2em; line-height: 1.4;}
        h2 { font-size: 1.8em; line-height: 1.2;}
        h3 { font-size: 1.5em; line-height: 1.2;}
        h4 { font-size: 1.2em; line-height: 1.2;}
        #uc {display:none; }
        #ucMob {display:inline;}
        #ucMob img{height:40px;}

        #head { border-bottom: 60px solid #303030; background-color: #fff; }

            #head .inner { background-color: #434748;  }

                #head .inner #nav-rwd-open { padding: 0; height: auto; width: 100%; text-align: center; position: static; border: 0; }
                    #head .inner #nav-rwd-open img { float: none; display: inline; vertical-align: top; padding-top: 5px; }
                    #head .inner #nav-rwd-open span { float: none; display: inline-block; color: #fff; line-height: 24px; font-size: 1.75em; }
                    #head .inner #nav-rwd-open:hover { background: none; }

                #head .inner .logoDiv { position: static; height: 86px; display: flex; justify-content:space-between; align-items:center; width: 100%; padding: 17px 10px; margin: 0; text-align: center; box-sizing:border-box;}
                #head .inner #logo {left:0; height:auto; width:auto; position:static; display:inline-block;}
                #head .inner #logo img.plate { display: none; }
                    #head .inner #logo img.logo { position: static; height: 40px; width: auto; margin: 0px 0 0 0; top:0;}
        #uc { left: 166px; }
        
        .displaygrid.frame.cols-3,
        .displaygrid.frame { grid-template-columns: repeat(1, minmax(0, 1fr)); /* 3 cols by default */ }         
        .displaygrid.frame.cols-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); /* 3 cols by default */ }

        
        ._head ._content ._txt ._top h1 { line-height: 1.4; }
        ._head ._content ._txt ._top p { font-size: 14px; }


        #footer .inner { height: auto; }

        .footer-cols .footer-col { float: none; width: auto; max-width: 300px; margin: auto; border: none; }
        .footer-cols .first,
        .footer-cols .second,
        .footer-cols .third,
        .footer-cols .fourth { border-bottom: 1px solid #2c2c2c; }
        
        
        #footer .section.bottom .footer-section > div { flex: 1 1 100%; padding-bottom: 2rem;}
    }





@media (max-width: 550px) {    
    .item-container { flex-wrap: wrap; }
    .item-container > * { flex: 1 1 100%; }
    .price-phone > div              { flex: 1 1 100%; }
    
    /* When changing this, be sure to change .phone-container.small */
    .phone-container { margin-top: 10px;}
    .phone-container .layout { justify-items: start; grid-template-columns: 33px auto; align-items: center;}
    .phone-container .layout .icon {margin: auto; grid-row: 1/2;grid-column:1/2;  width: 100%;}    
    .phone-container .layout .icon .circle { width: 18px;height: 18px;line-height: 18px; font-size: 14px;margin: 0px;padding: 4px;    }    
    .phone-container .layout .call-to-action{ grid-row: 1/2;grid-column:2/3; text-align: left;}
    .phone-container .layout .phone-number{ grid-row: 2/3; grid-column:1/3; }
    
    .section .constraints           { width: min(1202px, calc(100% - 20px)); margin-inline: auto; }
    .section .constraints.text-box  { width: min(900px, calc(100% - 20px));}
    .section .constraints.wider     { width: min(900px, calc(100% - 20px));}
    
    .showvehicle .notification .item { transform: rotateZ(16deg) scale(1.3) translateY(-10px); }

}

@media (max-width: 500px) {
    .searchbar-pnl .action-area {justify-content:center; flex-wrap: wrap;}
    .searchbar-pnl .action-area > * { flex: 1 1 100%; }

    .displaygridsort .bar .option { flex-wrap: wrap; }
    .displaygridsort.simple  .bar .option label,
    .displaygridsort.simple  .bar .option select { flex: 1 1 100%; width: 90%; }
    .displaygriditem .title, .info { font-size: 1em; }
}

@media (max-width: 400px)
{
    .contact-form.various-widths .cf_width50 { flex: 0 1 100%; width: 100%; display: inline-block; }
}