html, body {
     font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
     font-size: 93.8%;
     text-size-adjust: 100%;
     color: #323332;
     height: auto;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
 }
 
 body {
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 footer {
     width: 100%;
}
 
 .onderbalk {
     background-color: #E85E0D;
     display: flex;
     justify-content: center;
     max-width: 1100px;
     margin-bottom:100px;
     font-size:15px;
 }
 
 .header {
     position: absolute;
     top:0;
     left:0;
     right:0;
     z-index:-10;
     height:20%;
     width: 100%;
 }
 
 .logo {
     position: absolute;
 }
 
 .navbar {
     background-color: #E85E0D;
     display: flex;
     justify-content: center;
     width: 1100px;
     margin-top: 160px;
 }
 
 .navbar-links {
     display: flex; 
     gap: 20px;
 }

 .navbar-links a:hover {
    color:#3f3f40;
}

 .navbar-links.active {
     display: flex;
 }

 .navbar-links a.active {
    background-color: #3f3f40;
    color: white;
 }
 
 .hamburger {
     display: none;
     flex-direction: column;
     cursor: pointer;
     padding: 10px;
     color:white;
     font-size:20px;
     margin-right:80%;
 }
 
 .navbar a {
     color: white;
     text-decoration: none;
     padding: 15px 20px;
     font-size: 16px;
     font-weight: bold;
     transition: background 0.3s;
 }
 
 .navbar .dropdown {
     padding-top:15px;
     position: relative;
 }

 
 .navbar .dropdown-content {
     margin-top:15px;
     display: none;
     position: absolute;
     background-color: #7e7f83;
     min-width: 160px;
     z-index: 1;
     text-align: left;
 }
 
 .navbar .dropdown-content a {
     color: white;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     border: 1px solid rgb(36, 36, 36);
 }
 
 .navbar .dropdown-content a:hover {
     color: #3f3f40;
     background-color:#7e7f83 ;
 }
 
 .navbar .dropdown:hover .dropdown-content {
     display: block;
 }
 
 /* SLIDESHOW CONTAINER */
 .slideshow-container {
     max-width: 1100px;
     position: relative;
     overflow: hidden;
     display: flex;
     justify-content: center;
 }
 
 .slide {
     display: none;
     width: 100%;
     height: 300px;
 }
 
 
 #slide-title {
     background-color: #E85E0D;
     color: white; 
     padding: 10px;  
     text-align: center;  
     margin: 0; 
 }
 
 /* tekst */
