.animated.standby {
  -webkit-animation: none !important;
  -o-animation: none !important;
  animation: none !important;
  visibility: hidden;
}
* {
	font-family: "Roboto", serif;
}
body {
	margin:0;
	padding:0;
}
.obal {
	max-width:860px;
	margin:auto auto;
	padding-left:20px;
	padding-right:20px;
}
.item span {
	cursor:pointer;
}
#menu {
	position:absolute;
	width:100%;
	top:0;
	background-color:rgba(36,36,36,0.5);
	backdrop-filter: blur(10px);
	padding-top:14px;
	padding-bottom:14px;
	z-index:10;
}
#menu img {
	height:35px;
	filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(128deg) brightness(104%) contrast(101%);
	margin-right:15px;
}
#menu a {
	color:#fff;
	text-decoration:none;
}
#menu a:hover {
	color:#ffb400;
}
#menu div a {
	padding-left:14px;
	padding-right:14px;
}
#home {
	display:flex;
	align-items:center;
}
#home i {
	font-size:30px;
	margin-right:10px;
}
#menu .obal {
	display:flex;
	justify-content:space-between;
}

    .thumbnail {
      max-width: 300px;
      cursor: pointer;
      display: block;
      margin: 40px auto;
    }

    .lightbox {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.85);
      justify-content: center;
      align-items: center;
    }

    .lightbox video {
      max-width: 90%;
      max-height: 90%;
      box-shadow: 0 0 20px #000;
    }

    .lightbox.active {
      display: flex;
    }

    .lightbox::after {
      content: '✕';
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 30px;
      color: white;
      cursor: pointer;
    }

#cover {
	background-image:url(bg.webp);
	height:100%;
	display:flex;
	justify-content:center;
	flex-direction:column;
	text-align:center;
	position:absolute;
	top:0;
	width:100%;
	height:100vh;
}
#slogan {
	font-size:67px;
	font-weight:500;
	max-width:860px;
	margin:auto auto;
	margin-bottom:15vh;
	color:#fff;
}
#onas {
	background-color:#242424;
	color:#fff;
	padding-bottom:120px;	
}
.ikona {
	text-align:center;
	margin-top:100px;
}
.ikona img {
	height:60px;
	margin:auto auto;
	filter: brightness(0) saturate(100%) invert(100%) sepia(99%) saturate(16%) hue-rotate(210deg) brightness(105%) contrast(100%);
}
h2 {
	margin:0;
	padding:0;
	color:#fff;
	font-size:38px;
	text-transform:uppercase;
	text-align:center;
	padding-top:120px;
}
h2 span {
	color:#ffb400;
}
#referencieodkaz {
	text-align:center;
	margin-top:75px;
}
#referencieodkaz a {
	background-color:#ffb400;
	color:#fff;
	padding:25px;
	display:inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-decoration:none;
}
#referencieodkaz a:hover {
	background-color:#0d0d0d;
}
.referencia {
	margin:0;
	padding:0;
	color:#ffb400;
	font-size:25px;
	text-transform:uppercase;
	text-align:center;
	padding-top:75px;
}
.subtitle {
	margin:0;
	padding:0;
	color:#999999;
	font-size:19px;
	text-align:center;
	text-transform:uppercase;
	margin-top:10px;
	margin-bottom:47px;
}
.standardtext {
	max-width:860px;
	text-align:justify;
	margin:auto auto;
	line-height:27px;
	font-weight:300;
	font-size:18px;
}
#kontakt div h2 {
	text-align:left;
}
#kontakt h2 {
	color:#242424;
}
#kontakt a {
	color:#000;
	text-decoration:none;
}
#kontakt a:hover {
	color:#ffb400;
}
.ikonky {
	display:flex;
	align-items:center;
	margin-bottom:27px;
	margin-top:27px;
}
.ikonky i {
	font-size:38px;
}
.ikonky span {
	width:57px;
}
#mapa {
	border:0;
	width:100%;
	display:block;
	margin-top:50px;
}
.polozka {
	flex: 1 1 calc(50% - 20px);
	aspect-ratio: 1;
	text-align:center;
	display:flex;
	flex-direction:row;
	align-items:center;
	transition: transform 0.3s ease;
	box-sizing: border-box;
	padding:20px;
	background-color:#151515;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	height:100%;
}
.polozka:hover {
	background-color:#0d0d0d;
}
.polozka h3 {
	color:#ffb400;
	font-weight:400;
	font-size:19px;
}
.polozka p {
	font-weight:300;
}
#polozky {
	display: flex;
	flex-wrap: wrap;
	gap:20px;
}
footer {
	background-color:#242424;
}
footer p {
	color:#ffb400;
	margin:0;
	padding-top:27px;
	padding-bottom:27px;
	font-weight:300;
	text-align:center;
	font-size:13px;
}
.back-to-top {
	position:fixed;
	bottom:2em;
	z-index:15;
	right:0;
	text-decoration:none;
	color:#ffffff;
	font-weight:bold;
	background-color:#ffb400;
	padding:1em;
	display:none;
}
.back-to-top:hover {	
	background-color:rgba(135, 135, 135);
	color:#000000;
}



.grid-container {
display: flex;
  flex-wrap: wrap; /* Allow wrapping to multiple rows */
  justify-content: center; /* Center items in the row */
  gap: 10px; /* Add spacing between items */
  padding: 10px;
}


.grid-container .item {
  flex: 1 1 calc((100% - 40px) / 4); /* Calculate width for up to 5 items */
  max-width: calc((100% - 40px) / 5); /* Ensure no more than 5 items */
  aspect-ratio: 1 / 1.3; /* Maintain aspect ratio */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}


.grid-container img {
aspect-ratio: 1 / 1.3;
object-fit: cover;
}
.grid-container img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}

.grid-container img:hover {
  transform: scale(1.05);
}
.centrovanie {
	margin-top:70px;
	text-align:center;
}
.referencie {
	background-color:#2c2c2c;
	margin:auto auto;
	padding:17px;
}
.referencie div {
	display:flex;
	align-items:center;
	text-align:center;
}
.referencie div strong {
	color:#ffb400;
	font-size:19px;
}




@media screen and (max-width:1024px) 
{

#slogan {
	font-size:38px;
	padding-left:10px;
	padding-right:10px;
}
h2 {
	font-size:28px;
}
.polozka {
	flex: 0 0 auto;
	width:100%;
}

.grid-container .item {
  flex: 1 1 calc((100% - 40px) / 4); /* Calculate width for up to 5 items */
  max-width: calc((100% - 40px) / 4); /* Ensure no more than 5 items */
  aspect-ratio: 1 / 1.3; /* Maintain aspect ratio */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}


}

@media screen and (max-width:768px) 
{

#menu div  {
	display:none;
}
#menu div a {
	display:flex;
	justify-content:center;
}
#menu .obal {
	display:block;
	text-align:center;
}
#home img {

}
.grid-container .item {
  flex: 1 1 calc((100% - 40px) / 3); /* Calculate width for up to 5 items */
  max-width: calc((100% - 40px) / 3); /* Ensure no more than 5 items */
  aspect-ratio: 1 / 1.3; /* Maintain aspect ratio */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}

}

@media screen and (max-width:640px) 
{

.grid-container .item {
  flex: 1 1 calc((100% - 40px) / 2); /* Calculate width for up to 5 items */
  max-width: calc((100% - 40px) / 2); /* Ensure no more than 5 items */
  aspect-ratio: 1 / 1.3; /* Maintain aspect ratio */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}

}