@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
//
// ####################

// * * * * * * * * * *
// Slider Default
// * * * * * * * * * *

.slider--outer {
	padding-top: @bp-small-xs-tb; padding-bottom: @bp-small-xs-tb;
	@media screen and @mq-sm { padding-top: @bp-small-sm-tb; padding-bottom: @bp-small-sm-tb; }
	@media screen and @mq-md { padding-top: @bp-small-md-tb; padding-bottom: @bp-small-md-tb; }
	@media screen and @mq-lg { padding-top: @bp-small-lg-tb; padding-bottom: @bp-small-lg-tb; }
}
.owl-carousel {

	@media screen and @mq-xs {
		padding-left: @bp-small-xs-lr;
		padding-right: @bp-small-xs-lr;
	}

	// OWL Nav (arrows)
	.owl-nav {
		position: absolute;
		width: 100%;
		top: 50%;
		z-index: -1;
		margin: 0;

		> button {

			.icon {
				margin: 0;
			}

			&.owl-prev,
			&.owl-next {
				position: absolute;
				.box-padding(@bp-small-xs, @bp-small-sm, @bp-small-md, @bp-small-lg);
			}

			&.owl-prev {
				.translate(-100%,-50%);
				left: @bp-small-xs-lr;
				@media screen and @mq-sm { left: @bp-small-sm-lr; }
				@media screen and @mq-md { left: 1px; }
			}

			&.owl-next {
				.translate(0%,-50%);
				right: 0;
				@media screen and @mq-sm { .translate(100%,-50%); right: @bp-small-sm-lr; }
				@media screen and @mq-md { right: 1px; }
			}

		}
	}

	// OWL Dots
	.owl-dots {
		position: relative;
		width: 100%;
		text-align: center;

		.owl-dot {
			.rem-padding(5);
			display: inline-block;
			z-index: -1;
			line-height: 0;

			span {
				display: block;
				.rem-width(12);
				.rem-height(12);
				.border-radius(50%);
				border: 1px solid @brand-gray;
				background-color: @brand-contrast;
				.transition();
				
				.bg-primary &,
				.bg-gray & {
					border-color: @brand-contrast;
					background-color: transparent;
				}
			}

			&.active {
				span {
					border: 1px solid @brand-gray;
					background-color: @brand-gray;
				
					.bg-primary &,
					.bg-gray & {
						border-color: @brand-contrast;
						background-color: @brand-contrast;
					}
				}
			}
		}
	}
}

// Slider Controller
.slider--controller {
	position: relative;
}
.slider--controller-absolute {
	@media screen and @mq-md {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 2;
	}
	
	.big--right {
		@media screen and @mq-md {
			margin-left: 61.7%;
		}
	}

	.btn {
		border: 1px solid transparent;
		.reset-box-shadow();
		line-height: 1;
		.em-padding(2, 8, 6, 8);
		.font-size(18);
		background: transparent;

		&:hover, &.hover,
		&.active {
			border-color: @brand-contrast;
			background-color: @brand-contrast;
			color: @brand-primary;
		}
		
		&:focus, &.focus {
			border-color: @brand-contrast;
		}
	}

	.slider--pagination {
		.btn {
			border-color: @brand-contrast;
		}
	}
}

// Autoplay
.slider--autoplay {
	.btn {
		background-color: transparent;
		.em-padding(2, 4, 6, 4);
		
		.icon {
			margin-right: 0;
			background-color: @brand-contrast;
				.no-cssmask & { background-image: url("/cms/img/icons/icon-pause-contrast.svg"); }
		}

		&:hover, &.hover {
			.icon {
				background-color: @brand-primary;
				.no-cssmask & { background-image: url("/cms/img/icons/icon-pause-primary.svg"); }
			}
		}

		&:focus, &.focus {
			.icon {
				background-color: @brand-contrast;
				.no-cssmask & { background-image: url("/cms/img/icons/icon-pause-primary.svg"); }
			}
		}

		&[data-slider-autoplay="false"] {
			background-color: @brand-contrast;

			.icon {
				background-color: @brand-primary;
				.no-cssmask & { background-image: url("/cms/img/icons/icon-pause-primary.svg"); }
			}
		}
		
	}
}

// Slider Pagination
.slider--pagination {
	ul {
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			display: inline-block;
		}

	}
}




// * * * * * * * * * *
// Index Calls & Events
// * * * * * * * * * *

