/*===================== Reset ==================*/

* {
margin: 0;
padding: 0;
}
ul {
    list-style: none;
}
/* ==================== Fonts ===================*/

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/open-sans-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/*===================== Layout, Schrift ==================*/

body {
background: #8F8F8F;
color: #F13B09;
font: normal 62.5%/1.4 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
max-width: 1200px;
min-width: 600px;
margin: auto;
}
#wrapper {
    position: relative;
    background: #161616;
    margin: 10px 0;
    padding: 40px;
    border-radius: 6px; 
    box-shadow: 5px 10px 10px #616161;
    box-sizing: border-box;
    behavior: url(PIE.htc);
}

h1 {
    font-size: 4em;
}
h2 {
    font-size: 2em;
    padding-left: 30%;
}
h3 {
    font-size: 2.8em; 
    padding: 20px 0 10px 0; 
    font-weight: normal;
}
h4 {
    padding: 10px 0 10px 0;
    font-size: 2.2em;
    font-weight: normal;
    color: #8F8F8F;
}
p, ul {
    font-size: 1.8em;
    padding: 0.5em 0;
    font-family: "Open Sans";
}
a {
    color: #808080;
    text-decoration: none;
}
a:hover {
    color: #B5B5B5;
}
.floatright {
    float: right;
    margin-left: 2em;
    margin-bottom: 1em;
}

.floatleft {
    float: left;
    margin-right: 2em;
    margin-bottom: 1em;
}
.clear {
    clear: both;
    }
.margintop {
    margin-top: 20px;
}
.marginbottom {
    margin-bottom: 30px;
}
.schatten {
    box-shadow: 5px 10px 10px #999;
    -moz-box-shadow: 5px 10px 10px #999;
    -webkit-box-shadow: 5px 10px 10px #999;
    behavior: url(PIE.htc);
}
.smart {
    display: none;
}
/*================== Navi ==============*/
#navi ul {
    font-size: 2em;
    padding: 0.6em 0;
    margin: 1em 0;
    border-top: 1px solid #F13B09;
    border-bottom: 1px solid #F13B09;
}
#navi ul li {
    display: inline;
    padding-right: 2em;
}
#navi ul li a {
    display: inline-block;
    color: #F13B09;
    text-decoration: none;
}
#navi ul li a:hover,
.index #index,
.vita #vita,
.arbeiten #arbeiten,
.galerie #arbeiten,
.atelier #atelier,
.kontakt #kontakt,
.aktuell #aktuell {
    color: #A0A0A0;
}

/*========================= Content ================*/
#content {
    margin: 0 4em;
}

/* heller Hintergrund für textreichere Seiten */
.vita #content, .impressum #content, .receive #content {
    color: #333;
    padding: 3.5em;
    border-radius: 6px;
    background: #e0e0e0; /* Old browsers */
    background: -moz-linear-gradient(top,  #e0e0e0 0%, #c0c0c0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#c0c0c0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e0e0e0 0%,#c0c0c0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e0e0e0 0%,#c0c0c0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e0e0e0 0%,#c0c0c0 100%); /* IE10+ */*/
    background: linear-gradient(top,  #e0e0e0 0%,#c0c0c0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#c0c0c0',GradientType=0 ); /* IE6-9 */
}
.vita #content a, .impressum #content a, .receive #content a {
    color: #800;
}
.vita #content a:hover, .impressum #content a:hover, .receive #content a:hover {
    color: #333;
}
/* Ende heller Hintergrund für textreichere Seiten */

.textbox {
    width: 80%;
    margin-bottom: 4em;
}
.titel {
    font-size: 4em;
    text-align: center;
    position: relative;
    right: 5%;
    top: 60px;
}
/* ===================== footer =================== */
#footer {
    clear: both;
    margin-top: 25px;
    padding-top: 25px;
    text-align: center;
    border-top : 1px solid red;
    overflow: auto;
}

