@charset "utf-8";
/* CSS Document */

body{margin: 0; padding: 0; font-family: 'Lato', sans-serif; font-size: 10px; color: #262626;}
p, div span, nav, header, ul, li, a {box-sizing: border-box;}
img{max-width:100%; margin: 0 auto;}

header{background:#f4f8fe;}
.wrapper{width:100%; max-width: 111em; margin: 0 auto; padding: 2.4em 2em; box-sizing: border-box;}
header .wrapper{ display: table; width:100%}
.logo{width:25.5em; display: table-cell;vertical-align: top;}
.logo img{width:25.5em; max-width: 90%;}
nav{ display: table-cell; text-align: right;vertical-align: top;padding-top: 0.4em;}
nav ul {list-style-type: none; padding: 0; margin: 0;}
nav ul li{ display: inline-block; margin-left: 3em;vertical-align: middle;}
nav ul li a{ color: #002e6c; text-transform: uppercase; font-size: 1.6em; font-weight: bold; text-decoration: none;}
nav ul li a:hover{opacity:0.8;}
nav ul li.btn{margin-left: 6em; margin-right: 2em;}
nav ul li.btn a, .mobkletsbtn{float:right; background: #d50160; border-radius: 1.1em; font-size: 1.8em; color:#fff; line-height: 3em; padding: 0 2.8em;}

.mobkletsbtn{display: none;}

header button:focus{outline:none;}

.content{text-align: center;padding-top: 2em;}
.content p{font-size: 1.8em; text-align: left;padding: 0.4em 0;line-height: 1.43;}
h1{font-size: 4em; margin-bottom: 0em;color: #002e6c;}
h2{font-style:italic; font-size: 1.8em; font-weight: 400; border-bottom: 2px dotted #262626; padding-bottom: 1.2em; width: 23em; margin: 1em auto;color: #002e6c;}
h2.noborder{border-bottom: none; padding-bottom: 0;}
h3{font-size:3.2em; font-style:italic; margin-top: 0;}

.content .line{border-bottom: 2px dotted #262626; margin: 2em auto; display: block; width: 100%; max-width: 90em;}

.content a{color:#d50160; text-decoration: none; font-weight: bold;}
.content ul {list-style-type: none; padding: 0; margin: 0 auto 0 auto; text-align: left; font-size:1.8em; display: block; width: 100%; max-width: 50em;}
.content ul li{font-weight:bold; padding: 1em 2em;}
.content ul li span{font-weight:normal; font-style: italic;}

.content .start {color:#7a6464; padding-top: 0.1em;}
.content .start p{text-align: center; font-weight: bold; font-size: 2.2em; line-height: 0; padding: 0;}
.content .start .nr{color:#d50160; font-size: 4em; font-weight: bold;}
.content .start .mobnr{display: none; background: #d50160; color: #fff;font-size: 3em; font-weight: bold; line-height: 2em; border-radius: 1em; padding: 0 1em; margin: 0.5em;}
.content .start .tarief{color:#262626; font-size: 1.4em; font-style: italic; font-weight: normal; padding-bottom: 1em;}

.content .voorwie{background-image: url(../images/kletser_voorwie.jpg); background-size: cover;}
.content .voorwie h3{color:#fff;}
.content .voorwie p{color:#fff;}

.content .in3stappen{background-image: url(../images/kletser_in3stappen.jpg); background-size: cover;}
.content .in3stappen h3{color:#fff;}
.content .in3stappen p{color:#fff;}

.content .voorstellen{background: #002e6c;}
.content .voorstellen h3{color:#fff;}
.content .voorstellen .wrapper > div{display: table; width:100%;}
.content .voorstellen .wrapper > div > span{display:table-cell; width:50%; vertical-align:top; font-style:italic; padding-right:3em;}
.content .voorstellen .wrapper > div > span p.name{font-style:normal; font-weight:bold;}
.content .voorstellen p{color:#fff;}

.content video{margin-bottom:2em; max-width: 100%; height: auto;}

.content .faq .item{border-bottom: 2px solid #e6e6e6; position: relative;}
.content .faq .item .plus, .content .faq .item .min{position: absolute;right: 0; top: 0; font-size: 3em; font-weight: bold;pointer-events: none;}
.content .faq .item .min{display:none;}
.content .faq .item h4{font-weight:bold; font-size: 1.8em; text-align: left; cursor: pointer;}
.content .faq .item p{display:none;}

footer{background:#f4f8fe;padding: 2.4em 0; text-align: center;color: #002e6c;}
footer ul {list-style-type: none; padding: 0; margin: 0 0 2em 0;}
footer ul li{ display: inline-block; padding:0 3em; border-right: 1px solid #002e6c; line-height: 2.4em; }
footer ul li:last-of-type{border-right: none;}
footer ul li a{ color: #002e6c; font-size: 1.4em; text-decoration: none;}
footer ul li a:hover{opacity:0.8;}
footer p{font-size: 1.2em;}

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 15px 15px;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
  display:none;
  position: absolute;
  right: 6.5%;
  top: 2.5em;
}
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #002e6c; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #002e6c;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

/* Squeeze */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
  .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }



@media only screen and (max-width : 1024px) {
	header .wrapper{width:90%;}
	.wrapper{width:90%;}
	.hamburger {display:block;}
	nav{display: none;}
	nav.active{display: block; position: absolute; top: 9em; width: 100%; left: 0; background: #f4f8fe;padding-bottom: 2em;}
	nav.active li{display:block; margin: 0; text-align: left; padding: 0 3em; line-height: 5em;}
	nav.active li:last-of-type{display:none;}
	.mobkletsbtn{display: block;clear: both;text-align: center;text-decoration: none; margin-top: 1em; float:none;}
	.logo{display:block;}

}
@media only screen and (max-width : 768px) {
	header .wrapper{width:95%;}
	.wrapper{width:95%;}
	h1{font-size: 3em;}
	h2{width:auto;}
	.content ul li{ padding: 1em 0em;}
	.content .start .nr{display: none;}
	.content .start .mobnr{display: inline-block;}
	.content .voorstellen .wrapper > div > span{display: block; width:100%; padding-right: 0;}
	.content .faq .item .plus, .content .faq .item .min{top: -0.2em;}
	footer ul li{border: none; display:block;}
	.hamburger { right: 4.5%;}
	
}