* { 
	font-family: "Siemens Sans Roman", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-style: normal;
	margin: 0;
	padding: 0;
}
body {
	min-width: 320px;
	background-color: #fff;
	color: #3c372d;
	line-height: 1.6;
}
	body * {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
html, body { 
	top: 0;
	left: 0;
	right: 0;
}
html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow-y: scroll;	/*show scroll bar permanently*/
}
html * {
	max-height: 1000000px;	/*avoid font boosting in Chrome http://wisercoder.com/disabling-font-zooming-chrome-android/*/
}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}
h1 {
	line-height: 1.15em;
	color: #005071;
}
h2 {
	margin-top: 1.5em;
	color: #005071;
}
	h2:first-of-type,
	h2:first-child {
		margin-top: 0;
	}
h3 {
	margin-top: 1em;
	color: #005071;
}
h1, h2, h3 {
    font-family: "SiemensSlab", "Siemens Slab", Arial, sans-serif;
}
p {
	margin-top: 8px;
}
em {
	font-style: italic;
}
.content li {
	margin-left: 15px;
}
.content ol.largenumbers li {
	font-family: "SiemensSlab", "Siemens Slab", Arial, sans-serif;
	font-weight: bold;
	counter-increment: list;
	list-style-type: none;
	margin: 6px 0;
}
.content ol.largenumbers li:before {
	font-size: 20px;
	line-height: 28px;
	content: counter(list);
	margin-right: 10px;
	border: 2px solid #631e3d;
	background: #fff;
	padding: 2px 9px;
}
th {
	font-weight: normal;
	text-align: left;
}
audio,
video {
	width: 100%;
}
iframe {
	width: 100%;
	min-height: 600px;
	border: none;
}
p.cite {
	padding: 16px 90px 16px 16px;
	font-weight: bold;
	font-style: unset;
	line-height: 185%;
	font-size: 18px;
	font-family: "SiemensSlab", "Siemens Slab", monospace;
	/*background-color: #3da3bf;*/
	background-color: rgba(255,255,255,0.5);
	color: #005071;
	background-color: #80a8b8;
	color: #fff;
	display: inline-block;
	width: 100%;
	position: relative;
}
	p.cite::after {
		font-family: "medienportal_icons";
		font-style: normal;
		font-weight: normal;
		content: '\e827';
		position: absolute;
		right: -20px;
		top: calc(50% - 15px);
		font-size: 140px;
	}
	p.cite.noicon::after {
		content: '';
	}
	p.cite.question::after {
		font-family: "SiemensSlab", "Siemens Slab", monospace;
		content: '?';
		font-size: 80px;
		font-weight: bold;
		right: 10px;
	}
	p.cite strong {
		font-family: "SiemensSlab", "Siemens Slab", monospace;
		font-style: italic;
	}

	  
.cursive {
	font-family: 'SiemensSlab', cursive;
}
.small {
	font-size: 0.8em;
	line-height: 1.35;
}
.hidden {
	display: none;
}
div.col.hidden-oninit {
	height: 0;
	opacity: 0; /*make sure videos are invisible*/
	overflow: hidden;
}
div.btn-show-hiddensection {
	height: 40px !important; /*override possible height values of original section class*/
}
div.btn-show-hiddensection button:hover {
	color: #000 !important;
}

.loading {
	background: url('../img/loading.gif') no-repeat scroll center center;
}
.job {
	padding: 5px 10px;
	margin: 20px 0;
	background-color: #fac959;	
}
.hint {
	margin: 20px 0;
	font-size: 95% !important;
}
.safetynote {
	background: url('../img/icon_warning.png') #ae8a9a no-repeat scroll 0 center;
	padding: 20px 10px 10px 120px;
	color: #fff;
}
.example {
	padding: 5px 10px;
	font-style: italic;
	margin: 15px 0;
}
	li .example {
		margin: 5px 0;
	}
	.example.blue-light,
	.example.blue-dark {
		background-color: #e1f1f5;	
	}
	.example.blue-light {
		color: #3c372d;
	}
	.example strong {
		font-style: italic;
	}
.content .example  ul {
	margin-top: 0;
}
.content .example  ul  li {
	background: url('../img/bullet_level2.png') no-repeat scroll 0 3px;
	font-weight: normal;
	margin-top: 5px;
	line-height: 1.25em;
}
.note {
	padding: 10px 40px 10px 10px;
	margin: 20px 0;
	position: relative;
	background-color: #33738d;
	color: #fff;
}
	.note::after {
		font-family: 'medienportal_icons';
		font-style: normal;
		font-weight: normal;
		content: '\e8e6';
		position: absolute;
		right: -10px;
		top: calc(50% - 10px);
		font-size: 60px;
		line-height: 20px;
	}
.task {
	color: #005071;
	font-family: 'Siemens Sans Bold';
}
.interactive {
	cursor: pointer;
}
.input {
	border: 1px solid #333;
	width: 400px;
	height: 300px;
	overflow: hidden;
	y-scroll: auto;
	padding: 5px;
}

