/*--
    Common Css
--*/

:root {
	--lgray: rgb(242, 242, 242);
	--mgray: rgb(180, 180, 180);
	--dmgray: rgb(150, 150, 150);
	--dgray: rgb(100, 100, 100);
	--mcmlblack: rgb(20, 20, 20);
	--mcmldblue: #001c32;
	--mcmlturquoise: #0098a6;
	--mcmlgreen: #00ebb5;
	--mcmlpurple: #8c78ff;
	--mcmlblue: #007fff;
	--mcmlyellow: #ceff58;
	--mcmlred: #ff5a6e; /*rgb(255, 90, 110);*/
	--mcmlgray: #e4e4e4; 
	--mcmlmgray: #a4a4a4;
}

.mcmlblack {
	color: var(--mcmlblack);
}
.dmgray {
	color: var(--dmgray);
}
.mgray {
	color: var(--mgray);
}
.lgray {
	color: var(--lgray);
}
.mblue {
	color: var(--mcmlblue);
}
.yellow {
	color: var(--mcmlyellow);
}
.red {
	color: var(--mcmlred);
}

/* background */
.bg-purple {
	background-color: var(--mcmlpurple);
}
.bg-yellow {
	background-color: var(--mcmlyellow);
}
.bg-yellow-opac {
	background-color: rgba(206, 205, 88, 0.7);
}
.bg-red {
	background-color: var(--mcmlred);
}
.bg-blue {
	background-color: var(--mcmlblue);
}
.bg-dblue {
	background-color: var(--mcmldblue);
}
.bg-white {
	background-color: white;
}
.bg-black {
	background-color: var(--mcmlblack);
	color: white;
}
.bg-lgray {
	background-color: var(--lgray);
	color: white;
}
.bg-green {
	background-color: var(--mcmlgreen);
	color: white;
}
.bg-turquoise {
	background-color: var(--mcmlturquoise);
	color: white;
}
.bg-white-opac {
	background-color: rgba(255, 255, 255, 0.3);
}

.bg-opac {
	background-color: rgba(255, 255, 255, 0);
}

.bg-mask-top-yellow {
	background: url('/images/background/sections/bg-mask-top-yellow.webp') left top no-repeat;
}

.bg-mask-top-blue {
	background: url('/images/background/sections/bg-mask-top-blue.webp') left top no-repeat;
}

.bg-mask-top-green {
	background: url('/images/background/sections/bg-mask-top-green.webp') left top no-repeat;
}

.bg-mask-top-turquoise {
	background: url('/images/background/sections/bg-mask-top-turquoise.webp') left top no-repeat;
}

.bg-mask-top-white {
	background: url('/images/background/sections/bg-mask-top-white.webp') var(--mcmlyellow) left top no-repeat;
}

.bg-mask-top-white-purple {
	background: url('/images/background/sections/bg-mask-top-white.webp') var(--mcmlpurple) left top no-repeat;
}

.bg-mask-top-white-green {
	background: url('/images/background/sections/bg-mask-top-white.webp') var(--mcmlgreen) left top no-repeat;
}

.bg-mask-top-white-red {
	background: url('/images/background/sections/bg-mask-top-white.webp') var(--mcmlred) left top no-repeat;
}

.bg-mask-top-white-blue {
	background: url('/images/background/sections/bg-mask-top-white.webp') var(--mcmlblue) left top no-repeat;
}

.bg-mask-top-white-turquoise {
	background: url('/images/background/sections/bg-mask-top-white.webp') var(--mcmlturquoise) left top no-repeat;
}

/* border */
.b-lgray {
	border: 1px solid var(--lgray);
}
.b-mgray {
	border: 1px solid var(--mgray);
}
.b-black {
	border: 1px solid var(--mcmlblack);
}
.b-red {
	border: 1px solid var(--mcmlred);
}
.b-green {
	border: 1px solid var(--mcmlgreen);
}
.b-blue {
	border: 1px solid var(--mcmlblue);
}
.b-white {
	border: 1px solid white;
}
.bl-white {
	border-left: 1px solid white;
}
.br-white {
	border-right: 1px solid white;
}
.b-none {
	border: none;
	border-radius: 0;
}
.b-yellow {
	border: 1px solid var(--mcmlyellow);
}

