/*==================================================
Main
==================================================*/
html{
height: 100%;
}
body{
min-height:100%;
font-family: 'Open Sans', sans-serif;
font-weight:400;
background-color:#f5f5f5;
}
img { margin: 0 auto;}
/* Bootstrap adjustments */
.container{
padding-left: 20px !important;
padding-right: 20px !important;
}
h1,h2,h3,h4,h5,h6,p{
margin-top: 0px;
margin-bottom: 0px;
line-height: 120%;
}
h5{font-size: 16px;}
p.text-klein{font-size: 12px;}
/* colomun paddings */
/* use equivalent negative row margin class on the parent row for correct alignment */
.col-pad-0{ padding-left: 0px; padding-right: 0px;}
.col-pad-5{ padding-left: 5px; padding-right: 5px;}
.col-pad-10{ padding-left: 10px; padding-right: 10px;}
.col-pad-15{ padding-left: 15px; padding-right: 15px;}
/* negative row margins */
.row-mar-0{ margin-left: 0px; margin-right: 0px;}
.row-mar-5{ margin-left: -5px; margin-right: -5px;}
.row-mar-10{ margin-left: -10px; margin-right: -10px;}
.row-mar-15{ margin-left: -15px; margin-right: -15px;}
/* bottom margins */
.mar-bot-0{ margin-bottom: 0px !important;}
.mar-bot-5{ margin-bottom: 5px !important;}
.mar-bot-10{ margin-bottom: 10px !important;}
.mar-bot-15{ margin-bottom: 15px !important;}
.mar-bot-20{ margin-bottom: 20px !important;}
.mar-bot-25{ margin-bottom: 25px !important;}
.mar-bot-30{ margin-bottom: 30px !important;}
.mar-bot-40{ margin-bottom: 40px !important;}
.mar-bot-50{ margin-bottom: 50px !important;}
.mar-bot-60{ margin-bottom: 60px !important;}
.mar-bot-70{ margin-bottom: 70px !important;}
.mar-bot-80{ margin-bottom: 80px !important;}
.mar-bot-90{ margin-bottom: 90px !important;}
.mar-bot-100{ margin-bottom: 100px !important;}
/* Use around a sentence if you need a
after the sentence wich should turn into a space on mobile devices */
span.line-break, span.line-break-sml {
display: block;
}
span.line-break:after, span.line-break-sml:after {
content: none;
}
/* Use this class to prevent unwanted wrappings */
span.inline{
display: inline-block;
}
.text-300, .text-light{ font-weight: 300 !important;}
.text-400, .text-regular{ font-weight: 400 !important;}
.text-600, .text-semi-bold{ font-weight: 600 !important;}
.text-700, .text-bold{ font-weight: 700 !important;}
.text-900, .text-extra-bold{ font-weight: 900 !important;}
.text-italic{ font-style: italic !important;}
.text-underline{ text-decoration: underline !important;}
.text-right{ text-align: right !important;}
.text-uppercase{ text-transform: uppercase !important;}
/** remove dotted link border **/
a:hover,
a:active,
a:focus,
a:link,
a:visited {
outline: 0;
outline: 0 !important;
color:#0000ef;
text-decoration: underline;
}
button, object, embed {
outline: 0;
}
/*==================================================
Campagne
==================================================*/
/* Kleuren */
.zwart{color: #000;}
.wit{color: #fff;}
.grijs{color: #999;}
.donkergrijs{color: #686868;}
.donkergrijs{color: #333;}
.paars{color: #7e4f77;}
.groen{color: #42b99f;}
.oranje{color: #fc6703;}
/* Font awesome */
.fa, .fas, .far{
font-weight: 900;
}
/*==================================================
Pagina-1
==================================================*/
/* Header */
.header{
padding: 15px 0px 10px;
background-color:#fff;
border-bottom:solid 2px #eeeeee;
}
.header-logo img{
margin-left: 0px;
}
.advertorial{
position: absolute;
right: 5px;
font-size: 12px;
color: #bbb;
}
/* Content */
.content-container{
background-color:#fff;
padding: 20px 50px;
}
.content-container h2{
font-size: 26px;
line-height: 140%;
}
.header-beeld{
margin-bottom: 10px;
}
.lijn{
border-top: solid 1px #dedede;
}
.content-container h5{
line-height: 160%;
}
.divider{
padding: 25px 0px 10px;
background-color: #f5f5f5;
}
.divider h2{
font-size: 22px;
}
.divider h2 i{
font-size: 52px;
}
.scrolltobottom{
text-decoration: underline;
cursor: pointer;
}
.letters{
display: inline-block;
font-size: 16px;
}
.scrollto, .scrollto_disabled{
margin-bottom: 2px;
display: inline-block;
width: 25px;
text-align: center;
border-right: 1px solid #42b99f;
border-right: 1px solid #999;
}
.scrollto:last-child, .scrollto_disabled:last-child{
border-right: none;
}
.scrollto{
color: #42b99f;
cursor: pointer;
}
.scrollto:hover{
text-decoration: underline;
}
.scrollto_disabled{
color: #bbb;
}
.content-container .bottom h5{
line-height: 120%;
}
a.green{
font-size:14px;
color:#42b99f;
text-decoration:none;
}
/* Footer */
.footer{
padding: 20px 0px;
background-color:#222323;
font-size: 12px;
font-weight: 500;
color: #fff;
}
.footer a, .footer a:hover{
color: #fff;
}
/*==================================================
Media Queries
==================================================*/
@media only screen and (max-width: 1199px){
.content-container h2 {
font-size: 21px;
}
}
@media only screen and (max-width: 991px) {
}
@media only screen and (max-width: 767px) {
.header{
padding-top: 20px;
}
.advertorial{
/* position: relative;*/
top: -15px;
}
.content-container {
padding: 10px 20px 30px;
}
.content-container h2{
font-size: 24px;
}
/* Change the line-break into a space */
span.line-break {
display: inline;
}
span.line-break:after {
content: ' ';
}
}
@media only screen and (max-width: 479px) {
body{
background-color: #fff;
}
.header-logo img{
/* width: 90%;*/
}
.header .advertorial{
/*
margin-top: 0px;
margin-left: -15px;
font-size: 12px;
*/
font-size: 11px;
}
.content-container {
padding: 20px 15px 10px;
}
.content-container h2 {
font-size: 17px;
}
.lijn.mar-bot-25, h5.mar-bot-25, ul.mar-bot-25{
margin-bottom: 20px !important;
}
.content-container h5{
font-size: 14px;
}
.divider{
padding: 15px 0px 5px;
}
.divider h2{
font-size: 16px;
}
.divider h2 i{
font-size: 46px;
}
/* Change the line-break into a space */
span.line-break-sml {
display: inline;
}
span.line-break-sml:after {
content: ' ';
}
/* Bootstrap adjustments */
.container {
padding-left: 10px !important;
padding-right: 10px !important;
}
.col-pad-15{
padding-left: 10px; padding-right: 10px;
}
.row-mar-15{
margin-left: -10px; margin-right: -10px;
}
.hidden-xxs{
display: none !important;
}
.visible-xxs-block {
display: block !important;
}
}