.w50 {
	width: 50px !important;
}
.w100 {
	width: 100px !important;
}
.w150 {
	width: 150px !important;
}
.w200 {
	width: 200px !important;
}
.w250 {
	width: 250px !important;
}
.t80 {
	opacity: 0.8;
}
.blue-dark {
	background-color: #99c6d5;	
}
.blue-light {
	background-color: #c4dee7;
}
.green-dark {
	background-color: #a2b17e;	
}
.green-light {
	background-color: #e1e5ad;
}
.red-dark {
	background-color: #a27590;	
}
.red-light {
	background-color: #e3b2c7;
}
.yellow-dark {
	background-color: #ffd566;	
}
.yellow-light {
	background-color: #ffe7a6;
}
.gray-dark {
	background-color: #b9bdc1;	
}
.gray-light {
	background-color: #b9bdc1;
}
.arrow-right-orange-large {
	background: url('../img/icon_arrow_assignment.png') no-repeat;
	width: 37px;
	height: 74px;
}
.pincards {
	text-align: center;
}
.pincard {
	display: inline-block;
	background: #f5f5f1 url('../img/pin.png') no-repeat scroll right top;
	border: 1px solid #005071;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	vertical-align: top;
	margin-right: 20px;
}
	.pincard.w200 {
		height: 200px;
	}
	.pincard.w250 {
		width: 250px;
		height: 250px;
	}
	.pincard.w300 {
		width: 300px;
		height: 300px;
	}
	.pincard.w400 {
		width: 400px;
		height: 400px;
	}
	.pincard.r8 {
		transform: rotate3d(0,0,1,8deg);
		-webkit-transform: rotate3d(0,0,1,8deg);
		margin-top: 10px;
	}
	.pincard.r-8 {
		transform: rotate3d(0,0,1,-8deg);
		-webkit-transform: rotate3d(0,0,1,-8deg);
		margin-top: 10px;
	}
	.pincard.r15 {
		transform: rotate3d(0,0,1,15deg);
		-webkit-transform: rotate3d(0,0,1,15deg);
		margin-top: 10px;
	}
	.pincard.r-15 {
		transform: rotate3d(0,0,1,-15deg);
		-webkit-transform: rotate3d(0,0,1,-15deg);
		margin-top: 10px;
	}
	.pincard div {
		margin: 30px 20px 0 20px;
	}
		.pincard div h2 {
			font-family: "SiemensSlab", "Siemens Slab", monospace;
			color: #005071;
		}
		.pincard div p {
			font-family: 'SiemensSlab', cursive;
			font-size: 14pt;
		}
	


.content {
	margin: 0 auto;
	padding: 20px 0;	/*20px;*/
	max-width: 938px;
	min-height: 650px;
	position: relative;
	line-height: 1.6em;
	background-color: #ecebe3;
}
	.content.test {
		min-height: 600px;
	}
	.content a {
		color: #005071;
		text-decoration: none;
	}
		.content a:hover {
			text-decoration: none;
		}
		.content a.noicon {
			background: unset;
			padding: unset;
		}
			.content a.noicon::before {
				content: '';
			}
		.content button.small {
			padding: 0.2em 0.5em;
			font-size: 0.8em;
			line-height: 1.2em;
			-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
			-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
			box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
		}
		.content input.checkInput {
			background: rgba(255,255,255,0.6) url('../img/icon_btn_check.png') no-repeat 6px center;
			padding-left: 2em;
		}
		.content input.reload {
			display: inline-block;
			position: absolute;
			bottom: 10px;
			right: 10px;
			background: rgba(255,255,255,0.6) url('../img/icon_btn_reload.png') no-repeat 6px center;
			padding-left: 3em;
		}
		.col input.reset {
			display: none;
			background: rgba(255,255,255,0.6) url('../img/icon_btn_reload.png') no-repeat 6px center;
			padding-left: 40px;
		}
			.col input.reset.active {
				display: block;
				margin-top: 20px;
			}
	.content.learn h2 {
		font-size: 20px;
		min-height: 50px;
		display: inline-block;
	}
	.content.learn h3,
	.content.learn h4,
	.content.learn p,
	.content.learn div.example,
	.content.learn li,
	.content.exercise p,
	.content.exercise li,
	.content.exercise label {
		font-size: 18px;
	}
		.content.exercise p.hint {
			font-size: 16px;
			clear: left;
			padding-top: 20px;	/*better to use padding than margin for two column exercises*/
			padding-bottom: 10px;	/*make sure enough space to following ctrl in case the exercise has 6 elements in one column*/
		}
		.exercise h3 p {	/*work-around for heads stored inside p by editor*/
			font-family: "SiemensSlab", "Siemens Slab", Arial, sans-serif;
			font-weight: bold;
		}

	.content.practice ul,
	.content.learn ul {
		list-style-type: none;
		margin: 16px 0;
	}
	.content.learn ol {
		margin: 16px 0;
	}
	.content.practice ul li,
	.content.learn ul li {
		background: url('../img/bullet.png') no-repeat scroll 0 6px;
		padding-left: 30px;
		margin-top: 10px;
		font-weight: bold;
		line-height: 1.2;
		clear: left; /*in case graphics are in li*/
	}
	.content.learn ol li {
		line-height: 1.2;
		margin: 8px 0 0 19px;
		padding-left: 10px;
	}
	.content.learn li ul {
		margin-top: 10px;
	}
	.content.learn ul li ul li {
		background: url('../img/bullet_level2.png') no-repeat scroll 0 9px;
		padding-left: 20px;
		margin-top: 5px;
		font-weight: normal;
	}
	.content.media h2 {
		margin-bottom: 20px;
	}
	.content .media img:not(:first-of-type) {
		margin-top: 20px;
	}
