/* DOTS OVERLAY IMG */

.img-dot {
	z-index: 900;
  	width: 100%;
  	height: 100%;
	background-image: radial-gradient(white 25%, transparent 25%);
	background-size: 2.5px 2.5px;
	box-sizing: border-box;
	pointer-events: auto; /* Prvek bude reagovat na kliknutí a průchod myší */
	opacity: 50%;
	position: absolute;
}

@media screen and (max-width: 1080px) {
	.img-dot {
		border: none;
		box-sizing: border-box;
		background-image: radial-gradient(white 0%, transparent 0%);
		background-size: 0px 0px;
		display: none;
	}
}

/* IMG CONTAINER FOR ONE IMG with HOVER */

.bubble-hover-left {
	z-index: 990;
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(rgba(237,71,105,.75) 0%, rgba(237,71,105,.75) 50%, rgba(0, 0, 0, 0) 50%);;
  	background-size: 0px 0px;
  	background-repeat: no-repeat;
  	background-position: 0 100vh;
    transition: background-size .7s, background-position .5s ease-in-out;
}

.bubble-hover-left:hover {
	background-size: 1000px 1000px;
  	background-position: -40vh 30vh;
  	transition: background-position .7s, background-size .5s ease-in-out;

}

.bubble-hover-left img {
  	position: absolute;
  	top: 0;
  	left: 0;
  	opacity: 1;
  	display: block;
}

.bubble-hover-right {
	z-index: 990;
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(rgba(237,71,105,.75) 0%, rgba(237,71,105,.75) 50%, rgba(0, 0, 0, 0) 50%);;
  	background-size: 0px 0px;
  	background-repeat: no-repeat;
  	background-position: 100vh 0;
    transition: background-size .7s, background-position .5s ease-in-out;
}

.bubble-hover-right:hover {
	background-size: 250px 250px;
  	background-position: 20vh 15vh;
  	transition: background-position .7s, background-size .5s ease-in-out;

}

.bubble-hover-right img {
  	position: absolute;
  	top: 0;
  	left: 0;
  	opacity: 1;
  	display: block;
}

@media screen and (max-width: 1080px) {
	.bubble-hover-left{
		display: none;
	}
	.bubble-hover-right{
		display: none;
	}
}

/* IMG CONTAINER FOR ONE IMG */

/* IMG CONTAINER FOR ONE IMG */

.img-container-only {
	align-content: center;
  	justify-content: center;
	display: inline-block;/* IMAGE ZOOM IN */
 	overflow: hidden;/* IMAGE ZOOM IN */
}

.img-container-only img {
  	position: absolute;
  	top: 0;
  	left: 0;
  	opacity: 1;
  	display: block;
}

  .mask-overlay-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F3F7FB;

    /* KRUHOVÝ VÝŘEZ UPROSTŘED */
    mask-image: radial-gradient(circle at center, transparent 45vh, black 45.1vh);
    -webkit-mask-image: radial-gradient(circle at center, transparent 45vh, black 45.1vh);
    
    pointer-events: none;
    z-index: 10;
  }

@media screen and (max-width: 1080px) {

  .mask-overlay-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F3F7FB;;

    /* KRUHOVÝ VÝŘEZ UPROSTŘED */
    mask-image: radial-gradient(circle at center, transparent 25vh, black 25.1vh);
    -webkit-mask-image: radial-gradient(circle at center, transparent 25vh, black 25.1vh);
    
    pointer-events: none;
    z-index: 10;
  }
}


/* IMG CONTAINER FOR ONE IMG */

/* IMG CONTAINER FOR SLIDESHOW */

.img-container {
	align-content: center;
  	justify-content: center;
	display: inline-block;/* IMAGE ZOOM IN */
 	overflow: hidden;/* IMAGE ZOOM IN */
}

.img-container img {
  	position: absolute;
  	top: 0;
  	left: 0;
  	opacity: 0;
  	transition: opacity 1s ease-in-out;
  	display: block;
/* ZOOM IN/OUT ANIMATION
  animation: zoominoutsinglefeatured 10s infinite;
  -webkit-animation: zoominoutsinglefeatured 10s infinite;
  -moz-animation:    zoominoutsinglefeatured 10s infinite;
  -o-animation:      zoominoutsinglefeatured 10s infinite;
  -ms-transition:    zoominoutsinglefeatured 10s infinite;
*/
}

.img-container img.active {
  opacity: 1;
}

@keyframes zoominoutsinglefeatured {
    0% {
		animation-timing-function: ease-in;
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.025,1.025);
    }
    100% {
        transform: scale(1,1);
    }
}

/* IMG CONTAINER FOR SLIDESHOW */