/*
Theme Name: kpot theme
Author: kpot
Author URI: https://kpot.be/
Version: Quadriga;
*/

/* main is not supported in IE -> fix */
main {
  display: block;
}

.grecaptcha-badge{
	display: none;
}

body{
  font-family: 'aileron', 'Arial', sans-serif;
  font-size: 20px;
  line-height: 1.4;
  color: #00224B;
}
body, main{
  width: 100vw;
  overflow-x: hidden;
}

p{
  margin-bottom: 20px;
}

h1{
  font-size: 70px;
  line-height: 1.2;
}

h2{
  font-family: 'GT Eesti', 'aileron', 'Arial', sans-serif;
  font-size: 50px;
}

h3,
.ref_tekst,
.page-id-44 .content{
  font-size: 30px;
}

.ref_naam,
.ref_bedrijf,
strong{
  font-weight: 700;
}

a{
  border-bottom: 2px solid #00224B;
  text-decoration: none;
  color: #00224B;
}

h1 a,
.truck{
  border: none;
}

.center{
  text-align: center;
}

/* HEADER */

.site_logo a{
  background: url(https://quadrigatransport.be/wp-content/uploads/2019/09/Quadriga_logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 294px;
  height: 140px;
  max-height: 15vh;
  display: block;
  border: none;
}
.hidden,
.site_logo a>span{
  display: none;
}

.site_header{
  height: 20vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: relative;
  z-index: 999;
}

main section,
.site_header{
  width: 1500px;
  max-width: 90vw;
  margin: 0 auto;
}
main section{
  margin: calc(60px + 10vh) auto;

}

/* HERO */

.hero_section{
  min-height: calc(90vh - 120px);
}

.hero_section a{
  font-weight: 600;
}

.hero_text{
  position: relative;
  z-index: 9;
  height: 70vh;
  max-width: 500px;
}

.hero_text header{
  left: 6vw;
  position: relative;
}

.hero_text nav{
  bottom: 20vh;
  position: absolute;
}

.hero_section .truck{
  position: absolute;
  top: 20vh;
  right: 0;
  display: block;
  width: 75vw;
  height: 90vh;
  max-width: calc(1500px + 10vw);
  background: url(assets/img/Quadriga_truck.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* MEER INFO SECTION */

.meer_info_section{
  position: relative;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.meer_info_section h2{
  display: inline;
  border-bottom: 5px solid #fff;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.meer_info_section article>*{
  width: 50%;
}
.js-active .selected h2{
  border-bottom: 5px solid #00224B;
}

.js-active h2{
  cursor: pointer;
}

.js-active .info{
  opacity: 0;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.js-active .selected .info{
  opacity: 1;
}

.js-active .meer_info_section .info{
  position: absolute;
  right: 0;
  top: 0;
}

/* ONS WAGENPARK SECTON */

.ons_wagenpark_section,
.troeven_section{
  margin-top: 20vh;
}

.ons_wagenpark_image{
  width: 50%;
  height: auto;
}

.ons_wagenpark_meer_info{
  background-color: #C7C9C7;
  position: relative;
  bottom: -70px;
  max-width: 500px;
  left: 45%;
}

.ons_wagenpark_kenmerken,
.ons_wagenpark_meer_info{
  padding: 60px;
  width: calc(50% - 120px);
}

.ons_wagenpark_kenmerken{
  margin-top: 70px;
  font-size: 15px;
  max-width: 400px;
}

.ons_wagenpark_kenmerken li{
  margin-left: 20px;
}

.ons_wagenpark_kenmerken li::before{
  content: '-';
  padding-right: 15px;
  margin-left: -20px;
}

.ons_wagenpark_section .flex{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-flow: row-reverse;
          flex-flow: row-reverse;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

/* TROEVEN SECTION */
.troeven_section{
  position: relative;
  z-index: 9;
}
.troeven_section h2{
  margin-bottom: 30px;
}

.troeven_wrapper{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

.troef{
  width: calc(25% - 60px);
  margin: 30px;
  text-align: center;
}

.troef h3{
  margin: 30px 0;
  font-weight: 700;
}

.troef img{
  width: 60px;
  height: 60px;
}

/* REFERENTIES */
.referenties_section{
  background: #00224B;
  color: #fff;
  padding: 20vh 0 12vh 0;
  margin: 0 0 5vh 0;
  width: 100%;
  max-width: none;
}

.quotecontent{
  max-width: 700px;
  margin: 0 auto;
}
.ref_naam{
  display: block;
}

.ref_tekst{
  margin-top: 40px;
  font-weight: 300;
}
.ref_tekst::before{
  content: '"'
}
.ref_tekst::after{
  content: '"'
}

.ref_url{
  color: #fff;
}

.slick-dots li button:before{
  font-size: 11px;
  color: #fff;
}

.slick-dots li.slick-active button:before{
  color: #C7C9C7;
}

.slick-slide{
  padding: 0 15px;
}

.slick-list{
  padding: 0 !important;
}

/* CONTACT */

.contact_section{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.contactinfo img{
  margin-bottom: 40px;
  max-width: 400px;
  width: 100%;
}

.contactinfo_div{
  margin: 10px 0;
}

.contactinfo_div strong{
  min-width: 22px;
  display: inline-block;
}
.contactinfo p{
  margin: 0;
}
.contactinfo_div a{
  border-bottom: none;
}
.contactinfo_div.adres_div{
  margin-bottom: 20px;
  display: flex;
}
.contactinfo_div.adres_div p{
  margin-left: 26px;
}
.contactinfo_div.adres_div p:first-of-type{
  margin-left: 0;
  display: inline-block
}

.bedrijfsnaam{
  padding-bottom: 20px;
}

.contactform{
  width: 600px;
  max-width: calc(50% - 70px);
  margin-left: 70px;
}
.contactform p{
  max-width: 500px;
}
.contactform input{
  border: none;
  border-bottom: 2px solid #00234b;
  width: 500px;
  max-width: 100%;
  font-size: 20px;
  color: #C7C9C7;
  padding: 6px 0;
}

.contactform input[type='submit']{
  border: none;
  background: #00234b;
  font-family: 'GT Eesti', 'aileron', 'Arial', sans-serif;
  color: #fff;
  width: auto;
  padding: 10px 30px;
  font-size: 20px;
  cursor: pointer;
}

.contactform textarea{
  background: url(assets/img/underline.png);
  background-size: 27px;
  line-height: 61.99999999px;
  padding: 10px 0;
  margin: 0;
  width: 100%;
  border: none;
  font-size: 20px;
  background-attachment: local;
  color: #C7C9C7;
  width: 100% !important;
  height: 300px !important;
}
.contactform p{
  margin-top: 50px;
}

.contactform label{
  font-size: 15px;
}

.contactform strong{
  font-size: 20px;
}

/* BEDANKT PAGE */
.page-id-44 .page-header h1{
  display: none;
}

.page-id-44 section{
  min-height: 70vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
}
.page-id-44 .content{
  max-width: 500px;
}

.logo{
  font-family: 'GT Eesti', 'aileron', 'Arial', sans-serif;
}

/* WAVES */
.waves{
  position: relative;
  height: 640px;
  margin-top: -220px;
  margin-bottom: -140px;
}
.whiteWave {
  width: 720px;
  height: 640px;
  position: relative;
  top: 140px;
}
.blueWave {
  width: 720px;
  height: 500px;
  background: #fff;
}

.wave {
  position: absolute;
  top: 0;
  right:0;
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;
  transition: all 0.8s;
  overflow:hidden;

}
.wave svg{
  width: 720px;
  height: 640px;
}
.waveHider {
  content: "";
  position: absolute;
  height: 200%;
  width: 200%;
  top: -50%;
  right: -50%;
  /* transition: all 0.3s; */
  -webkit-transition: all 2.3s ease;
  -o-transition: all 2.3s ease;
  transition: all 2.3s ease;
  -webkit-transform: rotate(43deg);
      -ms-transform: rotate(43deg);
          transform: rotate(43deg);
}
.blueHide {
  background: white;
}
.whiteHide {
  background: #00224B;
}

@media (max-width: 1250) {
  .contactinfo img {
    width: 400px;
  }
}

@media (max-height: 850px), (max-width: 1024px) {
  body,
  .contactform strong{
    font-size: 18px;
  }
  .contactform label {
    font-size: 12px;
  }
  h1 {
    font-size: 50px;
  }
  h2{
    font-size: 40px;
  }
  h3, .page-id-44 .content {
    font-size: 25px;
  }
  .ref_tekst{
    font-size: 18px;
  }
}

@media (max-width: 1024px) {
  .meer_info_section{
    margin: 0;
    max-width: 100%;
  }
  .meer_info_element{
    padding: 90px 5vw;
  }
  .meer_info_element:nth-child(odd){
    background: #00224b;
    color: #fff;
    margin: 0;
  }
  .meer_info_section .info {
    position: relative !important;
    width: 100%;
    opacity: 1;
  }
  .meer_info_section h2{
    border-bottom: none !important;
    margin-bottom: 30px;
    display: block;
    width: 100%;
    text-align: center;
  }
  .ons_wagenpark_meer_info {
    width: calc(90% - 120px);
    left: calc(90vw - 620px);
  }
  .ons_wagenpark_image {
    width: 90%;
    max-width: 650px;
  }
  .ons_wagenpark_section .flex{
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-flow: column-reverse;
            flex-flow: column-reverse;
  }
  .ons_wagenpark_meer_info{
    bottom: -30px;
  }
  .ons_wagenpark_kenmerken{
    max-width: 100%;
    width: calc(100% - 120px);
    padding: 10% 10% 0 10%;
    margin: 0;
  }
  .troef {
    width: calc(50% - 60px);
  }
}

@media (max-width: 950px) {
  .waves{
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
    margin-bottom: -176px;
    margin-right: -136px;
  }
}

@media (max-width: 789px) {
  .contact_section{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
  }
  .contactform{
    max-width: 100%;
    margin-left: 0;
  }
  .hero_section .truck {
    left: 35vw;
  }
  h1, h2 {
    font-size: 35px;
  }
  .ons_wagenpark_meer_info {
    left: 10%;
  }
}

@media (max-width: 550px) {
  h1, h2{
    font-size: 30px;
  }
  .troef {
    width: 100%;
    margin: 30px 0;
  }
  .ons_wagenpark_kenmerken {
    width: 100%;
    padding: 0;
    padding-top: 10%;
  }
  .ons_wagenpark_meer_info {
    padding: 8% 8%;
    width: 74%;
  }
  .ons_wagenpark_section,
  .troeven_section {
    margin-top: 10vh;
  }
  .troeven_section{
    margin-bottom: 0;
  }
  .hero_section .truck {
    left: 0;
    background-position: left -110px bottom;
    width: 100vw;
  }
  .hero_text header {
    left: 0;
  }
  .hero_text nav {
    position: relative;
    top: 12vh;
    bottom: 0;
  }
  main section {
    margin: calc(60px + 4vh) auto;
  }
  .hero_section{
    margin: calc(30px + 4vh) auto;
  }
  .waves {
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    margin-bottom: -230px;
    margin-right: -180px;
  }
  .ons_wagenpark_meer_info{
    left: 0;
    padding: 0;
    background: transparent;
    bottom: 0;
    padding-top: 30px;
  }
  .ons_wagenpark_image,
  .ons_wagenpark_meer_info{
    width: 100%;
  }
  .troef h3 {
    margin: 10px 0;
  }

}