/* colors
	t3b blue : #06529B;  // rgba(6,82,155,1)
	t3cyan : #138496
	t3orange: #d97300
	light-green: #a6e22e
	grey-light:
	grey-med: #5d656a
	grey-dark: #333
	
	icon-lib: font-family:bootstrap-icons;

	# standard transition:
	transition: all 0.3s ease;
	browsers old:
	  -webkit-transition: .5s ease-in-out;
	  -moz-transition: .5s ease-in-out;
	  -o-transition: .5s ease-in-out;
	  transition: .5s ease-in-out;
	*/

@font-face {
    font-family: 'ubuntu-regular';
            src: url('../Fonts/ubuntu-regular-webfont.woff2') format('woff2'),
         url('../Fonts/ubuntu-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'ubuntu-bold';
            src: url('../Fonts/ubuntu-bold-webfont.woff2') format('woff2'),
         url('../Fonts/ubuntu-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ubuntu-light';
            src: url('../Fonts/ubuntu-light-webfont.woff2') format('woff2'),
         url('../Fonts/ubuntu-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'computed-regular';
            src: url('../Fonts/computed_rg.woff2') format('woff2'),
         url('../Fonts/computed_rg.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'computed-light';
            src: url('../Fonts/computed_lt.woff2') format('woff2'),
         url('../Fonts/computed_lt.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'oswald-light';
            src: url('../Fonts/Oswald-Light.woff2') format('woff2'),
         url('../Fonts/Oswald-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'share-regular';
            src: url('../Fonts/share-regular-webfont.woff2') format('woff2'),
         url('../Fonts/share-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'share-bold';
            src: url('../Fonts/share-bold-webfont.woff2') format('woff2'),
         url('../Fonts/share-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'euromode';
            src: url('../Fonts/euron-webfont.woff2') format('woff2'),
         url('../Fonts/euron-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'opensans-regular';
            src: url('../Fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('../Fonts/opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'opensans-bold';
            src: url('../Fonts/opensans-bold-webfont.woff2') format('woff2'),
         url('../Fonts/opensans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.ubuntuLight08 { font-family: 'ubuntu-light'; font-weight:normal; font-size:0.8em; }


html, body { height: 100%; }

#particles-js {
	position: absolute;
	width: 100%;
	height:100%;
	background-color: #04054f;
	/* background-color:rgb(26, 95, 180); */
	background-image: url("");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
}


#particles-js-triangle {
	position: absolute;
	width: 100%;
	height:100%;
	
	/* background-color:rgb(26, 95, 180); background-color: #06529B;*/
	background-color: none;
	background-image: url("");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
}



body { 
	padding:0;
	margin:0;
	font-size: 20px;
	background:#fff;
	font-family: 'ubuntu-regular', sans-serif;
	overflow-x:hidden;

}	
/* 	font-family: 'oswald-light', sans-serif; */	
	
/*}*/

body.startPage { height:100vh;  } /* has to change */
body.overflowYHide { overflow-y:hidden; }

.customBgColor { background:#04054f; } /* new #1f487a -- Old:#002e5a  */
/* body.customBgColor.userSection { background:linear-gradient(100deg, #1B1549, #448ccb); } */


a { color:#fff; }
a.externalLinkGrey { 
  line-height: 1.5em;
  display: inline-block;
  color: #999;
  word-break: break-all; 
}

a.externalLinkGrey:before {
  font-family: 'bootstrap-icons';
  content: '\F142';
  color: #a6e22e;
  position: relative;
  margin: 0 5px 0 0;
}

/* t3bBtn transColorWhite  */
a:hover { color: #a6e22e;}
a.t3bBtn.slide-next { 
position: relative;
transition: all 0.4s ease;
display: inline-block;
padding: 0 1em 0 2.0em;
font-size: 0.8em;
margin: 0 0.2em;
border-radius:2em;
top:1em;

}
a.t3bBtn.slide-next:before { content: '\F231'; /* F234 */
  position: absolute;
  left: 0.5em;
  font-size: 1em;
  margin: 0;
  display: inline-block;
  font-family: 'bootstrap-icons';
  top: 0.05em;
}


a.t3bBtn.slide-back { 
position: relative;
transition: all 0.4s ease;
display: inline-block;
padding: 0 1em 0 2.0em;
font-size: 0.8em;
margin: 0 0.2em;
border-radius:2em;
top:1em;
}

a.t3bBtn.slide-back:before { content: '\F230';
  position: absolute;
  left: 0.5em;
  font-size: 1em;
  margin: 0;
  display: inline-block;
  font-family: 'bootstrap-icons';
  top: 0.05em;
}

a.chatBtnClassContent {
	color: #fff;
	position: relative;
	background:transparent;
	transition: all 0.4s ease;
	display: inline-block;
	padding: 0 1em 0 1.0em;
	font-size: 0.8em;
	border-radius: 2em;
	top: 0;
	cursor: pointer;
	border: 1px solid aliceblue;
	margin: 0 0 0 0.5em;
}

a.chatBtnClassContent:hover { background:rgba(255,255,255,0.25) !important; }

	
a.transColorWhite { background:transparent; color: rgba(255,255,255,1) !important; border:0.01em solid #fff; color:#fff; }
a.transColorWhite:hover { background:rgba(255,255,255,0.25) !important; }

a.btnBGColorWhite { background:transparent; color: rgba(255,255,255,1) !important; border:0.01em solid #fff; color:#fff; }
a.btnBGColorWhite:hover { background:rgba(255,255,255,0.25) !important; }

div.scrollTop i { transition: all 0.2s ease; float:right; color: rgba(255, 255, 255, 0.3); font-size:1.7em; cursor:pointer; margin:0 auto; }
div.scrollTop i:hover { font-size:2.1em; color:#fff; } 

h1,h2,h3,h4 { color:#fff; }
#stdContentPage h2, #wikiTeasers h2 { border-bottom: 1px solid #fff;  padding-bottom: 0.3em; font-size:1.5em; }
#wikiTeasers h1 { border-bottom: 1px solid #fff;  padding-bottom: 0.3em; margin:0 0 1em 0; font-size:1.5em; }
body.wikiMainListing #wikiTeasers h1 { margin:0 0 0.2em 0; }

#tcciLeft p, #tcciLeft h1, #tcciLeft h3#tcciLeft h2 { color:#fff; }
p.displayBlockClear { display:block; clear:both; width:100%; height:1em;}
ul li { list-style-type: square; }
.hidden { display:none; }
.news strong { 	font-family: 'ubuntu-bold', sans-serif; font-weight:normal; }


code {   font-family: 'Courier New', Courier, monospace !important;
  background: #000;
  padding: 0;
  font-size: 0.75em;
  color: #fff;
  display: block;
  line-height: 1.5em;
}
pre { padding:0; margin:0; }
pre br { display:none; visibility: hidden; }

/* ############# Preloader ################## */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,1);
  z-index: 9999981;
  width:100vw;
  height:100vh;

}

.iframePreloader {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* background-color: rgba(255,255,255,1); */
	z-index: 9999981;
	width:100%;
	height:100%;	
}

/* animated ring ################# */
 @keyframes lds-rolling {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes lds-rolling {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.lds-rolling {
  position: relative;
}
.lds-rolling div,
.lds-rolling div:after {
  position: absolute;
  width: 6em;
  height: 6em;
  border: 0.5em solid #333;
  border-top-color: transparent;
  border-radius: 50%;
}

.lds-rolling div {
  -webkit-animation: lds-rolling 0.7s linear infinite;
  animation: lds-rolling 0.7s linear infinite;
	top: 45vh;
	left: 49%;
	margin: 0 auto 0 3em;
	text-align: center;
}

.lds-rolling div:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.lds-rolling {
	width: 100% !important;
	height: 100vh !important;
	margin: 0 auto;
	text-align: center;
  -webkit-transform: translate(-1em, -1em) scale(0.34) translate(1em, 1em);
  transform: translate(-1em, -1em) scale(0.34) translate(1em, 1em);
}

.t3bLogoPreloader { position:absolute; display:block; margin:0 auto; width:100%;  text-align: center; top:33vh; font-size:2em; color:#000; opacity:0; }
.t3bLogoPreloader div { display:inline-block; text-align:center; margin:0 auto; width:5em; height:auto; 
background:url("../Images/t3app_logo_black.svg") 0 0 no-repeat;
 background-size:contain; 
	animation-name: pulse_animation;
	animation-duration: 4000ms;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	margin: 0;
 }



@keyframes pulse_animation {
    0% { transform: scale(1); }
    30% { transform: scale(1); }
    40% { transform: scale(1.25); }
    50% { transform: scale(1); }
    60% { transform: scale(1); }
    70% { transform: scale(1.15); }
    80% { transform: scale(1); }
    100% { transform: scale(1); }
}

/* ###############################   standard icons / animations ##################################  */

#mainMenuBtn #mainSlideActionBtn {
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  margin: 0 auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#mainMenuBtn #mainSlideActionBtn span {
  display: block;
  position: absolute;
  height: 0.1em;
  width: 100%;
  background:rgb(61, 56, 70); /* #06529b */
  border-radius: 0em;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#mainMenuBtn #mainSlideActionBtn span:nth-child(1) {
  top: 0em;
}

#mainMenuBtn #mainSlideActionBtn span:nth-child(2) {
  top: 0.4em;
}

#mainMenuBtn #mainSlideActionBtn span:nth-child(3) {
  top: 0.8em;
}

#mainMenuBtn.open #mainSlideActionBtn span:nth-child(1) {
  top: 0.4em;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#mainMenuBtn.open #mainSlideActionBtn span:nth-child(2) {
  opacity: 0;
  left: -3em;
}

#mainMenuBtn.open #mainSlideActionBtn span:nth-child(3) {
  top: 0.4em;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}


#navActionsCnt { position: relative;  top: 1.8em;   }

header#mainPageHeader { transition: all 0.3s ease; position: fixed; z-index:6; top:0; left:0; width:100vw; height:auto; }
header#mainPageHeader.wikiHeader { position:relative; }
header#mainPageHeader.stdHeader { position:relative;  }
header#mainPageHeader.stdHeader aside#navActionButtons { right:1em; }
header#mainPageHeader aside#logo { position:relative; display: block;  float: none; left:2em; z-index: 2;  width: auto; margin:0 auto; text-align:center; max-width: 100%;  min-width: 4em;  height: auto;  background:transparent;  top: 1em;  padding: 0.4em 1.5em;}
header#mainPageHeader aside#logo svg { fill: #fff !important;  width: 100%;  max-width: 9em;  height: auto;  min-width: 180px;}

/* delete
header#mainPageHeader nav#pageNav { position:relative; top:0.7em; }
header#mainPageHeader nav#pageNav ul { position:relative; margin:0; padding:0; list-style: none; }
header#mainPageHeader nav#pageNav ul li { float:left; margin:0 4em 0 0; list-style: none;  }
header#mainPageHeader nav#pageNav ul li:last-child { margin-right:0; }
header#mainPageHeader nav#pageNav ul li a { color: #fff; text-decoration: none; font-size:1.0em; }
header#mainPageHeader nav#pageNav ul ul.pageSubMenu { position:absolute;  left:0; background:#333; padding:1em; top:1.3em; z-index: 9; visibility: hidden; }
header#mainPageHeader nav#pageNav ul li:hover ul.pageSubMenu { visibility: visible; } 
header#mainPageHeader nav#pageNav ul ul.pageSubMenu li a { color:#fff; display:inline; }
header#mainPageHeader nav#pageNav ul ul.pageSubMenu li ul.pageSubSubMenu { margin:0 0 0 0.6em;  list-style: square; }
header#mainPageHeader nav#pageNav ul ul.pageSubMenu li ul.pageSubSubMenu li a  { font-size: 0.9em;  }
*/

/* ##########################  Main search form */
div#searchBoxDetail { display: block; position: relative; width: 100%;  max-width: 40em; margin:0 auto 3em auto; }
div#searchBoxDetail input#ke_search_sword { font-family: 'ubuntu-light'; color:#000; font-weight:normal; font-size:1em; outline: none; margin:0 0.7em 0 0; padding:0 0.5em; line-height:1.8em; border:0.01em solid #fff; border-radius:1em; background:rgba(255,255,255,1); width:100%; min-width:20em; }
div#searchBoxDetail div.kesearchbox div.searchSubmitBtn { position: absolute;  z-index: 9999999;  right: 0;  top: 0.1em;  float: right;  right: 1em; }
div#searchBoxDetail div.kesearchbox button.searchSubmitBtn { background: no-repeat;  border: none;  outline: none;  position: absolute;  right: 1.2em;  top: 0em; }
div#searchBoxDetail div.kesearchbox button.searchSubmitBtn i {  color: rgb(61, 56, 70);  font-size:1.2em; }
div#searchBoxDetail div.kesearchbox button.searchSubmitBtn:hover i { color:#06529B; }



/* ##########################   subNavigation top header ( lib.subNaviTop.typoscript ) */

aside#subNaviTop { position:absolute; right:1.5em; float:right; text-align:right; top:0.2em; width:auto; height:2em; display:none; }
aside#subNaviTop ul { float:right; }
aside#subNaviTop ul li { float:left; list-style:none;  }
aside#subNaviTop a, aside#subNaviTop span { display:inline-block; margin:0 0em 0 1.2em; cursor:pointer; }
aside#subNaviTop svg { width:0.6em; color:#fff;  }
aside#subNaviTop em { transition: all 0.3s ease; font-size:0.6em; text-decoration: none; font-style: normal; color:#dfdbdb; display:inline-block; border-bottom:2px solid transparent; }
aside#subNaviTop em:hover { border-bottom:2px solid #fff; } 



/*
aside#subNaviTop li.homeSectionBtn a {
display: inline-flex;
align-items: center; 
justify-content: center;
border: none;
color: #fff;
font-weight: 900;
border-radius: 1em;
padding: 0 0.5em;
line-height: 1em;
background: rgba(0, 0, 0, 0.2); }
*/
/*
aside#subNaviTop li.homeSectionBtn a em { padding-left:0.5em; }
*/

aside#subNaviTop li.logoutBtnModel div.openLoginModal { 
	transition: all 0.5s ease;
	display: inline-flex;
	align-items: center; 
	justify-content: center;
	border: none;
	color: #fff;
	font-weight: 900;
	border-radius: 1em;
	padding: 0.2em 0.5em;
	background: rgb(99, 1, 213); 
	line-height: 1em;
	margin:0.4em 0 0 1.2em;
	cursor:pointer; 
}

aside#subNaviTop li.logoutBtnModel div.openLoginModal:hover { 
	scale:1.3;
}

aside#subNaviTop li.logoutBtnModel div.openLoginModal svg { width:1em; margin:0 0.3em 0 0;} 

aside#subNaviTop li.logoutBtnModel em:hover { border-bottom:0 !important; } 
aside#subNaviTop li.logoutBtnModel em { border-bottom:none !important; }

/* ##########################   Main action buttons top header ( lib.navActionButtons.typoscript ) */

aside#navActionButtons {position:relative; top:1.5em; left:2.5em; z-index:99; display:block; float:left; color:#fff; cursor:pointer !important; width:auto; }
aside#navActionButtonsa #searchBtn { display:none; transition: all 0.3s ease; }
aside#navActionButtons div#t3bSearch {  position:relative; top:1em; transition: all 0.3s ease; display:none; float:left; width:auto; max-width:14em; overflow: hidden; text-align: left; }
body.searchResults aside#navActionButtons div#t3bSearch { display:none !important; }


aside#navActionButtons div#t3bSearch input#ke_search_sword { font-family: 'ubuntu-light'; color:#000; font-weight:normal; font-size:1em; outline: none; margin:0 0.7em 0 0; padding:0 0.5em; line-height:1.8em; border:0.01em solid #fff; border-radius:1em; background:rgba(255,255,255,1); width:auto; min-width:8em; }
aside#navActionButtons div#t3bSearch input#ke_search_sword:focus {background: rgba(0, 0, 0,0.5); color:#fff; }
aside#navActionButtons div.kesearchbox { position:relative; }
aside#navActionButtons div.kesearchbox div.searchSubmitBtn { position: absolute;  z-index: 9999999;  right: 0;  top: 0.1em;  float: right;  right: 1em; }
aside#navActionButtons div.kesearchbox button.searchSubmitBtn { background: no-repeat;  border: none;  outline: none;  position: absolute;  right: 1.2em;  top: 0em; }
aside#navActionButtons div.kesearchbox button.searchSubmitBtn i {  color: rgb(61, 56, 70);  font-size:1.2em; }
aside#navActionButtons div.kesearchbox button.searchSubmitBtn:hover i { color:#06529B; }



aside#navActionButtons a.navActionBtn {
	text-decoration: none !important;
	transition: all 0.3s ease;
	width: 2.5em;
	height: 2.5em;
	display: flex;
	align-items: center;
	justify-content: center; 
	border-radius: 100%;
	border: 0.1em solid rgb(255, 255, 255);
	background: rgb(255, 255, 255);
	color: #000;
	margin: 0.7em 0.7em 0 0.7em;
	float: left;
}

/*
aside#navActionButtons a.navActionBtn.active {  
	
	-webkit-box-shadow:inset 0px 0px 0px 1px #f00;
	-moz-box-shadow:inset 0px 0px 0px 1px #f00;
	box-shadow:inset 0px 0px 0px 1px #f00;
	}
*/



aside#navActionButtons a.navActionBtn svg {
	width: 1.5em;
	height: auto;
	position:absolute;
	color:#FF8700;
	transition: color 0.3s ease;
}

aside#navActionButtons a.navActionBtn svg.svgTYPO3Icon { width:1.2em; }
aside#navActionButtons a.navActionBtn svg.svgUxIcon { width:1.7em; color:blue; }

aside#navActionButtons a.navActionBtn i { display:inline-block; margin-top: 0.2em;  font-size: 1.2em; color:rgb(61, 56, 70); }
aside#navActionButtons a.navActionBtn em { position: absolute;	transition: all 0.3s ease; bottom: -2em;color:#fff; font-size:0.6em; text-decoration: none; font-style: normal; border-bottom:2px solid transparent; }

body.userSectionList aside#subNaviTop li.homeSectionBtn em { border-bottom:2px solid #fff !important; }
body.userSectionDetail aside#subNaviTop li.homeSectionBtn em { border-bottom:2px solid #fff !important; }
body.wikiPage aside#subNaviTop li.wikiSection em { border-bottom:2px solid #fff !important; } 
body.contactSection aside#subNaviTop li.contactSection em { border-bottom:2px solid #fff !important; } 

body.vivlayr aside#navActionButtons a.navActionBtn.vivlayrSection em { border-bottom:2px solid #fff !important;}
body.typo3dev aside#navActionButtons a.navActionBtn.typo3Section em { border-bottom:2px solid #fff !important; }
body.uxDesign aside#navActionButtons a.navActionBtn.uxSection em { border-bottom:2px solid #fff !important;}


aside#navActionButtons a.navActionBtn:hover em,
aside#navActionButtons a.navActionBtn.active em { border-bottom:2px solid #fff; }

aside#navActionButtons a.navActionBtn:hover i, aside#navActionButtons a.navActionBtn:hover span { color: #fff !important; }
aside#navActionButtons a.navActionBtnLite {background:none; }
aside#navActionButtons .navBtnAnime { position:relative; right:-50em; }


body.wikiPage #wikiBtn.navActionBtn { background: rgba(0, 0, 0,0.5); }
body.wikiPage #wikiBtn.navActionBtn i { color: #fff; }


aside#navActionButtons a#userBtnActive.navActionBtn { background:#a6e22e !important; color:#fff; }
aside#navActionButtons a#userBtnActive.navActionBtn i { color:#000; }
aside#navActionButtons a#userBtnActive.navActionBtn em {  display: block;  top: 0.6em;  position: relative;}
aside#navActionButtons a#userBtnActive.navActionBtn em::first-letter { text-transform: uppercase !important; }


div#wikiLeftColButton,
div#wikiRightColButton {
	top: 40vh;
	display: inline-block;
	z-index: 2;
	background-color: rgba(255, 255, 255, 0.2);
	color: #000;
	padding: 0.1em 0.4em;
	position: fixed !important;
	width: 2.1em;
	height: 10em;
	cursor:pointer;
	
}




div#wikiLeftColButton:hover,
div#wikiRightColButton:hover { 	background-color: rgba(255, 255, 255, 0.4); }

div#wikiLeftColButton div,
div#wikiRightColButton div {position: relative;  background-repeat: no-repeat;  background-size: contain;  background-position: center center;  width: 100%;  height: 100%;  display: block; }

div#wikiRightColButton { right:0; }
div#wikiRightColButton div { background-image:url("../Images/wiki-tab-categories.svg"); }

div#wikiLeftColButton { left:0; }
div#wikiLeftColButton div { background-image:url("../Images/wiki-tab-related.svg"); }

body.userSection div#wikiRightColButton { display:none !important; }



div#wikiLeftCol i, div#wikiRightCol i { margin:0 0.5em 0 0; }
div#wikiLeftCol { left:0; display:none; }
div#wikiRightCol { right:0; }

aside#navActionButtons #mainMenuBtn em { position:relative; }
aside#navActionButtons a#progressBtnAnim { display:block; position:relative; float:right; margin:0.7em 0.7em 0 0.7em}
aside#navActionButtons a#mainMenuBtn.navActionBtn em {color: #fff;  font-size: 0.6em;  text-decoration: none;  font-style: normal;  margin: 0;  position: absolute;  bottom: -2em; }


/* hide buttons in mobile devices */
aside#navActionButtons a#searchBtn,
aside#navActionButtons a#chatBtn,
aside#navActionButtons a#userBtn,
aside#navActionButtons a#wikiBtn { display:none; }
  
body.userSectionError aside#navActionButtons a#userBtn { display:none !important; }  
  
/* ############ breadcrumb */
aside#breadcrumb { position:relative; display:block; margin:0 2.5em; }
aside#breadcrumb ul li { color:#fff;}  
aside#breadcrumb ul li a { text-decoration: underline; }
  
/* progrees Btn circle animation / slide menu open/ close */
.innerTest1 { position:absolute; z-index:9999; color:#000; font-size:1.2em; }
div#menuIconPool { position: absolute;  top: 0.6em;  left: 1em;  color: #06529B;  font-size: 1.2em;  z-index: 2;  
display:none;  }
div#menuIconPool i.bi-search { font-size: 1.4em; color:#06529B; }
div#mainSlideActionBtn { position: absolute; top: 0.7em; z-index: 99;    color: #fff;  cursor: pointer !important;  }
div#mainSlideActionBtn span { color:#fff; display:block; text-transform: uppercase;  }
div#mainSlideActionBtn i { color:#fff; display:block;font-size:3em; }



     /* circle animation loading #################################   */
     
	.progressCircleAnim1 {
		transition: all 0.3s ease;
		position:absolute;
		width:2.7em;
		height:2.7em;
		border-radius: 50%;
		background: linear-gradient(45deg,transparent,transparent,transparent 40%, rgb(7, 62, 204));
/*		background: linear-gradient(45deg,transparent,transparent,transparent 40%, #e5f403);	*/	
		animation: progressCircleAnim1 2s linear infinite;
		top: -0.2em;  left: -0.2em;
	}
	
/*	
	.progressCircleAnim1:hover {
		width:3.2em;
		height:3.2em;
	}			
*/
	@keyframes progressCircleAnim1 {
		0% {
			transform:rotate(0deg);
			/*filter: hue-rotate(0deg); */
			
			
		}
		
		100% {
			transform: rotate(360deg);
			/*filter: hue-rotate(360deg); */
		}
	 }
	
	
	.progressCircleAnim1::before {
		content:'';
		position: absolute;
		top:0.2em;
		left:0.2em;
		right:0.2em;
		bottom:0.2em;
		background:#fff;
		border-radius: 50%;
		z-index: 1000;
				
		
	}

	#progressBtnAnim:hover .progressCircleAnim1::before {
		color:#fff;
		top:0.2em;
		left:0.2em;
		right:0.2em;
		bottom:0.2em;
	}	
	
	.progressCircleAnim1::after {
		content:'';
		position: absolute;
		top:0px;
		left:0px;
		right:0px;
		bottom:0px;
		background:#fff;
		border-radius: 50%;
		z-index: 1;
		background: linear-gradient(45deg,transparent,transparent,transparent 40%, rgba(255, 255, 255,0.7) );
/*		background: linear-gradient(45deg,transparent,transparent,transparent 40%, #e5f403);	 */	
		filter:blur(30px);
				
	}

/* circle animation loading #################################    END  */

/* DCE layouts */
.dce.swiper-slide .bgWrapper {
	position: relative;
	width: 100%;
	height: 100vh;
	/* background-size: auto !important; 	background-size: cover !important; */
	padding: 4em 2em;
	background-position: center;
}

.dce.swiper-slide .bgWrapperVideo {
	background-color: #fff;
	position: relative;
	width: 100%;
	height: 100vh;
	background-size: cover !important;
	padding: 0;
}

.mobile-fallback {
	position: absolute;
	width: auto;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
}

/* ###########################   swiper pagination round old 
      
      .swiper-pagination {      	top: 1em !important;      }
      .dce.swiper-slide h1 {     	font-size: 3.2em;      }

      .swiper-pagination-bullet-active {
      	width: 1em;
      	height: 1em;
      }

      .swiper-pagination-bullet {
      	width: 1em;
      	height: 1em;
      	background: #fff;
      }

*/
aside#swiperProgressInfos {
	top:6.5em !important;
	left:0em;
	width: auto;
	position: absolute;
	z-index:7 !important;
	display:none;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
	top:0.0em !important;
	bottom:inherit;
	left:1.5em;
	width: auto;
	position: relative;
	z-index:7 !important;
	text-align:left;
}

.swiper-pagination {
	position: absolute;
	text-align: left;
	transition: .3s opacity;
	transform: translate3d(0,0,0);
	z-index: 10;
}

.swiper-pagination-bullet {
	width: 3em;
	height: 0.2em;
	border-radius: 0;
	position: relative;
	overflow: hidden;
	background:#fff;
	/* transition: background 200ms; */
	
	&::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		/* transition: opacity 200ms; */
	}
}



@keyframes slide-progress {
	0% {
		transform: translateX(-100%);
		/* width: 0; */
	}

	100% {
		transform: translateX(0);
		/* width: 100%; */
	}
}



/*
.swiper-pagination-bullet-active {
		&::before {
		background-color: red;
		animation: slide-progress 30s cubic-bezier(.3,0,.3,1) forwards;
		
		.swiper-paused & {
			animation-play-state: paused;
		}
	}
}
*/



.swiper-pagination .slideRemainingCircle { width:2em; height:1em; background:#ff9900;  float:right; text-align:right; }

.swiper-pagination-bullet-active {
		&::before {
		/* old green
		background-color: #a6e22e;
		dark pink 
		background-color: #8102a4;
		lite pink
		background-color:#e004ff;	
		*/	
		background-color: #CC1FA0;
		animation: slide-progress 32s cubic-bezier(.3,0,.3,1) forwards;
	}
}



.swiper-button-next,
.swiper-button-prev {
	position: absolute;
	top: 47vh;
	width: 2em;
	height: 3em;
	margin-top: 0;
	z-index: 3;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	transition: all 0.2s ease;
	color: #fff;
}

body.t3pages .swiper-button-next, body.t3pages .swiper-button-prev, body.t3pages #swiperProgressInfos  { display:none !important; }

.swiper-button-prev { left:0; float:left; }
.swiper-button-prev i.bi { transition: all 0.3s ease; font-size:2em; position:absolute; left:0; }
.swiper-button-prev:hover i.bi { color:rgba(255,255,255,0.4); } 
.swiper-button-prev:hover i.bi:hover { color:rgba(255,255,255,1); font-size:3.5em; } 

.swiper-button-next { right:0; float:right; }
.swiper-button-next i.bi { transition: all 0.3s ease; font-size:2em; position:absolute; right:0; }
.swiper-button-next:hover i.bi { color:rgba(255,255,255,0.4); } 
.swiper-button-next:hover i.bi:hover { color:rgba(255,255,255,1); font-size:3.5em; } 

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity:.35;
  cursor:auto;
  pointer-events:none
}
.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
  opacity:0;
  cursor:auto;
  pointer-events:none
}
.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
  display:none!important
}
.swiper-button-next svg,
.swiper-button-prev svg {
  width:100%;
  height:100%;
  object-fit:contain;
  transform-origin:center
}
.swiper-rtl .swiper-button-next svg,
.swiper-rtl .swiper-button-prev svg {
  transform:rotate(180deg)
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left:0;
  right:auto
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right:0;
  left:auto
}
.swiper-button-lock {
  display:none
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-family:swiper-icons;
  font-size:var(--swiper-navigation-size);
  text-transform:none!important;
  letter-spacing:0;
  font-variant:initial;
  line-height:1
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content:''
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right:0;
  left:auto
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content:''
}

body.stdPage .swiper-button-next,
body.stdPage .swiper-button-prev,
body.stdPage #swiperProgressInfos { display:none !important; }

.autoplay-progress {
position: relative;
  z-index: 10;
  width: 2.5em;
  height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
color: rgba(255,255,255,0.2);
  float: right;
  left: 2em;
  top: -0.25em;
  cursor:pointer;
}

.autoplay-progress svg:hover {
fill:rgba(255,255,255,0.2);
	}
	
.autoplay-progress svg {
  --progress: 0;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 10;
  width: 100%;
  height: 100%;
  stroke-width: 0.2em;
  stroke: rgba(255,255,255,0.2);
  fill: none;
  stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
  stroke-dasharray: 125.6;
  transform: rotate(-90deg);
}

.autoplay-progress span {
font-size:0.8em;
font-weight:normal;
color:#fff;	
}




      .dce h2 {
      	font-size: 2em;
      }

      .dce h3 {
      	font-size: 2em;
      	font-weight: 900;
      }

      .dce h4 {
      	font-size: 1.8em;
      	font-weight: 200;
      }

      .dce p,
      .dce .producttext span {
      	font-size: 2em;
      }
      
      
 /* progress test 1     */
   /*
 .autoplay-progress {
      position: absolute;
      right: 5em;
      bottom: 4em;
      z-index: 10000;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: #fff;
    }

    .autoplay-progress svg {
      --progress: 0;
      position: absolute;
      left: 0;
      top: 0px;
      z-index: 10;
      width: 100%;
      height: 100%;
      stroke-width: 3px;
           fill: #fff;
      stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
      stroke-dasharray: 125.6;
      transform: rotate(-90deg);
    }
*/
 /* progress test 1    END */
     
     
     
     
    

	/* Bezier left blue */
       .dce.swiper-slide.designArcLeft div.arcLeft { position:absolute; top:0; left:0; height:100vh; width: 40%;    min-width: 800px;    z-index: 2;    background-size: cover;  }
       .dce.swiper-slide.designArcLeft div.arcLeft .rteText { text-align:left !important; position:absolute; width:100%; max-width:70%; z-index:3; }
       .dce.swiper-slide.designArcLeft div.arcLeft svg {     height: 100vh;    position: relative;    left: 0;    float: left; }


	/* Bezier right svg dynamic color curve */
       .dce.swiper-slide.designArcRight div.arcRightBlue { position:absolute; top:0; right:0; height:100vh; background:url("../Images/arc-right-greenborder-blue-2000x2635.png") 0 0 no-repeat; width: 60%;    min-width: 800px;    z-index: 2;    background-size: cover;  }
       .dce.swiper-slide.designArcRight div.arcRightBlue .rteText { text-align:right !important; position:absolute; width:100%; max-width:60%; z-index:3; }

        /* Bezier right inverse video / image */       
       .dce.swiper-slide.designArcRight div.curveRight {    position: absolute;    top: 0;    right: 0;    width: 60vw;    height: 100vh;    display: block;    float: right; }
       .dce.swiper-slide.designArcRight div.curveRight svg {     height: 100vh;    position: relative;    right: 0;    float: right; }
       .dce.swiper-slide.designArcRight div.curveRight .rteText { text-align:right !important; position:absolute; width:100%; max-width:60%; z-index:3; }


        /* Bezier right round video / image */       
       .dce.swiper-slide.curveRightRound div.curveRight {    position: absolute;    top: 0;    right: 0;    width: 60vw;    height: 100vh;    display: block;    float: right; }
       .dce.swiper-slide.curveRightRound div.curveRight svg {     height: 100vh;    position: relative;    right: 0;    float: right; }
       .dce.swiper-slide.curveRightRound div.curveRight .rteText { text-align: right !important;  position: absolute;  width: 100%;  max-width: 90%;  z-index: 3;  right: 2em; }


        /* Bezier right inverse video / image */       
       .dce.swiper-slide.curveRightRoundInverse div.curveRight {    position: absolute;    top: 0;    right: 0;    width: 60vw;    height: 100vh;    display: block;    float: right; }
       .dce.swiper-slide.curveRightRoundInverse div.curveRight svg {     height: 100vh;    position: relative;    right: 0;    float: right; }
       .dce.swiper-slide.curveRightRoundInverse div.curveRight .rteText { text-align:right !important; position:absolute; width:100%; max-width:60%;  z-index:3; }


        /* Bezier left top round video / image */       
       .dce.swiper-slide.curveLeftRound div.curveLeft {    position: absolute;    top: 0;    left: 0;    width: 60vw;    height: 100vh;    display: block;    float: left; }
       .dce.swiper-slide.curveLeftRound div.curveLeft svg {     height: 100vh;    position: relative;    left: 0;    float: left; }
       .dce.swiper-slide.curveLeftRound div.curveLeft .rteText { text-align:left !important; position:absolute; width:100%; max-width:60%; top:15vh; left:1.5em; z-index:3; }


        /* Bezier dynamic left right - video e.g. ... */       
       .dce.swiper-slide.bezierDynamic div.curveLeft {    position: absolute;    top: 0;    left: 0;    width: auto;   height: 100vh;    display: block;    float: left; }
       .dce.swiper-slide.bezierDynamic div.curveLeft .svgBg svg { height: 100vh;    position: relative;    left: 0;    float: left; }
       .dce.swiper-slide.bezierDynamic div.curveLeft .svgEnd svg { height: 100vh;    position: relative;    left: 0;    float: left; }
       .dce.swiper-slide.bezierDynamic div.curveLeft .rteText {  position: relative; text-align:left !important;  top:10.5em; max-width:100vw; padding:0 2.0em 0em 0.5em; z-index:3; left:2em; }


        /* Bezier dynamic right right - video e.g. ... */       
       .dce.swiper-slide.bezierDynamic div.curveRight {    position: absolute;    top: 0;    right: 0;    width: auto;   height: 100vh;    display: block;    float: left; }
       .dce.swiper-slide.bezierDynamic div.curveRight .svgStart svg {     height: 100vh;    position: relative;    left: 0;    float: left; }
       .dce.swiper-slide.bezierDynamic div.curveRight .svgBg svg { position: relative;    left: 0;    float: left;  height: 100vh;  }
       .dce.swiper-slide.bezierDynamic div.curveRight .rteText {  position: relative; text-align:left !important;  top:10em; padding:0 0em 0em 0.5em; z-index:3; right:0em; left:1.5em; max-width:95%; }



	/* main bg before / after svg div */
     .dce.swiper-slide div.svgBg { position:relative; display:block; float:left; height:100vh;   width:100vw; padding:0 0 0 0; }
     .dce.swiper-slide div.svgBg.rightSvgBg .rteText { text-align:left !important; }
     .dce.swiper-slide div.svgEnd { display:none; float:left;  }
     .dce.swiper-slide div.svgStart { display:none; float:left;  }

       .dce.swiper-slide .rteText h1,  
       .dce.swiper-slide .rteText h2  {  font-family: 'ubuntu-regular', sans-serif; font-weight:normal;  font-size:2.0em; }
       .dce.swiper-slide .rteText h3,
       .dce.swiper-slide .rteText h4,
       .dce.swiper-slide .rteText h5 {  font-weight:normal;  font-size:2em; }
       .dce.swiper-slide .rteText span, .dce.swiper-slide .rteText ul li,
       .dce.swiper-slide .rteText p { font-family: 'ubuntu-light', sans-serif; font-weight:normal; font-size:0.9em; } 
       .dce.swiper-slide .rteText ul { padding-left:1em; }       


	.dce.swiper-slide div.svgBg .mobileFullBgColor { position:absolute; top:0; left:0; width:100vw; height:100vh; }
	.dce.swiper-slide.bezierDynamic div.curveRight .mobileFullBgColor { position:absolute; top:0; right:0; width:100vw; height:100vh; }

	/* slide logo teasers */
	.dce.swiper-slide .logoTeasers .logoTeaserCnt { position:relative; border-radius:1.5em; display:block; float: right;  margin: 0em 0em 2em 2em;width:15em; height: 7em; background:rgba(255,255,255,1); padding:0.8em; color:#333; }
	.dce.swiper-slide .logoTeasers .logoTeaserCnt .logoTransformation {	position: absolute;  left: 0;  top: 0;  width: 100%;  max-width: 2.5em;  height: auto;  background:rgba(255,255,255,1);  padding:0.6em;  border-radius:100%;  z-index:3; }
	.dce.swiper-slide .logoTeasers .logoTeaserCnt h4 { font-size:1.2em; color: #000; }      
	.dce.swiper-slide .logoTeasers .logoTeaserCnt .logoTransformation img {width: 100%;  max-width: 2.5em;  height: auto;  position: relative;  display: block;  min-width: 1.6em; }


	.dce.swiper-slide div.teasersRight { position: relative; right:inherit; top:inherit; margin:4em 2em; }
	.dce.swiper-slide div.teasersRight.tileBox { text-align:center;  }
	.dce.swiper-slide div.teasersRight.tileBox img { width: auto;  max-width: 50vw;  height: auto;  max-height: 70vh;  float: none;  text-align: center; }
	
	.dce.swiper-slide div.teasersRight div.iconBox { position: relative; height:4em; text-align: center; vertical-align: middle; display: table-cell; padding:0 1em; margin:auto; border:0.1em solid rgba(255,255,255,0.8); background:rgba(255, 255, 255,0.5); }
	.dce.swiper-slide div.teasersRight div.iconBox img { width:100%; max-width:100%; height:auto; max-height:3em; text-align:center; margin: 0; padding:0 0.5em; position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%); }

	.dce.swiper-slide div.teasersLeft { position: relative; left:inherit; top:inherit; margin:4em 2em; display:none; }
	.dce.swiper-slide div.teasersLeft div.iconBox { position: relative; height:4em; text-align: center; vertical-align: middle; display: table-cell; padding:0 1em; margin:auto; border:0.1em solid rgba(255,255,255,0.8); background:rgba(255, 255, 255,0.5); }
	.dce.swiper-slide div.teasersLeft div.iconBox img { width:100%; max-width:100%; height:auto; max-height:3em; text-align:center; margin: 0; padding:0 0.5em; position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%); }

	.dce.swiper-slide div.teasersRight .teaserIconHeader { text-align:right; }
	.dce.swiper-slide div.teasersRight .teaserIconHeader h2 { font-family: 'ubuntu-bold', sans-serif; font-size:2.5em; }
	.dce.swiper-slide div.teasersRight .teaserIconHeader h3 { font-family: 'ubuntu-bold', sans-serif; font-size:2em; }	
	.dce.swiper-slide div.teasersRight .teaserIconHeader p { font-family: 'ubuntu-regular', sans-serif; font-size:0.8em; }

	.dce.swiper-slide .rteText blockquote { font-size:0.75em; text-align: justify; padding:0 1.5em 1em 0; }
	.dce.swiper-slide .rteText.mCustomScrollbar { height:auto; max-height:60vh;  overflow-y: scroll; }
	.dce.swiper-slide .rteText blockquote b, .dce.swiper-slide .rteText blockquote strong { font-family: 'ubuntu-bold', sans-serif; font-weight:normal;  }
	.dce.swiper-slide .rteText blockquote h3 { text-align:left; }
	.dce.swiper-slide .rteText.content { height:60vh; overflow:auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }





/*
.swiper-slide > .swiper-slide-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent no-repeat 50% 50% /cover;
}
*/






/* anime.js & animateCss */
/* delete 
#mainMenu, #mainMenu div { border:1px solid #ff3300; }
#mainMenu { position: fixed; height:100vh; display: block; top:0; left: 0; background:#939393;  transition: all 0.7s ease; z-index: 7; }#mainMenu div#menuSections, #mainMenu div#whatsNew { height:100vh; }
#mainMenu div#menuSections { position:absolute;top:0; left:0; width:100vw; max-width:50vw; background:#000 }
#mainMenu div#whatsNew { position:absolute;top:0; right:0;  width:100vw; max-width:50vw; background:#fff; }
#mainMenu #pageNav { background:#ff3300; height:100vh; max-height:100vh; overflow-x:hidden; overflow-y: scroll; }
*/ 


#mainSlideMenu {	position: absolute; z-index: 4;top: 0; left: 0;width:auto; height: auto; min-height:100vh; font-family: 'ubuntu-light', sans-serif; }
#mainSlideMenu #actionMenuLeft {	
	position:relative;	
	display:block;
	float: left;	
	width:0;
	height: 100vh;
	overflow-y: scroll;
	/*)background: rgba(0, 0, 0, 0.9) !important; */
	background: linear-gradient(100deg, #04054f, #000); /* #04054f  #1B1549, #448ccb */
	height: 100vh;	
	color:#fff !important;
	margin:0;
}

#mainSlideMenu #actionMenuLeft .frame-vivlayr-icon header:before  { content:""; position:absolute; width:2em; height:2em; background:url("../Icons/vivlayr.svg") 0 0 no-repeat; background-size:contain; margin:-0.2em 0 0 0; }
#mainSlideMenu #actionMenuLeft .frame-ux-icon header:before  { content:""; position:absolute; width:2.5em; height:2.5em; background:url("../Icons/ux-ui.svg") 0 0 no-repeat; background-size:contain; margin:-0.4em 0 0 -0.4em }
#mainSlideMenu #actionMenuLeft .frame-typo3-icon header:before  { content:""; position:absolute; width:1.9em; height:1.9em; background:url("../Icons/typo3-orange.svg") 0 0 no-repeat; background-size:contain; margin:-0.4em 0 0 0em }
#mainSlideMenu #actionMenuLeft .frame-info-interact header:before  { content:""; position:absolute; width:2.3em; height:2.3em; background:url("../Icons/info-icon.svg") 0 0 no-repeat; background-size:contain; margin:-0.4em 0 0 -0.2em }
#mainSlideMenu #actionMenuLeft .frame-latest-article header:before  { content:""; position:absolute; width:2.3em; height:2.3em; background:url("../Icons/code-icon.svg") 0 0 no-repeat; background-size:contain; margin:-0.4em 0 0 -0.2em }
#mainSlideMenu #actionMenuLeft .frame-latest-article header:after  { content: "15.09.2025 - Der Wiki wird umgebaut. Bis auf weiteres werden keine neuen Beiträge eingestellt.";  position: absolute;  margin: 0 1em 0 0;  clear: both;  color: #fff;  top: 5em;  font-size: 0.6em;  color: #fff;  background: #3f3f42;  padding: 0.5em 1em;  font-weight: bold;  font-family: Ubuntu-regular;  width: 95%;
display:none !important;  }
#mainSlideMenu #actionMenuLeft .frame-latest-article header { margin-bottom:1em; } 


#mainSlideMenu #actionMenuLeft .trianglesTL {
  position: absolute;
  background: url("../Images/triangle-top-left.png") no-repeat;
    background-size: auto;
  background-size: contain;
  top:0;
  left: 0;
  height: 500px;
  width: 100%;
  opacity: 0.1;
}

#mainSlideMenu #actionMenuLeft .trianglesBR {
  position: absolute;
  background: url("../Images/triangle-bottom-right.png") no-repeat;
    background-size: auto;
  background-size: contain;
  bottom:0;
  right: 0;
  height: 840px;
  width: 50vw;
  opacity: 0.3;
  background-position:bottom right;
  
}

