/* CSS Document */
/*
colors
lichtbeige #F6EDDC rgba(246, 237, 220, 1)
donkerbeige #D5C7AC rgba(213, 199, 172, 1)
lichtgroen #8E9B6D rgba(142, 155, 109, 1)
donkergroen #65744B rgba(101, 116, 75, 1)
*/

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body,html {width:100%; height:100%; padding:0; margin:0; }


body{ font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal; font-size: 1.2em; line-height: 1.4em; /*color:rgba(247, 206, 91, 1.00)*/ color:#454545;
}




div.icons { display: none;}

div.inner-row {display: flex; /* Activeert Flexbox */width:100%;}
#home.row {/*width: calc(100% - 40px);*/width:100%;margin-top: 0;}
body#home #home.row {/*background-image:url("/images/headers/gastenverblijf-bed-en-bikes.jpg");*/ background-position: center center; background-repeat: no-repeat;background-size: cover;height:580px;/*border-top-left-radius: 400px; border-left:40px solid #F3DFC1;*/margin-bottom: 0;}

body#bed-en-bikes #home.row {background-image:url("../images/home/gastenverblijf.jpg"); background-position: center center; background-repeat: no-repeat;background-size: cover;height:580px;}

div#welkom {position:relative;width:33%; height: 100%;float:right;}
div#welkom ul {padding: 0; margin:0;ist-style-type: none;}
div#welkom li {
  position: absolute; /* Maakt positionering binnen de div mogelijk */
  bottom: 10px; /* Afstand van de onderkant */
  right: 10px; /* Afstand van de rechterkant */
	list-style-type: none;
}
div#welkom p {color:#fff; text-decoration: none;text-align: right;font-size: 2em;	line-height: 1.2em;margin:0;margin-bottom:0px; margin-right: 10px; padding:0;font-weight: 200;}


div#twee { background-color: #F6EDDC;margin-top: 0;}
div#twee ul, div#twee li{padding: 0; margin:0;list-style-type: none;}
div#twee p {float: left;}
div#twee div.background-paragraaf-container{
  display: flex; /* Activeert Flexbox */
  align-items: stretch; /* Beide divs krijgen dezelfde hoogte */
	position: relative; }
div#twee div.background-container{ flex: 0 0 calc(40% - 60px);padding:40px 20px 40px 40px;position: relative;}
div#twee .background-inner {
  position: absolute;
  top: 40px; 
  left: 40px;
  right: 40px;
  bottom: 40px;
  background-size: cover;
  background-position: center;
}
div#twee div#paragraaf {flex: 0 0 calc(60% - 60px);padding:40px 40px 40px 20px;}

div#drie { background-color: #fff;margin-top: 0;}
body#home div#drie div.jtcs_item_wrapper {background-color: #587291; padding:40px; color:#fff;}
div#drie ul, div#drie li{padding: 0; margin:0;list-style-type: none;}
div#drie p {float: left;}
div#drie div.background-paragraaf-container{
  display: flex; /* Activeert Flexbox */
	position: relative;
	width:100%;}
div#drie div.background-container{flex: 0 0 calc(40% - 60px);padding:40px 40px 40px 20px;position: relative;order:2;}
div#drie .background-inner {
  position: absolute;
  top: 40px; 
  left: 40px;
  right: 40px;
  bottom: 40px;
  background-size: cover;
  background-position: center;
}
div#drie div#paragraaf {flex: 0 0 calc(60% - 60px);padding:40px 20px 40px 40px;order:1;}

div#vier { background-color: #8E9B6D;margin-top: 0; color:#fff;}
div#vier ul, div#vier li{padding: 0; margin:0;list-style-type: none;}
div#vier p {float: left;}
div#vier a {color:#fff;}
div#vier div.background-paragraaf-container{
  display: flex; /* Activeert Flexbox */
  align-items: stretch; /* Beide divs krijgen dezelfde hoogte */
	position: relative; }
div#vier div.background-container{ flex: 0 0 calc(40% - 20px);padding:0 20px 0 0;position: relative;}
div#vier .background-inner {
  position: absolute;
  top: 0; 
  left: 0;
  right: 20px;
  bottom: 0;
  background-size: cover;
  background-position: center;}
div#vier div#paragraaf {flex: 0 0 calc(60% - 60px);padding:40px 40px 40px 20px;}



/* Responsive styling */
@media screen and (max-width: 600px) {
    .top-menu ul {
        flex-direction: column;
    }

    .row, .footer {
        padding: 10px;
        margin: 5px 0;
    }
	
}
@media (max-width: 768px) {
  .background-container,
  #paragraaf {
    flex: 0 0 100%; /* Beide divs nemen 100% van de breedte in */
  }
}