:root {
    --rood: #EB1B23;
    --grijs: #f1f1f1;
    --wit: #fff;
    --zwart: #000;
}

body{margin:0px;}
*{margin: 0;padding: 0;  box-sizing: border-box;}
html, body{overflow-x: hidden;}
/*aanmelden*/
.aanmelden.container {padding: 60px 0px 100px 0px;}
.aanmelden.php footer{margin-top:20px;}
.aanmelden form{max-width: 400px;}
.aanmelden form input{margin-bottom:20px;}
.aanmelden form button{margin-top:0px; width: fit-content;}

/*font*/
a{color:var(--zwart); text-decoration:none;}
*{font-family:roboto;}
h1{font-size:40px;}
h2{font-size:24px;margin-bottom:20px;font-weight: 400;}
h3{font-size:22px;}
p a{text-decoration:underline;}
p a:hover{text-decoration:none;}
p.tagline{line-height:1.4;font-style:italic;margin-bottom:20px;font-size:20px;color:#333;}

.normalwidth.content p{margin-bottom:20px;line-height:1.45;}
.normalwidth.content h3{margin-bottom:10px;}
/*verhuiswagen hure */
.mercedes-v-klasse-huren .top{margin-bottom:0px;}
.verhuiswagen-huren .top{margin-bottom:0px;}
.verhuiswagen-huren .secondtop, .mercedes-v-klasse-huren .secondtop{margin-bottom:40px;}
 .secondtop p{margin-bottom:0px;}
/*button*/
button, input[type="submit"]{cursor:pointer;border:0px;font-size: 14px;transition:background-color 0.3s ease;padding:5px 10px;}

/*witte knop*/
input[type="submit"], button{background:var(--wit);color:var(--zwart);margin-top:20px;}
input[type="submit"]:hover, button:hover{background:var(--zwart) !important;color:var(--wit);}

/*rode knop*/
button[type="submit"], button[type="button"]{background-color:var(--rood);color:var(--wit);}
button[type="submit"]:hover, button[type="button"]:hover{background-color:var(--zwart);}

/*breadcrumb*/
#breadcrumbList{display:flex;gap:10px;padding:0px;}
#breadcrumbList li{list-style: none !important;display:flex;align-items:center;gap:5px;}
#breadcrumbList li a, #breadcrumbList li span{font-size:14px;text-transform:capitalize;}

/*filter*/
#versnellingsbak, #zitplaatsen, #type{padding: 5px 10px;border:0px;font-size: 14px;}
#filter{background:var(--zwart) !important;border: 0px;color: var(--wit) !important;padding:5px 10px;font-size: 14px;margin-top:0px;}
.custom-select{width: fit-content;border: 1px solid var(--grijs);padding:20px;margin:40px 0px;display:flex;flex-wrap:wrap;column-gap:20px;justify-content:center;align-items:center;}
.custom-select button[type="button"]{margin-top:0px;}
.filter-form form{justify-content: center;}

/*menu*/
header .subheader{padding: 10px 30px !important;}
#menu{order:2;}
#menu ul li:hover a{color:var(--rood); font-weight: 600;}
.submenu ul li:hover a{color:var(--rood); font-weight: 600;}
.subheader{background-color: var(--grijs);padding:10px 0px;}
.subheader .container p{font-size:14px;}
.subheader .submenu ul {text-align: center;font-size: 14px;display: flex;justify-content: space-between; align-items: center;}
header .container {display: flex;justify-content: space-between;align-items: center;max-width: 1280px;margin: 0 auto;padding: 15px 0px 15px 0px !important;margin-top:0px !important;flex-wrap: wrap;row-gap: 15px; column-gap:5px;}
header .subheader .container{padding: 0px !important;}
nav ul, .submenu ul {display: flex; gap: 36px;}
nav ul li, .submenu ul li {list-style: none !important;}
nav ul li a, .submenu ul li a{color:var(--zwart); text-decoration:  none;}

/* CSS-stijlen voor het mobiele menu */
.mobile-menu-button {display: none;background:transparent !important;border:0px;cursor: pointer;}
.mobile-menu-button i{margin:0px !important; color:var(--zwart);}
.mobile-menu-button:hover{background:transparent !important;}

/* Toon het mobiele menu */
nav ul.active {display: block;}

/*home*/
 path{fill:var(--wit);}
.bestelwagen path{stroke:var(--wit);}
.home h3{margin-bottom:20px;}
.normalwidth{max-width: 1280px; margin:auto;}
.banner{margin: 0px auto;display: grid; grid-template-columns: auto auto;align-items:center;; background:url(/images/banner.png);height: calc(100vh - 161px); background-repeat: no-repeat;background-size: cover;background-position: center;}
.aanbod {display: grid; grid-template-columns: auto auto auto; gap:20px;margin: auto;}
.aanbod .prijslijst a {background-color: var(--rood) !important;}
.aanbod div a{transition: background-color 0.3s ease;background-color: #666 !important; height: fit-content; width: fit-content; padding:20px;height: 150px;width: 150px;display: grid; justify-content: center; align-items: end;}
.aanbod svg{margin:auto;}
.aanbod p{margin:0px;}
.aanbod div:hover a{background-color:var(--wit) !important;}
.aanbod div:hover p{color:var(--zwart);}
.aanbod div p{color:var(--wit);}
.aanbod  .bestelwagen:hover path{stroke:var(--zwart) !important;}
.aanbod div:hover path { fill: var(--zwart);}

.huurmodule{background:var(--rood);display: grid; justify-content: center;align-items: center;width: 400px; padding: 30px 30px 20px;margin: auto;}
.huurmodule h2, .huurmodule label{color:var(--wit) !important; margin:0px !important;}
.huurmodule h2{margin-bottom:10px !important;}

.container.twocolumns{display: grid; grid-template-columns: 50% 50%;align-items: center;}
.container{padding:0px 0px 100px 0px;}
.home .container:first-of-type{padding-top:100px;}

img{max-width: 100%;height: auto;}
.column.two{padding-right: 270px;}

/*kies uw voertuig*/
.beschikbareautos .voertuig h3{margin-top:10px;}
.beschikbareautos .voertuig h4{font-style: italic;font-weight: 400;font-size:16px;margin-bottom:10px;}
.beschikbare-autos .top, .beschikbareautos{margin-bottom:0px;}
.beschikbare-autos .secondtop{margin-bottom:40px;}
.beschikbareautos .voertuig{display: flex !important;flex-direction: column;justify-content: space-between;}
.beschikbare-autos .verhuurinformatie{display: grid;grid-template-columns: auto auto;}
.beschikbare-autos .verhuurinformatie{background:var(--zwart); color:var(--wit);padding:30px;margin-bottom:20px;}
.verhuurinformatie input[type="submit"]{background-color:var(--rood); color:var(--wit);}
.verhuurinformatie input[type="submit"]:hover{background-color:var(--wit) !important; color:var(--zwart) !important;}
.verhuurinformatie .verhuurprijs, .verhuurinformatie .verhuurdetail, .verhuurinformatie .borg{border-top:1px solid var(--wit);margin-top:20px; padding-top:20px;}
p.alert{margin-top:20px;padding:10px;background:#fff;display:block;color:var(--rood);}

.datumselect{grid-template-columns: 50% 50%; gap:10px;}
.datumselect .form-group{display: grid;}
.datumselect .form-group input{height: 32px;}
.datumselect .form-group input[type="submit"]{width: fit-content;padding-left:10px; padding-right: 10px;}
.filterautos form{ display: flex; gap:10px;}
.filterautos.container{padding-bottom:0px;}
.filterautos form label{display: flex; justify-content: center; align-items: center;}

/*bevestiging*/
.gegevens{display: grid; grid-template-areas: "a b" "c d" "e e" "f g" "h h" "i i"; gap:10px;}
.gegevens input{height: 35px !important;}
.gegevens textarea{height: 100px;font-size: 14px;}
.gegevens input, .gegevens textarea{padding-left:5px;border:0px;}
.gegevens textarea{padding-top:5px;}
.gegevens input[name="contactperson"]{grid-area: a;}
.gegevens input[name="geboortedatum"]{grid-area: b;}
.gegevens input[name="email"]{grid-area: c;}
.gegevens input[name="telefoon"]{grid-area: d;}
.gegevens input[name="straat"]{grid-area: e;}
.gegevens input[name="postcode"]{grid-area: f;}
.gegevens input[name="stad"]{grid-area: g;}
.gegevens textarea[name="nota"]{grid-area: h;}
.gegevens input[type="submit"]{grid-area: i;padding-left: 10px;padding-right: 10px;background:var(--rood);color:var(--wit);}
/*verhuur setup*/
.verhuur{display: grid; grid-template-areas: "a c" "b d";gap:20px;grid-template-columns: 40% 60%;}
.verhuur .image{grid-area: a;}
.verhuur .verhuurinformatie{grid-area: b;  background: var(--grijs);padding:30px;background:var(--zwart);color:var(--wit);}
.verhuur .verhuurdetails{grid-area: c;  background: var(--grijs);padding:30px;display: grid;}
.verhuur .verhuurdetails h3{margin:0px !important;}
.verhuur .verhuurdetails h4{font-weight: 400;font-style: italic;}
.verhuur .extras{grid-area: d;  background: var(--grijs);padding:30px;}
.reservation-extras label{display: flex;align-items: center;column-gap:10px;}
.extras input[type="submit"]{width: fit-content;margin-top: 10px;}
.extras input{height:30px; }

/*verkoop*/
.carrosserietype{grid-area:h;}
.aantalstoelen{grid-area: f;}
.detail.verkoop .extradetails{gap:50px; grid-template-columns: 48% 48% !important;}
.detail.verkoop{margin-bottom: 40px;grid-template-columns: 49% 49%;grid-template-areas:"a b""e e""c c";}
.detail.verkoop .beschrijving{position: relative;grid-area:e;background:var(--grijs); padding: 20px 30px;margin-bottom:30px;}
.detail.verkoop .extradetails div i, .detail.verkoop .beschrijving i{position: absolute;top: -15px;left: -15px; background:var(--wit); border-radius: 50%;padding:5px;font-size:25px;width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;}
.detail.verkoop .extradetails div{ display: flex;flex-direction: column;row-gap: 4px;position: relative;background: var(--grijs);padding: 20px 30px;}
.detail.verkoop .extradetails div h3, .beschrijving h3{margin-bottom:15px;border-bottom: 1px solid var(--wit);padding-bottom:5px;text-transform: uppercase;}
.slider-container {max-width: 100%;margin: auto;text-align: center;margin-bottom: 40px;}
.main-image{width: 100%;height: auto;padding: 0px !important;}
.main-image img {width: 100%;height: auto;}
.thumbnail-container {display: flex;margin-top: 10px;flex-wrap: wrap; row-gap:10px;}
.thumbnail {object-fit: cover;width: 60px;height: auto;margin: 0 5px;cursor: pointer;opacity: 0.6;}
.thumbnail:first-of-type{margin: 0 5px 0 0;}
.thumbnail:last-of-type{margin: 0 0 0 5px;}
.thumbnail:hover {opacity: 1;}
#verkoopform{background:#333;padding:40px 0;}
#verkoopform h3, #verkoopform p, #verkoopform a{color:#fff !important;}
#verkoopform form{padding-top:20px;}
#verkoopform form input, #verkoopform form textarea{margin-bottom:10px;}
#verkoopform form textarea{height:120px !important;resize:none !important;padding:10px 5px;}
#verkoopform form input[type="submit"]{margin-top:0 !important;background:var(--rood);color:#fff !important;}

/*voertuigen slider*/
.voertuigen{display: grid; grid-template-columns: calc(25% - 10px) calc(25% - 10px) calc(25% - 10px) calc(25% - 10px);gap:30px; align-items: stretch;}
.voertuigen .voertuig{ transition:0.3s;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;padding:15px 15px 15px 15px;display: grid;grid-template-areas: "e" "a" "b" "c";height: 100%;}
.tweedehands .voertuigen .voertuig{grid-template-areas:"c" "e" "a" "b";}
.tweedehands .voertuigen .voertuig p.prijs{text-align:right;}
.tweedehands .voertuigen .voertuig p.prijs span{color:var(--rood);font-style:normal;font-weight:bold;font-size:18px;}
.voertuigen .voertuig .imagewrapper{height:200px;grid-area: a;}
.voertuigen .voertuig img{width: 100%;height: 100%;object-fit: contain;}
.voertuigen .voertuig h4{grid-area: b;margin-top:0px;}
.voertuigen .voertuig p{grid-area: c;font-style: italic; font-size:14px;}
.voertuigen .voertuig p.maandprijs{grid-area: e;font-style: normal; text-align: right;font-size:16px;}
.voertuigen .voertuig p.maandprijs span{font-weight: 800; color:var(--rood);font-size:20px;}
.voertuigen .voertuig:hover {transform: scale(1.05);transform-origin: center;}

/*prijslijst*/
.prijsinfo{display: grid; grid-template-columns:auto auto; gap 30px;}
.prijsinfo div:last-child{width: auto; margin-top: 10px; justify-self:flex-end;}
.prijsinfo div a{width: auto; padding: 10px 20px; background-color: var(--rood); color:white;}
.prijsinfo div a:hover{transition: background-color 0.3s ease; background-color: #666;}

/*form*/
form{display: grid;}
fieldset{border:0px !important;padding:0px; margin:0px;}
.ophaal, .terugbreng{display: grid;grid-template-areas: "a a";column-gap: 20px;row-gap: 10px;}
.ophaal label, .terugbreng label{grid-area: a; margin-top:15px;}
input{height: 45px;padding-left: 5px;}

#tijd{width: 70px;}
#datum{width: 250px;}

/*tabel*/
table{width: 100%;}
td, th{padding: 8px;}
tr:nth-child(even){background-color: var(--grijs);}
tr:hover {background-color:var(--grijs) ;}
th {padding-top: 12px;padding-bottom: 12px;text-align: left;background-color: var(--rood);color: var(--wit);}

/*logo balk*/
#logo{display: flex;justify-content: space-around;flex-wrap: wrap;row-gap: 10px;}
#logo img{opacity: 0.3;}

/*review*/
.star{color:#F8D700;font-size:20px;}
.reviews{margin-top:40px;display: grid; grid-template-columns: 30% 30% 30%; gap:20px; justify-content: center; }
.review{background:var(--grijs); padding:20px;}
.review p{font-size:14px ;}
.review .author{font-size: 14px; font-style: italic;font-weight: 800;}
.regio.twocolumns{grid-template-columns: 38% 60% !important; gap :20px;}
/*form*/
.contact .twocolumns{grid-template-columns: 38% 60%; gap :20px;}
#contactform {display: flex;flex-direction: column;margin-top:20px;}
#contactform label {margin-bottom: 5px;  color: var(--zwart);}
#contactform input[type="text"],
#contactform input[type="email"],
#contactform textarea {background:var(--grijs);width: 100%;padding: 10px;margin-bottom: 15px;font-size: 16px;height: 50px !important;border:0px;}
#contactform textarea {resize: none;height: 180px !important;}
#formMessage {margin-top: 20px;  font-size: 16px;  color:var(--rood);  text-align: center;}
#contactform button[type="submit"]{width: fit-content;margin-top:0px;height: 50px !important;padding:0 40px;}
/*top paginas*/
.top{background:var(--grijs);padding: 40px 0px;margin-bottom:40px;}
.top .container{padding: 0px;}
.minibussen .top, .hybrides .top, .personenwagens .top, .bestelwagens .top, .koelwagens .top, .top h2, .verhuur-overzicht .top, .elektrische-wagens .top{margin-bottom:0px !important;}
.secondtop{background:var(--rood); color:var(--wit);}
.secondtop .normalwidth{display: flex; flex-wrap: wrap; justify-content: space-between; padding: 15px 0px;}
.secondtop .normalwidth p{display: flex;justify-content: center;align-items: center;}
.secondtop i{color:var(--wit) !important; font-size:30px;}
#formmessage{padding-top:20px;}
#formmessage .success{padding:20px;border:2px solid green;color:green;}
#formmessage .error{padding:20px;border:2px solid var(--rood);color:var(--rood);text-align:center;}
#formmessage .error a{text-decoration:underline;color:var(--rood);}
#formmessage .error a:hover{text-decoration:none;color:var(--rood);}
/*regio*/
.lommel h3, .aarschot h3, .arendonk h3, .diest h3, .geel h3, .heist-op-den-berg h3 , .herentals h3, .leopoldsburg h3, .meerhout h3, .mol h3, .neerpelt h3, .olen h3, .tessenderlo h3, .turnhout h3, .westerlo h3, .hybrides h3, .minibussen h3, .personenwagens h3, .bestelwagens h3{margin-top:30px;margin-bottom:15px !important;}

/*footer*/
footer{border-top:1px solid var(--grijs);}
.threecolumns{display: grid; grid-template-columns: 30% 40% 30%; justify-content: center; align-items: center; padding:40px 0px !important;}
.threecolumns .two{text-align: center;padding-right: 0px;}
.subfooter{ background:var(--rood);padding:10px 0px;}
.subfooter p{color:var(--wit) !important; text-align: center;margin:0px; font-size:14px;}
footer .column.three p{text-align:right;}

/*usp*/
#usp{margin-top: 20px; background:var(--zwart);color:var(--wit);padding:20px 40px;}
#usp ul{display:flex;justify-content: space-between;flex-wrap: wrap;row-gap: 20px;}
#usp ul li{align-self: center;text-align:center;}

/*voertuig detail*/
i{margin-right: 10px;color:var(--rood);}
.detail{display: grid; grid-template-areas: "a b" "c c";gap:20px; grid-template-columns: 40% 60%;align-items: center;}
.detail .image{grid-area: a; padding:10px 30px; padding-left:0px;}
.detail .details{grid-area: b;padding:30px;}
.detail .extradetails{gap:20px;grid-area: c;display: grid; grid-template-columns: 49% 49%;}
.price span{font-weight: bold;font-size: 20px; color:var(--rood);}
.verkoop .details .price span{font-size:28px;}
.details{display: flex;row-gap:15px;flex-direction:column;}
.details h3{grid-area: b;margin:0px;}
.details h4{grid-area: c;margin:0px !important;font-style: italic;font-weight: 400;}
.details .beschrijving{grid-area: d;margin:0px;}
.details .brandstof{grid-area: e;margin:0px;}
.details .versnellingsbak{grid-area: f;margin:0px;}
.details .deuren{grid-area: g;margin:0px;}
.details .afmetingen{grid-area: h;margin:0px;}
.details .zitplaatsen{grid-area: h;margin:0px;}
.details .price{grid-area: a;margin:0px;text-align: right;}
.extras p, .financieel p{margin:10px 0px;}
.extras, .financieel{background:var(--grijs);padding:15px 30px;}

.acties{background:var(--rood);color:var(--wit);padding:30px 30px;}
.acties.error-detected {background: #666; color: var(--wit);}
.acties form{display: flex;align-items: baseline;column-gap:20px;}
.acties input[type="submit"]{background-color:var(--zwart);border:0px; color:var(--wit);width: fit-content;padding:5px 15px;transition: background-color 0.3s ease;}
.acties input[type="submit"]:hover{background-color:var(--wit) !important; color:var(--zwart);}

.acties fieldset input{background:var(--wit); border:0px; color:var(--zwart); padding:0px 0px 0px 5px;margin-right: 10px;}
.acties fieldset legend{margin-bottom:10px;}

.voertuig .content .normalwidth{padding-bottom:20px;}

.table-container{margin-bottom:10px;}

/*HONEYPOT EMAIL*/
#contactform #phone{display:none !important;}

/* mobiel */
@media (max-width: 1440px) {
  .column.two{padding-right:100px;}
  .secondtop{padding-left:30px; padding-right: 30px;}
}
@media (max-width: 1300px) {
  .container{padding-left:30px !important; padding-right:30px !important;}
  .container.twocolumns{padding-left:0px !important;}
  .contact .container.twocolumns{padding-left:30px !important;}
  .column.two{padding-right:30px;}
}
@media (max-width: 1200px) {
  .banner{grid-template-columns: 100%; row-gap:40px;padding:0px; padding-top:20px;}
  .aanbod{grid-row: 2;grid-template-columns: auto auto auto;}
  .huurmodule{grid-row: 1;}
  .table-container {overflow-x: auto !important;}
   table {width: 1080px;border-collapse: collapse;}
}

@media (max-width: 1024px) {
  .detail .details{padding: 0px;}
  .secondtop .normalwidth{gap:20px;}
  .detail {grid-template-areas:"a a"  "b b" "c c"; grid-template-columns: 100%;column-gap:0px;}
  .detail .details{row-gap:10px;}
  .voertuigen{ grid-template-columns: auto auto auto;}

  .twocolumns{grid-template-columns: 100% !important;}
  .container.twocolumns .two{padding-left:30px;}
  .mobile-menu-button {display: block !important;}
  header .container nav{background-color: var(--grijs);}
  #menu {position: absolute;  top: 0;  left: -100%;  width: 100%;  height: 100%;  background-color: var(--grijs);  padding-top: 161px;  transition: left 0.5s ease;  z-index: 999;}
  #menu.active {left: 0;}

  .mobile-menu-overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);}
  .mobile-menu-button {z-index: 1000;}

  nav ul{display: grid;gap: 36px;justify-content: center;}
  .banner{height: auto;padding-bottom:20px;}
  .acties form{display: grid;}
  .acties input {margin-top:10px;}
  .acties fieldset input{margin-top:0px;}
  .acties fieldset{margin-top:10px;}

}
@media (max-width: 880px) {
  .verhuur {display: grid;grid-template-areas: "a" "c" "b" "d"; grid-template-columns: 100%;}
  .verhuur .verhuurdetails {row-gap:5px;}
  .aanbod{grid-template-columns:auto auto;}
}
@media (max-width: 840px) {
  .reviews {margin-top: 40px;display: grid;grid-template-columns: 100%;gap: 20px;}
}
@media (max-width: 800px) {
  h2{font-size: 18px;}
  .voertuigen{grid-template-columns:  auto auto;}
  .threecolumns .two {text-align: left;}
  footer .threecolumns{grid-template-columns: 100%;justify-content: left;gap: 30px;}
  footer .column.three p{text-align: left !important; }
}
@media (max-width: 768px) {
  .beschikbare-autos .verhuurinformatie {row-gap:20px;grid-template-columns:  auto;}
}
@media (max-width: 600px) {
  #contactform  input[type="text"],  #contactform  input[type="email"],  #contactform  textarea, #contactform  button[type="submit"] {font-size: 14px;}
  .detail .extradetails {row-gap: 20px;grid-template-columns: 100%;}
  h1{font-size: 30px;}
  .details{grid-template-areas:"a" "b" "c" "d" "e" "f" "g" "h";}
  .details .price { text-align: left;}
}

@media (max-width: 520px) {
  .voertuigen{ grid-template-columns: 100%;}
  .price {text-align: left !important;}
  .banner{padding-left: 30px;padding-right: 30px;}
  .huurmodule{width: 100%;}
  .ophaal, .terugbreng {grid-template-areas: "a";}
  .terugbreng{margin-top:20px;}
  #tijd, #datum{width: 100%;}
  .custom-select{row-gap: 10px;}
  .huurmodule {justify-content: inherit;}
}

@media (max-width: 480px) {
  .extras h3{margin-bottom:10px;}
  .gegevens {grid-template-areas:"a" "b" "c" "d" "e" "f" "g" "h" "i";}

  .acties fieldset input{margin-top:10px;}
  .datumselect {grid-template-columns: 100%;}
  .acties fieldset input {width: 100%;}
}
@media (max-width: 410px) {

}
@media (max-width: 360px) {
  .aanbod{grid-template-columns:  auto;}
  .aanbod div a{height: 130px;width: 130px;}
}