#mainSlideMenu #actionMenuRight {	
	position: relative;	
	display:block;
	float: left;	
	width: 0;
	height: 100vh;
	background: rgba(0, 58, 119, 0.9) !important;
	height: 100vh;	
	overflow: hidden;
	color:#fff !important;
	margin-bottom:6em;
}


#mainSlideMenu .overlayMenuSections .frame ul, #mainSlideMenu .overlayMenuPages .frame ul { margin: 1em 0 1em 0;  padding: 0 0 1.5em 0em; }
#mainSlideMenu .overlayMenuSections .frame ul li, #mainSlideMenu .overlayMenuPages .frame ul li  { list-style-type: none; margin:0 0 0.5em 0; }
#mainSlideMenu #pageNav { padding:8em 2em 2em 2em; }

#mainSlideMenu header { border-bottom:1px solid #fff; }
#mainSlideMenu h3 { font-size:1.5em; color:#fff; text-decoration: none; display:block; margin-left:1.7em; }
#mainSlideMenu li { display:block; transition: all 0.3s ease; cursor: pointer; font-size:0.9em; }
#mainSlideMenu li:hover { background:rgba(255, 255, 255,0.1); padding-left:0.5em; }
#mainSlideMenu .arrowAnimLink li:before {font-family: bootstrap-icons !important;  font-style: normal;  font-weight: 400 !important; content:'\F134'; font-size:1em; position:relative; width:1em; height:1em; margin: 0 0.1em 0 0;
  top: 0;display:inline-block; color:#fff; }

