/* *************************************** start mobiel ******************************* */

@media (max-width: 1000px) {

.desktop_only {
display: none !important;
} 

.imageLeft, .imageRight {
float: left;
width: 100%;
max-width: 100%;
height: auto;
margin-bottom: 15px;
}

/* *************************************** start menu ******************************* */

.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 9002;
top: 0;
right: 0;
background-color: #7B97BC;
overflow-x: hidden;
transition: 0.5s;
padding: 60px 0;
}

.sidenav ul {
list-style-type: none;
padding: 0;
}

.sidenav li a {
padding: 8px;
text-decoration: none;
font-size: 20px;
color: #fff;
display: block;
transition: 0.3s;
font-weight: bold;
text-align: center;
}

.sidenav li a:hover {
color: #000;
}

.sidenav .closebtn {
position: absolute;
top: 0;
left: 45px;
color: #fff; 
font-size: 65px;
text-decoration: none;
}

.sidenav .closebtn:hover {
color: #000; 
}

/* *************************************** einde menu ******************************* */

#page-wrap {
float: left;
width: 100%;
}

#headerContainer {
float: left;
width: 100%;
}

#header {
float: left;
width: 100%;
}

#logo {
float: left;
width: 100%;
}

#logo img {
width: 300px;
max-width: calc(100% - 75px);
height: auto;
margin: 20px 0 20px 25px;
}

#navigMobile {
position: absolute;
z-index: 10;
top: 37px;
right: 15px;
}
  
#navigMobile p {
display: inline-block;
width: 34px;
height: 26px;
overflow: hidden;
position: relative;
}

#navigMobile p img {
position: absolute;
width: 100%;
height: auto;
top: 0;
left: 0;
}

#navigMobile p:hover img {
position: absolute;
width: 100%;
height: auto;
top: -100%;
left: 0;
cursor: pointer;
cursor: hand;
}
  
#navig {
display: none;
}

#fotoContainer {
float: left;
width: 100%;
overflow-x: hidden;
}

#foto {
float: left;
width: 150%;
margin-left: -25%;
}

#foto img {
width: 100%;
height: auto;
}

#fotoSubContainer {
float: left;
width: 100%;
overflow-x: hidden;
}

#fotoSub {
float: left;
width: 150%;
margin-left: -25%;
}

#fotoSub img {
width: 100%;
height: auto;
}

#mainContainer {
float: left;
width: 100%;
background-color: #fff;
}

#main {
float: left;
width: 100%;
}

#content {
float: left;
width: 100%;
padding: 50px 40px;
box-sizing: border-box;
}

#contentLeft {
float: left;
width: 100%;
padding: 50px 40px;
box-sizing: border-box;
}

#contentRight {
float: left;
width: calc(100% - 80px);
padding: 35px 25px 0 25px;
margin: 0 40px 75px 40px;
background-color: #EDEDED;
border: 1px solid #1F4E79;
border-radius: 15px;
box-sizing: border-box;
z-index: 3;
}

#contentRight p {
display: inline-block;
color: #1E4F78;
font-size: 15px;
line-height: 1.5em;
margin-bottom: 20px;
padding: 5px 0 5px 45px;
background: url(../images/circle_yellow.png) center left no-repeat;
}

#contentRight ul {
list-style-type: none;
margin: 0 0 25px 45px;
padding-left: 0;
}

#contentRight li {
font-size: 18px;
font-weight: bold;
margin-left: 0;
}

#contentRight li a {
display: block;
width: calc(100% - 45px);
color: #1F4E79;
text-decoration: none;
padding: 10px 5px 10px 10px;
border-bottom: 1px solid #D1D1D1;
}

#contentRight li a:hover {
color: #CFA421;
text-decoration: none;
}

#content img {
max-width: 100%;
height: auto;
}

#videoContainer {
float: left;
width: 100%;
}

#video {
float: left;
width: 100%;
padding: 100px 0;
background: url(../images/bg_grey.png) bottom right no-repeat #D1D1D1;
}

