/***************************
Add your custom styles below
****************************/

@font-face {
 font-family:"Produkt";
 src:url(Produkt-Super-Web.woff2) format("woff2"),
 url(Produkt-Super-Web.woff) format("woff");
 font-weight:900;
 font-style:normal;
 font-stretch:normal;
 font-display:swap
}
@font-face {
 font-family:"Produkt";
 src:url(Produkt-Bold-Web.woff2) format("woff2"),
 url(Produkt-Bold-Web.woff) format("woff");
 font-weight:700;
 font-style:normal;
 font-stretch:normal;
 font-display:swap
}
@font-face {
 font-family:"Produkt";
 src:url(Produkt-Light-Web.woff2) format("woff2"),
 url(Produkt-Light-Web.woff) format("woff");
 font-weight:300;
 font-style:normal;
 font-stretch:normal;
 font-display:swap
}
@font-face {
 font-family:"Graphik";
 src:url(Graphik-Semibold-Web.woff2) format("woff2"),
 url(Graphik-Semibold-Web.woff) format("woff");
 font-weight:600;
 font-style:normal;
 font-stretch:normal;
 font-display:swap
}
@font-face {
 font-family:"Graphik";
 src:url(Graphik-Regular-Web.woff2) format("woff2"),
 url(Graphik-Regular-Web.woff) format("woff");
 font-weight:400;
 font-style:normal;
 font-stretch:normal;
 font-display:swap
}






body{
    background:#FFFFFF;
}

.groen {
	color: #BED249 !important;
}

.blauw {
	color: #00378B !important;
}

.bluebg{
    background:#00378B;
}

.wit {
	color: #FFFFFF !important;
}


.donkerblauw {
	color: #00378B !important;
}

h1 {
    font-family: 'Produkt', serif;
    text-transform: none;
    color: #00378B;
    font-weight: 700;
    font-variant-ligatures: common-ligatures;
	}

h2 {
    font-family: 'Produkt', serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #fff;
	text-transform: none;
}

h5{
    font-weight:800;
}

.btn.btn--primary {
    border-color: #FFF;
}

.aangebodendoor{
    font-family: 'Produkt', serif; 
    font-weight: 300; 
    font-style: normal; 
    font-size:16px; 
    color: #fff
}


.lookblock{
    background:#C3DEF2; 
    background:rgba(195,222,242,0.6);
    margin-bottom:50px;
}

.looktitle{
    padding-top:30px;
    padding-bottom:30px;
}

.looktitle h2{
    font-size:25px;
    font-weight:600;
    color:#333333;
}


.btn .btn__text {
    letter-spacing: 0px;
    font-family: 'Produkt', serif;
    text-transform: none;
	font-weight: 700;
    font-size: 16px;
}

.btn:hover {
	color:#fff;
	background-color: #00378B;;
}

.btn.btn--square {
    border-radius: 0 0 0 0;
    border-color: #00378B;
    padding: 15px;
}

.btn.btn--square{
    color: #00378B  
}

.btn.btn--square:hover{
    color: #FFFFFF;  
}

.btn.btn--square:hover .btn__text{
    color:#FFFFFF;
}

.btn.btn--squaredark:hover .btn__textdark{
    color:#00378B;
}

.btn.btn--squaredark {
    border-radius: 0 0 0 0;
    border-color: #fff;
    padding: 15px;
}

.btncta, .btncta:hover{
    background:#fff;
    color:#00378B !important;
    font-size:12px !important;
    border:none;
    margin-top:15px;
}


.btn.btn--squaredark:hover {
	background-color: #fff;
}

.btn .btn__textdark {
    letter-spacing: 0px;
    font-family: 'Produkt', serif;
    text-transform: none;
    font-weight: 700;
    font-size: 16px;
	color: #FFF;
}





.btn.btn--primary:hover{
    background:#FFFFFF;
    border:2px solid #FFFFFF;
}

.btn, 
.btn.btn--primary, 
.btn.btn--primary.btn__text{
    transition: 0.3s;
}

.btn.btn--primary:hover .btn__text{
    color:#00378B;
}





/* Style the header */
.header {
  padding-top: 15px;
  padding-bottom:5px;
  background: #00378B;
  color:#FFFFFF;
  font-family: ainslie-sans, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size:16px;
 z-index: 999;
	text-transform: none;
}

/* Page content */
.content {
  padding: 20px;
}

.mb-30{
    margin-bottom:30px;
}

.mb-50{
    margin-bottom:50px;
}

.mb-100{
    margin-bottom:100px;
}

.pt-50{
    padding-top:50px !important;
}

.pb-50{
    padding-bottom:50px !important;
}

.maxartwidth{
    max-width:500px;
}

.littlefont{
    font-size:15px;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 102px;
}

