/*
Theme Name: WPStandaard
Description: 'Systemic Work' is een thema ontwikkeld door Webrandt in opdracht van Orzse Adam.
Author: Jacques Uljé
Author URI: http://www.webrandt.nl
Version: 0.1
*/
/**********************
       IMPORT FONTS
***********************/
@font-face {
  font-family: 'Source Sans';
  font-display: swap;
  src: local('Source Sans Pro Regular'), local('Source-Sans-Pro-Regular'), url('webfonts/SourceSansPro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Source Sans Bold';
  font-display: swap;
  src: local('Source Sans Pro Semi Bold'), local('Source-Sans-Pro-Semi-Bold'), url('webfonts/SourceSansPro-Bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Source Sans SemiBold';
  font-display: swap;
  src: local('Source Sans Pro Semi Bold'), local('Source-Sans-Pro-Semi-Bold'), url('webfonts/SourceSansPro-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Source Sans Italic';
  font-display: swap;
  src: local('Source Sans Pro Italic'), local('Source-Sans-Pro-Italic'), url('webfonts/SourceSansPro-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}
/**********************
       IMPORT LESS
***********************/
/**********************
       CONSTANTS
***********************/
/***********************************
    header- and navigation styles
***********************************/
.collapsing {
  -webkit-transition: none !important;
  transition: none !important;
  display: none !important;
}
.mobilenavcontactinfo {
  margin-top: 25px;
  padding-left: 35px;
}
#header {
  padding: 0px;
  margin: 0px;
  background-color: transparent;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 1000;
}
#header .headerachtergrondverloop {
  background-image: url(images/header_achtergrond_verloop.png);
  background-size: cover;
}
#header #blingcontainer {
  padding-top: 25px;
  padding-bottom: 25px;
}
#header #blingcontainer .logowrap img {
  width: 85%;
  margin-left: 15px;
}
@media only screen and (max-width: 767px) {
  #header #blingcontainer .logowrap img {
    width: 70%;
  }
}
@media only screen and (max-width: 767px) {
  #header #blingcontainer .logowrap {
    margin-bottom: 20px;
  }
}
#header #blingcontainer .melodywrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#header #blingcontainer .melodywrap img {
  width: 95%;
}
@media only screen and (max-width: 767px) {
  #header #blingcontainer .melodywrap img {
    width: 70%;
    margin-right: 15px;
  }
}
@media only screen and (max-width: 767px) {
  #header #blingcontainer .melodywrap {
    align-items: flex-end;
  }
}
@media only screen and (max-width: 767px) {
  #header #blingcontainer {
    padding-top: 25px;
    padding-bottom: 10px;
  }
}
#header #hoofdnavigatie.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
}
#header #hoofdnavigatie #h_nav {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.3s;
}
#header #hoofdnavigatie #h_nav #ChangeToggle {
  position: fixed;
  z-index: 1000;
  top: 2px;
  right: 15px;
  height: 40px;
}
@media (max-width: 767px) {
  #header #hoofdnavigatie #h_nav {
    height: 60px;
  }
}
#header #navwrap.container-fluid,
#header #notenbalk.container-fluid {
  max-width: none;
  padding: 0px;
  margin: 0px;
}
#header #navwrap.container-fluid .row,
#header #notenbalk.container-fluid .row {
  padding: 0px;
  margin: 0px;
}
#header #navwrap.container-fluid .row [class*="col-"],
#header #notenbalk.container-fluid .row [class*="col-"] {
  padding: 0px;
  margin: 0px;
}
#header #notenbalk.container-fluid {
  height: 31px;
  background-image: url(images/notenbalk.png);
  background-position: center;
}
#header a,
#header a:hover {
  text-decoration: none;
}
/**********************
         navigation
***********************/
.nav,
.navbar-nav {
  list-style: none;
  margin: 10px 0px 10px 0px;
  display: inline-block;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .nav,
  .navbar-nav {
    float: none;
    margin-top: 10px;
    text-align: left;
  }
}
.nav > li {
  display: inline-block;
  height: 17px;
  float: none;
}
.nav > li > a {
  font-family: 'Source Sans Bold', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-optical-sizing: none;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0.5px;
  padding: 0 15px 0px 20px;
  position: relative;
  display: block;
  text-decoration: none;
  color: #000000;
  text-transform: uppercase;
}
.nav > li > a:hover {
  color: #e1655a;
}
.nav > li > a.active {
  color: #e1655a;
}
@media only screen and (max-width: 767px) {
  .nav > li > a {
    border-left: solid 0px #fff;
    font-size: 15px;
    line-height: 18px;
    padding-left: 0px;
  }
}
@media only screen and (max-width: 767px) {
  .nav > li {
    display: block;
    height: auto;
    padding: 0px;
  }
}
@media only screen and (max-width: 767px) {
  .secondarynavmobile .nav > li {
    display: inline-block;
    height: 17px;
    float: none;
  }
}
.nav > li.current-menu-item > a {
  color: #e1655a;
}
.navbar-collapse.collapse {
  transition: all 0s !important;
}
@media only screen and (max-width: 767px) {
  .navbar-collapse.collapse.in {
    background-color: #fff;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    height: 100vh !important;
    z-index: 1000;
    overflow: visible;
    visibility: visible;
    overflow: auto;
    padding-bottom: 100px;
    display: block !important;
    background: linear-gradient(to bottom, #e6f0eb 0%, #ffffff 100%);
  }
}
.navbar-toggle {
  background-color: transparent;
  padding: 0px;
  margin: 7px 10px;
  border: 0px solid #000;
}
.navbar-toggle #navbar-hamburger {
  display: block;
  margin: 7px 7px 7px 7px;
}
.navbar-toggle #navbar-hamburger .icon-bar {
  background-color: #fff;
  width: 30px;
  height: 2px;
  border-radius: 0px;
  margin-top: 8px;
  transition: all 0.3s;
}
.navbar-toggle #navbar-hamburger.active .icon-bar:nth-of-type(1) {
  display: none;
}
.navbar-toggle #navbar-hamburger.active .icon-bar:nth-of-type(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.navbar-toggle #navbar-hamburger.active .icon-bar:nth-of-type(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin-top: -2px;
}
/**********************
   Submenu uitklap
***********************/
.dropdowncaret {
  /* display: none;  */
}
/* voor de 'upward carot' bij het submenu dropdown, verdwenen in bootstrap 3... */
/*
.navbar .dropdown-menu:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    border-left: 6px solid transparent;
    content: '';
}
*/
/* om on hover (mouseover) de submenu's te laten uitklappen activeren van onderstaand CSS, het toggelen is uitgeschakeld zie jQuery script 
om te toggelen onderstaand CSS uitschakelen en in theme_scripts.js removeAttr data-toggle uitschakelen (dus dat Attribute moet niet worden verwijderd)
om te hoveren onderstaand CSS inschakelen en in theme_scripts.js removeAttr data-toggle inschakelen (dus dat Attribute moet wel worden verwijderd)
*/
.dropdown:hover .dropdown-menu {
  display: block !important;
}
.navbar-nav li .dropdown ul {
  padding: 5px 20px 5px 0px;
}
.navbar-nav li .dropdown ul.active {
  height: auto;
}
.navbar-nav li .dropdown-menu {
  border: 0px solid #fff;
  border-radius: 0px;
  margin-top: 0px;
}
.navbar-nav li .dropdown-menu li a {
  font-size: 14px;
  line-height: 17px;
  color: #000000;
  background-color: transparent;
}
.navbar-nav li .dropdown-menu li a:hover {
  color: #e1655a;
}
.navbar-nav li .dropdown-menu li.active a:hover {
  background-color: transparent;
  color: #e1655a;
}
@media only screen and (max-width: 767px) {
  .navbar-nav li .dropdown ul {
    padding: 0px 20px 10px 0px;
  }
  .navbar-nav li .dropdown-menu {
    position: static;
    display: block;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .navbar-nav li .dropdown-menu li a {
    font-size: 16px;
    line-height: 24px !important;
    padding: 3px 20px !important;
  }
}
@media (max-width: 767px) {
  .navbar-header {
    float: none;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-nav {
    float: none !important;
  }
  .navbar-nav > li {
    float: none;
  }
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar-text {
    float: none;
    margin: 15px 0;
  }
  /* since 3.1.0 */
  .collapsing {
    overflow: hidden !important;
  }
}
/**********************
    footer styles
***********************/
#footer {
  background-color: transparent;
  color: #000000;
  width: 100%;
  min-height: 50px;
  padding: 60px 20px 0px 20px;
  margin: 0px;
  font-size: 12px;
  line-height: 25px;
}
#footer.footerachtergrondverloop {
  background-image: url(images/header_achtergrond_verloop.png);
  background-size: cover;
}
#footer h1,
#footer h2 {
  font-family: 'Source Sans SemiBold', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-optical-sizing: none;
  color: #000000;
  font-size: 18px;
  line-height: 20px;
  text-transform: capitalize;
  margin-bottom: 10px;
  margin-top: 0px;
}
#footer p,
#footer .footertext {
  font-family: 'Source Sans', sans-serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: inherit;
  max-width: 900px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
