/*----------------*/
/* SECTION TEASER */
/*----------------*/
.teaser {
	padding: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;
	z-index: 9;
	min-height: calc(100vh - 88px);
	height: calc(100vh - 88px);
	position: relative;
}
.teaser .content {
	align-items: stretch;
}
.teaser .content > .flex {
	align-items: stretch;
}
.teaser .content > .flex > .text {
	align-self: center;
}
.teaser .content > .flex > .assets {
	align-self: stretch;
	height: 100%;
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
}
.teaser.section-height-auto {
	min-height: initial;
	height: auto;
}
.teaser::before {
	width: 80%;
	z-index: 2;
	left: 0;
	background: rgba( var(--revilodesign_lime), 0.4);
}
.teaser::after {
	width: 64%;
	left: 0;
	opacity: 0.3;
}
.teaser div.flex {
	width: 100%;
	height: 100%;
	gap: 0;
	position: relative;
	z-index: 9;
	align-items: center;
}
.teaser div.image {
	position: relative;
	display: flex;
	align-self: flex-end;
}
.teaser div.image picture,
.teaser div.image picture img {
	width: 100%;
	height: 100%;
	object-position: bottom;
}
.teaser div.image.image-position-center picture.picture,
.teaser div.image.image-position-center picture.picture img {
	object-position: center;
}
.teaser div.image.image-position-top picture.picture,
.teaser div.image.image-position-top picture.picture img {
	object-position: top;
}
.teaser div.image.image-position-bottom picture.picture,
.teaser div.image.image-position-bottom picture.picture img {
	object-position: bottom;
}
.teaser div.image picture {
	z-index: 6;
}
section+.teaser div.image picture {
	height: 100%;
	z-index: 6;
}
section+.teaser div.image.image-position-center picture.picture,
section+.teaser div.image.image-position-center picture.picture img {
	padding: 80px 0;
}
.teaser div.text .header {
	padding-bottom: 40px;
}
.teaser div.text {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	position: relative;
	z-index: 9;
	max-width: calc(var(--revilodesign_maxWidth) / 2.4 );
}
.teaser div.text h1,
.teaser div.text h2 {
	position: relative;
	z-index: 1;
	width: 170%;
}
.teaser div.text div.buttons {
	padding: 24px 0;
}
.teaser picture.background_image {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.teaser picture.background_image img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}
/*--------------------------*/
/* SECTION TEASER TYPE LOGO */
/*--------------------------*/
.teaser.image-type-logo .flex {
	gap: 64px;
}
.teaser.image-type-logo div.text {
	max-width: 100%;
}
.teaser.image-type-logo div.text h1,
.teaser.image-type-logo div.text h2 {
	width: 100%;
}
.teaser.image-type-logo div.text p {
	width: 80%;
}
.teaser.image-type-logo div.image {
	max-width: 320px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.teaser.image-type-logo div.image picture {
	background: rgba( var(--revilodesign_white), 0.52);
	border-radius: var(--revilodesign_borderRadius);
	padding: 48px;
	height: auto;
	max-height: 50%;
	width: 100%;
	position: relative;
	left: auto;
	bottom: auto;
	width: auto;
}
.teaser.image-type-logo div.image picture::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 24px;
	top: 24px;
}
.teaser.image-type-logo div.image picture img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: relative;
	left: auto;
	bottom: auto;
}
.teaser.image-type-logo div.image picture.vector img {
	min-width: 100%;
	max-width: 100%;
}
@media ( max-width: 1240px ) {
	.teaser {
		max-height: initial;
	}
}
@media ( max-width: 998px ) {
	
}
@media ( max-width: 768px ) {
	.teaser {
		min-height: 50vh;
		max-height: initial;
		height: initial;
		padding: 48px 0 0 0;
	}
	.teaser div.flex {
		padding: 0;
		gap: 24px;
		flex-direction: column;
		height: initial;
	}
	.teaser div.text {
		padding: 0;
		text-align: center;
	}
	.teaser div.text h1,
	.teaser div.text h2 {
		width: 100%;
	}
	.teaser div.image picture,
	.teaser div.image picture img {
		height: auto;
		position: relative;
		width: 100%;
		display: inline-flex;
		justify-content: center;
		margin: 0 auto;
		left: auto;
		bottom: auto;
	}
	.teaser div.text div.buttons {
		display: flex;
		width: 100%;
		justify-content: center;
	}
	.revilodesign.teaser .flex .flexbox.assets.right {
		padding: 0;
	}
	.teaser .content > .flex > .assets {
		order: 99;
		padding: 0;
	}
}