@charset "utf-8";

@font-face{
    font-family: 'otherPerson';
    font-style: normal;
    src: local('Life Savers Regular'),
         url('../../../../fonts/Life-Savers-Regular.woff');
}


/*.ExerciseContainer {
	margin:15px 0 0 0!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;
}

.text_div {
	border-top:none!important; border-bottom:none!important;
}
.text_div .cloze_text {
	background-color: PAPAYAWHIP!important;
	text-align: justify;
	
	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;
}
.indentedText {
	display:block;
	margin:10px 0 0 10px; padding:0 0px 0 15px; 
	border-left: solid 6px #bb3385;
	font-family: 'otherPerson'!important; font-weight: bold!important;
	font-size:17pt!important; letter-spacing: 0.25px!important;
}
.fettgedruckt {
	font-weight:bold; letter-spacing: 0.5px;
	background-color: #bb3385; color:white;
	padding: 0px 3px;
}
.floatingPic {
	display:block; width:35%;
	float:right;
	margin: 5px 0 5px 15px;
}

input[type="text"] {
	font-family: 'otherPerson'!important; font-weight: bold!important;
	font-size:17pt!important; letter-spacing: 0.25px!important;
}
input[type="text"]:focus {
	font-family: 'otherPerson'!important; font-weight: bold!important;
	font-size:17pt!important; letter-spacing: 0.25px!important;
}
.correctAnswer, .incorrectAnswer, .incorrectAnswer:focus, .hintedAnswer {
	font-family: 'otherPerson'!important; font-weight: bold!important;
	font-size:17pt!important; letter-spacing: 0.25px!important;
}






/* placeholder text in <input> */
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #002147; font-weight: normal; letter-spacing: 0px;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #002147; font-weight: normal; letter-spacing: 0px;
   opacity:  1;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #002147; font-weight: normal; letter-spacing: 0px;
   opacity:  1;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #002147; font-weight: normal; letter-spacing: 0px;
}
input::-ms-input-placeholder { /* Microsoft Edge */
   color: #002147; font-weight: normal; letter-spacing: 0px;
}
input::placeholder { /* Most modern browsers support this now. */
   color: #002147; font-weight: normal; letter-spacing: 0px;
}

/* removing placeholder text in <input> on click/focus */

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }
input:focus::-ms-input-placeholder { color:transparent; }
input:focus::placeholder { color:transparent; }



@media screen and (max-width: 980px) {
.floatingPic {
	width:45%;
	float:right;
	margin: 5px 0 5px 15px;
}
}

@media screen and (max-width: 690px) {
.UebBeispiel {
	flex-direction: column;
}
.cell2 {
	border-top: solid 6px #0038a8; border-left: none;
}
.floatingPic {
	width:75%;
	float:none;
	margin: 0px auto 0px auto;
}
.indentedText {
	display:block;
	margin:10px 0 0 -6px; padding:0 0px 0 10px; 
}

}