#videoTop {
float: left;
width: 100%;
padding: 0 40px;
box-sizing: border-box;
text-align: center;
}

#videoTop h3 {
display: inline-block;
color: #1E4F78;
font-size: 25px;
line-height: 1.3em;
margin-bottom: 35px;
padding: 5px 0 5px 45px;
background: url(../images/circle_yellow.png) center left no-repeat;
}

#videoBottom {
float: left;
width: 100%;
padding: 0 40px;
box-sizing: border-box;
}

/* ************************************************************* start footer ******************************************** */

#footerContainer {
float: left;
width: 100%;
}

#footer {
float: left;
width: 100%;
padding: 0 40px 50px 40px;
box-sizing: border-box;
}

#footer p {
color: #808080;
font-size: 14px;
line-height: 1.5em;
text-align: center;
}

#footer p a {
color: #808080;
text-decoration: none;
}

#footer p a:hover {
color: #808080;
text-decoration: underline;
}

#footer .button {
margin: 0 0 15px 0 !important;
}

/* ************************************************************* einde footer ******************************************** */

.invulveld {
width: 100%;
height: 25px;
font-size: 1.0em;
}

textarea {
width: 100%;
height: 250px;
font-size: 1.0em;
}

.twocolums {
}

.threecolums {
columns: 3;
-webkit-columns: 3;
-moz-columns: 3;
column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
list-style-type: none !important;
}

.swipe {
color: #C00000 !important;
font-size: 13px !important;
font-weight: bold !important;
padding: 0 0 0 30px;
background: url(/images/icon_swipe.png) center left no-repeat;
margin-bottom: 5px !important;  
}

.tableDiv {
overflow-x: auto;
}

/* ********************************************* start divs ************************************************ */

.div30, .div302 {
float: left;
width: 100%;
margin-bottom: 15px;
}

.div33 {
float: left;
width: 100%;
margin-bottom: 15px;
}

.div333 {
float: left;
width: 100%;
margin-bottom: 15px;
}

.div333 img {
float: left;
width: 100%;
height: auto;
}

.div40 {
float: left;
width: 100%;
margin-bottom: 15px;
}

.div50 {
float: left;
width: 100%;
margin-bottom: 15px;
}

.div501 {
float: left;
width: 100%;
margin-bottom: 15px;
}

.div502 {
float: left;
width: 100%;
margin-bottom: 15px;
}

.div60 {
float: left;
width: 100%;
margin-bottom: 15px;
}

.div70 {
float: left;
width: 100%;
margin-bottom: 15px;
}

.div80 {
float: left;
width: 100%;
margin-bottom: 15px;
}

.div90 {
float: left;
width: 100%;
margin-bottom: 15px;
}

.div100 {
float: left;
width: 100%;
}

.height50 {
float: left;
width: 100%;
height: 50px;
}

/* ********************************************* einde divs ************************************************ */

/* ********************************************* start buttonDiv home ************************************************ */

#buttonContainer {
float: left;
width: 100%;
}

#buttonDiv {
float: left;
width: 100%;
padding: 100px 25%;
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr;
gap: 50px;
background: url(../images/bg_blue.png) bottom left no-repeat #21507A;
}

#buttonDiv a {
}

.buttonImg {
float: left;
width: 100%;
aspect-ratio: 1 / 1;
position: relative;
}

#buttonDiv a .buttonImg img {
position: absolute;
top: 10px;
left: 10px;
width: calc(100% - 20px);
height: auto;
}

#buttonDiv a:hover .buttonImg img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: auto;
}

.buttonTxt {
float: left;
width: 100%;
}

#buttonDiv a .buttonTxt h3 {
color: #FED13A;
font-size: 18px;
line-height: 1.2em;
text-align: center;
}
  
#buttonDiv a:hover .buttonTxt h3 {
color: #fff;
font-size: 18px;
line-height: 1.2em;
text-align: center;
}
  
/* ********************************************* einde buttonDiv home ************************************************ */

/* ********************************************* start blokken ************************************************ */

#contentBlokken {
    float: left;
    width: 100%;
}

