/* Allows for smoother transition browsign between pages - nevypadá dobře kvůli skrytému MODÁLU, který to zobrazuje

@view-transition {

  navigation: auto;

}

*/





/* Allows hover only if device has hover, i.e. solves the issue of constant hover on mobile after click */

@media (hover: hover) {	

	.lightbox_prev:hover, .lightbox_next:hover, .close:hover{

		background-color: rgba(220, 221, 220, 0.2);

	}

}











/* Swipe Gesture */

.dot{

	opacity:0; /* V produkci není potřeba vidět, tečku jsem používal jen pro test */

	background-color:red;

	width:2rem;

	height:2rem;

	border-radius:50%;

	position:absolute;

	transform:translate(-50%,-50%);

}







/*==================================================*/

/* TEST video */

/* =================================================*/

.video_overlay{



}



.video_overlay_file {

    position:absolute;

	top:0;

	left:0;

	width: 100%;

	height:100%;

	object-fit:cover;

	z-index:-1;

}



.background_video {

    display: flex;

    justify-content: center;

    margin: 1em;

    width: 230px;

    height: 440px;

    border-radius: 25px;

    margin: 20px auto;

    overflow: hidden;

}



.background_video_file {

    width: 250px;

}









/*==================================================*/

/* Tělo dokumentu */

/* =================================================*/	

	body{

		margin: 0 auto;

		font-family: arial;

		color: var(--color_scheme_light-Terciary);

		background-color: var(--color_scheme_light-Secondary);

	}

	

	.content {

		font-size: small;

		padding: 0.2em 1rem 0.2em 1rem;

		background-color: var(--color_scheme_light-Secondary);

	}

	

	.text_center{

		text-align:center;

	}

	

	.wrap_text_outside{

		overflow:hidden;

		margin-bottom:1em;

		margin-top: 1em;

	}

	

	.text{

		

	}

	

	.line_hr{

		display: block;

		border: 0;

		border-top: 2.0px solid var(--color_scheme_light-Primary);

		padding: 0;

		margin: 0;

		border-radius: 50%;

		box-shadow: var(--shadow_2);

	}

	

	.line_hr_narrow{

		margin:0 10em;

	}

	

	h1{

		margin:0;

	}

	

	ul{

		list-style: none;

		margin: 0;

		padding: 0;

	}

	

	a{

		text-decoration:none;

		color: inherit;

	}

	

	article{

	

	}



	article h1{

		font-size: x-large;

	}





		

/*==================================================*/

/* Elementy IKONY */

/* =================================================*/

	.contact_quick_item .stat{	

		margin-bottom: -14px;

		width: 30px;

		height: 30px;

		border-radius: 50%;

		background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(232, 240, 230, 0.98) 100%);

		border: 1px solid var(--color_scheme_light-Primary);

		position: relative;

		box-shadow: 0 0 5px #000000;

	}

	.icon_action_navi {

		-webkit-mask: url(/_assets/icon/navigate-outline.svg) no-repeat center;

		mask: url(/_assets/icon/navigate-outline.svg) no-repeat center;

		background-color: var(--color_scheme_light-Primary);

	}

	.icon_action_call {

		-webkit-mask: url(/_assets/icon/call-outline.svg) no-repeat center;

		mask: url(/_assets/icon/call-outline.svg) no-repeat center;

		background-color: var(--color_scheme_light-Primary);

	}

	.icon_action_text {

		-webkit-mask: url(/_assets/icon/mail-open-outline.svg) no-repeat center;

		mask: url(/_assets/icon/mail-open-outline.svg) no-repeat center;

		background-color: var(--color_scheme_light-Primary);

	}

	.icon_action_inst {

		-webkit-mask: url(/_assets/icon/logo-instagram.svg) no-repeat center;

		mask: url(/_assets/icon/logo-instagram.svg) no-repeat center;

		background-color: var(--color_scheme_light-Primary);

	}

	.icon_action_foll {

		-webkit-mask: url(/_assets/icon/share-social-outline.svg) no-repeat center;

		mask: url(/_assets/icon/share-social-outline.svg) no-repeat center;

		background-color: var(--color_scheme_light-Primary);

	}

	.icon_action_time {

		-webkit-mask: url(/_assets/icon/time-outline.svg) no-repeat center;

		mask: url(/_assets/icon/time-outline.svg) no-repeat center;

		background-color: var(--color_scheme_light-Primary);

	}

	.icon_logo_inst {

		-webkit-mask: url(/_assets/icon/logo-instagram.svg) no-repeat center;

		mask: url(/_assets/icon/logo-instagram.svg) no-repeat center;

		background-color: var(--color_scheme_light-Terciary);

	}		

	.icon_logo_face {

		-webkit-mask: url(/_assets/icon/logo-facebook.svg) no-repeat center;

		mask: url(/_assets/icon/logo-facebook.svg) no-repeat center;

		background-color: var(--color_scheme_light-Terciary);

	}

	.icon_card_flower {

		-webkit-mask: url(/_assets/icon/lulu/svg/kvietok-cropped.svg) no-repeat center;

		mask: url(/_assets/icon/lulu/svg/kvietok-cropped.svg) no-repeat center;

		background-color: var(--color_scheme_light-Primary);

		background-size: cover;

	}

	.icon_card_star {

		-webkit-mask: url(/_assets/icon/lulu/svg/hviezda-cropped.svg) no-repeat center;

		mask: url(/_assets/icon/lulu/svg/hviezda-cropped.svg) no-repeat center;

		background-color: var(--color_scheme_light-Primary);

		background-size: cover;

	}

	.icon_card_coin {

		-webkit-mask: url(/_assets/icon/lulu/svg/peniaze-cropped.svg) no-repeat center;

		mask: url(/_assets/icon/lulu/svg/peniaze-cropped.svg) no-repeat center;

		background-color: var(--color_scheme_light-Primary);

		background-size: cover;

	}

	.icon_card_rule {

		-webkit-mask: url(/_assets/icon/lulu/svg/pravitko-cropped.svg) no-repeat center;

		mask: url(/_assets/icon/lulu/svg/pravitko-cropped.svg) no-repeat center;

		background-color: var(--color_scheme_light-Primary);

		background-size: cover;

		transform: rotate(-45deg);

	}



	.icon_card_snow {

		-webkit-mask: url(/_assets/icon/lulu/svg/vlocka-cropped.svg) no-repeat center;

		mask: url(/_assets/icon/lulu/svg/vlocka-cropped.svg) no-repeat center;

		background-color: var(--color_scheme_light-Primary);

		background-size: cover;

	}

	.icon_card_temp {

		-webkit-mask: url(/_assets/svg/thermometer-outline.svg) no-repeat center;

		mask: url(/_assets/icon/thermometer-outline.svg) no-repeat center;

		background-color: var(--color_scheme_light-Primary);

		background-size: cover;

	}



	