/* ======================= Seite Arbeiten ===============*/
.arbeiten #content {
    height: 350px;
    margin: 0;
}
.arbeiten #content div {
    float: left;
    margin-right: 15px;
}
.arbeiten div#footer {
    float: none;
}
.arbeiten a img {
    border: 1px solid #CC0000;
}
.arbeiten a:hover img {
    border: 1px solid #FFf;
}
.arbeiten p {
    text-align: center;
    font-family: Times;
    font-style: italic;
}
/* ================== Galerien ===================*/
.galerie #content {
    float: left;
    width: 500px;
    min-height: 650px;
}
.galerie #side {
    position: relative;
    float: right;
    width: 200px;
}
.galerie #content ul {
    width: 60%;
    margin-top: 2em;
    border-top: 1px dotted #dedede;
}
.galerie #content ul li {
    font-size: 1.2em;
    padding: 0.5em;
    border-bottom: 1px dotted #dedede;
}
#side a.gallery {
    display:block; 
    display:inline-block; 
    border:1px solid #cc0000; 
    width:80px; 
    height:80px; 
    float:left; 
    margin:4px; 
    z-index:50;
}
a.slideb1 {background:url(bilder/galerie/bronze1vor.jpg);}
a.slideb2 {background:url(bilder/galerie/bronze2vor.jpg);}
a.slideb3 {background:url(bilder/galerie/bronze3vor.jpg);}
a.slideb4 {background:url(bilder/galerie/bronze4vor.jpg);}
a.slideb5 {background:url(bilder/galerie/bronze5vor.jpg);}
a.slideb6 {background:url(bilder/galerie/bronze6vor.jpg);}
a.slideb7 {background:url(bilder/galerie/bronze7vor.jpg);}
a.slideb8 {background:url(bilder/galerie/bronze8vor.jpg);}
a.slideb9 {background:url(bilder/galerie/bronze9vor.jpg);}
a.slideb10 {background:url(bilder/galerie/bronze10vor.jpg);}
a.slideb11 {background:url(bilder/galerie/bronze11vor.jpg);}
a.slideb12 {background:url(bilder/galerie/bronze12vor.jpg);}
a.slideb13 {background:url(bilder/galerie/bronze13vor.jpg);}
a.slideb14 {background:url(bilder/galerie/bronze14vor.jpg);}
a.slideb15 {background:url(bilder/galerie/bronze15vor.jpg);}
a.slideb16 {background:url(bilder/galerie/bronze16vor.jpg);}
a.slideh1 {background:url(bilder/galerie/holz1vor.jpg);}
a.slideh2 {background:url(bilder/galerie/holz2vor.jpg);}
a.slideh3 {background:url(bilder/galerie/holz3vor.jpg);}
a.slideh4 {background:url(bilder/galerie/holz4vor.jpg);}
a.slideh5 {background:url(bilder/galerie/holz5vor.jpg);}
a.slideh6 {background:url(bilder/galerie/holz6vor.jpg);}
a.slides1 {background:url(bilder/galerie/stahl1vor.jpg);}
a.slides2 {background:url(bilder/galerie/stahl2vor.jpg);}
a.slides3 {background:url(bilder/galerie/stahl3vor.jpg);}
a.slides4 {background:url(bilder/galerie/stahl4vor.jpg);}
a.slides5 {background:url(bilder/galerie/stahl5vor.jpg);}
a.slides6 {background:url(bilder/galerie/stahl6vor.jpg);}
a.slides7 {background:url(bilder/galerie/stahl7vor.jpg);}
a.slides8 {background:url(bilder/galerie/stahl8vor.jpg);}
a.slides9 {background:url(bilder/galerie/stahl9vor.jpg);}
a.slides10 {background:url(bilder/galerie/stahl10vor.jpg);}
a.slides11 {background:url(bilder/galerie/stahl11vor.jpg);}
a.slides12 {background:url(bilder/galerie/stahl12vor.jpg);}
a.slidest1 {background:url(bilder/galerie/stein1vor.jpg);}
a.slidest2 {background:url(bilder/galerie/stein2vor.jpg);}
a.slidest3 {background:url(bilder/galerie/stein3vor.jpg);}
a.slidest4 {background:url(bilder/galerie/stein4vor.jpg);}
a.slidest5 {background:url(bilder/galerie/stein5vor.jpg);}
a.slidest6 {background:url(bilder/galerie/stein6vor.jpg);}
a.slidet1 {background:url(bilder/galerie/terrakotta1vor.jpg);}
a.slidet2 {background:url(bilder/galerie/terrakotta2vor.jpg);}
a.slidet3 {background:url(bilder/galerie/terrakotta3vor.jpg);}
a.slidet4 {background:url(bilder/galerie/terrakotta4vor.jpg);}
a.slidet5 {background:url(bilder/galerie/terrakotta5vor.jpg);}
a.slidet6 {background:url(bilder/galerie/terrakotta6vor.jpg);}
a.slidet7 {background:url(bilder/galerie/terrakotta7vor.jpg);}

/*Vorschaubilder*/

/* #side .thumbs {width:180px; float: left;} */

/*Ausblenden der Bilder, Darstellen bei hover bzw. focus */
a.gallery em {
    display:none;
}
a.gallery:hover, #side a.gallery:hover, .atelier a.gallery:hover {
    border:1px solid #fff;
}
#side a.gallery:active em, #side a.gallery:focus em {
    display:block;
    border: 1px solid #b5b5b5; 
    position:absolute; 
    top: -70px; 
    left: -540px; 
    z-index:50;
    box-shadow: 2px 5px 5px #333;
    -moz-box-shadow: 2px 5px 5px #333;
    -webkit-box-shadow: 2px 5px 5px #333;
    behavior: url(PIE.htc);
}

