@charset "UTF-8";

/* e-nitio mediasign
** Lindenstraße 14
** 50674 Köln
** www.e-nitio.com
** info@e-nitio.com */





// Import Framework Styles
@import "/cms/less/_variables.less"; // "../_variables";
@import "/cms/less/_mixins.less"; // "../mixins";



// ####################
//
// Project Style
//
// ####################

.stage {

	.owl-dots {
		display: none;
	}

	&:not(.big--event) .stage--container {
		@media screen and @mq-xs {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

		.container {
			@media screen and @mq-sm {
				padding-left: 0 !important;
				padding-right: 0 !important;
			}
		}
	}

	&:not(.big--event) .stage--img-container {
		@media screen and @mq-xs {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

		.stage--img {
			position: relative;

			&::after {
				@media screen and @mq-sm {
					content: '';
					display: block;
					position: absolute;
					border: solid transparent;
					.rem(border-width, 13);
					border-right-color: @brand-primary;
					right: 0;
					.rem(margin-top, 5);
					top: @bp-big-sm;
				}
				@media screen and @mq-md {
					top: @bp-big-md;
				}
				@media screen and @mq-lg {
					top: @bp-big-lg;
				}
			}
		}

	}

	.item--title {
		.hyphens();
	}

	.item--content {
		font-size: @fs-small;
		.rem(margin-bottom, 20);

		@media screen and @mq-lg {
			.font-size(18);
		}
	}

	.read-more {
		@media screen and @mq-md {
			.rem(margin-bottom, 20);
		}
	}
}



// ####################
//
// Stage Big Event
//
// ####################

.stage.big--event {

	.stage--img-container {
		position: absolute;
		height: 100%;
		overflow: hidden;
//		opacity: 0.5;

		@media screen and @mq-xs {
			padding-left: 0;
			padding-right: 0;
		}
	}

	.stage--img {
		position: relative;
		top: 50%;
		.translate(0,-50%);
		overflow: hidden;

		img {
			position: relative;
			max-width: none;
			width: 110%;
			left: -5%;
			filter: blur(10px);
		}
	}

	.stage--content {
		@media screen and @mq-md {
			padding-right: 30px;
		}
	}

}




// ####################
//
// Stage Banner
//
// ####################

.stage.banner {
	position: relative;

	@media screen and @mq-sm { }
	@media screen and @mq-md { height: 20vw;  }

	.c-logo {
		padding: 0;
	}

	.banner--img-container {
		@media screen and @mq-md {
			width: 100%;
			height: 100%;
			position: absolute;
			overflow: hidden;

			img {
				position: absolute;
				min-width: 100%;
				top: 50%;
				left: 50%;
				.translate(-50%,-50%); 
			}
		}
	}

	.content-container {
		height: 100%;

		.row.flex-row {
			height: 100%;
			align-items: center;
		}
	}
}




// ####################
//
// Stage Video
//
// ####################

.video-container {
	height: 100%;
	margin-bottom: -5px;
	.video-container-frame {
		height: 220px;
		width:100%;

		@media only screen and (min-width:480px) {
			height: 279px;
		}

		@media only screen and (min-width:768px) {
			height: 441px;
		}

		@media only screen and (min-width:1024px) {
			height: 585px;
		}
		@media only screen and (min-width:1260px) {
			height: 718px;
		}
	}
}


.banner-fona-forum-2024 {
	width: 100%;
	img { width: 100%; }
}