/* hr */
hr.yellow {
	border: 1px solid var(--mcmlyellow);
	opacity: 100%; 
}
hr.red {
	border: 1px solid var(--mcmlred);
	opacity: 100%; 
}
hr.blue {
	border: 1px solid var(--mcmlblue);
	opacity: 100%; 
}
hr.purple {
	border: 1px solid var(--mcmlpurple);
	opacity: 100%; 
}
hr.green {
	border: 1px solid var(--mcmlgreen);
	opacity: 100%; 
}
hr.turquoise {
	border: 1px solid var(--mcmlturquoise);
	opacity: 100%; 
}
hr.dblue {
	border: 1px solid var(--mcmldblue);
	opacity: 100%; 
}

.container-fluid.fullwidth {
	padding-left: 0rem !important;
	padding-right: 0rem !important;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.container-fluid {
	padding-left: 15rem !important;
	padding-right: 15rem !important;
	padding-top: 1rem;
	padding-bottom: 1rem;
	/*border: 1px solid green;*/
}
@media (max-width: 1399.98px) {
	.container-fluid {
		padding-left: 7rem !important;
		padding-right: 7rem !important;
	}
}
@media (max-width: 1199.98px) {
	.container-fluid {
		padding-left: 5rem !important;
		padding-right: 5rem !important;
	}
}
@media (max-width: 991.98px) {
	.container-fluid {
		padding-left: 3rem !important;
		padding-right: 3rem !important;
	}
}
@media (max-width: 575.98px) {
	.container-fluid {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* work-sans-regular - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/work-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/work-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/work-sans-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/work-sans-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/work-sans-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/work-sans-v18-latin-regular.svg#WorkSans') format('svg'); /* Legacy iOS */
}
/* work-sans-600 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/work-sans-v18-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/work-sans-v18-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/work-sans-v18-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/work-sans-v18-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/work-sans-v18-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/work-sans-v18-latin-600.svg#WorkSans') format('svg'); /* Legacy iOS */
}

body {
	font-family: "Work Sans", sans-serif;
	font-size: 20px;
	line-height: 26px;
	letter-spacing: 0em;
	font-weight: 400;
	color: var(--mcmlblack);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
@media (max-width: 575.98px) {
  body {
	  font-size: 18px;
	  line-height: 24px;
  }
}

h1, .h1 {
	font-size: 60px;
	font-weight: 700;
	line-height: 66px;
}
@media (max-width: 575.98px) {
	h1, .h1 {
		font-size: 32px;
		font-weight: 700;
		line-height: 38px;
	}
}

h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: 80px;
}
@media (max-width: 575.98px) {
  h1, h2, h3, h4, h5, h6 {
    scroll-margin-top: 60px;
  }
}

h2, .h2 {
	font-size: 36px;
	font-weight: 700;
	line-height: 46px;
}
@media (max-width: 575.98px) {
	h2, .h2 {
		font-size: 26px;
		font-weight: 700;
		line-height: 32px;
		}
	}

h3, .h3 {
	font-size: 24px;
	font-weight: 700;
	line-height: 30px;
}
@media (max-width: 575.98px) {
	h3, .h3 {
		font-size: 20px;
		font-weight: 700;
		line-height: 26px;
	}
}

h4, .h4 {
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
}
@media (max-width: 575.98px) {
  h4, .h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
  }
}

h5 {
	font-size: 20px;
	line-height: 24px;
	font-weight: 600}

h6 {
	font-size: 20px;
	line-height: 24px;
	font-weight: 600}
	
p {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4em;}
	
@media (max-width: 480px) {
	p {
		font-size: 18px; 
		line-height: 1.3em;}
}

p.white{
	color: white; }
	
p.gray{
	color: var(--dgray); }
	
p.bold, span.bold{
	font-weight:bold; }

p.p-xl {
	font-size: 26px;
}
@media (max-width: 575.98px) {
	p.p-xl {
		font-size: 22px;
	}
}	

p.p-l, a.p-l {
	font-size: 24px;
}
@media (max-width: 575.98px) {
	p.p-l, a.p-l {
		font-size: 20px;
	}
}

p.p-m {
	font-size: 20px;
}
@media (max-width: 575.98px) {
	p.p-m {
		font-size: 18px;
	}
}

