/* Trigger  */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  }

/* Optional Delays, change values here  */
.one { animation-delay: 0.2s; }
.two { animation-delay: .6s; }
.three { animation-delay: 1s; }
.four { animation-delay: 1.4s; }

/* Animations start here  */

/* FADE IN  */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; } }
.fadeIn { animation-name: fadeIn; }


/* FADE IN DOWN */

@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: none; } }
.fadeInDown { animation-name: fadeInDown; }

/* FADE IN UP */

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: none; } }
.fadeInUp { animation-name: fadeInUp; }

/* FADE IN UP BIG */

@keyframes fadeInUpBig {
  from { opacity: 0; transform: translate3d(0, 100px, 0); }
  to { opacity: 1; transform: none; } }
.fadeInUpBig { animation-name: fadeInUpBig; }

/* FADE IN LEFT */

@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-30px, 0, 0)rotateZ(30deg); }
  to { opacity: 1; transform: none; } }
.fadeInLeft { animation-name: fadeInLeft; }

/* FADE IN LEFT BIG */

@keyframes fadeInLeftBig {
  from { opacity: 0; transform: translate3d(-100px, 0, 0); }
  to { opacity: 1; transform: none; } }
.fadeInLeftBig { animation-name: fadeInLeftBig; }

/* FADE IN RIGHT */

@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(100%, 0, 0); }
  to { opacity: 1; transform: none; } }
.fadeInRight { animation-name: fadeInRight; }

/* @end standaard animaties  */



