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

  .titelFotoGrp { 
    display:grid;  
  	margin: 5vw 4% 3vw 4%;   
    grid-template-columns: 1fr;
	  grid-template-rows: auto;
	  justify-content: center; align-content: start; 
	  justify-items: center; align-items: center; }
	
  .titelFotoGrp label {
    display:flex; margin: 0 auto;
    text-align: center; 
	  width:100%; height: auto;
	  justify-content: center;  
	  align-items: center;
	  font-size:1.3em; font-weight:bold; color: var(--colorRed); }
	    
  .fotoGroup { 
    display:flex;
	  width: 92%; height:auto;
	  margin: 0 4% 0 4%;   
    flex-wrap:wrap; 
    flex-direction: row; align-items: flex-end;
    justify-content:space-between;}
   
  .fotoImg  {
    width:100%; height:auto;
    outline: 1px #333 solid; outline-offset:-1px;
    border:1.2vw #ececf4 solid;
    margin-bottom:2vw;}     
 
  .fotoDatum { 
    display:block; position:absolute;
	  left:1.5vw; right:1.5vw; bottom:3vw; 
    text-align:center;
    color:#ffffff; }
      
  .Grp01 div:nth-child(1) { width: calc((100% - 2vw) * 0.5); order: 2; }
  .Grp01 div:nth-child(2) { width: 100% ; order: 1 ;  }
  .Grp01 div:nth-child(3) { width: calc((100% - 2vw) * 0.5); order: 3; }
  
  .Grp02 div:nth-child(1) { width: calc((100% - 2vw) * 0.5); order:1; }
  .Grp02 div:nth-child(2) { width: calc((100% - 2vw) * 0.5); order:2; }
   
  .Grp03 div:nth-child(1) { width: calc((100% - 2vw) * 0.33) ; }
  .Grp03 div:nth-child(2) { width: calc((100% - 2vw) * 0.66) ; } 
  
  .Grp04 div { width: 100%; }
    
  .Grp05 div { width: calc((100% - 4vw) * 0.33); }
     
  .Grp06 div:nth-child(1) { width: calc((100% - 2vw) * 0.49); }
  .Grp06 div:nth-child(2) { 
    width: calc((100% - 2vw) * 0.51) ; order:2; align-self:stretch; 
    display:flex; flex-direction:column; 
	  justify-content:space-between; } 
   
  .Grp07 div:nth-child(1) { width: calc((100% - 2vw) * 0.50 ); order: 2; }
  .Grp07 div:nth-child(2) { width: 100% ; order: 1 ;  }
  .Grp07 div:nth-child(3) { width: calc((100% - 2vw) * 0.50 ); order: 3; }
  
  .Grp08 div:nth-child(1) { width: calc((100% - 2vw) * 0.52); }
  .Grp08 div:nth-child(2) { 
    width: calc((100% - 2vw) * 0.48) ; order:2; align-self:stretch; 
    display:flex; flex-direction:column; 
	  justify-content:space-between; } 
  
  
  .Grp09 div:nth-child(1) { width: calc((100% - 2vw) * 0.50 ); order: 2; }
  .Grp09 div:nth-child(2) { width: 100% ; order: 1; }
  .Grp09 div:nth-child(3) { width: calc((100% - 2vw) * 0.50 ); order: 3; }
	 
  .Grp10 div:nth-child(1) { 
    width: calc((100% - 2vw) * 0.61); 
    display:flex; flex-direction:column; } 
  
  .Grp10 div:nth-child(2) { 
    width: calc((100% - 2vw) * 0.39) ; order:2; align-self:stretch; 
    display:flex; flex-direction:column; 
	  justify-content:space-between; } 
 
  .Grp10 div video {
    width:100%; margin-bottom:2vw; } 
 
  .Grp11 div:nth-child(1) { width: calc((100% - 2vw) * 0.435); }
  .Grp11 div:nth-child(2) { 
    width: calc((100% - 2vw) * 0.565) ; order:2; align-self:stretch; 
    display:flex; flex-direction:column; 
	  justify-content:space-between; } 

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

  .fotoImg  { border:0.8vw #ececf4 solid; margin-bottom:1.8vw; }     

  .fotoDatum { left:1.25vw; right:1.25vw; bottom:2.2vw; }
      
  .Grp01 div:nth-child(1) { width: calc((100% - 3.6vw) * 0.32); order: 1; }
  .Grp01 div:nth-child(2) { width: calc((100% - 3.6vw) * 0.36); order: 2 ;  }
  .Grp01 div:nth-child(3) { width: calc((100% - 3.6vw) * 0.32); order: 3; }
  
  .Grp02 div:nth-child(1) { width: calc((100% - 1.8vw) * 0.5); order:1; }
  .Grp02 div:nth-child(2) { width: calc((100% - 1.8vw) * 0.5); order:2; }
   
  .Grp03 div:nth-child(1) { width: calc((100% - 1.8vw) * 0.33) ; }
  .Grp03 div:nth-child(2) { width: calc((100% - 1.8vw) * 0.66) ; } 
  
  .Grp04 div { width: 100%; }
    
  .Grp05 div { width: calc((100% - 3.6vw) * 0.33); }
     
  .Grp06 div:nth-child(1) { width: calc((100% - 1.8vw) * 0.49); }
  .Grp06 div:nth-child(2) { 
    width: calc((100% - 1.8vw) * 0.51) ; order:2; align-self:stretch; 
    display:flex; flex-direction:column; 
	  justify-content:space-between; } 
  
  .Grp07 div:nth-child(1) { width: calc((100% - 3.6vw) * 0.30 ); order: 1; }
  .Grp07 div:nth-child(2) { width: calc((100% - 3.6vw) * 0.40 ); order: 2 ;  }
  .Grp07 div:nth-child(3) { width: calc((100% - 3.6vw) * 0.30 ); order: 3; }
  
  .Grp08 div:nth-child(1) { width: calc((100% - 1.8vw) * 0.52); }
  .Grp08 div:nth-child(2) { 
    width: calc((100% - 1.8vw) * 0.48) ; order:2; align-self:stretch; 
    display:flex; flex-direction:column; 
	  justify-content:space-between; } 
  
  .Grp09 div:nth-child(1) { width: calc((100% - 3.6vw) * 0.33 ); order: 1; }
  .Grp09 div:nth-child(2) { width: calc((100% - 3.6vw) * 0.33 ); order: 2; }
  .Grp09 div:nth-child(3) { width: calc((100% - 3.6vw) * 0.33 ); order: 3; }

  .Grp10 div:nth-child(1) { 
    width: calc((100% - 2vw) * 0.61); 
    display:flex; flex-direction:column; } 
  .Grp10 div:nth-child(2) { 
    width: calc((100% - 2vw) * 0.39) ; order:2; align-self:stretch; 
    display:flex; flex-direction:column; 
	  justify-content:space-between; } 
 
  .Grp10 div video {
    width:100%; margin-bottom:2vw; } 
 
  .Grp11 div:nth-child(1) { width: calc((100% - 2vw) * 0.435); }
  .Grp11 div:nth-child(2) { 
    width: calc((100% - 2vw) * 0.565) ; order:2; align-self:stretch; 
    display:flex; flex-direction:column; 
	  justify-content:space-between; } 
    	
  }  

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

  .fotoImg  {border:0.6vw #ececf4 solid; margin-bottom:1.5vw;}     
 
  .fotoDatum { left:0.8vw; right:0.8vw; bottom:2vw; }
  
  .Grp01 div:nth-child(1) { width: calc((100% - 3vw) * 0.32); order: 1; }
  .Grp01 div:nth-child(2) { width: calc((100% - 3vw) * 0.36); order: 2 ;  }
  .Grp01 div:nth-child(3) { width: calc((100% - 3vw) * 0.32); order: 3; }
  
  .Grp02 div:nth-child(1) { width: calc((100% - 1.5vw) * 0.5); order:1; }
  .Grp02 div:nth-child(2) { width: calc((100% - 1.5vw) * 0.5); order:2; }
   
  .Grp03 div:nth-child(1) { width: calc((100% - 1.5vw) * 0.33) ; }
  .Grp03 div:nth-child(2) { width: calc((100% - 1.5vw) * 0.66) ; } 
  
  .Grp04 div { width: 100%; }
    
  .Grp05 div { width: calc((100% - 3vw) * 0.33); }
     
  .Grp06 div:nth-child(1) { width: calc((100% - 1.5vw) * 0.49); }
  .Grp06 div:nth-child(2) { 
    width: calc((100% - 1.5vw) * 0.51) ; order:2; align-self:stretch; 
    display:flex; flex-direction:column; 
	  justify-content:space-between; } 
  
  .Grp07 div:nth-child(1) { width: calc((100% - 3vw) * 0.30 ); order: 1; }
  .Grp07 div:nth-child(2) { width: calc((100% - 3vw) * 0.40 ); order: 2 ;  }
  .Grp07 div:nth-child(3) { width: calc((100% - 3vw) * 0.30 ); order: 3; }
  
  .Grp08 div:nth-child(1) { width: calc((100% - 1.5vw) * 0.52); }
  .Grp08 div:nth-child(2) { 
    width: calc((100% - 1.5vw) * 0.48) ; order:2; align-self:stretch; 
    display:flex; flex-direction:column; 
	  justify-content:space-between; } 
  
  .Grp09 div:nth-child(1) { width: calc((100% - 3vw) * 0.33 ); order: 1; }
  .Grp09 div:nth-child(2) { width: calc((100% - 3vw) * 0.33 ); order: 2; }
  .Grp09 div:nth-child(3) { width: calc((100% - 3vw) * 0.33 ); order: 3; }
  
  .Grp10 div:nth-child(1) { 
    width: calc((100% - 2vw) * 0.61); 
    display:flex; flex-direction:column; } 
  
  .Grp10 div:nth-child(2) { 
    width: calc((100% - 2vw) * 0.39) ; order:2; align-self:stretch; 
    display:flex; flex-direction:column; 
	justify-content:space-between; } 
 
  .Grp10 div video {
    width:100%; margin-bottom:2vw; } 
  
  .Grp11 div:nth-child(1) { width: calc((100% - 2vw) * 0.435); }
  .Grp11 div:nth-child(2) { 
    width: calc((100% - 2vw) * 0.565) ; order:2; align-self:stretch; 
    display:flex; flex-direction:column; 
	  justify-content:space-between; } 
    
  }