#mainSlideMenu li a { font-size:1.1em; color:#fff; text-decoration:none !important; }
#mainSlideMenu li span { font-size:1.1em; }
#mainSlideMenu li a:before,
#mainSlideMenu li span:before  { font-family: bootstrap-icons !important;  font-style: normal;  font-weight: 400 !important; font-size:1em; position:relative; width:1em; height:1em; margin: 0 0.3em 0 0;  top: 0.2em;display:inline-block; color:#fff;  }

#mainSlideMenu li a.icoWiki:before { content:'\F2C7'; }
#mainSlideMenu li a.icoSearch:before { content:'\F52A'; }
#mainSlideMenu li span.icoLogin:before { content:'\F4D7'; }
#mainSlideMenu li span.icoChat:before { content:'\F25B'; }
#mainSlideMenu li a.icoContact:before { content:'\F4DB'; }
#mainSlideMenu li a.arrowAnimLink:before { content:'\F134'; }

#mainSlideMenu .menuTeaserBox { background: rgba(255,255,255,0.7); } 
#mainSlideMenu .menuTeaserBox div.frame { padding:0.7em; }
#mainSlideMenu .menuTeaserBox h2 { font-size:1.2em; color:#000; text-decoration: none; display:block; border-bottom:0.01em solid #000;}
#mainSlideMenu .menuTeaserBox p { font-size:0.7em; color:#000; }
#mainSlideMenu .menuTeaserBox figure.image img { width:100%; max-width:2em; height:auto; }