.topslidetitel{
    margin-top: 50px;
    font-size:45px;
	font-family: 'Produkt', serif;
	text-transform: none;
	font-weight: 700;
}

.artikeloverzichttitel{
    font-size:40px;
    color:#FFFFFF;
	font-family: 'Produkt', serif;
	text-transform: none;
	font-weight: 700;
}

.artikeloverzichtsubtitel{
    font-size: 30px; 
    line-height: 40px; 
    font-weight: 400; 
    color:#3c3c3b !important;
}

.artikeloverzichtsubtitellicht{
    font-size: 30px; 
    line-height: 40px; 
    font-weight: 400; 
    color:#fff !important;
}

.about-1, .about-2{
    padding-top:0px !important;
    padding-bottom:0px !important;
}
.about-1{
    padding-top:0px !important;
    padding-bottom:0px !important;
	background-color:#00378B;
}

.edgewit{
    position:absolute; 
    bottom:0; 
    right:0px; 
    z-index:999999;
}

.edgegroen{
    position:absolute; 
    bottom:0; 
    left:0px; 
    z-index:999999;
}

.edgeblauw{
    position:absolute; 
    bottom:0; 
    left:0px; 
    z-index:999999;
}

.edgewit img, .edgegroen img, .edgeblauw img{
    width:290px;
}

.hide-overflow{
    overflow:hidden;
}

.artikelsubtitel{
    text-transform: none;
    font-family: 'Graphik', sans-serif;
    font-weight:600;
    font-size:18px;
}

.pb-0{
    padding-bottom:0;
}



.nieuwsbladheader, .standaardheader{
    min-height:50px;
    height:150px !important;
    border:none; 
    margin:0;
    
    overflow:hidden !important;
}

.standaardheader{
    height:100px !important;
}


@media(min-width:1040px){
    .nieuwsbladheader{
        margin-bottom:-10px;
    }
    
}

@media(max-width:1039px){
    .nieuwsbladheader{
        min-height:30px !important;
        height:100px !important;
    }
    .top-holder{
        background-image:url('../img/topheader_m.jpg') !important;
    }
}


.pricing-4 {
        padding-bottom:0 !important;
    }


.listbutton li{
    border:1px solid #333333; 
    padding:10px 10px; 
    line-height:20px;
    margin-bottom:20px;
}

.listbutton:hover li{
    color:#FFFFFF;
}


.hoveritem img{
    max-height:220px;
    margin-left:auto;
    margin-right:auto;
}

.hoveritem img:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.1);
}

.itemtitel{
    margin-top:30px; 
    text-align:center;
    margin-bottom:0;
}

.itemlink{
    color:#00378B; 
    font-size:15px; 
    font-family:'Produkt',serif; 
    font-weight:700; 
    text-decoration:none;
}

.itemonderschrift{
    font-size:12px;
    text-align:center;
    margin-bottom:50px; 
    color:#999999;
    font-weight:bold;
}


.overflowvis{
    overflow:visible !important;
}

.mijnkleerkast{
    position:absolute; right:0; top:18px; width:150px;
}

.ctapop{
    position:fixed; 
    top:155px; 
    left:0; 
    max-width:250px; 
    background:rgba(0,55,139,0.8); 
    color:#fff; 
    z-index:999999999;
    font-size:145x;
    line-height:20px;
}

.ctapop p{
    margin-bottom:0;
}

.cta-padding{
    padding:20px 20px 20px 20px;
}

.cta-padding h3{
    font-size:12px;
    margin-bottom:10px;
}

.cta-padding a{
    font-size:10px;
}

.ctapop a{
    color:#FFFFFF;
}

@media(max-width:991px){
    .footerkiwi{
        max-width:200px;
    }
    
    .camelbg{
        background-image:url('../img/vijf_keer_de_kleur_camel_combineren_square.jpg') !important;
    }
}

@media(max-width:767px){
   .edgewit, .edgegroen, .edgeblauw{
    display:none;
    } 
    
    .mijnkleerkast{
        top:22px;
    }
    
    
    .artikeloverzichttitel{
    font-size:30px;
    }
    
    .artikeloverzichtsubtitel{
        font-size:20px;
    }
    
    footer{
        padding-top:0 !important;
    }
    
    .standaardheader{
        min-height:30px !important;
        height:70px !important;
    }
    .btn .btn__text {
        font-size:12px; !important;
    }

    .camelbg{
        background-image:url('../img/vijf_keer_de_kleur_camel_combineren.jpg') !important;
    }
}

@media(max-width:614px){
    .nieuwsbladheader{
        min-height:30px !important;
        height:35px !important;
    }
    
    .krantheader{
        height:40px !important;
    }
    
    .standaardheader{
        height:70px !important;
    }
}