/* Generelles */

@import url(http://fonts.googleapis.com/css?family=Exo+2:700,300,400,400italic);
@import url('https://fonts.googleapis.com/css?family=Snowburst+One');

html, body {
  height:100%;
  margin:0;
}

body {
  font-family:'Exo 2', sans-serif;
  color:#1a1a1a;
  /*color:rgb(100,100,100,0); */
}

/* Kopfzeile */

header {
  background: #F0EFDD;
  background-image: url('../images/drav-tmp.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: auto;
  margin: 0;
  width:100%;
  height:100%;
}

header h1 {
  position:absolute;
  left:50%;
  bottom:5%;
  color:#A3A396;
  font-size: 7rem;
  font-weight:700;
  /*text-transform:uppercase;*/
  line-height:0.3em;
}

header h1 span {
  font-weight:300;
  font-size:4rem;
}

header h1 span.small {
  font-weight:300;
  font-size:2rem;
}

/*header h1 span.xmas {
	color:#B40431;
	font-family: 'Snowburst One', cursive;
	font-size:2rem;
	transform-origin: bottom right;
	transform:rotate(-10deg);
	display: block;
}*/


/* Textinhalt */

section {
  margin-left:auto;
  margin-right:auto;
  padding:1.75em;
  max-width:55rem;
}

section img {
  margin-top: 1em;
  max-width:100%;
  max-height:100%;
}

section h2 {
  font-weight:400;
  font-size: 2.5rem;
  font-style:italic;
  color:#0F0F0F;
}

section p, ol {
  font-weight:300;
  font-size:1.13rem;
  line-height:1.75rem;
}

section ol li {
  margin-top:1.55em;
}

section a {
  color:#004b89;
  text-decoration:none;
}

section a:hover {
  text-decoration:underline;
}

article.zitat {
	text-align:center;
	margin-bottom:5rem;	
}

article.zitat p {	
	font-size:1.5rem;
}

article.zitat span {	
	font-size:0.9rem;
}
/* Fußzeile */

footer {
  background-color:#fff;
  width:100%;
  height:auto;
  min-height:30px;
  text-align:center;
  margin-bottom:2em;
}

footer h3 {
  color:#FFFFFF;
  font-weight:300;
  font-size: 3.9rem;
  line-height:0.85em;
  padding:3rem 3rem;
  margin:0;
}

footer h3 span {
  font-size:3.1rem;
}

strong {font-weight:800;}

.eins, .fuenf{
  background-color: transparent;
  min-height: 6em;
}
.zwei, .sechs{
  background-color: transparent;
}
.drei, .sieben{
  background-color: transparent;
}
.vier, .acht{
  background-color: transparent7;
}
.container {
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.container p {
  padding: 1em;
  color: #0F0F0F;
  margin: 0;
  width: 250px;
}

.txtmark {color:#B04C80;}

/* Einstieg in das Responsive Design */

@media screen and (max-width: 768px) {
  header h1 {
    font-size: 2rem;
	line-height:inherit;
	bottom:10%;
  }
  header h1 span, span.small {
    font-size:1.5rem !important;
	line-height:inherit;
  }
  section h2 {
    font-size:1.5rem;
  }
  footer h3 {
    font-size: 1rem;
  }
  footer h3 span {
    font-size:0.5rem;
  }
}

@media screen and (max-width: 480px) {
  header h1 {
    font-size: 1rem;
	line-height:inherit;
  }
  header h1 span, span.small {
    font-size:1rem;
	line-height:inherit;
  }
  /*section img {
    display:none;
  }*/
}