/* ----------------------------------------------------- */
/* ----------------     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; }
	 
   .titelFotoGrp label:nth-child(1) { font-size:2.5rem; font-weight:bold; color: var(--colorRed); }
   .titelFotoGrp label:nth-child(2) {font-size:2rem; font-weight:normal; 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; }   
    
  .Grp12 div:nth-child(1) { width: calc((100% - 2vw) * 0.33 ); order: 1; }
  .Grp12 div:nth-child(2) { width: calc((100% - 2vw) * 0.33 ); order: 2; }
  .Grp12 div:nth-child(3) { width: calc((100% - 2vw) * 0.33 ); order: 3; }
 
   
  #fullscreen { 
    display: flex; position:relative; visibility:hidden;
    justify-content:center; align-content:center;
    width:auto; height:auto;}
  
  #fullScreen img { 
    display:block; 
    max-height:100%; max-width: 100%;
    object-fit: contain;  }
   
  button { border:none; background-color:transparent;} 
   
  #btnClose, #btnDownload, #btnZoom { 
    display:inline-block; border: 0px transparent solid;    
    position:absolute; z-index:244; 
    background-color: transparent; color:#ffffff;
    width:5vw; height:5vw;
    cursor:pointer; } 
     
  #btnPrev, #btnNext { 
    display:inline-block;  border: 0px transparent solid;
    position:absolute; z-index:244; 
    background-color:  transparent; color:#ffffff;
    width:6vw; height:7.5vw;
    cursor:pointer; }
   
  #btnClose     { position:absolute; right:2vw; top:1vw; } 
  #btnDownload  { position:absolute; right:10vw; top:1vw; } 
  
  
  #btnPrev { position:absolute; left:2vw; top:50%; } 
  #btnNext { position: absolute; right:2vw; top:50%;}
  
  #textFullScreen { 
    display:inline-block; position:absolute; z-index:248;
    left:0px; right:0px; top: 4vw; height: 3.4vw;
    font-size: 2.8vw; line-height:3.2vw; 
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    text-align: center; 
    color:#ffffff; background-color: transparent; } 
    
  img.LogoSize1 {
    display:inline-block; background-color:transparent; 
	  height: 3.2rem; width: auto; } 
  
  img.LogoSize2 {
    display:inline-block; background-color:transparent; 
	  height: 5rem; width: auto; }   

  img.LogoSize3 {
    display:inline-block; background-color:transparent; 
	  height: 8rem; width: auto; }   
	 
/* -------------------------------------------------------- */
/*  --------------     medium scherm     --------------    */
/* -------------------------------------------------------- */
 @media only screen and (min-width: 768px) and ( orientation: landscape)  {  
  
  .titelFotoGrp {  }
	
  .titelFotoGrp label {  }
	 
  .titelFotoGrp  label:nth-child(1) { font-size:1.9rem; font-weight:bold; color: var(--colorRed); }
  .titelFotoGrp  label:nth-child(2) {font-size:1.7rem; font-weight:normal; color: var(--colorRed); }
  
  .fotoGroup {  } 

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

  .fotoDatum { left:1.25vw; right:1.25vw; bottom:2.2vw; font-size:0.9em; }
      
  .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; }  
    
  .Grp12 div:nth-child(1) { width: calc((100% - 3.6vw) * 0.33 ); order: 1; }
  .Grp12 div:nth-child(2) { width: calc((100% - 3.6vw) * 0.33 ); order: 2; }
  .Grp12 div:nth-child(3) { width: calc((100% - 3.6vw) * 0.33 ); order: 3; }
 
  #fullscreen { 
    display: flex; position:relative; visibility:hidden; 
    justify-content:center; align-content:center;
    width:48vw; height:27vw;}
  
  #fullScreen img { 
    display:block; max-height:100%; max-width: 100%;
    object-fit: contain;}
   
  button { border:none; background-color:transparent;} 
   
  #btnClose, #btnDownload, #btnZoom { 
    display:inline-block; border: 0px transparent solid;    
    position:absolute; z-index:244; 
    background-color: transparent; color:#ffffff;
    width:4vw; height:4vw;
    cursor:pointer; } 
     
  #btnPrev, #btnNext { 
    display:inline-block;  border: 0px transparent solid;
    position:absolute; z-index:244; 
    background-color:  transparent; color:#ffffff;
    width:5.2vw; height:6.5vw;
    cursor:pointer; }
   
  #btnClose     { position:absolute; right:2vw; top:1vw; } 
  #btnDownload  { position:absolute; right:10vw; top:1vw; } 
  
  
  #btnPrev { position:absolute; left:2vw; top:50%; } 
  #btnNext { position: absolute; right:2vw; top:50%;}
  
  #textFullScreen { 
    display:inline-block; position:absolute; z-index:248;
    left:0px; right:0px; top: 4vw; height: 3.4vw;
    font-size: 2.4vw; line-height:2.6vw; 
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    text-align: center; 
    color:#ffffff; background-color: transparent; } 
    
  img.LogoSize1 {
    display:inline-block; background-color:transparent; 
	  height: 3.2rem; width: auto; } 
  
  img.LogoSize2 {
    display:inline-block; background-color:transparent; 
	  height: 5rem; width: auto; }   

  img.LogoSize3 {
    display:inline-block; background-color:transparent; 
	  height: 8rem; width: auto; }   
	      	
  }
  
/* -------------------------------------------------------- */
/*  --------------     medium scherm     --------------    */
/* -------------------------------------------------------- */
 @media only screen and (min-width: 768px) and ( orientation: landscape)  {   
 
  #fullscreen { 
    display: flex; position:relative; visibility:hidden;
    justify-content:center; align-content:center;
    width:48vw; height:27vw;}
  
  #fullScreen img { 
    display:block; max-height:100%; max-width: 100%;
    object-fit: contain;}
   
  button { border:none; background-color:transparent;} 
   
  #btnClose, #btnDownload, #btnZoom { 
    display:inline-block; border: 0px transparent solid;    
    position:absolute; z-index:244; 
    background-color: transparent; color:#ffffff;
    width:3vw; height:3vw;
    cursor:pointer; } 
     
  #btnPrev, #btnNext { 
    display:inline-block;  border: 0px transparent solid;
    position:absolute; z-index:244; 
    background-color:  transparent; color:#ffffff;
    width:4vw; height:5vw;
    cursor:pointer; }
   
  #btnClose     { position:absolute; right:2vw; top:1vw; } 
  #btnDownload  { position:absolute; right:10vw; top:1vw; } 
  
  
  #btnPrev { position:absolute; left:2vw; top:50%; } 
  #btnNext { position: absolute; right:2vw; top:50%;}
  
  #textFullScreen { 
    display:inline-block; position:absolute; z-index:248;
    left:0px; right:0px; top: 4vw; height: 3.4vw;
    font-size: 2vw; line-height:2.2vw; 
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    text-align: center; 
    color:#ffffff; background-color: transparent; } 
    
  img.LogoSize1 {
    display:inline-block; background-color:transparent; 
	  height: 3.2rem; width: auto; } 
  
  img.LogoSize2 {
    display:inline-block; background-color:transparent; 
	  height: 5rem; width: auto; }   

  img.LogoSize3 {
    display:inline-block; background-color:transparent; 
	  height: 8rem; width: auto; }   
	      	
  }