.content div.col {
	float: left;
	padding: 0 20px;
	margin-bottom: 50px;
}
	.content div.col.mb0 {
		margin-bottom: 0;
	}
	.content div.col.mb20 {
		margin-bottom: 20px;
	}
	.content div.col.mb100 {
		margin-bottom: 100px;
	}
	.content div.col img {
		width: 100%;
	}
	.content div.col .swiper-slide img {
		width: unset;
	}

	.content div.exercise,
	.content.test div.report {
		height: 100%;
		width: 100%;
	}
	.content div.exercise-wrapper {
		position: relative;
		margin-top: 45px;
	}
	.content div.exercise.inactive,
	.content.test div.intro.inactive,
	.content.test div.report.inactive {
		display: none;	/*is displayed dynamically*/
	}
	.content.test div.intro,
	.content.test div.exercise {
		margin-top: 30px;
	}
	.content.test div.exercise h2 {
		font-size: 1.2em;
	}
	.content.test input#starttest {
		margin-top: 50px;
	}
.exercise.multiplechoice div.answer,
.exercise.singlechoice div.answer {
	min-height: 40px;
	margin-top: 20px;
}
	.exercise.multiplechoice div.answer.lowheight,
	.exercise.singlechoice div.answer.lowheight {
		margin-top: 10px;
	}
	.exercise.multiplechoice div.answer.twocolumn,
	.exercise.singlechoice div.answer.twocolumn {
		width: 50%;
		float: left;
	}
#result_message {
	display: none;
	position: absolute;
	bottom: 70px;
	left: 0;
	background: #fff;
	padding: 10px;
	width: auto;
}
.exercise.hotspot div.answer {
	float: left;
	min-width: 100px;
	margin: 10px 10px 0 0;
	padding-left: 1em;
	border: 2px solid #ccc;
}
	.exercise.hotspot div.answer.selected {
		border-color: #f90;
		/*background-color: #fc9;*/
		background: #fc9 url('../img/icon_tick_16_f90.png') no-repeat scroll 2px center;
	}
	.exercise.hotspot div.answer.correct {
		background-color: #cfc;
	}
	.exercise.hotspot div.answer.error {
		background-color: #fcc;
	}
		.exercise.multiplechoice div.answer.correct label::before,
		.exercise.multiplechoice div.answer.error label::before,
		.exercise.singlechoice div.answer.correct label::before,
		.exercise.singlechoice div.answer.error label::before {
			font-family: "medienportal_icons";
			font-size: 48px;
			position: absolute;
			left: 18px;
			top: 50%;
			transform: translateY(-50%);	/*make sure centered on multi line answers*/
		}

.exercise.multiplechoice input[type='checkbox'],
.exercise.singlechoice input[type='radio'] {
	opacity: 0;
	float: right;	/*make sure labels don't break around checkbox when width becomes small*/ 
	width: 10px;
}
.exercise.multiplechoice input[type='checkbox'] + label,
.exercise.singlechoice input[type='radio'] + label {
	margin: 0;
	clear: none;
	padding: 5px 0 4px 58px;
	cursor: pointer;
	display: inline-block;
	position: relative;	/*for correct/error icons*/
}
.exercise.hotspot div.answer label {
	text-align: center;
	cursor: pointer;
	padding: 5px 10px;
	width: 100%;
	display: inline-block;
}
.exercise.singlechoice input[type='radio'] + label {
	background: url('../img/radio_off.png') left center no-repeat;
}
.exercise.multiplechoice input[type='checkbox'] + label {
	background: url('../img/checkbox_off.png') left center no-repeat;
}
.exercise.multiplechoice input[type='checkbox']:checked + label {
	background-image: url('../img/checkbox_on.png');
}
.exercise.singlechoice input[type='radio']:checked + label {
	background-image: url('../img/radio_on.png');
}