a.p-s, a.small {
	font-size: 18px !important;
	line-height: 1.3em !important;
}
p.p-s, p.small, span.p-s {
	font-size: 18px !important;
	line-height: 1.3em !important;
}
@media (max-width: 575.98px) {
	a.p-s, a.small {
		font-size: 16px !important;
	}
	p.p-s, p.small, span.p-s {
		font-size: 16px !important;
	}
}

p.p-mxs {
  font-size: 16px;
}
@media (max-width: 575.98px) {
	p.p-mxs {
		font-size: 14px;
	}
}

p.p-xs, p.xsmall, span.p-xs, a.p-xs, .p-xs p {
	font-size: 14px !important;
	line-height: 18px !important;
}
@media (max-width: 575.98px) {
	p.p-xs, p.xsmall, span.p-xs {
		font-size: 12px !important;
	}
}

p.large {
	font-size: 24px;
	font-weight:bold;
}
@media (max-width: 575.98px) {
	p.large {
		font-size: 20px;
	}
}

p.p-number {
	font-size: 18px !important;
	line-height: 1.3em !important;
}
@media (max-width: 575.98px) {
	p.p-number {
		font-size: 12px !important;
	}
}

ul {
	font-size: 20px;
	padding-bottom: 10px;
	padding-left: 20px !important; 
}
	
@media (max-width: 480px) {
	ul {
		font-size: 18px; 
	}
}

span.small-text {
	display: block;
	font-size: 18px;
	line-height: 26px;
}
@media (max-width: 575.98px) {
	span.small-text {
		font-size: 16px;
		line-height: 24px;
	}
}
span.xsmall-text {
	display: block;
	font-size: 14px;
	line-height: 20px;
}
@media (max-width: 575.98px) {
	span.xsmall-text {
		font-size: 12px;
		line-height: 18px;
	}
}

/* links */	
a {
	-webkit-transition: all 0.2s ease-in-out 0s;
	-moz-transition: all 0.2s ease-in-out 0s;
	-o-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s; }

a:focus {
	box-shadow: none;
	outline: 0 none; }

a,
a:active,
a:focus,
a:active {
	text-decoration: none; }

a {
	color: var(--mcmlblack); 
	font-weight: bold; }

a:hover {
	background: var(--mcmlblack);
	color: white;
	font-weight: bold; 
	text-decoration: none;}

a.white {
	color: white; 
	font-weight: normal;}

a.white:hover {
	font-weight: bold;}

a.publink {
	font-weight: normal !important; }

/* teaser */
div.teaser, div.teaser p, div.teaser ul{
	font-size: 26px;}

@media (max-width: 575.98px) {
div.teaser, div.teaser p, div.teaser ul{
	font-size: 22px;}
}

/* txtTwoCol */	
div.txtTwoCol, div.txtTwoCol p, div.txtTwoCol ul {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.4em;
	padding-top: 0px !important;
}
	
div.txtTwoCol p {
	margin-top: 0px !important;
}
	
div.txtTwoCol ul {
	margin-top: 0;
	padding-bottom: 0.5rem;
}
	
@media (max-width: 575.98px) {
div.txtTwoCol, div.txtTwoCol p{
	font-size: 20px;
	line-height: 1.3;}
}
	 
div.txtTwoCol-md ul {
	padding-top: 0px !important;
	padding-bottom: 0.5em;
	margin-top: 0px !important;
	 }
  
