@font-face {
  font-family: poppins;
  src: url(/fonts/Poppins/Poppins-Regular.ttf);
}

html, body {
  font-family: "poppins", sans-serif !important;
  font-size: 16px;
  overflow-x: hidden;
}

/* header */

.main .header {
  background-image: url(../img/headerImg.jpg);
  height: 40vh;
  background-position: 80% center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0px 0px 25px #4f4f4fa9;
}

.main .header .cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 40vh;
  background-color: rgba(0, 0, 0, 0.8);
  animation: onLoadCover 2s 1s ease-out forwards;
}

/* .main .header .contactButton {
  display: none;
} */

.main .header .text{
  height: 20vh;
  position: relative;
  display: flex;
  align-items: center;
}

.main .header .text h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #f3b21e;
  animation: onLoadTitle 2s 1s ease-out forwards;
  animation-delay: 1s;
}

.main .header .logo {
  height: 15vh;
  position: relative;
  z-index: 1;
  padding-top: 5%;
}

.main .header .logo img{
  height: 100%;  
  box-shadow: 0px 0px 25px #4f4f4fa9;
  min-height: 100px;
  max-height: 200px;
  border-radius: 35px;
}

/* body */

.main .body .text h2{
  font-weight: 600;
}

.main .body .text {
  color: #000;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.main .body .text.top {
  color: #ffffff;
  animation: onLoadText 2s 1s ease-out forwards;
}

.main .body .pagebreakPc {
  display: none;
}

.main .body .pagebreakMobile {
  display: block;
  box-shadow: 0px 0px 25px #4f4f4fa9;
  position: relative;
}

.main .body .pagebreakMobile img{
  width: 100%;
  object-fit: contain;
}

.main .body .pagebreakPc {
  display: none;
  box-shadow: 0px 0px 25px #4f4f4fa9;
}

.main .body .pagebreakPc .imgHolder {
  background-repeat: no-repeat;
  background-size: cover;
}

.main .body .text .c {
  margin-top: 2rem;
  display: flex;
  align-items: baseline;
  justify-content: start;
}

.main .body .pagebreakPc .imgHolder.start {
  background-position: center center;
  background-image: url("../img/vwDouw.jpg");
}

/* .main .body .pagebreakPc .imgHolder.mid {
  background-image: url("/img/");
} */

.main .body .pagebreakPc .imgHolder.end {
  background-position: center 80%;
  background-image: url("../img/audiMist.JPG");
}

.main .body .c a:hover{
  color: #f3b21e !important;
}

.main .body .c a{
  text-decoration: none;
  transition: all .3s; 
  color: #000;
}

/* footer  */

.main .footer {
  background-color: #000000a9;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  color: #ffffff;
  box-shadow: #4f4f4fa9 0px 0px 29px 0px;
}

.main .footer a {
  color: #ffffff;
  /* margin: 0.5rem; */
  /* margin-bottom: 1rem; */
  text-decoration: none;
  transition: all .3s;
}

.main .footer .linkHolder {
  margin: 0.5rem 0 0.5rem 0;
  display: flex;
  align-content: center;
}

.main .footer .link {
  padding: 0.5rem;
  margin-left: -0.5rem;
}

.main .footer a:hover {
  color: #f3b21e;
  text-decoration: none;
}

/* .main .footer .kvk {
  margin-bottom: 2rem;
} */

/* .main .footer .credits {
  display: flex;
  justify-content: start;
}

.main .footer .credits>a{
  padding: 1rem;
  margin-right: -1rem;
  margin-left: -1rem;
} */

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

  .main .header .logo {
    height: 30vh;
  }

  .main .header .text h1 {
    font-size: 4rem;
  }

  .main .body .pagebreakMobile {
    display: none;
  }
  
  .main .body .pagebreakPc {
    display: flex;
    width: 100vw;
  }

  .main .body .pagebreakPc .imgHolder {
    width: 50%;
    height: 45vh;
  }
  
  /* .main .body .pagebreakPc .imgHolder.mid {
    background-color: yellow;
    width: 40%;
  } */

  .main .footer .kvk {
    margin-bottom: 0rem;
  }

  .main .footer .credits {
    justify-content: end;
  }

  .main .header {
    background-image: url("../img/headerImg.jpg");
    height: 50vh;
    background-position: center center;
  }

  .main .header .cover {
    height: 50vh;
  }

  .main .body .text .c-1 {
    justify-content: start;
  }
  
  .main .body .text .c-2 {
    justify-content: center;
  }
  
  .main .body .text .c-3 {
    justify-content: end;
  }
  
}

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

  .main .body .pagebreakPc .imgHolder {
    height: 55vh;
  }

  .main .header {
    background-image: url("../img/headerImgCut.jpg");
    height: 60vh;
  }

  .main .header .cover {
    height: 60vh;
  }

}

@media screen and (min-width: 1400px) {
  .main .footer .linkHolder {
    margin: 0;
  }
}

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

  .main .header {
    height: 70vh;
  }

  .main .header .cover {
    height: 70vh;
  }

}

@keyframes onLoadText {
  100% {color: #000;}
}

@keyframes onLoadTitle {
  100% {color: #ffffff;}
}

@keyframes onLoadCover {
  100% {background-color: rgba(0, 0, 0, 0.5);}
}