/* Portalseite von meinekirche.info */
/* Autor: Rainer Schling */

/* Generelles */

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

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

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

/* Kopfzeile */

header {
  background-image: url('../images/rs_kirche_header_mini.jpg');
  background-position: 50% 50%;
  background-size: cover;
  margin: 0 0 4rem 0;
  width:100%;
  height:100%
}

header h1 {
  position:absolute;
  left:5%;
  top: 60%;
  color:white;
  font-size: 7rem;
  font-weight:700;
  text-transform:uppercase;
  line-height:0.7em;
}

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


/* Textinhalt */

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

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

section h2 {
  font-weight:400;
  font-size: 3.75rem;
  font-style:italic;
  color:#004b89;
}

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;
}

/* Fußzeile */

footer {
  background-color:#646464;
  width:100%;
  height:auto;
  text-align:center;
  margin-top:3em;
}

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;
}
/* Einstieg in das Responsive Design */

@media screen and (max-width: 768px) {
  header h1 {
    font-size: 4.5rem;
  }
  header h1 span {
    font-size:3rem;
  }
  section h2 {
    font-size:1.5rem;
  }
  footer h3 {
    font-size: 4rem;
  }
  footer h3 span {
    font-size:3rem;
  }
}

@media screen and (max-width: 480px) {
  header h1 {
    font-size: 3rem;
  }
  header h1 span {
    font-size:1.5rem;
  }

  footer h3 {
    font-size: 2rem;
  }
  footer h3 span {
    font-size:1rem;
  }


  /* Bilder anzeigen nicht verbergen
  section img {
    display:none;
  }
  */
}