/* Add here all your css styles (customizations) */


/* Die nachfolgende Anweisung erzeugt eine automatische Silbentrennung in <p>-Tags.
Das Präfix -ms aktiviert als CSS3-Befehl die Silbentennung im IE und in Edge, 
-moz in Firefox und -webkit in Safari. 
Dazu muss im <head>-Bereich festgelegt sein: <html lang="de">. 
Chrome trennt leider keine Silben. */

p {
  hyphens: auto;	
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -khtml-hyphens: auto;
  }

/*30.5.19: die nachfolgende Anweisung verändert die Grundfarbe in style.css für p von #555 (mittelgrau) in #444 (etwas dunkler), für eine kontrastreichere Darstellung mit den Browsern Firefox, Safari und Chrome - mit Edge ist das Grau dunkler und damit kontrastreicher*/

p, 
li,
li a { 
   color: #333;
}  


/*Dasselbe für Überschriften*/

h1,
h2,
h3,
h4,
h5 { 
   color: #333;
} 

/*Dasselbe für Timeline2*/
.timeline-v2 > li .cbp_tmtime span:first-child {
	color: #333;
}

.timeline-v2 > li .cbp_tmtime span:last-child {
	color: #333;

}


/*Breadcrumb-V2a
Variante des Styles Breadcrumb-V2 in style.css
Verwendet in about_1.shtml "wer wir sind" mit Hintergrundbild bg2.jpg
mit den dort verwendeten Abmessungen, insbesondere Höhen
*/

.breadcrumbs-v2a {
	text-align: center;
	position: relative;
	background: url(../img/bg/bg2.jpg) no-repeat center;
}

.breadcrumbs-v2a-in {
	padding: 185px 0;
	position: relative;
}

.breadcrumb-v2a li a,
.breadcrumb-v2a li.active {
	color: #585f69;
}

.breadcrumb-v2a li i {
	color: #585f69;
	min-width: 19px;
	padding: 3px 7px;
	margin-right: 5px;
	text-align: center;
	border: 1px solid #585f69;
}


/* Format w für weiße Schrift "Menü" neben dem Bild für Sandwich-Menü (bei Monitorbreite Tablet und Smartphone verwendet)
*/

w {
	color: #fff;
	text-decoration: none; 
	font-size: 15px;
}

/* Responsives Videoformat. Passt sich variablen Browserbreiten an. 
Beispielaufruf im HTML-Code:
	
						<div class="elastic-video">
							<iframe src="https://www.youtube.com/embed/rLxnm2mJWJs" frameborder="0">		
							</iframe>
						</div>

*/

/* nicht verwendet

video {
width: 100% !important;
height: auto !important;
}

.responsive-video {
padding-bottom: 25px;
overflow: hidden;
}

.responsive-video .video-js-box {
position: relative;
width: 300px !important;
min-width: 100% !important;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
*/

.elastic-video {
    position: relative;
    padding-bottom: 53.25%;
    padding-top: 15px;
    height: 0;
    overflow: hidden;
}

.elastic-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Eingebettetes Video. erste Alternative, nicht im endgültigen Web der ArGe Baltikum verwendet! Sondern elastic-video siehe oben.

Wird das Video nur als <div> eingefügt
z.B.

	<div class="responsive-video">
	  	<iframe src="assets/video/Interview_Berndt_2016.mp4" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
	</div>

dann nimmt es allen zur Verfügung stehenden Platz ein, den der Browser beim ersten Aufruf bietet.

Soll die Videobreite beim Webseitenaufruf auf z.B. 555px beschränkt werden (dann passen bei maximaler Theme-Breite 2 Videos nebeneinander),
ist das Video in einen Container mit entsprechender Breite einzupacken,
z.B.

	<div id="videocontainer555">
  		<div class="responsive-video">
    			<iframe src="assets/video/Interview_Berndt_2016.mp4" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
  		</div>
	</div>
*/

/*
#videocontainer555 {
	max-width:555px;
	width:100%;
}

.responsive-video {
	position: relative;
	padding-bottom: 56%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
*/