.banner5050 {

}

.banner5050 .container {
	
}

.banner5050 .container .flex-container {
	width: 100%;
	min-height: 100vh;
	align-items: stretch;
}

.mobile {
	display: none;
}

.banner5050 .container .flex-container .half {
	position: relative;
	width: 50%;
	overflow-y: clip;
}

.banner5050 .container .flex-container .half.text .inside {
	padding: 50px 0;
}

.banner5050 .container .flex-container .half.text {
	justify-self: center;
    align-self: center;
    align-items: center;
    padding-left: 55px;
}

.banner5050 .container .flex-container .half.left {
    padding-left: 55px;
}

.banner5050 .container .flex-container .half.right {
    padding-right: 55px;
}

.banner5050 .container .flex-container .half img {
	width: 100%;
	height: auto;
}

.banner5050 .container .flex-container .half video {
	width: 100%;
	height: auto;
}

.banner5050 .container .flex-container .half h2 {
	color: #FFFEFE;
	font-family: Inter;
	font-size: 64px;
	font-style: normal;
	font-weight: 400;
	line-height: 95%; /* 60.8px */
	letter-spacing: -1.28px;
	margin: 0 auto 24px 0;
}

.banner5050 .container .flex-container .half h2 * {
	color: #FFFEFE;
	font-family: Inter;
	font-size: 64px;
	font-style: normal;
	font-weight: 400;
	line-height: 95%; /* 60.8px */
	letter-spacing: -1.28px;
}

.banner5050 .container .flex-container .half h2 i {
	font-style: italic;
}

.banner5050 .container .flex-container .half h2 b,
.banner5050 .container .flex-container .half h2 strong {
	font-weight: 600;
}

.banner5050 .container .flex-container .half span {
	font-family: Inter;
	font-size: 36px;
	font-style: normal;
	font-weight: 400;
	margin: 0 auto 0 auto;
	line-height: 150%; /* 36px */
	letter-spacing: -0.72px;
}

.banner5050 .container .flex-container .half p {
	color: #FFFEFE;

	font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: -0.32px;
	margin: 40px auto 0 auto;
}

.banner5050 .container .flex-container .half table td:first-of-type {
	white-space: nowrap;
}

