* { 
	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;
}
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: 0.5em;
}
.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;
}
video {
	width: 100%;
}
cite {
	padding: 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%;
	padding-right: 50px;
	position: relative;
}
	cite::after {
		font-family: "medienportal_icons";
		font-style: normal;
		font-weight: normal;
		content: '\e827';
		position: absolute;
		right: 30px;
		top: calc(50% - 15px);
		font-size: 140px;
	}
	cite.noicon::after {
		content: '';
	}
	cite.question::after {
		font-family: "Siemens Sans Roman";
		content: '?';
		font-size: 120px;
		font-weight: bold;
	}

.cursive {
	font-family: 'SiemensSlab', cursive;
}
.small {
	font-size: 0.8em;
	line-height: 1.35;
}
.hidden {
	display: none;
}
.loading {
	background: url('../img/loading.gif') no-repeat scroll center center;
}
.example {
	padding: 5px 10px;
	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;
}
.container-toggler {
	font-weight: bold;
	cursor: pointer;
}
.interactive {
	cursor: pointer;
}

.w200 {
	width: 200px;
}
.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;
}
.note-wrapper {
	margin-top: 20px;
	text-align: center;
	overflow: hidden;
	padding: 20px;
}
.note {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f1 url('../img/note_300.png') no-repeat;
	background-size: 100%;
}
.note_200 {
	display: inline-block;
	width: 230px;
	height: 232px;
	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);
	transform: rotate3d(0,0,1,7deg);
	-webkit-transform: rotate3d(0,0,1,7deg);
}
	.note_200.cc {
		transform: rotate3d(0,0,1,-8deg);
		-webkit-transform: rotate3d(0,0,1,-8deg);
		margin-top: 10px;
	}
	.note_200 div {
		margin: 30px 20px 0 20px;
	}
		.note_200 div h2 {
			font-family: "SiemensSlab", "Siemens Slab", monospace;
			color: #005071;
		}
		.note_200 div p {
			font-family: 'SiemensSlab', cursive;
			font-size: 14pt;
		}
	
.postit {
	width: 200px;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.postit.yellow1 {
	background: transparent url('../img/postit_yellow1.png') no-repeat;
}
.postit.yellow2 {
	background: transparent url('../img/postit_yellow2.png') no-repeat;
}
.postit.cyan1 {
	background: transparent url('../img/postit_cyan1.png') no-repeat;
}
.postit.cyan2 {
	background: transparent url('../img/postit_cyan2.png') no-repeat;
}
.postit.red1 {
	background: transparent url('../img/postit_red1.png') no-repeat;
}

.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/ctrl/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/ctrl/icon_btn_reload.png') no-repeat 6px center;
			padding-left: 3em;
		}
	.content.learn ul {
		list-style-type: none;
		margin: 16px 0;
	}
	.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: 2em;
		clear: left; /*in case graphics are in li*/
	}
	.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 div.col {
		float: left;
		padding: 0 1em;
	}
	.content div.col.c2 {
		width: 50%;
	}
	.content div.col.c3 {
		width: 33%;
	}
	.content div.col.c4 {
		width: 25%;
	}
	.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;
	}
.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;
			bottom: 4px;
			left: 18px;
		}

.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::after {
	content: url('../img/icon_arrow_assignment.png');
	width: 20px;
	height: 20px;
	position: absolute;
	right: -25px;
	top: calc(50% - 40px);
}
	.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: 150px;
	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 {
			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;
		}
		.exercise .dragcard.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;
		}
		.exercise .dragcard.hascontent:before {
			bottom: 0;
			top: unset;
		}

		.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.multiplechoice div.answer.correct label::before,
		.exercise.singlechoice div.answer.correct label::before,
		.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.assignment .assignment-card.error::after,
		.exercise.assignmentlist .assignment-card.error::after {
			content: '\e8e7';
			color: #b50056;
		}
	.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.assignment .assignment-target.hover {
			/*background-color: #f7d27c;*/
		}
	.exercise.assignmentlist .assignment-target {
		position: absolute;
		background-color: rgba(255,255,255,0.5);
	}
	.exercise.assignmentlist .assignment-target.transparent {
		border: none;
		background: none;
	}
	.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;
	}
	.exercise .dragcard {
		position: absolute;
		top: 150px;
		left: 0;
		width: 135px;
		height: 60px;
		padding: 5px;
		color: #005071;
		background: #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);
		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;
	}

	.exercise .assignment-evaluation,
	.exercise .additional_content,
	.exercise .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;
	}
		.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,
		.exercise .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,
		.exercise .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: 0;
			cursor: pointer;
		}
	.content .exercise .dragcard_content ul {
		margin: 0;
	}
	.content .exercise .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;
	}
		
.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.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;
	}
	
h3.sync-display-item.init,
p.sync-display-item.init,
.sync-display-item.init div {	/*last is for nested divs*/
	opacity: 0;
}

	h3.sync-display-item {
		margin-bottom: 30px;
	}

	li.sync-display-item.init {
		width: 0px;
		opacity: 1;
		white-space: nowrap;
		overflow: hidden;
		cursor: pointer;
	}



.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 {
	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-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 .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;
	}

.flip-card {
	width: 200px;
	height: 200px;
	position: relative;
	display: inline-block;
	margin: 5px;
	-webkit-perspective: 600;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	transition: all .5s;
	cursor: pointer;
}
.flip-card.w220 {
	width: 220px;
	height: 220px;
}
.flip-card.w240 {
	width: 240px;
	height: 240px;
}
.flip-card.w250 {
	width: 250px;
	height: 250px;
}
.flip-card.w400 {
	width: 400px;
	height: 300px;
}
.flip-card .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);
}

.flip-card .front {
	z-index: 10;
	text-align: center;
	font-family: 'SiemensSlab';
	font-weight: bold;
	font-size: 1.2em;
	color: #fff;
}
	.flip-card .front.large {
		font-size: 20pt;
		padding-top: 30px;
		line-height: 1.5;
	}
	.flip-card .front.fonds {
		padding: 0;
	}
	.flip-card .front.fonds span {
		width: 100%;
		height: 40px;
		padding: 10px;
		background: rgba(255,255,255,0.6);
		display: inline-block;
		color: #005071;
	}
	.flip-card .white {
		color: #fff;
	}
.flip-card .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: 20px;
	text-align: left;
	font-size: 11pt;
}
.content.learn .flip-card ul {
	list-style-type: disc;
	margin: 0;
}
.content.learn .flip-card ul li {
	background: none;
	font-weight: unset;
	padding-left: 0;
	line-height: 1.2;
}

.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 .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.e126head,
div.e126cards {
	display: inline-block;
}
div.e126head {
	margin: 24px 0 0;
}
div.e126head div {
	font-weight: 600;
	width: 310px;
	text-align: center;
	float: Left;
	font-size: 17px;
	color: #005071
}
div.e126cards .flip-card {
	width: 300px;
	height: 300px;
}
div.e126cards .flip-card .front {
	font-family: "Siemens Sans Roman", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.5em;
	padding-top: 100px;
	color: #fff;
}
div.e126cards .flip-card .back {
	color: #fff;
	padding-top: 30px;
}
	div.e126cards .flip-card .back ul li {
		line-height: 1.5;
	}
div.accordion h4 {
	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;
}
	div.accordion div.active h4 {
		background: url(../img/arrow_up.png) no-repeat 0 6px;
	}
div.accordion div div {
	height: 0;
	max-height: 0;
	overflow: hidden;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	transition: all 1s;
	font-size: 16px;
}
	div.accordion div.active div {
		height: auto;
		max-height: 400px;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		transition: all 1s;
	}