/* Latest news in #mainSlideMenu  */
#mainSlideMenu .article.menuNewsArticle .menuNewsArticleInner { transition: all 0.3s ease; padding:0.8em; background:#030443; cursor:pointer; border:1px solid transparent; }
#mainSlideMenu .article.menuNewsArticle .menuNewsArticleInner:hover {  background:rgb(2, 2, 34); border:1px solid #fff;  } /* background:rgba(255, 255, 255,0.1); */
#mainSlideMenu .article.menuNewsArticle .header {  display: block;  margin: 0 0 0.5em 0;  height: 3em;  overflow: hidden; border-bottom:0.01em solid #fff;  position: relative; }
#mainSlideMenu .article.menuNewsArticle .header h3 { border-bottom:none; font-size:0.8em; }
#mainSlideMenu .article.menuNewsArticle .teaser-text { height:auto; }
#mainSlideMenu .article.menuNewsArticle  span.news-list-tags {  color: #fff; }
#mainSlideMenu .article.menuNewsArticle .menuNewsDate span { color:#fff; font-size:0.7em; text-align: left; }

/* particles main menu */

#particlesMainmenu {
	position: absolute;
	width: 960px;
	height: 960px;
	background-image: url("");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	z-index:9999;
	background:#ff9900;
}

/*
aside#jsGetterBottomBar .row.jsWrapper.display-flex {  display: flex;  flex-wrap: wrap; }
aside#jsGetterBottomBar .row.jsWrapper.display-flex > [class*='col-'] {  display: flex;  flex-direction: column; }
*/

