*{  box-sizing: border-box; }
  
  /* Works on Firefox */
   * {
    scrollbar-width: thin;
	scrollbar-height: thin;
	scrollbar-color:  #00b1eb   transparent;
	}
    
   /* Works on Chrome, Edge, and Safari */
  ::-webkit-scrollbar,  ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track { 
    width: 0.7vw; height:0.7vw; background-color: rgba(255,255,255,0); }
    
  ::-webkit-scrollbar-button { 	 display:none; }
  ::-webkit-scrollbar-track-piece { 	 display:none; }
  ::-webkit-scrollbar-corner { 	 display:none; }
  ::-webkit-resizer { display: none;  }
  ::-webkit-scrollbar-thumb { border-radius: 0.35vw; background-color:  #00b1eb; min-height: 50px;}
  ::-webkit-scrollbar-track { background-color:transparent; }   
    
  html, body {  
    width:100vw; height:100vh; text-align:center;
    font-family: "Ubuntu", sans-serif; 
    font-weight:500; line-height: 1em;
    font-size: calc(10px + (13 - 10) * ((100vw) / (720))); }
 
  #wrapper { 
    position:relative;
    display:flex; flex-direction:column;
    width:100%;height:100%;
    margin: 0 auto;
    background-color: #ffffff; color:#333;  
    border-color: #ffffff; border-style:solid;
    border-width:1vw; }
    
  
  #containerZoom {
     display: none; flex-direction:column; 
     position:absolute;
     left:0px; top:0px;
     right:0px; bottom:0px;
     border: 0px #333 solid;
     background-color:#333;
     justify-content: center;
     align-items:center;
     z-index:120; }
    
  #imgZoom { 
    max-width:100%; 
    max-height:100%; 
    object-fit: contain ;}
      
  #btnZoom{
    display:inline-block; position:absolute;
    right:1.5vw; top:1vw;
    width:5vw; height:5vw;
    } 
   
  #titelBlock { 
    position:relative;
    display:flex; position:relative;
    justify-content:space-between;
    align-items:flex-start;
    align-self:stretch;   
    background-color:#80c0ff; 
    background-image:  linear-gradient(to right, #4a8be5  , #00d2ff ) ; 
    }
 
 
  #titelBlock div { margin-top:    calc( 3px + (100vw - 320px) /320 ); }
  #titelBlock div { margin-right:  calc( 3px + (100vw - 320px) /320 ); } 
  #titelBlock div { margin-bottom: 1.5em; }
  #titelBlock div { margin-left:   calc( 3px + (100vw - 320px) /320 ); }
    
  #titelBlock div:nth-child(1) { display:block; flex: 0 0  11vw; max-width:112.64px; height:auto;  } 
  #titelBlock div:nth-child(2) { display:block; flex: 0 0  55vw; max-width:700px; height:auto;  align-self: center; } 
  #titelBlock div:nth-child(3) { display:block; flex: 0 0  19.8vw; max-width:202.75px; height:auto;  } 
  
  #titelBlock div:nth-child(1) img { width:100%; height:auto; border:0.25vw #ffffff solid; } 
  #titelBlock div:nth-child(2) img { width:100%; height:auto; } 
  #titelBlock div:nth-child(3) img { width:100%; height:auto;  border:0.25vw #ffffff solid;} 
  
  /* ----------------------- Mnu s ********* */
   
  #mnu1 {
    display:none;  
    flex-direction:row; flex-wrap: nowrap;
    justify-content:center;
    align-items:flex-end;
    width: 100%; height:0.7em;
    overflow-y:visible;
    background-color: #ffffff; z-index:80;    } 
      
  .mnuItm1 {
    display:flex; flex-direction:row;
    height:1.5em;
    justify-content:flex-start; 
    align-items:center;   
    border-radius:0px; 
    background-color:#333; color:#ffffff;
    font-size:1em; line-height:1.4em;
    z-index: 90; }
   
   .mnuItm1:hover {cursor: pointer;}    
   
  .mnuItm1 div:nth-child(1) { 
     align-self:stretch; flex:0 0 auto; 
     background-color:transparent;
     display:inline-block; text-align:center;
     padding: 0 0 0 0.5em; }  
  
  .mnuItm1 div:nth-child(2) {
   align-self:stretch; flex:0 0 auto;  
    background-color:transparent; 
    display:inline-block; text-align:center;
    padding: 0 2em 0 0.4em; }
   
  .mnuItm1:nth-child(1) { border-bottom-left-radius:0.7em; }
  .mnuItm1:nth-child(1) { border-top-left-radius:0.7em; }
  .mnuItm1:nth-child(5) { border-bottom-right-radius:0.7em; }
  .mnuItm1:nth-child(5) { border-top-right-radius:0.7em; }
  
 #subMnu1 {
    display: grid; visibility : hidden; 
    width:auto; height:11em;
    background-color: transparent; 
    position:absolute;  left:0px; top:-0.5em; 
    grid-template-columns: 1em auto 1em ;
    grid-template-rows: 2.3em 1.4em 1.4em 1.4em 1.4em 1.4em 1.4em   ;
    grid-row-gap:0px ; grid-column-gap: 0px ;
    z-index:120;
    }
  
  #subMnu1 div:nth-child(1) { width:auto; height:100%; grid-column: 2; grid-row:2;  background-color:#333; text-align:left; padding: 5px 18px 5px 5px; }
 #subMnu1 div:nth-child(2) { width:auto; height:100%; grid-column: 2; grid-row:3;  background-color:#333; text-align:left; padding: 5px 18px 5px 5px; }
  #subMnu1 div:nth-child(3) { width:auto; height:100%; grid-column: 2; grid-row:4;  background-color:#333; text-align:left; padding: 5px 18px 5px 5px; }
  #subMnu1 div:nth-child(4) { width:auto; height:100%; grid-column: 2; grid-row:5;  background-color:#333; text-align:left; padding: 5px 18px 5px 5px; }
  #subMnu1 div:nth-child(5) { width:auto; height:100%; grid-column: 2; grid-row:6;  background-color:#333; text-align:left; padding: 5px 18px 5px 5px; }
  #subMnu1 div:nth-child(6) { width:auto; height:100%; grid-column: 2; grid-row:7;  background-color:#333; text-align:left; padding: 5px 18px 5px 5px; }
  
  /* -----------------  btnMnu2 --- ---------------  */
    
  #btnMnu2 {
    display:flex; 
    flex-direction:row; flex-wrap: nowrap;
    justify-content:flex-start;
    align-items:center;
    width: 100%; height:0.2em; min-height:0.2em;
    margin-bottom:0.1em;
    background-color: transparent; z-index:80;} 
      
  #btnMnu2 div { 
    display:block; 
    font-size: 1.6em; line-height:1em;
    white-space:nowrap;
    padding:0.2em 1.5em 0.2em 1.5em; 
    background-color:#333; color:#ffffff; 
    border-radius:1em;
    width:auto; height:auto; 
    margin-left: 2vw; z-index:110; } 
  
   #btnMnu2:hover {cursor: pointer;}   
   
  /* ------------  fotoLayout  -------------------*/
   
   #Pg3 { }
   
   #fotoLayout {  
    display:block; position:relative; 
    width: 100%; height:2em; 
    background-color: transparent; 
    border-bottom:0.2em #ffffff solid;} 
      
   
   #layout1, #layout2, #layout3 { 
    display: block; position:absolute;
    width:1.4em; height: 2em;
    } 
   
   #layout1 {background-color:#c2c2c2; bottom:0px; right:7em; } 
   #layout2 {background-color:#333;    bottom:0px; right:4em;} 
   #layout3 {background-color:#c2c2c2; bottom:0px; right:1em;} 
      
   #layout2 div {
     width:0.2em; height:100%; margin-left:0.6em; 
     overflow-x:hidden; overflow-y:hidden;
     background-color:#ffffff; } 
   
   #layout3 div {
     width:0.68em; height:100%; margin-left:0.36em; 
     overflow-x:hidden; overflow-y:hidden;
     background-color: transparent; 
     border-left: 0.16em #ffffff solid; 
     border-right: 0.16em #ffffff solid;} 
     
  /* ---------------------------------*/

  #mnu2 { 
    display:block; position:absolute;
    left:0px; top:0px;
    width:auto; height:auto;
    overflow-x:hidden; z-index:90;
    background-color:#6f32aa; 
    font-size: 1.4em; line-height:1.8em;
    outline: 1px #c0c0f4 solid;  
    outline-offset: -3px; 
    -webkit-transition: left 900ms ease; 
    -moz-transition: left 900ms ease; 
    -ms-transition: left 900ms ease; 
    -o-transition: left 900ms ease; 
    transition: left 900ms ease; }

   
   .mnuItm2 { 
     display:flex;
     flex-direction:row;
     flex-wrap: nowrap;
     justify-content:flex-start;
     align-items:center; 
     width:auto;
     background-color:#6f32aa; color:#ffffff;}
        
     
   .mnuItm2:nth-child(1)      { margin-top:0.25em; }
   .mnuItm2:nth-last-child(1) { margin-bottom:0.25em; }
    
   .mnuItm2 div:nth-child(1) { 
     display:inline-block; flex: 0 0 1.4em; 
     background-color:transparent;
     text-align:center;
     padding: 0 0 0 0.5em; }
     
   .mnuItm2:hover {cursor: pointer;}    
  
  .mnuItm2 div:nth-child(2) { 
    display:inline-block; 
    background-color:transparent;
    text-align:center;
    padding: 0 0.5em 0 0.4em; }  
    
  .subMnu2 {
    display:block; width:100%; 
    background-color: transparent; color:#ffffff; 
    text-align:left; padding: 0 0.6em 0 1.8em; }
    
    
   /* ------------------------------ */
  
   #content { 
    flex-grow:1 ; 
    display:block; position:relative; 
    border-color:#ffffff; border-style:solid;
    background-color:#ffffff; 
    overflow-x:hidden; overflow-y: hidden; 
    width:100%;  }
  
  
  /* ------------------  pages ---- */
  
  #Pg1 { display:none; width:100%; height:100%; text-align:center; border-top:3.5vw transparent solid; } 
  #Pg2 { display:none; width:100%; height:100%; text-align:center; border-top:3.5vw transparent solid; } 
  #Pg3 { display:none; width:100%; height:100%; text-align:center; border-top:0vw transparent solid; } 
  #Pg4 { display:none; width:100%; height:100%; text-align:center; border-top:3.5vw transparent solid; }  
  #Pg5 { display:none; width:100%; height:100%; text-align:center; border-top:3.5vw transparent solid; } 
  
  

     
  /* --------------  Pg 1------------------------- */ 
    
  #Pg1 { overflow-y:auto; }
  
  #titelResidentie {
	display: block; text-align:center;
    width: 86%; height: auto;  margin-left:7%; 
	font-size:3.5vw; line-height: 10vw;  font-weight: bold;
	color:#ff0000;}   
       
  #picSkyline {  
    display:block; position:relative; 
    width:90%; margin: 1em auto;}
    
  #imgSkyline { width:100%; height:auto;  }
  
  #plaatsResidentie {
    position: absolute ;
	right:0.5em; top:0.5em;
	text-align: right; }   
  
  /* ------------  Pg 2 ------------------------- */ 
  
   #Pg2 { 
     display:block; position:relative; 
     width:100%; height:100%; 
     text-align:right;
     }  
          
   #Pg2R {
     display:block; position:absolute; 
     left:10vw; right:0px; top:0px; bottom:0px;
     overflow-x:hidden; overflow-y:auto;
     font-size:1.20em; line-height:1.20em; font-weight:normal;
     background-color:#ffffff; }
   
    #gridPg2R { 
     display:grid; width: 90%; 
     margin-left:5%;
     grid-template-columns: 3vw 24vw 1fr;  
     grid-row-gap:0px ; grid-column-gap: 0px ; }  
   
   #gridPg2R div { text-align:left;}
  
   .gridRow123 { 
     grid-column: 1 / span 3; 
     font-size:0.5em; line-height:1em;}  
   
   .gridRow123T { 
     grid-column: 1 / span 3; 
     color:#0000ff; 
     font-size:1.25em; line-height:1.2em; 
     font-weight:bold;}  
   
   .gridRow23 { 
     grid-column: 2 / 4; }     
   
   #Pg2L {
     display:block; position:absolute;
     left:0px; top:0px;
     width: 9.2vw; min-width:9.2vw; height:100%;
     text-align:left; 
     font-size:1.5em; line-height:2.1em; font-weight:normal;
     overflow-x: hidden; overflow-y:auto;
     border-color:#333; border-style:solid;
     border-width: 0.4em 0.4vw 0.4em 0px;
     background-color: #333; color:#ffffff;
     -webkit-transition: width 600ms ease; 
    -moz-transition: width 600ms ease; 
    -ms-transition: width 600ms ease; 
    -o-transition: width 600ms ease; 
    transition: width 600ms ease; }
     
   #gridPg2L {
     display:grid;
     height:100%;
     grid-template-columns: 8.6vw auto 4vw;  
     grid-template-rows: auto auto auto auto auto auto auto auto auto auto 1fr ;
     grid-row-gap:0px ; grid-column-gap: 0px;}
   
   #gridPg2L div { background-color:inherit; color:inherit;} 
   
   #gridPg2L div:nth-child(3n+1) { text-align: center; font-size:1.1em;  } 
   #gridPg2L div:nth-child(3n+2) {  text-align: left; } 
   #gridPg2L div:nth-child(3n+2) {  } 
   
    
      /* ---------Pg 3 ----------------------------------------*/
 
  #Pg3 { 
     display:inline-block; 
     text-align:center; vertical-align:top; 
     width:100%; height:100%; z-index:90;} 
   
   #fotoLayout { display:flex; }
     
   #imgGroup1 {
     display:block;
     width:100%; height:100%;
     border:0px #ffffff solid;
     text-align:center;
     overflow-x:hidden; overflow-y:auto;}
   
   #imgGroup1 div {
     display:inline-block; 
     width:48%; height:auto; 
     border:1.5vw #ffffff solid;
     outline:1px #a0a0c4 solid; outline-offset:-0.8vw;}  
     
   #imgGroup1 div img { width:100%; height:auto;  }
     
   #imgGroup2 { display:none;;}  
   
   #imgGroup2L {  }
   
   #imgGroup2R {  } 
   
  /* ------------- pg4 ------------------ */
  
  #Pg4Layout { 
    display:grid;  
    width:100%; height:100%;       
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-row-gap:0.5vw; grid-column-gap: 0px;}
     
   #Pg4Container  { 
     display: block; position:relative; 
      width:100% ;  height:100%;      
     overflow-x:hidden; overflow-y: auto; }

   #Pg4Content { 
     display:block;  position:absolute;
     left:0px;  top:0px;
     width:100% ;  height:auto;      
     overflow-x:hidden; overflow-y: hidden; }
   
   .Pg4ContentItmTitel {
      display:block; background-color:transparent;
      font-size:1.2em; line-height: 2em; font-weight:bold;
      width: 100%; height:auto;   }

   #Pg4ContentItm { 
      display:inline-block;  position:absolute;
      width:100%; height:auto;  } 
  
  #Pg4SiteTopMnu {   border: 3px  #0000ff solid; 
     display:flex; flex-direction: row;
     flex-wrap:nowrap;
     justify-content: space-around;
     align-items:flex-start; 
     overflow-x:hidden; overflow-y:hidden;
     font-size:1em; font-weight:700;
     width:auto; height:100%; }
     
  #Pg4SiteTopMnu div {
    display:block; 
    background-color:transparent; color:#fa8072;
    margin-top:1vw; margin-bottom:1vw; padding: 0.5vw 1vw;
    white-space:nowrap; }
    
  #Pg4SiteTopMnu div i {
    display:block; 
    color:inherit;
    font-size:2.4em;
    border:0.15em transparent solid;}  
     
    #itmGoogle {
      width:100%; aspect-ratio:  16/9 ;   overflow:visible;  
     }
     
    #itmFolder { 
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto ;
      grid-column-gap: 0px; grid-row-gap: 0.5vw;
      width:100%; height:auto;}
     
     #folder1 { width:100%; height:auto;  }
     #folder2 {width:100%; height:auto; }
     
   #folderLink {
      grid-column:1;
      font-size:1.2em; line-height:1.2em; font-weight:500;
      }
  
   
 /*-------------------------------- */
  
  #itmKalender {  width:100%; height:auto;  }
   
  #containerKalender {   
    display:inline-flex; flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-start;
    background-color:#d2d2d2; 
    border-color:#d2d2d2; border-style:solid;
    border-width: 2.2vw 2.2vw 0 2.2vw; ;
    width:100%;  
    overflow-x:auto;  }
       
   #kalenderMnu {
     display:inline-grid;   
     width:100%;  margin-top:0.5vw;       
     grid-template-columns: 5vw auto 5vw auto 5vw auto 1fr ;
     grid-template-rows: 2.5vw ;
     grid-row-gap:1.5vw; grid-column-gap: 1vw ;
     font-size:0.9em; line-height:1.25em;
     background-color:#ffffff;
     border-width: 0.5vw 0.5vw 0.5vw 0.5vw;
     border-color:transparent; border-style: solid;}
    
   #kalenderMnu div { background-color: transparent;   } 
   #kalenderMnu div:nth-child(1) { background-color:#ffffe0; outline:1px #333 solid;outline-offset: -1px; }    
   #kalenderMnu div:nth-child(3) { background-color:#ffb830; outline:1px #333 solid;outline-offset: -1px; }    
   #kalenderMnu div:nth-child(5) { background-color:#00bfff; outline:1px #333 solid;outline-offset: -1px; }   
   #kalenderMnu div:nth-child(2) { }
   #kalenderMnu div:nth-child(4) { }
   #kalenderMnu div:nth-child(6) { }  
   
  .maandKalender {
    display: inline-grid;  flex: 0 0 30%;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(8,  auto);
    grid-row-gap:0 ; grid-column-gap: 0 ;
    margin-bottom: 2.2vw; 
    background-color:#e2e2e2;
    border:0.15em #ffffff solid;
    font-size: 1em;} 
 
   .maandKalender div {
     display: flex; background-color:#ffa500;    
     justify-content: center;
     align-items: center; 
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
     -ms-user-select: none; /* Internet Explorer/Edge */
     user-select: none; /* Non-prefixed version, currently */
     }
  
   .maandKalender div:nth-child(1) {
     grid-column-start: 1; grid-column-end: 8;
     grid-row-start: 1;  grid-row-end: 1;
     background-color: #ff0000; color:#ffffff;
     font-size:1em; line-height:1.5em; font-weight:500;}
    
   .maandKalender div:nth-child(n+2):nth-child(-n+8) {
     background-color:#6495ed; color: #ffffff; 
     font-size: 0.9em; line-height:1.4em; font-weight:500;}
      
   .maandKalender div:nth-child(n + 9) { background-color:#ffffe0; color:#333;}

   .singleDay { font-size: 0.9em; line-height:1.6em; font-weight:bold;}
   
    #submitBeschikbaar {
      display:none;  
      width: 100%; height:auto;  
      text-align:left; }
      
    #btnSubmitBeschikbaar {
      display:inline-block; width:auto; 
      margin-top:2vw; margin-bottom:1vw;
      padding:0.4em 1.5em;
      font-size:1em; line-height:1em; font-weight:bold;
      background-color:#e2e2e2; color:#333;
      border:1px #333 solid;
      border-radius:0.2em; } 
  
  #btnSubmitBeschikbaar:hover  { cursor:pointer;    }
    
  /*----------------------------- */
   
   #itmPrijs{
     display: grid;
     width:100%; 
     grid-template-columns: 16% 24% 12% 12% 12% 24%;
     grid-template-rows: 1.2em repeat(21, auto ) ;
     grid-column-gap: 0px; grid-row-gap: 0px;}
    
   #itmPrijs input {
     display:block; width:100%;
     font-size:0.65em; line-height:1.1em;}   
     
   #submitPrijs { display:none; text-align:left; margin-top:1vw; } 
   
   #btnSubmitPrijs  {
     display: block; 
     padding:0.3em 1.5em;
     font-size:1em; line-height:1em; font-weight:bold;
     background-color:#e2e2e2; color:#333;
     border:1px #333 solid;
     border-radius:0.2em;
     }
     
  /* ------------------------------- */   
     
  #itmAanwezig {
    display: grid; background-color:#e2e2e2;
    padding: 1vw 3vw 1vw 4vw;
    width:100%; 
    grid-template-columns: 6% auto 1fr;  
    grid-template-rows: auto ;
    grid-column-gap: 0px;
    grid-row-gap: 0px;}
    
  #itmAanwezig div { 
   display:inline-block; 
   text-align:left; vertical-align:top;
   white-space:normal;
   font-size:1em; line-height:1.25em; font-weight:normal; }
   
  #itmAanwezig div i  { font-style:normal; font-size:1em; }
   
  #itmAanwezig div.aanwezigSubTitel { 
    grid-column: 1 / span 3; color:#0000ff;
    font-size:1.25em; line-height:1.5em; font-weight:bold;  } 
    
  /* ----------------------------------  */
    
  #itmContract { width:98%; height:auto; margin-bottom:2vw; }  
   