/* quicklinks */  
.quicklink {
	display: inline-block;
	font-weight: 500;
	line-height: 26px;
	font-size: 24px;
	font-style: normal;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	text-align: left;
	border-radius: 0;
	padding-right: 21px;
	color: var(--mcmlblack);
	appearance: none;
	text-decoration: none;
	transition: all 0.3s ease-in;
	background: linear-gradient(to right, var(--mcmlblack) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: right bottom;
	box-shadow: none;
	border: 0;
	cursor: pointer;
}

.quicklink.white {
	color: #ffffff;
	background: linear-gradient(to right, #ffffff 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: right bottom;
}
@media (max-width: 575.98px) {
  .quicklink {
    font-size: 18px !important;
    line-height: 25px;
  }
}

.quicklink.medium {
    font-size: 20px;
}

.quicklink.small {
    line-height: 14px !important;
    font-size: 14px !important;
}

.quicklink, .quicklink:focus {
	outline: none;
}

.quicklink:hover {
	background-position: left bottom;
	color: #ffffff !important;
}

.quicklink.white:hover {
	background-position: left bottom;
	color: var(--mcmlblack) !important;
}

.quicklink.has--icon {
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
}

.quicklink i{
	width: 50px;
	height: 50px;
	padding: 14px 10px;
	display: inline-flex;
	justify-content: center;
	align-content: center;
	margin-right: 10px;
	color: #ffffff;
	background-color: var(--mcmlblack);
}
@media (max-width: 575.98px) {
	.quicklink i {
		width: 36px;
		height: 36px;
		padding: 9px 11px;
		margin-right: 9px;
	}
}

.quicklink.small i {
	width: 30px;
	height: 30px;
	padding: 9px 10px;
}

.quicklink.white i{
    color: var(--mcmlblack);
    background-color: #ffffff;
	margin-right: 10px;
}
	
@media (max-width: 480px) {
	.buttonright {
		text-align: left; }

	.buttoncenter {
		text-align: left; }
}

.mybreadcrumb {
	font-size: 14px;	
}
  
section {
	padding-top: 50px;
	padding-bottom: 50px;}

/* Navigation  */
.navbar-brand {
	background: none;
	color: white;
}
.navbar-brand:hover {
	background: none;
	color: white;
}
.navbar-nav {
	font-weight: 600;
	font-size: 20px; }
	
.navbar-light .navbar-nav .nav-link {
	color: var(--mcmlblack);
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
	background-color: var(--mcmlblack);
	color: white;
}

.navbar-nav > li{
	padding-left:10px;
	padding-right:10px;
}	

/* Untermenues */	
.dropdown:hover .dropdown-menu {
	display: block;
    margin-top: 0; }

@media (min-width: 1200px) {
	.nav-item .dropdown {
		border: 1px solid var(--mcmlblack);
		visibility: hidden;
		opacity: 0;
		position: fixed;
		transition: all 0.3s ease-in-out;
		display: flex;
		justify-content: center;
		left: 0;
		right: 0;
		opacity: 0;
		visibility: hidden;
		backdrop-filter: blur(40px);
		-webkit-backdrop-filter: blur(40px);
		filter: blur(0);
		-webkit-backdrop-filter: blur(40px);
  }
}
		
/*--
	hero-area
--*/
	  
.hero-area h1 {
	line-height: 1.1;} 

.hero-area h2 {
	line-height: 1.1; } 
	
.hero-area h3 {
	line-height: 1.3; } 
	
.hero-area p.vision {
    font-weight: 400;
	font-size: 24px;
	line-height: 1.3; 
	padding-top: 30px;
	padding-bottom: 30px;}
		
.background-video {
	object-fit: cover;
	position: absolute;
	top: 60%;
	right: 0%;
	z-index: -1;
	overflow: hidden;
	border: none;
}

.background-video1 {
	object-fit: cover;
	position: absolute;
	top: 0%;
	right: 0%;
	z-index: -1;
	overflow: hidden;
	border: none;
}

.background-video2 {
	object-fit: cover;
	position: absolute;
	top: 30%;
	right: 0%;
	heightx: 100%;
	z-index: -1;
	overflow: hidden;
	border: none;
}

@media (max-width: 991.98px) {
	div .hero-card {
		border-right: none;
		border-bottom: 1px white solid;
	} 
	.background-video {
		right: 0%;
		display:none;
	}
	.background-video1 {
		display:none;
	}
	.background-video2 {
		right: 0%;
		top: 80%;
	}
}

/*--
  Content
--*/
.mcml-content {
	border-top: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}
@media (min-width: 992px) {
	.mcml-content.noshow-lg {
		border-top: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		background-image: none !important;
	}
}
@media (max-width: 991.98px) {
	.mcml-content.noshow-lg {
		border-top: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		background-size: cover !important;
		background-position: right top !important;
		background-size: auto 1000px !important;
		background-overflow: hidden !important;
	}
}
			
/*--
  Footer
--*/
footer {
	font-size: 14px; }

a.footer-nav-link {
	color: white !important;
	margin-left: 0rem;
	/*--border: 1px solid red;--*/
	font-size: medium;
	font-weight: 500;
	/*--color: #f8f8f8;--*/ }

a.footer-nav-link:hover {
	color: white;
	font-weight: bold; }

footer .footer-bottom-right {
	text-align: right; }

@media (max-width: 480px) {
	footer p {
	font-size: medium;
	font-weight: 500; }
	
	a.footer-nav-link {
		color: white;
		font-size: small; }
}

/* copyright, caption */	
p.copyright {
	color: gray;
	text-align:left;
	font-size: x-small;
	line-height: 15px;
}

p.copyright-white {
	color: white;
	text-align:left;
	font-size: x-small;
	line-height: 15px;
}

p.caption {
	color: gray;
	font-size: 14px;
	line-height: 18px;
}
@media (max-width: 575.98px) {
	p.caption {
		font-size: 12px;
		line-height: 1.2;
	}
}

/* images float left or right */
.floatleft {
	float: left;
	width: 33.33%; 
	height: auto;
	margin-bottom: 0.25rem; 
}
.floatleft-small {
	float: left;
	width: 20%; 
	height: auto;
	margin-right: 20px; 
	margin-bottom: 0.25rem; 
}
.floatleft-big {
	float: left;
	width: 50%; 
	height: auto;
	margin-right: 20px; 
	margin-bottom: 0.25rem; 
}

div.floatleft img {
	width: 100%;
	height: auto;
}

div.floatleft-small img {
	width: 100%;
	height: auto;
}

div.floatleft-big img {
	width: 100%;
	height: auto;
}

.floatright {
	float: right;
	width: 32.2%; 
	height: auto;
	margin-left: 20px; 
	margin-bottom: 0.25rem; 
}

.floatright-small {
	float: right;
	width: 20%; 
	height: auto;
	margin-left: 20px; 
	margin-bottom: 0.25rem; 
}

.floatright-big {
	float: right;
	width: 50%; 
	height: auto;
	margin-left: 20px; 
	margin-bottom: 0.25rem; 
}

div.floatright img {
	width: 100%;
	height: auto;
}

div.floatright-small img {
	width: 100%;
	height: auto;
}

div.floatright-big img {
	width: 100%;
	height: auto;
}

.img-left {
	width:32.2%; 
	float: left; 
	margin-right: 20px; 
	margin-bottom: 0.25rem; 
}	

.img-left-small {
	width:20%; 
	float: left; 
	margin-right: 20px; 
	margin-bottom: 0.25rem; 
}	

.img-left-tiny {
	width:100px; 
	float: left; 
	margin-right: 20px; 
	margin-bottom: 0.25rem; 
}	

.img-right {
	width:32.2%; 
	float: right; 
	margin-left: 20px; 
	margin-bottom: 0.25rem; 
}	

.img-right-small {
	width:20%; 
	float: right; 
	margin-left: 20px; 
	margin-bottom: 0.25rem; 
}		

.img-right-tiny {
	width:100px; 
	float: right; 
	margin-left: 20px; 
	margin-bottom: 0.25rem; 
}			

@media (max-width: 991.98px) {
	.floatleft {
		width: 100%; }
	.floatleft-small {
	  margin-bottom: 1rem; 
		width: 100%; }
	.floatleft-big {
	  margin-bottom: 1rem; 
		width: 100%; }
	.floatright {
	  margin-bottom: 1rem; 
		width: 100%; }
	.floatright-small {
	  margin-bottom: 1rem; 
		width: 100%; }
	.floatright-big {
	  margin-bottom: 1rem; 
		width: 100%; }
	.img-left {
	  margin-bottom: 1rem; 
		width: 100%; }
	.img-right {
	  margin-bottom: 1rem; 
		width: 100%; }
	.img-left-small {
	  margin-bottom: 1rem; 
		width: 100%; }
	.img-right-small {
	  margin-bottom: 1rem; 
		width: 100%; }
}

/* News and Events and section card */ 
.card-news {
	border-radius: 0;
}
.card-news:hover > * {
	background-color: var(--mcmlblack);
	color: white;
}
  
.card-news:hover a.quicklink {
	background-color: var(--mcmlblack);
	color: white;
}

.card-news:hover a.maillink {
	background-color: var(--mcmlblack);
	color: white;
}

.card-news:hover a {
	background-color: var(--mcmlblack);
	color: white;
}	

.card-news:hover div:not(.tinylogo) {
  background-color: var(--mcmlblack) !important;
  color: white !important;
}

.card-news div.grouplink {
	border: 1px solid white !important;
}

/* slide gallery */
#slide-window-landscape {
	position:relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
    width: 600px;
    height: 400px;
    overflow: hidden;
    top: 0px;
    left: 0px;
}
@media (max-width: 767.98px) {
	#slide-window-landscape {
		width: 300px;
		height: 200px;}}
		