/* ########################     progress table pushmenu left */

aside#progressTable {
	position:fixed;
	left:0;
	top:0;
	z-index:3;
	background: #333;
	color:#fff !important;
	display: block;
	float: left;
	width: 0;
	height: 100vh;
	overflow-x: hidden;
	overflow-y: scroll;
	transition: 0.3s ease;
		
}

aside#progressTable div.frame {
	padding:7.5em 0 1em 0;	
} 
aside#progressTable div header { margin:0 0 1em 0; }
aside#progressTable tr th { background:#666; }

aside#progressTable.progressTableMove {
	width:50vw;
}

aside#progressTable .ce-table td {
  font-size:0.8em;
  padding: 0.3em 0.75em;
  vertical-align: middle;
}





/* ############################### pageSubNav ############################ */


nav.pageSubNav {
	display:block;
	padding:0;
	font-size: 1em;
	height:100vh;
	overflow:scroll;
	float:left;
	width:15%;
	

}

nav.pageSubNav ul {
	padding: 0 1.0em;
	margin: 0em 1em 1em 1em;
}

nav.pageSubNav li {
	list-style: none;
	color: #fff;
}

nav.pageSubNav li a {
	color: #fff;
	text-decoration: none;
	display: inline-block;
	line-height: 1.2em;
	padding: 0 0.5em;
	font-size:0.8em;

}

nav.pageSubNav li a:hover {
	background: #fff !important;
	color: #06529B !important;
}

nav.pageSubNav li li { list-style: square; }
nav.pageSubNav li a.active,
nav.pageSubNav li li a.active {
	background: none;
	text-decoration: underline;
	color: #fff;
}

nav.pageSubNav li:first-child a.active {
	text-decoration: none;
	font-weight:900;
}

nav.pageSubNav li li a.active {
	background: #fff;
	text-decoration: none;
	color:#06529B;
}











main#contentContainer {
	padding: 0em;
	width: 85vw;
	display: block;
	float: left;
}

div#tcciLeft {
	transition: 0.3s ease;
	width: 20%;
	height: 100vh;
	float: left;
	/*
	background:rgba(38,0,0,0.5);background-color: #fff;
	
	background:rgba(255,255,255,0.5);
	*/
	padding: 0;
	margin:0 1.5em 0 0;
	color:#fff; 
}

.infoSeperator { display:block; width:100%; border-bottom:1px solid #fff; border-top:1px solid #fff; margin:2em 0 1em 0; }
div#tcciLeft .infoSeperator h3 { padding:0.5em 0 0.5em 0;}
div#tcciLeft h3 {
	font-size: 1.0rem;
	display: block;
	width: 100%;
}

div#tcciLeft div.frame {
	width: 100%;
	max-width: 90%;
}

body.minMaxCnt div#tcciLeft {
	width: 0;
}

div#tcciRight {
	width: 60%;
	height: 100vh;
	float: left;
	background: #fff;
	padding: 0;
	overflow-x: hidden;
}

#progressTable.minMaxCntLeft {
	width: 25%;
}

#pageWrap.minMaxCntRight {
	width: 75%;
}

div#pageWrap {
	display: block;
	width: 100%;
	height: 100vh;
	position: relative;
	transition: 0.3s ease;
}


section {
	width: 100%;
}



section#wikiTeasers {
	margin: 0 0 1.5em 0;
	padding: 1.5em;
	/*	
	border-bottom: 1.5em solid #fff;
	*/
}