.banner5050 .container .flex-container .half table td {
	color: var(--KTI-GREY, #363844);
	padding: 5px 5px;
	color: #FFFEFE;
	font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: -0.32px;
	vertical-align: top;
}

.banner5050 .container .flex-container .half .inside  {
	
	font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: -0.32px;
}

.banner5050 .container .flex-container .half p * {
	color: #FFFEFE;
	
	font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: -0.32px;
}

.banner5050 .container .flex-container .half ul,
.banner5050 .container .flex-container .half ol {
	max-width: 472px;
}

.banner5050 .container .flex-container .half ul li,
.banner5050 .container .flex-container .half ol li {
	
	font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: -0.32px;
}

.banner5050 .container .flex-container .half a.btn_arrow {
	display: inline-block;
	margin: 40px auto 0 auto;
	color: #fffff;
	font-family: Inter;
	padding: 16px 36px;
	border-radius: 30px;
	border: 1px solid var(--Brand-colors-Off-Purple-Off-Purple_000, #FFF);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 19.2px */
	text-transform: uppercase;
	transition: 300ms;
}

.banner5050 .container .flex-container .img-left,
.banner5050 .container .flex-container .img-right {
	position: relative;
	min-height: 100vh;
}

.banner5050 .container .flex-container .img-left img {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 50vw;
    width: auto;
    min-height: 100%;
    max-height: 100%;
}

.banner5050 .container .flex-container .img-right img {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 50vw;
    width: auto;
    min-height: 100%;
    max-height: 100%;
	
}

.banner5050 .container .flex-container .img-left video {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 50vw;
    width: auto;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
}

.banner5050 .container .flex-container .img-right video {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 50vw;
    width: auto;
    min-height: 100%;
    max-height: 100%;
    object-fit: cover;
}

.banner5050 .container .flex-container .half {
	justify-content: start;
}

.banner5050 .container .flex-container .img-left + .half {
	justify-content: end;
}

.banner5050 .img-right svg,
.banner5050 .img-left svg {
	position: absolute;
	bottom: 0;
	top: auto;
	right: -55px;
}

.banner5050 .img-right svg.mobile,
.banner5050 .img-left svg.mobile {
	display: none;
}

@media only screen and (max-width: 996px) {
	.banner5050 {
		position: relative;
	}

	.banner5050 svg {
		display: none;
	}

.banner5050 svg.mobile {
	display: block !important;
	right: 0;
    width: 100%;
    height: auto;
}

	.banner5050 .container .flex-container .half {
		width: 100%;
		min-height: auto;
		order: 2;
	}

	.mobile.bg {
		position: absolute;
		display: block;
		z-index: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.banner5050 .container .flex-container .half ul,
	.banner5050 .container .flex-container .half ol  {
		padding-left: 15px;
	}

	.banner5050 .container .flex-container .half ul li,
	.banner5050 .container .flex-container .half ol li {
		margin-bottom: 10px;
	}

	.banner5050 .container .flex-container .half.text .inside {
		padding: 80px 0;
	}

	.banner5050 .container .flex-container .img-left,
	.banner5050 .container .flex-container .img-right {
		margin: 0 -25px 0 -25px;
		width: calc(100% + 40px);
		padding: 0;
		order: 1;
	}

	.banner5050.bottom .container .flex-container .img-left,
	.banner5050.bottom .container .flex-container .img-right {
		order: 3 !important;
	}

	.banner5050 .container .flex-container {
		width: auto;
		min-height: auto;
		flex-wrap: wrap;
	}

	.banner5050 .container .flex-container .half.text {
		padding: 0;
	}

	.banner5050 .container .flex-container .half .inside {
		padding-top: 50px !important;
	}

	.banner5050 .container .flex-container .half h2,
	.banner5050 .container .flex-container .half h2 * {
		font-family: Inter;
		font-size: 44px;
		font-style: normal;
		font-weight: 400;
		line-height: 95%; /* 41.8px */
		letter-spacing: -0.88px;
	}

	.banner5050 .container .flex-container .half a {
		max-width: 100%;
	}

	.banner5050 .container .flex-container .img-left img,
	.banner5050 .container .flex-container .img-right img {
        position: relative;
        max-width: calc(100% + 30px);
        width: calc(100% + 30px);
        max-height: 100%;
        height: 540px;
        object-fit: cover;
        left: -5px;
	}

	.banner5050 .container .flex-container .img-left video,
	.banner5050 .container .flex-container .img-right video {
        position: relative;
        max-width: calc(100% + 30px);
        width: calc(100% + 30px);
        max-height: 100%;
        height: 540px;
        object-fit: cover;
        left: -5px;
	}

	.banner5050 .container .flex-container .half p,
	.banner5050 .container .flex-container .half p * {
		font-family: Inter;
		font-size: 16px;
		font-style: normal;
		font-weight: 300;
		line-height: 110%; /* 17.6px */
		letter-spacing: -0.32px;``
	}

	.banner5050 .container .flex-container .half p {
		margin-top: 20px;
	}

	.banner5050 .container .flex-container .half p a {
		margin-top: 20px;
	}

	.banner5050 .container .flex-container .half h2 {
		letter-spacing: 0;
	}
}

/* === MOBILE / TABLET === */
@media (max-width: 996px) {
  .banner5050 .mobile {
    position: absolute;
    display: block;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .banner5050 .container .flex-container .half.text.left,
  .banner5050 .container .flex-container .half.text.right {
    padding-left: 0;
    padding-right: 0;
  }

  /* Tabela jako karty (stack) na mobile */
  .banner5050 .container .flex-container .half table,
  .banner5050 .container .flex-container .half table tbody,
  .banner5050 .container .flex-container .half table tr,
  .banner5050 .container .flex-container .half table td {
    display: block;
    width: 100%;
  }
  .banner5050 .container .flex-container .half table tr {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,.25);
  }
  .banner5050 .container .flex-container .half table td:first-of-type {
    white-space: normal;        /* było nowrap */
    font-weight: 500;
    opacity: .9;
    margin-bottom: 4px;
  }
}