#slides-list-landscape {
    width: 600px;
    height: 400px;
	position: absolute;
	margin: 0px;
	padding: 0px;
	-webkit-transform: translate3d(0px, 0px, 0px);
	transform: translate3d(0px, 0px, 0px);
	transition: all 0.66s ease;
	-webkit-transition: all 0.66s ease;
	}
@media (max-width: 767.98px) {
	#slide-list-landscape {
		width: 300px;
		height: 200px;}}
		
.slide-landscape {
	list-style: none;
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
    width: 600px;
    height: 400px;
	background: #ccc;
	text-align: center;
	line-height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	color: #fff;
	-webkit-transform: translate3d(0px, 0px, 0px);
	-webkit-transform-style: preserve-3d;
}
@media (max-width: 767.98px) {
	.slide-landscape {
		width: 300px;
		height: 200px;}}

.slide-nav {
    position: relative;
    z-index: 9;
    top: 45%;
    cursor: pointer;
    color: #fff;
    opacity: 0.7;
    transition: all 0.66s ease;
    -webkit-transition: all 0.66s ease;
}

.slide-nav:hover {
    opacity: 1.0;
}

.slide-nav-left {
    left: 1%;
    float: left;
}

.slide-nav-right {
    right: 1%;
    float: right;
}

/* slide gallery portrait*/
#slide-window-portrait {
	position:relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
    width: 268px;
    height: 402px;
    overflow: hidden;
    top: 0px;
    left: 0px;
}
		
