/* --------------------------------------------
Website: 
Autor: Alexander Matthias
Datum: 23.11.2016
----------------------------------------------- */
/*  ALLGEMEIN */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
    box-sizing: border-box;
}
html {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}
body {
    position: relative;
    min-height: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.6;
}
h1, h2, h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    color: #00afef;
    margin: 1em 0;
    padding: 0;
}
h1 {
    text-align: center;
    margin-top: 2em;
}
.kontaktheader {
     text-align: center;
}
.kontakt {
    display: inline-block;
    width: 40%;
    font-size: 18px;
    text-align: center;
    vertical-align: top;
     color: #0085bc;
    margin: 2em 1em 0 1em;
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
p {
    color: #0085bc;
    margin: .5em 0;
    padding: 0;
}
.color {
    color: #ff6c37;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}
/* NAVIGATION */
.logo {
    float: left;
    padding: 0;
}
.logo img {
    width: auto;
    height: 100%;
}
a:link, a:visited {
        color: #0085bc;
}
/* FORMULAR */
.formh2 {
    margin: 2em 0 .5em 2em;
}
form {
    width: 60%;
    margin: 0 0 2em 2em;
}
label {
       color: #0085bc;
        padding-top: .5em;
}
input, textarea {
    display: block;
    width: 80%;
    min-width: 300px;
    color: #0085bc;
    margin: 0 0 .5em 0;
    padding: 2px;
    border: none;
    border-bottom: solid 1px #0085bc;
}
.submit {
    background-color: #fff;
    margin: 2em 0 1em 0;
    padding: 4px 0;
    border: solid 1px #0085bc;
}
/* IMPRESSUM TABLE */
td {
    color: #0085bc;
    vertical-align: top;
    padding: 1em;
}
/* GALERIE */
#minigalerie {
    padding: 1em;
}
#minigalerie img {
    width: 300px;
    height: auto;
}
/* FOOTER */
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}
footer .container {
    background-color: #00afef;
    padding-top: .5rem;
}
footer .container div{
    color: #fff;
}
.footer h3, footer p  {
    font-size: 24px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 .5rem 0;
}
footer ul li {
    margin: 0 0  .5rem 1rem;
}
footer ul li a {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 500;
    text-decoration: none;      
}
footer ul li a:link,
footer ul li a:visited {
    color: #fff;
}
.footer {
    display: inline-block;
    width: 40%;
    text-align: left;
    vertical-align: top;
    margin-left: 3em;
    padding: .5em 1em;
}
address {
    font-style: normal;
}
/*-----------------------------------------------*/
@media screen and (max-width: 460px) {
  /* ALLGEMEIN */   
html {
     font-size: 85%;   
}  
 .container {
    width: 100%;
    margin: 0;
    padding: 0 1em;
}
 h1 {
    font-size: 24px;
    text-align: center;
    margin: 80px 0 0 0;
    padding: 0 .5em;
}    
/* NAVIGATION */
  #nav{
    height: 60px;
}  
.tcon {
    top: 8px;
    top: .5rem;
    right: 24px;
    right: 1.5rem;
}
nav p {
    display: inline-block;
    color: #fff;
    margin-left: 4%;
}
.menu-container {
    width: 0%;
    padding-top: 60px;
}   
.slide-menu {
    width: 60%;
} 
.menu-container li {
    padding: .5em 2em;
}    
.menu-container li a {
    font-size: 22px;
    font-size: 1.375rem;
    padding: .5em;
}
.logo {
    margin: 4px;
}
.logo img{
    width: 100px;
    height: 50px;    
}
/* MAIN */
 article, .article {
    margin:  2em 1em;
}
article p {
        padding: 0;
}   
.article {
        text-align: center;
} 
/* GALERIE */
#minigalerie img {
    width: 200px;
    height: auto;
}
/* FORMULAR */
.formh2 {
    margin: 1em;
}
form {
    width: 90%;
    margin: 1em auto;
}
input, textarea {
    width: 70%;
    min-width: 250px;
}
} /* ENDE MEDIA QUERY */
@media screen and (max-width: 626px) {

#main {
    padding-bottom: 280px;
}
/* FOOTER */
.footer {
    width: 100%;
    text-align: center;
     margin: 0;
    padding: 0;
}
.footer li {
    margin: 0;
}
} /* ENDE MEDIA QUERY */
 @media screen and (min-width: 627px) and (max-width: 900px) {
#main {
    padding-bottom: 220px;
}
/* FOOTER */ 
.footer {
    display: inline-block;
    width: 40%;
    text-align: left;
    vertical-align: top;
    margin-left: 0;
    padding: .5em 1em;
}
}  /* ENDE MEDIA QUERY */ 
@media screen and (min-width: 461px) and (max-width: 900px) {
/* ALLGEMEIN */ 
html {
    font-size: 95%;
}
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5em;
}   
h1 {
    font-size: 28px;
    text-align: center;
    margin: 120px 0 .5rem 0;
}  
h2 {
    margin: 1em 0 0 0;
}
/* NAVIGATION */
#nav {
    height: 80px;
}
.logo {
    margin: 10px 40px;
}
.logo img{
    width: 120px;
    height: 60px; 
} 
nav p {
    display: inline-block;
    color: #fff;
    margin-left: 4%;
}
.menu-container {
    width: 0%;
    padding-top: 100px;
}   
.tcon {
     top: 16px;
    top: 1rem;
    right: 24px;
    right: 1.5rem;
}
.slide-menu {
    width: 40%;
} 
.menu-container li {
    padding: .5em 2em;  
}   
.menu-container li a {
    font-size: 24px;
    font-size: 1.5rem;
    padding: .5em 1em;
} 
/* MAIN */
article, .article {
    margin:  1em .5em;
}
article p {
    padding: 0;
}   
.article {
    text-align: center;
}    
} /* ENDE MEDIA QUERY */
@media screen and (max-width: 900px) {
/* NAVIGATION */
    #nav {
    position: fixed;
    width: 100%;
    top: 0;
    background-color: #0085bc;
    z-index: 9;
}
.menu-container, 
.nav.inner {
    -webkit-transition: width 0.5s ease-in-out;
	transition: width 0.5s ease-in-out;
}        
 .menu-container {
    position: fixed;
    height: 100%;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
	z-index: 100;
}
.menu-container ul li a{
	color: #fff;
    text-decoration: none;
}    
 .tcon {
    position: fixed;
    margin: 0;
    padding: 0;
    z-index: 999;
}      
.tcon {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 40px;
  transition: 0.3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 40px;
  background: transparent;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent; }
  .tcon > * {
    display: block; }
  .tcon:hover, .tcon:focus {
    outline: none; }
  .tcon::-moz-focus-inner {
    border: 0; }