.exercise.assignment .assignment-card-origin {
	position: absolute;
}
.exercise.assignmentlist .assignment-card-origin {
	position: absolute;
	width: 150px;
	height: 100px;
}
.assignment-card-origin::before {	/*better use before than after cause when a single card is animated on start the card should be on top*/
	content: url('../img/icon_arrow_assignment.png');
	position: absolute;
	right: -37px;
	top: calc(50% - 20px);
}
	.assignment-card-origin.horizontal::before {
		content: '';
	}

	.exercise.rtl .assignment-card-origin::before {	/*for exercises having drag cards right of targets*/
		content: url('../img/icon_arrow_assignment_left.png');
		left: -40px;
	}
	.assignment-card-origin.inactive::before {
		content: '';
	}
	.exercise.assignmentlist .assignment-card-origin.high {
		height: 150px;
	}
	.exercise.assignmentlist .assignment-card-origin.inactive {
		background: none;
	}
	.exercise.assignmentlist .assignment-card-origin.inactive .exercise-progress-info {
		display: none;
	}
	.exercise.assignment .exercise-progress-info,
	.exercise.assignmentlist .exercise-progress-info {
		margin: 0 0 10px 0;
	}
.exercise.assignment .assignment-card,
.exercise.assignmentlist .assignment-card {
	width: auto;
	height: auto;
	min-width: 130px;
	padding: 4px 15px 4px 4px;
	display: none;
	position: absolute;
	background-color: #fff;/*#ecece4;*/
	cursor: move;
	text-align: center;
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
   	line-height: 1.25;

	/*display: flex;	//für vertikale Zentrierung, führt aber zu Problem beim Ausblenden
	align-items: center;
	justify-content: center;
	text-align: center;*/
}
.exercise.assignment .assignment-card img,
.exercise.assignmentlist .assignment-card img {
	float: left;
	width: 100%;
}

		.exercise.assignment .assignment-card {
			overflow: hidden;
		}
		.exercise.assignmentlist .assignment-card.dragging {
			height: 30px;
			overflow: hidden;
		}
		.exercise.assignmentlist .assignment-card.assigned {
			height: 30px;
			/*overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;*/
		}
		.exercise.assignmentlist .assignment-card.assigned:hover {
			height: auto;
			white-space: normal;
			z-index: 9999 !important;
		}
		.exercise.assignmentlist .assignment-card.assigned.full,
		.exercise.assignmentlist .assignment-card.full,
		.exercise.assignmentlist .assignment-card.full:hover {
			white-space: unset;
		}
		.exercise.assignment .assignment-card.hascontent, 
		.exercise.assignmentlist .assignment-card.hascontent {
			padding-right: 25px;
		}
		.dragcard-text.hascontent:before,
		.exercise.assignment .assignment-card.hascontent:before, 
		.exercise.assignmentlist .assignment-card.hascontent:before {
			font-family: "medienportal_icons";
			font-style: normal;
			font-weight: normal;
			content: "\e825";
			position: absolute ;
			top: -5px;
			right: -3px;
			font-size: 30px;
			width: 30px;
			height: 30px;
			color: #005071;
			cursor: pointer;
		}
		.dragcard-text.hascontent:before {
			bottom: 0;
			top: unset;
		}

		.exercise.cloze .cloze-card.correct::after,
		.exercise.cloze .cloze-card.error::after,
		.exercise.assignment .assignment-card.correct::after,
		.exercise.assignmentlist .assignment-card.correct::after,
		.exercise.assignment .assignment-card.error::after,
		.exercise.assignmentlist .assignment-card.error::after {
			font-family: "medienportal_icons";
			font-size: 40px;
			position: absolute;
			bottom: -14px;
			right: -8px;
		}
			.exercise.cloze .cloze-card.correct::after,
			.exercise.cloze .cloze-card.error::after {
				bottom: 0;
			}

		.exercise.multiplechoice div.answer.correct label::before,
		.exercise.singlechoice div.answer.correct label::before,
		.exercise.cloze .cloze-card.correct::after,
		.exercise.assignment .assignment-card.correct::after,
		.exercise.assignmentlist .assignment-card.correct::after {
			content: '\e870';
			color: #718737;
		}
		.exercise.multiplechoice div.answer.error label::before,
		.exercise.singlechoice div.answer.error label::before,
		.exercise.cloze .cloze-card.error::after,
		.exercise.assignment .assignment-card.error::after,
		.exercise.assignmentlist .assignment-card.error::after {
			content: '\e8e7';
			color: #b50056;
		}
	.exercise.assignment .assignment-area,
	.exercise.assignmentlist .assignment-area {
		position:relative;
		top: 20px;
	}
	.exercise.assignment .assignment-card.ui-draggable-dragging,
	.exercise.assignmentlist .assignment-card.ui-draggable-dragging {
		box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
	}
	.exercise.assignment .assignment-target {
		position: absolute;
	}
	.exercise.assignmentlist .assignment-target {
		position: absolute;
		background-color: rgba(255,255,255,0.5);
	}
	.exercise.assignmentlist .assignment-target.transparent {
		border: none;
		background: none;
	}
		.exercise.assignment .assignment-target-label {
			position: absolute;
			font-size: 18px;
			text-align: left;
		}
		.exercise.assignment .assignment-target-field {
			width: 100%;
			height: 100%;
			background-color: rgba(255,255,255,0.5);
		}
			.exercise.assignment .assignment-target-field.hover {
				background-color: #f7d27c;
			}
	.exercise.assignmentlist .assignment-target-label {
		height: 35px;
		width: 100%;
		background: #f8ac00;
		text-align: center;
		color: #fff;
		font-size: 18px;
		line-height: 1.75;
	}
		.assignment-target.h2 .assignment-target-label {
			height: 55px;
			line-height: 1.25;
			padding: 5px;
		}
		.assignment-target.h3 .assignment-target-label {
			height: 75px;
			line-height: 1.25;
			padding: 5px;
		}
		.assignment-target.h4 .assignment-target-label {
			height: 100px;
			line-height: 1.25;
			padding: 5px;
		}
	.exercise.assignmentlist .assignment-target-area {
		width: 100%;
		height: calc(100% - 30px);
		position: relative;
	}
		.exercise.assignmentlist .assignment-target-area.disabled {
			/*background: #b9bdc1;*/
		}
		.exercise.assignmentlist .assignment-target-area.hover {
			/*background-color: #f7d27c;*/
		}
		.assignment-target.h2 .assignment-target-area {
			height: calc(100% - 50px);
		}
		.assignment-target.h3 .assignment-target-area {
			height: calc(100% - 75px);
		}
	.exercise.assignmentlist .assignment-target.transparent .assignment-target-area {
		background: none;
	}
		.exercise.assignmentlist .assignment-target.transparent .assignment-target-area.hover {
			/*background-color: rgba(247,210,124,0.5);*/
		}
		.exercise.assignmentlist .assignment-target.transparent .assignment-target-area.disabled {
			/*background: #b9bdc1;*/
		}
	.exercise.assignmentlist .assignment-target.transparent .assignment-target-label {
		opacity: 0;
	}

