*{
    box-sizing: border-box;
  }
  
  .flexblock{
      display: flex;  /*zamienia elementy wewnatrz elementu na elementy liniowe */
      justify-content: space-between; /*rozklad w poziomie z odstepami */
      align-items: center; /* rozklad w pionie do srodka obiektu wycentrowanie */
  }
  .flexcol{
      display: flex;  /*zamienia elementy wewnatrz elementu na elementy liniowe */
      justify-content: center; /*rozklad w poziomie z odstepami */
      flex-direction: column;
      align-items: center; /* rozklad w pionie do srodka obiektu wycentrowanie */
  }
  body {
    font-family: lato;
    background: white;
    margin: 0;
    padding: 0;
  }

  .logocontainer{
    display: flex;
    width:150px;
    justify-content: center;
  }
  .logocontainer a{
    text-decoration: none;
    color: black;
  }
  .logo{
    height: 40px;
    width:30px;
    background-image: url(obrazy/logo2.svg);
    background-repeat: no-repeat;
    background-size: contain;
  }
  .menu {
       font-family: lato2;
    position: fixed;
    background: white;
    left: 0;
    top: 0;
    padding: 1%;
    width: 100%;
    border-bottom: 0.5vmin solid #52C5D5;
    border-top: 1px solid #52C5D5;
    transition: .15s;
    display: flex;
    flex-wrap: wrap;
     justify-content: space-between;
    
  }
  .menu a:hover {
    text-decoration: underline #1DAFD7;
   }

   .gallerymenu{ 
     position: fixed;       /* PASEK GORNY MENU GALERII*/
    width: 100%;
    height: 70px;
    top: 7vh;
    border-bottom: 3px solid #1DAFD7;
    background: white;
  }
  .gallerymenu a{
    text-decoration: none;
    color: white;
    background-image: linear-gradient(90deg, rgb(29, 175, 215) 0%, rgb(8, 95, 129) 100%);
    border-radius: 5px;
    width: 15%;
    text-align: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 2.2vmin;
    padding: 5px 10px 5px 5px;
  }
  .gallerymenu a:hover{
  
    background-image: linear-gradient(90deg, rgb(8, 95, 129) 0%, rgb(29, 175, 215) 100%);
  }
.gallery {
    display: grid;
    grid-template-columns: repeat(3, auto); /* 3 IMAGES PER ROW */
    grid-gap: 10px;
    max-width: 1200px;
    margin: 150px auto 20px auto; /* HORIZONTAL CENTER */
    justify-content: center;
  }
  .gallery img {
    max-height: 400px;

  }
  figure{
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 450px;
    box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
  }
  figcaption{
    width: 100%;
    color: black;
    margin-bottom: 5px;
}
  /* (A2) ON SMALL SCREENS */
  @media screen and (max-width: 950px) {
    .gallery {
      grid-template-columns: repeat(2, auto); /* 2 IMAGES PER ROW */
    }
    .gallery img {
        width: 100%;
      }
      figcaption{
          width: 100%;
      }
  }
  @media screen and (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(1, auto); 
      }
    }

  @media screen and (max-height: 600px){
    .gallerymenu{ 
     top: 13vh;
   }
    .gallery {
      grid-template-columns: repeat(2, auto); /* 2 IMAGES PER ROW */
      height: 50vh;
    }
    .gallery img {
        width: 100%;
        height: 100px;

      }
      figcaption{
          width: 100%;
      }
  }

   
  /* (B) THUMBNAILS */
  .gallery img {
    width: 100%;

    /* FILL, CONTAIN, COVER, SCALE-DOWN : USE WHICHEVER YOU LIKE */
    object-fit: contain;
  }
  .gallery img:fullscreen { 
    border: none;  
    object-fit: contain; }
   
  /* (X) DOES NOT MATTER */
  body, html {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  figcaption{
      text-align: center;
  }


  @font-face {
    font-family: lato;
    src: url(Lato-Black.ttf);
  }
  @font-face {
    font-family: lato2;
    src: url(Lato-Light.ttf);
  }