#footer a {
  color: #000000;
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}
#footer .spacerfooter {
  height: 50px;
}
@media only screen and (max-width: 767px) {
  #footer {
    padding: 20px 0px 20px 0px;
  }
}
/**********************
       Buttons
***********************/
.dropcategories {
  display: block;
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid #000;
  width: auto;
}
.blacklabel {
  height: 30px;
  /* height: auto; */
  width: auto;
  /* border-radius:360px; */
  border-radius: 30px;
  text-align: center;
  padding: 0px 20px 0px 20px;
  background-color: #e1655a;
  display: inline-block;
  margin-right: 10px;
}
.blacklabel span {
  line-height: 30px;
  font-size: 12px;
  color: #ffffff;
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  .blacklabel {
    margin-bottom: 10px;
  }
}
.whitebutton {
  font-size: 16px;
  letter-spacing: 1.5px;
  white-space: nowrap;
  line-height: 48px;
  height: 48px;
  padding: 0px 30px 0px 30px;
  background-image: linear-gradient(#ffffff, #ffffff);
  color: #000000;
  /* height: auto; */
  width: fit-content;
  border-radius: 5px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}
.whitebutton a {
  text-decoration: none;
  display: block;
  color: #000000;
  font-size: 16px;
  line-height: 48px;
}
.whitebutton a:hover {
  text-decoration: none;
  color: inherit;
}
.whitebutton a:focus {
  text-decoration: none;
  color: inherit;
}
.loadmore {
  font-size: 16px;
  letter-spacing: 1.5px;
  white-space: nowrap;
  line-height: 35px;
  height: 35px;
  padding: 0px 30px 0px 30px;
  background-image: linear-gradient(#9a9498, #e1c9b2);
  color: #ffffff;
  /* height: auto; */
  width: fit-content;
  border-radius: 8px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  margin: 20px 0px 60px 0px;
}
.loadmore a {
  text-decoration: none;
  display: block;
  color: #ffffff;
  font-size: 16px;
  line-height: 35px;
}
.loadmore a:hover {
  text-decoration: none;
  color: inherit;
}
.loadmore a:focus {
  text-decoration: none;
  color: inherit;
}
.leesmeer,
.readmore,
.redbutton,
form input[type="submit"],
form.wpcf7-form input[type="submit"] {
  font-size: 16px;
  letter-spacing: 1.5px;
  white-space: nowrap;
  line-height: 35px;
  height: 35px;
  padding: 0px 30px 0px 30px;
  background-image: linear-gradient(#e1655a, #e1655a);
  color: #ffffff;
  /* height: auto; */
  width: fit-content;
  border-radius: 8px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  margin: 20px 0px 20px 0px;
}
.leesmeer a,
.readmore a,
.redbutton a {
  text-decoration: none;
  display: block;
  color: #ffffff;
  font-size: 16px;
  line-height: 35px;
}
.leesmeer a:hover,
.readmore a:hover,
.redbutton a:hover {
  text-decoration: none;
  color: inherit;
}
.leesmeer a:focus,
.readmore a:focus,
.redbutton a:focus {
  text-decoration: none;
  color: inherit;
}
/*

<div class="blacklabel"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si enim ita est, vide ne facinus facias, cum mori suadeas. Similiter sensus, cum accessit ad naturam, tuetur illam quidem, sed etiam se tuetur</span></div>
<div class="greenbutton">Inschrijven</div>
<div class="onzemissiebutton">Onze missie</div>
<div class="darkgraybutton">Steun ons</div>

// Lees meer ronde knop 
// https://stackoverflow.com/questions/55281672/make-plus-symbol-in-css

.leesmeer {
  display:inline-block;
  width:50px;
  height:50px;
  cursor: pointer;
  
  background:
    linear-gradient(#fff,#fff),
    linear-gradient(#fff,#fff),
    @green;
  background-position:center;
  background-size: 50% 2px,2px 50%; 
  background-repeat:no-repeat;
}

*/
/*********************
    Add margins to the columns in the Column Shortcode plugin
    https://github.com/codepress/column-shortcodes
***********************/
form .three_fifth,
.infobox .three_fifth {
  width: 70%;
  padding-right: 40px;
}
@media only screen and (max-width: 900px) {
  form .three_fifth,
  .infobox .three_fifth {
    clear: both;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
form .one_half,
.infobox .one_half {
  width: 49%;
  margin-right: 2%;
}
form .one_half ul,
.infobox .one_half ul {
  margin: 0px;
}
@media only screen and (max-width: 900px) {
  form .one_half,
  .infobox .one_half {
    clear: both;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
form .one_half.last_column,
.infobox .one_half.last_column {
  width: 49%;
  margin-right: 0px;
}
form .one_half.last_column ul,
.infobox .one_half.last_column ul {
  margin: 0px;
}
@media only screen and (max-width: 900px) {
  form .one_half.last_column,
  .infobox .one_half.last_column {
    clear: both;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
form .one_third,
.infobox .one_third {
  width: 32%;
  margin-right: 2%;
}
form .one_third.last_column,
.infobox .one_third.last_column {
  width: 32%;
  margin-right: 0px;
}
@media only screen and (max-width: 900px) {
  form .one_third.last_column,
  .infobox .one_third.last_column {
    clear: both;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
@media screen and (max-width: 900px) {
  form .full_width,
  .infobox .full_width,
  form .one_half,
  .infobox .one_half,
  form .one_third,
  .infobox .one_third,
  form .two_third,
  .infobox .two_third,
  form .one_fourth,
  .infobox .one_fourth,
  form .three_fourth,
  .infobox .three_fourth,
  form .one_fifth,
  .infobox .one_fifth,
  form .two_fifth,
  .infobox .two_fifth,
  form .three_fifth,
  .infobox .three_fifth,
  form .four_fifth,
  .infobox .four_fifth,
  form .one_sixth,
  .infobox .one_sixth,
  form .five_sixth,
  .infobox .five_sixth {
    clear: both;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0px;
    padding-right: 0px;
  }
}
@media screen and (max-width: 767px) {
  .full_width,
  .one_half,
  .one_third,
  .two_third,
  .one_fourth,
  .three_fourth,
  .one_fifth,
  .two_fifth,
  .three_fifth,
  .four_fifth,
  .one_sixth,
  .five_sixth {
    clear: both;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0px;
    padding-right: 0px;
  }
}
/*

.one_third {
    width: 32% !important;
    margin-right: 2% !important;
}
.one_third.last_column {
    width: 32% !important;
    margin-right: 0px !important;
}
.two_third {
    width: 66% !important;
    margin-right: 2% !important;
}
.two_third.last_column {
    width: 66% !important;
    margin-right: 0px !important;
}
.one_fourth {
    width: 23.5% !important;
    margin-right: 2% !important;
}
.one_fourth.last_column {
    width: 23.5% !important;
    margin-right: 0px !important;
}
.three_fourth {
    width: 74.5% !important;
    margin-right: 2% !important;
}
.three_fourth.last_column {
    width: 74.5% !important;
    margin-right: 0px !important;
}
.one_fifth {
    width: 18.4% !important;
    margin-right: 2% !important;
}
.one_fifth.last_column {
    width: 18.4% !important;
    margin-right: 0px !important;
}
.two_fifth {
    width: 39% !important;
    margin-right: 2% !important;
}
.two_fifth.last_column {
    width: 39% !important;
    margin-right: 0px !important;
}
.three_fifth {
    width: 59% !important;
    margin-right: 2% !important;
}
.three_fifth.last_column {
    width: 59% !important;
    margin-right: 0px !important;
}
.four_fifth {
    width: 79.6% !important;
    margin-right: 2% !important;
}
.four_fifth.last_column {
    width: 79.6% !important;
    margin-right: 0px !important;
}
.one_sixth {
    width: 15% !important;
    margin-right: 2% !important;
}
.one_sixth.last_column {
    width: 15% !important;
    margin-right: 0px !important;
}
*/
/*********************
    Form styles
***********************/
form [data-class="wpcf7cf_group"] p,
form.wpcf7-form [data-class="wpcf7cf_group"] p {
  margin-bottom: 0px !important;
}
form [data-class="wpcf7cf_group"] .content-column p,
form.wpcf7-form [data-class="wpcf7cf_group"] .content-column p {
  margin-top: 0px !important;
}
form input[type="radio"],
form.wpcf7-form input[type="radio"] {
  width: auto !important;
}
form .wpcf7-list-item,
form.wpcf7-form .wpcf7-list-item {
  display: block;
}
form p,
form.wpcf7-form p {
  margin: 25px 0px 25px 0px;
}
form select.dropcategories,
form.wpcf7-form select.dropcategories {
  width: fit-content;
  border: 1px solid #000;
}
form h1,
form.wpcf7-form h1 {
  font-family: 'Source Sans Bold', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-optical-sizing: none;
  font-size: 32px;
  line-height: 42px;
  margin: 10px 0px 20px 0px;
}
form h2,
form.wpcf7-form h2 {
  font-family: 'Source Sans Bold', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-optical-sizing: none;
  font-size: 22px;
  line-height: 30px;
  margin: 10px 0px 20px 0px;
}
form input[type="submit"],
form.wpcf7-form input[type="submit"] {
  margin-top: 20px;
  cursor: pointer;
  border: 0px solid;
}
form input,
form.wpcf7-form input,
form button,
form.wpcf7-form button,
form select,
form.wpcf7-form select,
form textarea,
form.wpcf7-form textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  width: 100%;
  max-width: 100%;
  border: 0px solid;
  padding: 5px 5px;
  padding-left: 10px;
  border-radius: 5px;
  margin-top: 5px;
}
form input::placeholder,
form.wpcf7-form input::placeholder,
form textarea::placeholder,
form.wpcf7-form textarea::placeholder {
  color: #000;
  opacity: 0.2;
}
form label,
form.wpcf7-form label {
  font-family: 'Source Sans Bold', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-optical-sizing: none;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  width: 100%;
}
form.with_labels input,
form.wpcf7-form.with_labels input,
form.with_labels textarea,
form.wpcf7-form.with_labels textarea {
  margin-top: 5px;
}
/**********************
       Slick Slider
***********************/
.slick-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: auto !important;
}
.slick-slide img {
  display: block;
  border: 0px solid #000;
  max-width: 180px;
  max-height: 95px;
  height: auto;
  width: auto;
  margin: 0px 30px 0px 30px;
  padding: 0px 0px 0px 0px;
}
.actueel {
  margin: 0px 0px 0px 0px;
}
.actueel .headerwrap {
  position: relative;
  padding: 0px 0px 60px 0px;
}
.actueel .headerwrap .titelrubriek {
  margin-left: 15px;
  margin-top: 40px;
}
@media (max-width: 1023px) {
  .actueel .headerwrap {
    padding: 0px 0px 20px 0px;
  }
}
@media (max-width: 767px) {
  .actueel {
    background: transparent;
  }
}
.actueelbox {
  position: relative;
  display: block;
  width: auto;
  height: 100%;
  cursor: pointer;
  padding-bottom: 40px;
  margin: 28px 18px 28px 18px !important;
  background-color: transparent;
  max-width: 423px;
  /*
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 8px rgba(0,0,0,0.15);
    */
}
.actueelbox h3 {
  font-family: 'Source Sans Bold', sans-serif;
  font-size: 18px;
  line-height: 24px;
  margin: 0px 0px 10px 0px;
}
.actueelbox p {
  font-size: 16px;
  line-height: 24px;
}
.actueelbox a {
  font-size: 16px;
}
.actueelbox .date {
  color: #000;
  font-size: 14px;
  line-height: 14px;
  padding: 15px 0px 5px 0px;
  position: relative;
  display: block;
}
.actueelbox img.thumb {
  border-radius: 5px;
}
.actueelbox .excerpt {
  position: relative;
  display: block;
  width: auto;
  margin: 0px;
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 24px;
}
.actueelbox .readmore {
  font-size: 18px;
  margin-top: 0px;
  opacity: 1.0;
}
@media (max-width: 767px) {
  .actueelbox {
    margin: 0 auto;
    margin-bottom: 20px !important;
  }
}
/* fancybox styles */
.fancybox-content {
  /*
  position: absolute;
  bottom: 60px;
  right: 20px;
*/
}
.fancybox-slide--iframe .fancybox-content {
  width: 90%;
  height: 60%;
  max-height: 60%;
  min-height: 60% !important;
  max-width: 600px;
  margin: 0;
  background: #191919;
}
.fancybox-slide {
  padding: 20px;
}
.fancybox-is-open .fancybox-bg {
  opacity: .75;
}
@media only screen and (max-width: 480px) {
  .fancybox-slide--iframe .fancybox-content {
    height: 90%;
    max-width: 100%;
    max-height: 90%;
    margin: 0;
    background: #191919;
  }
  .fancybox-slide {
    padding: 50px 20px 20px 20px;
  }
}
/***********************************
 Weergave HTML 5 video element
***********************************/
.mejs-overlay-button {
  background: url(images/play-button.png) no-repeat !important;
  background-size: 80px 80px !important;
}
.mejs-controls {
  display: none !important;
}
.wp-video {
  border-radius: 15px;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
@media only screen and (max-width: 767px) {
  .wp-video {
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  }
}
.video-container {
  position: relative;
}
p.video_duur {
  font-size: 17px;
  line-height: 39px;
  height: 39px;
}
video {
  background-color: #999;
}
.playpause {
  background-image: url(images/play-button.png);
  background-repeat: no-repeat;
  width: 100px;
  height: 50px;
  height: 100%;
  position: absolute;
  cursor: pointer;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  margin: auto;
  background-size: contain;
  background-position: center;
}
.playpause:hover {
  background-image: url(images/play-button2.png);
}
/**********************
       Icons
***********************/
/**********************
       Social Icons
***********************/
.icon {
  position: relative;
  text-align: center;
  width: 32px;
  height: 32px;
  padding: 12px;
  border-radius: 50%;
  color: #FFFFFF;
}
.icon i {
  font-size: 15px;
  position: absolute;
  color: #fff;
}
.icon.social {
  float: left;
  margin: 0 7px 0 0;
  cursor: pointer;
  background: #e1655a;
  color: #FFF;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
}
.icon.social:hover {
  background: #e1655a;
  color: #fff;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
}
.icon.social.fb i {
  left: 8px;
  top: 9px;
}
.icon.social.tw i {
  left: 6px;
  top: 9px;
}
.icon.social.in i {
  left: 10px;
  top: 9px;
  -webkit-text-stroke: 0.5px #e1655a;
}
.icon.social.mail i {
  left: 9px;
  top: 9px;
  -webkit-text-stroke: 0.5px #e1655a;
}
/**********************
       Buttons
***********************/
/*
   <div class="wrap_leftfixed">
      <div class="leftfixed">Left part</div>
      <div class="rightfluid">Right part</div>
    </div>
    
.wrap_leftfixed {
    .wrapperfluidleft(@widthleft)
}
*/
/*
   <div class="wrap_rightfixed">
      <div class="rightfixed">Right part</div>
      <div class="leftfluid">Left part</div>
    </div>
    
.wrap_rightfixed {
    .wrapperfluidright(@widthright)
}
*/
/*
   <div class="wrap_email">
      <div class="rightfixed">Right part</div>
      <div class="leftfluid">Left part</div>
    </div>
*/
/*
.wrap_email {
        padding-top: 20px;
        
    .wrapperfluidright(150px);   
        input[type="email"] {
        border: 0px solid #FD7CB1;
        border-top-left-radius: 0.7rem;
        border-bottom-left-radius: 0.7rem;
        background-color: #fff;
        height: 2.5rem;
        padding: 1rem; 
        
        width: 100%;
        margin: 0px 0px 0px 0px;
    }
    
    .leftfluid {

    }
    
    @media (max-width: 767px) {    

        .rightfixed {

        }
        .leftfluid {

        }
    } 
}

.wrap_header {
    .wrapperfluidright(230px);
    
    display: flex; 
    height: auto; 
    overflow: hidden; 
    align-items: stretch;
    
    .leftfluid {
        display: flex; 
        align-items: center; 
        width: 100%;
        padding-right: 20px;
    }

    @media (max-width: 1000px) {    

        .rightfixed {
            width: 170px;
        }
        .leftfluid {

        }
    }
    
    @media (max-width: 575px) {
        .rightfixed {
            width: 80px;
        }
        .leftfluid {

        }
    }
}

*/
/**********************
       AGENDA
***********************/
h2.agendaheader {
  text-align: center;
  margin-top: 70px;
}
@media (max-width: 767px) {
  h2.agendaheader {
    text-align: left;
    margin-top: 60px;
    padding-left: 11px;
  }
}
#agendafull {
  font-size: 17px;
  line-height: 24px;
  margin-top: 20px;
  margin-bottom: 180px;
}
@media (max-width: 1024px) and (min-width: 768px) {
  #agendafull .blackbutton {
    margin-left: -8px;
  }
}
#agendafull .row .row {
  border-bottom: 1px solid #000;
  padding-top: 20px;
  padding-bottom: 20px;
}
#agendafull .row .row.year {
  border-bottom: 3px solid #000;
}
#agendafull .row .row.year .yearname {
  margin-top: 20px;
  font-size: 22px;
  padding-left: 0px;
}
@media (max-width: 767px) {
  #agendafull .row .row.year .yearname {
    padding-left: 15px;
  }
}
@media (max-width: 767px) {
  #agendafull .row .row.year {
    border-bottom: 0px solid #000;
  }
}
@media (max-width: 767px) {
  #agendafull .row .row {
    border-top: 0px solid #000;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 0px solid #000;
  }
}
@media (max-width: 767px) {
  #agendafull .row .row:last-child {
    border-bottom: 0px solid #000;
  }
}
#agendafull .meerinfobutton {
  padding-right: 0px;
  margin-right: 0px;
  text-align: right;
}
@media (max-width: 767px) {
  #agendafull .meerinfobutton {
    text-align: left;
  }
}
#agendafull .firstcolumn {
  padding-left: 0px;
  margin-left: 0px;
}
@media (max-width: 767px) {
  #agendafull .firstcolumn {
    padding-left: 15px;
    margin-left: 0px;
  }
}
#agendafull .lastcolumn {
  padding-right: 0px;
  margin-right: 0px;
}
@media (max-width: 1024px) and (min-width: 768px) {
  #agendafull .lastcolumn {
    padding-left: 0px;
  }
}
@media (max-width: 767px) {
  #agendafull .lastcolumn {
    text-align: left;
  }
}
@media (max-width: 767px) {
  #agendafull .agendatitel {
    font-size: 23px;
    line-height: 33px;
    padding-bottom: 5px;
  }
}
@media (max-width: 767px) {
  #agendafull .agendameerinfo {
    padding-top: 30px;
  }
}
@media (min-width: 768px) {
  #agendafull hr.showmobile {
    display: none !important;
  }
}
@media (max-width: 767px) {
  #agendafull hr.showmobile {
    display: block;
    margin-top: 25px;
    margin-bottom: 0px;
    margin-right: 11px;
  }
  #agendafull hr.showmobile.year {
    margin-top: 10px;
    border-top: 3px;
  }
}
@media (max-width: 767px) {
  #agendafull .kopjes {
    display: none;
  }
}
/******************************
   AGENDA Listview (shortcode)
******************************/
#events {
  margin: 0 auto;
}
#events .wrapper {
  display: flex;
  height: auto;
  overflow: hidden;
  align-items: stretch;
  margin: 10px 0px 10px 0px;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 20px;
  cursor: pointer;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.2));
}
#events .leftpart {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 95px;
  width: 95px;
  float: left;
  background-color: #e1655a;
  color: #fff;
  padding-top: 13px;
  padding-bottom: 13px;
}
#events .leftpart .innerwrap {
  text-align: center;
  font-size: 16px;
  line-height: 24px;
}
#events .rightpart {
  width: auto;
  overflow: hidden;
  padding-left: 15px;
  padding-right: 10px;
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#events h3 {
  margin: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-family: 'Source Sans Bold', sans-serif;
}
#events .day {
  font-family: 'Source Sans Bold', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-optical-sizing: none;
  font-size: 22px;
}
#events .month {
  font-family: 'Source Sans SemiBold', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-optical-sizing: none;
  font-size: 16px;
  text-transform: uppercase;
}
#events .location {
  font-family: 'Source Sans SemiBold', sans-serif;
}
/**********************
       Visual Composer
***********************/
.vc_row.vc_row-flex {
  position: relative;
}
.wpb_content_element.newsheader {
  margin-bottom: 20px;
}
/**********************
        MIXINS
***********************/
.randomclass {
  background: -webkit-linear-gradient(#873cff, rgba(135, 60, 255, 0) 0%), -webkit-linear-gradient(-45deg, rgba(120, 155, 255, 0.9) 45%, #37e6eb 0%);
}
/**********************
        GRID VISIBILITY
***********************/
#grid .row [class*='col-'] {
  background-color: #ffeeee;
  background-clip: content-box;
  min-height: 20px;
}
/**********************
         STYLES
***********************/
/* New breakpoint 

@media (min-width: 1600px) {
.container {
    width: 1558px;
}
}
*/
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
  margin: 0px;
  padding: 0px;
  height: 100%;
}
body {
  font-family: 'Source Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  background-color: #fff;
  position: relative;
  height: 100%;
}
/* Bootstrap offset left

col-lg-offset-1

*/
.flex {
  display: -webkit-flex;
  display: -webkit-box;
  display: -moz-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
.row.flex:before {
  display: flex !important;
}
.flex:before {
  display: flex !important;
}
.flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
.flex .actueelbox,
.flex .excerpt {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.flex .actueelbox img {
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* #wrap, #content en #footer, body html 100% noodzakelijk, footer wordt onderkant pagina uitgelijnd bij weinig content */
#wrap {
  min-width: 310px;
  position: relative;
  border: 0px solid #000;
  margin: 0 auto;
}
#content {
  min-height: 200px;
  overflow: hidden;
}
.container-fluid {
  max-width: 936px;
  min-width: 310px;
}
.container-fluid.single {
  margin-bottom: 40px;
}
.bigcontainer,
.bigcontainer.container-fluid {
  max-width: 1260px;
  display: block;
  position: relative;
  margin: 0 auto !important;
}
.achtergrondverloop {
  background-image: url(images/achtergrond_verloop.png);
  background-size: cover !important;
}
strong,
b {
  font-family: 'Source Sans Bold', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-optical-sizing: none;
}
em,
i {
  font-family: 'Source Sans Italic', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-optical-sizing: none;
}
a {
  background: none;
  padding-left: 0px;
  margin: 0px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: #e1655a;
}
a:hover {
  text-decoration: underline;
  color: #e1655a;
}
h1,
h2,
h3 {
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0.5px;
  text-decoration: none;
  font-optical-sizing: none;
  hyphens: auto;
  -webkit-hyphens: auto;
}
h1 {
  font-family: 'Source Sans Bold', sans-serif;
  color: #e1655a;
  font-size: 16px;
  line-height: 25px;
  margin: 20px 0px 5px 0px;
  text-transform: uppercase;
}
h1.blogtitle {
  margin: 5px 0px 20px 0px;
}
.singlepost h1 {
  font-family: 'Source Sans SemiBold', sans-serif;
  color: #000;
  font-size: 20px;
  line-height: 25px;
  margin: 0px 0px 10px 0px;
  text-transform: none;
}
@media (max-width: 767px) {
  .singlepost h1 {
    font-size: 13px;
    line-height: 23px;
  }
}
h2 {
  font-family: 'Source Sans SemiBold', sans-serif;
  font-size: 18px;
  line-height: 20px;
  margin: 20px 0px 10px 0px;
}
h3 {
  font-family: 'Source Sans SemiBold', sans-serif;
  font-size: 16px;
  line-height: 24px;
  margin: 20px 0px 10px 0px;
}
p {
  font-size: 16px;
  line-height: 24px;
  margin: 0px 0px 24px 0px;
}
ul,
ol {
  padding-left: 24px;
}
.tomenu {
  width: 100px;
  height: 45px;
}
#tomenu {
  position: fixed;
  bottom: 100px;
  z-index: 1000;
  width: 100px;
  height: 45px;
  display: block;
}
@media only screen and (min-width: 1350px) {
  #tomenu {
    right: 75px;
    bottom: 100px;
  }
}
@media only screen and (max-width: 1349px) {
  #tomenu {
    right: 50px;
    bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  #tomenu {
    right: 10px;
  }
}
.newsheader img {
  max-width: 70%;
}
@media only screen and (max-width: 767px) {
  .newsheader img {
    max-width: 50%;
  }
}
.date {
  font-family: 'Source Sans SemiBold', sans-serif;
  color: #000;
  padding: 0px 0px 0px 0px;
  position: relative;
  display: block;
}
.breadcrumbs {
  max-width: none;
  margin-left: 15px;
  margin-top: 30px;
  margin-bottom: 40px;
  font-family: 'Source Sans', sans-serif;
  font-size: 13px;
  line-height: 13px;
  text-transform: uppercase;
}
.breadcrumbs .current-item {
  color: #e1655a;
}
.breadcrumbs a {
  text-decoration: none;
}
@media only screen and (max-width: 980px) {
  .breadcrumbs {
    margin-left: 0px;
    font-size: 12px;
    line-height: 12px;
  }
}
.relative {
  position: relative;
  z-index: 10;
}
.intro {
  font-size: 18px;
  line-height: 28px;
}
.intro p {
  font-size: inherit;
  line-height: inherit;
}
.quotes p {
  max-width: 850px;
  font-size: 45px;
  line-height: 55px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .quotes p {
    text-indent: 0px;
  }
}
.socialmedia {
  display: inline-block;
  margin: 0px;
  margin: 40px 0px 40px 0px;
}
#socialmedia {
  float: right;
  font-family: 'Source Sans Bold', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-optical-sizing: none;
  font-size: 14px;
  line-height: 14px;
  color: #e1655a;
}
#socialmedia a {
  margin-left: 15px;
  text-decoration: none;
}
@media (max-width: 767px) {
  #socialmedia {
    display: none;
  }
}
.breakclear {
  clear: right;
}
@media (max-width: 1023px) {
  .breakclear {
    clear: both;
  }
}
@media (max-width: 767px) {
  .breakclear {
    display: none;
  }
}
.center {
  text-align: center;
}
.groenverloop {
  background: linear-gradient(to bottom, #d5e3d9 0%, #f1f1e5 100%);
}
.round {
  border-radius: 50%;
}
.roundedshadow {
  border-radius: 10px;
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.7));
}
.roundedcorners {
  border-radius: 10px;
}
.readmorearrow {
  font-size: 18px;
  bottom: 20px;
  display: block;
  margin-top: 20px;
  text-decoration: none;
  opacity: 1.0;
}
.readmorearrow:hover {
  text-decoration: none;
  opacity: 0.50;
}
.readmorearrow:before {
  content: url('images/readmore.svg');
  padding-right: 10px;
}
.smobile {
  display: none !important;
}
@media only screen and (max-width: 767px) {
  .smobile {
    display: block !important;
  }
}
.hmobile {
  display: block;
}
@media only screen and (max-width: 767px) {
  .hmobile {
    display: none !important;
  }
}
.widget-area.mobile h2 {
  display: none;
}
hr {
  margin-top: 40px;
  margin-bottom: 40px;
  border: 0;
  border-top: 1px solid #000000;
}
.rotate {
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}
img {
  max-width: 100%;
  height: auto;
}
img {
  border: 0;
  height: auto;
  max-width: 100%;
  width: auto;
}
.img-responsive {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  border: 0px solid #000;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}
.img-responsive img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  border: 0px solid #000;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
}
.img-responsive .wpb_single_image,
.img-responsive .vc_figure,
.img-responsive .vc_single_image-wrapper {
  width: 100%;
}
#featuredimagecontainer {
  margin-bottom: 10px;
}
#featuredimagecontainer img {
  border-radius: 10px;
}
.captionbox {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 2;
}
.captionbox h1,
.captionbox h2,
.captionbox h3,
.captionbox p {
  color: #fff;
  text-shadow: #000000 1px 1px 1px;
}
/************************************************
*    Wordpress Suggestions                        *
************************************************/
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignleft {
  float: left;
  padding: 5px 20px 15px 0px;
}
.alignright {
  float: right;
}
.wp-caption {
  float: left;
  padding: 0px;
  margin: 0px 0px 20px 0px;
  height: auto !important;
  border-radius: 0px;
  background-color: transparent;
  max-width: 100%;
}
/* tekst onder image */
.wp-caption p {
  margin: 10px 0px 10px 0px;
  padding: 0px;
  font-family: "Source Sans Pro", lucida, arial;
  font-size: 14px;
  line-height: 18px;
  font-style: italic;
  text-align: left;
  color: #999;
  border: 0px solid #999;
}
.wp-caption-text {
  margin: 5px 20px 0px 0px;
  padding: 0px;
  border: 0px solid red;
  font-size: 11px;
  color: #999;
  line-height: 14px;
  font-style: italic;
}
.wp-caption img {
  width: 100%;
  float: none;
  height: auto !important;
  padding: 0px;
  margin: 0px;
  border: 0px solid red;
}
.wp-caption-dd {
  margin: 5px 20px 0px 0px;
  padding: 0px;
  border: 0px solid red;
  font-size: 11px;
  color: #999;
  line-height: 14px;
  font-style: italic;
}
.wp-caption-dt {
  margin: 5px 20px 0px 0px;
  padding: 0px;
  border: 0px solid red;
  font-size: 11px;
  color: #999;
  line-height: 14px;
  font-style: italic;
}
/************************************************************************/
/* Breakpoinst Bootstrap - ook Visual Composer defaults aangepast       */
/************************************************************************/
/************************************************************************/
/* Container sizes          */
/************************************************************************/
/*

gutter 2 * 15px;

768px - content 728

936px - content 906

1360px - content 1230

*/
/************************************************************************/
/* Media sizes instellen in CMS         */
/************************************************************************/
/*

Thumbnail: 423/286

Medium: 906/9999

Large: 1230/9999                423

Voor retina schermen wellicht dubbele invoeren, als dat echt belangrijk is.

*/