html {
  font-size: 16px !important;
}
body {
  position: relative;
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: #0e0e0e;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.96rem;
}
@media screen and (min-width: 600px) {
  body {
    font-size: 1.2rem;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
}
p {
  margin: 0 0 1em 0;
}
a {
  text-decoration: none;
}
.tablewrap {
  width: 100%;
  overflow-x: auto;
  margin: 0 0 5rem 0;
}
table {
  border-collapse: collapse;
  text-transform: uppercase;
  margin: 0 auto;
}
th {
  border: 2px solid #11580c;
  padding: 0.25rem 2rem;
}
th.noborder {
  border: 0;
}
td {
  border: 2px solid #11580c;
  background-color: #11580c;
  color: #fff;
  padding: 1.25rem 2rem;
}
.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 1rem;
}
@media screen and (min-width: 1200px) {
  .wrap {
    max-width: 1500px;
  }
}
.header {
  position: relative;
  overflow: hidden;
}
.main-menu {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100vh;
  background-color: #11580c;
  z-index: 200;
  transition: all 0.2s;
}
@media screen and (min-width: 900px) {
  .main-menu {
    width: 40%;
  }
}
.main-menu.visible {
  left: 0;
}
@media screen and (min-width: 600px) {
  .main-menu.visible {
    left: 60%;
  }
}
.main-menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 2rem;
  line-height: 200%;
}
.main-menu a {
  color: #fff;
}
.hero {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 100%;
  padding-bottom: 2rem;
  background-color: #11580c;
}
@media screen and (min-width: 900px) {
  .hero {
    padding-bottom: 0;
    height: 100vh;
    padding-top: 60vh;
    justify-content: center;
  }
}
.videoplayer {
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 80vw;
  object-fit: cover;
}
@media screen and (min-width: 900px) {
  .videoplayer {
    position: absolute;
    height: 100%;
  }
}
@keyframes showherotext {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.herotext {
  z-index: 100;
  color: #fff;
  font-size: 3rem;
  font-weight: bold;
  animation: showherotext 3s linear 1;
  padding: 2rem 1rem 0 1rem;
  margin-top: -1px;
  background-color: #11580c;
  text-align: center;
}
@media screen and (min-width: 900px) {
  .herotext {
    padding: 0;
    background-color: transparent;
  }
}
@keyframes showherobutton {
  0% {
    opacity: 0;
    transform: scale(0.01);
  }
  80% {
    opacity: 0;
    transform: scale(0.01);
  }
  90% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.herobutton {
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18rem;
  height: 4rem;
  border-radius: 9rem;
  background-color: #072606;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25rem;
  animation: showherobutton 3s ease 1;
}
@media screen and (min-width: 900px) {
  .herobutton {
    background-color: #11580c;
  }
}
.motto {
  padding: 5rem 0;
  background-color: #fff;
  text-align: center;
}
.motto .wrap {
  position: relative;
  max-width: 900px;
}
.motto p {
  margin-bottom: 3.5rem;
}
.pie {
  width: 50vw;
  height: 50vw;
  margin: 5rem auto 0 auto;
}
@media screen and (min-width: 900px) {
  .pie {
    margin: 0;
    position: absolute;
    right: -20rem;
    bottom: -15rem;
    width: 27rem;
    height: 27rem;
  }
}
.pie svg {
  display: block;
  width: 100%;
  height: 100%;
}
.warranty {
  padding: 5rem 0;
  background-color: #11580c;
  color: #fff;
  text-align: center;
}
.warranty .wrap {
  max-width: 900px;
}
.bgimage {
  position: relative;
  width: 100%;
  background: #0e0e0e url(../img/fadeslide1.jpg) 50% 50% no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 900px) {
  .bgimage {
    padding: 15rem 0;
  }
}
.fadeslider {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
.fadeslide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s;
}
.fadeslide.visible {
  opacity: 1;
}
.fadeslide:nth-child(1) {
  background: url(../img/fadeslide1.jpg) 50% 50% no-repeat;
  background-size: cover;
}
.fadeslide:nth-child(2) {
  background: url(../img/fadeslide2.jpg) 50% 50% no-repeat;
  background-size: cover;
}
.fadeslide:nth-child(3) {
  background: url(../img/fadeslide3.jpg) 50% 50% no-repeat;
  background-size: cover;
}
.bgimage-text {
  z-index: 20;
  padding: 4rem 2rem;
  color: #fff;
  text-align: center;
  background-color: rgba(14, 14, 14, 0.95);
  text-transform: uppercase;
  font-weight: bold;
}
@media screen and (min-width: 900px) {
  .bgimage-text {
    padding: 4rem 8rem;
  }
}
.bgimage-text p {
  color: #84d868;
  font-weight: normal;
  text-transform: none;
  margin: 1em 0 0 0;
}
.reasons {
  text-align: center;
  background-color: #e7f6e3;
  padding: 2rem 1rem;
}
@media screen and (min-width: 900px) {
  .reasons {
    padding: 8rem 1rem;
  }
}
.reasons .title {
  max-width: 600px;
  margin: 0 auto 5rem auto;
  color: #072606;
}
.reasons-box {
  display: flex;
  flex-wrap: wrap;
  max-width: 900px;
  align-items: top;
  justify-content: center;
  margin: 0 auto;
}
.reason {
  position: relative;
  padding: 1rem;
  display: inline-block;
  max-width: 15rem;
  border: 0.25rem solid #84d868;
  font-weight: bold;
  color: #11580c;
  margin: 2rem;
}
.reason::after {
  display: block;
  content: "";
  position: absolute;
  width: 96px;
  height: 54px;
  background: #e7f6e3 url(../img/bg_reason.png) 0 0 no-repeat;
  top: -50px;
  left: 50%;
  margin-left: -48px;
}
.epc {
  background-color: #fff;
  text-align: center;
  padding: 8rem 1rem;
}
.epc .title {
  color: #072606;
}
.epc p {
  margin: 0 auto;
  max-width: 600px;
}
.epc-subtitle {
  position: relative;
  background-color: #11580c;
  color: #fff;
  display: inline-block;
  text-transform: uppercase;
  padding: 1.5rem 2rem;
  font-weight: bold;
  margin-bottom: 3rem;
}
.epc-subtitle::after {
  box-sizing: border-box;
  content: "";
  position: absolute;
  bottom: -3rem;
  left: 50%;
  margin-left: -1.5rem;
  width: 3rem;
  height: 3rem;
  border-top: 1.5rem solid #11580c;
  border-left: 1.5rem solid transparent;
  border-right: 1.5rem solid transparent;
}
.epc-graph {
  margin: 0 auto;
  max-width: 800px;
}
.epc-graph img {
  display: block;
  max-width: 100%;
}
.contact {
  padding: 10rem 0;
  background-color: #11580c;
  color: #fff;
  text-align: center;
}
.contact .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 900px) {
  .contact .wrap {
    flex-direction: row;
  }
}
.contact p {
  text-align: left;
  margin: 1rem 0 0 0;
  padding: 1rem 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
@media screen and (min-width: 900px) {
  .contact p {
    margin: 0;
    padding: 1rem 1rem 1rem 5rem;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
  }
}
.contact .title {
  margin: 0;
}
@media screen and (min-width: 900px) {
  .contact .title {
    padding: 1rem 5rem 1rem 1rem;
  }
}
.contact a {
  color: #fff;
}
.blocks {
  padding: 5rem 0;
  text-align: center;
}
.blocks .wrap {
  display: grid;
  gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 900px) {
  .blocks--1-1 .wrap {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 900px) {
  .blocks--1-1-1 .wrap {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 900px) {
  .blocks--1-2 .wrap {
    grid-template-columns: 1fr 2fr;
  }
}
@media screen and (min-width: 900px) {
  .blocks--2-1 .wrap {
    grid-template-columns: 2fr 1fr;
  }
}
.block {
  align-self: center;
}
.title {
  margin-bottom: 1em;
  font-size: 2rem;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}
@media screen and (min-width: 900px) {
  .title {
    font-size: 3.125rem;
  }
}
.mybutton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18rem;
  height: 4rem;
  border-radius: 9rem;
  background-color: #11580c;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25rem;
  margin: 0 auto;
}
.mybutton--inverse {
  background-color: #fff;
  color: #11580c;
}
.calc {
  color: #fff;
  padding: 1rem;
  background-color: #11580c;
}
@media screen and (min-width: 900px) {
  .calc {
    padding: 0 1rem;
  }
}
.calc .wrap {
  max-width: 1200px;
  background-color: #fff;
  color: #0e0e0e;
  padding: 3rem 1rem 1rem 1rem;
}
@media screen and (min-width: 900px) {
  .calc .wrap {
    padding: 10rem 5rem 5rem 5rem;
  }
}
.calc ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.calc ul li {
  padding: 1rem;
}
.calc ul li span {
  display: block;
}
.calc ul .t {
  padding: 0 0 0.5rem 0;
}
@media screen and (min-width: 900px) {
  .calc ul .t {
    padding: 0 1rem 0 0;
  }
}
.calc ul .t.custom {
  position: relative;
}
.calc ul .t.custom::after {
  position: absolute;
  content: "W";
  display: block;
  right: 1.25rem;
  top: 0.7rem;
  width: 2rem;
  height: 2rem;
}
.calc ul li:nth-child(even) {
  background-color: #e0eadf;
}
@media screen and (min-width: 900px) {
  .calc ul {
    width: 100%;
    display: table;
  }
  .calc ul li {
    display: table-row;
  }
  .calc ul li span {
    display: table-cell;
    vertical-align: top;
  }
  .calc ul li:nth-child(even) {
    background-color: transparent;
  }
}
.calc .pricebox {
  display: flex;
  flex-direction: column;
  margin: 0 auto 5rem auto;
  width: 90%;
  text-align: center;
}
.calc .price {
  display: block;
  width: 100%;
}
.calc .backselect {
  display: none;
  padding-top: 0.25rem;
}
.calc .backselect span {
  display: inline-block;
  color: #fff;
  background-color: #11580c;
  border-radius: 9rem;
  cursor: pointer;
  padding: 0.25rem 1rem 0.25rem 1rem;
  font-size: 0.75em;
}
.calc .custom .backselect {
  display: block;
}
.calc .label {
  padding-bottom: 0.25rem;
}
@media screen and (min-width: 900px) {
  .calc .label {
    padding-bottom: 1rem;
    font-weight: bold;
    font-size: 1.5rem;
  }
}
.calcform {
  color: #0e0e0e;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 4rem 1rem;
  max-width: 1200px;
  background-color: #e7f6e3;
}
@media screen and (min-width: 900px) {
  .calcform {
    padding: 4rem;
  }
}
.buttons {
  padding-top: 3rem;
  text-align: center;
}
.button {
  position: relative;
  display: inline block;
  margin: 0.25rem;
  text-transform: uppercase;
  cursor: pointer;
}
@media screen and (min-width: 600px) {
  .button {
    margin: 1rem;
  }
}
.button::before {
  position: relative;
  font-weight: bold;
}
@media screen and (min-width: 600px) {
  .button::before {
    top: 2px;
    font-size: 1.5em;
  }
}
.button.addrow::before {
  content: "+ ";
}
.button.removerow::before {
  content: "− ";
}
.mailbox {
  text-align: center;
}
.mailbox input {
  margin-top: 3rem;
}
@media screen and (min-width: 900px) {
  .mailbox input {
    margin-top: 0;
  }
}
.submitbox {
  padding-top: 3rem;
  text-align: center;
}
.footer {
  padding: 10rem 5rem;
  text-align: center;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 255;
  display: none;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #11580c;
  color: #fff;
  font-size: 2rem;
}
@media screen and (min-width: 900px) {
  .overlay {
    font-size: 5rem;
  }
}
.overlay.visible {
  display: flex;
}
.overlay a {
  display: inline-block;
  margin-top: 3rem;
  color: #fff;
  font-size: 0.5em;
}
.overlay-savings {
  font-weight: bold;
  font-size: 5rem;
  margin-bottom: 3rem;
}
@media screen and (min-width: 900px) {
  .overlay-savings {
    font-size: 10rem;
    margin-bottom: 5rem;
  }
}
.overlay-close {
  padding: 1rem 3rem;
  border: 2px solid #fff;
  border-radius: 9rem;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 3rem;
}
.overlay-close:hover {
  color: #11580c;
  background-color: #fff;
}
.hidden {
  display: none;
}
.tac {
  text-align: center;
}
.tal {
  text-align: left;
}
.fwb {
  font-weight: bold;
}
.big {
  font-size: 1.2em;
}
.bigger {
  font-size: 1.5em;
}
fieldset {
  margin: 0 0 4rem 0;
  padding: 0;
  border: 0;
}
.calcform input,
.calcform select {
  box-sizing: border-box;
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-size: 1.2rem;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
  height: 49px;
}
@media screen and (min-width: 900px) {
  .calcform input,
  .calcform select {
    min-width: 15rem;
    width: 100%;
  }
}
input[type="number"],
select {
  border: 2px solid #11580c;
  background-color: #fff;
}
input[type="email"] {
  border: 2px solid transparent;
  background-color: #e0eadf;
}
input[type="email"]::placeholder {
  color: #0e0e0e;
  opacity: 1;
}
input[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18rem;
  height: 4rem;
  border-radius: 9rem;
  background-color: #11580c;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25rem;
  margin: 0 auto;
  border: 0;
  cursor: pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
input[type=number] {
  -moz-appearance: textfield;
}
input[type=range] {
  margin: 10px 0;
  width: 100%;
  height: 25px;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  border: 0;
  border-radius: 9rem;
  background: #84d868;
  box-shadow: 0px 0px 0px #000000;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  box-sizing: border-box;
  margin-top: -0.55rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.4rem solid #fff;
  border-radius: 9rem;
  background: #11580c;
  box-shadow: 0px 0px 0px 1px #11580c;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #84d868;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  border: 0px solid #000000;
  border-radius: 9rem;
  background: #84d868;
  box-shadow: 0px 0px 0px #000000;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.4rem solid #fff;
  border-radius: 25px;
  background: #11580c;
  box-shadow: 0px 0px 0px 1px #11580c;
  cursor: pointer;
}
select {
  border: 2px solid #11580c;
  border-radius: 0.25rem;
  background-color: #fff;
  /* SVG background image */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%230e0e0e%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: calc(100% - 1.3em) center;
  background-size: 0.6em;
  background-repeat: no-repeat;
  /* needed */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select::-ms-expand {
  display: none;
}
/**
 * OokHamburger
 *
 * Pure CSS animated hamburger menu button.
 *
 * Exmaple code:
 *
 * <div id="hamburger">
 *   <span>Toggle menu</span>
 * </div>
 *
 * <nav id="main-menu" class="main-menu" role="navigation">
 *   <ul>
 *     <li><a href="#">link</a></li>
 *   </ul>
 * </nav>
 *
 * <script>
 *   const toggle = document.getElementById('hamburger');
 *   const mainMenu = document.getElementById('main-menu');
 *   if(toggle) {
 *     toggle.addEventListener( "click", function(e) {
 *       e.preventDefault();
 *       (this.classList.contains("active") === true) ? this.classList.remove("active") : this.classList.add("active");
 *       (mainMenu.classList.contains("visible") === true) ? mainMenu.classList.remove("visible") : mainMenu.classList.add("visible");
 *     });
 *   }
 * </script>
 */
#hamburger {
  z-index: 201;
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  width: 4.5rem;
  height: 4.5rem;
  background: transparent;
  font-size: 0;
  cursor: pointer;
  transition: background 0.2s;
}
@media screen and (min-width: 600px) {
  #hamburger {
    top: 2rem;
    right: 2rem;
  }
}
#hamburger span {
  position: absolute;
  top: 46.875%;
  left: 18.75%;
  width: 62.5%;
  height: 0.1875rem;
  background-color: white;
  transition: background 0s 0.2s;
}
#hamburger span:before,
#hamburger span:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  transition-delay: 0.2s, 0s;
  transition-duration: 0.2s, 0.2s;
}
#hamburger span:before {
  top: -400%;
  transition-property: top, transform;
}
#hamburger span:after {
  bottom: -400%;
  transition-property: bottom, transform;
}
#hamburger.active span {
  background: none;
}
#hamburger.active span:before {
  top: 0%;
  transition-delay: 0s, 0.2s;
  transform: rotate(45deg);
}
#hamburger.active span:after {
  bottom: 0%;
  transition-delay: 0s, 0.2s;
  transform: rotate(-45deg);
}
.cookiebar {
  display: none;
  z-index: 250;
}
.cookiebar.visible {
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  max-height: 100vh;
  padding: 1rem;
  background-color: #e0eadf;
  color: #0e0e0e;
  overflow-y: auto;
  font-size: 0.9rem;
}
.cookiebar-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
@media all and (min-width: 1200px) {
  .cookiebar-main {
    flex-direction: row;
  }
}
.cookiebar-main__title {
  text-transform: uppercase;
}
@media all and (min-width: 1200px) {
  .cookiebar-main__title {
    font-size: 1.5em;
  }
}
@media all and (min-width: 1200px) {
  .cookiebar-main__actions {
    white-space: nowrap;
    padding-right: 3rem;
  }
}
.cookiebar-button {
  margin: 1em 0;
  border: 0;
  background-color: #11580c;
  color: #fff;
  padding: 1em;
  cursor: pointer;
  transition: all 0.2s;
}
.cookiebar-button:hover {
  background-color: #082b06;
}
.cookiebar-button--acceptall {
  background-color: #11580c;
  color: #fff;
  font-weight: bold;
}
.cookiebar-button--acceptall:hover {
  background-color: #004d00;
}
.cookiebar-button--save {
  background-color: #11580c;
  color: #fff;
}
.cookiebar-button--save:hover {
  background-color: #082b06;
}
.cookiebar-choices {
  display: none;
}
.cookiebar-choices.expanded {
  display: block;
}
.cookiebar-choices ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
/*# sourceMappingURL=./style.css.map */