.btn { color: #fff; background: #13a9a7; font-weight: 500; border-radius: 0; text-transform: uppercase; font-size: 14px; padding: 0 24px; line-height: 40px;  }
.btn i { margin-right: 10px; } 
.btn:hover { color: #13a9a7; background: #fff; } 
h1, h2, h3, h4, h5 {  font-family: "Open Sans", serif; }

p { font-size: 16px; line-height: 34px; }
p a { color: #f05a24; }

body {
  padding-bottom: 0;
  color: #000;
  font-family: "Open Sans", serif;
}

header .carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.container { max-width: 1140px; }

.table thead tr th { background-color: #c49c6f; border-bottom: 0; padding: 22px 40px; font-size: 20px; font-weight: 500; }
.table tbody tr td { border-bottom: 0; padding: 30px 40px; font-size: 20px; vertical-align: middle; }
.table tbody tr td strong { font-weight: 500; }
.table tbody tr:nth-child(odd) td { background: #e5d3bf; }
.table tbody tr:nth-child(even) td { background: #ede0d2; }


.carousel-control-prev-icon { background-image: url('img/arrowl.png'); height: 28px; width: 18px; }
.carousel-control-next-icon { background-image: url('img/arrowr.png'); height: 28px; width: 18px; }
.navbar-toggler-icon { background-image: url('img/menu-ico.png'); }
.navbar-toggler { padding-top: 14px; border: 0; }

.sliderMain {  }
.sliderMain .carousel-item { background-position: 0 120px; }
.sliderMain .carousel-item .slideCnt { position: absolute; bottom: 76px; }
.sliderMain .carousel-item .slideCnt .slideTitle { display: block; color: #fff; font-size: 58px; font-weight: bold; line-height: 82px; margin-bottom: 24px; }


header .navigatie { background: #000; padding: 26px 0; }
header .navigatie .navbar { padding: 20px 0; }

header .navigatie .navbar .nav-link { color: #fff; font-size: 18px; padding: 0 20px; }
header .navigatie .navbar .nav-link:hover, header .navigatie .navbar .nav-link.activemenu { color: #13a9a7; }
header .navigatie .button-holder { padding-top: 10px; }

.textBlock { padding: 60px 0 60px 0; }
.textBlock h1 { font-size: 36px; line-height: 24px; font-weight: bold; margin-bottom: 40px; }
.textBlock p { line-height: 26px; }
.textBlock .blocks { margin-top: 32px; }
.textBlock .blocks .blockItem { background: #10aca5; color: #fff; padding: 18px; }
.textBlock .blocks .blockItem .icon { height: 50px; }
.textBlock .blocks .blockItem h3 { font-size: 16px; font-weight: bold; margin-bottom: 14px; }
.textBlock .blocks .blockItem p { line-height: 22px; margin-bottom: 0; }
#overons, #diensten, #faq { scroll-margin-top: 100px; }

.dienstenBlock { background: #000; color: #fff; padding: 60px 0 80px; border-bottom: 6px solid #31302e; }
.dienstenBlock h2 { margin: 20px 0 58px 0; font-size: 36px; margin-top: 0; font-weight: bold; }
.dienstenBlock h3 { font-size: 20px; font-weight: bold; margin-bottom: 34px; }
.dienstenBlock .dienstenList .dienstenItem { display: grid; }
.dienstenBlock .dienstenList .dienstenItem:nth-child(even) h3 { margin-top: 30px; }
.dienstenBlock .dienstenList .dienstenItem p { line-height: 26px; margin-bottom: 50px; font-size: 15px; }

.harleyBox { background-color: #000; color: #fff; padding: 60px 0; }
.harleyBox h2 { font-size: 36px; font-weight: bold; margin-bottom: 50px; }
.harleyBox .ctn p { line-height: 26px; }
.harleyBox .screen-image { position: absolute; top: 0; left: 0; right: 0; padding: 0;}
.harleyBox .screen-image > .row { margin: 0 !important; }
.harleyBox .screen-image .image-content { height: 475px; background: url("img/harley.jpg") no-repeat;background-size: cover; background-position: 0 0; }
.harleyBox .screen-image .btn { line-height: 54px; position: absolute; left: 100%; bottom: 0; width: 400px; }
.harleyBox .screen-image .btn:hover { box-shadow: inset 0px 0px 0px 2px #11aaa7; }

.instaBox { padding: 100px 0 60px 0; } 
.instaBox h3 { font-size: 36px; font-weight: bold; margin-bottom: 50px; }

.testimonialBox {  }
.testimonialBox h3 { font-size: 36px; font-weight: bold; margin-bottom: 50px; }

.raverBox { padding: 60px 0; background: url('img/raverbg.jpg') no-repeat; background-size: cover; color: #fff; }
.raverBox .ctn h4 { font-size: 36px; font-weight: bold; margin-bottom: 50px; }
.raverBox .ctn p { line-height: 26px; margin-bottom: 50px; }
.raverBox .ctn .btn { background-color: #f89520; padding: 0 40px; } 
.raverBox .ctn .btn:hover { color: #000; }

.faqBox { padding: 60px 0; }
.faqBox h4 { font-size: 36px; font-weight: bold; margin-bottom: 50px; }
.faqBox .accordion-button { font-size: 24px; font-weight: bold; box-shadow: none !important; }
.faqBox .accordion-button:not(.collapsed) { background: none !important; color: #000 !important; }
.faqBox .accordion-button::after { background: url('img/acc-o.png') no-repeat; }
.faqBox .accordion-button:not(.collapsed)::after { background: url('img/acc-c.png') no-repeat; }

footer { background-color: #000; padding:60px 0; color: #fff; }
footer .contactBox ul li { list-style-type: none; line-height: 30px; }
footer .contactBox ul { padding-left: 0; margin-top: 30px; }
footer .contactBox ul li a { color: #fff; text-decoration: none; }
footer .contactBox ul li a i { font-size: 20px; margin-right: 10px; }
footer .contactBox .soc { margin-top: 85px; }
footer .contactBox .soc a { text-decoration: none; margin-right:  15px; }
footer .contactBox .soc a img { max-width: 22px; }
footer .contactBox .copyRights { bottom: 0; position: absolute; }
footer .formBox h4 { font-size: 24px; font-weight: bold; margin-bottom: 30px; line-height: 17px; }
footer .formBox .field { width: 100%; background: #000; border: 1px solid #494949; box-shadow: none; height: 44px; margin-bottom: 20px; color: #494949; padding: 0 10px; }
footer .formBox textarea { width: 100%; background: #000; border: 1px solid #494949; box-shadow: none; height: 44px; margin-bottom: 20px; color: #494949; padding: 0 10px; height: 140px; }
footer .formBox button.btn { color: #000; background-color: #fff; text-transform: none; padding: 0 40px; margin-top: 5px; font-weight: bold; } 
footer .formBox button.btn:hover { background-color: #13a9a7; color: #fff;  }
footer .formBox .frm p { margin: 0; }

#whatsappButton { position: fixed; bottom: 44px; right: 40px; }
#whatsappButton img { width: 60%; height: 60%; }

.navbar-toggler-icon { background-image: url(img/menux2.png); }

@media (max-width: 991px) {

  footer .contactBox .soc { margin-top: 90px; }
  header .navigatie { padding: 26px 26px; }
}

@media only screen and (max-width: 600px) {
  footer .contactBox .soc { margin-top: 10px; }
  header .carousel-item { height: auto; }
  header .navigatie { padding: 12px 26px; }
  header .navigatie .navbar { padding: 0; }
  .navbar-toggler { margin: 0 auto; }
  .sliderMain { margin-top: 93px; }
  .sliderMain .carousel-item { background-position: 0 0; }
  .sliderMain .carousel-item .slideCnt .slideTitle { font-size: 35px; line-height: 47px; margin-bottom: 24px; }
  .textBlock h1 { line-height: 40px; }
  .textBlock { padding: 30px 0; }
  .textBlock .blocks .row > div { margin-bottom: 20px; }
  .textBlock .blocks .row > div:last-child { margin-bottom: 0; }
  .dienstenBlock { padding: 30px 0 40px; }
  .instaBox, .raverBox, .faqBox { padding: 30px 0; }
  .dienstenBlock .dienstenList .dienstenItem h3 { margin-top: 30px; }
  .raverBox .ctn .btn { margin-bottom: 40px; }
  #whatsappButton { bottom: 20px; right: 0px; }
  #whatsappButton img { width: 60%; height: 60%; }
  .navbar-collapse { padding-top: 20px; }
  .navbar-toggler { right: 0; position: absolute; top: -63px; }
  .navbar .container-fluid { padding: 0; }
  header .navigatie .navbar .nav-link { padding: 3px 0; }
}