/*==================================================*/

/* Karty FEATURE */

/* =================================================*/



		

.feature {

  display: flex;

  justify-content: center;

  padding:2em 0em;

}



.features-grid {

  /*display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  */

  gap: 15px;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

}



.feature-card {

	width:140px;

	min-height:235px;

  background: var(--card-bg);

  /* Subtle gradient to mimic the "misty" look in the original image */

  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(232, 240, 230, 0.4) 100%);

  border-radius: 30px;

  padding: 15px 15px;

  text-align: center;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.8);

  transition: transform 0.3s ease;

}



.feature-card:hover {

  transform: translateY(-2px);

}



.icon-wrapper {

  width: 70px;

  height: 50px;

  margin: 0 auto 20px;

  background-color: rgba(0, 0, 0, 0.03);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0.7;

}



.icon-wrapper img {

  width: 35px;

  height: 35px;

}



.feature-card h3 {

  font-size: small;

  font-weight: bold;

  margin-bottom: 10px;

}



.feature-card p {

  color: var(--text-muted);

  font-size: 0.5rem;

  line-height: 1.6;

  margin: 0;

}



/* Warning label */

.warning {

	border:1px dashed red;

	text-align:center;

	margin: 1em 10% 1.5em 10%;

	padding: 5px 5px 5px 5px;

}



/* END of Warning label */

	

/*==================================================*/

/* Vyhledávací okno */

