/* ----------------------------------------------------- */
/* ----------------     small scherm     ------------    */
/* ----------------------------------------------------- */

   
  .informatie {  
    display:grid; 
	  width: 92%; height:auto;
	  margin: 5vw 4% 10vw 4%;
	  grid-template-columns: 40%  auto 1fr;
	  grid-template-rows: auto auto repeat(25, auto);
	  justify-content:center; align-content: start; 
    justify-items:start; align-items: center; 
    grid-row-gap: 0px; grid-column-gap:1.2vw; }
    
  .informatie label { 
    grid-column: 1 / span 3;
	  display:flex; margin: 0 auto;
	  position:relative;text-align:center;
    width:auto; height: auto;
	  justify-content: center;  
	  align-items: center; }
	
  .tblSize1 { grid-template-columns: auto 1fr; }	
  .tblSize2 { grid-template-columns: auto 1fr; }	
  .tblSize3 { grid-template-columns: auto 1fr; }	
  .tblSize4 { grid-template-columns: 75%  0px 1fr; }	
  .tblSize4 { grid-template-columns: 75%  0px 1fr; }	
    
  .tblSize1 label { grid-column: 1 / span 2; }	
  .tblSize2 label { grid-column: 1 / span 2; }	
  .tblSize3 label { grid-column: 1 / span 2; }	
 .tblSize4 label { grid-column: 1 / span 3;  }	
    
  .informatie label:nth-child(1) { font-size:1.3em; font-weight:bold; color: var(--colorRed); }
  .informatie label:nth-child(2) { font-size:1.15em; font-weight:bold; color: var(--colorRed); }
   
  .informatieImg {  
    grid-row: 3 / -1;  
  	display:flex ; align-self: start;  
  	margin: 0 0 0 0;
  	align-items: flex-start; 
  	align-content:flex-start;
  	justify-content: center; }	
     
  .tblSize1 .informatieImg { grid-column: 1 / span 2 ; grid-row: 3 ; }	
  .tblSize2 .informatieImg { grid-column: 1 / span 2 ; grid-row: 3 ; }	
  .tblSize3 .informatieImg { grid-column: 1 / span 2 ; grid-row: 3 ; }
  .tblSize4 .informatieImg { grid-column: 1 ; grid-row: 3 / -1 ; }	
     
  .informatieImg img {
    border:0.8vw transparent solid;
    outline:1px var(--pgColor) solid; outline-offset:-2px;
  	width: calc(100% - 1.6vw); height: auto;
  	margin: 0 0 1vw 0 ;}
  	 
   .informatie div { white-space:nowrap; overflow:visible;}
    
   .smallLine { font-size:0.4em;  line-height:1.2; }
    
 

  /* -------------------------------------------------------- */
  /*  --------------     medium scherm     --------------    */
  /* -------------------------------------------------------- */
  @media only screen and (min-width: 768px) and ( orientation: landscape)  {  
  
  .informatie {  }
 
  .informatie label { 
    grid-column: 1 / span 3;
	  display:flex; margin: 0 auto;
	  position:relative;text-align:center; 
	  width:auto; height: auto;
	  justify-content: center;  
	  align-items: center; }

  .informatie label {   }

  .tblSize1 { grid-template-columns: auto 1fr; }	
  .tblSize2 { grid-template-columns: 30%  auto 1fr; }	
  .tblSize3 { grid-template-columns: 50%  auto 1fr; }	
  .tblSize4 { grid-template-columns: 60%  0px 1fr; }	
   
  .tblSize1 label { grid-column: 1 / span 2; }	
  .tblSize2 label { grid-column: 1 / span 3; }	
  .tblSize3 label { grid-column: 1 / span 3; }	
  .tblSize4 label { grid-column: 1 / span 3; }	
 
  .informatie label:nth-child(1) {  }
  .informatie label:nth-child(2) {  }

  .informatieImg {  }	

  .tblSize1 .informatieImg { grid-column: 1 / span 2 ; grid-row: 3 ; }	
  .tblSize2 .informatieImg { grid-column: 1 ; grid-row: 3 / -1 ; }	
  .tblSize3 .informatieImg { grid-column: 1 ; grid-row: 3 / -1 ; }
  .tblSize4 .informatieImg { grid-column: 1 ; grid-row: 3 / -1 ; }	
   
   .informatieImg img {  }

   .informatie div { }
   
   .smallLine { font-size:0.4em;  line-height:1.2; }
   
    }
	


  /* -------------------------------------------------------- */
  /*  --------------     large scherm     ----------------    */
  /* -------------------------------------------------------- */
  @media only screen and (min-width: 1280px) {  
  
  .informatie {  }

  .informatie label {   }

  .tblSize1 {  }	
  .tblSize2 {  }	
  .tblSize3 {  }	
  .tblSize4 {  }	
  
  .tblSize1 label {  }	
  .tblSize2 label {  }	
  .tblSize3 label {  }	
  .tblSize4 label {  }	
  
  .informatie label:nth-child(1) {  }
  .informatie label:nth-child(2) {  }
 
  .informatieImg {    }	
   
  .tblSize1 .informatieImg {  }	
  .tblSize2 .informatieImg {  }	
  .tblSize3 .informatieImg {  }
  .tblSize4 .informatieImg {  }	
   
   .informatieImg img {  }
	
    .informatieImg img {  }

   .informatie div { }
   
   .smallLine { font-size:0.4em;  line-height:1.2; }
  
     }