@font-face {
    font-family: 'Lato';
    src: url('/Lato/Lato-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
font-family: 'Lato', sans-serif;
}
.animated.standby {
  -webkit-animation: none !important;
  -o-animation: none !important;
  animation: none !important;
  visibility: hidden;
}
html, body {
  margin: 0;
  font-family: sans-serif;
  scroll-behavior: smooth;
}
img {
	max-width:100%;
}

#results-content,#results-content2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 15px;
 	margin:auto auto;
	max-width:1100px;
	padding-left:20px;
	padding-right:20px;
}
#apartman-wellness, #apartman-wellness2 {
	margin-top:30px;
	margin-bottom:30px;
}
#apartman-wellness span, #apartman-wellness2 span {
	background-color:#f5cb5c;
	padding:10px;
		-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}
#apartman-wellness:hover, #apartman-wellness2:hover {
	text-decoration:underline;
	cursor:pointer;
}
#results-content a, #results-content2 a {
  width: calc(20% - 10px);
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}
#results-content img:hover, #results-content2 img:hover {
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity:0.8;
	opacity:0.8;
	transition:all 0.7s ease;	
}

#results p.zavriet, #results2 p.zavriet {
  display: block;
  text-align: center;
  cursor: pointer;
  color: #000;
  font-weight: bold;
  margin-top: 15px;
}

#results p.zavriet:hover, #results2 p.zavriet:hover {
  color: #000;
  text-decoration: underline;
}




.centrovanie {
	text-align:center;
	position:relative;
}
.centrovanie img {
	position:relative;
	z-index:1;
}
.row {
	background-color:#000000;
	height:5px;
	position:absolute;
	z-index:10;
	/*height:5px;
	position:absolute;
	width:100%;
	top:0;*/
}


.obal {
	margin:auto auto;
	max-width:1100px;
	padding-left:20px;
	padding-right:20px;
}
#menu {
	position:absolute;
	top:0;
	z-index:10;
	width:100%;
background: rgba(0, 0, 0, 1)
	
}
#menu .obal {
	display:flex;
	justify-content:space-between;
}
#menu .obal a {
	display:flex;
	align-items:center;
	color:#fff;
	text-decoration:none;
}
#menu img {
	height:55px;
	margin-top:7px;
	margin-bottom:7px;
	margin-right:7px;
	filter: brightness(0) saturate(100%) invert(100%) sepia(94%) saturate(0%) hue-rotate(9deg) brightness(115%) contrast(101%);
}
#menu img:hover {
filter: brightness(0) saturate(100%) invert(83%) sepia(8%) saturate(2659%) hue-rotate(358deg) brightness(100%) contrast(93%);
}
#menu ul {
	list-style:none;
	display:flex;
	align-items:center;
}
#menu ul li {
	margin-left:30px;
}
#menu ul li a.menuodkaz {
  position: relative;
  display: inline-block;
  padding: 9px 0px;
  text-decoration: none;
  font-size: 17px;

}
#menu ul li a.menuodkaz::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #35363a;
  transition: all 0.4s ease;
  transform: translateX(-50%);
}
#menu ul li a.menuodkaz:hover::after {
  width: 100%;
}
#menu ul li#rezervacia a {
	display:block;
	padding:7px;
	color:#000;
}
#menu ul li#rezervacia {
    position: relative;
    border: 2px solid transparent;
    box-sizing: border-box;
	background-color:#f5cb5c;
	margin-left:120px;
	transition:all 0.7s ease;
		-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#menu ul li#rezervacia i {
	margin-left:15px;
}
#menu ul li#rezervacia:hover {
	background-color:#b29139;
	transition:all 0.7s ease;	
}
.lity-container {
	max-width:1024px!important;
	padding:27px!important;

}
.lity-content {
	padding:27px!important;
	background-color:#FFFFFF;
}
#intro {
	background-color:#000;
	height:90vh;
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
}
#intro div img#element {
	max-width:360px;
	margin-top:17px;
	filter: brightness(0) saturate(100%) invert(97%) sepia(18%) saturate(3105%) hue-rotate(315deg) brightness(103%) contrast(92%);
}
.element2 {
	max-width:360px;
	margin-top:17px;
	filter: brightness(0) saturate(100%) invert(65%) sepia(4%) saturate(18%) hue-rotate(350deg) brightness(94%) contrast(83%);
}
#intro div {
	position:absolute;
	z-index:100;
	color:#fff;
	text-align:center;
}
#intro div h1 {
	color:#f5cb5c;
	font-size: clamp(32px, 5vw, 77px);
	margin:auto auto;
	margin-bottom:10px;
	padding-left:2%;
	padding-right:2%;
}
#intro div h1 span {
	font-weight:800;
}
#intro div p {
	color:#fff;
	font-size: clamp(18px, 5vw, 23px);
	margin:auto auto;
	padding-left:2%;
	padding-right:2%;
	
}
#intro img#introimg {
	height:100%;
	width:100%;
