/* start of styles */
  
@font-face { 
  font-family: "Amy"; 
  src: url("../fonts/Amy Sauly.ttf"); 
}

body {
font-family: Verdana;
margin: 0;
padding: 0;
background-color: #f8f7ca;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

.close {
  z-index:2000;
  position:relative;
  top:5px;
  float:right;
  right:5px;
  width:25px;
  cursor: pointer;
}

.popup-text{
  position: relative;
  left: 10px;
  top: 5px;
}

.row{
  margin: 0 10pt 0 10pt;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

table {
  border-spacing: 10px 4px;
  border: 1px solid #b4b21b;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 15px;
}

.vali {
  white-space: nowrap;
  vertical-align: text-top;
  text-align: right;
}

.hive {
  position: absolute;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  border: 1pt solid #000;
  left: 10px; top: 50px;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 15px;
  width: 98%;
  margin-left: 2pt;
  background-color: #faf89a;
}

.active,
.demo:hover {
  /*opacity: 1;*/
  font-weight: normal;
  color: black;
  background-color: rgb(248, 236, 60);
}

#nav1 {
  position: absolute;
  top: 60pt;
  width: 100%;
  height: 40pt;
}

#head {
  position: absolute;
  top: 0pt;
  width: 100%;
  height: 60pt;
}

p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.headline {
  font-size: 30pt;
  font-weight: 300;
  font-family: Amy;
  letter-spacing: 1pt;
  margin: 5pt 5pt 15pt 5pt;
}

.headline-small {
  font-size: 12pt;
  font-weight: 600;
  margin: 5pt 5pt 5pt 5pt;
}

.text {
  font-size: 11pt;
  margin: 0 0 0 6pt;
}

#row {
  flex-direction: row;
}

#col {
  flex-direction: column;
}

.pics {
  width: 32%;
  border: #b4b21b solid 1pt;
  border-radius: 10pt;
  margin: 5px;
}

.close:focus {
  cursor: pointer;
}

#row .box_content_page_pic{
  padding-right: 10pt;
}

#row-rev {
  flex-direction: row-reverse;
}

#row-rev .box_content_page_pic{
  padding-left: 10pt;
}

#iframe_div {
  width: 430px;
  align-self: center;
  z-index: -100;
}

.cl_kirsche {
  background-color: #cfcfca;
  border: rgb(248, 236, 60) solid 1pt;
  border-radius: 10pt;
}

.cl_kirsche_gelb {
  background-color: rgb(248, 236, 60);
  border: rgb(248, 236, 60) solid 1pt;
  border-radius: 10pt;
}

.cl_kirsche_gruen {
  background-color: #99f77d;
  border: rgb(248, 236, 60) solid 1pt;
  border-radius: 10pt;
}

.space {
  padding: 5px;
}

.spacer {
  height: 25pt;
}

.temp_head {
  position: relative;
  left: 5px;
  width: 100%;
  height: 20px;
}

.dot {
  position: relative;
  top: 12px;
  left: 8px;
  width: 20px;
  height: 20px;
  margin-right: 15px;
  float: left;
}

.temp_text {
  position: relative;
  top:10px;
  width: 100%;
  font-size: 11pt;
}

.table_view {
  display: table;
  width: 100%;
}

.impressum_text {
  padding: 5px;
}

.footer_text {
  padding: 5px;
  font-size: 13px;
}

.link {
  text-decoration: underline;
  color: #000;
}

.stand {
  font-weight: normal;
  font-size: 10px;
  position: relative;
  top: -6px;
}

.form_row {
  -webkit-justify-content: center;
  justify-content: center;
}

.form_left {
  position: relative;
  float: left;
}

.form_right {
  position: relative;
  float: right;
}

.form_only {
  position: inherit;
  width: 100%;
}

.senden {
  background-color: #faf89a;
  border: 1px solid #000;
  border-radius: 12pt;
  cursor: pointer;
  width: 20%;
}

