body {
	display: flex;
    flex-direction: column;
    min-height: 100vh;
	background: #e8ecf1;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
	color: #07354f;
}

header {	
	padding: 50px 0;
	background: #10828f;
    background: radial-gradient(circle, #0661a0 0%, #051a2b 100%);
	color: #fff;
}
main {flex: 1; /*background-image: url("../img/header.png"); background-size: auto; background-repeat: no-repeat; background-position: top center;*/}

@font-face {
  font-family: 'Roboto';
  font-variation-settings: 'wght' 400;
  src: url('../fonts/Roboto.ttf') format('truetype');
  font-display: swap;
}

* 	{padding: 0; margin: 0;}
a 	{text-decoration: none; color: #fff;}
h1 	{font-weight: 900; font-size: 32px; letter-spacing: 1px; font-style: italic;}
h2 	{font-weight: 900; font-size: 20px;}

.container {margin: auto; max-width: 1366px;}
.front-page {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: normal;
	gap: 25px;
}
.flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/***** header *****/ 

	.logo 		{display: block; width: max-content; margin: 0 auto; padding: 25px 0; color: #fff;}
	.logo span 	{display: block; padding: 3px 0; text-align: center; font-style: normal; font-weight: 500; font-size: 14px; letter-spacing: 1px;}
	
	.description 	{display: block; border-top: solid 1px #62afec61; max-width: 420px; text-align: center; padding: 25px 0; margin: auto;}
	.description a  {
		display: block; max-width: max-content;
		background: #031e2d96; color: #fff; font-weight: 500;
		padding: 14px 18px; margin: 65px auto 0px auto; border-radius: 5px;
	} .description a:hover {background: #031e2dd4;}

/***** gallery *****/

.gallery {display: flex; flex-direction: column; flex-wrap: wrap; gap: 2px;}
.gallery a {display: block;}
.gallery a img {display: block; width: 220px; height: auto; opacity: 0.85;}
.gallery a:hover img {transform: scale(1.05); opacity: 1.0; z-index: 100; transition: transform 0.2s;}

/***** services *****/

	.title {margin: 75px auto 35px auto; text-align: center;}
	.work-list 		{display: flex; flex-direction: column; flex-wrap: wrap; gap: 12px; border-radius: 5px; max-width: max-content; background: #fff; padding: 17px; margin: 0 15px;}
	.work-list li	{display: block; background: #ffffff8c; padding: 10px 15px;}
	
/***** menu *****/ 

#menu {
	display: flex;
	flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
	gap: 25px;
	margin: 0 auto;
    padding: 75px 0;
} #menu li {display: block;}

#menu a {
		display: block;
		border-radius: 5px;
		width: 120px;
		height: auto;
		border: 1px solid #cfd4d6;
		padding: 10px 10px;
		border-radius: 10px;
		text-align: center;
		font-weight: 500;
	}
#menu img	{display: block; background: #07354f; margin: 15px auto; padding: 10px; border-radius: 100px; width: 35px; height: auto; aspect-ratio: 1/1;}
#menu span	{display: block; color: #07354f; width: 120px; line-height: 20px; padding: 15px 0;}
#menu svg	{display: block; margin: auto; width: 100%; height: 35px; fill: #07354f; background: #e1e3e5; border-radius: 5px;}
	
	#menu a:hover svg {fill: #fff; background: #07354f;}
	#menu a:hover img {transform: scale(1.15); transition: transform 0.2s;}

/***** kontakt *****/

.kontakt-info-title {display: block; max-width: 380px; padding: 75px 25px 55px 25px;}
.kontakt-info-title span {display: block; text-align: right; padding: 15px 0 0 0; font-weight: 500;}

	.kontakt-section	{padding: 55px 0; margin: 0 15px; border-top: solid 1px #d2dce0; border-bottom: solid 1px #d2dce0;}
	.kontakt-section h2 {text-align: center;}

	.kontakt-tab {display: flex; flex-wrap: wrap; flex-direction: column; align-content: center; gap: 10px; margin: auto; padding: 25px 0;}
	.kontakt-tab p		{font-size: 15px; font-weight: 700; padding: 10px;}
	.kontakt-tab small  {display: block; font-weight: 400;}
	.kontakt-tab a {
				width: 220px; display: flex; flex-direction: row; flex-wrap: wrap;
				align-content: center; align-items: center; justify-content: space-between;
				background: #0661a0; padding: 3px 3px 3px 13px; border-radius: 5px; font-weight: 700;
			}
	.kontakt-tab img {display: inline-block; padding: 10px; border-radius: 5px; aspect-ratio: 1/1; width: 25px; height: auto;}
	
	.copy-email.copied {} /** skopírovaný mail **/
	
		.kontakt-tab a:hover 	 {background: #082d47;}
		.kontakt-tab a:hover img {transform: scale(1.15); transition: transform 0.2s;}
	
/***** footer *****/ 
	
.copyright {display: block; padding: 75px 0; margin: auto; text-align: center; color: #879499;}

@media screen and (max-width: 1366px) {
	.container{max-width: 1366px;}
}

@media screen and (max-width: 1024px) {
	.container{max-width: 1024px;}
}

@media screen and (max-width: 960px) {
	.container{max-width: 960px;}
}

@media screen and (max-width: 680px) {
	.container{max-width: 768px;}
	.front-page{flex-direction: column-reverse; align-items: center;}
	.gallery a img {width: 320px; height: auto;}
}

@media screen and (max-width: 480px) {
	.container{max-width: 480px;}
	.logo {padding: 25px 0;}
	.description{max-width: 280px; padding: 25px 0;}
}

/***** lightbox *****/

/* Lightbox overlay */
.lightbox-overlay {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(30,30,40,0.92);
  justify-content: center;
  align-items: center;
  transition: opacity 0.25s;
}

/* Aktívny lightbox */
.lightbox-overlay.active {
  display: flex;
}

/* Lightbox image */
.lightbox-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* Zatvárací krížik */
.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: none;
  border: none;
  font-size: 2.4rem;
  color: #fff;
  cursor: pointer;
  z-index: 1100;
  transition: color 0.2s;
}

.lightbox-close:hover {
  color: #d34529;
}