*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; padding-top: 0px!important; background:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.mb-10{margin-bottom: 50px;}
.pumpHead{font-size: 54px;line-height: 65px;}
/* header*/
header.home{background:linear-gradient(180deg, #000000a8, transparent) !important}
header.home:hover,header.home:hover .submenu { background: rgba(255, 255, 255, 0.91) !important;} 
header.home .container{padding-left:7px;padding-right: 23px;}
header.home:hover .logo .default-logo{display: none;}
header.home:hover .logo .hover-logo{display: inline;}
.buy__btn a, header ul li .tpMenu{background:transparent;}
 header:hover nav > ul > li::after {
  content: ""; position: absolute; left:131px; right:0; bottom:24px; height: 2px; background-color: #c9c9c9;width: 100%; z-index: 1; max-width: 888px; margin: 0 auto;pointer-events: none;}
/* body */
.pr-2{padding-right: 8px;}
.page-wrap { width:100%; min-height:100vh; background:#fff; display:flex; justify-content:center;}
.frame { width:min(100vw,1920px); height:100vh; margin-inline:auto; position:relative; overflow: hidden; background:#000; }
.container{width:100%;}
.slides { position:relative; width:100%; scroll-snap-type:y mandatory; scroll-behavior:smooth;-webkit-overflow-scrolling:auto; scrollbar-width:none; -ms-overflow-style:none; scroll-snap-type: y mandatory; overflow-y: scroll; height: 100vh;overscroll-behavior: contain; }
.slides::-webkit-scrollbar{width:0;height:0}
.slide { position:relative; height:100vh; width:100%; scroll-snap-align:start; display:block;scroll-snap-stop: always; overflow:hidden; background:#000; }
#slide5{ display: flex; flex-direction: column; justify-content: flex-start; min-height: 100vh;background-color:#030C7B; }
#slide5 footer{ margin-top:40vh; }
.bg { width: 100%; height: 100%; overflow: hidden;}
#player { position: absolute; top: 50%; left: 50%; width: 120%; height: 120%; transform: translate(-50%, -50%);  pointer-events: none; }
#player { opacity: 0; transition: opacity 0.6s ease-in-out;}
#player.loaded { opacity: 1;}
.bg img { width:100%; height:auto; } 
.slide:not(.simpslide) .bg::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(3,12,123,0.4); z-index: 1; }
.slide .content { position: absolute; bottom:1%; left: 50%; transform: translate(-50%, -1%);  text-align: center; width:75%; color: #fff; z-index: 2; padding: 20px; }
.nav-arrows { left:18px;  top:50%; transform:translateY(-50%); flex-direction:column; gap:12px; z-index:2; }
.hide{ opacity:0; visibility: hidden; }
.nav-arrows a{  display:inline-grid; place-items:center; width:40px;height:40px;border-radius:50%;background:transparent; color:#fff;text-decoration:none; font-weight:700;font-size:16px;}
.nav-arrows a:focus, .nav-arrows a.active, .nav-arrows a:hover{ background:rgba(255,255,255,0.9); color:#000; }
.slide:target { outline: none; }
.slidesc{margin:13px auto; max-width: 630px;}
.twoCols .lCol, .twoCols .rCol{width:50%;}
.warmKeizer h1.mb-10{margin-bottom: 100px;}
.warmKeizer .twoCols .lCol,.warmKeizer .twoCols .mCol, .warmKeizer .twoCols .rCol{width:33.3%;}
.twoCols .lCol::before, .twoCols .mCol::before  { content: ""; position: absolute; left: auto; top: 35%; transform: translateY(-50%); min-width: 2px; background-color: #fff; height: 75%; right: 0px; }
.btn{ padding: 12px 20px; border-radius: 8px; text-align: center;}
/*Warmtepomp Keizer  */
.warmKeizer .content{top:26%; bottom: auto;}
@media (max-width:991px){
  header.home:hover, header.home.menu-open, header.home:hover .submenu{background: unset!important;}
  header.home:hover .submenu { background-color: #fff!important; }  
  header.home .m-btn > button > span,
  header.home.menu-open { background-color: #fff !important; }
  header.home.menu-open .m-btn > button > span { background-color: #CC7B1D !important; }
  header.home,header.home .submenu{transition: none !important;}
  header.home:hover .logo .default-logo { display: block !important; }
  header.home:hover .logo .hover-logo {display: none !important; }
  header.home.menu-open .logo .hover-logo{display: block !important; } 
  header.home.menu-open .logo .default-logo {display: none !important; }
  header.home .container{padding-left:15px;padding-right: 15px;}
  #player {  width: 100%;height:100%; }
  .nav-arrows{display:none}
  .bg img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; object-fit: cover; }
  .slide .content{ width:100%; bottom: 10%;transform: translate(-50%, -10%);padding:15px 10px;}
  .title-1, .pumpHead {font-size:27px;line-height: 34px;}
  .title-2 {line-height:30px;}
  .title-2, .title-3, .title-4 {font-size:22px;}
  .slide .content img{ max-width:48px; height:auto;}
  .twoCols .title-2 { height:65px; }
  .twoCols .flex{flex-direction: column;}
  .twoCols .lCol::before{top:48%; height: 57%;}
  .mb-10{margin-bottom:40px;}
  .twoCols .mb-10{margin-bottom: 20px;}
  .slide:not(.simpslide) .bg::after {background: rgba(3,12,123,0.55);}
  .warmKeizer .content{top:20%; bottom: auto;}
  .warmKeizer .twoCols{flex-direction: column;row-gap: 35px;}
  .warmKeizer h1.mb-10{margin-bottom: 35px;}
  .warmKeizer .twoCols .lCol,.warmKeizer .twoCols .mCol, .warmKeizer .twoCols .rCol{width:100%;}
  .warmKeizer .twoCols .lCol::before,.warmKeizer .twoCols .mCol::before{content: none;}
  .warmKeizer .twoCols .lCol::after, .warmKeizer .twoCols .mCol::after {
    content: ""; position: absolute; left: calc(50% - 65px); bottom: -15px; transform: translateY(-50%); width: 130px; background-color: #fff; height: 0px; margin: 0px auto 0px; border-bottom: 3px solid white;
  }
   .warmKeizer .twoCols .btn{width: 200px;}
}
@media (min-width:1480px){ .sidePops .sideCont{right: calc(100% - 1505px);}}
@media(min-width:1700px){  
  header:hover nav > ul > li::after{ max-width: 989px;left:131px;}  
  .sidePops .sideCont{right: calc(100% - 1680px);}
}
@media (min-width:1900px){
  .homepg{max-width:1920px;margin:0 auto;}
  .sidePops .sideCont{right: calc(100% - 1885px);}
  .bg img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; object-fit: cover; }
  header:hover nav > ul > li::after{max-width: 1130px; left: 148px;}
 }