@import url(font-awesome.min.css);
@import url("https://www.deutsche-vergangenheit.de/assets/fonts/");

body {
  margin: 10px auto;
  padding: 0;
  color: #FF8000;
  background-color: #d3d3d3;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  max-width: 1300px;
}

#wrapper {
  background-color: #FFFFFF;
  color: #000000;
  margin: 0 auto;
  padding: 10px;
  width: 90%;
}

#wrapperfooter {
  background-color: #FFFFFF;
  color: #000000;
  margin: 0 auto;
  padding: 10px;
  width: 90%;
}

/* oben */

/* 
header {
  margin: 10px;
}
*/

/* Bildcontainer Videos und Tabellen */
 .imagetable {
  margin: 15px 5px 10px 0px;
  font-weight: normal;
}

.starttable {
  background-color: #FFFFFF;
  border: 5px solid #545454; 
  margin: 15px 5px 10px 0px;
  padding: 10px;
  font-weight: normal;
 }

/* Tabellen */
 .column1 {
  float: left;
  width: 100%;
 }

 .column2 {
  float: left;
  width: 50%;
 }
 
.column3 {
  float: left;
  width: 33.33%;
}

.column4 {
  float: left;
  width: 25%;
} 

.column5 {
  float: left;
  width: 20%;
}

.column6 {
  float: left;
  width: 16.665%;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
} 
 
.rahmen_grau_justify {
  color: #000000;
  font-size: 15px;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
  border: 1px solid #bcbcbc;
  border-radius: 15px;
  margin: 5px 0px;
  }

.rubrikrahmen {
  color: #000000;
  font-size: 15px;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
  border: 1px solid #bcbcbc;
  margin: 5px 0px;
  padding: 5px 15px;
}

a.rahmen_top:link,
a.rahmen_top:visited,
a.rahmen_top:active {
  color: #5b5b5b;
  text-decoration: none;
  font-size: 15px;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
  line-height: 20px;
}

a.rahmen_top:hover,
a.rahmen_top:focus {
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #454440;
}

a.sitemap:link,
a.sitemap:visited,
a.sitemap:active {
  color: #414141;
  text-decoration: none;
  font-size: 15px;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
  line-height: 20px;
}

a.sitemap:hover,
a.sitemap:focus {
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: #000000;
  background-color: #c4c4c4;
}

a.txtlink:link,
a.txtlink:visited,
a.txtlink:active {
  color: #bb0000;
  text-decoration: none;
  font-size: 1.0em;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
  line-height: 20px;
}

a.txtlink:hover,
a.txtlink:focus {
  color: #ffffff;
  text-decoration: none;
  font-size: 1.0em;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
  line-height: 20px;
  background-color: #454440;
}

a.fusszeile:link,
a.fusszeile:visited,
a.fusszeile:active {
  color: #414141;
  text-decoration: none;
  font-size: 11px;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
  line-height: 10px;
}

a.fusszeile:hover,
a.fusszeile:focus {
  font-size: 11px;
  font-weight: normal;
  text-decoration: none;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: #000000;
  background-color: #c4c4c4;
}

hr {
  display: block;
  color: #414141;
  margin-top: 15px;
  margin-bottom:15px;
  margin-left: 25px;
  margin-right: 25px;
  border-style: inset;
  border-width: 1px;
}

/* Navigation */

.navigation {
  width: 220px;
}

aside {
  float: left;
  width: 250px;
  padding: 10px 0px 0px 20px;
  margin: 0;
}

aside h2 {
  color: #5b5b5b;
  background-color: #FFFFFF;
  font-size: 1.0em;
  font-weight: bold;
  margin: 0px 0px 5px 0px;
  padding: 0px 0px 5px 0px;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-style: bold;
  letter-spacing: 1px;
  line-height: 10px;
}

nav {
  font-size: 0.9em;  
  list-style-type:none;
  padding: 0;
  margin: 0px 0px 20px 0px;
  text-align: left;
  background-color: transparent;
  line-height: 16px;
}

