* {
	font-family: 'Didact Gothic',sans-serif !important;
}

section:not(.welcome):not(.even) div[class*="container-"] * {
	height: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Grenze',serif !important;
	word-break: break-word;
}

h1 *, 
h2 *, 
h3 *, 
h4 *, 
h5 *, 
h6 * {
	font-family: 'Grenze',serif !important;
	word-break: break-word;
}

br {
	font-size: large;
}

strong {
	text-shadow: 0px 0px 1px #000;
}

i {
	font-style: italic;
}

main {
	margin-top: 128px;
}

section {
	margin-bottom: 40px;
}

section .wrapper {
	position: relative;
	margin: 0 2rem;
}

section.sticky .wrapper .container-0,
section.sticky .wrapper .container-0 .card,
section.sticky .wrapper .container-0 .card .card-image {
	height: 100%;
}

section.even .wrapper {
	display: flex;
}

section .card .video .video-cover iframe {
	width: 100%;
	height: 100%;
}

.card .card-info {
	font-size: inherit;
	line-height: inherit;
}

section .card .video .yt-v {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    opacity: 0;
    transition: all .3s ease-in-out;
}

section .card .video.show-video .yt-v {
    z-index: 1;
    opacity: 1;
}

section .card .video .yt-v .close {
    position: absolute;
    top: 70px;
    right: 15px;
    font-size: 35px;
    color: #fff;
    z-index: -1;
    opacity: 0;
    transition: all .3s ease-in-out;
    cursor: pointer;
}

section .card .video.show-video .yt-v .close {
    z-index: 1;
}

section .video.show-video:hover .yt-v .close {
    opacity: 1;
}

section .card .video .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	cursor: pointer;
}

section .card .video {
	position: relative;
}

section .card .video .play-btn .icon {
    width: 40px;
    height: 40px;
    padding: 10px;
    box-sizing: initial;
    border-radius: 50%;
    border: 4px solid #fff;
}

section .card .video .play-btn .icon svg {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: relative;
    top: 50%;
    left: 46%;
    transform: translate(-50%, -50%);
}

section .card .video .play-btn #Path_1 {
    fill: #fff;
}

section.even .wrapper div[class*="container-"] .card {
	height: 100%;
}

section.even .wrapper div[class*="container-"] .card .card-image,
section.sticky.welcome .card .card-image img,
section.even .card .video {
	position: sticky;
	top: 128px;
}

section.sticky.welcome .card .card-image img {
	height: calc(100vh - 128px);
}

section .wrapper div[class*="container-"] {
	position: relative;
	display: inline-block;
	vertical-align: top;
}

.card-info p {
	/* font-size: 20px;
	line-height: 30px; */
	margin-bottom: 1rem;
	line-height: initial;
}

.card-info h1 {
	margin: 20px 0;
	/* font-size: 60px;
	line-height: 80px; */
	/* margin: 20px 0; */
}

.card-info h1 > span {
	/* font-size: inherit !important;
	line-height: inherit !important; */

	font-size: inherit;
	line-height: inherit;
}

.articles {
	display: flex;
	gap: 30px;
	flex-direction: column;
}

.articles .card .card-image,
.articles .card .card-info {
	flex: 0 0 50%;
}

.articles .card .card-info {
	position: relative;
	background-color: #88CFE1;
	flex-direction: column;
}

.articles .card .card-info::before,
.articles .card .card-info::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: #fff;
}

.articles .card .card-info::before {
	top: calc(50% - 10px);
}

.articles .card .card-info::after {
	bottom: calc(50% - 30px);
}

.articles .card:not(.row-reverse) .card-info::before,
.articles .card:not(.row-reverse) .card-info::after {
	left: 0;
}

.articles .card.row-reverse .card-info::before,
.articles .card.row-reverse .card-info::after {
	right: 0;
}

.articles .card:not(.row-reverse) .card-info::before {
	border-top-right-radius: 100%;
}

.articles .card:not(.row-reverse) .card-info::after {
	border-bottom-right-radius: 100%;
}

.articles .card.row-reverse .card-info::before {
	border-top-left-radius: 100%;
}

.articles .card.row-reverse .card-info::after {
	border-bottom-left-radius: 100%;
}

.articles .card.row-reverse {
	flex-direction: row-reverse;
}

.articles .card .card-info .title {
	font-size: 45px;
	line-height: 60px;
	color: #fff;
}

.articles .card .card-info .card-info-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 40px 150px;
	width: 100%;
	box-sizing: border-box;
}

@media screen and (max-width: 1720px) {
	.articles .card .card-info .card-info-wrapper {
		padding: 2.32vw 8.7vw;
	}

	.articles .card .card-info .title {
		font-size: 2.5vw;
		line-height: 3.6vw;
	}

	section.sticky.welcome .card .card-image img {
		height: initial;
	}
}

