@charset "utf-8";

@font-face{
    font-family: 'newspaperStyle';
    font-style: normal;
    src: local('Special Elite Regular'),
         url('../../../../fonts/Special-Elite-Regular.woff');
}

.Titles {
	display:block; width:100%;
	border-bottom: none!important;
}
.ExerciseTitle {
	width: 100%!important; margin: 25px auto 0px!important;
	font-size: 20pt!important; font-family: 'newspaperStyle'!important;
	line-height: 1.35; text-transform: uppercase!important;
	background-color: transparent!important; color: #50404d!important;
}
span.GapSpan > span.GapSpan {
	font-weight: bold!important;
	cursor: pointer;
}
/*input[type="text"] {
	min-width:10em;
}*/
.ClozeBody {
	background-color: #50404d!important;
}
.text_div {
	flex-wrap: nowrap!important;
	background-color: #d0f0c0!important;
}
.text_div .cloze_text, input[type="text"], .GapSpanCorrection, .GapSpanMissed, .incorrectAnswer {
	font-family: 'newspaperStyle'!important; font-size: 16pt!important; line-height: 1.5!important;
	
	overflow-wrap: break-word;
  word-wrap: break-word;
	
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
	
	-webkit-hyphenate-limit-before: 3; /* For Safari */
  -webkit-hyphenate-limit-after: 2; /* For Safari */
  -ms-hyphenate-limit-chars: 6 3 2;
	hyphenate-limit-chars: 6 3 2;
	
	-webkit-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-last: always;   
  -webkit-hyphenate-limit-zone: 8%;
	hyphenate-limit-lines: 2;   
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%;
	
	-ms-word-break: normal;
  word-break:normal;
	white-space: normal;
}
.textL {
	padding: 20px 100px!important;
	text-align: justify!important;
}
.textR {
	padding: 20px 100px!important;
	text-align: justify!important;
}
.imageR {
	display:block; float:right;
	width:25%;
	margin: 0; padding: 0 0 0 10px;
}
.imageL {
	display:block; float:left;
	width:25%;
	margin: 0; padding: 0 10px 0 0;
}



.paginationstyle { 
	border-top:solid 4px #50404d!important;
}
.paginationstyle a { 
	color: #50404d!important; background-color: white;
}

.paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected { 
	color: white!important; background-color: #50404d!important;
}

#ShowHide {
  display:block;
	min-width: 400px; min-height:2.5em;
	margin:15px auto; padding:0px 8px;
	font-size: 13pt; font-weight: bold; line-height: 1.25;
  border: solid 2px gray;
	-moz-box-shadow: 4px 4px 0px 0px #50404d;
  -webkit-box-shadow: 4px 4px 0px 0px #50404d;
  box-shadow: 4px 4px 0px 0px #50404d;
	color: black; background-color: white;
	cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
#ShowHide:hover {
  color: white; background-color: #50404d;
	border: solid 2px floralwhite;
}

div.Feedback {
	width:60%!important; height: 50%!important;
	transform: translate(-50%, -60%)!important;
}

.UebBeispiel {
	display:flex; flex-direction: row; flex-wrap: wrap;
	align-items: center; justify-content: center; align-content: center;
	width:100%; background-color: #ECF2FF;
	margin:0 auto;
	border-left:5px DIMGRAY solid; border-right:5px DIMGRAY solid;
}
.cell1 {
	display:flex; flex-direction: row; flex-wrap: wrap;
	align-items: center; justify-content: center; align-content: center;
	height:100%;
}
.cell2 {
	display:flex; flex-direction: column; flex-wrap: wrap;
	align-items: center; justify-content: center; align-content: center;
	background-color: #BDD2FF;
	border-left: solid 6px #0038a8;
	padding:5px 10px;
}

.titleBeispiel {
	display:block; width:100%;
	font-size: 18pt; line-height: 1; font-weight: bold;
	font-family: 'Blinker'; text-align: right;
	padding:0px; margin: 0 5px 0 0;
	/*background-color: #0038a8;*/ color: #0038a8;
}
.sentBeispiel {
	display:block; width:100%;
	font-size: 16pt; line-height: 1.5;
	font-family: 'Blinker'; text-align: left;
	color: black;
}
.roundBeispiel {
	border:solid 1px #0038a8; border-radius:6px;
	padding:0px 4px;
	background-color: white; color:#0038a8;
}
.fettgedruckt {
	font-weight:bold; letter-spacing: 0.5px;
	background-color: #bb3385; color:white;
	padding: 0px 3px;
}

@media screen and (max-width: 980px) {
.textL {
	padding: 10px 60px!important;
}
.textR {
	padding: 10px 60px!important;
}

.imageR {
	width:45%; height:auto;
}
.imageL {
	width:45%; height:auto;
}
}

@media screen and (max-width: 690px) {
.ExerciseTitle {
	font-size: 17pt!important; line-height: 1.25!important;
}
.text_div {
	flex-wrap: wrap!important;
}
.text_div .cloze_text, input[type="text"], .GapSpanCorrection, .GapSpanMissed, .incorrectAnswer {
	font-family: 'newspaperStyle'!important; font-size: 16pt!important;
}
.textL {
		padding: 10px 20px!important;
}
.textR {
		padding: 10px 20px!important;
}
.imageR {
	display:block; float: none;
	width:85%; height:auto;
	margin: 0px auto 10px;
}
.imageL {
	display:block; float: none;
	width:85%; height:auto;
	margin: 0px auto 10px;
}

div.Feedback {
	width:90%!important; height: 60%!important; 
	top: 50%!important; left: 50%!important; transform: translate(-50%,100%)!important;
}

}