#kqs-box { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1100; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.5s linear; } #kqs-box-tlo { position: absolute; width: 100%; height: 100%; background-color: #000000; opacity: 0.2; } #kqs-box-podklad { position: relative; width: 95%; height: 95%; transition: opacity 0.5s linear; color: #000000; background-color: #ffffff; border-radius: 10px; border: 0; box-shadow: 0 5px 20px #808080; } #kqs-box-zawartosc { height: 100%; padding: 30px; } #kqs-box-x { width: 16px; height: 16px; position: absolute; cursor: pointer; top: 10px; right: 10px; background: url(img/iks.png) 0 0/16px no-repeat; box-sizing: content-box; } #galeria-box { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1100; opacity: 0; transition: 0.5s linear; flex-direction: column; align-items: center; padding: 30px 0; color: #000000; background-color: #ffffff; border: 0; } #galeria-box-podklad { flex: auto; display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 30px; min-height: 200px; overflow: hidden; } #galeria-box-podklad img { max-width: 100%; max-height: 100%; } #galeria-box-nazwa { text-align: center; margin: 20px } #galeria-box-miniatury { display: flex; margin: 0 auto; } #galeria-box-miniatury div { width: 60px; height: 60px; padding: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; opacity: 0.5; cursor: pointer; } #galeria-box-miniatury div.arrLeft, #galeria-box-miniatury div.arrRight { position: absolute; bottom: 50%; width: 40px; height: 40px; padding: 0; font-size: 20px; line-height: 20px; border: 1px solid grey; background-color: #ffffff; } #galeria-box-miniatury div:hover { opacity: 1; } #galeria-box-miniatury div.arrLeft { left: 20px; } #galeria-box-miniatury div.arrRight { right: 20px; } #galeria-box-miniatury img { max-width: 100%; max-height: 100%; border: 0; } #galeria-box-x { width: 40px; height: 40px; position: absolute; top: 0; right: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 40px; } @media screen and (max-width: 600px) { #galeria-box-miniatury div { width: 50px; height: 50px; } #galeria-box-podklad { padding: 0; } #galeria-box-nazwa { margin: 20px 10px; } #galeria-box-miniatury div.arrLeft { left: 10px; } #galeria-box-miniatury div.arrRight { right: 10px; } }