nav ul {
  list-style-type:none;
  padding: 0;
  margin: 0;
}

nav li {
  list-style: none)
  margin: 0;
  padding: 3px 3px 3px 0px;
}

nav ul a:link,
nav ul a:visited,
nav ul a:active {
  color: #4b4b4b;
  background-color: #FFFFFF;
  margin: 0;
  text-decoration: none;
  font-size: 15px;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  display: block;
  font-weight: normal;
  line-height: 20px;
}

nav ul a:hover,
nav ul a:focus {
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #454440;
}

.boxicon {
	margin: 0px 0px 0px 20px;
	padding: 3px 3px 3px 5px;
	list-style-image: url(../../images/strelka_8px.gif)
}

/* Haupttext */

main {
  padding: 10px;
  margin: 0px 0px 0px 280px;
  display: block;  /* wegen Fehldarstellung IE */
}

mainblock {
  padding: 10px;
  margin: 0px 30px 0px 30px;
  display: block;  /* wegen Fehldarstellung IE */
}

article {
  padding: 10px 0px 0px 0px;
  font-size: 1em;
  font-weight: normal;
  text-align: justify;
  line-height: 25px;
}

article h1 {
  text-align: center;
  font-size: 1.3em;
  margin: 0px 0px 20px;
  color: #808080;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  font-weight: bold;
  border: 1px solid #808080;
  padding-bottom: 8px;
  padding-top: 8px;
}

article h2 {
  font-size: 1.2em;
  margin: 0px 0px 0px;
  color: #5b5b5b;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  font-weight: normal;
}

article p {
  text-align: justify;
  font-size: 1.0em;
  margin: 5px 0px 5px 0px;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.topic_hellgrau_justify {
	text-align: justify;
	font-family: Calibri, Arial, Verdana;
	font-size: 1.2em;
	border: 1px solid #bcbcbc;
	background-color:#ececec; padding: 5px 5px 5px 5px;
}

.topicicon {
	text-align: justify;
	list-style-image:url(../../images/linkpfeil_9x35.gif);
	margin: 0px 0px 0px 40px;
}

.videoicon {
	list-style-image:url(../../images/strelka_8px.gif);
	margin: 0px 0px 0px 50px;
	text-align: left;
}

/* VIDEOS */

#player-overlay {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000        
  z-index:999;
}

.video-container-wrapper {
max-width: 100%;
width: 870px; /790px bei 1200px Breite/
left: 0;
right:0;
margin: 10px 0px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

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

/* unten */

/* Footer */

	#footer {
		-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
		width: 100%;
		max-width: 100%;
		margin-top: 2rem;
		text-align: center;
		background-color: #d3d3d3;
		border-radius: 15px;
		padding: 10px 0px;
	}

		#footer .copyright {
			letter-spacing: 0.2rem;
			font-size: 0.6rem;
			opacity: 0.75;
			margin-bottom: 0;
			text-transform: uppercase;
		}

		body.is-article-visible #footer {
			-moz-transform: scale(0.95);
			-webkit-transform: scale(0.95);
			-ms-transform: scale(0.95);
			transform: scale(0.95);
			-moz-filter: blur(0.1rem);
			-webkit-filter: blur(0.1rem);
			-ms-filter: blur(0.1rem);
			filter: blur(0.1rem);
			opacity: 0;
		}

		body.is-loading #footer {
			opacity: 0;
		}
		label {
			color: #ffffff;
			display: block;
			font-size: 0.8rem;
			font-weight: 300;
			letter-spacing: 0.2rem;
			line-height: 1.5;
			margin: 0 0 1rem 0;
			text-transform: uppercase;
		}
	footeroriginal {
		color: #000000;
		background-color: #d3d3d3;
		margin: 10px;
		padding: 10px 20px;
		height: 30px;
		text-align: center;
		font-size: 0.836em;
		line-height: 30px;
		border-radius: 15px;
	}

/* allgemeine Angaben */