#slides-list-portrait {
    width: 268px;
    height: 402px;
	position: absolute;
	margin: 0px;
	padding: 0px;
	-webkit-transform: translate3d(0px, 0px, 0px);
	transform: translate3d(0px, 0px, 0px);
	transition: all 0.66s ease;
	-webkit-transition: all 0.66s ease;
	}
		
.slide-portrait {
	list-style: none;
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
    width: 268px;
    height: 402px;
	background: #ccc;
	text-align: center;
	line-height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	color: #fff;
	-webkit-transform: translate3d(0px, 0px, 0px);
	-webkit-transform-style: preserve-3d;
}

/* quotes */
.col-quote-blog {
	background-color: var(--mcmldblue);
	color: white;
	text-align: right;
}
.col-quote-blog-floatleft {
	width: 32.2%; 
	float: left;
}
.col-quote-blog-floatright {
	width: 32.2%; 
	float: right;
}
.col-quote-blog .quote-blog-icon-blue {
	color: var(--mcmlblue);
	display: flex;
	justify-content:flex-start;
}
.col-quote-blog .quote-blog-icon-turquoise {
	color: var(--mcmlturquoise);
	display: flex;
	justify-content:flex-start;
}
.col-quote-blog .quote-blog-icon-red {
	color: var(--mcmlred);
	display: flex;
	justify-content:flex-start;
}
.col-quote-blog .quote-blog-icon-yellow {
	color: var(--mcmlyellow);
	display: flex;
	justify-content:flex-start;
}
.col-quote-blog .quote-blog-icon-purple {
	color: var(--mcmlpurple);
	display: flex;
	justify-content:flex-start;
}
.col-quote-blog .quote-blog-icon-green {
	color: var(--mcmlgreen);
	display: flex;
	justify-content:flex-start;
}

.col-quote-blog p.position {
	font-size: x-small;
}

@media (max-width: 767.98px) {
	.col-quote-blog-floatleft {
		width: 50%;
		float: none;
		margin-bottom: 1rem;
	}
	.col-quote-blog-floatright {
		width: 50%;
		float: none;
		margin-bottom: 1rem;
	}
}

@media (max-width: 575.98px) {
	.col-quote-blog-floatleft {
		width: 75%;
		float: none;
		margin-bottom: 1rem;
	}
	.col-quote-blog-floatright {
		width: 75%;
		float: none;
		margin-bottom: 1rem;
	}
}

