/*************************************************************
 cssBanner.v2.css
 Version: 2022.01
 Written by Polite Web & Graphics https://www.polite.nl															  
*************************************************************/
.bannerBox {
    display: inline-block;
    position: relative;
    width: 100%;
    height: inherit;
    /*padding-right: 15px;*/
    /*padding-left: 15px;*/
    box-sizing: border-box;
    z-index: 999;
    overflow: hidden;
    /*border-radius: 4px;*/
}

.banner {
    width: 100%;
    height: inherit;
    /*border-radius: 15px;*/
    position: relative;    
	overflow: hidden;
}
.banner figure{
    height: inherit;
}
.banner figure img,
.banner figure.achtertekst img{
    width: 100%;
    height: inherit;
    object-fit: cover;
    object-position: center;
}
.banner figure.geschakeld img{
    height: 50%;
}
.banner div{
    width: calc(100% - 30px); /* min padding L en R bannerBox */
    position: absolute;
    /*top: 0;*/
    /*margin: 0 15px;*/
    padding: 30px;
    box-sizing: border-box;
}
.banner .titel h2{
    font-family: "FranklinGothicDemi", CenturyGothicRegular, Arial;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
	/*color: #0253a2;*/
    /*text-shadow: 1px 1px 2px #000000;*/
}
.banner div.txtGeschakeld .titel h2{
    font-family:Arial;
    color: #0253a2;
}
.banner div.txtBoven{
    top: 0;
    text-shadow: 1px 1px 2px #000000;
}
.banner div.txtOnder{
    bottom: 30px;
    text-shadow: 1px 1px 2px #000000;
}
.banner div.txtGeschakeld {
    top: 44%;
    height: 56%;
    background: #ffffff;
    width: calc(100% - 8%);
    margin: 0 4%;
    padding: 10px;
}
.banner div.txtGeschakeld a{
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    font-family: inherit;
}
.banner div.txtBovenKnop{
    bottom: 80px;
}
.banner span.tekst{
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media only screen and (max-width: 1024px) {
    .banner span.tekst{
        -webkit-line-clamp: 4;
    }

}
.banner .knop {
    position: absolute;
    bottom: 40px;
    left: 40px;
    min-width: 220px;
    height: 40px;
    padding: 2px 16px;
    font-size:15px;
    line-height: 40px;
    text-decoration: none;
    text-align: center;
    color: #333333;
    font-weight:bold;
    background-color: rgb(255, 186, 16);
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    border: solid 1px rgb(187, 136, 9);
    -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.3);
}

.banner .knop:after {
    content: ">";
    margin-left: 25px;
    /*font-family: fontAwesome;*/
}

.banner  div.txtGeschakeld a.link {
    font-size: 16px;
    line-height: 31px;
    text-decoration: none;
    font-weight: bold;
    position: absolute;
    bottom: 0;
}

@media only screen and (max-width: 800px) {
    .banner figure {
        /*height: unset;*/
    }
    .banner div.txtGeschakeld{
        top: 44%;
        height: 50%;
        padding: 5px;
    }
    .banner div.txtGeschakeld .titel h2 {
        line-height: 20px;
        padding-bottom: 5px;
    }
    .banner span.tekst{
        -webkit-line-clamp: 4;
        font-size: 12px;
    }
}