*{margin:0;padding:0;box-sizing:border-box;}
*:focus{outline: none;}
html,body{text-align:center;background-color:white;display:block;width:100%;min-height:100%;z-index:1;font-size:40px;overflow-x:hidden; /* Hide horizontal scrollbar */}
/* Designing for scroll-bar */::-webkit-scrollbar{width: 5px;}     
/* Track */::-webkit-scrollbar-track{background:gainsboro;border-radius:5px;}      
/* Handle */::-webkit-scrollbar-thumb{background:black;border-radius:5px;}     
/* Handle on hover */::-webkit-scrollbar-thumb:hover{background:#555;}
.center{position:absolute;margin:0 auto;text-align:left;width:100%;min-height:auto}
@import url('https://fonts.googleapis.com/css?family=Maven+Pro');
@font-face {font-family:'Maven Pro', sans-serif;}
#container{position:relative;display:table;width:80%;max-width:1350px;height:auto;margin:0 auto;-moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);-goog-ms-box-shadow: 0 0 20px #333333;box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);}
#layout{min-height:auto}
#head{min-width:100%;min-height:1px}
#fit img{display:block;object-fit:fill;height:250px;width:100%}
#telephone{min-width:80%;margin-left:10%;margin-right:10%;margin-top:3%;min-height:50px;padding:0px;float:left}
#telephone p{font-size:1rem;font-weight:800;color:#ffcc33;font-family:sans-serif;}
#telephone a{line-height:300%;color:black;background-color:#ffcc33;padding:10px;opacity:0.8;border:2px solid black;border-radius:15px;}
a:hover{text-decoration:none}
#content{display:grid;margin-top:5%;height:auto}
#wrapper{display:inline-block;float:left}
#wrapper #werken{width:50%;height:auto;float:left;padding-left:15%;padding-top:7.5%}
#wrapper #werken ul{list-style: none}
#wrapper #werken li{font-size: 0.75rem}
#wrapper #werken ul li:before {content:'✓';padding-right:1em;color:#ffcc33;font-size:30px;}
#wrapper #vervoer{float:left;width:50%;height:auto}
#wrapper #vervoer img{width:60%;object-fit:cover;z-index:2;border-style:solid;border-color:#ffcc33;float:left}
#tekst{text-align:center;position:relative;margin-top:7.5%;display:block;font-size:0.75rem;width:100%;}
#photo{margin-top:5%}
#title{padding-left:0%;text-align:center;margin-left:auto;margin-right:auto;width:100%;left:0%font-style:oblique;font-size:1.25rem;font-weight:800;color:#ffcc33;font-family:sans-serif;text-decoration:underline;position:absolute;}
/* 
  ##.projecten geeft problemen met hoogte

*/
#photo #projecten{display:grid;margin-top:80px;height:auto}
#data-container{position:absolute}
/* 
  ##.gallery geeft problemen met hoogte changes:max-height:800px;!!

*/
.gallery{margin-left:5%;width:90%;min-height:800px;max-height:800px;max-width:1600px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;}
.popup{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%) scale(0);width:80%;max-width:1600px;height:90vh;max-height:800px;border-radius:20px;background:rgba(0, 0, 0, 0.75);display:flex;justify-content:center;align-items:center;z-index:5;overflow:hidden;transition:1s;opacity:0;}
.popup.active{transform:translate(-50%, -50%) scale(1);opacity:1;}
.popup.active .close-btn,
.popup.active .image-name,
.popup.active .index,
.popup.active .large-image,
.popup.active .arrow-btn{opacity:1;transition:opacity .5s;transition-delay:1s;}
.top-bar{position:absolute;top:0;left:0;width:100%;height:50px;background:#000;color:#fff;text-align:center;line-height:50px;font-weight:300;}
.image-name{opacity:0;display:none}
.close-btn{opacity:0;position:absolute;top:15px;right:20px;width:20px;height:20px;border-radius:50%;background:#f00;cursor:pointer;}
.arrow-btn{opacity:0;position:absolute;top:50%;transform:translateY(-50%);padding:10px;border-radius:50%;border:none;background:none;cursor:pointer;}
.left-arrow{left:10px;}
.right-arrow{right:10px;transform:translateY(-50%) rotate(180deg);}
.arrow-btn:hover{background:rgba(0, 0, 0, 0.5);}
.index{position:absolute;bottom:10px;right:10px;font-size:80px;font-weight:100;color:rgba(255, 255, 255, 0.4);opacity:0;}
.large-image{margin-top:5%;width:80%;height:80%;object-fit:contain;opacity:0;}   
/* 
  ##.card-container geeft problemen met hoogte changes:max-height:800px;!!

*/
.card-container{position:relative;margin-left:5%;width:90%;height:800px;max-height:800px;max-width:1600px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}   
.card {width:30%;height:calc(50% - 20px);min-width:300px;min-height:300px;margin:10px;overflow:hidden;}   
.card img {width:100%;height:100%;object-fit:cover;transition:1s;border-style:solid;border-color:#ffcc33;;cursor:pointer}   
#pagina{margin-top:1%;float:left;position:relative;display:table-cell;width:100%;height:100%}
#pagination{display:block;width:100%}
.pagination {text-align:center}  
.pagination a {font-size:0.75rem;font-weight:800;color: #ffcc33; padding:8px 16px;text-decoration:none;margin: 0 5px;border-radius: 4px;}  
.pagination a:hover{background-color:#ffcc33;color:white;}   
.pagination .active{background-color:#ffcc33; color:white;} 
#page-numbers{display:none}
#row{position:relative;width:100%;height:300px;margin-top:5%;margin-bottom:5%;display:flex;}
#social{display:flex;justify-content:center;width:100%;height:70px;left:50%}
#social img{width:70px;height:70px}
#totop{position:absolute;top:150px;left:50%;transform:translateX(-50%)}
#top{width:70px;height:70px;text-align:center;border:4px double #ffcc33;cursor:pointer}
#top a{text-align:center;font-size:0.75rem;font-weight:200;color:#ffcc33;font-family:sans-serif;text-decoration: none;line-height:60px;transition: all 0.5s ease;}
tfoot{height:50px;text-align:center}
#footer{position:relative;width:100%;background:#ffcc33}		
#footer p{font-size:0.5rem}
#footer #adres{width:22.5%;float:left;padding:20px;margin-left:17.5%}
#footer #tel{width:16.5%;float:left;padding:20px}
#footer #mail{min-width:7.5%;float:left;padding:5px}
#footer #btw{width:10%;float:left;padding:20px;margin-left:1%}
.button{font:bold 20px Maven Pro;text-decoration:none;background-color:#666666;color:#ffcc33;border:1px solid white;border-radius:5px;padding:10px}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 1024px to 1366px
*/

@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
 #telephone{width:95%;margin-top:0%;margin-left:7.5%;margin-right;2.5%;text-align:left}
#telephone p{font-size:30px;font-weight:800;color:#ffcc33;font-family:sans-serif;}
#wrapper{display:block;float:left}
#wrapper #werken{padding-left:15%;width:50%;padding-top:7.5%}
#wrapper #werken li{font-size:30px}
#wrapper #werken ul li:before {content: '✓';padding-right:0.3em;font-size:22.5px;}
#wrapper #vervoer{width:50%}
#wrapper #vervoer img{margin-left:5%;margin-right:5%;margin-top:0%;width:70%;z-index:2;}
#tekst{font-size:22.5px;margin-left:0%}
#photo{margin-top:5%}
#photo #title{font-size:35px;font-weight:600;padding-left:0%;text-align:center;margin-left:auto;margin-right:auto;width:100%;left:0%}
.popup{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%) scale(0);width:80%;max-width:1600px;height:90vh;max-height:800px;border-radius:20px;background:rgba(0, 0, 0, 0.75);display:flex;justify-content:center;align-items:center;z-index:5;overflow:hidden;transition:1s;opacity:0;}
#photo #projecten{height:85vh;display:block;width:100%;margin-top:0px}
.gallery{margin-left:0%;width:100%;min-height:90vh;max-height:800px;max-width:1600px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;}
.card-container{margin-left:0%;width:100%;height:90vh;max-height:800px;max-width:1600px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}   
.card img {width:100%;margin-left:0%}
#footer #adres{width:30%;float:left;padding:20px;margin-left:5%}
#footer #tel{width:22.5%;float:left;padding:20px}
#footer #mail{min-width:12.5%;float:left;padding:5px}
#footer #btw{width:10%;float:left;padding:20px;margin-left:1%}
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 800px to 1024px done!
*/

@media (min-width: 800px) and (max-width: 1024px) and (orientation: portrait) {
#container{position:relative;display:table;width:95%;height:auto;margin:0 auto;-moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);-goog-ms-box-shadow: 0 0 20px #333333;box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);}
#telephone{width:95%;margin-top:0%;margin-left:5%;margin-right;2.5%;text-align:left}
#telephone p{font-size:30px;font-weight:800;color:#ffcc33;font-family:sans-serif;}
#wrapper{display:block;float:left}
#wrapper #werken{padding-left:10%;width:50%;padding-top:7.5%}
#wrapper #werken li{font-size:30px}
#wrapper #werken ul li:before {content: '✓';padding-right:0.3em;font-size:22.5px;}
#wrapper #vervoer{width:50%}
#wrapper #vervoer img{margin-left:15%;margin-right:15%;margin-top:0%;width:70%;z-index:2;}
#tekst{font-size:22.5px;margin-left:0%}
#photo{margin-top:3%}
#photo #title{font-size:35px;font-weight:600;padding-left:0%;text-align:center;margin-left:auto;margin-right:auto;width:100%;left:0%}
.popup{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%) scale(0);width:80%;max-width:1600px;height:90vh;max-height:800px;border-radius:20px;background:rgba(0, 0, 0, 0.75);display:flex;justify-content:center;align-items:center;z-index:5;overflow:hidden;transition:1s;opacity:0;}
#photo #projecten{height:75vh;display:block;width:100%;margin-top:-150px}
.gallery{margin-left:0%;width:100%;min-height:90vh;max-height:800px;max-width:1600px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;}
.card-container{margin-left:0%;width:100%;height:90vh;max-height:800px;max-width:1600px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}   
.card img {width:100%;margin-left:0%}
#footer #adres{width:100%;float:left;padding:10px;margin-left:0%}
#footer #tel{width:100%;float:left;padding:10px}
#footer #mail{min-width:100%;float:left;padding-top:5px;padding-bottom:10px}
#footer #btw{width:100%;float:left;padding:10px;margin-left:0%} 
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 800px
*/

@media (min-width: 481px) and (max-width: 800px) and (orientation: landscape) {
#telephone{width:90%;margin-top:0%;margin-left:1%;text-align:left}
#telephone p{font-size:30px;font-weight:800;color:#ffcc33;font-family:sans-serif;}
#wrapper{display:block;float:left}
#wrapper #werken{padding-left:25%;width:100%;padding-top:0%}
#wrapper #werken li{font-size:30px}
#wrapper #werken ul li:before {content: '✓';padding-right:0.3em;font-size:22.5px;}
#wrapper #vervoer{width:100%}
#wrapper #vervoer img{margin-left:15%;margin-right:15%;margin-top:15%;width:70%;z-index:2;}
#tekst{font-size:22.5px;margin-left:0%}
#photo{margin-top:3%}
#photo #title{font-size:35px;font-weight:600;padding-left:0%;text-align:center;margin-left:auto;margin-right:auto;width:100%;left:0%}
.popup{display:none}
#photo #projecten{height:1925px;display:block;width:100%;margin-top:50px}
.gallery{margin-left:0%;width:100%;min-height:90vh;max-height:800px;max-width:1600px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;}
.card-container{margin-left:0%;width:100%;height:90vh;max-height:800px;max-width:1600px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}   
.card img {width:100%;margin-left:0%}
.pagination {margin-top:0.5rem;} 
.pagination a {font-size:22.5px;font-weight:200;padding:4px 5px;margin: 0 3px} 
#footer #adres{width:100%;float:left;padding:10px;margin-left:0%}
#footer #tel{width:100%;float:left;padding:10px}
#footer #mail{min-width:100%;float:left;padding-top:5px;padding-bottom:10px}
#footer #btw{width:100%;float:left;padding:10px;margin-left:0%}
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 480px
*/

@media (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
  
  /* CSS */
  
}
@media screen and (max-width:480px){
#container{position:relative;display:table;width:95%;height:auto;margin:0 auto;-moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);-goog-ms-box-shadow: 0 0 20px #333333;box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);}
#telephone{width:80%;margin-top:5%;margin-left:15%;text-align:left}
#telephone p{font-size:30px;font-weight:800;color:#ffcc33;font-family:sans-serif;}
#wrapper #werken{padding-left:5vw;width:100%}
#wrapper #werken li{font-size:25px}
#wrapper #werken ul li:before {content: '✓';padding-right:0.3em;font-size:22.5px;}
#wrapper #vervoer{width:100%}
#wrapper #vervoer img{margin-left:5%;margin-right:5%;margin-top:15%;width:90%;z-index:2;}
#tekst{font-size:22.5px;margin-left:5%;width:90%}
#photo #title{font-size:35px;font-weight:600;padding-left:0%;text-align:center;margin-left:auto;margin-right:auto;width:100%;left:0%}
.popup{display:none}
#photo #projecten{height:1925px;float:left;clear:left;display:block;padding-left:10%;width:100%;margin-top:100px}
.gallery{margin-left:0%;width:100%;min-height:90vh;max-height:800px;max-width:1600px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;}
.card-container{margin-left:0%;width:100%;height:90vh;max-height:800px;max-width:1600px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}  
.card img {width:80%;margin-left:5%}
.pagination {margin-top:0.5rem;} 
.pagination a {font-size:22.5px;font-weight:200;padding:4px 5px;margin: 0 3px} 
#totop{}
#footer #adres{width:100%;float:left;padding:10px;margin-left:0%}
#footer #tel{width:100%;float:left;padding:10px}
#footer #mail{min-width:100%;float:left;padding-top:5px;padding-bottom:10px}
#footer #btw{width:100%;float:left;padding:10px;margin-left:0%}
}