.col-quote {
	/*border: solid 1px var(--lgray);*/
	display: flex;
	flex-wrap: wrap;
	align-items:center;
	text-align: left;
	width:75%;
}

.col-quote-small {
	/*border: solid 1px var(--lgray);*/
	display: flex;
	flex-wrap: wrap;
	align-items:center;
	text-align: left;
	width:95%;
}

.quote-img > * {
	flex-basis: 200px;
	margin-top: 20px;
	width: 200px;
	height: auto;
	border: none;
}

.quote-img-small > * {
	flex-basis: 150px;
	margin-top: 20px;
	width: 150px;
	height: auto;
	border: none;
}	

.quote-img-left {
	margin-left: 5rem; 
}	
.quote-img-right {
	margin-right: 5rem; 
	text-align: right;
}
.quote-img-right-small {
	margin-right: 3rem; 
	text-align: right;
}	
.quote-txt {
	flex-shrink:3;
	flex-grow:3;
	flex-basis: 200px;
	margin-right: 5rem;  
	margin-left: 5rem; 
	margin-top: 20px;
}
.quote-txt p {
	font-weight: 500;
}

@media (max-width: 991.98px) {
	.quote-img-left {
		margin-right: 20px;
	}
	.quote-img-left p {
		margin-bottom: 0px;
	}
	.quote-img-right {
		margin-left: 20px;
		text-align: left; 
	}
	.quote-img-right img {
		margin-top: 0px;
	   }
	.quote-img img{
		width: 100px;
	}
	.quote-img > * {
		flex-basis: 100px;
	}
	.quote-img p{
		width: 100%;
	}
	.quote-txt {
		margin-left: 20px; 
		margin-right: 20px; 
	}
	.col-quote {
		width:100%;
	}
}

/* pagination */
.pagination > li > a
{
    background-color: white;
    color: var(--mcmlblack);
	border: none !important;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
    color: white;
    background-color: var(--mcmlblack);
	border: none !important;
}

.pagination > .active > a
{
    color: white;
    background-color: var(--mcmlblack) !important;
	border: none !important;
}

.pagination > .active > a:hover
{
    background-color: var(--mcmlblack) !important;
	border: none !important;
}

.disabled {
  color: var(--mgray) !important;
  pointer-events: none;
  cursor: default;
}

/* mcml in numbers */	
.numbers-img {
	float: left; 
	margin-right: 20px; 
	margin-bottom: 0px; 
	margin-top: 0px;
	width: 20%;
	height: auto;
}

.counter, .counter-container {
	font-size: 50px;
	margin-top: 10px;
	font-weight: 600;
	line-height:1.1;
}

@media (max-width: 1199.98px) {
	.counter, .counter-container {
		font-size: 50px;
		margin-top: 10px;
	}
}
@media (max-width: 991.98px) {
	.counter, .counter-container {
		font-size: 40px;
		margin-top: 10px;
	}
}

/* images */
img.img-100 {
	width: 100%;
	height: auto;
}

img.img-75 {
	width: 75%;
	height: auto;
}

img.img-60 {
	width: 60%;
	height: auto;
}

img.img-40 {
	width: 40%;
	height: auto;
}

img.img-33 {
	width: 33.33%;
	height: auto;
}

img.img-30 {
	width: 30%;
	height: auto;
}

img.img-20 {
	width: 20%;
	height: auto;
}

img.img-10 {
	width: 10%;
	height: auto;
}

img.img-social {
	width:70px;
	height: auto;
}

img.img-logo {
	width:200px;
	height: auto;
}

img.img-partner {
	width: 100%;
	height: auto;
	border: 1px solid var(--lgray);		
}	

img.img-member {
	width:60%;
	height: auto;
	background: linear-gradient(var(--mcmlgray), var(--mcmlmgray));
}

/*-- Ticker --*/
/* Ticker container for infinite scrolling in */
.ticker-wrapper {
	background-color: var(--mcmlyellow);
	color: var(--mcmlblack);
	overflow: hidden;
	white-space: nowrap;
	padding: 1rem 0;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}


.ticker-wrapper-link:hover {
	background-color: var(--mcmlblack);
}

.ticker-wrapper-link:hover .ticker a {
	color: white;
}

