@media (min-width: 990px) {
	.demo__img--device {
		display: none
	}
}

.demo__img--desktop {
	display: none
}

@media (min-width: 990px) {
	.demo__img--desktop {
		display: block;
	}
}

@media (min-width: 1400px) {
	.demo__img--desktop {
		/*max-width: 1400px !important;*/
	}
}

@media (max-width: 989px) {
	.demo__point {
		margin: 0 !important
	}

	.demo__popup img {
		max-height: 200px;
	}
}

@media (min-width: 990px) {
	.demo__point {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		cursor: pointer;
		position: absolute;
		left: 0;
		top: 0
	}

	.demo__point:before,
	.demo__point:after {
		content: '';
		display: block
	}

	.demo__point:before {
		position: relative;
		width: 200%;
		height: 200%;
		margin-left: -50%;
		margin-top: -50%;
		border-radius: 45px;
		background-color: #0063AE;
		animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite
	}

	.demo__point:after {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #f3f3f3;
		border-radius: 15px;
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
		animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite
	}

	.demo__point:hover .demo__popup {
		display: block
	}
}

@media (min-width: 990px) {
	.demo__popup {
		display: none;
		position: absolute;
		left: calc(50% - 162px + 12px);
		bottom: 12px;
		min-width: 500px;
		padding-bottom: 32px;
		z-index: 10
	}
}

.demo__inner {
	background-color: white;
	text-align: center;
	border: 1px solid rgba(161, 184, 206, 0.34);
	padding: 30px 40px 25px 40px;
	position: relative;
	box-shadow: 0 10px 20px rgba(49, 43, 72, 0.2)
}

.demo__inner h1,
.demo__inner h2,
.demo__inner h3 {
	color: #0063AE;
	font-size: 18px
}

@media (min-width: 990px) {
	.demo__inner:after {
		display: block;
		content: "";
		width: 20px;
		height: 20px;
		background-color: white;
		border-right: 1px solid rgba(161, 184, 206, 0.34);
		border-bottom: 1px solid rgba(161, 184, 206, 0.34);
		-webkit-transform: rotate(53deg) skew(15deg);
		-moz-transform: rotate(53deg) skew(15deg);
		-ms-transform: rotate(53deg) skew(15deg);
		-o-transform: rotate(53deg) skew(15deg);
		transform: rotate(53deg) skew(15deg);
		position: absolute;
		left: calc(50% - 10px);
		bottom: -10px
	}
}

@keyframes popupFadeIn {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
		-moz-transform: translateY(20px);
		-ms-transform: translateY(20px);
		-o-transform: translateY(20px);
		transform: translateY(20px)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0)
	}
}

@keyframes hoverInfBackRot {
	0% {
		transform: translateX(0) rotate(-45deg);
		opacity: 0
	}

	30% {
		opacity: 1
	}

	70% {
		opacity: 1
	}

	100% {
		transform: translateX(10px) rotate(-45deg);
		opacity: 0
	}
}

@keyframes pulse-ring {
	0% {
		transform: scale(0.33)
	}

	80%,
	100% {
		opacity: 0
	}
}

@keyframes pulse-dot {
	0% {
		transform: scale(0.8)
	}

	50% {
		transform: scale(1)
	}

	100% {
		transform: scale(0.8)
	}
}

.demo {
	position: relative;
	margin-inline: auto;
	display: block;
}

.ct-section-inner-wrap:has(.demo) {
	align-items: center;
}

.demo img {
	max-inline-size: 100%;
	block-size: auto;
}

.domek-logo {
	position: relative;
	bottom: 80px;
	right: -40%;
	max-width: 85px !important;
}

.domek-logo--alt {
	position: relative;
	bottom: 0;
	right: -31%;
	max-width: 85px !important;
	height: auto;
}

@media (min-width: 990px) {
	.demo__popup {
		animation-name: popupFadeIn;
		animation-duration: 0.5s;
		animation-delay: 1;
		animation-fill-mode: both
	}

	.domek-logo {
		position: absolute;
		bottom: 80px;
		right: 60px;
		max-width: 160px !important;
	}

	.domek-logo--alt {
		max-width: 160px !important;
		position: absolute;
		bottom: 0;
		right: 60px;
	}

	.demo__point--show-left .demo__popup {
		left: auto;
		top: 0;
		right: 40px;
	}

	.demo__point--show-right .demo__popup {
		top: 0;
		right: auto;
		left: 40px;
	}

	.demo__point--show-right .demo__popup .demo__inner,
	.demo__point--show-left .demo__popup .demo__inner {
		transform: translateY(-50%);
	}

	.demo__point--show-right .demo__popup .demo__inner::after {
		top: calc(50%);
		left: -10px;
		transform: rotate(130deg)
	}

	.demo__point--show-left .demo__popup .demo__inner::after {
		top: calc(50%);
		left: auto;
		right: -10px;
		transform: rotate(-50deg)
	}
}