h1,h2,h3,h4,h5,h6 { font-family: "Muli", sans-serif; outline: none; }
body{ background: #f8f8f8; font-family: "Montserrat", sans-serif;color:#333 }
.w3-bar, button { font-family: "Montserrat", sans-serif; outline: none; }
.fa-anchor,.fa-coffee { font-size:200px }
a { text-decoration: none; }

.navbar { background-color: transparent; }

.background {
  background-image: url(../images/background.svg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
  display: table;
  background-attachment: fixed;
  background-position: bottom;
}

.success_div {
  display: none;
  padding: 20px;
  background: white;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom:0;
  margin: auto;
  z-index: 5;
  width: 90vw;
  max-width:500px;
  height:530px;
  border-radius: 15px;
  box-shadow: 0 0.1px 0.5px -10px rgba(0,0,0,.056),
  0 0.3px 1.3px -10px rgba(0,0,0,.081),
  0 0.5px 2.4px -10px rgba(0,0,0,.1),
  0 0.9px 4.2px -10px rgba(0,0,0,.119),
  0 1.7px 7.9px -10px rgba(0,0,0,.144),
  0 4px 19px -10px rgba(0,0,0,.2);
}

.inquiry_div {
  display: none;
  padding: 20px;
  background: white;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom:0;
  margin: auto;
  z-index: 5;
  width: 90vw;
  max-width:500px;
  height:385px;
  border-radius: 15px;
  box-shadow: 0 0.1px 0.5px -10px rgba(0,0,0,.056),
  0 0.3px 1.3px -10px rgba(0,0,0,.081),
  0 0.5px 2.4px -10px rgba(0,0,0,.1),
  0 0.9px 4.2px -10px rgba(0,0,0,.119),
  0 1.7px 7.9px -10px rgba(0,0,0,.144),
  0 4px 19px -10px rgba(0,0,0,.2);
}

.bill_div {
  display: none;
  padding: 20px;
  background: white;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom:0;
  margin: auto;
  z-index: 5;
  width: 90vw;
  max-width:500px;
  height:555px;
  border-radius: 15px;
  box-shadow: 0 0.1px 0.5px -10px rgba(0,0,0,.056),
  0 0.3px 1.3px -10px rgba(0,0,0,.081),
  0 0.5px 2.4px -10px rgba(0,0,0,.1),
  0 0.9px 4.2px -10px rgba(0,0,0,.119),
  0 1.7px 7.9px -10px rgba(0,0,0,.144),
  0 4px 19px -10px rgba(0,0,0,.2);
}

.headline {
  font-size: 53px;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 0px;
  text-shadow: 0 0 20px rgba(0,0,0,1);
}

.subline {
  font-size: 24px;
  max-width: 900px;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 0px;
  text-shadow: 0 0 20px rgba(0,0,0,1);
}

.header_button {
  border-radius: 25px;
  background-color: #1D96EE;
  color:white;
  -webkit-box-shadow: 10px 18px 33px -2px rgba(0,0,0,0.18);
  -moz-box-shadow: 10px 18px 33px -2px rgba(0,0,0,0.18);
  box-shadow: 10px 18px 33px -2px rgba(0,0,0,0.18);
}

.counter_container {
  max-width: 600px;
  width: 100vw;
  height: auto;
  background: white;
  overflow: hidden;
  border-radius: 0px 0px 15px 15px;
  padding: 15px 0px;
}

.counter_box_left, .counter_box_right, .counter_box_center {
  float: left;
  width: 33%;
}

.counter_image { height: 65px; }

.counter_number {
  font-size: 40px;
  margin: 0px 0px -10px 0px;
  color: #1D96EE;
}

.counter_subtext {
  font-size: 18px;
  color: #555;
}


span.msg, span.choose {
  color: #555;
  padding: 5px 0 10px;
  display: inherit;
  width: 300px;
}

.choose_ {
  color: #555;
  padding: 5px 0 10px;
  display: inherit;
  font-size:26px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  margin-bottom: 0px;
  max-width: 900px;
}
.price_{
  color:#1D96EE;
  padding: 5px 0 10px;
  display: inherit;
  font-size:39px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  margin-bottom: 0px;
  max-width: 900px;

}
.choose_sub {
  color: #d1d1d1;
  padding: 5px 0 10px;
  display: inherit;
  font-size: 16px;
  font-weight: 500;
  margin: 0px;
  padding: 0px;
}
.price_sub{
  padding: 5px 0 10px;
  display: inherit;
  font-size: 16px;
  font-weight: 500;
  margin: 0px;
  padding: 0px;
  max-width: 330px;
  width:95%;
}
.fragebogen {
  max-width: 750px;
  width: 95%;
  border-radius: 15px;
  box-shadow: 0 0.1px 0.5px -10px rgba(0,0,0,.056),
  0 0.3px 1.3px -10px rgba(0,0,0,.081),
  0 0.5px 2.4px -10px rgba(0,0,0,.1),
  0 0.9px 4.2px -10px rgba(0,0,0,.119),
  0 1.7px 7.9px -10px rgba(0,0,0,.144),
  0 4px 19px -10px rgba(0,0,0,.2);
  background-color: white;
  padding: 10px;
  padding-bottom: 30px;
  border:2px solid #1D96EE;
}

.price_headline{
  color:#1D96EE;
  padding: 5px 0 10px;
  display: inherit;
  font-size:39px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  margin-bottom: 0px;
  max-width: 900px;
}

.price_box {
  max-width: 490px;
  width: 95%;
  border-radius: 15px;
  box-shadow: 0 0.1px 0.5px -10px rgba(0,0,0,.056),
  0 0.3px 1.3px -10px rgba(0,0,0,.081),
  0 0.5px 2.4px -10px rgba(0,0,0,.1),
  0 0.9px 4.2px -10px rgba(0,0,0,.119),
  0 1.7px 7.9px -10px rgba(0,0,0,.144),
  0 4px 19px -10px rgba(0,0,0,.2);
  background-color: white;
  padding: 10px;
  padding-bottom: 30px;
  border:2px solid #1D96EE;
}

.inputfield {
  width: 300px;
  display: inline-block;
  background-color: #f8f8f8;
  border-radius: 5px;
  box-shadow: 0 0 2px rgb(204, 204, 204);
  transition: all .5s ease;
  position: relative;
  font-size: 16px;
  color: #474747;
  height: 40px;
  text-align: left;
  padding: 12px;
  border: none;
}

.input_box {
  display: inline-block;
  margin-top: 20px;
}

.platzhalter {
  display: inline-block;
  width:30px;
}

.send_button {
  background: #1D96EE;
  border: none;
  border-radius: 25px;
  padding: 10px 40px;
  color: white;
  margin-top: 40px;
  margin-bottom: 40px;
  outline: none;
}

.kachel1 {
  box-shadow: 0 0.1px 0.5px -10px rgba(0,0,0,.056),
  0 0.3px 1.3px -10px rgba(0,0,0,.081),
  0 0.5px 2.4px -10px rgba(0,0,0,.1),
  0 0.9px 4.2px -10px rgba(0,0,0,.119),
  0 1.7px 7.9px -10px rgba(0,0,0,.144),
  0 4px 19px -10px rgba(0,0,0,.2);
  background: white;
  max-width: 500px;
  border-radius: 15px;
  padding: 15px;
  float: left;
}

.kachel2 {
  box-shadow: 0 0.1px 0.5px -10px rgba(0,0,0,.056),
  0 0.3px 1.3px -10px rgba(0,0,0,.081),
  0 0.5px 2.4px -10px rgba(0,0,0,.1),
  0 0.9px 4.2px -10px rgba(0,0,0,.119),
  0 1.7px 7.9px -10px rgba(0,0,0,.144),
  0 4px 19px -10px rgba(0,0,0,.2);
  background: white;
  max-width: 500px;
  border-radius: 15px;
  padding: 15px;
  float: right;
  min-height: 300px;
}

.headerbox {
  padding: 5vh 5%;
  height: auto;
  color: white;
  padding-right: 20px;
  border-radius: 20px;
  min-width: 300px;
  text-align: left;
  position: absolute;
  left: 0;
  top: 0%;
  width: 50vw;
  height: 100vh;
  display: table;
}

.head_image {
  position: absolute;
  left:0;
  top: 14%;
  max-width: 830px;
  height: 100%
}

.head_image_box {
  position: relative;
  width: 40vw;
  height: 84vh;
  float: right;
}

.header_container {
  display: table-cell;
  vertical-align: middle;
}

.header_all {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.head_image2 { display: none; }

.active_tab {
  background: #1D96EE;
  border: none;
  border: 2px solid #1D96EE;
  padding: 5px 15px;
  border-radius: 25px;
  color: white;
}

.inactive_tab {
  background: white;
  border: 2px solid #1D96EE;
  padding: 5px 15px;
  color: #1D96EE;
  border-radius: 25px;
}

@media only screen and (max-width: 1460px) {
  .headerbox { width:57vw; }
}
@media only screen and (max-width: 850px) {
  .headline { font-size:50px; }
  .subline { width:100vw; font-size:22px; }
  .reference { font-size: 20px; }
  .header_all { display: table; }
  .head_image_box { display: none; }
  .head_image2 { display: block; height:70vh; margin-bottom:30px; }
  .headerbox {
    text-align: center;
    position: unset;
    height: auto;
    width: 100%;
    margin-top:60px;
    padding:0px;
    display:table-cell;
    vertical-align: middle;
  }

}
@media only screen and (max-width: 725px) {
  .fragebogen { width:100%; }
  .platzhalter { display: none; }
}

@media only screen and (max-width: 599px) {
  .counter_container { border-radius: 0px; }
}

@media only screen and (max-width: 570px) {
  .counter_number { font-size: 34px; }
  .counter_subtext { font-size: 16px; }
  .counter_image { height: 55px; }
}

@media only screen and (max-width: 519px) {
  .kachel2 { float: unset; }
}

@media only screen and (max-width: 480px) {
  .headline { font-size:48px; }
  .subline { font-size:21px; }
  .reference { font-size:18px; }
  .counter_number { font-size: 31px; }
  .counter_subtext { font-size: 14px; }
  .counter_image { height: 50px; }
}

@media only screen and (max-width: 410px) {
  .counter_number { font-size: 27px; }
}

@media only screen and (max-width: 380px) {
  .headline { font-size:40px; }
  .subline { font-size:18px; }
  .reference { font-size:16px; }
  .choose { width:auto!important; }
  .inputfield { width:96%; }
  .input_box { width:100%; }
}

@media only screen and (max-width: 360px) {
  .counter_box_left, .counter_box_right { float: none; width: 100%; margin-bottom: 10px;}
  .counter_box_center { float: none; width: 100%; }
}