.dragcards-container.dragcards {
	height: 540px;
	background: none;
}
.dragcards {
	position: relative;
	height: 500px;
	background-color: #fff;
	margin-top: 20px;
}
.dragcard {
	position: absolute;
}
	.dragcard-text {
		top: 0;
		left: 0;
		width: 135px;
		height: 60px;
		padding: 5px;
		color: #005071;
		/*background: #fff;*/ /*background color is made by dragcard*/
		-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
		line-height: 1.25;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		cursor: move;
	}
	.dragcard.transparent .dragcard-text {
		box-shadow: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		border: none;
	}
		div.dragcards-container .dragcard-text p,
		div.dragcards-container .dragcard-content li {
			font-size: 14px;
		}
	.exercise .assignment-evaluation,
	.exercise .additional_content,
	.dragcard-content {
		position: absolute;
		top: 150px;
		display: none;
		min-width: 100px;
		min-height: 70px;
		max-width: 300px;
		max-height: 300px;
		background: #ecece4;
		border: 5px solid #005071;
		border-top-width: 30px;
		padding: 10px;
		font-size: 80%;
		-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
		opacity: 0.975;
		line-height: 1.5;
	}
		.dragcard-content {
			width: 300px;
		}
		.exercise .additional_content {
			width: 450px;
			max-width: 450px;
			max-height: 250px;
		}
		.exercise .assignment-evaluation {
			font-size: 100%;
			z-index: 999;
			position: fixed;
			left: calc(50vw - 300px);
			top: 80px;
			max-width: 600px;	/*override base class*/
			width: 600px;
		}

		.exercise .additional_content::before,
		.dragcard-content::before {
			font-family: "medienportal_icons";
			font-style: normal;
			font-weight: normal;
			content:"\e825";
			font-size: 30px;
			width: 30px;
			height:30px;
			line-height: 30px;
			color: #fff;
			background-color:#005071;        
			position: absolute;
			top: -30px;
			left: -5px;
			cursor: pointer;
			z-index: 1;
		}
	
		.exercise .assignment-evaluation::after,
		.exercise .additional_content::after,
		.dragcard-content::after {
			font-family: "medienportal_icons";
			font-style: normal;
			font-weight: normal;
			content:"\e8e7";
			font-size: 30px;
			width: 30px;
			height:30px;
			line-height: 30px;
			color: #fff;
			background-color:#005071;         
			position: absolute;
			top: -30px;
			right: -5px;
			cursor: pointer;
		}
	div.dragcards-container .dragcard-content ul {
		margin: 0;
	}
	div.dragcards-container .dragcard-content li {
		background: none;
		list-style-type: disc;
		font-weight: unset;
		margin: 0 0 0 12px;
		padding: 0;
		line-height: 1.25;
	}
	.content.exercise .pagectrl {
		position: absolute;
		bottom: 10px;
	}
		.exercise.rtl .pagectrl {
			right: 0;
		}
	div.cloze-area {
		min-height: 300px;
		padding-bottom: 40px;	/*for the cards*/
		line-height: 35px;
		position: relative;
	}
	div.cloze-blank {
		width: 152px;
		height: 27px;
		vertical-align: middle;
		background-color: #fff;
		display: inline-block;
		position: relative;
	}
		div.cloze-blank.hover {
			background-color: #f7d27c;
		}
	div.cloze-card {
		background-color: #fff;
		width: 150px;
		height: 25px;
		line-height: 24px;;
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
		text-align: center;
		cursor: pointer;
		display: inline-block;
		position: relative;
		position: absolute;
		white-space: nowrap;
		z-index: unset;
	}
		div.cloze-card.dragging {
			z-index: 999;
		}
	div.blanks-area {
		position: absolute;
		left: 0;
		bottom: 0;
	}