section#stdContentPage {
	margin: 0;
	padding: 0 0 0 1.5em;

}
section.tcciTestsIntro { color:#fff; }
section.tcciTestsIntro h1, section.tcciTestsIntro h2, section.tcciTestsIntro h3 { color:#fff; font-size:1em; }







/* #################################################  News extended settings -> should moved ... */
section#wikiTeasers { background:none; position:relative; }
section#wikiTeasers .categoryList,
/* section#wikiTeasers div { transition: all 0.5s ease; } */
section#wikiTeasers #newsDetailCenter { padding:0 2rem !important; }
section#wikiTeasers #newsRelatedLeft { padding:0 2rem 0 2rem !important; }
section#wikiTeasers .categoryList { padding:0 2rem 0 2rem !important; }
section#wikiTeasers .categoryList ul,
section#wikiTeasers #newsRelatedLeft ul { padding:0 0 0 0.8em; }
section#wikiTeasers .categoryList ul { padding:0; list-style:none !important; }
section#wikiTeasers .NewsItems { transition: all 0.5s ease; }
body.wikiMainListing #wikiLeftColButton { display:none; }
body.wikiCategory #wikiLeftColButton { display:none; }

section#wikiTeasers h1.wikiHeadline em { display:inline-block; font-style:normal; }
section#wikiTeasers h1.wikiHeadline em::first-letter { text-transform: uppercase !important; }

















div#tcciRight iframe {
	border: 0;
	width: 100%;
	height: 100vh;
}

#actionBtnPushMenu {
	position: fixed;
	bottom: 2em;
	left: 1.5em;
	width: auto;
	height: auto;
	z-index: 12;
	text-align: center;
	padding: 0;
}



#actionBtnPushMenu i.bi {
	cursor: pointer;
	color: #fff;
	font-size: 2.5em;
}

#actionBtnPushMenu i.bi:hover {
	color: #a6e22e;
}



.fullScreenVideo video { height:100vh; width:auto; }

/* ################### Bs modal / forms extends ##################### */
#loginFormModal .modal-content { font-family:'Ubuntu-light',sans-serif; font-weight:normal; background:rgba(0,0,0,0.9); color:#999;  }
#loginFormModal span.input-group-text { float:left; width:auto; display:inline; background:none; color:#fff; font-size:1.5em; border:2px solid #999; border-radius:0; }
#loginFormModal div.input-group { margin:1em 0 1em 0; }
#loginFormModal .modal-body h3 { color:#999; font-size:1em; font-family:'Ubuntu-bold',sans-serif; font-weight:normal; }
#loginFormModal .modal-header { display:block; border-color:#999; }
#loginFormModal .modal-header .modalCategoryLogo.t3bLogo-blue { width: 10em;  height: 2.5em;  float:left; background:url("../Images/t3app_logo_white.svg") 0 0 no-repeat; background-size:contain; }
#loginFormModal .modal-header h5 { color:#000; }
#loginFormModal .modal-header .btn-close { float:right; color:#000; padding:0 0.8em 0 0; margin:0;}
#loginFormModal .modal-header .modal-close { float:right; cursor:pointer; font-size:1.5em; padding:0; margin:0; color:#fff; }
#loginFormModal .modal-header .modal-close:hover { color:#ddd; } 
#loginFormModal legend { display:none; }
.form-control {	border: none; border-radius:0 !important; }
#loginFormModal .btn { transition: all 0.3s ease; font-family:'Ubuntu-regular',sans-serif; font-size:1em;  border-radius:0; background-color:#fff; color:#000; border:none !important; }
#loginFormModal .btn:hover { background-color:rgb(192, 191, 188); }