/* -----------------  mail Pg5 ----------------------------- */
 
  #Pg5 { overflow-x:hidden; overflow-y:auto;}
  
   #contactGegevens { 
     width:auto;
     margin-left:2em; margin-top:1em;
     margin-bottom:3em;
     border:1em #ffffff solid;
     outline: 1px #a0a0c4 solid;
     box-shadow: 6px 6px #888888;
     text-align:right;}
  
   #contactGegevens tr td {
     font-size: 0.9em; line-height:1.25em;
     font-weight:normal; } 
   
   #contactGegevens tr:nth-child(1) td {
     font-size: 1.15em; line-height:1.6em;
     font-weight:bold } 
    
   #contactGegevens tr:nth-child(2) td {
     font-size: 0.4em; line-height:1em;
     font-weight:normal } 
    
  #mailContent { position:relative;
    display:flex; flex-direction:row;
    background-color:#e0e0e8;
    flex-wrap:wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width:92%; margin-left:2em; margin-bottom: 1em;
    border: 2vw #e0e0e8 solid; 
    outline:1px #505058 solid;
    font-size: 1.15em; line-height:1em; font-weight:normal;}
  
   .mailItm { display:inline-block; text-align:left; }
    
   #voornaam { width:98%; margin-bottom:1em; margin-right: 0; }  
   #naam { width:98%; margin-bottom:1em; margin-right: 0; }  
   #bedrijf { width:98%; margin-bottom:1em; margin-right: 0; }  
   #adres { width:98%; margin-bottom:1em; margin-right: 2%; }  
   #nummer { width:35%; margin-bottom:1em; margin-right: 2%; }  
   #bus { width:61%; margin-bottom:1em; margin-right: 2%; }  
   #postcode { width:20%; margin-bottom:1em; margin-right: 2%; }  
   #plaats { width:76%; margin-bottom:1em; margin-right: 0; }  
   #tel { width:98%; margin-bottom:1em; margin-right: 0; }  
   #gsm { width:98%; margin-bottom:1em; margin-right: 0; }  
   #mail {width:98%; margin-bottom:1em; margin-right: 0; }  
   #bijlage {width:98%; margin-bottom:1em; margin-right: 0; }  
   #opmerkingen {width:98%; margin-bottom:1em; margin-right: 0; }  
   #btnSubmit {
      width:auto; margin-bottom:1em; margin-right: 0;
      font-size:1.2em; line-height:1.25em; font-weight:500;}  

   
   .mailItm label { display:block; width:auto; font-weight:normal; }
   .mailItm input[type=text] { display:block; width:100%; outline:1px #a0a0c4 solid; }
   .mailItm input::placeholder {
      font-size: 0.9em; line-height:1em; 
      color:#ff0000; font-weight:500; }
      
   .mailItm input[type=file] {
      display:block;  
      font-size:0.8em;
      margin: 0px 0px 0.4vw 0px; }   
      
   #mailContent textarea {
     width: 100%; 
     margin: 0; 
     padding: 0; 
     border: 1px #a0a0c4 solid; 
     }  
       
    #divMailReturn {
      display:none; position:absolute;
      flex-direction:row; justify-content: center; align-items: center; 
      left:13%; bottom:8vw; 
      width:74%; height:3.2em;   
      border:2px #333 solid;
      border-radius: 12px; 
      background-color: #00ffff; } 
     
    #divMailReturn div {
      font-size:1.2em; line-height:2em;
      background-color:transparent;
      }  
   
