/*******************************************************************************
        Copyright (c)2017 Wayotec GmbH
                          Alle Rechte vorbehalten                     
              http://www.wayotec.de oder info@wayotec.de  
              Umsetzung: Wayotec GmbH
*******************************************************************************/

#huelle
{
  background-color: white; 
  width: 100%;
  max-width: 1024px;
  margin:auto;
}

input#responsive-nav,label.responsive-nav-label 
{
  display: none;
}

nav a
{
  text-decoration:none;
  color: rgb(77,78,83);
  margin-right: 2.5em;       
}

nav a:hover
{
  border-bottom: 2px solid rgb(134,44,54);
}

.aktiv
{
  margin-right: 2.5em;
  color: rgb(134,44,54);
}

.responsiveMenu
{
  visibility: hidden;
  height: 0; 
}

.bild
{
  float: left;
  margin-right: 1.5em; 
  height: 23em;
  margin-top: 2em;
}

.bild2
  {
    width: 35%;
    display:block;
  }
  
.left
{
  float: left; 
  width: 60%;
}

.bildKit
{
  float: left;
  margin-right: 1.5em; 
  width: 29em;
}

body
{
  font-size: 1em;     
	font-family: Verdana, Arial, Helvetica, sans-serif;
  color: rgb(85,88,96);
  background-color: rgb(243,243,243)
}

footer
{
  text-align:right;
  width: 95%;
  padding-right: 1em;
  font-size: 0.9em;
  margin:auto;
  border-top: 2px solid rgb(128,128,128);
  max-width: 1280px;
  height: 2em;
}

footer a
{
  color:rgb(77,78,83);
  color: rgb(85,88,96);
}

footer a:hover
{
  color: rgb(134,44,54);
}

H1
{
  font-size: 1.2em;
  font-weight: bold;
}

html
{
  font-size: 100%; 
  height: 100%;
  width: 100%;
}

.inhalt
{
  text-align:left;
  width: 100%;
  padding-left: 1em;
  min-height:28em;
}

header
{
  top:0;
  margin: auto;
  margin-top: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  height: 100%;
  padding-bottom: 1em;
  padding-top: 1em;
  z-index:4;
  max-width: 1024px;
  border-bottom: 4px solid rgb(134,44,54);
}

H2
{
  font-size:1.1em;
}

.logo
{
  height: 4em;
  margin-top: 1em;
  float: left;
  margin-left: 1.5em;
}

nav
{
  text-align: right;
  margin-right: 0.7em;
  padding-top: 4.5em;
}

p
{
  padding-right: 2em;
  text-align: block;
  font-size: 1em;
  margin-bottom: 2em;
}

p a
{
  color: rgb(77,78,83);
  color: rgb(85,88,96);
}

p a:hover
{
  color: rgb(134,44,54);
}

main
{
  margin: auto;
  padding-top: 1.5em;
  text-align:center;
  width: 90%;
  max-width: 1024px;
  line-height: 1.3;
}

.shop2
{
  vertical-align:middle;
  color: rgb(134,44,54);
  font-weight: bold;
  border: 2px solid rgb(134,44,54);
    color: rgb(134,44,54);
  height: 4em;
  padding-left: 2em;
  padding-right: 2em;
}

.shop2:hover
{
  background-color: rgb(83,53,61);
  color: white;
}


@media screen and (min-width: 5em) and (max-width: 40em)
{
  header
  {
    border: 0;
  }
  .aktiv
  {
    margin-right: 0.8em;
    color: rgb(134,44,54);
  }
  
  .bildKit
  {
    float: left;
    margin-right: 1.5em; 
    width: 95%;
  }
  
  label.responsive-nav-label 
  {
    position: relative;
    text-align:left;
    display: block;
    padding-left: 1em;
    cursor: pointer;
    color: rgb(85,88,96);
  }
  
  label.responsive-nav-label span 
  {
    margin-right: 0.8em;  
  }
  
  .bild
  {
    width: 90%;
    height: auto;
    float:none;
    margin-top:0.9em;
  }
  
  .bild2
  {
    width: 0;
    display:none;
  }
  
  .left
  {
    float: left; 
    width: 95%;
  }
  
  .inhalt
  {
    text-align:left;
    width: 100%;
    padding-left: 1em;
    padding:0;
    font-size: 0.9em;
  }
  
  nav
  {
    visibility: hidden;
    height: 0px;
  }
  
  .responsiveMenu
  {
    height: 0px;
    text-align: left;
    padding-left: 0.7em;
  }
  
  .responsiveMenu a
  {
      display:block;
      width: 100%;
      background-color:  rgb(85,88,96);
      color: rgb(134,44,54);
      font-weight:bold;
      padding: 0.5em;
      margin: -0.5em;
      text-decoration:none;
  }
  
  .responsiveMenu a:hover
  {
     background-color: rgb(135,135,135);
  }
  
  input#responsive-nav[type=checkbox]:checked ~ .responsiveMenu
  {
    visibility: visible;
    height: 6em;
    margin-top: -4em;
  }
  
  .logo
  {
    width: 95%;
    margin-top: 1em;
    margin-left: 0;
    float:none;
  }
  
  .oben
  {
    text-align:center;
  }
  
  main
  {
    width: 95%;
    min-height:29em;
    padding: 0;
    margin:0;  
    border: 0;
    padding-left: 0.7em;
    margin-top: -1em;
  }
  
  p
  {
    padding-right: 0;
  }
}

@media  screen and (min-width: 40em) and (max-width: 60em)
{
  header
  {
    height: 8em;
  }
  
  main
  {
    width: 97%;
    margin-top: 0; 
    border: 0;
  }
  
  nav
  {
    padding-top: 6.5em;
    text-align: right;
    padding-right: 0.5em;
  }
  
  .logo
  {
    margin-right: -2.5em;
  }
  
  .inhalt
  {
    text-align:left;
    width: 100%;
    padding-left: 1em;
    padding-top: 2em;
    height: auto;
  }
  
  .bild
  {
    width: 20em;
    height: auto;
    margin-bottom: 2em;    
  }
  
  .bild2
  {
    width: 35%;
    display:block;
  }
  
  .left
  {
    float: left; 
    width: 60%;
  }
}