#loginFormModal input { border-radius:0;  border:none; float:right; }
#loginFormModal input#tx-felogin-input-logout { padding:0.4em 1em; }
.input-group-text {  border: inherit; }
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {  background: #fff;}

input:autofill {
  background: #fff !important; filter:none !important;  /* or any other */
}
input:autofill {
  transition:
    background-color calc(infinity * 1s) step-end,
    background-image calc(infinity * 1s) step-end allow-discrete,
    color calc(infinity * 1s) step-end;
}


#chatBotModalOne .modal-content { font-family:'Ubuntu-light',sans-serif; font-weight:normal; background:rgba(255,255,255,0.9); color:#333;  }
#chatBotModalOne span.input-group-text { float:left; width:auto; display:inline; background:#fff; color:#06529B; font-size:1.5em; }
#chatBotModalOne div.input-group { margin:0 0 1em 0; }
#chatBotModalOne .modal-body h3 { color:#333; font-size:1em; font-family:'Ubuntu-bold',sans-serif; font-weight:normal; }
#chatBotModalOne .modal-header { display:block; }
#chatBotModalOne .modal-header .modalCategoryLogo.t3bLogo-blue { width: 10em;  height: 2.5em;  float:left; background:url("../Images/t3berlin-logo-web-media-department_2024_blue.svg") 0 0 no-repeat; background-size:contain; }
#chatBotModalOne .modal-header h5 { color:#000; }
#chatBotModalOne .modal-header .btn-close { float:right; color:#000; padding:0 0.8em 0 0; margin:0;}
#chatBotModalOne .modal-header .modal-close { float:right; cursor:pointer; font-size:1.5em; padding:0; margin:0; color:#333; }
#chatBotModalOne .modal-header .modal-close:hover { color:#06529B; } 





/* 3thr party forms & powermail */
.tx-powermail.t3bPowermail { margin:1em 0 0 0; }
.tx-powermail.t3bPowermail form h3 { margin:0 0 1em 0; }
.tx-powermail.t3bPowermail form legend { color:#fff; margin:1em 0 1em 0; display:none; }
.tx-powermail.t3bPowermail form label.control-label { display:none !important; }
.tx-powermail.t3bPowermail form .powermail_fieldwrap { margin:0 0 1em 0; }
.tx-powermail.t3bPowermail form .powermail_fieldwrap.layout3 { display:block; width:100%; }
.tx-powermail.t3bPowermail form .powermail_fieldwrap.layout3 .col-sm-10 { width:100%; }
.tx-powermail .powermail_fieldset .powermail_field_error, .tx-powermail .powermail_fieldset div.error {  background-color: #fff;  color: #fff; }
.tx-powermail .powermail_fieldset .powermail-errors-list > li {color: #A94442;  padding: 0.2em 0.5em;  font-size:0.7em; }
.tx-powermail.t3bPowermail form .btn.btn-primary { border:none !important; background:#fff; color:#333; float:right; }
.tx-powermail.t3bPowermail form .btn.btn-primary:hover {background:#a6e22e; color:#000; } 
.tx-powermail.t3bPowermail .checkbox { color:#fff; font-size:0.7em; }

/* ###################  Bottom action bar  ####################### */

/* equal heights */

aside#jsGetterBottomBar .row.jsWrapper.display-flex {  display: flex;  flex-wrap: wrap; }
aside#jsGetterBottomBar .row.jsWrapper.display-flex > [class*='col-'] {  display: flex;  flex-direction: column; }

/* sections */
aside#jsGetterBottomBar {font-family: 'opensans-regular'; font-weight:normal; position: fixed; display: none; bottom: 2em; width:100vw; margin:0 auto; z-index:3; text-align: center; }
aside#jsGetterBottomBar .jsWrapper { width:95%; margin:0; text-align: center; background:#06529B; float:right; }
aside#jsGetterBottomBar .jsWrapper ul, aside#jsGetterBottomBar .jsWrapper ul .li { list-style: none; margin:0; padding:0;  }
aside#jsGetterBottomBar .jsWrapper div#currentTime {  line-height: 3.0em;  font-size: 0.95em;  font-family: 'opensans-bold';  font-weight: normal; }

aside#jsGetterBottomBar #currentDate {
	float: left;
	line-height: 0.7em;
	height: 1.7em;
	position: relative;
	top: 0.6em;
	color: #fff;
	background: no-repeat;
	padding: 0.1em 0.2em 0em 0.2em;
	text-align: center;
	margin: 0 0.3em 0 0;
	position: absolute;
	border: 1px solid #fff;
}
aside#jsGetterBottomBar .jsWrapper div span strong {font-family: 'opensans-bold'; font-weight:normal;}
aside#jsGetterBottomBar .jsWrapper #jsTime { background:#fff; color:#5d656a; padding-top:0em; padding-left:0; padding-right:0; }
aside#jsGetterBottomBar .jsWrapper #jsNewsStrips {background:#06529B; color:#fff; }
aside#jsGetterBottomBar .jsWrapper #jsWeather { position:relative; background:#06529B; color:#fff; }

aside#jsGetterBottomBar .jsWrapper #jsNewsStrips { position: relative; display:block;  padding:0 0; }
aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .bottomSliderView ul,
aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .bottomSliderView ul li { margin:0; padding:0; list-style: none; color:#fff; }
aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .bottomSliderView ul li a { display:block; height:2.9em; overflow:hidden; text-align:left; }
aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .bottomSliderView ul li h4 { line-height: 1.9em;  font-size: 1.5em; color:#fff; display:inline; float:left; margin:0 0.5em 0 0; padding:0; }
aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .bottomSliderView ul li h4:after { content:'-'; margin:0 0; color:#fff; }
aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .bottomSliderView ul li span { display:inline;  line-height: 2.9em; font-size:1em; color:#fff; line-break: loose;  margin:0; padding:0; }
aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .bottomSliderView ul li p { margin:0; padding:0; }

aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .swiperShortNews {		width: 100%;		height: 100%;			display:block;		position: relative;		max-height:3em; overflow: hidden;	}
aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .swiperShortNews .swiper-slide {		text-align: left;		font-size: 1em;		display:block;		background:none;		display: flex;		justify-content: left;		color:#fff;		width:100%;		padding:0 0 0 1.0em;	}

aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .swiperShortNews .swiper-slide h3 {  font-size: 0.8em;  color: #fff;  font-weight: normal;  padding: 1em 0 0 0;  display: inline;  line-height: 0.9em; }
aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .swiperShortNews .swiper-slide h3 a { font-family: 'opensans-regular'; font-size:inherit; color:#fff; font-weight: normal; vertical-align: middle; display:inline; text-decoration: none; } 
aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .swiperShortNews .swiper-slide span { font-family: 'opensans-regular'; font-size:inherit; color:#fff; display:inline; font-weight: normal; vertical-align: middle; text-decoration: none; } 


aside#jsGetterBottomBar span#newsPool {
	line-height: 2.5em;
	font-size: 1.1em;
	font-family: 'opensans-regular';
	font-weight: normal;
	float: left;
	color: #fff;
	text-transform: uppercase;
	margin: 0 0 0 2em;
	display:none;
}
aside#jsGetterBottomBar #currentDate span { font-family: 'opensans-bold';  font-weight: normal;  font-size: 0.8em;color:#fff; margin:0; padding:0; letter-spacing: 0.1rem; }
aside#jsGetterBottomBar #currentDate em { color:#fff; display: block;  font-style: normal; font-size: 0.6em; text-transform: uppercase;  }


/* JSON weather box */
aside#jsGetterBottomBar #jsonInfos { position: relative; background:#06529B; z-index:8; }
aside#jsGetterBottomBar #weatherContent { position:absolute; bottom:-1.5em; display:none; width:auto; min-height:8.5em; min-width:8em; background:#06529B; border:4px solid #fff; overflow: hidden; z-index:8; }
aside#jsGetterBottomBar #weatherContent #weatherContentInner { display:block; position:relative; }
aside#jsGetterBottomBar .weatherBox {  display: table; background:#06529B; position: absolute;  height: 100%;  width: 100%;   top: 0;color:#fff;  display:inline-block; margin:0; text-align: center; }
aside#jsGetterBottomBar .weatherBox .weatherBoxInner { padding:0.5em; }
aside#jsGetterBottomBar .weatherBox em { color: #fff;  display: block;  font-style: normal;  font-size: 0.6em;  text-transform: uppercase;  line-height: 1.1em; }
aside#jsGetterBottomBar .weatherBox div {display:block; color:#fff; font-size:0.9em;  }
aside#jsGetterBottomBar .weatherBox div.wLocationName { font-family: 'opensans-bold',sans-serif; font-size:1.0em; }
aside#jsGetterBottomBar .weatherBox div.wLocationRegionCountry { font-size: 0.6em; margin: 0 0 0.5em 0; }
aside#jsGetterBottomBar .weatherBox div.wCurrentTemp_c { display:inline-flex; position:relative; float:left; top:0.2em; font-family: 'opensans-bold',sans-serif; font-size:1.2em; }
aside#jsGetterBottomBar .weatherBox div.wCurrentConditionIcon { display:inline; }
aside#jsGetterBottomBar .weatherBox div.wCurrentConditionText { font-size: 0.6em; }

aside#jsGetterBottomBar div { position:relative; }

aside#jsGetterBottomBar #weatherBox { z-index: 99; left:0; }

/* colors: */
/* old blue 
aside#jsGetterBottomBar .jsWrapper { background: #06529B; }
aside#jsGetterBottomBar .jsWrapper #jsNewsStrips { background: #06529B; }
aside#jsGetterBottomBar .weatherBox { background:#06529B; }
aside#jsGetterBottomBar .jsWrapper #jsWeather { background:#06529B; }
aside#jsGetterBottomBar #jsonInfos { background:#06529B; }
aside#jsGetterBottomBar #weatherContent {background:#06529B; }
*/

aside#jsGetterBottomBar .jsWrapper { background: #2c297c; }
aside#jsGetterBottomBar .jsWrapper #jsNewsStrips { background: #2c297c; }
aside#jsGetterBottomBar .weatherBox { background:#2c297c; }
aside#jsGetterBottomBar .jsWrapper #jsWeather { background:#2c297c; }
aside#jsGetterBottomBar #jsonInfos { background:#2c297c; }
aside#jsGetterBottomBar #weatherContent {background:#2c297c; }

body.magentaTheme aside#jsGetterBottomBar .jsWrapper { background: #2c297c; }
body.magentaTheme aside#jsGetterBottomBar .jsWrapper #jsNewsStrips { background: #2c297c; }
body.magentaTheme aside#jsGetterBottomBar .weatherBox { background:#2c297c; }
body.magentaTheme aside#jsGetterBottomBar .jsWrapper #jsWeather { background:#2c297c; }
body.magentaTheme aside#jsGetterBottomBar #jsonInfos { background:#2c297c; }
body.magentaTheme aside#jsGetterBottomBar #weatherContent {background:#2c297c; }

body.darkBlueTheme aside#jsGetterBottomBar .jsWrapper { background: #04054f; }
body.darkBlueTheme aside#jsGetterBottomBar .jsWrapper #jsNewsStrips { background: #04054f; }
body.darkBlueTheme aside#jsGetterBottomBar .weatherBox { background:#04054f; }
body.darkBlueTheme aside#jsGetterBottomBar .jsWrapper #jsWeather { background:#04054f; }
body.darkBlueTheme aside#jsGetterBottomBar #jsonInfos { background:#04054f; }
body.darkBlueTheme aside#jsGetterBottomBar #weatherContent {background:#04054f; }

/* dark bottom  */
body.darkTheme aside#jsGetterBottomBar .jsWrapper { background: #090909; }
body.darkTheme aside#jsGetterBottomBar .jsWrapper #jsNewsStrips { background: #090909; }
body.darkTheme aside#jsGetterBottomBar .weatherBox { background:#090909; }
body.darkTheme aside#jsGetterBottomBar .jsWrapper #jsWeather { background:#090909; }
body.darkTheme aside#jsGetterBottomBar #jsonInfos { background:#090909; }
body.darkTheme aside#jsGetterBottomBar #weatherContent {background:#090909; }

/* white bottom */
body.whiteTheme aside#jsGetterBottomBar .jsWrapper { background: #fff; }
body.whiteTheme aside#jsGetterBottomBar .jsWrapper #jsNewsStrips { background: #fff; }
body.whiteTheme aside#jsGetterBottomBar .weatherBox { background:#9e0f13; }
body.whiteTheme aside#jsGetterBottomBar .jsWrapper #jsWeather { background:#fff; }
body.whiteTheme aside#jsGetterBottomBar #jsonInfos { background:#fff; }
body.whiteTheme aside#jsGetterBottomBar #weatherContent {background:#fff; }
body.whiteTheme aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .swiperShortNews .swiper-slide span { color: #090909; }
body.whiteTheme aside#jsGetterBottomBar .jsWrapper #jsTime {  background: #9e0f13;  color: #fff; }
body.whiteTheme aside#jsGetterBottomBar #currentDate span, body.whiteTheme aside#jsGetterBottomBar #currentDate em { color: #090909; }
body.whiteTheme aside#jsGetterBottomBar span#newsPool { color: #090909; }
body.whiteTheme aside#jsGetterBottomBar #currentDate { border:1px solid #090909; }
body.whiteTheme aside#jsGetterBottomBar .weatherBox div { color: #fff; }

/* white bottom - darkblue */
body.whiteTheme.darkBlue aside#jsGetterBottomBar .weatherBox { background:#04172c; }
body.whiteTheme.darkBlue aside#jsGetterBottomBar .jsWrapper #jsTime {  background: #04172c;  color: #fff; }

/* white bottom - black */
body.whiteTheme.black aside#jsGetterBottomBar .weatherBox { background:#000; }
body.whiteTheme.black aside#jsGetterBottomBar .jsWrapper #jsTime {  background: #000;  color: #fff; }

/* orange bottom */
body.orangeTheme aside#jsGetterBottomBar .jsWrapper { background: #f55801; }
body.orangeTheme aside#jsGetterBottomBar .jsWrapper #jsNewsStrips { background: #f55801; }
body.orangeTheme aside#jsGetterBottomBar .weatherBox { background:#f55801; }
body.orangeTheme aside#jsGetterBottomBar .jsWrapper #jsWeather { background:#f55801; }
body.orangeTheme aside#jsGetterBottomBar #jsonInfos { background:#f55801; }
body.orangeTheme aside#jsGetterBottomBar #weatherContent {background:#f55801; }

/* darkPinkTheme  */
body.darkPinkTheme aside#jsGetterBottomBar .jsWrapper { background: #8102a4; }
body.darkPinkTheme aside#jsGetterBottomBar .jsWrapper #jsNewsStrips { background: #8102a4; }
body.darkPinkTheme aside#jsGetterBottomBar .weatherBox { background:#8102a4; }
body.darkPinkTheme aside#jsGetterBottomBar .jsWrapper #jsWeather { background:#8102a4; }
body.darkPinkTheme aside#jsGetterBottomBar #jsonInfos { background:#8102a4; }
body.darkPinkTheme aside#jsGetterBottomBar #weatherContent {background:#8102a4; }


aside#jsGetterBottomBar #slideCountdown { float: right;
  color: #fff;
  text-align: right;
  position: absolute;
  width: auto;
  display: block;
  right: 1em;
  top: 0.7em;
}

#slideRemainingCircle { 
position: absolute;
  z-index: 99999;
  width: auto;
  height: auto;
  right: 1em;
  bottom: 1.5em;
  border-radius: 100%;
  background-size: 90%;
  background: rgba(255,255,255,0.8);
}

#slideRemainingCircle .timer {
    background: -webkit-linear-gradient(left, #06529B 50%, #eee 50%);
    border-radius: 100%;
    height: calc(var(--size) * 1px);
    width: calc(var(--size) * 1px);
    position: relative;
    -webkit-animation: time calc(var(--duration) * 1s) steps(1000, start) infinite;
      -webkit-mask: radial-gradient(transparent 50%,#000 50%);
      mask: radial-gradient(transparent 50%,#000 50%);
}

 #slideRemainingCircle .mask {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 50%;
    -webkit-animation: mask calc(var(--duration) * 1s) steps(500, start) infinite;
    -webkit-transform-origin: 100% 50%;
}

@-webkit-keyframes time {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes mask {
    0% {
        background: #eee;
        -webkit-transform: rotate(0deg);
    }
    50% {
        background: #eee;
        -webkit-transform: rotate(-180deg);
    }
    50.01% {
        background: skyBlue;
        -webkit-transform: rotate(0deg);
    }
    100% {
        background: skyBlue;
        -webkit-transform: rotate(-180deg);
    }
}

/* ################ WIKI Layout --- Wiki news layouts ################ */

#wikiTeasers .news .code-toolbar code { font-size:0.7em !important; }







/* kenburns settings STABLE ############################################   ACTIVATE!  THIS IN LIVE MODE  #################
Change t3b_dev.js event listener resize for location.reload() at the same time */
/*
.bgWrapper.zoom-right { transform-origin: 100% 0; }
.bgWrapper.zoom-left { transform-origin: 0 100%; }
.swiper-scale-effect .swiper-slide-cover {  transition: 20s ease-out;  transform: scale(1.2); }
.swiper-scale-effect .swiper-slide.swiper-slide-active .swiper-slide-cover {  transform: scale(1); }

*/

/* ####### Kenburns END ######### */





/* ################ chat bot object  ################### 
aside#chatBotCnt { position:fixed; display:none !important; bottom:2.8em; right:0.3em;  width:auto; height:auto; z-index:999; color:#fff; font-size:0.7em; }
aside#chatBotCnt #chatBotAvator { width:4.2em; height:4.2em; background-image:url("../Images/vicky_cut_265x265.jpg"); background-repeat:no-repeat; background-size:cover; background-position: center center; border:0.2em solid rgba(255,255,255,1); display:inline-block; border-radius: 100%; }

#chatBotModalOne iframe { width:100%; border:none; }
#chatBotModalOne .modal-body { background: #445566; }

*/


a { text-decoration: none; }

@media only screen and (max-width: 640px) {
	div.code-toolbar {  position: relative;  max-width: 80vw;}
}	

@media only screen and (min-width: 481px) {
	.dce.swiper-slide .rteText.content {  height: 60vh; }
	
.dce.swiper-slide.bezierDynamic div.curveLeft .rteText {  top:10.5em; }
.dce.swiper-slide.bezierDynamic div.curveRight .rteText { top:10.5m; }
aside#jsGetterBottomBar { display: block; } 
	header#mainPageHeader aside#logo svg {  max-width: 10em; }
}	


@media only screen and (max-width: 575px) {
	.bgWrapper.swiper-slide-cover {
	
	background-size: 100vw auto !important; 
	background-position: center calc(100% - 2vh) !important;
	
	}
	
}	

@media only screen and (min-width: 576px) {
	aside#navActionButtons {
  position: relative;
  top: 3em;
  left: inherit;
  z-index: 99;
  display: block;
  float: right;
  color: #fff;
  cursor: pointer !important;
  width: auto;
  margin-right:0.5em; }
  
	.dce.swiper-slide.bezierDynamic div.curveLeft .rteText
	.dce.swiper-slide.bezierDynamic div.curveRight .rteText {  top:6.5em; }
	header#mainPageHeader aside#logo {  float: left; z-index: 2;  width: auto; text-align:center; max-width: 100%;  min-width: 4em;  height: auto;  background:transparent;  top: 1em;  padding: 0.4em 1.5em;}
	
	aside#subNaviTop { display:block; }
	aside#swiperProgressInfos { display:inline-block; }
	.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { display:inline-block; }
	.dce.swiper-slide .rteText h1, .dce.swiper-slide .rteText h2  { font-size:2.5em; }
	aside#jsGetterBottomBar .jsWrapper #jsTime { padding-top: 0.7em; }
	aside#jsGetterBottomBar .jsWrapper div#currentTime { line-height: 1.3em;  font-size: 1.3em; }
	aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .swiperShortNews .swiper-slide h3 { font-size:0.9em; }

}

@media only screen and (min-width: 720px) {
	/* show buttons in mobile devices */
	aside#navActionButtons a#chatBtn,
	aside#navActionButtons a#userBtn,
	aside#navActionButtons a#wikiBtn { display:flex; }
	aside#navActionButtons a#mainMenuBtn.navActionBtn { margin:0.7em 0.7em 0 0.7em; }
	
	aside#navActionButtons a#searchBtn { display:none !important; visibility:hidden !important; }
}	


@media only screen and (min-width: 801px) {
	header#mainPageHeader aside#logo svg {  max-width: 10em; }

	
	/* #jsGetterBottomBar */
	aside#jsGetterBottomBar #weatherContent { display:block; }
	
	
}

@media only screen and (min-width: 992px) {
	
	aside#jsGetterBottomBar { bottom: 2em; }
	section#wikiTeasers #newsDetailCenter { padding:0 2rem !important; }
	section#wikiTeasers #newsRelatedLeft { padding:0 !important; }
	section#wikiTeasers categoryList { padding:0 !important; }	
	section#wikiTeasers #newsRelatedLeft,
	section#wikiTeasers .categoryList { display: inline-block !important;	height: auto; min-height: 100vh !important;visibility: visible;	}
	
	aside#jsGetterBottomBar span#newsPool { display:block; }
	
	div#wikiLeftColButton, div#wikiRightColButton { display:none; }
}	


@media only screen and (max-width: 1024px) {
	.dce.swiper-slide div.svgBg { background:none !important; }	
	
}

@media only screen and (max-width: 1200px) {
	.gradientWrapper .bgWrapper.zoom-right { background-position: left calc(100% - 15vh) !important; }	
	.gradientWrapper .bgWrapper.zoom-left  { background-position: right calc(100% - 15vh) !important; }		
	
}


@media only screen and (min-width: 1025px) {
	.dce.swiper-slide.bezierDynamic div.curveRight .rteText { left:0; }
	
	aside#swiperProgressInfos { top:4.2em !important; }
	.dce.swiper-slide div.svgBg .mobileFullBgColor { background:none !important; }
	.dce.swiper-slide.bezierDynamic div.curveRight .mobileFullBgColor { background:none !important; }	
	.dce.swiper-slide.bezierDynamic div.curveLeft .rteText {  max-width: 50vw; top:10em; }
	.dce.swiper-slide div.svgBg {  max-width:45vw; }
	/* Start real swiper view width svg & bg curves */
	aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .swiperShortNews .swiper-slide h3 { font-size:1.0em; }
	
	.dce.swiper-slide div.svgEnd { display:block;  }
	.dce.swiper-slide div.svgStart { display:block;  }	
	
	/* nav buttons */
	aside#navActionButtons a#searchBtn { display:none; }
	aside#navActionButtons div#t3bSearch { display:block; }
	aside#navActionButtons div#t3bSearch input#ke_search_sword { font-family: 'ubuntu-light'; color:#000; font-weight:normal; font-size:1em; outline: none; margin:0 0.7em 0 0; padding:0 0.5em; line-height:1.8em; border:0.01em solid #fff; border-radius:1em; background:rgba(255,255,255,1); width:auto; min-width:8em; }


	.dce.swiper-slide div.teasersRight { position: absolute; display:block; right:0em;width:100%; max-width:45vw; top:7em; float:right; }
	.dce.swiper-slide div.teasersRight.tileBox { top:3em; }
	.dce.swiper-slide div.teasersLeft { position: absolute; display:block; left:2em;width:100%; max-width:45vw; top:5em; float:left; }
}

@media only screen and (min-width: 1201px) {
	.dce.swiper-slide div.svgBg {  max-width:35vw; }
	h3, .h3 { font-size: 1.5em; }
}


@media only screen and (min-width: 1281px) {
	aside#jsGetterBottomBar .jsWrapper #jsNewsStrips .swiperShortNews .swiper-slide h3 { font-size:1.15em; padding-top:0.5em; }
	aside#navActionButtons {position:relative; top:3.0em; z-index:99; display:block; float:right; color:#fff; cursor:pointer !important; width:auto; }

}

@media only screen and (min-width: 1441px) {
	.categoryList.collapse {	display: block;	height: auto !important; visibility: visible;	}

}

@media only screen and (min-width: 1681px) {

	
}


/* ####################### Tests ###################### */
#pageYOffset {
  position: fixed;
  z-index: 1000;
  padding: 0 0.5em;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  color: #fff;
  left: 0; 
  font-size:0.7em !important;
display:none !important; 
  }
  
.dce.swiper-slide .mobileBgOverlay {
  position: relative;
  width: 100%;
  height: 100vh;
 
 }

.mCSB_inside > .mCSB_container {
  margin-right: 0;
}





















/* chat bot slide / push menu #####################################   */

#mainWrapper {  position:relative; display:block; top:0; left:0;   transition: all 0.3s ease; }
header#mainPageHeader {
  transition: all 0.3s ease;
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  width: 100vw;
  max-width:100vw;
  height: auto;
  min-height:10em;
  overflow:hidden;
}

body.autoplay-progressHidden #swiperProgressInfos { display:none !important; }

aside#chatBotMenu { display:none; background: #06529B; }

@media only screen and (max-width: 800px) {
	#mainWrapper { left: 0 !important; }
}

@media only screen and (min-width: 801px) {
	
	aside#chatBotMenu {
		position: fixed;
		display: block;
		transition: all 0.3s ease;
		top: 0;
		right: -20em;
		width: 20em;
		max-width: 20em;
		height: 100vh;
		overflow: hidden;
		background: linear-gradient(to bottom, rgba(6,82,155,1) 0%,rgba(255,255,255,1) 62%);
		/* background: #06529B; */
		padding: 0;
		margin:0;
		border:0;
		z-index: 2;
		color: #fff;
		text-align: left !important;
	}
	aside#chatBotMenu #chatPushMenuHeader {
		padding: 0;
		position: absolute;
		top: 1.4em;
		right:0;
		width: 2em;
		height: 3em;
		z-index:9;
		display: block;
	}
	aside#chatBotMenu #chatPushMenuHeader #t3bLogoChat {
		float: left;
		width: 2.5em;
		height: 2.5em;
		background: url("../Images/t3b-quads-chatbot-white.png") 0 0 no-repeat;
		background-size: contain;
		margin: 2.5em 0.2em 0 1.2em;
	}
	aside#chatBotMenu #chatPushMenuHeader h3 {
		font-size: 1.8em;
		float: left;
		font-family: 'ubuntu-light';
		text-align: justify;
		color: #fff;
		margin: 1.3em 0 0 0.3em;
	}
	aside#chatBotMenu #chatPushMenuHeader i#closeChatMenuBtn {
		transition: all 0.3s ease;
		font-size: 2em;
		color: #fff;
		position: absolute;
		float: right;
		margin: 0 0 0 0;
		cursor: pointer;
		right: 0.2em;
	}
	aside#chatBotMenu #chatPushMenuHeader i#closeChatMenuBtn:hover {
		scale: 1.3;
		right: 0.2em;
	}
	aside#chatBotMenu #chatContent {
		display: block;
		clear: both;
		padding: 0;
		font-size: 0.8em;
		font-family: 'ubuntu-light';
		text-align: justify;
	}
	aside#navActionButtons a.navActionBtn.chatViewActive {
		text-decoration: none !important;
		transition: all 0.3s ease;
		width: 2.5em;
		height: 2.5em;
		border-radius: 100%;
		border: 0.1em solid rgb(255, 255, 255);
		background: #06529B;
		text-align: center;
		display: block;
		color: #fff;
		margin: 0.7em 0.7em 0 0.7em;
		float: left;
	}
	
	aside#subNaviTop a.chatViewActive em { border-bottom: 2px solid #fff; }
	
	aside#navActionButtons a.navActionBtn.chatViewActive i {
		color: #fff;
	}
	iframe#chatT3b {
		border: 0;
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100vh;
		position:absolute;
		bottom:0;
	}
	iframe:focus {
		outline: none;
	}
	iframe[seamless] {
		display: block;
	}}
	
/* tests */	
/*
[class*=hint--]:after, 
[class*=hint--]:before
 {
  background:#137fa1;
}
*/
.hintColor::after {
  background-color: #496DF0;
}

.hintColor.hint--bottom-left::before, hintColor.hint--bottom-right::before, hintColor.hint--bottom::before {
  border-bottom-color: #496DF0;
}