/* =================================================*/

	.search_wrap {

		margin: 0 auto;

		margin-top: 0.5em;

		display: flex;

		align-items: center;

		justify-content: center;

	}

	

	.input__container {

	  position: relative;

	  background: rgba(255, 255, 255, 0.664);

	  padding: 10px 15px;

	  display: flex;

	  justify-content: center;

	  align-items: center;

	  gap: 5px;

	  border-radius: 22px;

	  max-width: 300px;

	  perspective: 500px;

	}

	

	.input__container .icon_input {

		-webkit-mask: url(/_assets/icon/settings-outline.svg) no-repeat center;

		mask: url(/_assets/icon/settings-outline.svg) no-repeat center;

		background-color: var(--color_scheme_light-Secondary);

		display: block;

		width: 20px;

		height: 20px;

	}



	.shadow__input {

	  content: "";

	  position: absolute;

	  width: 100%;

	  height: 60%;

	  left: 0;

	  bottom: 10px;

	  z-index: -1;

	  filter: blur(30px);

	  border-radius: 15px;

	  background-color: #999cff;

	  background-image: radial-gradient(at 85% 51%, hsla(60,60%,61%,1) 0px, transparent 50%),

		radial-gradient(at 74% 68%, hsla(235,69%,77%,1) 0px, transparent 50%),

		radial-gradient(at 64% 79%, hsla(284,72%,73%,1) 0px, transparent 50%),

		radial-gradient(at 75% 16%, hsla(283,60%,72%,1) 0px, transparent 50%),

		radial-gradient(at 90% 65%, hsla(153,70%,64%,1) 0px, transparent 50%),

		radial-gradient(at 91% 83%, hsla(283,74%,69%,1) 0px, transparent 50%),

		radial-gradient(at 72% 91%, hsla(213,75%,75%,1) 0px, transparent 50%);

	}



	.input__button__shadow {

	  cursor: pointer;

	  border: none;

	  background: none;

	  transition: transform 400ms, background 400ms;

	  display: flex;

	  justify-content: center;

	  align-items: center;

	  border-radius: 12px;

	  padding: 5px;

	}



	.input__button__shadow:hover {

		background: rgba(255, 255, 255, 0.411);

	}



	.input__search {

		width: 100%;

		border-radius: 20px;

		outline: none;

		border: none;

		padding: 8px 12px 8px 12px;

		position: relative;

		font-style: italic;

	}

	

	.filter_wrap {

		margin: 0em 1em 0em 1em;

		padding-bottom: 0.5em;

		text-align: center;

		line-height: 1.5em;

		border-bottom: 2px solid var(--color_scheme_light-Octonary);

	}

	

	.filter_wrap .divider_wrap .divider {

		width:100%;

		margin: 0 auto;

		margin-top: 0.5em;

	}

			

	



	

		

		/* Kontaktní stránka */

		.container{

			/*display:flex;*/

			align-items: center;

		}

		.contact_form_wrap{

			width:100%;

		}

		.container_contact{

			margin-bottom:2em;

		}

		.container_message{

			display:flex;

			justify-content:center;

			margin-bottom:2em;

		}

		.map_wrap{

			display:flex;

			flex-direction: column;

		}

		.map_header{



		}

		.map_body{

			height: 35vh;

		}

		.contact{

			

		}



		

		@-webkit-keyframes reveal {

			0%   {width: 0px;height:0px;}

			100% { width: 250px; height:250px;}

		}

		@keyframes reveal {

			0%   {width: 0px;height:0px;}

			100% { width: 250px;height:250px;}

		}

		

		.contact_text{

			

		}

		.icon_contact{

			display: block;

			width: 20px;

			height: 20px;

			margin-right:0.5em;

		}

		.icon_logo_wrap{

			display:flex;

			justify-content: center;

		}

		

		.my_submit{

			text-align:center;

		}



		.my_submit .button_as_div{

			border: none;

			margin-top: 1em;

		}

		

		

		.product_card form .my_submit{

			padding-bottom:1em;

		}

		

		/* KONEC Kontaktní stránka */

	

		

		/* Produktová stránka */

		

		.container_produkty{

			display: flex;

			flex-wrap: wrap;

			gap: 1.5em;

			justify-content: center;

			width: 100%;

			margin-top: 1em;

			margin-bottom: 2em;

			

		}

		.product_wrap{

			width: 350px;

		}

		.product_img{

			position: relative;

			margin: 0 auto;

			height: 70px;

			width: 70px;

			clip-path: inset(50% round 50%);

			transition: clip-path 2s;

		}

		.product_img img{

			position: absolute;

			top: 0;

			left: 0;

			width: 100%;

			height: 100%;

			object-fit: cover;

			transform: scale(1.1);

			transition: transform 1s ease-in-out;

		}

		

		.product_img.show {

		  clip-path: inset(0% round 0%);

		}



		.product_img.show img {

		  transform: scale(1);

		}

		.product_text{

			text-align: center;

		}

		.small{

			font-size:x-small;

		}

		.product_text h2 span{

			font-weight:normal;

			font-size: 0.9em;

		}

		.product_text ol li{

			text-align:left;

			margin-top: 0.5em;

			font-size:xx-small;

		}

		.product_text ul li{

			text-align:left;

			margin-top: 0.5em;

			font-size:xx-small;

			margin-left: 2em;

		}

		.product_text ol{

			list-style-type: lower-alpha;

			border: 1px solid var(--color_scheme_light-Secondary);

			border-radius: 5px;

			margin-top:0.1em;

			margin-bottom:0.5em;

		}

		.product_text ul{

			border: 1px solid var(--color_scheme_light-Secondary);

			border-radius: 5px;

			margin-top:0.1em;

			margin-bottom:0.5em;

		}

		.product_text ol ol{

			list-style-type: lower-roman;	

			margin-top:0.1em;

			margin-bottom:0.5em;

			border: none;

		}

		.product_info{

			margin-top: 1em;

			height:auto;

			text-overflow: ellipsis;

			overflow: hidden;

			display: -webkit-box;

			-webkit-box-orient:vertical;

			-webkit-line-clamp:7;

			

		}

		.product_info.expanded {

			white-space: initial;

			overflow: visible;

		}

		.icon_show_more {

			-webkit-mask: url(/_assets/icon/eye-outline.svg) no-repeat center;

			mask: url(/_assets/icon/eye-outline.svg) no-repeat center;

			background-color: var(--color_scheme_light-Secondary);

		}

		.icon_show_less {

			-webkit-mask: url(/_assets/icon/eye-off-outline.svg) no-repeat center;

			mask: url(/_assets/icon/eye-off-outline.svg) no-repeat center;

			background-color: var(--color_scheme_light-Secondary);

		}

		.show_more{

			cursor:pointer;

		    display: flex;

			justify-content: center;

			align-items: center;

			width: 150px;

			margin: 0 auto;

			margin-top: 0.2em;

			padding: 0.3em;

			font-size: xx-small;

			font-style: italic;

		}

		.show_more span{

			margin-left:0.5em;

		}



		.product_icon_show_more{

			width: 20px;

			height: 20px;

			border-radius: 50%;

			border: 1px solid var(--color_scheme_light-Septenary);

			position: relative;

			box-shadow: 0 0 10px #000000;

			display: none;

			justify-content: center;

			align-items: center;

		}

		.icon_show{

			display: block;

			width: 15px;

			height: 15px;

			transition: 0.5s;

		}

		.card_icon_show{

			display: block;

			width: 30px;

			height: 30px;

			transition: 0.5s;

		}

		.card_icon_prod_rule{

			display: block;

			width: 30px;

			height: 30px;

			transition: 0.5s;

		}

		.card_icon_prod_coin{

			display: block;

			width: 25px;

			height: 25px;

			transition: 0.5s;

		}

		.card_icon_prod_temp{

			display: block;

			width: 25px;

			height: 25px;

			transition: 0.5s;

		}

		.product_header{

			background: var(--color_scheme_light-Secondary);

			border-color: var(--color_scheme_light-Nonary);

			border-radius: 5px;

			padding: 0.8em 0.5em;

			margin-top: 0.5em;

			text-align: left;

			font-size: x-small;

			font-weight: bold;

			display: flex;

			justify-content: space-between;

			cursor: pointer;

		}

		

		

		.item-image{

			

		}



		.item-image-wrapper img{

			width:150px;

			height: 150px;

			-moz-border-radius: 0px;

			-webkit-border-radius: 18px 18px 0px 0px;

			border-radius: 18px 18px 0px 0px; 

		}

		

		.products-feature {

		  display: flex;

		  justify-content: center;

		  padding:2em 0em 2em 0em;

		}



		.products-grid {

		  display: grid;

		  grid-template-columns: 1fr 1fr;

		  gap: 15px;

		}



		.product-card {

		  background: var(--card-bg);

		  /* Subtle gradient to mimic the "misty" look in the original image */

		  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(232, 240, 230, 0.4) 100%);

		  border-radius: 20px;

		  text-align: center;

		  box-shadow: 1px 1px 5px #000000;

		  border: 2px solid rgba(198, 163, 94, 0.4);

		  transition: transform 0.3s ease;

		}

		.product-card:hover{

			cursor:pointer;

			transform: scale(1.02);

		}

		.item-label{

			font-size:x-small;

			margin:5px 5px;

		}

		

		.product_card{

		  background: var(--card-bg);

		  /* Subtle gradient to mimic the "misty" look in the original image */

		  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(232, 240, 230, 0.4) 100%);

		  border-radius: 20px;

		  text-align: center;

		  box-shadow: 1px 1px 5px #000000;

		  border: 2px solid rgba(198, 163, 94, 0.4);

		  transition: transform 0.3s ease;

		  position: relative;

		}

		.product_image_wrapper{

			height: 280px;	

			-moz-border-radius: 0px;

			-webkit-border-radius: 18px 18px 0px 0px;

			border-radius: 18px 18px 0px 0px; 

			

			background-image: url(../_assets/img/product_oliv.png);

			background-repeat: no-repeat;

			background-size: cover;

			background-position:center center;

			

			align-items: center;

			justify-content: center;

			text-align:center;

			cursor: pointer;

			

			position:relative;

		}

		

		.click-hint-overlay {

		  position: absolute;

		  top: 7%;

		  left: 15%;

		  transform: translate(-50%, -50%);

		  width: 80px;

		  height: 80px;

		  display: flex;

		  align-items: center;

		  justify-content: center;

		  pointer-events: none; /* Allows clicks to pass through to the image underneath */

		  z-index: 10;

		  transition: opacity 0.3s ease;

		}



		.product_image_wrapper:hover .click-hint-overlay {

		  opacity: 0.15; /* Becomes subtle on hover, change to 0 to hide completely */

		}



		.click-hint-overlay .hand-icon {

		  position: relative;

		  width: 30px;

		  height: 30px;

		  background: rgba(0, 0, 0, 0.4); /* Semi-transparent dark circle background */

		  border-radius: 50%;

		  display: flex;

		  align-items: center;

		  justify-content: center;

		  z-index: 4;

		  padding: 8px;

		  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

		  animation: handTap 2s infinite ease-in-out;

		}



		.click-hint-overlay .hand-icon svg {

		  width: 100%;

		  height: 100%;

		  stroke: var(--color_scheme_light-Primary);

		  rotate: -25deg;

		}



		/* Shared ripple/circle styles */

		.click-hint-overlay .circle {

		  position: absolute;

		  border: 1.5px solid rgba(255, 255, 255, 0.7);

		  border-radius: 50%;

		  width: 100%;

		  height: 100%;

		  opacity: 0;

		  transform: scale(0.4);

		  animation: rippleEffect 3s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94);

		}



		.click-hint-overlay .circle-1 {

		  animation-delay: 0s;

		}



		.click-hint-overlay .circle-2 {

		  animation-delay: 1s;

		}



		.click-hint-overlay .circle-3 {

		  animation-delay: 2s;

		}



		/* Expanding concentric ripple rings */

		@keyframes rippleEffect {

		  0% {

			transform: scale(0.4);

			opacity: 0;

		  }

		  15% {

			opacity: 1;

		  }

		  85% {

			opacity: 0.4;

		  }

		  100% {

			transform: scale(0.8);

			opacity: 0;

		  }

		}



		/* Subtle tilting/tapping motion of the hand */

		@keyframes handTap {

		  0%, 100% {

			transform: scale(1) rotate(0deg);

		  }

		  50% {

			transform: scale(0.9) rotate(-5deg); /* Simulates the downward motion of a press */

		  }

		}

		

		.item_inner{

			

		}

		

		.item_label_wrap{

			width:140px;

			min-height:2.5em;

			line-height: 1em;

			display: flex;

			align-items: center;

			justify-content: center;

		}

		

		.item_label{

			font-size:x-small;

			margin:10px 5px 0px 5px;

		}

		

		

		.item_floater{

		  background: var(--card-bg);

		  /* Subtle gradient to mimic the "misty" look in the original image */

		  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(232, 240, 230, 0.9) 100%);

		  border-radius: 20px;

		  text-align: center;

		  box-shadow: 1px 1px 5px #000000;

		  border: 2px solid rgba(198, 163, 94, 0.4);

		  transition: transform 0.3s ease;

		  position: absolute;

		  right: -1em;

		  height: 30px;

		  display:flex;

		  justify-content:space-between;

		  align-items:center;

		  font-size:xx-small;

		  line-height: 12px;

		  padding: 0px 10px 0px 5px;

		  font-weight: bold;

		}

		

		.item_floater_2 span{

			font-size:14px;

			font-weight: bolder;

		}

		

		.item_floater_1{

			bottom:66px;

			height: 28px;

			width: 82px;

		}

		.item_floater_2{

			bottom:34px;

			font-size:xx-small;

			width:102px;

			right: -1.5em;

		}

		.item_floater_3{

			bottom:4px;

			height: 28px;

			width: 82px;

		}

		/* KONEC Produktová stránka */

		









		/* Gelerie k produktům */	

			

			/* Gallery Grid */

			.gallery {

			  display: grid;

			  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

			  gap: 15px;

			  max-width: 1200px;

			  margin: 1em auto;

			}

			

			.gallery img {

			  width: 100%;

			  height: 250px;

			  object-fit: cover;

			  border-radius: 8px;

			  cursor: pointer;

			  transition: transform 0.2s ease, box-shadow 0.2s ease;

			}

			

			.gallery img:hover {

			  transform: scale(1.03);

			  box-shadow: 0 8px 15px rgba(0,0,0,0.2);

			}



			/* Lightbox Modal */

			.lightbox {

			  display: none;

			  position: fixed;

			  overflow:hidden;

				top: 0;

				left: 0;

				right: 0;

				bottom: 0;

			  width: 100%;

			  height: 100%;

			  background: rgba(0, 0, 0, 0.9);

			  z-index: 999;

			  align-items: center;

			  justify-content: space-between;

			}



			.lightbox_top, .lightbox_bottom{

				background-color:var(--color_scheme_light-Primary);

				display: flex;	

				align-items:center;

				border-radius: 5px;

				padding: 0.5em;

				margin:0.5em;

				color: #fff;

			}

			.lightbox_top{

				justify-content: space-between;

				height:1.5em;

			}

			.lightbox_bottom{

				height:5vh;

				justify-content: center;

			}

			

			.lightbox.active { 

				display: flex;

				flex-direction: column;

			}

			.lightbox_wrapper{

				position: relative;

				display: inline-block; /* Keeps the wrapper tight around the image */

				max-width: 90%;        /* Match whatever constraints your image has */

				max-height: 80vh;

			}

			

			.lightbox img {

			  border-radius: 4px;

			  

			  display: block;

			  max-width: 100%;

			  max-height: 80vh;

			  height: auto;

			  

			  /*

			  max-width: 90vw;

			  max-height: 85vh;

			   */

  

			}



			

			/* The spinner hidden by default */

			.lightbox-spinner {

			  display: none;

			  position: absolute;

			  top: 50%;

			  left: 50%;

			  transform: translate(-50%, -50%);

			  border: 4px solid rgba(255, 255, 255, 0.3);

			  border-radius: 50%;

			  border-top: 4px solid #fff;

			  width: 40px;

			  height: 40px;

			  animation: spin 1s linear infinite;

			  z-index: 10;

			}



			/* Class to show the spinner */

			.lightbox-spinner.show {

			  display: block;

			}



			@keyframes spin {

			  0% { transform: translate(-50%, -50%) rotate(0deg); }

			  100% { transform: translate(-50%, -50%) rotate(360deg); }

			}

			

			/* Close Button */

			.close {

			  cursor: pointer;

			  padding: 0em 0.5em;

			  margin-left: 0.5em;

			-webkit-border-radius: 5px;

			border-radius: 5px; 

			user-select: none;

			-webkit-user-select: none;

			}

			

			/* Next Button and Previous Button*/

			.lightbox_next, .lightbox_prev {

				cursor: pointer;

				padding: 0.2em 2em;

				-webkit-border-radius: 5px;

				border-radius: 5px; 

				user-select: none;

				-webkit-user-select: none;

			}

			.lightbox_next {

				margin-left:0.5em;

			}

			.lightbox_prev {

				margin-right:0.5em;

			}

			

			.lightbox_count {

			width: 3em;

			display: flex;

			justify-content: center;

			align-items: center;

			}

		/* KONEC Gelerie k produktům */











			

		/* Službová stránka */

		

		 

		.container_sluzby{



		}

		.container_sluzby article{	

	

		}

		.service_wrap{

			margin: 0 auto;

		}

		.service_img_float_left{

			float: left;

			margin-right: 1em;

		}

		.service_img_float_right{

			float: right;

			margin-left: 1em;

		}

		

		.service_img{

			border-radius: 50%;

			shape-outside: circle(50%);

			clip-path: circle(0% at 50% 50%);

			transition: clip-path 4s;

		}

				

		.service_img.show {

			clip-path: circle(50% at 50% 50%);	

		}



		.service_img img{

			width: 150px;

			height: 150px;

			object-fit: cover;

			border-radius: 50%; 

			transform: scale(1.1);

		}



		.service_img.show img {

		   transform: scale(1.0);

		}

		

		.service_text{

			

		}

		



		/* KONEC Službová stránka */

		

		

		/* Blogová stránka */

		

		 

		.container_blogy{

			display: flex;

			flex-wrap: wrap;

			gap: 2em;

			justify-content: center;

			width: 100%;

			margin-top: 1em;

			margin-bottom: 2em;

			

		}

		.container_blogy article{	

			height: 100%;

			width: 100%;

			margin: 0;

		}

		.blog_wrap{	

			width: 250px;

			min-height: 300px;

			padding: 0.5em;

			background-color: white;

			box-shadow: var(--shadow_2);

			-webkit-border-radius: 2px;

			border-radius: 2px; 

		}

		.blog_img{

			

		}

		.blog_img img{

			width: 100%;

			height: 150px;

			object-fit: cover;

		}



		.blog_theme{

			font-size: x-small;

			color: var(--color_scheme_light-Secondary);

			margin: 0.5em 0em 0.5em 0em;

		}

		.blog_head{

			font-weight: bold;

		}

		.blog_text{

			font-size: x-small;

			text-align: justify;

			color: var(--color_scheme_light-Secondary);

		}

		

		.author_wrap{

			display: flex;

			align-items: center;

			margin: 0;

		}

		.author{

			

		}

		.author_pic{

			width:30px;

			height:30px;

			border-radius: 50%;

			border: 1px solid var(--color_scheme_light-Septenary);

			box-shadow: 0 0 10px #000000;

		}

		.author_info{

			font-size: xx-small;

			color: var(--color_scheme_light-Secondary);

			margin-left: 1em;

		}		

		.author_name{

			

		}

		.author_date{

			

		}

		



		/* KONEC Blogová stránka */

		

		

		/* Tlačítko */

		.button_as_div {



			color: var(--color_scheme_light-Terciary);

			background-color:var(--color_scheme_light-Primary);

			

			-webkit-border-radius: 15px;

			border-radius: 15px; 

			display: inline-flex;

			cursor: pointer;

			padding:5px 15px 5px 15px;

			margin: 0px 0px -1px 0px;

			

			text-align: center;

			text-decoration: none;

			font-family:Arial;

			font-size:xx-small;

			font-weight:bold;

			line-height: 2em;

			

		}



		.button_as_div:focus, .button_as_div:hover {

			color:var(--color_scheme_light-Primary);

			background-color:var(--color_scheme_light-Terciary);

			box-shadow: var(--shadow_2);

			transition: all ease-in-out 0.6s;

			transition: background .3s ease-in-out;

		}

		.button_as_div:hover > .button_icon {

			background:var(--clr2);

			transition: all ease-in-out 0.6s;

			cursor:pointer;

			border:1px solid var(--black);

			box-shadow: 0 0 3px var(--black);

		}

		.button_as_div:hover > .button_icon img {

			background-color:black;

			transition: all ease-in-out 0.6s;

		}

		

		/* Tlačítko konec */

		

		

		/* Podržení */



		.underscore {

		  position: relative;

		  padding: 0.8em 0;

		}



		

		/* Slide down, DEFAULT OPTIONS for all elements, siblings */

		.underscore::after {

		  content: '';

		  position: absolute;

		  top: 0; /* nad */

		  /* bottom:0; */ /* pod */

		  left: 0;

		  width: 100%;

		  height: 0.1em;

		  background-color: var(--color_scheme_light-Primary);

		  opacity: 0;

		  transition: opacity 300ms, transform 300ms;

		}



		.underscore:hover::after, .underscore:focus::after {

		  opacity: 1;

		  transform: translate3d(0, 0.2em, 0);

		}





		/* Slide left-right, FIRST element */

		li:first-child a {

		  overflow: hidden;

		}



		li:first-child a::after {

		  opacity 1;

		  transform: translate3d(-100%, 0, 0);

		}



		li:first-child a:hover::after,	li:first-child a:focus::after{

		  transform: translate3d(0, 0, 0);

		}

		

		/* Slide right-left, ALL MIDDLE elements */

		li:last-child a {

		  overflow: hidden;

		}



		li:last-child a::after {

		  opacity 1;

		  transform: translate3d(100%, 0, 0);

		}



		li:last-child a:hover::after,	li:last-child a:focus::after{

		  transform: translate3d(0, 0, 0);

		}

		



		/* Scale from center, LAST element */

		li:not(:first-child):not(:last-child) a::after {

		  opacity 1;

		  transform: scale(0);

		  transform-origin: center;

		}



		li:not(:first-child):not(:last-child) a:hover::after, li:not(:first-child):not(:last-child) a:focus::after{

		  transform: scale(1);

		}





		/* Podržení konec */

		



		

		footer {

			overflow:hidden;

			text-align: center;

			font-size: xx-small;

		}

		.footer_line{

			background-color: var(--color_scheme_light-Terciary);

		}

		.counters_line{

			background-color: var(--color_scheme_light-Secondary);

			padding:0em 2em 0em 2em;

			font-size: small;

		}

		.counters_wrap{

			display: flex;

			flex-wrap: wrap;

			gap: 10px;

			justify-content: center;

			width: 100%;

			padding: 0.5em 0em 1.5em 0em;

		}

		.counter{

			width:120px;

			min-height: 60px;

			background: var(--color_scheme_light-Quaternary);

			border-radius: 20px;

			text-align: center;

			box-shadow: var(--shadow_3);

			border: 2px solid rgba(198, 163, 94, 0.5);

			/*

			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

			box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), var(--shadow);

			border: 1px solid rgba(255, 255, 255, 0.8);

			*/

			transition: transform 0.3s ease;



		}

		.counter .top, .counter .mid, .counter .bot{

			height:33%;

			display: flex;

			justify-content: center;

			align-items: center;

			text-align: center;

			line-height: 8px;

			

		}

		

		.top_mid_wrap{

		    display: flex;

			align-items: center;

			justify-content: center;

			margin-top: 0.3em;

			gap: 5px;

		}

		.bot{

			font-size: 12px;

			margin-bottom: 0.5em;

		}

		.stat{

			width:25px;

			height:25px;

			border-radius: 50%;

			background: var(--color_scheme_light-Terciary);

			border: 1px solid var(--color_scheme_light-Septenary);

			position:relative;

			box-shadow: 0 0 5px #000000;

			display: flex;

			justify-content: center;

			align-items: center;

		}

		.stat .icon{

			display: block;

			width: 15px;

			height: 15px;

		}

		.icon_percent {

			-webkit-mask: url(/_assets/icon/percent-svgrepo.svg) no-repeat center;

			mask: url(/_assets/icon/percent-svgrepo.svg) no-repeat center;

			background-color: var(--color_scheme_light-Terciary);

			width:8px;

			height:8px;

		}

		.icon_0 {

			-webkit-mask: url(/_assets/icon/add-outline.svg) no-repeat center;

			mask: url(/_assets/icon/add-outline.svg) no-repeat center;

			background-color: var(--color_scheme_light-Terciary);

			width:10px;

			height:10px;

		}

		.icon_1 {

			-webkit-mask: url(/_assets/icon/flower-outline.svg) no-repeat center;

			mask: url(/_assets/icon/flower-outline.svg) no-repeat center;

			background-color: var(--color_scheme_light-Septenary);

		}

		.icon_2 {

			-webkit-mask: url(/_assets/icon/footsteps-outline.svg) no-repeat center;

			mask: url(/_assets/icon/footsteps-outline.svg) no-repeat center;

			background-color: var(--color_scheme_light-Septenary);

		}

		.icon_3 {

			-webkit-mask: url(/_assets/icon/sparkles-outline.svg) no-repeat center;

			mask: url(/_assets/icon/sparkles-outline.svg) no-repeat center;

			background-color: var(--color_scheme_light-Septenary);

		}

		.icon_4 {

			-webkit-mask: url(/_assets/icon/call-outline.svg) no-repeat center;

			mask: url(/_assets/icon/call-outline.svg) no-repeat center;

			background-color: var(--color_scheme_light-Primary);

		}

		.icon_5 {

			-webkit-mask: url(/_assets/icon/pin-outline.svg) no-repeat center;

			mask: url(/_assets/icon/pin-outline.svg) no-repeat center;

			background-color: var(--color_scheme_light-Primary);

			transform: rotate(20deg);

		}

		.icon_6 {

			-webkit-mask: url(/_assets/icon/time-outline.svg) no-repeat center;

			mask: url(/_assets/icon/time-outline.svg) no-repeat center;

			background-color: var(--color_scheme_light-Primary);

		}

		

		

		

		.digits {

		  height: 30px;

		  width: 0.8em;

		  overflow: hidden;

		  font-weight: bold;

		}



		.digit.smooth {

		  transition: all 2s ease;

		}



		.digit span {

		  height: 30px;

		  width: 0.8em;

		  display: flex;

		  justify-content:center;

		  align-items:center;

		  line-height: 30px;

		}

		.digit[data-num="0"] {

		  transform: translate(0, 0);

		}



		.digit[data-num="1"] {

		  transform: translate(0, -30px);

		}



		.digit[data-num="2"] {

		  transform: translate(0, -60px);

		}



		.digit[data-num="3"] {

		  transform: translate(0, -90px);

		}



		.digit[data-num="4"] {

		  transform: translate(0, -120px);

		}



		.digit[data-num="5"] {

		  transform: translate(0, -150px);

		}



		.digit[data-num="6"] {

		  transform: translate(0, -180px);

		}



		.digit[data-num="7"] {

		  transform: translate(0, -210px);

		}



		.digit[data-num="8"] {

		  transform: translate(0, -240px);

		}



		.digit[data-num="9"] {

		  transform: translate(0, -270px);

		}



		

		

		.update{

			margin: 0.5em 6em 0em 6em;

			display: block;

			border: 0;

			color:var(--color_scheme_light-Primary);

			font-size: x-small;

			letter-spacing: 1px;

			font-family: 'Allura';

			line-height: 25px;

		}

		.update span{

			font-family:initial;

			font-size: 8px;

			font-family: 'Allura';

		}

		

		

		.contact_quick_wrap{

			background-color:var(--color_scheme_light-Terciary);

			padding: 2em 1em 2.5em 1em;

			font-size: x-small;

		}

		.contact_quick_border{

			display: flex;

			flex-wrap: wrap;

			justify-content: center;

			align-items: center;

			gap:1em 1em;

		}

		.contact_quick{

			display: flex;

			align-items:center;

			justify-content: center;

		}

		.contact_quick_1{



		}

		.contact_quick_1 .logo {

			margin-left:0;

		}

		.contact_quick_logo_wrap{



		}

		.contact_quick_2{



		}

		.contact_quick_3{

			

		}

		.contact_quick_item{

			display: flex;

			flex-direction: column;

			justify-content: center;

			align-items: center;

			

		}

		.contact_quick_item_text{			

			height:105px;

			width: 155px;

			font-size:10px;

			line-height: 14px;

			text-align:center;

			padding: 2.0em 0.5em 0.5em 0.5em;

			background: var(--color_scheme_light-Quaternary);

			border-radius: 20px;

			box-shadow: var(--shadow_3);

			border: 2px solid rgba(198, 163, 94, 0.5);

			/*

			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

			border: 1px solid rgba(255, 255, 255, 0.8);

			box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), var(--shadow);

			*/

			transition: transform 0.3s ease;

		}

		.contact_quick_item_text div{

			font-weight:bolder;

			font-size:12px;

			margin-bottom: 0.5em;

		}

		.contact_quick_item_text .icon_logo_wrap .icon_logo_face, .contact_quick_item_text .icon_logo_wrap .icon_logo_inst{

			/* 

			background-color: var(--color_scheme_light-Septenary);

			*/

		}

		.contact_quick_item_text .icon_logo_wrap {

			justify-content:center;

			margin-top: 0.5em;

		}

		.footer_links{	

		    text-decoration: none;

			color: var(--color_scheme_light-Primary);

			display: flex;

			justify-content: center;

			text-shadow: var(--shadow_3);

			margin-bottom: 1em;

			gap: 6px;

			flex-wrap: wrap;

			column-gap: 0;

			align-items: center;

		}

		

		/* Add the vertical line after every item except the last one */

		.footer_links li:not(:last-child)::after {

			content: "|";

			margin: 4px 0 0 0;

		}

	

		.footer_links li {

			margin: 4px 4px 0 0;

			

		}

		 

		/* For extra small screen less than mobile only */

		@media (max-width: 339px) {

			.features-grid {

			}

			.products-grid {

				/*

				grid-template-columns: 1fr;

				*/

			}

		}

		

		/* For desktop only */

		@media only screen and (min-width: 600px) {

			.back_card_container{

				

			}

			.back_card{

				width:110px;

			}

		}



		/* For desktop only */

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

			body{

				background-color: var(--color_scheme_light-Terciary);

			}

			.counters_wrap{

			padding: 0.5em 0em 1em 0em;

			}

			.top_line_span{

				width:8em;

			}

			

			.back_card{

				width:120px;

			}



			.feature{

				padding:2em 3em 2em 3em;

			}

			.feature-card {

				width:150px;

			}

			.products-feature{

				padding:2em 3em 2em 3em;

			}

			.products-grid {

			    display: flex;

				justify-content: center;

				align-items: center;

				flex-wrap: wrap;

			}

			.content {

				font-size: medium;

				padding: 0.2em 6em 0.2em 6em;

			}

			.counters_line{

				padding: 0em 6em 1em 6em;

			}

			

			.footer_line {

				padding: 0em 10em;

			}

			.container_contact{

				display:flex;

				flex-direction: row;

				justify-content:center;

				

			}

			.map_wrap{

				width: 60%;

			}

			.map_header{

				/* Takes only the height it needs */

				flex-shrink: 0;

			}

			.map_body{

				/* Grows to fill all available space */

				flex-grow: 1; /* Or use flex: 1; */

			}

			.contact{

				margin-left: 2em;	

			}

			.contact_img img{

				width: 220px;

				height:220px;	

			}

			.service_img img{

				width: 220px;

				height:220px;	

			}

			.service_wrap{	

				width: 600px;

			}

	

		}