/* -------------------------------------------------------- */
  /*  --------------     alle schermem     ----------------    */
  /* -------------------------------------------------------- */
  
  :root {
    --pgBackColor: #ffffff;
	  --pgColor: #001a23; 
    --icoColor: #333;
    --colorRed: #ff0000;
	  --Mnu1BackColor: #ffffff; 
    --Mnu1Color: #31493c;
	  --Mnu1IcoColor: #31493c; 
	  --Mnu2BackColor: #e8f1f2;
	  --Mnu2Color: #31493c;
	  --Mnu1IcoColor: #31493c;
    --scrollBarColor: #00b1eb; }  
  
  * { box-sizing: border-box; 
      margin: 0;
      padding: 0;
      overflow-x:hidden;
      overflow-y:hidden;} 
      
   ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track { 
     width: 8.2vw;  background-color: var(--pgBackColor) ; }
  ::-webkit-scrollbar-button { display:none; }
  ::-webkit-scrollbar-track-piece {  display:none; }
  ::-webkit-scrollbar-corner { display:none; }
  ::-webkit-resizer { display: none; }
  ::-webkit-scrollbar-thumb { 
    border:0.4vw var(--pgBackColor) solid ;
    border-radius: 0.6vw;
	  background-color: var(--scrollBarColor); min-height: 3vw;}
  ::-webkit-scrollbar-track {      }  

  a { outline-color: transparent; text-decoration:underline; }
  a:link { color: var(--linkColor);  text-decoration:underline; background-color:transparent; }
  a:visited { color: var(--linkColor);  text-decoration:underline; background-color:transparent; }
  a:hover { color: var(--linkColor);  text-decoration:underline; background-color:transparent; }
  a:active { color: var(--linkColor);  text-decoration:underline; background-color:transparent; }
  

  /* -------------------------------------------------------- */
  /*  --------------     small scherm     ----------------    */
  /* -------------------------------------------------------- */
  html { 
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI','Helvetica Neue', Arial, sans-serif;
    font-size: 3.2vw; line-height: 1.125;
    font-weight: 500;  color:#ffffff; } 
    
  body { width:100%; height:100%; font-size: 1rem; } 
  
  button { background-color: transparent; border:0px transparent solid; }

  #titelWebsite {
    display:grid; position: fixed; 
    left:1vw; top:1vw; width:98vw; height:19vw; 
    grid-template-columns: 1vw 12vw 71vw 13vw 1vw;
    grid-template-rows: 13vw 1vw 4vw 1vw;
    justify-items:center; align-items: center; 
    column-gap:0vw; row-gap:0vw; } 
    
  #titelBackgrndv1 { 
    display:block;  position:absolute; z-index:90;
    left:0px ; top:0px; width:98vw; height:18vw; }

  #titelBackgrndv2 { display:none;  }
     
  #logoDLML {
    grid-column:2 ; grid-row:1 / span 4 ; 
    display:block; z-index: 92 ;
    height: 19vw; aspect-ratio: 2/3;
    cursor: pointer;}   
  
  #btnMnu { 
    grid-column:4 ; grid-row:1; 
    display:block; z-index:92;  
    width:13vw; aspect-ratio: 1/1;
    cursor: pointer;}   
	  
  #textTitelSite { 
    grid-column: 3; grid-row: 1;
    width:100%; height:100%;
    display:flex; z-index: 92;
    justify-content:center; align-items:center; 
    text-align:center; 
    font-size:1.4rem; line-height:1.6rem; font-weight:600; color:#ffffff; }
    
  #textTitelSite #lnBrk{ display:block; z-index:92 ;  }  
    
  #actieveMnu {
      grid-column: 3 / -2  ; grid-row: 3 ;
      justify-self:end; align-self: center;
      display:block; z-index:92 ; width:auto; height:3.2vw;
      font-size:2.4vw; line-height:3.2vw;
      padding: 0 2.8vw; border-radius: 1.6vw;  
      background-color:#ff0000 ; color:#ffffff; }
      
  #contentWebSite {
    display:grid; position:fixed; 
    left:1vw; top:20vw; width:98vw; height:calc( 100vh - 21vw);
    grid-template-columns:98vw;
    grid-template-rows: calc( 100vh - 21vw);  }
 
  #Mnu1 { display:none;  }       
   
  #allPages { 
    grid-column: 1; grid-row: 1; position:absolute;
    justify-self:stretch; align-self:stretch;
    display: block; position:relative;  
    width:98vw;height: calc(100vh - 21vw);
    background-color: var(--pgBackColor) ; 
	  border: 1vw var(--pgBackColor) solid; 
    overflow-x:hidden; overflow-y: hidden; } 

  .pgContent {
    position:relative;  
    width:98vw; height:calc(100vh - 21vw);
    overflow-x:hidden; overflow-y:hidden;}
  
  .pgContent iframe {  
    width:96vw; height:calc(100vh - 21vw);
    border:none; 
    overflow-x:hidden; overflow-y:auto;}
        
  .emptyspace { display:block; width:100%; height:2vw; background-color:transparent;} 
       
  #Mnu2 { 
    display:none; position:fixed; z-index:99;
    right: 3vw; top: 6vw; width: auto; height: auto;  
    background-color: var(--Mnu2BackColor);  color: var(--Mnu2Color);
    border-width: 1.5vw 1.5vw 1.5vw 1.5vw; border-style: solid;
    border-color: var(--Mnu2BackColor) ;
    outline:1px #a0a0c4 solid; outline-offset: -1.5vw;
    overflow-y:auto;}

  #MnuLst2 {   
    display:grid; z-index:99;
    background-color: var(--Mnu2BackColor);  color: var(--Mnu2Color);
    width: auto; height: auto;
    grid-template-columns: auto  1fr; 
    grid-auto-rows: auto ;
    justify-content: start; align-content: start; 
    justify-items:stretch; align-items:stretch; 
    row-gap:0px; column-gap: 0px; }
    
  #MnuLst2 div:nth-child(3n+1) {  
    grid-column: 1 / span 1 ;
    display:flex; justify-content: center; align-items:center;
    font-size:1rem; line-height:1rem; font-weight:500; 
    padding: 0.25vw 1vw 0.25vw 1vw;
    cursor: pointer;}
  
  #MnuLst2 div:nth-child(3n+2) {  
    grid-column: 2 / span 2 ; 
    font-size:1.35rem; line-height:1.35rem; font-weight:500; 
    padding: 0.25vw 2vw 0.25vw 1vw;
    cursor: pointer;}
   
  #MnuLst2 div:nth-child(3n+3) {
    grid-column: 1 / span 2 ;
    cursor: none; }  
 
  .MnuLn1 {
    width:100%; height:1px;
    background-color: transparent ;
    border: 0px transparent solid;  ;}   
    
 .MnuLn5 {
    width:100%; height:5px;
    background-color: var(--Mnu2Color) ;  
    border-width: 2px 0 2px 0; 
    border-color: var(--Mnu2BackColor) ; border-style: solid; }   
    
 

   
  /* -------------------------------------------------------- */
  /*  --------------     medium scherm     ----------------    */
  /* -------------------------------------------------------- */
  @media only screen and (min-width: 768px) and ( orientation: landscape)   {  

  html { 
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI','Helvetica Neue', Arial, sans-serif;
    font-size: 3.2vw; line-height: 1.125;
    font-weight: 500;  color:#ffffff; }  
 
  body { width:100%; height:100%; font-size: 1rem;}
 
  #titelWebsite {
    display:grid; position: fixed; 
    left:1vw; top:1vw; width:98vw; height:14vw; 
    grid-template-columns: 1vw 8vw 80vw 8vw 1vw;
    grid-template-rows: 8vw 1vw 4vw 1vw;
    justify-items:center; align-items: center; 
    column-gap:0vw; row-gap:0vw; } 
    
  #titelBackgrndv1 { display:none;  }
  
  #titelBackgrndv2 { 
    display:block;  position:absolute; z-index:90;
    left:0px ; top:0px; width:98vw; height:12vw; }
  
  #logoDLML {
    grid-column:2 ; grid-row:1 / span 4 ; 
    display:block; z-index: 92;  
    height: 14vw; aspect-ratio: 2/3;
    cursor: pointer;}   
  
  #btnMnu { 
    grid-column:4 ; grid-row:1; 
    display:block;  z-index: 92; 
    width:8vw; aspect-ratio: 1/1;
    cursor: pointer;}   
	  
  #textTitelSite { 
    grid-column: 3; grid-row: 1;
    width:100%; height:100%;
    display:flex;  z-index: 92;
    justify-content:center; align-items:center; 
    text-align:center; 
    font-size:1.1rem; line-height:1.3rem; font-weight:600; color:#ffffff; }
  
  #textTitelSite #lnBrk{ display:none;  }    
 
  #actieveMnu {
    grid-column: 3 / -2  ; grid-row: 3 ;
    justify-self:end; align-self: center;
    display:block; z-index: 92; width:auto; height:3.2vw;
    font-size:2.4vw; line-height:3.2vw;
    padding: 0 2.8vw; border-radius: 1.6vw;  
    background-color:#ff0000 ; color:#ffffff;  }  
 
  #contentWebSite {
    display:grid; position:fixed; 
    left:1vw; top:15vw; width:98vw; height:calc( 100vh - 16vw);
    grid-template-columns:98vw;
    grid-template-rows: calc( 100vh - 16vw);
    }
    
  #Mnu1 { display:none;  }
  
  #allPages { 
    grid-column: 1; grid-row: 1;  
    justify-self:stretch; align-self:stretch;
    display: block; position:relative;  
    width:98vw; height:calc( 100vh - 16vw);
    background-color: var(--pgBackColor); 
	  border: 1vw var(--pgBackColor) solid; 
    overflow-x:hidden; overflow-y: hidden; } 
  
  .pgContent {  
    width:98vw; height:calc(100vh - 16vw);
    overflow-x:hidden; overflow-y:hidden;}
  
  .pgContent iframe {  
    width:96vw; height:calc(100vh - 16vw);
    border:none; 
    overflow-x:hidden; overflow-y:auto;}
        
  .emptyspace { display:block; width:100%; height:2vw; background-color:transparent;} 

  #Mnu2 { 
    display:none; position:fixed; z-index:99;
    right: 3vw; top: 6vw; width: auto; height: auto;  
    background-color: var(--Mnu2BackColor);  color: var(--Mnu2Color);
    border-width: 1.5vw 1.5vw 1.5vw 1.5vw; border-style: solid;
    border-color: var(--Mnu2BackColor) ;
    outline:1px #a0a0c4 solid; outline-offset: -1.5vw;
    overflow-y:auto;}

  #MnuLst2 {   
    display:grid; z-index:99;
    background-color: var(--Mnu2BackColor);  color: var(--Mnu2Color);
    width: auto; height: auto;
    grid-template-columns: auto  1fr; 
    grid-auto-rows: auto ;
    justify-content: start; align-content: start; 
    justify-items:stretch; align-items:stretch; 
    row-gap:0px; column-gap: 0px; }
    
  #MnuLst2 div:nth-child(3n+1) {  
    grid-column: 1 / span 1 ;
    display:flex; justify-content: center; align-items:center;
    font-size:1rem; line-height:1rem; font-weight:500; 
    padding: 0.25vw 1vw 0.25vw 1vw;
    cursor: pointer;}
  
  #MnuLst2 div:nth-child(3n+2) {  
    grid-column: 2 / span 2 ; 
    font-size:1.35rem; line-height:1.35rem; font-weight:500; 
    padding: 0.25vw 2vw 0.25vw 1vw;
    cursor: pointer;}
   
  #MnuLst2 div:nth-child(3n+3) {
    grid-column: 1 / span 2 ; 
    cursor: none; }  
 
  .MnuLn1 {
    width:100%; height:1px;
    background-color: transparent ;
    border: 0px transparent solid;  ;}   
    
 .MnuLn5 {
    width:100%; height:5px;
    background-color: var(--Mnu2Color) ;
    border-width: 2px 0 2px 0; 
    border-color: var(--Mnu2BackColor) ; border-style: solid; }   
 
  }   
  
  /* -------------------------------------------------------- */
  /*  --------------     large scherm     ----------------    */
  /* -------------------------------------------------------- */
  @media only screen and (min-width: 1080px) {  
    
  html { 
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI','Helvetica Neue', Arial, sans-serif;
    font-size: 1.8vw; line-height: 1.125;
    font-weight: 500;  color:#ffffff; }  
  
  body { width:100%; height:100%; font-size: 1rem; }
 
  #titelWebsite {
    display:grid; position: fixed; 
    left:1vw; top:1vw; width:98vw; height:14vw; 
    grid-template-columns: 1vw 8vw 86vw 3vw;
    grid-template-rows: 8vw 1vw 4vw 1vw;
    justify-items:center; align-items: center; 
    column-gap:0vw; row-gap:0vw;} 
      
  #titelBackgrndv1 { display:none;  }
    
  #titelBackgrndv2 { 
    display:block;  position:absolute; z-index:90;
    left:0px ; top:0px; width:98vw; height:12vw; }
  
  #logoDLML {
    grid-column:2 ; grid-row:1 / span 4 ; 
    display:block;  
    height: 14vw; aspect-ratio: 2/3;
    cursor: pointer;}   
  
  #btnMnu { display:none; }   
	  
  #textTitelSite {  
    grid-column: 3 / -2; grid-row: 1;
    width:100%; height:100%;
    display:flex; 
    justify-content:center; align-items:center; 
    text-align:center; 
    font-size:2rem; line-height:2.2rem; font-weight:600; color:#ffffff; }
  
  #textTitelSite #lnBrk{ display:none;  }    
   
  #actieveMnu {
    grid-column: 3 / -2  ; grid-row: 3 ;
    justify-self:end; align-self: center;
    display:block; width:auto; height:3.2vw;
    font-size:2.4vw; line-height:3.2vw;
    padding: 0 2.8vw; border-radius: 1.6vw;  
    background-color:#ff0000 ; color:#ffffff; }  

  #contentWebSite {
    display:grid; position:fixed; 
    left:1vw; top:15vw; width:98vw; height:calc( 100vh - 16vw);
    grid-template-columns: 24vw 1vw 73vw;
    grid-template-rows:calc( 100vh - 16vw); }
  
  #allPages { 
    grid-column: 3; grid-row: 1;
    justify-self:stretch; align-self:stretch;
    width:73vw; height:calc( 100vh - 16vw); 
    display: block; position:relative; 
    background-color: var(--pgBackColor); 
	  border: 1vw var(--pgBackColor) solid; 
    overflow-x:hidden; overflow-y: hidden; } 
  
  .pgContent {  
    width:73vw; height:calc(100vh - 16vw);
    overflow-x:hidden; overflow-y:hidden;}
  
  .pgContent iframe {  
    width:71vw; height:calc(100vh - 16vw);
    border:none; 
    overflow-x:hidden; overflow-y:auto;}
        
  .emptyspace { display:block; width:100%; height:2vw; background-color:transparent;} 

  #Mnu1 { 
    display:block; grid-column: 1; grid-row: 1;
    background-color: var(--Mnu1BackColor);  color: var(--Mnu1Color);
    width: 40vw; height: calc( 100vh - 16vw); 
    max-height:calc( 100vh - 16vw) ; overflow-y:auto; }

  #MnuLst1 {   
    display:grid; z-index:99;
    background-color: var(--Mnu1BackColor);  color: var(--Mnu1Color);
    border: 0px #a0a0c4 solid; 
    width: auto; height: auto;
    grid-template-columns: auto  1fr 0.5vw ; 
    grid-auto-rows: auto ;
    justify-content: start; align-content: start; 
    justify-items:stretch; align-items:stretch; 
    row-gap:0px; column-gap: 0px; }
    
  #MnuLst1 div:nth-child(3n+1) {  
    grid-column: 1 ;
    display:flex; justify-content: center; align-items:center;
    font-size:0.8rem; line-height:0.8rem; font-weight:500; 
    padding: 0.25vw 0.5vw 0.25vw 0.5vw;
    cursor: pointer;}
  
  #MnuLst1 div:nth-child(3n+2) {  
    grid-column: 2  ; 
    font-size:1.15rem; line-height:1.15rem; font-weight:500; 
    padding: 0.15vw 0vw 0.15vw 0.5vw;
    cursor: pointer;}
  
  #MnuLst1 div:nth-child(3n+3) {
    grid-column: 1 / span 2 ;
    cursor: none; }  
   
  .MnuLn1 {
    width:100%; height:1px;
    background-color: transparent ;
    border: 0px transparent solid;  ;}   
    
  .MnuLn5 {
    width:100%; height:5px;
    background-color: var(--Mnu1Color) ;
    border-width: 2px 0 2px 0; 
    border-color: var(--Mnu1BackColor) ; border-style: solid; }   
  
   .emptyspace { display:block; width:100%; height:2vw; background-color:transparent;} 
  
  #Mnu2 { display:none; }  
  
  
      
  }