.senden:hover {
  background-color: rgb(248, 236, 60);
  border: 1px solid #000;
  border-radius: 10pt;
  cursor: pointer;
}

input {
  width: 100%;
}

.hinweis {
  font-size: 11px;
}

input[required] {
  border-color: black;
}

.pic_roun {
  border-radius: 5%;
  border: #b4b21b solid 1pt;
  margin: 5px;
}

  @media only screen and (min-width: 950px) {
  /* start of desktop styles */

    #nav1 {display: block;}
    #nav3 {display:none;}
    #nav3 {visibility: hidden;}

    #head {
      text-align: center;
    }
    
    #head .main {
      font-size: 40pt;
      font-family:Amy;
      font-weight: 400;
      letter-spacing: 2pt;
      padding: 0;
      margin-top: 5pt;
    }

    .wappen {
      height:40px;
      padding:0 10px 0 0
    }

    .popup {
      display:block;
      position:absolute;
      top:212px;
      left:25%;
      border:2px solid #b4b21b;
      border-radius:15px;
      width:410px;
      height:250px;
      background-color:#faf89a;
      z-index:1000;
    }

    .frame_weight {
      width: 430px;
      height: 250px;
      border: #b4b21b solid 1pt;
      border-radius: 10pt;
      margin-top: 35px;
    }

    .dyn-pic {
      position:relative;
      float:left;
    }

    .demo p {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 11pt;
      font-weight: normal;
      color: black;
      padding-left: 10px;
      margin: 5pt;
    }

    #content {
      position: absolute;
      top: 60px;
      left: 3%;
      width: 95%;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    .content_page {
      width: 100%;
      display: flex;
      border: #b4b21b solid 1pt;
      border-radius: 10pt;
    }

    .content_page_pics {
      width: 100%;
      display: -webkit-inline-box;
    }

    .box_content_page_text_pics {
      position: relative;
      width: 97%;
      font-size: 12pt;
      margin-bottom: 5px;
    }

    .box_content_page_pics {
      display: contents;
      width: 30%;
      margin: 5pt;      
    }
    
    .box_content_page_pic {
      width: 20%;
      margin: 5pt;      
    }

    .box_content_page_text {
      position: relative;
      width: 80%;
      font-size: 12pt;
      margin: 0 0 0 6pt;
    }

    .articlenr{
      position:absolute;
      bottom: 5%;
      left: 25%;
      width: 200pt;
    }

    .articlenr p {
      font-size: 10pt;
      font-weight: 600;
    }

    .inhalt{
      position:absolute;
      bottom: 5%;
      left: 1%;
      width: 200pt;
    }

    .inhalt p {
      font-size: 10pt;
      font-weight: 600;
    }

    .bestand{
      position:absolute;
      bottom: 5%;
      left: 50%;
      width: 200pt;
    }

    .bestand p {
      font-size: 10pt;
      font-weight: 600;
    }

    .labor{
      position:absolute;
      bottom: 5%;
      left: 75%;
      width: 200pt;
    }

    .labor  a{
      font-size: 10pt;
      font-weight: 600;
      color: #000;
    }

    .preis{
      position:absolute;
      bottom: 15%;
      left: 1%;
      width: 200pt;
    }

    .preis p {
      font-size: 11pt;
      font-weight: 600;
    }

    .pfand{
      position:absolute;
      bottom: 15%;
      left: 25%;
      width: 300pt;
    }

    .pfand p {
      font-size: 10pt;
      font-weight: 600;
    }

    .w_100 {
      min-width: 210px;
      width: 100%;
      border-radius: 5%;
      border:#b4b21b solid 1pt;
    }

    .w_97 {
      width: 97%;
      border-radius: 5%;
      border: #b4b21b solid 1pt;
      margin: 5px;
    }

    .box_content_form_text {
      font-size: 12pt;
      padding: 2pt 0 2pt 3pt;
    }

  }
  
  @media only screen and (min-width: 440px) and (max-width: 950px) { 
  /* start of medium tablet styles */

    #nav1 {display: block;}
    #nav3 {display:none;}
    #nav3 {visibility: hidden;}

    #head {
      text-align: center;
    }
    
    #head .main {
      font-size: 40pt;
      font-family:Amy;
      font-weight: 400;
      letter-spacing: 2pt;
      padding: 0;
      margin-top: 5pt;
    }
    
    .row {
      position: absolute;
      width: 95%;
      top: 70px;
    }

    .row-rev {
      position: absolute;
      width: 95%;
      top: 70px;
    }

    .wappen {
      height:40px;
      padding:0 10px 0 0
    }

    .popup {
      display:block;
      position:absolute;
      top:172px;
      left:25%;
      border:2px solid #b4b21b;
      border-radius:15px;
      width:410px;
      height:250px;
      background-color:#faf89a;
      z-index:1000;
    }

    .frame_weight {
      width: 430px;
      height: 250px;
      border: #b4b21b solid 1pt;
      border-radius: 10pt;
      margin-top: 35px;
    }

    .demo p {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 11pt;
      font-weight: normal;
      color: black;
      padding-left: 2pt;
      margin: 3pt;
    }

    #content {
      position: absolute;
      top: 100px;
      left: 3%;
      width: 95%;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    .content_page {
      width: 100%;
      display: flex;
      border: #b4b21b solid 1pt;
      border-radius: 10pt;
    }

    .content_page_pics {
      width: 100%;
      display: -webkit-inline-box;
    }

    .box_content_page_text_pics {
      position: relative;
      width: 97%;
      font-size: 12pt;
      margin-bottom: 5px;
    }

    .box_content_page_pics {
      display: contents;
      width: 30%;
      margin: 5pt;      
    }

    .content_page_product {
      width: 100%;
      display: flex;
      border: #b4b21b solid 1pt;
      border-radius: 10pt;
      display: table;
    }
    
    .box_content_page_pic {
      width: 150px;
      margin: 5pt;  
      float: left;    
    }

    .box_content_page_text {
      position: relative;
      width: 80%;
      font-size: 12pt;
    }

    .articlenr{
      position:relative;
      left: 1px;
      width: 500px;
      float: left;
      padding-bottom:4px;
    }

    .articlenr p {
      font-size: 10pt;
      font-weight: 600;
    }

    .inhalt{
      position:relative;
      left: 1px;
      width: 500px;
      float: left;
      padding-bottom:4px;
    }

    .inhalt p {
      font-size: 10pt;
      font-weight: 600;
    }

    .bestand{
      position:relative;
      left: 0px;
      width: 500px;
      float: left;
      padding-bottom:4px;
    }

    .bestand p {
      font-size: 10pt;
      font-weight: 600;
    }

    .labor{
      position:relative;
      left: 0px;
      width: 500px;
      float: left;
      padding-bottom:4px;
    }

    .labor a {
      font-size: 10pt;
      font-weight: 600;
      color: #000;
    }

    .preis{
      position:relative;
      left: 0px;
      width: 500px;
      float: left;
      padding-bottom:4px;
    }

    .preis p {
      font-size: 11pt;
      font-weight: 600;
    }

    .pfand{
      position:relative;
      left: 0px;
      width: 500px;
      float: left;
      padding-bottom:4px;
    }

    .pfand p {
      font-size: 10pt;
      font-weight: 600;
    }

    .w_100 {
      width: 150px;
      border-radius: 5%;
    }

    .w_97 {
      width: 97%;
      border-radius: 5%;
      border: #b4b21b solid 1pt;
      margin: 5px;
    }

    .tablet_div {
      float:left;
      position:relative;
      width: 550px;
      padding: 8px;
    }

    .box_content_form_text {
      font-size: 12pt;
      padding: 2pt 0 2pt 3pt;
    }

  }
  
  @media only screen and (max-width: 440px) {
  /* start of phone styles */

    #nav1 {display:none;}
    #nav1 {visibility: hidden;}
    #nav3 {display: block;}

    #head {
      text-align: right;
      margin-right: 1pt;
    }
    
    #head .main {
      font-size: 36px;
      font-family:Amy;
      font-weight: 400;
      letter-spacing: 2pt;
      padding: 0 0 0 50px;
      margin: 8pt 8pt 0 0;
    }

    .wappen {
      height:30px;
      padding:0 10px 0 0
    }

    .popup {
      display:block;
      position:absolute;
      top:123px;
      left:0px;
      border:2px solid #b4b21b;
      border-radius:15px;
      width:410px;
      height:250px;
      background-color:#faf89a;
      z-index:1000;
    }

    .frame_weight {
      width: 410px;
      height: 250px;
      border: #b4b21b solid 1pt;
      border-radius: 10pt;
      margin-top: 35px;
    }

    #content {
      position: absolute;
      top: 100px;
      left: 3%;
      width: 95%;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    #row .box_content_page_pic{
      padding: 5px;
    }

    .box_content_page_pic_row {
      width: 40%;
      margin: 5px; 
      padding: 2px;
      float: left;   
    }

    .box_content_page_pic_row-rev {
      width: 40%;
      margin: 5px; 
      padding: 2px;
      float: right;   
    }

    .box_content_page_text {
      position: relative;
      width: 100%;
      font-size: 12pt;
      margin: 0 0 0 0;
      left: 0;
    }

    .w_50 {
      width: 100%;
      float: left;
    }

    .container {
      margin-left: 1pt;
    }

    .row {
      position: absolute;
      width: 95%;
      top: 70px;
    }

    .demo p {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 11pt;
      font-weight: normal;
      color: black;
      padding-left: 2pt;
      margin: 3pt;
    }

    .content_page {
      width: 100%;
      display: table;
      border: #b4b21b solid 1pt;
      border-radius: 10pt;
      padding: 5px;
    }
    
    .articlenr{
      position:relative;
      left: 1px;
      width: 100%;
      float: left;
      padding-bottom:4px;
    }

    .articlenr p {
      font-size: 10pt;
      font-weight: 600;
    }

    .inhalt{
      position:relative;
      left: 1px;
      width: 100%;
      float: left;
      padding-bottom:4px;
    }

    .inhalt p {
      font-size: 10pt;
      font-weight: 600;
    }

    .bestand{
      position:relative;
      left: 0px;
      width: 100%;
      float: left;
      padding-bottom:4px;
    }

    .bestand p {
      font-size: 10pt;
      font-weight: 600;
    }

    .labor{
      position:relative;
      left: 0px;
      width: 100%;
      float: left;
      padding-bottom:4px;
    }

    .labor  a{
      font-size: 10pt;
      font-weight: 600;
      color: #000;
    }

    .preis{
      position:relative;
      left: 0px;
      width: 100%;
      float: left;
      padding-bottom:4px;
    }

    .preis p {
      font-size: 11pt;
      font-weight: 600;
    }

    .pfand{
      position:relative;
      left: 0px;
      width: 100%;
      float: left;
      padding-bottom:4px;
    }

    .pfand p {
      font-size: 10pt;
      font-weight: 600;
    }

    .w_100 {
      width: 100%;
      border-radius: 5%;
    }

    .mobile_div{
      float:left;
      position:relative;
      width: 100%;
      padding: 8px;
    }

    .box_content_form_text {
      font-size: 12pt;
      padding: 2pt 0 2pt 3pt;
    }

    .w_97 {
      width: 97%;
      border-radius: 5%;
      border: #b4b21b solid 1pt;
      margin: 5px;
    }

    .box_content_page_pics {
      display: contents;
      width: 100%;
      margin: 5pt;      
    }

    .pics {
      width: 97%;
      border: #b4b21b solid 1pt;
      border-radius: 10pt;
      margin: 0 5px 10px 5px;
    }

  }