/* -----------------------312 --- 768  --------------------------------- */
  
   
 
   
   
 /* -------------------------------------------------------- */
/* ------------------------768 --- 1024-------------------------------- */
 
 @media only screen and (min-width: 768px) { 
  
  
/* Works on Chrome, Edge, and Safari */

  ::-webkit-scrollbar,  ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track { 
    width: 0.6vw; height:0.6vw;   background-color: rgba(255,255,255,0); }
    
  ::-webkit-scrollbar-thumb { border-radius: 0.30vw; background-color:  #00b1eb; min-height: 50px;}
    
  html, body { font-size: calc(14px + (20 - 14) * ((100vw - 768px) / ( 1024 - 768))); }
  
   #mnu1 { display: flex; }
   #mnu2 { display:none;} 
   #btnMnu2 { display:none; }
 
   #Pg1 { display:none; width:100%; height:100%; text-align:center; border-top:1vw transparent solid; } 
   #Pg2 { display:none; width:100%; height:100%; text-align:center; border-top:1vw transparent solid; } 
   #Pg3 { display:none; width:100%; height:100%; text-align:center; border-top:1vw transparent solid; } 
   #Pg4 { display:none; width:100%; height:100%; text-align:center; border-top:1vw transparent solid; }  
   #Pg5 { display:none; width:100%; height:100%; text-align:center; border-top:1vw transparent solid; } 
  
 
   #fotoLayout { display:none; }
   
  /**    ------------ Pg2      */
  
  #Pg2R {
    left:26vw; right:0px; top:0px; bottom:0px;
    font-size:0.9em; line-height:1.35em; font-weight:normal;}
   
  #gridPg2R {grid-template-columns: 5vw 23vw 1fr; }  
      
  #Pg2L {
    width: 24.5vw; min-width:23vw;
    left:0px; top:0px;
    font-size:1em; line-height:1.8em; font-weight:normal;
    border-color:#e2e2e2; border-style:solid;
    border-width: 0.2em 0.2em 0.2em 0px;
    background-color: #e2e2e2; color:#333; }
     
  #gridPg2L { grid-template-columns: 5vw auto 2.5vw;}
  
  
  /* --------------------   Pg3  ----------*/
  
   #imgGroup1 { display:none;  }  
   
   #fotoLayout { display:none; }
    
   #imgGroup2 { 
     display:block; text-align:center;
     width:100%; height:100%;}  
   
   
   #imgGroup2L {  
     display:inline-block; 
     height:100%; aspect-ratio:16/9;
     overflow-x: hidden; overflow-y:hidden; 
     text-align:left; }
   
    #imgGroup2L div {
     display:block; 
     width: 125%; height:100% ;
     overflow-x:hidden; overflow-y:scroll; } 
   
    #imgGroup2L div img { 
     display:block;
     width:75%; aspect-ratio:16/9; margin-bottom:4vw; 
     border:0.8vw transparent  solid;
     outline: 2px #a0a0c4 solid;
     outline-offset:-2px; 
     } 
      
   #imgGroup2R {
     display:inline-block;margin-left:2vw; 
     width: 12vw; height:100%; 
     background-color:#ffffff;
     border-color:#ffffff; border-style:solid;
     border-width:0.4vw 0.4vw 0.4vw 0.2vw;
     outline:1px #a0a0c4 solid; outline-offset: -1px;
     overflow-x:hidden; overflow-y:auto; } 
  
   #imgGroup2R div {
     display: block; 
     width: 100%; height:auto;; }
     
   #imgGroup2R div img {
     display:block; margin-bottom:1vw;
     width:10.6vw; height:auto;
     border:0.4vw #ffffff solid;
     outline:0.24vw transparent solid; outline-offset:-0.24vw;}
     
  /*--  Pg4 Mnu -------  */
 
  #Pg4Layout {
    display: grid;   
    width:100%; height:100%;       
    grid-template-columns: auto  1fr;
    grid-template-rows:  1fr;
    grid-row-gap:0px; grid-column-gap: 0.8vw;}
  
  #Pg4SiteTopMnu {   
     display:block; 
     padding: 0 0.5vw;
     overflow-x:hidden; overflow-y:auto;
     font-size:0.8em; font-weight: 700;
     width:auto; height:100%;  }
     
  #Pg4SiteTopMnu div {
    display:block; 
    margin-top:1.5vw; margin-bottom:1.5vw; padding: 0.5vw 1vw;
    white-space:nowrap;  }
     
  #Pg4SiteTopMnu div i {
    display:block; 
    font-size:1.8em;
    border:0.25em transparent solid;}  
    
   #itmFolder { 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto ;
    grid-column-gap: 0.5vw; grid-row-gap: 0px;
    width:100%; height:auto;}

     #folder1 { width:100%; height:auto;  }
     #folder2 {width:100%; height:auto; }
     #folderLink {
       grid-column:1;
     font-size:1.2em; line-height:1.2em; font-weight:500; }

 
   .maandKalender div:nth-child(1) { font-size:1em; line-height:1.5em; font-weight:500;}
   .maandKalender div:nth-child(n+2):nth-child(-n+8) { font-size: 0.9em; line-height:1.4em; font-weight:500;}
   .singleDay { font-size: 0.9em; line-height:1.4em; font-weight:bold;}
    
  
  html, body { font-size: calc(20px + (26 - 20) * ((100vw - 1024px) / (1344 - 1024))); }
 
  
   #itmPrijs{ }
    
   #itmPrijs input { font-size:0.8em; line-height:1.1em;  }   
     
       
  /* ------ Pg5 ---------------------------------- */ 
  #voornaam { width:40%; margin-bottom:1em; margin-right: 8%; }  
  #naam { width:50%; margin-bottom:1em; margin-right: 0; }  
  #bedrijf { width:98%; margin-bottom:1em; margin-right: 0; }  
  #adres { width:66%; margin-bottom:1em; margin-right: 2%; }  
  #nummer { width:12%; margin-bottom:1em; margin-right: 2%; }  
  #bus { width:16%; margin-bottom:1em; margin-right: 0; }  
  #postcode { width:20%; margin-bottom:1em; margin-right: 2%; }  
  #plaats { width:76%; margin-bottom:1em; margin-right: 0; }  
  #tel { width:45%; margin-bottom:1em; margin-right: 8%; }  
  #gsm { width:45%; margin-bottom:1em; margin-right: 0; }  
  #mail { width:98%; margin-bottom:1em; margin-right: 0; }  
  #bijlage { width:85%; margin-bottom:1em; margin-right: 13%; }  
   
  }
  
