/*
.pismo			 			{ width:40%; padding:12px; border:1px solid #666; background-color:#999; border-radius:10px; margin-top:40px; font-size:1.6rem; font-family: 'Shadows Into Light', cursive;}
<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
*/

/*HEADER v mobile a tablete
=======================================================================================*/
@media (max-width: 767px) {
.rhead-top				{display:none !important}
}

/*tlacitka
=======================================================================================*/
.btn						{ margin-bottom:10px;}

/*citaj viac - menej
=======================================================================================*/
.viacMenej				{ color:#FF7700; /*text-shadow:0.5px 0.5px #FFFFFF;*/ }
.viacMenej:hover		{ color:#FF9933; }

/*OBRAZKY 1 PX (OG)
=======================================================================================*/
.div-og					{width:50%; height:1px; /*background-color:#00CC99;*/ text-align:center;}
.img-og					{width:2px; height:2px; padding:0px; margin:0px; float:right;}

.obrmenu				{background-color:#eee;} /*pouzi v doprava rakusko */
.obrmenu img			{border:3px solid #fff; margin:2px;}

.p-pozn 					{font-style:italic; color:#999999;}
.h2hop					{margin-top:-60px;}
.hrciara-b		        {width:100%; height:1px; background-color:#FFFFFF; margin-bottom:60px; margin-top:40px;}
/*ZELENY OKEY V HEDERI
=======================================================================================*/
.zoka						{background-image:url(https://reny.sk/pic/ok.png); background-position:left top; background-repeat:no-repeat; padding-left:30px; font-size:1.1rem; text-shadow: 2px 6px 10px #666666;}
.zoki						{background-image:url(https://reny.sk/pic/oki.png); background-position:left top; background-repeat:no-repeat; padding-left:30px; font-size:1.1rem; text-shadow: 2px 6px 10px #666666;}
@media (max-width: 520px) {
.zoki			{background-image:url(https://reny.sk/pic/oki.png); background-position:left top; background-repeat:no-repeat; padding-left:30px; font-size:0.9rem; text-shadow: 2px 6px 10px #666666;}}
@media (min-width: 521px) and (max-width: 767px) {
.zoki			{background-image:url(https://reny.sk/pic/oki.png); background-position:left top; background-repeat:no-repeat; padding-left:30px; font-size:1.1rem; text-shadow: 2px 6px 10px #666666;}}
@media (min-width: 768px) and (max-width: 992px) {
.zoki			{background-image:url(https://reny.sk/pic/oki.png); background-position:left top; background-repeat:no-repeat; padding-left:30px; font-size:1.1rem; text-shadow: 2px 6px 10px #666666;}}
@media (min-width: 993px) and (max-width: 1200px) {
.zoki			{background-image:url(https://reny.sk/pic/oki.png); background-position:left top; background-repeat:no-repeat; padding-left:30px; font-size:1.1rem; text-shadow: 2px 6px 10px #666666;}}

.zoku						{background-image:url(https://reny.sk/pic/oku.png); background-position:left top; background-repeat:no-repeat; padding-left:30px; font-size:1.1rem; text-shadow: 2px 6px 10px #666666;}

/*PRERABANCE z reny.css------------------------------------------*/

/*MAPA ------------------------------------------*/
.linkimap 					{width:100%; text-align:center; height:20px; font-size:1.2rem;}

/*--STREDISKÁ -----------------------------------------------------*/
.nazov h1		 			{text-transform:uppercase;}
.menu h2		 			{font-size:26px; text-align:center; margin-bottom:80px; text-transform:uppercase;}
.zaver h2		 			{font-size:26px; text-align:center; text-transform:uppercase;}
.ph2						{font-size:16px; text-align:center; margin-bottom:70px; margin-top:-70px; }
.div-str					{padding:6px; background-color:#fff; border:1px solid #ccc; border-radius:4px; margin-bottom:40px; overflow:hidden;}
.div-str .p7				{font-size:0.7rem;}
.div-str .p8				{font-size:0.8rem;}
.div-str .p9				{font-size:0.9rem;}
.rtop-arrow-ob2			{display:block; background-color:#fff; padding-left:4px; height:40px;}
.h2-druhy					{margin-top:60px;}
.ul-plaz						{list-style-type:circle; font-size:1.1rem; margin-left:20px;}
.ul-laz						{list-style-type:circle; font-size:1.1rem; margin-left:20px; margin-top:40px;}
.my-ul						{list-style-type:circle; font-size:1.1rem; margin-left:20px;}
.mi-ul						{list-style-type:circle; font-size:1.1rem; margin-left:20px; margin-top:-40px;}

/*--FIRMY a WELLNESS -----------------------------------------------------*/
.rtop-arrow-ob2 h2	{font-size:26px; text-align:left; text-transform:none; margin-top: 8px; padding-top:5px;}
.div-str h2 				{font-size:26px; text-align:left; text-transform:none; margin-top: 0px; padding-top:5px; margin-bottom:0px;}

/*--MENU HOTELY -----------------------------------------------------*/
.div-hot						{padding:8px; background-color:#fff; border:1px solid #ccc; border-radius:4px; margin-bottom:20px; }
.div-hote					{ }
.div-hotel					{ }

.div-hotpod				{background-color:#efefef; text-align:center; padding-left:9px; padding-right:9px; padding-top:6px; }
.div-hotpod2			{background-color:#efefef; text-align:center; padding-left:9px; padding-right:9px; padding-top:6px; }
/*= lg =*/@media (min-width: 1200px) {
.div-hotpod				{height:70px; overflow:hidden;}
.div-hotpod2			{height:50px; overflow:hidden;}}
/*=md=*/@media (min-width: 992px) and (max-width: 1199px) {
.div-hotpod				{height:90px; overflow:hidden;}
.div-hotpod2			{height:50px; overflow:hidden;}}
/*=sm=*/@media (min-width: 768px) and (max-width: 991px) {
.div-hotpod				{height:90px; overflow:hidden;}
.div-hotpod2			{height:70px; overflow:hidden;}}
/*=xs =*/@media (min-width: 480px) and (max-width: 767px) {
.div-hotpod				{height:70px; overflow:hidden; }
.div-hotpod2			{height:70px; overflow:hidden;}}
/*=xxs */@media (max-width: 479px) {/*320*/
.div-hotpod				{height:70px; overflow:hidden; }
.div-hotpod2			{height:70px; overflow:hidden;}}

/*--MENU DESTINACIE -----------------------------------------------------*/
.div-despod				{background-color:#FFFFFF; text-align:center; padding-left:9px; padding-right:9px; padding-top:6px; }
/*= lg =*/@media (min-width: 1200px) {
.div-despod				{height:68px; overflow:hidden;}}
/*=md=*/@media (min-width: 992px) and (max-width: 1199px) {
.div-despod				{height:90px; overflow:hidden;}}
/*=sm=*/@media (min-width: 768px) and (max-width: 991px) {
.div-despod				{height:90px; overflow:hidden;}}
/*=xs =*/@media (min-width: 480px) and (max-width: 767px) {
.div-despod				{height:68px; overflow:hidden; }}
/*=xxs */@media (max-width: 479px) {/*320*/
.div-despod		{ }}

/*--ODKAZY, LINKY -----------------------------------------------------*/
.ul-linky						{list-style-type:none; font-size:1.1rem;}
.ul-link						{list-style-type:none; font-size:1.1rem; margin-top:40px;}
.ul-link li					{display:inline;}
.ul-link li#select a		{border-bottom:1px dotted #0066CC;} 
.ul-link .cierna				{color:#000000;}
.ul-link li::after 			{content: ",";}

/*--RATING -----------------------------------------------------*/
.rating						{width:100%; height:40px; margin-top:-80px; margin-bottom:40px;}
.div-center					{width:200px; height:40px; margin-left:auto; margin-right:auto; }
.img-rating					{max-width:200px; height:auto;}
.div-mini					{width:200px; font-size:0.8rem; text-align:center;}
.img-rat-ski				{max-width:120px; height:auto; margin-bottom:-20px; margin-top:30px;}

/*--RECENZIE -----------------------------------------------------*/
.img-recenz		{width:240px; margin-right:20px; margin-bottom:10px;}
/*= lg =*/@media (min-width: 1200px) {
.img-recenz				{width:240px;}}
/*=md=*/@media (min-width: 992px) and (max-width: 1199px) {
.img-recenz				{width:240px;}}
/*=sm=*/@media (min-width: 768px) and (max-width: 991px) {
.img-recenz				{width:240px;}}
/*=xs =*/@media (min-width: 480px) and (max-width: 767px) {
.img-recenz				{width:240px;}}
/*=xxs */@media (max-width: 479px) {/*320*/
.img-recenz				{width:400px;}}
.rec-presah		{height:200px; overflow:hidden;}
.rec-butko		{}


/* UBYTOVANIE - všetky hotelyy
======================================================================================*/

.arrowlink a		{color:#fff;}
.aname			{height:10px; padding:0px; margin:0px;}
.tlackat			{margin-top:-30px; text-align:center;}
.tlackat .btn	{}
.ubytko			{}
.menuubytko		{}
.ubytko h2		{margin-top:60px; margin-bottom:40px; text-align:left;}
.ubytko .ph2	{font-size:16px; text-align:center; margin-bottom:30px; margin-top:-30px; margin-left:4px; }
.ubytko h3		{margin-top:60px; margin-bottom:40px;}
.ph2u			{font-size:16px; text-align:left; margin-bottom:30px; margin-top:-30px; margin-left:4px; }

.divhotel2		{width:100%; height:24px; background-color:#999; position:relative; margin-top:-10px; opacity:1; color:#FFFFFF; font-size:0.74rem; padding:3px; border-top:1px solid #888; overflow:hidden;}
@media (min-width: 993px) and (max-width: 1200px) {
.divhotel2		{width:100%; height:20px; margin-top:-10px; font-size:0.64rem; padding:3px; overflow:hidden;}}
@media (min-width: 768px) and (max-width: 992px) {
.divhotel2		{width:100%; height:22px; margin-top:-10px; font-size:0.74rem; padding:3px; overflow:hidden;}}
@media (min-width: 641px) and (max-width: 767px) {
.divhotel2		{width:100%; height:36px; margin-top:-20px; font-size:1.05rem; padding:7px; overflow:hidden;}}
@media (min-width: 521px) and (max-width: 640px) {
.divhotel2		{width:100%; height:30px; margin-top:-20px; font-size:1.00rem; padding:3px; overflow:hidden;}}
@media (max-width: 520px) {
.divhotel2		{width:100%; height:22px; margin-top:-10px; font-size:0.74rem; padding:3px; overflow:hidden;}}

/*--IKONKY na miniatúre hotela -----------------------------------------------------*/
.icon-container {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-color: white;
    color: #CCCCCC;
    border-radius: 4px;
    opacity: 0.9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 100;
    pointer-events: auto;
}
@media (min-width: 993px) and (max-width: 1200px) {
.icon-container {position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; background-color: white;
	color: #CCCCCC; border-radius: 4px; opacity: 0.9; display: flex;  justify-content: center; align-items: center; font-size: 12px;
    font-weight: 100; pointer-events: auto; }}
@media (min-width: 768px) and (max-width: 992px) {
.icon-container {position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; background-color: white;
	color: #CCCCCC; border-radius: 4px; opacity: 0.9; display: flex;  justify-content: center; align-items: center; font-size: 12px;
    font-weight: 100; pointer-events: auto; }}
@media (min-width: 641px) and (max-width: 767px) {
.icon-container {position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background-color: white;
	color: #CCCCCC; border-radius: 4px; opacity: 0.9; display: flex;  justify-content: center; align-items: center; font-size: 24px;
    font-weight: 100; pointer-events: auto; }}
@media (min-width: 521px) and (max-width: 640px) {
.icon-container {position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; background-color: white;
	color: #CCCCCC; border-radius: 4px; opacity: 0.9; display: flex;  justify-content: center; align-items: center; font-size: 24px;
    font-weight: 100; pointer-events: auto; }}
@media (max-width: 520px) {
.icon-container {position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; background-color: white;
	color: #CCCCCC; border-radius: 4px; opacity: 0.9; display: flex;  justify-content: center; align-items: center; font-size: 12px;
    font-weight: 100; pointer-events: auto; }}

.sea-icon::before { /*priamo pri pláži*/
    content: "\F617"; /* Bootstrap icon for sea */
    font-family: 'bootstrap-icons';
}

.ai-icon::before { /*all inclusive*/
    content: "\F2DF"; /* Bootstrap icon for all-inclusive */
    font-family: 'bootstrap-icons';
}

.ski-icon::before { /*ski-in ski-out*/
    content: "\f7c9"; /* Bootstrap icon for ski-in ski-out */
	font-family: 'Font Awesome 6 Free'; /* Adjust based on your Font Awesome version and style */
    font-weight: 900;  /*Adjust based on the icon's style (e.g., 400 for regular, 900 for solid) */
}

.gondola-icon::before { /*ski-in ski-out*/
    content: "\f7da"; /* Bootstrap icon for ski-in ski-out */
	font-family: 'Font Awesome 6 Free'; /* Adjust based on your Font Awesome version and style */
    font-weight: 900;  /*Adjust based on the icon's style (e.g., 400 for regular, 900 for solid) */
}


.icon-container::after {
    position: absolute;
    top: -35px;
    right: 0;
    width: auto;
    padding: 5px 10px;
    background-color: #999;
    color: white;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.icon-container:hover::after {
    opacity: 1;
}

.sea-overlay {  position: relative;}
.sea-overlay .icon-container::after {
    content: 'priamo pri pláži';
}
.ai-overlay {  position: relative;}
.ai-overlay .icon-container::after {
    content: 'all inclusive';
}
.ski-overlay {  position: relative;}
.ski-overlay .icon-container::after {
    content: 'ski-in ski-out';
}
.gondola-overlay {  position: relative;}
.gondola-overlay .icon-container::after {
    content: 'pri lanovke / vleku';
}

/* LYZOVANIE 
======================================================================================*/
.ul-ski					{list-style-type:circle; font-size:1.1rem; margin-left:20px;}
.ul-skitop				{list-style-type:circle; font-size:1.1rem; margin-left:20px; margin-top:-30px;}
.text-ce					{color:#FF0000; font-weight:bold;}
.text-ci					{color:#000000; font-weight:bold;}
.text-m					{color:#0000FF; font-weight:bold;}
.atext					{color:#4C7299; /*border-bottom:1px dotted #333333;*/}
.cierna					{color:#333333;}

/* TEXTY
===================================================================================*/
.div-up {text-transform:uppercase;}
.aself				{color:#333333; text-decoration:none; font-weight:normal;}
.aself:hover	{color:#333333; text-decoration:underline;}
.aself:visited	{text-decoration:none;}

/* DOPLNKY PRE REENAP = XXS = ;) = https://github.com/auipga/bootstrap-xxs/blob/master/bootstrap-xxs.min.css
===================================================================================*/
.col-xxs-1,.col-xxs-2,.col-xxs-3,.col-xxs-4,.col-xxs-5,.col-xxs-6,.col-xxs-7,.col-xxs-8,.col-xxs-9,.col-xxs-10,.col-xxs-11,.col-xxs-12{min-height:1px;padding-left:15px;padding-right:15px;position:relative}@media(max-width:479px){.col-xxs-1,.col-xxs-2,.col-xxs-3,.col-xxs-4,.col-xxs-5,.col-xxs-6,.col-xxs-7,.col-xxs-8,.col-xxs-9,.col-xxs-10,.col-xxs-11,.col-xxs-12{float:left}.col-xxs-12{width:100%}.col-xxs-11{width:91.66666667%}.col-xxs-10{width:83.33333333%}.col-xxs-9{width:75%}.col-xxs-8{width:66.66666667%}.col-xxs-7{width:58.33333333%}.col-xxs-6{width:50%}.col-xxs-5{width:41.66666667%}.col-xxs-4{width:33.33333333%}.col-xxs-3{width:25%}.col-xxs-2{width:16.66666667%}.col-xxs-1{width:8.33333333%}.col-xxs-pull-12{right:100%}.col-xxs-pull-11{right:91.66666667%}.col-xxs-pull-10{right:83.33333333%}.col-xxs-pull-9{right:75%}.col-xxs-pull-8{right:66.66666667%}.col-xxs-pull-7{right:58.33333333%}.col-xxs-pull-6{right:50%}.col-xxs-pull-5{right:41.66666667%}.col-xxs-pull-4{right:33.33333333%}.col-xxs-pull-3{right:25%}.col-xxs-pull-2{right:16.66666667%}.col-xxs-pull-1{right:8.33333333%}.col-xxs-pull-0{right:auto}.col-xxs-push-12{left:100%}.col-xxs-push-11{left:91.66666667%}.col-xxs-push-10{left:83.33333333%}.col-xxs-push-9{left:75%}.col-xxs-push-8{left:66.66666667%}.col-xxs-push-7{left:58.33333333%}.col-xxs-push-6{left:50%}.col-xxs-push-5{left:41.66666667%}.col-xxs-push-4{left:33.33333333%}.col-xxs-push-3{left:25%}.col-xxs-push-2{left:16.66666667%}.col-xxs-push-1{left:8.33333333%}.col-xxs-push-0{left:auto}.col-xxs-offset-12{margin-left:100%}.col-xxs-offset-11{margin-left:91.66666667%}.col-xxs-offset-10{margin-left:83.33333333%}.col-xxs-offset-9{margin-left:75%}.col-xxs-offset-8{margin-left:66.66666667%}.col-xxs-offset-7{margin-left:58.33333333%}.col-xxs-offset-6{margin-left:50%}.col-xxs-offset-5{margin-left:41.66666667%}.col-xxs-offset-4{margin-left:33.33333333%}.col-xxs-offset-3{margin-left:25%}.col-xxs-offset-2{margin-left:16.66666667%}.col-xxs-offset-1{margin-left:8.33333333%}.col-xxs-offset-0{margin-left:0}}@media(max-width:479px){.hidden-xxs{display:none !important}}.visible-xxs{display:none !important}.visible-xxs-block,.visible-xxs-inline,.visible-xxs-inline-block{display:none !important}@media(max-width:479px){.visible-xxs{display:block !important}table.visible-xxs{display:table}tr.visible-xxs{display:table-row !important}th.visible-xxs,td.visible-xxs{display:table-cell !important}.visible-xxs-block{display:block !important}.visible-xxs-inline{display:inline !important}.visible-xxs-inline-block{display:inline-block !important}}

/* NAVIGÁCIA KAPITOLY
=======================================================================================*/
/* NAVIGÁCIA KAPITOLY
=======================================================================================*/
.chapter-anchor 		{
						display: block;
						position: relative;
						top: -50px;
						visibility: hidden;
						}
.chapter-nav 			{
						position: fixed; 
						z-index:1001;
						right: 0; 
						top: 50%; 
						transform: translateY(-50%);
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-end;
						}
.chapter-btn 			{
						position: relative; 
						display: flex;
						align-items: center;
						margin-bottom: 10px;
						padding: 5px;
						border-radius: 5px 0 0 5px;
						background-color: #f8f9fa;
						border: 1px solid #ddd;
						cursor: pointer;
						width: 40px;
						white-space: nowrap;
						transition: width 0.5s;
						}
.chapter-btn .bi		{
						font-size:24px;
						color: #000;
						}
.chapter-btn .fa 		{
						font-size:19px;
						color: #000;
						}
.chapter-text 			{
						display: none;
						margin-left: 10px;
						margin-right: 10px;
						color:#666666;
						font-size: 18px;
						}
#Brezervacia 			{
						background-color:#FF9934;
						}
#Brezervacia .chapter-text  			
						{
						color:#000;
						}
@media (min-width: 521px) {
.chapter-btn:hover		{
						position: relative; 
						width: 150px;
						}
.chapter-btn:hover .chapter-text		
						{
						display:inline;
						margin-left: 10px;
						margin-right: 10px;
						font-size: 18px;
						}
}
@media (max-width: 767px) {
.col-sm-12			{
						padding-right:40px;
						}
}
/* POPUP OKNO
=======================================================================================*/
/* Pop-up container */
.popup {
position: fixed;
bottom: 20px;
right: -200px; /* Start off-screen */
width: 150px;
height: auto;
background-color: white;
border: 2px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
display: none; /* Initially hidden */
transition: right 1s ease-in-out; /* Smooth transition */
}

/* Pop-up image */
.popup-image {
width: 100%;
height: auto;
}

/* Close button */
.close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    background-color: white; /* Add white background */
    border-radius: 50%; /* Make it a circle */
    width: 30px; /* Adjust width and height for size */
    height: 30px;
    line-height: 30px; /* Vertically center the text */
    text-align: center; /* Horizontally center the text */
    opacity: 0.8; /* Optional: Add a bit of transparency */
}
.close-btn:hover {
    opacity: 1; /* Optional: Make it fully opaque on hover */
    color: #333; /* Optional: Change color on hover */
}

/* Show the pop-up with sliding effect */
.popup.show {
right: 20px; /* Move to the visible position */
}