html, body {
    background: #fff;text-align: center; margin: 0; padding: 0; height: 100%; width: 100%;
   font-family: 'Inconsolata', monospace;  font-size: 0.9em; color: #000;
   background: url('../images/b1.png') left bottom no-repeat; background-attachment: fixed;
   letter-spacing:4px; text-transform: lowercase; line-height: 1.7em;
}
#wrap {
    margin: 0 auto; width: 100%; max-width: 1150px; text-align: left; min-width: 320px;
}

a {
     color: #000;
}
#logo {
    float: left; width: 25%; margin: 20px 0;
}

#herz {
    display: inline-block; margin:10px 20px;
}

#content {
    float: left; width: 90%;  padding: 30px 5%;
      margin: 20px 0;
}


#bilder {
    float: left; width: 60%;
}

h2 {
        font-family: 'Rozha One', serif; color: #ec6608; font-size: 1.5em;
}
h3 {
    font-weight: normal; font-size: 1.0em;
}

#versandmeldung {
  float: left; width: 100%; padding:50px 0; margin: 0; text-align: center;

}

.loginformular {
margin: 50px 5% 100px; float: left; width: 90%; font-size: 1.2em;
}

#kontaktformluar {
    float: left; width: 100%; padding: 30px; margin: 0;font-size: 1.1em; box-sizing: border-box; border: 3px solid #000;
}


.kontaktformcontainer fieldset {
    border: none; padding: 10px 0;
}

.kontaktformular p {
width: 100%;
float: left;
}
.formfeld {
    float: left; width: 100%; margin: 2px 0;
}

legend {
display: none;
}

input, textarea {
padding: 10px;
color: #000;
background: #fff;
border: 1px solid #000; font-family: 'Inconsolata', monospace;
font-size: 1.2em; color: #ec6608;
}
.kontaktformular label {
float: left;
width: 30%;
margin: 0;
font-size: 1.3em;

}

.kontaktformular input {
float: left;
width: 65%;
margin: 0; box-sizing: border-box;
}

.kontaktformular .hauptauswahl {
    float: left; width: 100%; padding: 20px 0; background:#d9e1d7; margin: 0 0 20px;
}
.kontaktformular .hauptauswahl .formfeld {
    margin: 5px 0;
}

.kontaktformular .hauptauswahl input {
    width: 30px; margin: 10px;
}
.kontaktformular .hauptauswahl label {
    width: 80%;
}


.kontaktformular select {
float: left;
width: 65%;
margin: 1px 0;
padding: 4px;
}

div.formclear {
float: left;
width: 100%;
}

.kontaktformular textarea {
width: 95%;
max-width: 700px;
height: 120px;
margin-bottom: 10px;box-sizing: border-box;
}


div.formfehler {
width: 80%;
float: right;
color: #f00;
text-align: center;
font-size:0.6em;
font-family: Arial, sans-serif;
}

input.fehlerfeld {
background: #fcc;
border: 1px solid #f00;
}

form {
margin: 0;
}

input.button {
background: #ec6608; color: #fff; padding: 10px 20px;
font-weight: normal;
cursor: pointer;border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
max-width: 200px;
font-family: 'Rozha One', serif;
text-transform: lowercase;
font-size: 1.3em;

}
input.button:hover {
background: #000;
}

img {
    max-width: 80%; height: auto;
}

.zusatzinfos {
    float: left; width: 100%; margin: 0 0 20px; border-bottom: 2px solid  #d9e1d7; display: none;
}

.kontaktformular .zusatzinfos input {
    width: 55%;
}
.loginformular label {
    width:25%; float: left; padding: 5px 0;
}
.loginformular input {
    width: 70%; float: left;
}
.loginformular input.button {
    width: auto; float: left; margin-left: 25%
}
.loader {
    float: left; width: 100%; text-align: center; margin: 20px 0;
}

.galerie {
    float: left; width: 100%;font-family: 'Rozha One', serif;
}
.galerie ul {
    list-style: none; margin: 0; padding: 0;
}

.galerie ul li {
float: left; width: 16.66%; margin: 0; padding: 5px; box-sizing: border-box; position: relative; text-align: center;  font-size: 0.8em;
}
.galerie ul li a, .galerie ul li a img {
    display: block; float: left; width: 100%; max-width: 100%; letter-spacing: 2px;
}

@font-face {
      font-family: 'icons';
      src: url('./font/icons.eot?19032864');
      src: url('./font/icons.eot?19032864#iefix') format('embedded-opentype'),
           url('./font/icons.woff?19032864') format('woff'),
           url('./font/icons.ttf?19032864') format('truetype'),
           url('./font/icons.svg?19032864#icons') format('svg');
      font-weight: normal;
      font-style: normal;
    }


.galerie ul li span {
    position: absolute; left: 0; bottom: 0; width: 50%; background: rgba(255,255,255,0.6); padding: 10px 0; display: none; color: #000;
}
.galerie ul li span::before {
 display: inline-block; padding: 0 5px 0 0;
  font-family: 'icons';
  text-decoration: none; font-size: 1.2em;
  content: "\e801";
}
.galerie ul li a.dllink {
    position: absolute; right: 0; bottom: 0; width: 50%; background: rgba(255,255,255,0.6); padding: 10px 0; display: none; text-decoration: none; color: #000;
}
.galerie ul li a.dllink::before {
 display: inline-block; padding: 0 5px 0 0;
  font-family: 'icons';
  text-decoration: none; font-size: 1.2em;
  content: "\e800";
}
.galerie ul li:hover span, .galerie ul li:hover a.dllink {
    display: block;
}
.galerie ul li span:hover, .galerie ul li a.dllink:hover {
background: rgba(255,255,255,0.9);
}

a#lolink {
    display: inline-block; padding: 10px 20px; color: #fff; font-size: 1.2em; text-decoration: none;
    background: #ec6608; color: #fff; padding: 10px 20px;
font-weight: normal;
font-family: 'Rozha One', serif;
text-transform: lowercase;
}

@media only screen and (max-width: 1360px) { .galerie ul li { width: 20%;} }
@media only screen and (max-width: 1160px) { .galerie ul li { width: 25%;} }
@media only screen and (max-width: 960px) {
.galerie ul li { width: 33.333%;}

.loginformular label {
    width:100%; padding: 5px 0;
}
.loginformular input {
    width: 100%;
}
.loginformular input.button {
    margin-left: 0;
}

}
@media only screen and (max-width: 680px) { .galerie ul li { width: 50%; font-size: 0.65em;   }  #content { background-size: 50% auto;}     }
@media only screen and (max-width: 380px) { .galerie ul li { width:100%;} }