/* -------------------------------------------------------- */
/*  --------------    1024 ---- 1280 --------------    */
/* -------------------------------------------------------- */
@media only screen and (min-width: 1024px) { 
  
  /* Works on Chrome, Edge, and Safari */
  ::-webkit-scrollbar,  ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track { 
    width: 0.5vw; height:0.5vw;  background-color: rgba(255,255,255,0); }
    
  ::-webkit-scrollbar-thumb { border-radius: 0.25vw; background-color:  #00b1eb; min-height: 50px;}
  
   #itmFolder { 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto ;
    grid-column-gap: 0.5vw; grid-row-gap: 0px;
    width:100%; height:auto;}
    
  #folder1 { }
  #folder2 { }
  #folderTxt { grid-column: 1/3;
    font-size:1.1em; line-height:1.2em; font-weight:500;
    height:auto; text-align:center;  } 
 
    
  
  html, body { font-size: calc(20px + (26 - 20) * ((100vw - 1024px) / (1344 - 1024))); }
 
   }  
/* -------------------------------------------------------- */
/*  --------------     large scherm     ----------------    */
/* -------------------------------------------------------- */
@media only screen and (min-width: 1344px) {  
  
  /* Works on Chrome, Edge, and Safari */
  ::-webkit-scrollbar,  ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track { 
    width: 0.4vw; height:0.4vw;  background-color: rgba(255,255,255,0); }
    
  ::-webkit-scrollbar-thumb { border-radius: 0.20vw; background-color:  #00b1eb; min-height: 50px;}

  
  .maandKalender { flex: 0 0 23.5%; }
  
  .maandKalender div:nth-child(1) { font-size:0.7em; line-height:1.3em; font-weight:500;}
  .maandKalender div:nth-child(n+2):nth-child(-n+8) { font-size: 0.6em; line-height:1.2em; font-weight:500;}
  .singleDay { font-size: 0.65em; line-height:1.4em; font-weight:500;}
 
  
 html, body { font-size: calc(27px + (27 - 26) * ((100vw - 1344px) / (1600 - 1344)));   }
	
  }