main .index-calls-events {
	
	.owl-carousel {
		@media screen and @mq-xs {
			padding-left: 0;
			padding-right: 0;
		}
	}
	
	.owl-nav {
		@media screen and @mq-xs { display: none; }

		> button {
			.icon {
				background-color: @brand-gray-light;
			}

			&:hover, &.hover,
			&:focus, &.focus {
				.icon {
					background-color: @brand-primary;
				}
			}
		}
	}

	// OWL Dots
	.owl-dots {
		position: absolute;
		width: 100%;
		text-align: center;
		bottom: (@bp-small-xs-tb * 1.5 * -1);
		//left: 50%;
		.translate(0, 100%);

		@media screen and @mq-md {
			bottom: (@bp-small-md-tb * 2 * -1);
			text-align: right;
			right: (@bp-big-md * -1);
		}

		@media screen and @mq-lg {
			bottom: (@bp-small-lg-tb * 2 * -1);
			right: (@bp-big-lg * -1);
		}
	}

	a.read-more {
		display: inline-block;
		position: relative;
		z-index: 2;
		margin-top: @bp-small-xs-tb * 3;

		@media screen and @mq-sm { margin-top: @bp-small-sm-tb * 3; }
		@media screen and @mq-md { margin-top: @bp-small-md-tb; }
		@media screen and @mq-lg { margin-top: @bp-small-lg-tb; }
	}
}




// * * * * * * * * * *
// Stage Slider
// * * * * * * * * * *

#slider-stage {
	padding-left: 0;
	padding-right: 0;
}




// * * * * * * * * * *
// Sidebar Slider
// * * * * * * * * * *


aside {
	.slider--footer,
	.slider--container {
		padding-left: @bp-big-xs * 2;
		padding-right: @bp-big-xs * 2;

		@media screen and @mq-sm {
			padding-left: 0;
			padding-right: 0;
		}
		@media screen and @mq-md {
			padding-left: @bp-default-md;
			padding-right: @bp-default-md;
		}
		@media screen and @mq-lg {
			padding-left: @bp-default-lg;
			padding-right: @bp-default-lg;
		}
	}
}

.slider--sidebar {

	.owl-nav {

		> button {

			.icon {
				background-color: @brand-primary;
			}

			&.owl-prev,
			&.owl-next {
				.box-padding(@bp-small-xs-tb, @bp-small-sm-tb, @bp-small-md-tb, @bp-small-lg-tb);
			}

			&.owl-prev {
				.translate(-50%,-50%);
				left: ((@bp-big-xs / 2) * -1 - @bp-small-xs-tb);
				@media screen and @mq-sm { left: ((@bp-big-sm / 2) * -1); }
				@media screen and @mq-md { left: ((@bp-big-md / 2) * -1 + @bp-small-md-tb); }
				@media screen and @mq-lg { left: ((@bp-big-lg / 2) * -1 + @bp-small-lg-tb); }
			}

			&.owl-next {
				.translate(50%,-50%);
				right: -((@bp-big-xs / 2) * -1 - @bp-small-xs-tb);
				@media screen and @mq-sm { right: ((@bp-big-sm / 2) * -1 + @bp-small-sm-tb); padding: 0; }
				@media screen and @mq-md { right: ((@bp-big-md / 2) * -1 + @bp-small-md-tb); }
				@media screen and @mq-lg { right: ((@bp-big-lg / 2) * -1 + @bp-small-lg-tb); }
			}

		}
	}
}




// * * * * * * * * * *
// Index Mediathek
// * * * * * * * * * *

.teaser-mediathek.bg-gray-light .slider-media .owl-nav .icon { 
	background-color: @brand-primary; 
	
	.no-cssmask & {
		&.icon--arrow-prev { background-image: url(/cms/img/icons/icon-arrow_prev-primary.svg); }
		&.icon--arrow-next { background-image: url(/cms/img/icons/icon-arrow_next-primary.svg); }
	}
}






// * * * * * * * * * *
// Slider After Content
// * * * * * * * * * *



.slider-after-content {
	.owl-nav .icon { 
		background-color: @brand-contrast;
	
		.no-cssmask &.icon--arrow-next {
			background-image: url(/cms/img/icons/icon-arrow_next-contrast.svg);
		}
		.no-cssmask &.icon--arrow-prev {
			background-image: url(/cms/img/icons/icon-arrow_prev-contrast.svg);
		}
	}
}



// * * * * * * * * * *
// Content-Type Slider
// * * * * * * * * * *

.content-slider--container {
	.owl-stage-outer {}

	.owl-nav {
		.icon--arrow-next,
		.icon--arrow-prev { background-color: @brand-primary; }
	}

	.owl-dots {}
}