@media screen and (max-width: 1420px) {
	.card-info p {
		/* font-size: 1.41vw;
		line-height: 2.1vw; */
		margin-bottom: 2.8vw;
	}

	.card-info h1 {
		/* font-size: 4.2vw;
		line-height: 5.6vw; */
		/* margin: 1.41vw 0; */
	}

	div[style*="aspect-ratio: 0.7"] {
		--aspect-ratio: 0.6 !important;
	}

	div[style*="aspect-ratio: 0.75"] {
		--aspect-ratio: 0.65 !important;
	}

	section:not(.even):not(.welcome) div[class*="container"] {
		height: calc(50vw);
	}

	.card-info h1 {
		/* font-size: 3.2vw;
		line-height: 4.6vw; */
		margin: 1.2vw 0;
	}
}

@media screen and (max-width: 1260px) {
	section:not(.even):not(.welcome) div[class*="container"] {
		height: inherit !important;
		width: calc((100% / 3) - 1.5%);
	}
}

@media screen and (max-width: 1260px) {
	section:not(.even):not(.welcome) div[class*="container"] .card-image {
		--aspect-ratio: 1 !important;
	}
}

@media screen and (max-width: 880px) {
	section .wrapper {
		display: flex;
	}

	section.welcome .wrapper,
	section.even .wrapper {
		flex-direction: column;
		gap: 4vw;
		margin: 0 18vw;
	}

	section:not(.even):not(.welcome) {
		margin: 15vw 0;
	}


	section .wrapper div[class*="container-"] {
		width: 100% !important;
		height: inherit !important;
	}

	section.sticky.welcome .wrapper .container-0 {
		position: relative !important;
		left: unset !important;
		top: unset !important;
	}

	section.sticky.welcome .wrapper .container-0 .card-info {
		display: none;
	}

	section.sticky.welcome .wrapper .container-0 ~ div[class*="container-"] {
		left: unset !important;
	}

	.card-info h1 {
		/* font-size: 50px;
		line-height: 70px; */
		/* margin: 15px 0; */
	}

	.card-info p {
		/* font-size: 20px;
		line-height: 30px; */
		margin-bottom: 20px;
	}

	div[style*="aspect-ratio:"] {
		--aspect-ratio: 16/9 !important;
	}
}

@media screen and (max-width: 790px) {
	.articles .card {
		flex-direction: column !important;
	}

	.articles .card .card-image, 
	.articles .card .card-info {
		flex: 0 0 100% !important;
	}

	.articles .card .card-info::before, 
	.articles .card .card-info::after { 
		content: none !important;
	}

	.articles .card .card-info .card-info-wrapper {
		position: relative !important;
		top: unset !important;
		left: unset !important;
		width: 90% !important;
		transform: none !important;
		text-align: center !important;
	}

	.articles .card .card-info  {
		min-height: 35vw !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important; 
	}

	.articles .card .card-info .title {
		font-size: 36px;
		line-height: 45px;
	  }
}

@media screen and (max-width: 720px) {
	section.sticky.welcome .wrapper .container-2 .card-info > h1 {
		margin-top: 8.2vw;
	}

	section.sticky.welcome .wrapper .container-2 .card-info > h1 > span {
		font-size: 50px !important;
		line-height: 50px !important;
	}
}

@media screen and (max-width: 660px) {
	section:not(.even):not(.welcome) .wrapper {
		flex-direction: column;
		gap: 4vw;
	}

	section .card .card-image::before {
		content: none !important;
	}

	section .card .card-image > :first-child {
		position: relative !important;
		height: inherit !important;
		top: unset !important;
		left: unset !important;
	}

	section.welcome .wrapper, section.even .wrapper {
		margin: 0 10vw;
	}

	section:not(.even):not(.welcome) .wrapper {
		margin: 0 1rem;
	}

	.articles .card .card-info .title {
		font-size: 5.45vw;
		line-height: 6.8vw;
	}
}

@media screen and (max-width: 460px) {
	header {
		height: 27.8vw;
	}

	section.sticky.welcome .wrapper .container-2 .card-info > h1 > span {
		font-size: 45px !important;
		line-height: 45px !important;
	}
	

	header .logo {
		width: 24vw;
		margin-right: 2.2vw;
	}

	header .sponsored-by > a > img {
		width: 23vw;
	}

	.text {
		font-size: 4.35vw;
		line-height: 4.35vw;
	}

	.card-info h1 {
		/* font-size: 8vw;
		line-height: 13vw; */
		/* margin: 3vw 0; */
	}

	.card-info p {
		/* font-size: 4.3vw;
		line-height: 6.5vw; */
		margin-bottom: 4.3vw;
	}

	section .card .video .play-btn .icon {
		width: 8.7vw;
		height: 8.7vw;
		padding: 2.1vw;
		border: .9vw solid #fff;
	}
}

@media screen and (max-width: 390px) {
	section.sticky.welcome .wrapper .container-2 .card-info > h1 > span {
		font-size: 38px !important;
		line-height: 40px !important;
	}
}

@media screen and (max-width: 320px) {
	section.sticky.welcome .wrapper .container-2 .card-info > h1 > span {
		font-size: 32px !important;
		line-height: 38px !important;
	}
}