html { 
  scroll-behavior: smooth; 
}

body {
  font-family: "Lato", sans-serif;
  margin: 0;
  min-width: 300px;
}

.button {
  border: 2px solid white;
  background-color: #269e72;
  color: white;
  padding: 15px 32px;
  margin: 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 15px;
}

.button:hover {
  background-color: #27805f;
}

#naviBalk {
  height: 90px;
  z-index: 2;
  position: relative;
  background-color: #292929;
  margin: 0;
  padding: 5px 20px 5px 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.hamburger {
  font-size: 22px;
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
}

.logo {
  background-image: url("img/logo_dtr_wit.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 151px;
  height: 60px;
}

.zijNavi {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.zijNavi a {
  padding: 10px 10px 10px 32px;
  text-decoration: none;
  font-size: 24px;
  color: #f1f1f1;
  display: block;
  transition: 0.3s;
}

.zijNavi a:hover {
  color: #c4ddba;
}

.zijNavi .sluitKnop {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 40px;
  margin-left: 50px;
}





@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }

  .sidenav a {
    font-size: 18px;
  }

}

.achtergrondDonker {
  background-color: #292929;
}

.spacingNormaal {
  margin-top: 100px;
  margin-bottom: 100px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.container-reviews {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
}

.container-reviews>div {
  background-color: grey;
  border-radius: 15px;
  flex: 0 0 300px; /* Kan niet groeien (0), niet krimpen (0), en begin lengte (400px) */
  min-height: 200px;
  margin: 20px;
  padding: 20px;
}

.container-reviews>div>p {
  color: #f8f8f8;
  font-size: 1rem;
}

.container-reviews>div>h3 {
  color: #363636;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.container-reviews>div>.sterren {
  color: #e6cb36;
  font-size: 1.8rem;
}


.container-auto-bekijken {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
}

.container-auto-bekijken>img {
  border-radius: 15px;
  max-width: 80%;
  align-self: center;
  margin: 20px;
  box-shadow: rgb(0, 0, 0) 0px 0 10px;
}

.autoVerhaal {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 20px;
  text-align: flex-start;
}

.autoVerhaal>ul{
 padding: 0;
  list-style: none;
}

.onderAutoBekijken {
  padding: 40px;
  height: 100px;  
}




.container-projecten {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
}

.container-projecten>div {
  border-radius: 15px;
  flex: 0 0 350px; /* Kan niet groeien (0), niet krimpen (0), en begin lengte (400px) */
  min-height: 300px;
  margin: 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: rgb(0, 0, 0) 0px 0 10px;
}

.container-projecten>div>h3>a{
  margin-left: 10px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  text-shadow: rgb(0, 0, 0) 1px 0 5px;
  text-decoration: none;
}

.lamborghiniCountach5000 {
  background-image: url("img/lamborghini_countach_5000_v12/01.jpg");
}

.lamborghiniCountach5000:hover {
  background-image: url("img/lamborghini_countach_5000_v12/02.jpg");
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.FordShelbyCobraOutlaw {
  background-image: url("img/ford_shelby_cobra_outlaw/01.jpg");
}

.FordShelbyCobraOutlaw:hover {
  background-image: url("img/ford_shelby_cobra_outlaw/02.jpg");
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.porscheTargaCarrera4s {
  background-image: url("img/porsche_targa_carrera_4s/01.jpg");
}

.porscheTargaCarrera4s:hover {
  background-image: url("img/porsche_targa_carrera_4s/02.jpg");
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.porsche911Ruby {
  background-image: url("img/porsche_911_targa_4s_ruby_star_neo/01.jpg");
}

.porsche911Ruby:hover {
  background-image: url("img/porsche_911_targa_4s_ruby_star_neo/02.jpg");
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.bentleyContinentalGtMulliner {
  background-image: url("img/bentley_continental_gt_mulliner/01.jpg");
}

.bentleyContinentalGtMulliner:hover {
  background-image: url("img/bentley_continental_gt_mulliner/02.jpg");
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.ferrari512Testarossa {
  background-image: url("img/ferrari_512_testarossa/01.jpg");
}

.ferrari512Testarossa:hover {
  background-image: url("img/ferrari_512_testarossa/02.jpg");
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.ferrari812Competizione {
  background-image: url("img/ferrari_812_competizione/01.jpg");
}

.ferrari812Competizione:hover {
  background-image: url("img/ferrari_812_competizione/02.jpg");
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.ferrariGtc4Lusso {
  background-image: url("img/ferrari_gtc4_lusso/01.jpg");
}

.ferrariGtc4Lusso:hover {
  background-image: url("img/ferrari_gtc4_lusso/02.jpg");
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.jaguareType {
  background-image: url("img/jaguar_e_type/01.jpg");
}

.jaguareType:hover {
  background-image: url("img/jaguar_e_type/02.jpg");
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.matteBmwM5 {
  background-image: url("img/matte_bmw_m5/01.jpg");
}

.matteBmwM5:hover {
  background-image: url("img/matte_bmw_m5/02.jpg");
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.mclarenArturaSpider {
  background-image: url("img/mclaren_artura_spider/01.jpg");
}

.mclarenArturaSpider:hover {
  background-image: url("img/mclaren_artura_spider/02.jpg");
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.negroniCommissionPorsche911 {
  background-image: url("img/negroni_commission_porsche_911/01.jpg");
}

.negroniCommissionPorsche911:hover {
  background-image: url("img/negroni_commission_porsche_911/02.jpg");
  transition-duration: 1s;
  transition-timing-function: ease-in;
}



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

  .overVideoHeen {
    display: none;
  }

  .overVideoHeen p {
    display: none;
  }

  #videoKnop {
    display: none;
  }

}

@media screen and (min-width: 550px) {

  .overVideoHeen {
    position: absolute;
    z-index: 4;
    color: #f1f1f1;
    padding: 40px;
    margin-top: -200px ;
  }

}


#videoGroot {
  background-color:#111;
  border: none;
  z-index: 3;
  position: relative;
  width: 100%;
  height: 100%;
}



#videoKnop {
  font-size: 18px;
  padding: 15px;
  background: none;
  color: #fff;
  opacity: 0.9;
  cursor: pointer;
  border: 3px solid #fff;
  border-radius: 15px;
}

#videoKnop:hover {
  text-shadow: 1px 1px 2px #222;
  box-shadow: 1px 1px 1px #222;
}

.beginTekst {
  text-align: center;
  padding: 20px;
  font-size: 2.2em;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  color:#292929;
}

.kopTekst {
  text-align: center;
  padding: 40px;
  font-size: 2em;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  color:#292929;
}

.kopTekstWit {
  text-align: center;
  padding: 40px;
  font-size: 2em;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  color: #7e7e7e;
}



.container-diensten {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  padding: 10px;
}

.container-diensten>div {
  margin: 10px;
}

.container-diensten .afbeelding {
  padding: 10px;
  background-color: rgb(173, 173, 173);
  border-radius: 15px;
  flex-basis: 300px;
  min-height: 200px;
  align-self: stretch;
}

.container-diensten h2 {
  padding: 0;
  font-size: 1.8em;
  font-weight: 900;
}

.container-diensten h3 {
  font-size: 1.2em;
  font-weight: 700;
  color: rgb(110, 110, 110);
}

ul.diensten  {
  padding: 0;
  list-style: none;
}

.container-diensten .coating {
  background-image: url("img/coating.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.container-diensten .TargetBluEye {
  background-image: url("img/TargetBluEye2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.container-diensten .ppf {
  background-image: url("img/ppf.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.container-diensten .detailing {
  background-image: url("img/detailing.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}








.footerBalk {
  background-color: #292929;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.footerBalk > .contactGegevens {
  font-size: 0.9em;
  color: #f0f0f0;
  padding: 10px;
}

.footerBalk > .contactGegevens > h3 {
  font-size: 1.2em;
  color: #7e7e7e;
}

.container-contact {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  padding: 30px;
  margin-bottom: 100px;
}

.container-contact >div {
  padding: 5%;
}

.container-contact .danielAchtergrond {
  padding: 180px;
  background-image: url("img/Daniel_te_Riet.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
}

.telefoon {
  color: #000;
}



table {
  border: none;
}

td {
  padding-right: 5px;
}