.content .pagectrl.sub a:hover {
	text-decoration: none;
}
.content .pagectrl.sub {
	padding: 1em 0;
	background: none;
	position: absolute;
	bottom: 0;
}
	.content.conclusion .pagectrl.sub {
		padding: 1em 0;
		background: none;
		position: relative;
		margin-top: 50px;
	}
	.content .pagectrl.sub a {
		width: 2em;
		margin-left: 0;
		margin-right: 20px;
		float: left;
	/*	height: 2.5em;*/
	}
	.content .pagectrl.sub a.button {
		width: auto;
		min-width: 35px;
	}
	.content .pagectrl.sub .info {
		float: left;
		color: #3c372d;
		margin-right: 20px;
	}
	.content.conclusion .pagectrl.sub a {
		float: none;
	}
	.pagectrl a.prev:after,
	.pagectrl a.next:after {
		font-family: "medienportal_icons";
		font-style: normal;
		font-weight: normal;
		position: relative;
		font-size: 40px;
		content: '\e814';
	}
	.pagectrl a.prev:after {
		transform: rotate(180deg);
		display: inline-block;
	}
	.pagectrl a.backtoex {
		background: url('../img/nav_close.png') no-repeat scroll center center;
	}

	
	/*make sure :hover and .inactive are placed behind the other .pagectrl a.* rules as they overwrite them*/
	.pagectrl a.inactive {
		opacity: 0.3;
		cursor: not-allowed;
	}


.idivwrapper {
	position: relative;
}
	.idivwrapper div {
		cursor: pointer;
		text-align: center;
	}
	.idivwrapper.left div {
		text-align: left;
	}
	.idivwrapper.float div {
		float: left;
		margin: 40px;
		padding: 20px;
	}
	.idivwrapper.practice div {
		border-radius: 50%;
		border: 1px solid #005071;
		width: 180px;
		height: 180px;
		position: absolute;
		font-family: 'SiemensSlab', cursive;
		font-size: 14pt;
		font-weight: 600;
		color: #005071;
		overflow: hidden;
		padding-top: 60px;
	}
	.idivwrapper.ellipse div {
		border-radius: 50%;
		padding: 20px;
		position: absolute;
	}
	.idivwrapper.e223>div {
		position: absolute;
		background-color: #005071;
		width: 140px;
		height: 140px;
		padding-top: 32px;
		border-radius: 50%;
		color: #fff;
		box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
	}
		.idivwrapper.e223>div>span {
			font-size: 16pt;
			font-family: "SiemensSlab", "Siemens Slab", Arial, sans-serif;
			display: none;
		}
		.idivwrapper.e223>div h4 {
			font-size: 10pt;
			color: #fff;
			margin-bottom: 6px;
		}
		.idivwrapper.e223 div.idiv_content {
			font-size: 10pt;
		    top: -46px;
		    left: 131px;
		    position: relative;
		    background-color: #005071;
		    min-width: 220px;
		    max-width: 250px;
		    min-height: 70px;
		    max-height: 70px;
		    text-align: left;
		    padding: 10px;
			-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
			-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
			box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
		}
	.idivwrapper.bubble div {
		background-size: 100% 100% !important;
		position: absolute;
	}
	.idiv_content {
		display: none;
	}
	.idiv_content_overlay {
		display: none;
		z-index: 1000;
		background: rgba(0,0,0,0.5);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.idiv_content_overlay_content {
		width: 800px;
		height: auto;
		margin: 50px auto;
		padding: 30px;
		background: #fff;
	}
	
li.ilist {
	width: 20px;
	height: 40px;
	overflow: hidden;
	cursor: pointer;
	background: url('../img/bullet_ilist.png') no-repeat scroll 0 6px !important;
}


div.syncedlist p {
	background-color: #d9d8ce;
	color: rgba(0,0,0,0);	/*text is invisible*/
	padding: 8px;
	margin: 0 0 12px 0;
	min-height: 76px;	/*due to image*/
	transition-duration: 200ms;
	display: block;
}
	div.syncedlist p.active {
		color: inherit;
	}
	div.syncedlist p img {
		width: 60px !important;
		height: 60px !important;
	}
	div.syncedlist p:nth-of-type(odd) img {
		float: left;
		margin-right: 10px;		
	}
	div.syncedlist p:nth-of-type(even) img {
		float: right;
		margin-left: 10px;		
	}



.content .swiper-container {
	margin-top: 30px;
	padding: 20px 0;
	background-color: #015172;
}
.content .swiper-wrapper {
	width: 0;	/*avoid overlapping of buttons on first slides*/
}
.content .swiper-slide {
    color: #005071;
	background-color: #80a8b8;
	color: #fff;
	margin: 20px;
	padding: 40px 30px;
	text-align: center;
	font-size: 22px;
	line-height: 1.75;
	font-weight: bold;
	min-height: 250px;
	width: 300px !important;
}
	.content .swiper-wrapper.w200 .swiper-slide {
		width: 200px !important;
	}
	.content .swiper-wrapper.w500 .swiper-slide {
		width: 500px !important;
	}
	.content .swiper-wrapper.w650 .swiper-slide {
		width: 650px !important;
	}
	.content .swiper-slide.swiper-slide-active {
		transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) !important;	/*remove blur font when cards are not centered correctly, i.e. in 2.4.6*/
	}
	.content .swiper-slide.w350 {
		width: 350px !important;
	}
	.content .swiper-slide.e223 {
		background-color: #f8ac00;
		background-color: #80a8b8;
		color: #fff;
		width: 300px !important;
		height: 180px;
		font-size: 12pt;
		font-weight: normal;
	}
	.content .swiper-slide.media {
		background-color: #f5f5f1;
		width: 360px !important;
		height: 380px;
		padding: 0;
	}
		.content .swiper-slide.media img,
		.content .swiper-slide.media video {
			width: 100%;
		}
		.content .swiper-slide.media p {
			margin: 16px;
			text-align: left;
			color: #005071;
			font-size: 16px;
			line-height: 1.25;
		}
		.content .swiper-slide.media img + p,
		.content .swiper-slide.media video + p {
			font-family: "SiemensSlab";
			font-size: 18px;
			font-weight: bold;
			line-height: 1.5;
		}
	.content.practice .swiper-slide {
		background-color: #f5f5f1;
    	color: #005071;
		background-color: #80a8b8;
	    color: #fff;
	}