.content-container{
	position: relative;
	margin: 0 auto;
	max-width: 1100px;
}

 .content {
     position: relative;
     padding: 20px 300px 20px 20px;
     text-align: left;
	 min-height: 430px;
 }
 
 .content h1 {
     color: #E85E0D;
 }
 
 .content h2 {
     color: #E85E0D;
 }
 
 /*zijbalk*/
 .zijbalk {
     position: absolute;
     border: 1px solid rgb(204, 203, 203);
     height: 380px; 
     padding:5px;
	 right: 0;
	 width: 290px;
	 top: 50px;
 }
 
 .slideshow-container2 {
     position: relative;
     overflow: hidden;
 }
 
 .fade {
     animation: fadeEffect 1.5s;
 }
 
 @keyframes fadeEffect {
     from { opacity: 0.4; }
     to { opacity: 1; }
 }
 
 .slide-text {
     margin-top: 10px;
     font-size: 14px;
 }
 
 .slide-title {
     margin-top: 10px;
     font-size: 14px;
     background-color: #E85E0D;
 }
 
 .slide2 {
     display: none;
     max-width: 270px;
     height: 190px; 
     padding:8px;
 }
 
 /*google maps*/
 .google-maps {
     position:absolute;
 }
 
 #frame {
     width: 100%;
     height: 270px; 
     border-radius: 10px; 
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
     overflow: hidden;
 }
 
 .google-map-iframe {
     width: 100%;
     height: 100%;
     border: none; 
 }
 
 @media (max-width: 1024px) {
     .navbar {
         flex-direction: column;
         align-items: center;
         width: 100%;
     }
 
     .hamburger {
         display: flex;
         margin-right:90%;
     }
 
     .slide2 {
         display: none;
         max-width: 300px;
         height: 190px; 
         padding:8px;
     }

     .navbar .dropdown-content {
        display: block; 
        position: static; 
        width: 100%; 
        background-color: #E85E0D;
    }

    .navbar .dropdown-content a {
        border: 1px solid #E85E0D;
        font-size:13px;
        font-weight:normal;
    }

    .navbar .dropdown {
        display: block;
        width:100%;
        margin:0;
        padding:0;
        
    }

    .navbar .dropdown a{
        display: block;
        width:100%;
        border-bottom: 1px solid #af480c;
     }

    .navbar-links {
        display: none; 
        flex-direction: column;
        gap: 0;
        width:100%;
    }

    .navbar-links a {
        border: 1px solid #af480c;
        border-bottom: none;
    }
 
     .slideshow-container {
         width: 100%;
     }
 
     .onderbalk {
         width: 100%;
         margin-bottom: 0;
     }
 
     .zijbalk {
         position:relative;
         width: 60%;
         margin-left: 0;
         order: 1; 
         margin-bottom:50px;
		 right: auto;
     }
 
     .content {
         padding: 20px;
         text-align: left;
     }
 
     .google-maps {
         width:100%;
         left:4%;
     }
 
     #frame {
         width:100%;
     }
 
     .logo {
        left: 30%;
    }

     .slide {
         display: none;
         width: auto;
         height: 300px;
     }
 
     footer {
         width: 100%;
         text-align: center;
         position: fixed;
         bottom: 0;
         left: 0;
     }
     
     .dienstpic {
         width:300px;
     }
 
     body.menu-open .content {
         margin-top: 500px; 
     }
 }

 @media (min-width: 1112px) {
    .zijbalk {
        position: absolute;
        top: 50px; 
        width: 290px; 
    }
}
 
 @media (max-width: 768px) {
     .hamburger {
         display: flex;
     }
 
     .slide2 {
         display: none;
         max-width: 265px;
         height: 190px; 
         padding:8px;
     }
 
    .navbar {
        margin-top: 160px;
    }
    
    .navbar .dropdown-content {
        display: block; 
        position: static; 
        width: 100%; 
        background-color: #E85E0D;
    }

    .navbar .dropdown-content a {
        font-size:12px;
        font-weight:normal;
    }

    .navbar .dropdown {
       display: block;
       width:100%;
       margin:0;
       padding:0;
    }

    .navbar .dropdown a{
       display: block;
       width:100%;
       border-bottom: 1px solid #af480c;
    }
     
   .navbar-links {
       gap: 0;
       width:100%;
   }
       
    .navbar-links a {
        border: 1px solid #af480c;
        border-bottom: none;
    }
 
     .slideshow-container {
         width: 100%;
     }
 
     .onderbalk {
         width: 100%;
         margin-bottom: 0;
     }
 
     .zijbalk {
         position:relative;
         width: 90%;
         margin-left: 0;
         order: 1; 
         margin-bottom:200px;
     }
 
     .content {
         padding: 20px;
         text-align: left;
     }
 
     .google-maps {
         width:100%;
         left:4%;
     }
 
     #frame {
         width:100%;
     }
 
     .logo {
        left: 24%;
    }

     .slide {
         display: none;
         width: auto;
         height: 300px;
     }
 
     footer {
         width: 100%;
         text-align: center;
         position: fixed;
         bottom: 0;
         left: 0;
     }
     
     .dienstpic {
         width:300px;
     }
 
     body.menu-open .content {
         margin-top: 450px; 
     }
 }

 @media (max-width: 480px) {
    .navbar {
        margin-top: 120px;
    }

     .navbar .dropdown-content {
         display: block; 
         position: static; 
         width: 100%; 
         background-color: #E85E0D;
     }
 
     .navbar .dropdown-content a {
         font-size:12px;
         font-weight:normal;
     }
 
     .navbar .dropdown {
        display: block;
        width:100%;
        margin:0;
        padding:0;
     }

     .navbar .dropdown a{
        display: block;
        width:100%;
        border-bottom: 1px solid #af480c;
     }

      
    .navbar-links {
        gap: 0;
        width:100%;
    }
        
     .navbar-links a {
         border: 1px solid #af480c;
         border-bottom: none;
         
     }

     .logo {
         left: 18%;
         height: 109px;
     }
 
     .content {
         padding: 20px;
         text-align: left;
     }
 
     .zijbalk {
         position:relative;
         width: 90%;
         padding: 10px;
         order: 1;
         margin-bottom:200px;
     }
 
     .navbar a {
         font-size: 14px;
         padding: 10px;
     }
 
     .onderbalk {
         width: 100%;
         margin-bottom: 0;
     }
 
     footer {
         width: 100%;
         text-align: center;
         position: fixed;
         bottom:0;
         left: 0;
         z-index:1000;
     }
     
     .slide {
         display: none;
         width: auto;
         height: 300px;
     }
     
     .dienstpic {
         width:300px;
     }
 
     body.menu-open .content {
         margin-top: 400px; 
     }
     
     .google-maps {
         width:100%;
         left:4%;    
     }
 
     #frame {
         width:100%;
     }
 }

 
 @media (max-width: 375px) {

    body.menu-open .content {
        margin-top: 200px; 
    }

 }