.blokDiv {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
  column-gap: 0px;
}

.blokImg {
  flex: 1;
  box-sizing: border-box;
}

.blokTxt {
  flex: 1;
  box-sizing: border-box;
  position: relative;
}

.blokCenter {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}

.blokImg img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
}

.blokDiv > div:first-child {
  padding-right: 25px;
}

.blokDiv > div:last-child {
  padding-left: 25px;
}

.blokDiv h2 {
  padding-bottom: 15px;
  border-bottom: 2px solid #6DB231;
}


/* ********************************************* einde blokken ************************************************ */

/* ********************************************* start logoContainer  ************************************************ */

#logoContainer {
float: left;
width: 100%;
}

#logoDiv {
float: left;
width: 100%;
padding: 75px 0;
}

#logoDivTop {
float: left;
width: 100%;
padding: 0 40px;
box-sizing: border-box;
text-align: center;
}

#logoDiv h3 {
display: inline-block;
color: #1E4F78;
font-size: 25px;
line-height: 1.3em;
margin-bottom: 35px;
padding: 5px 0 5px 45px;
background: url(../images/circle_yellow.png) center left no-repeat;
}

/* ********************************************* einde logoContainer ************************************************ */

/* ********************************************* start photoContainer ************************************************ */

.photoContainer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin-bottom: 25px;
width: 100%;
margin: 50px 0;
float: left;
}

.photoDiv {
float: left;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
display: flex;
justify-content: center;
flex-direction: column;
border: 1px solid #21507A;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;
}

.photoContainer div:first-child {
padding: 25px;
box-sizing: border-box;
}

.photoDiv img {
float: left;
max-width: 100%;
height: auto;
}

/* ********************************************* einde photoContainer ************************************************ */

/* ********************************************* start bedrijven ************************************************ */

.bedrijvenContainer {
float: left;
width: 100%;
}

.bedrijvenDiv {
float: left;
width: 100%;
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}

.bedrijvenDiv a {
}

.bedrijfImg {
float: left;
width: 100%;
aspect-ratio: 1 / 1;
padding: 25px;
border: 1px solid #21507A;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;
box-sizing: border-box;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}

.bedrijfImg img {
float: left;
width: 90%;
margin: 0 5%;
height: auto;
}

.bedrijvenDiv a:hover .bedrijfImg img {
float: left;
width: 100%;
margin: 0;
height: auto;
}

.bedrijfTxt {
float: left;
width: 100%;
text-align: center;
padding: 5px;
}

.bedrijfTxt p {
color: #21507A !important;
font-size: 14px;
font-weight: bold;
line-height: 1.3em;
}

.bedrijvenDiv a:hover .bedrijfTxt p {
color: #CFA421 !important;
}

/* ********************************************* einde bedrijven ************************************************ */

/* ********************************************* start slider ************************************************ */

#slideContainer {
float: left;
width: 100%;
padding: 0 40px;
box-sizing: border-box;
overflow-x: hidden;
}

#slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  padding: 35px 0;
}

#slider::-webkit-scrollbar {
  height: 5px;
}

#slider::-webkit-scrollbar-track {
  background: #f1f1f1;
}

#slider::-webkit-scrollbar-thumb {
  background: #6DB231;
}

#slider {
  scrollbar-width: thin;
}

#slider::-webkit-scrollbar-track {
  background: #f1f1f1;
}

#slider::-webkit-scrollbar-thumb {
  background: #6DB231;
}

#slider a {
  flex: 0 0 100px;
  scroll-snap-align: start;
  margin-right: 25px;
}

#slider a:first-child {
margin-left: 45px;
}

.slide {
width: 100px;
height: 100px;
background-color: #fff;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
margin: 0 15px 15px 0;
border: 1px solid #21507A;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;
}

.slide img {
max-width: 100%;
height: auto;
}

.slide:hover {
border: 1px solid #FFD13A;
}

/* ********************************************* einde slider ************************************************ */

} /* einde mobiel */

/* *************************************** einde mobiel ******************************* */