/* Inner ticker content */
.ticker {
	display: inline-block;
	white-space: nowrap;
	padding-left: 100%;
	animation: ticker-scroll 30s linear infinite;
}

/* Duplicate content to make the scroll continuous */
.ticker-content {
	display: inline-block;
}

.ticker-content > a {
	text-decoration: none;
	margin-right: 5rem;
	font-weight: bold;
}

/* Animation for seamless continuous scrolling */
@keyframes ticker-scroll {
	0% {
		transform: translateX(0);
		}
	100% {
		transform: translateX(-100%);
	}
}

/* Container for a ticker, that stops after scrolling in */
.ticker-scroll-in {
	width: 100%; /* Full width of the viewport */
	background-color: var(--mcmlyellow); /* Yellow background for the ticker */
    overflow: hidden; /* Hide the text that is off-screen */
	padding: 1rem;
	display: flex;
	align-items: center; /* Vertically center the text */
}

/* Ticker text */
.ticker-scroll-in-text {
	display: inline-block;
	padding-left: 0%; /* Start off-screen to the right */
	font-weight: bold;
	/* animation: ticker-scroll-in 10s linear forwards; /* Animate the text */
}

.ticker-scroll-in-text p {
	font-weight: bold;
}

.ticker-scroll-in:hover {
	background-color: var(--mcmlblack);
}

.ticker-scroll-in:hover .ticker-scroll-in-text a {
	color: white;
}

.ticker-scroll-in:hover .ticker-scroll-in-text i {
	color: white;
}

/* Black square, e.g. News and Events */
.square {
	width: 10vw; /* 10% of the viewport width */
	height: 10vw; /* Keeps the square proportional */
	max-width: 400px; /* Optional: Set a maximum size for larger screens */
	max-height: 400px; /* Optional: Set a maximum size for larger screens */
	min-width: 150px; /* Optional: Set a maximum size for larger screens */
	min-height: 150px; /* Optional: Set a maximum size for larger screens */
	background-color: var(--mcmlblack); /* Black background */
	color: white; /* White text for contrast */
	display: flex;
	flex-direction: column; /* Stack elements vertically */
	justify-content: center; /* Vertically centers the content */
	align-items: flex-start; /* Aligns items to the start (left) */
	text-align: left; /* Left-align text */
	box-sizing: border-box;
	padding: 1rem; /* Padding to avoid text touching edges */
}

p.code, td.code, span.code {
	font-family: monospace !important;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4em;
}

/* Statistic Charts */
.chart {
	display: flex;
	align-items: flex-end;
	gap: 1vw;                     /* relative Abstand */
	height: 30vh;                 /* Höhe skaliert mit Viewport */
	padding: 2vh;
	border-left: 2px solid #444;
	border-bottom: 2px solid #444;
}

/* Header/Titel: fixe Reserve (2 Zeilen) */
.chart-header{
  line-height: 1.2;
  min-height: 2.4em; /* ~2 Zeilen */
}

.bar {
	flex: 1;                      /* Balkenbreite passt sich automatisch an */
	min-width: 10px;              /* niemals kleiner als 10px */
	background: var(--col, #ceff58); /* Default */
	height: var(--value);
	position: relative;
	border-radius: 4px 4px 0 0;
}

.bar.mcmlyellow    { --col: var(--mcmlyellow); }
.bar.mcmldblue     { --col: var(--mcmldblue); }
.bar.mcmlturquoise { --col: var(--mcmlturquoise); }
.bar.mcmlgreen     { --col: var(--mcmlgreen); }
.bar.mcmlpurple    { --col: var(--mcmlpurple); }
.bar.mcmlblue      { --col: var(--mcmlblue); }
.bar.mcmlred       { --col: var(--mcmlred); }

.bar::after {
	content: attr(data-year);
	position: absolute;
	bottom: -3em;
	left: 50%;
	transform: translateX(-50%);
	font-size: clamp(12px, 1.2vw, 14px);
	font-weight: bold;
}

.bar::before {
	content: attr(data-count);
	position: absolute;
	top: -2em;
	left: 50%;
	transform: translateX(-50%);
	font-size: clamp(12px, 1.2vw, 14px);
	font-weight: bold;
}

@media (max-width: 767px) {
.bar::after {
	bottom: -4em;
}
}