.content .swiper-pagination-bullet {
	border-radius: 0;
}
.content .swiper-pagination-bullet-active {
	background: #ebf6f8;
}
.content .swiper-container.exercise div.swiper-slide {
	/*background-color: #f7ac01;*/
	font-size: unset;
	font-weight: unset;
	text-align: unset;
	width: 500px !important;
}
.content .swiper-container.exercise div.swiper-slide li {
	background: none;
	font-weight: unset;
	padding-left: 0;
}
.content .swiper-container.exercise div.swiper-slide ul {
	list-style-type: disc;
}
	.content .swiper-container.exercise div.swiper-slide div.szenario {
		margin-top: -20px;
	}
	.content .swiper-container.exercise div.swiper-slide div.questions ul {
		margin-top: 0;
	}
	.content .swiper-container.exercise div.swiper-slide div.questions li {
		line-height: 1.2;
		margin-top: 3px;
		margin-left: 40px;
	}

.flipcard {
	width: 200px;
	height: 200px;
	position: relative;
	display: inline-block;
	/*overflow: hidden;*/
	margin: 5px;
	-webkit-perspective: 600;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
	cursor: pointer;
}
.flipcard.w220 {
	width: 220px;
	height: 220px;
}
.flipcard.w240 {
	width: 240px;
	height: 240px;
}
.flipcard.w250 {
	width: 250px;
	height: 250px;
}
.flipcard.w300 {
	width: 300px;
	height: 300px;
	margin: 0 2px 2px 0;
}
.flipcard.w400 {
	width: 400px;
	height: 400px;
}
.flipcard .face {
	width: 100%;
	height: 100%;
	padding: 10px;
	position: absolute;
	-webkit-transition-property: opacity, transform, box-shadow;
	-webkit-transition-duration: .3s;
	-webkit-backface-visibility: hidden;
	transition-property: opacity, transform, box-shadow;
	transition-duration: .3s;
	backface-visibility: hidden;
	/*border: 5px solid #fff;*/
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}
	.flipcard .face.front:after {
		width: 20%;
		height: 20%;
		content: '';
		background: url(../img/icon_flip.png) no-repeat right bottom;
		background-size: 100%;
		position: absolute;
		bottom: 3px;
		right: 3px;
	}
.flipcard .front,
.flipcard .front p {
	z-index: 10;
	text-align: center;
	font-family: 'SiemensSlab';
	font-weight: bold;
	font-size: 1.2em;
	/*color: #fff;*/
	color: #3c372d;
}
	.flipcard .front.large,
	.flipcard .front.large p {
		font-size: 26px;
		padding-top: 30px;
		line-height: 1.5;
	}
	.flipcard .front.fonds {
		padding: 0;
	}
	.flipcard .front.fonds span {
		width: 100%;
		height: 40px;
		padding: 10px;
		background: rgba(255,255,255,0.6);
		display: inline-block;
		color: #005071;
	}
	.flipcard .white * {
		color: #fff;
	}