object-fit: cover;
filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity:0.3;
	opacity:0.3;
	animation: floatZoom 20s ease-in-out infinite alternate;
}


@keyframes floatZoom {
	0% {
		transform: scale(1) translate(0,0);
	}
	25% {
		transform: scale(1.05) translate(-10px, 5px);
	}
	50% {
		transform: scale(1.03) translate(10px, -5px);
	}
	75% {
		transform: scale(1.06) translate(-5px, -10px);
	}
	100% {
		transform: scale(1.04) translate(5px, 10px);
	}
}



.zazrak1 {
	border-right:solid 10px #EAEAEA;
	padding-right:45px;
}
.zazrak2 {
	border-left:solid 10px #EAEAEA;
	padding-left:45px;
}



/*
#menu ul li#rezervacia {
	background-color:#009900;
	margin-left:70px;
	transition:all 0.7s ease;
	padding-left:12px;
	padding-right:12px;
}
#menu ul li#rezervacia:hover {
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity:0.8;
	opacity:0.8;
	transition:all 0.7s ease;	
}
#menu ul li#rezervacia i {
	margin-left:10px;
}
#menu .obal #rezervacia a {
	color:#fff;
	padding:6px;
}*/
#viewer {
  width: 100%;
  height: 80vh;
  margin: 0;
  position:relative;
  font-family: sans-serif;
}
#viewer img {
	position:absolute;
	right:9px;
	bottom:55px;
	width:27px;
	z-index:10;
	filter: brightness(0) saturate(100%) invert(99%) sepia(67%) saturate(0%) hue-rotate(142deg) brightness(109%) contrast(101%);
}
#mapa {
	width:100%;
	height:400px;
	border:0;
}
h1 {
	color:#35363a;
	font-size:47px;
	font-weight:normal;
	margin-top:50px;
	margin-bottom:37px;
}
h2 {
	color:#333;
	font-size: clamp(28px, 5vw, 37px);
	font-weight:normal;
	margin-top:47px;
	margin-bottom:25px;
}
#cennikflex {
	display:flex;
	align-items:center;
	margin-bottom:35px;
}
#cennikflex img {
	object-fit: cover;
}
.box {
  flex: 1;
  width: 50%;
}
.box:first-child {
  margin-right: 50px; /* Adds spacing only to the right of the first box */
}


.normal {
	font-size:18px;
	line-height:31px;
	color:#333333;
	text-align:justify;
}
.order {
	display:flex;
justify-content:center;
gap:25px;
}
.telefon {
	text-align:center;
	background-color:#f5cb5c;
	transition:all 0.7s ease;
	margin-top:25px;
	margin-bottom:45px;
	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display:flex;
align-items:center;
	
}
.telefon i {
	margin-right:10px;
}
.telefon:hover {
	background-color:#41c08c;
	transition:all 0.7s ease;
}
.telefon a {
	color:#000000;
	font-weight:bold;
	padding:17px;
	display:block;
	text-decoration:none;
}