a:link, a:visited, a:active {
  color: #164786;
  background-color: FFFFFF;
  text-decoration: none;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
  padding: 0;
  margin: 0;
}
a:hover,
a:focus  {
  color: #ffffff;
  background-color: #747474;
  text-decoration: none;
}

a.slimlink:link {font-family: Calibri, Arial, Verdana; font-size: 1em; font-weight: normal; color: #4B6B94; text-decoration: none;}
a.slimlink:active {font-family: Calibri, Arial, Verdana; font-size: 1em; color: #4B6B94; text-decoration: none;}
a.slimlink:visited {font-family: Calibri, Arial, Verdana; font-size: 1.0em; color: #4B6B94; text-decoration: none;}
a.slimlink:hover {font-family: Calibri, Arial, Verdana; font-size: 1.0em; color: #747474; text-decoration:underline;}

img {
  border: 0;
  max-width: 100%;
  height: auto;
}

.autor {
  font-size: 0.8em;
  text-align: right;
  font-family: Montserrat, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
  line-height: 1.1;
  margin: 0px 0px 10px;
}

.clear {
 clear: both;
 margin: 0;
 padding: 0;
 line-height: 1px;
}

.copyright {
  font-size: 0.5em;
  text-align: center;
  font-weight: normal;
}

.txticon {
	list-style-image:url(../../images/strelka_8px.gif);
	margin: 0px 0px 0px 10px;
}

.listenicon {
	list-style-image:url(../../images/strelka_8px.gif);
}

.ordnericon {
	list-style-image:url(../../images/folder_closed_spacer.gif);
}

.ordnericonleft {
	list-style-image:url(../../images/folder_closed_spacer.gif); 
}

.rahmen_grau {
	text-align: center;
	border: 1px solid #595959;
	padding: 5px;
}

.rahmen_grau_center {
	text-align: center;
	border: 1px solid #595959;
	padding: 5px;
}

.rahmen_grau_justify {
	text-align: justify;
	border: 1px solid #595959;
	padding: 5px;
}

.rahmen_hellgrau_justify {
	text-align: justify;
	border: 1px solid #bcbcbc;
	background-color:#ececec;
	padding: 5px 5px 5px 5px;
}

.zitat_hellgrau_justify {
	text-align: justify;
	border: 1px solid #bcbcbc;
	background-color:#ececec;
	padding: 5px 5px 5px 5px;
}

.zitat_hellgrau_center {
	text-align: center;
	border: 1px solid #bcbcbc;
	background-color:#ececec;
	padding: 5px 5px 5px 5px;
}

.rahmen_weiss_justify {
	text-align: justify;
	border: 1px solid #bcbcbc;
	padding: 5px 5px 5px 5px;
	margin: 10px 0px 10px 0px;
}

.zitat_weiss_justify {
	text-align: justify;
	border: 1px solid #bcbcbc;
	padding: 5px 5px 5px 5px;
}

/* max. 768px */

@media (max-width: 768px) {

header {
  font-size: 0.813em;
}

div#top {
  padding: 0;
  background-size: 110%;
  height: 150px;
}

aside {
  float: none;
  width: 98%;
}

aside h2 {
  margin: 0px 40px 10px 0px;
}

nav {
  margin: 0px 40px 20px 0px;
}

.linkszwischentext {
margin: 0px 40px 0px 0px;
}

main {
  margin: 10px;
}

article {
  text-align: justify;
}

}

/* max. 640px */

@media (max-width: 640px) {

div#top {
  background-size: 135%;
  height: 140px;
}
}

/* max. 480px */

@media (max-width: 480px) {

#wrapper {
  width: 90%;
  padding: 10px;
}

div#top {
  height: auto;
}

article h1, article h2, article h3, article h4 {
  font-size: 1em;
}

footer {
  font-size: 0.7em;
  line-height: 15px;
}

}

/* max. 32px */

@media (max-width: 320px) {

aside {
  float: none;
  width: 95%;
}

}