.flipcard .back {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
	-webkit-transform: rotate3d(0,1,0,-180deg);
	transform: perspective(600px) rotateY(-180deg);
	z-index: 8;
	/*line-height: 120px;*/
	text-align: left;
}
	.flipcard .back * {
		font-size: 16px !important;
		text-align: center;
	}
	.flipcard .back.small * {
		font-size: 14px !important;
	}
	.flipcard .back.large p {
		font-size: 22px !important;
		padding-top: 10px;
		line-height: 1.3;
	}

	.flipcard .back.center {
		text-align: center;
	}

	.flipcard p {
		margin: 0 !important;
	}
	.flipcard img {
		width: unset !important;
	}
	body.mce-content-body .flipcard .face {
		position: relative;
	}
	body.mce-content-body .flipcard .face.back {
		-webkit-transform: unset;
		transform: unset;
	}
	div.flipcards .flipcard ul {
		list-style-type: disc;
		margin: 0;
	}
	div.flipcards .flipcard ul li {
		background: none;
		font-weight: unset;
		padding-left: 0;
		line-height: 1.2;
		text-align: left;
	}
	div.flipcards .flipcard .back h4 {
		margin: 10px 0 0 0;
	}

.card-flipped .front {
	-webkit-transform: rotate3d(0,1,0,180deg);
	transform: perspective(600px) rotateY(180deg);
	z-index: 8;
}
.card-flipped .back {
	-webkit-transform: rotate3d(0,1,0,0deg);
	transform: perspective(600px) rotateY(0);
	z-index: 10;
}



table.result {
	margin-top: 20px;
	width: 100%;
}
	table.result th,
	table.result td {
		padding: 0.4em
	}
	table.result th {
		font-size: 0.9em;
		padding-bottom: 0;
		border-bottom: 1px dotted #999;
	}
	table.result td.empty::after {
		content: "\e86f";
		color: #b2b0a1;
	}
	table.result td.incorrect::after {
		content: "\e8e7";
		color: #b50056;
	}
	table.result td.correct::after {
		content: "\e870";
		color: #718737;
	}
	table.result td[id^="result"] {
		font-size: 0.9em;
		font-weight: bold;
		position: relative;
		width: 140px;
	}
	table.result td[id^="result"]::after {
		font-family: "medienportal_icons";
		font-size: 48px;
		position: absolute;
		top: 12px;
		right: 0;
	}







@media screen and (max-width: 550px) {
	.content {
		margin: 0 5px;
	}
	.content.test input#starttest {
		margin-top: 10px;
	}
	.content .pagectrl.sub {
		position: relative;
	}
}

/*custom styles wbt servicelearning*/
.content.practice .swiper-slide.slider-wissenshaus {
	background: url('../img/bg_wissenshaus.jpg') no-repeat center center #fff;
	text-align: left;
	min-height: 230px !important;
	color: #005071;
}
#isync_video {
	width: 100%;
	margin-top: 70px;
}
div.introitem {
	width: 100%;
	height: 80px;
	margin-bottom: 16px;
	background-color: #d9d8ce;
}
.introitem div {
	display: inline-block;
	float: left;
}
.introitem div.introitem-text {
	font-family: SiemensSlab;
	font-weight: bold;
	color: #005071;
	padding: 8px 16px;
	width: calc(100% - 80px);
}
	.introitem div.introitem-text.singleline {
		line-height: 3em;
	}
.introitem div.introitem-image {
	background-color: #fff;
	width: 80px;
	height: 100%;
	text-align: center;
	overflow: hidden;
}

div.accordion-head {
	background: url(../img/arrow_down.png) no-repeat 0 6px;
	padding-left: 25px;
	cursor: pointer;
	line-height: 1.6;
	font-size: 16px;
	margin-top: 5px;
	color: #005071;
	font-weight: bold;
	text-align: left;
}
	div.accordion-head.active {
		background: url(../img/arrow_up.png) no-repeat 0 6px;
	}
div.accordion-head + p,
div.accordion-head + ul + li {
	height: 0;
	max-height: 0;
	overflow: hidden;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	transition: all 1s;
	text-align: left;
}
	div.accordion-head.active + p,
	div.accordion-head.active + ul + li {
		height: auto;
		max-height: 400px;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		transition: all 1s;
	}
	.mce-content-body div.accordion-head + * {
		height: auto;
		max-height: unset;
	}
	
	
.swiper-button-next,
.swiper-button-prev {
	background-color: rgba(0,0,0,0.5);
}
.swiper-button-next {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23FFFFFF'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23FFFFFF'%2F%3E%3C%2Fsvg%3E");
}
	.swiper-button-next.swiper-button-disabled, 
	.swiper-button-prev.swiper-button-disabled {
		background-color: transparent;	
	}
/***** Forschungskreis *****/
.segment {
	opacity: 0;
	cursor: pointer;
}
.segment_info {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all 0.5s;
}
	.segment_info.active {
		opacity: 1;
		transition: all 0.5s;
	}

	
div.transcript {
	float: right;
	width: 50%;
	max-height: 70vh;
	overflow: auto;
	padding: 10px;
	background: #fff;
	display: none;
}
	div.transcript p.teacher {
		background-color: #fde9ba;
		padding: 0 5px;
		margin: 0 -5px;
	}
	div.transcript p em {
		font-style: italic;
	}