/* #Media Queries */

@media (max-width: 1450px){
  
  
}


@media (max-width: 1300px){
  .mainFrame {width: 100%; padding: 0 20px;}
}


@media (max-width: 1000px){
  #header::after {width: 90%; left: 5%;}

  #mainText {padding: 40px 40px;}
  #mainText .left {padding: 0 2%;}
}


@media (max-width: 900px) {

}


@media (max-width: 800px) {
  #mainText {flex-direction: column; align-items: center; gap: 60px; padding: 0 40px;}
  #mainText .gallery {margin: 40px 0 0 0;}
}


@media (max-width: 700px) {
  #photogallery .item {width: calc(50% - 5px);}
}


@media (max-width: 600px) {

  .burger {position: absolute; right: 5%; top: 45px; width: 40px; height: 30px; margin: 0 0 0 auto; cursor: pointer; z-index: 10001; display: flex; flex-direction: column; justify-content: space-between;}
  .burger span {height: 5px; width: 100%; background: #555555; border-radius: 2px; transition: 0.3s ease; transform-origin: center;}

  /* Burger jako křížek */
  .burger.active span:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
  .burger.active span:nth-child(2) {opacity: 0;}
  .burger.active span:nth-child(3) {transform: rotate(-45deg) translate(6px, -6px);}

  #menu {display: none;}
  #menu {position: absolute; right: 5%; top: 120px; width: auto; height: auto; margin: 0 0 0 0; background-color: #333333; z-index: 999; color: #ffffff;}
  #menu ul {display: block; flex-direction: column; padding: 20px;}
  #menu ul li {margin: 10px 0;}
  #menu ul li a {color: #ffffff;}
  #menu ul li a:hover {color: #ffffff;}

  #header {}
}

@media (max-width: 500px) {
  #mainText {padding: 0 20px;}

  #mainText .gallery {flex-wrap: wrap;}
  #mainText .gallery .col {flex: 0 0 calc(50% - 5px);}

  :root {
    --gallery-item-height: 100px;
  }
}

@media (max-width: 500px) {

}