.galleryobal {
	background-color:#cccccc;
	margin-top:15px;
}
.gallery {
	max-width:1100px;
	padding-left:20px;
	padding-right:20px;
	margin:auto auto;
	max-height:370px;
  --n: 1; /* Custom property to adjust factor */
  --m: 5; /* Number of columns */
  --g: 10px; /* Gap between items */
  --f: 0.3; /* Scaling factor */
  display: grid;
  gap: var(--g);
 
  height: 60vh;
  grid-template-columns: repeat(var(--m), auto);
  position: relative; /* Make sure container has relative positioning */
}

.gallery > a {
  display: flex;  /* Ensure images fill their containers */
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevent images from overflowing */
  position: relative;
}

.gallery > a > img {
  width: 0;
  height: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: 0.35s linear;
}

.gallery img:hover {
  width: calc(100vh * var(--f) / var(--n)); /* Enlarge based on height and factor */
  height: calc(100vw * var(--f) / var(--m)); /* Enlarge based on width and factor */
}
.black {
	color:#000;
	text-decoration:none;
}
.black:hover {
	text-decoration:underline;
}
.back-to-top {
	position:fixed;
	bottom:2em;
	z-index:15;
	right:0;
	text-decoration:none;
	color:#ffffff;
	font-weight:bold;
	background-color:#35363a;
	padding:1em;
	display:none;
}
.back-to-top:hover {	
	background-color:rgba(135, 135, 135);
	color:#000000;
}

footer {
	text-align:center;
	font-size:14px;
	color:#666666;
}
footer a {
	color:#666666;
	text-decoration:none;
}
footer a:hover {
	color:#000000;
}
footer span {
	display:none;
}



@media screen and (max-width:1024px) 
{
footer span {
	display:block;
}
#intro div img#element {
	max-width:60%;
}
.zazrak1 {
	border-right:0;
	padding-right:0;
}
.zazrak2 {
	border-left:0;
	padding-left:0;
}
.obal {
	padding-left:10px;
	padding-right:10px;
}
h1, h2 {
	text-align:center;
}
.bs, .cennikflex, .cennikflex .normal, .box {
	text-align:center;
}

#menu ul li a.menuodkaz {
	display:none;	
}
#menu ul li#rezervacia a {
	display:block;
	padding:7px;
	width:auto;
}
#menu ul li#rezervacia {
    position: relative;
    border: 2px solid transparent;
    box-sizing: border-box;
	background-color:#f5cb5c;
	margin-left:0px;
	transition:all 0.7s ease;
	text-align:center;
}
#menu ul {
	display:block;
	width:40%;
	padding:0;
}
.centermobil {
	text-align:center;
}
#cennikflex {
	display:flex;
	align-items:center;
	flex-direction:column;
}
.box {
  flex: 1;
  width: 100%;
}
.box:first-child {
  margin-right: 0px; /* Adds spacing only to the right of the first box */
}
.gallery, .gallery2 {
	display:flex;
	flex-wrap:wrap;
	max-height:none;
	height:auto;
	flex-direction: row;
	padding:0;
	width:100%;
	
}
.gallery > a {
	display:block;
	aspect-ratio:4/3;
}
.gallery > a {
	width:100%;
}
.gallery > a > img, .gallery2 > a > img {
width:100%;
min-width:inherit;
}
.element2 {
	max-width:60%;
}

.gallery img:hover, .gallery2 img:hover {
  filter: none;
  width: 100%;
  height: 100%;
}





}

@supports (-webkit-touch-callout: none) {

  .gallery > a > img {
    width: 100%;
    height: 100%;
  }
  .gallery img:hover, .gallery2 img:hover {
  filter: none;
  width: 100%;
  height: auto;
}



.gallery img:hover {
  width: 100%; 
  height: auto;
}



  
}