/* Var Definitions */
.TeaserBanner {
	--bg-color: #ffffff;
	--font-color: var(--font-color-dark, #ffffff);
	--button-bg-color: var(--logo-color-1, #007559);
	--link-color: var(--link-color, #ffffff);
	--h1-color: var(--font-color-dark);
	--h2-color: var(--font-color-dark);
	--h3-color: var(--font-color-dark);
}

.TeaserBanner {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 200;
	background: var(--bg-color);
	/* padding: 10px 20px; */
	color: var(--font-color);
	/* width: 70%; */
	max-width: 80%;
	margin: 0px auto;
	box-shadow: 0px 0px 10px #888;
	border-radius: 5px;
	overflow: hidden;
}

.bannermask {
    content: "";
    background-color: #000000cc;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 199;
    top: 0;
    left: 0;
}

.TeaserBanner div.teaser { display: none; transition: height 1s ease; }
.TeaserBanner div.teaser:first-child { display: block; }


.TeaserBanner div.image { border-bottom: 5px solid var(--logo-color-1); }
.TeaserBanner div.image img { max-width: 100%; }

.TeaserBanner div.body { color: var(--font-color-dark); padding: 20px; }
.TeaserBanner div.body .title { color: var(--logo-color-1); }
.TeaserBanner div.body p { line-height: 140%; }

.TeaserBanner form button.uaclose { position: absolute; top: 0px; right: 0px; background-color: var(--button-bg-color); color: var(--link-color);
		width: 30px; height: 30px; border: none; font-size: 20px; cursor: pointer; border-radius: 0 0 0 5px; }

@media all and (max-width: 800px) { 
	.TeaserBanner { position: absolute; top: 80vh; }
}

/* animation */
.TeaserBanner { animation-name: zoomOut; animation-duration: calc(4 * var(--transition-time)); }
@keyframes zoomOut { 0% { opacity: 0; transform: translate(100%, 100%); }   100% { opacity: 1; transform: translate(-50%, -50%);  } }