/* ===================== Atelier ===================*/
.atelier #content {
    position: relative;
}
.atelier a.gallery {
    display:block;
    display:inline-block;
    border:1px solid #cc0000;
    width:360px;
    height:270px;
    float:left;
    margin:4px;
    z-index:50;
}
a.slidea1 {background:url(bilder/atelier1klein.jpg);}
a.slidea2 {background:url(bilder/atelier2klein.jpg);}
a.slidea3 {background:url(bilder/atelier3klein.jpg);}
a.slidea4 {background:url(bilder/atelier4klein.jpg);}

.atelier a.gallery:active em, .atelier a.gallery:focus em {
    display:block;
    border: 1px solid #b5b5b5;
    position:absolute;
    top: -20px;
    left: -40px;
    z-index:50;
    box-shadow: 2px 5px 5px #333;
    -moz-box-shadow: 2px 5px 5px #333;
    -webkit-box-shadow: 2px 5px 5px #333;
    behavior: url(PIE.htc);
}
/* ========================== Kontaktformular ==================== */
.kontakt p {
    font-size: 1.5em;
}
  form.yform {
    background: #9F9F9F;
    border: 1px #ddd solid;
    margin: 2em 0 1em 0;
    padding: 10px;
    width: 40%;
  }

  form.yform fieldset {
    border: 1px #ddd solid;
    background: #B2B2B2;
    margin: 0 0 1em 0;
    padding: 1em 1em;
  }

  form.yform legend {
    font-size: 1.2em; color: #000;
  }

  form.yform label {
    color: #000;
  }

  form.yform .type-text input,
  form.yform .type-text textarea,
  form.yform .type-select select {
    font-family:  Arial, Helvetica, sans-serif; /* proportional fonts for all form elements */
    border: 1px solid #ddd;
  }

  /* :hover and :focus status on form fields | Effekt zur Hervorhebung von Formularfeldern bei :hover oder :focus */
  form.yform div input:focus,
  form.yform div select:focus,
  form.yform div textarea:focus,
  form.yform div input:hover,
  form.yform div select:hover,
  form.yform div textarea:hover,
  form.yform div input:active,
  form.yform div select:active,
  form.yform div textarea:active {
    border: 1px #a66 solid;
    background: #fff;
  }

  /* Styling of buttons | Gestaltung von Buttons */
  form.yform .type-button input {
    border-top: 1px #ddd solid;
    border-left: 1px #ddd solid;
    border-right: 1px #444 solid;
    border-bottom: 1px #444 solid;
    color: #000;
    padding: .5em 1.2em;
  }

  form.yform .type-button input#submit { color: #ddd; background: #661717; }

  /* :hover and :focus status on buttons | Effekt zur Hervorhebung von Schaltern bei :hover oder :focus */
  form.yform div.type-button input:focus,
  form.yform div.type-button input:hover,
  form.yform div.type-button input:active {
    border-top: 1px #444 solid;
    border-left: 1px #444 solid;
    border-right: 1px #ddd solid;
    border-bottom: 1px #ddd solid;
    color: #fff;
    background: #ccc;
  }


  form.yform div.type-button input#submit:focus,
  form.yform div.type-button input#submit:hover,
  form.yform div.type-button input#submit:active {
    background: #800; color: #fff;
  }

  /**
   * Form related bugfixes
   *
   * @bugfix
   * @affected   IE 5.x/Win, IE6, IE7
   * @css-for    IE 5.x/Win, IE6, IE7
   * @valid      no
   */
  fieldset, legend { position:relative; }
  /* global fixes for YAML's form construction set */
  form.yform,
  form.yform div,
  form.yform div * { zoom:1; }


  /* General form styling  | Allgemeine Formatierung des Formulars */
  form.yform { overflow: hidden; }
  form.yform fieldset { overflow: hidden; }
  form.yform legend { background: transparent; border: 0; }
  form.yform label { display:block; cursor: pointer; }
  form.yform .message { display: block; margin-bottom: 0.5em; color: #666; }

  /* Hiding of hidden fields (otherwise ugly spaces in Firefox) | Versteckte Felder wirklich verstecken (sonst ggf. häßliche Lücken im Firefox) */
  form.yform input[type=hidden] { display: none !important; }

  /* Highlight mandatory fields | Pflichtfeldkennzeichnung hervorheben */
  form.yform sup { color: #800; font-weight: bold; }

  /* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente */
  form.yform div.type-text,
  form.yform div.type-select,
  form.yform div.type-check,
  form.yform div.type-button {
    margin: 0.5em 0;
    position: relative;
    overflow: hidden;
  }

  /* styling standard form elements with 'almost' equal flexible width | Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite */
  form.yform .type-text input,
  form.yform .type-text textarea {
    display: block;
    position: relative;
    padding: 0.3em 0.3em;
    width: 80%;
  }

  form.yform .type-check input { cursor: pointer; }
  form.yform .type-check label { display: inline; }

  /* Styling of buttons | Gestaltung von Buttons */
  form.yform .type-button input {
    width: auto;
    cursor: pointer;
  }