.tcon-menu__lines {
  display: inline-block;
  height: 5.71429px;
  width: 40px;
  border-radius: 2.85714px;
  transition: 0.3s;
  background: #fff;
  position: relative; }
  .tcon-menu__lines::before, .tcon-menu__lines::after {
    display: inline-block;
    height: 5.71429px;
    width: 40px;
    border-radius: 2.85714px;
    transition: 0.3s;
    background: #fff;
    content: '';
    position: absolute;
    left: 0;
    -webkit-transform-origin: 2.85714px center;
    transform-origin: 2.85714px center;
    width: 100%; }
  .tcon-menu__lines::before {
    top: 10px; }
  .tcon-menu__lines::after {
    top: -10px; }
  .tcon-transform .tcon-menu__lines {
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8); }

.tcon-menu--xbutterfly {
  width: auto; }
  .tcon-menu--xbutterfly .tcon-menu__lines::before, .tcon-menu--xbutterfly .tcon-menu__lines::after {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transition: top .3s .6s ease, -webkit-transform .3s ease;
    transition: top .3s .6s ease, transform .3s ease; }
  .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines {
    background: transparent; }
    .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::before, .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::after {
      top: 0;
      transition: top .3s ease, -webkit-transform .3s .5s ease;
      transition: top .3s ease, transform .3s .5s ease;
      width: 40px; }
    .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::before {
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg); }
    .tcon-menu--xbutterfly.tcon-transform .tcon-menu__lines::after {
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg); }

.tcon-visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  .tcon-visuallyhidden:active, .tcon-visuallyhidden:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto; }  

.quellelink { 
    color: #0085bc;
}
} /* ENDE MEDIA QUERY */
@media screen and (min-width: 901px) {
/*  ALLGEMEIN */
html {
    font-size: 100%;
}
.container {
    width: 96%;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 1em;
}
#main {
    padding-bottom: 220px;
}
h1 {
    font-size: 28px;
    font-size: 1.75rem;
    margin: 1rem 0;
}
h2, h3 {
    font-size: 20px;
    margin: .5rem 0;
    padding: 0;
}
/* NAVIGATION */
nav {
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}
.nav-inner {
    width: 96%;
    max-width: 980px;
   margin: 0 auto;
}
.logo {
    width: 260px;
    height: 100px;
    float: left;
    margin: 4px 0 0 4px;
    padding: 0;
}
.logo img {
     margin-left: 20px;   
}
nav ul {
    text-align: right;
    margin: 0;
    padding: 0;
}
nav li {
    float: right;
    width: 110px;
    height: 50px;
    text-align: center;
}
nav p {
    float: left;
}       
nav a {
    display: inline-block;
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-size: 1rem;
    text-decoration: none;
    color: #00465f;
    color: #0085bc;
    padding: .5em 0;
    margin: 0;
}
nav li a:hover, nav li a:focus, nav li a:active{
    color: #ff6c37;
}
#home a {
    color: #00afef;
}
#home a:hover {
    color: #00afef;
}
.tcon {
    display: none;
} 
/* MAIN */
.kontaktheader {
    line-height: 1.8;
    padding: 0 4em;
}
article, .article {
    margin:  2em 1em;
}
article h2 {
     padding-left: 2em;
}
article p {
    padding: 0 6em 0 3em;
}   
.article {
    text-align: center;
    padding: 0 1em;
}    
/* FOOTER */
.footer {
    display: inline-block;
    width: 40%;
    text-align: left;
    vertical-align: top;
    margin-left: 3em;
    padding: .5em 1em;
}
}  /* ENDE MEDIA QUERY */