body,
html {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  background-color: #fff;
  color: #333;
}
* {
  box-sizing: border-box;
}
a,
a:hover,
a:visited,
a:active {
  text-decoration: none;
}
a:hover {
  color: #ff8c00;
}
a.svg {
  position: relative;
  display: inline-block;
}
a.svg:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.nav > li > a:focus,
.nav > li > a:hover {
  text-decoration: none;
  background-color: transparent;
}
.max_width_container {
  max-width: 1450px;
  margin: 0 auto;
  height: 100%;
  position: relative;
  padding: 0 15px;
}
.error {
  display: none;
  color: red;
}
.socialico,
.printico {
  width: 21px;
}
/*.lastPage .hideOnLast                   {display: none;}*/
::placeholder {
  color: #000000;
  opacity: 1;
}
::-webkit-input-placeholder {
  color: #000000;
}
::-moz-placeholder {
  color: #000000;
}
:-ms-input-placeholder {
  color: #000000;
}
:-moz-placeholder {
  color: #000000;
}
.arrow:after {
  content: url(/images/pfeil_text.svg);
  position: relative;
  top: 3px;
  height: 30px;
  margin-left: 5px;
}
p.hint {
  background: #c3ea75;
  width: 310px;
  font-size: 10px;
  line-height: 1.3em;
  padding: 2px;
  margin-top: 5px;
}
p.hint strong {
  font-size: 12.5px;
}
p.hint span {
  background: #636b6f;
  color: #c3ea75;
  border-radius: 20px;
  display: block;
  width: 23px;
  font-size: 22px;
  font-weight: bold;
  float: left;
  height: 23px;
  margin: 2px;
  font-family: courier;
  padding-top: 5px;
  padding-left: 1px;
}
.useForMobile {
  display: none;
}
/* general end */

/* header */
header {
  background: #179107;
  padding-top: 17px;
  padding-bottom: 17px;
}
.brand {
  width: 230px;
  height: 64px;
  display: block;
  float: left;
  background: url(../../../images/vergleichs-guru-brand-01.svg) 0 50% / auto
    64px no-repeat;
}
.phone {
  width: 220px;
  height: 43px;
  display: flex;
  align-items: center;
}
.phone > img {
  height: 43px;
  margin-right: 5px;
}
.phone .phone-text {
  color: white;
  font-weight: 300;
}
.phone .phone-text > div:first-child {
  font-weight: 500;
  font-size: 20px;
}

@media only screen and (max-width: 768px) {
  .phone > img {
    height: 35px;
    margin-right: 10px;
  }
  .phone .phone-text {
    display: none;
  }
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header .logo img.logo-img {
  padding-top: 12px;
  padding-bottom: 12px;
  float: none;
  position: static;
  text-align: left;
}
/* header end */

/* main section */
.section-headlines {
  position: relative;
  padding-top: 0px;
  background-image: url(../../../images/checkfox_bg.svg);
  background-size: cover;
  background-attachment: fixed;
  hyphens: auto;
}

/* headlines */
.section-headlines {
  position: relative;
  padding-top: 35px;
}
.section-headlines .max_width_container:not(:last-child) {
  margin-bottom: 14px;
}
.section-headlines h1 {
  width: 50%;
  margin: 30px 0px 0px 0px;
  padding: 0;
  font-family: "Inter";
  font-size: 34px;
  color: #ff8c00;
  font-weight: 900;
}
.section-headlines h2 {
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-weight: 500;
  color: #179107;
  margin-top: 2px;
}
.section-headlines h3 {
  margin: 0;
  padding: 0;
  font-size: 24px;
  font-weight: 500;
  color: #ff8c00;
  margin-bottom: 15px;
  margin-top: 36px;
}
.section-headlines ul {
  margin: 0;
  padding: 0;
  border-radius: 12px;
}
.section-headlines ul li {
  display: inline-block;
  color: #179107;
  background: url(../../../images/icon_bullit_point.svg) 0 50% / auto 26px
    no-repeat;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 0 4px 35px;
  margin: 0 10px;
}
.section-headlines .headlineTeaser {
  transition: opacity 1s linear;
}
.lastPage .section-headlines .headlineTeaser {
  opacity: 0;
  pointer-events: none;
}
.section-headlines .headlineTeaser > img {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.headlineTeaser_family {
  width: 22%;
  transform: translate(-35%, 15%);
}
.headlineTeaser_button {
  width: 16%;
}
.headerbullets {
  border-top: 1px solid #d6d6d6;
  margin-top: 0px;
  padding-top: 0px;
}

#house_holder {
  width: 330px;
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 121px;
}
#house_holder .moodpic {
  width: 50%;
  position: absolute;
  margin-top: 45px;
  right: 65px;
}
#house_holder .save {
  width: 120px;
  position: absolute;
  margin-top: 50px;
  right: 0;
}
#success {
  background: #49b000;
  height: 56px;
  padding-top: 10px;
  display: none;
}
#success p {
  color: #fff;
  margin: 0 auto;
  text-align: center;
  font-size: 24px;
}
#success figure {
  width: 32px;
  float: left;
  margin-left: 10px;
}
#success figure img {
  width: 100%;
}

.pg-finish2 #success,
.pg-complete #success {
  display: block;
}
.pg-finish2 #success2,
.pg-complete #success2 {
  display: block;
  height: 53px;
}

.pg-complete h4#done {
  margin-top: -10px;
  font-size: 18px;
}
.pg-complete #house img {
  max-width: 100%;
}
.pg-complete .pg-complete .success_message {
  margin: 40px auto 40px;
}
.pg-complete h4 {
  font-size: 24px;
  margin: 10px 0 10px 0;
  line-height: 1;
  color: #179107;
  font-weight: bold;
}

/* Progress bar, static parts: */
#progress {
  display: none;
}
#progressStart {
  width: 100%;
  text-align: center;
  color: #ff8c00;
}
#form_holder fieldset.slave {
  display: none;
}

@keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
.tcontainer {
  overflow: hidden;
}
.ticker-wrap {
  width: 100%;
  padding-left: 100%;
}
.ticker-move {
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker;
  animation-duration: 20s;
}
.ticker-move:hover {
  animation-play-state: paused;
}
.ticker-item {
  display: inline-block;
  padding: 0 2rem;
  color: #fff;
  font-size: 20px;
}
#success2 {
  background: #f0f5f0;
  display: none;
  color: #424242;
  padding: 10px 0 0 0;
  font-size: 20px;
}
#success2 div {
  text-align: center;
}
#success2 p {
  color: #ff8c00;
  text-align: center;
  font-size: 24px;
  line-height: 1.4;
  font-family: "Inter";
  font-weight: bold;
}
#success2 p.success1 {
  color: #179107;
}
#success2 ul {
  background: none;
}
#success3 {
  display: none;
  text-align: center;
  color: #000;
}
#success3 p {
  margin: 5px 0 4px 0;
  font-size: 1.5em;
}
#tease_arrow {
  display: none;
  position: absolute;
  top: 103px;
  margin-left: 105px;
  border-left: 60px solid #ff8c00;
  border-bottom: 60px solid transparent;
  border-top: 60px solid transparent;
}
#tease_arrow_inner {
  background: #ff8c00;
  color: #fff;
  padding: 16px 9px;
  position: absolute;
  margin-left: -166px;
  margin-top: -46px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2em;
}
#info {
  padding-bottom: 10px;
}

@media only screen and (max-width: 768px) {
  #house_holder {
    display: none;
  }
  .pg-complete #house {
    width: 100%;
  }
  .pg-complete #house img {
    height: 30vh;
    width: auto;
  }
  .section-headlines ul {
    display: none;
  }
  .section-headlines .headlineTeaser {
    display: none;
  }
  .section-headlines .max_width_container {
    margin-bottom: 50px;
    padding: 0 15px;
  }
  #success2.immo {
    height: auto;
  }
  .hidem,
  #success2 p.hidem {
    display: none;
  }
  #tease_arrow {
    display: none !important;
  }
  .row {
    margin: 0;
  }
  .section-headlines h1 {
    width: 100%;
  }
}
/* headlines end */

/* form */
#formHolder {
  background-color: #f0f5f0;
  border-style: solid;
  border-width: 0px;
  border-color: #ff8c00;
  position: relative;
}
#formHolder:before {
  border: 16px solid #ff8c00;
  content: " ";
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -16px;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  display: none;
}
#formHolder:after {
  border: 16px solid #fff;
  content: " ";
  position: absolute;
  left: 50%;
  top: -1px;
  margin-left: -16px;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  display: none;
}
#form_mask {
  overflow: hidden; /* margin-top: 25px;*/
}
.lastPage #form_mask {
  margin-top: 30px;
}
#formHolder.topless {
  border-width: 0px 0px 1px 0px;
  padding-top: 10px;
}
#formHolder.topless:before,
#formHolder.topless:after {
  display: none;
}
/* #form_holder                            {width: 500%; position: relative;} */
/* #form_holder form                       {padding-bottom: 25px;} */
/* #form_holder fieldset                   {width: 20%; display: inline-block; text-align: center; vertical-align: top; font-size: 1.5em;} */
#form_holder input[type="radio"] {
  display: none;
}
#form_holder input.sal {
  display: inline;
  margin: 5px;
}
#form_holder fieldset legend {
  border-bottom: 0;
  color: #179107;
  font-size: 22px;
  line-height: 24px;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}
.answerSlideHolder {
  width: 600%;
  display: none;
}
.answerSlide {
  width: 16.6%;
  float: left;
}
/* #form_holder fieldset label,
#form_holder fieldset .answerSlide div  {width: 248px;background-size: 80% 150px;background-color: #fff;border: 1px solid transparent;margin: 0 10px 10px 10px;position: relative;height: 230px;cursor: pointer;background-position: top 15px center;background-repeat: no-repeat;box-shadow: 0px 4px 11px 1px rgba(33, 33, 33, 0.2);border-radius: 8px;} */
#form_holder fieldset .answerSlide div {
  margin: 0 auto 10px;
}
#form_holder fieldset label.funnel-card {
  max-width: 384px;
  width: calc(50% - 28px);
  height: 217px;
  display: inline-block;
}
/* #form_holder fieldset label:hover       {border:2px solid #179107; margin: -1px 10px 11px 10px;} */
/* #form_holder fieldset label span,
#form_holder fieldset .answerSlide div span {position: absolute; bottom: 20px; width: 100%; left: 0; line-height: 1.2em; line-height: 1em; padding: 0 8px;font-family: 'Inter';font-style: normal;font-weight: 700;font-size: 20px;line-height: 24px;text-align: center;color: #212121 !important;} */
/* #form_holder fieldset label span i      {background: #ff8c00; color: #fff; bottom: -3px; padding: 2px 0; margin: 0 5px; width: calc(100% - 10px); display: inline-block; font-style: normal;} */
#form_holder fieldset input {
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  padding: 5px;
}
#form_holder fieldset select {
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  padding: 8px 0px;
  width: 100%;
  background-color: #ffffff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 5px auto;
}
#form_holder fieldset select option {
  text-align: center;
}
#form_holder fieldset input.range_slider {
  border: none;
}
#progressbar {
  background: #fff;
  margin: 0px 0 46px 0;
  height: 6px;
  position: relative;
  bottom: 0px;
}
.lastPage #progressbar {
  margin-top: 5px;
}
#progress {
  background: #179107;
  width: 0%;
  height: 6px;
  line-height: 16px;
  text-align: right;
  padding-right: 5px;
  color: #fff;
  font-weight: bold;
}
#seal_holder {
  width: 237px;
  float: none;
  margin: 10px auto -54px;
  text-align: left;
}
#seal_holder img {
  width: 24%;
  margin-left: 17px;
}
#seal_holder object {
  width: 24%;
  margin-left: 16px;
}
#bottom_seal_holder {
  display: block;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #d6d6d6;
  margin-bottom: 12px;
}
#bottom_seal_holder object {
  position: absolute;
  height: 73px;
  width: auto;
  transform: translate(-50%, -36px);
}
figure#locationBig {
  width: 145px;
  display: inline-block;
  margin-top: 60px;
  margin-left: -2px;
}
figure#locationSmall {
  display: none;
}
#formHolder h3.h3aslabel {
  margin-bottom: 22px;
  font-size: 22px;
  line-height: 1.2;
  color: #179107;
  margin-top: 0px;
}
#location {
  display: inline-block;
}
#loc_right {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
  max-width: 440px;
  padding-bottom: 15px;
}
#loc_right input {
  width: 100%;
  border-radius: 3px;
  margin-bottom: 10px;
}
.agb_box {
  height: 30px;
  margin-top: 2px;
  margin-right: 5px;
  float: left;
}
#agb_box_checked,
#datacheck,
#add_input,
#wa_box_checked,
#wa {
  display: none;
}
#add_input input {
  width: 100%;
}
#location input {
  width: 100%;
  margin-bottom: 10px;
}
#location .claim {
  text-align: left;
}
#mapholder iframe {
  width: 100%;
  height: 190px;
}
#add_input button {
  width: 100%;
  background: #ccc;
  border: 1px solid #c1c1c1;
  color: #000000;
  padding: 6px;
  margin-bottom: 6px;
  border-radius: 4px;
  background-image: linear-gradient(to bottom, #eeeeee 0%, #c1c1c1 100%);
  font-size: 16px;
}
#add_input button.active {
  background: #179107;
  color: #fff;
}
#add_input button span {
  background-size: 100%;
  width: 17px;
  height: 23px;
  margin-bottom: -4px;
  display: inline-block;
}
#salbut1 span {
  background: url(/images/gender_male_black.png) no-repeat;
  background-size: 100%;
}
#salbut2 span {
  background: url(/images/gender_female_black.png) no-repeat;
  background-size: 100%;
}
#salbut1.active span {
  background: url(/images/male.png) no-repeat;
  background-size: 100%;
}
#salbut2.active span {
  background: url(/images/female.png) no-repeat;
  background-size: 100%;
}
#add_input button img {
  height: 22px;
}
.lastPage input {
  margin: 5px 0;
}
.lastPage em {
  font-weight: bold;
  margin-top: 10px;
  display: block;
}
.lastPage #validator,
#backToGuru,
.range_proceed,
a.next,
.multiple_proceed {
  width: 100%;
  text-align: center;
  padding: 7px 20px;
  background: #179107;
  border-radius: 50px;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 600;
  box-shadow: 2px 2px 5px #a9a9a9;
  display: inline-block;
  margin-top: 15px;
  margin-bottom: -10px;
  min-height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.range_holder .range_proceed,
a.next,
a.multiple_proceed {
  max-width: 250px;
  min-height: 20px;
  height: 55px;
  margin: 0 auto;
  background: #179107;
  border-radius: 50px;
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  text-transform: uppercase;
  padding: 15px 44px;
  border: 2px solid #179107;
}
.range_holder .range_proceed:hover,
a.next:hover,
a.multiple_proceed:hover {
  color: #fff;
  border-color: #179107;
}
.range_holder .range_proceed {
  clear: both;
}
.lastPage a#validator {
  margin-bottom: 10px;
}
a.next {
  max-width: auto;
}
#validator span,
#backToGuru span {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
}
#validator object {
  height: 30px;
  margin-left: 12px;
}
#backToGuru {
  box-shadow: none;
  margin-bottom: 0px;
}
.pg-finish2 #backToGuru {
  margin-bottom: 40px;
  margin-top: 10px;
  line-height: 55px;
}
.lastPage p {
  margin: 2px auto;
  font-size: 16px;
  line-height: 20px;
  text-align: justify;
  font-weight: normal;
}
.lastPage p#dataPrivacy {
  font-size: 12px;
  line-height: 14px;
}
.lastPage #solar_hint {
  text-align: left;
}
.lastPage hr {
  margin-top: 10px;
  margin-bottom: 10px;
}
.lastPage .address1 {
  text-align: right;
}
.lastPage #success2 ul li {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  color: #49b000;
  background: url(../../../images/bullet-green.png) no-repeat;
  background-size: 20px;
  background-position: 0px 4px;
  padding: 4px 0 0 26px;
}
.lastPage #success2 p strong {
  font-family: "Inter";
  display: inline-block;
  padding-bottom: 15px;
}
#checkMail,
#validationHint {
  display: none;
}
.success_message {
  margin: 10px auto 20px;
  padding: 10px;
}
.success_message h3 {
  color: #636b6f;
}
#touch {
  display: none;
}
#touch div {
  background: url(/images/finger_icon.png) no-repeat;
  padding-left: 33px;
  background-size: 33px;
  margin: 0px auto 7px;
  display: inline-block;
  padding-top: 2px;
}
#hours {
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  padding: 7px 5px;
  width: 100%;
  color: #179107;
}
#addPhone {
  width: 100%;
  margin-bottom: 10px;
}
#priceHubbleResult #addPhone {
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  padding: 7px 8px;
  color: #179107;
  font-size: 14px;
}
#priceHubbleResult #hours {
  font-size: 14px;
  padding: 9px 5px;
}
#maploader {
  z-index: 10;
  position: relative;
  border-radius: 141px;
  width: 283px;
  margin: -361px auto 0;
  overflow: hidden;
}
.service {
  text-align: left;
  margin-top: 20px;
}
.service p,
.service li {
  font-size: 16px;
  line-height: 20px;
}
.service ul {
  list-style: none;
  padding-left: 0;
}
.service li::before {
  content: "• ";
}
.nothanks input {
  display: inline-block !important;
}
.nothanks span {
  font-size: 0.8em;
}
#house {
  width: 40%;
  margin: 0 auto;
}
.success_message h5 {
  font-size: 19px;
}
.success_message h5.phonenumber {
  font-size: 24px;
  color: #179107;
  font-weight: bold;
}
#form_holder fieldset label#heaterlabel {
  background-image: url(/images/heater.svg);
  border: 2px solid #ff8c00;
  margin: -1px 10px 15px 10px;
}
.complete .success_message {
  margin-bottom: 30px;
}
p#waholder {
  font-weight: bold;
  color: #179107;
}
#validator > span > span,
#backToGuru > span > span {
  font-weight: normal;
  font-size: 16px;
}
#last {
  padding: 0 7px;
  margin-left: -3px;
}
#knownFrom {
  text-align: center;
  padding: 15px;
  padding-top: 66px;
}
.range_holder {
  padding: 0 20px;
}
.range_holder p {
  font-size: 14px;
}
.slider_label span {
  font-size: 14px;
}
.slider_result {
  clear: both;
  margin: 10px;
}
.slider_result .result .value {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 10px auto;
  border-radius: 5px;
  width: 40%;
  max-width: 250px;
  width: 100%;
  text-align: center;
}
select.dob {
  width: 100%;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  padding: 5px;
  color: #179107;
  margin-top: 5px;
}
select.dob option {
  color: #179107;
}
#capital_hint {
  clear: both;
  color: red;
  font-size: 12px;
  margin: 19px;
}
select.dob#dob_day option,
select.dob#dob_year option {
  text-align: right;
}
.range_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04aa6d;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid red;
}
.w-100 {
  width: 100%;
}
.h-auto {
  height: auto !important;
}
.mb-5 {
  margin-bottom: 5rem;
}
.lastPage p.legalInfo {
  color: #999;
  font-size: 14px;
  text-align: center;
  margin-bottom: 30px;
}
p.legalInfo a {
  color: #999;
}
p.legalInfo a:hover {
  color: #999;
  text-decoration: underline;
}
div.infoLabel {
  position: absolute;
  right: 15px;
  width: 29px;
  text-align: center;
  height: 29px;
  border-radius: 15px;
  top: 5px;
  border: 1px solid #aaa;
  box-shadow: 3px 4px 5px #ccc;
}
div.infoLabel:hover {
  border: 1px solid #ff8c00;
}
div.infoLabel[title]:hover:after {
  content: attr(title);
  width: 250px;
  background: #fff;
  display: block;
  text-align: left;
  padding: 10px;
  position: absolute;
  z-index: 10;
  font-size: 80%;
  top: 18px;
  transform: translate(0, -50%);
  font-weight: 500;
  color: #333;
  left: -258px;
  border-right: 3px solid #ff8c00;
  box-shadow: 3px 6px 11px rgba(50, 50, 50, 0.4);
}
div.infoLabel div {
  display: none;
}
div.infoLabel div p {
  font: 13px "Arial";
  line-height: 15px;
  color: #000;
  text-align: left;
}
div.infoLabel div h4 {
  font: bold 13px "Arial";
  line-height: 15px;
  color: #000;
  margin-top: 0px;
}
div.infoLabel:hover div {
  width: 250px;
  background: #fff;
  display: block;
  text-align: left;
  padding: 10px;
  position: absolute;
  z-index: 10;
  top: 18px;
  transform: translate(0, -50%);
  font-weight: 500;
  left: -258px;
  border-right: 3px solid #ff8c00;
  box-shadow: 3px 6px 11px rgba(50, 50, 50, 0.4);
}
@media only screen and (max-width: 360px) {
  div.infoLabel:hover div {
    width: 180px;
    left: -185px;
  }
}
a.fancyboxed {
  color: #777;
  text-decoration: underline;
}

.completeScreen object {
  width: 70px;
  right: 11px;
  top: 11px;
  position: absolute;
}
.completeScreen h4 {
  text-align: center;
  margin-bottom: 30px;
}
.completeScreen h5 {
  text-align: left;
}
.completeScreen p {
  text-align: left;
  font-size: 14px;
  margin-bottom: 20px;
}
.answerSeparator {
  display: none;
}
.answers5 .answerSeparator {
  display: block;
}
.answers6 .answerSeparator {
  display: block;
}
.multiple span {
  width: 100%;
  text-align: left;
}
#form_holder fieldset .multiple input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.5em;
  height: 1.5em;
  border: 0.15em solid #179107;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  float: right;
  margin-top: -4px;
}
.multiple input[type="checkbox"]::before {
  content: "";
  width: 0.75em;
  height: 0.75em;
  -webkit-clip-path: polygon(
    14% 44%,
    0 65%,
    50% 100%,
    100% 16%,
    80% 0%,
    43% 62%
  );
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #ff8c00;
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}
.multiple input[type="checkbox"]:checked::before {
  transform: scale(1);
}
.multiple input[type="checkbox"]:focus {
  outline: none;
  outline-offset: 0;
}
.low_range_decrease,
.low_range_increase {
  background: #179107;
  display: inline-block;
  height: 41px;
  width: 41px;
  color: #fff;
  border-radius: 4px;
  font-size: 23px;
}
.low_range_holder p {
  height: 70px;
}
.low_range_holder .multiple_proceed {
  margin-top: 50px;
}
.low_range_holder input {
  width: 50px;
  text-align: center;
}
#city_holder select,
#street_holder select {
  width: 100%;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  padding: 8px 5px;
  margin-bottom: 10px;
}
/* #form_holder fieldset.current               {height: auto;} */
.calcAni {
  height: 125px;
  width: 125px;
  border-radius: 100%;
  display: inline-flex;
  margin: 10px;
  margin-bottom: 75px;
  background-size: 70% 70% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.calcAni span {
  width: 100%;
  transform: translateY(135px);
}

.calcAni::before,
.calcAni::after {
  border: 2px solid transparent;
  height: 125px;
  width: 125px;
  border-radius: 100%;
  content: "";
  position: absolute;
}

.fieldset-active .calcAni::after {
  animation-name: calcTurn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.fieldset-active .calcAni::before {
  animation-name: calcBorder;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

.fieldset-active #calc2::after,
#calc2::before {
  animation-delay: 1.2s;
}

.fieldset-active #calc3::after,
#calc3::before {
  animation-delay: 2.4s;
}

#aniWait {
  width: 0;
  height: 0;
  border: none;
}

.fieldset-active #aniWait {
  animation-name: wait;
  animation-duration: 3.4s;
}

@keyframes wait {
  0% {
    border: none;
  }
  100% {
    border: none;
  }
}

@keyframes calcTurn {
  0% {
    transform: rotate(0);
  }
  1% {
    border-top: 2px solid #179107;
  }
  100% {
    transform: rotate(270deg);
    border-top: 2px solid #179107;
  }
}

@keyframes calcBorder {
  0% {
  }
  1% {
    border-top: 2px solid #179107;
  }
  40% {
    border-right: 2px solid transparent;
  }
  41% {
    border-right: 2px solid #179107;
  }
  58% {
    border-right: 2px solid #179107;
    border-bottom: 2px solid transparent;
  }
  59% {
    border-bottom: 2px solid #179107;
    border-right: 2px solid #179107;
  }
  100% {
    border-bottom: 2px solid #179107;
    border-right: 2px solid #179107;
    border-top: 2px solid #179107;
  }
}

/***********************Bhavik Css*****************/
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Black.eot");
  src: url("/fonts/Inter-Black.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Inter-Black.woff2") format("woff2"),
    url("/fonts/Inter-Black.woff") format("woff"),
    url("/fonts/Inter-Black.ttf") format("truetype"),
    url("/fonts/Inter-Black.svg#Inter-Black") format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-ExtraBold.eot");
  src: url("/fonts/Inter-ExtraBold.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Inter-ExtraBold.woff2") format("woff2"),
    url("/fonts/Inter-ExtraBold.woff") format("woff"),
    url("/fonts/Inter-ExtraBold.ttf") format("truetype"),
    url("/fonts/Inter-ExtraBold.svg#Inter-ExtraBold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Bold.eot");
  src: url("/fonts/Inter-Bold.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Inter-Bold.woff2") format("woff2"),
    url("/fonts/Inter-Bold.woff") format("woff"),
    url("/fonts/Inter-Bold.ttf") format("truetype"),
    url("/fonts/Inter-Bold.svg#Inter-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-ExtraLight.eot");
  src: url("/fonts/Inter-ExtraLight.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Inter-ExtraLight.woff2") format("woff2"),
    url("/fonts/Inter-ExtraLight.woff") format("woff"),
    url("/fonts/Inter-ExtraLight.ttf") format("truetype"),
    url("/fonts/Inter-ExtraLight.svg#Inter-ExtraLight") format("svg");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Light.eot");
  src: url("/fonts/Inter-Light.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Inter-Light.woff2") format("woff2"),
    url("/fonts/Inter-Light.woff") format("woff"),
    url("/fonts/Inter-Light.ttf") format("truetype"),
    url("/fonts/Inter-Light.svg#Inter-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Medium.eot");
  src: url("/fonts/Inter-Medium.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Inter-Medium.woff2") format("woff2"),
    url("/fonts/Inter-Medium.woff") format("woff"),
    url("/fonts/Inter-Medium.ttf") format("truetype"),
    url("/fonts/Inter-Medium.svg#Inter-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.eot");
  src: url("/fonts/Inter-Regular.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Inter-Regular.woff2") format("woff2"),
    url("/fonts/Inter-Regular.woff") format("woff"),
    url("/fonts/Inter-Regular.ttf") format("truetype"),
    url("/fonts/Inter-Regular.svg#Inter-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-SemiBold.eot");
  src: url("/fonts/Inter-SemiBold.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Inter-SemiBold.woff2") format("woff2"),
    url("/fonts/Inter-SemiBold.woff") format("woff"),
    url("/fonts/Inter-SemiBold.ttf") format("truetype"),
    url("/fonts/Inter-SemiBold.svg#Inter-SemiBold") format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Thin.eot");
  src: url("/fonts/Inter-Thin.eot?#iefix") format("embedded-opentype"),
    url("/fonts/Inter-Thin.woff2") format("woff2"),
    url("/fonts/Inter-Thin.woff") format("woff"),
    url("/fonts/Inter-Thin.ttf") format("truetype"),
    url("/fonts/Inter-Thin.svg#Inter-Thin") format("svg");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap");

header {
  position: relative;
  width: 100%;
  animation: spFadeInDown 0.5s;
}

.pos-logo img {
  max-width: 100%;
}
#pos-top1 {
  display: flex;
  justify-content: flex-end;
}
#pos-top1 .phone {
  width: auto;
  display: flex;
  align-items: center;
  background: none !important;
}
#pos-top1 .phone .phone-text {
  display: flex;
  align-items: center;
}
#pos-top1 .phone > img {
  height: auto;
  margin-right: 0 !important;
}
#pos-top1 .phone .phone-text > div {
  margin-left: 10px;
}
#pos-top1 .phone .phone-text > div.envelope {
  font-style: normal;
  font-weight: 300;
  font-size: 15px;
  line-height: 18px;
  text-transform: uppercase;
  padding: 0px 0px 0px 10px;
}

#pos-top2 {
  text-align: right;
}
#pos-top2 a {
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  padding: 0 !important;
  font-size: 16px;
}

#info {
  padding-top: 110px;
  padding-bottom: 100px;
}
.pos-section-title {
  text-align: center;
  margin-bottom: 24px;
}
.pos-section-title h2 {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 42px;
  line-height: 51px;
  color: #179107;
  margin: 0;
}
.benefits-list {
  text-align: center;
}
.benefits-list h3 {
  margin: 0;
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  color: #212121;
}
.benefits-list h3 img {
  margin-right: 11px;
}

.bekannt_aus {
  padding: 100px 0;
  background: #f0f5f0;
}
.bekannt_aus .pos-section-title {
  margin-bottom: 15px;
}
.bekannt_aus .pos-section-title h3 {
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 39px;
  color: #212121;
  margin: 0;
}
.bekannt_aus #knownFrom {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bekannt_aus #knownFrom .bekannt_aus-box {
  margin: 0 10px;
}
.testimonial {
  padding-top: 0px;
  padding-bottom: 140px;
}

.testimonial .item {
  text-align: center;
  height: 100%;
  display: flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background: #f0f5f0;
  border-radius: 15px;
  padding: 22px 19px 42px 19px;
  max-width: 345px;
  margin: 0 auto;
  min-height: 330px;
}
.testimonial-img {
  text-align: center;
  margin-bottom: 11px;
  width: 100%;
}
.testimonial-img img {
  width: 94px;
  height: 94px;
  max-width: 94px;
}
.testimonial-img picture {
  display: inline-block;
}
.testimonial-content h3 {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: #212121;
  margin: 0;
}
.testimonial-content p {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  color: #212121;
}

.testimonial .owl-theme .owl-nav {
  display: none;
}
.testimonial .owl-theme .owl-dots {
  margin-top: 20px;
}
.testimonial .owl-theme .owl-dots .owl-dot span {
  background: #179107;
  opacity: 0.5;
  width: 15px;
  height: 15px;
}
.testimonial .owl-theme .owl-dots .owl-dot.active span,
.testimonial .owl-theme .owl-dots .owl-dot:hover span {
  background: #179107;
  opacity: 0.8;
  width: 46px;
}

#fmenu.nav li > a {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #ffffff;
}

#fmenu.nav li.item-113 > a {
  font-size: 0;
}
#some .footer {
  text-transform: none;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #ffffff;
}
#some img {
  height: auto;
  width: 34px;
}

.solaranlage-section {
  background: #f0f5f0;
}
#formHolder {
  border-radius: 15px 15px 0px 0px;
  padding: 10px 0;
  margin-top: -15px;
  position: relative;
  z-index: 1;
}
#formHolder.header-top-img {
  margin-top: 0;
  border-radius: 0;
}
.solaranlage-section {
  padding: 65px 0 50px 0;
  border-radius: 15px 15px 0px 0px;
}
.solaranlage-section.header-top-img {
  padding: 0px 0;
  border-radius: 0;
}

.pos-section-title .pos-title-heading,
success2 .pos-title-heading,
h3.pos-title-heading.enter-zip {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 39px;
  text-align: center;
  color: #292929;
  margin-top: 0;
}
.de-ser-vers-sec {
  text-align: center;
  margin-top: 30px;
}
.solaranlage-section #form_mask {
  margin-top: 0;
}

.solaranlage-text .solaranlage-content {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
  color: #7d7d7d;
}

.section-headlines {
  padding-top: 0;
  display: block !important;
}
.section-headlines .solaranlage-section {
  padding: 0;
  position: relative;
}
.section-headlines .solaranlage-section {
  background-color: #179107;
  /*    background-image: url(/images/pos-banner.png);*/
  background-repeat: no-repeat;
  background-position: top left;
  /*    background:#179107 url(/images/pos-banner.png) no-repeat top left;*/
  background-size: cover;
  height: 450px;
  border-radius: 0;
  padding-top: 70px;
}
.section-headlines .solaranlage-section img {
  width: 100%;
}
.solaranlage-section .pos-banner-content {
  position: absolute;
  top: 55%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  left: 0;
  right: 0;
  margin: auto;
}

.section-headlines .solaranlage-section .pos-banner-content h1 {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 55px;
  line-height: 67px;
  text-transform: uppercase;
  color: #ffffff;
  margin-top: 0;
  width: auto;
}
.section-headlines .solaranlage-section .pos-banner-content h4 {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 39px;
  color: #ffffff;
}
.endMsg {
  margin-top: 85px;
}

#pos-top1 .phone-text {
  display: flex;
  align-items: center;
}
#pos-top1 .phone-text .phone-number {
  margin-right: 20px;
}
#pos-top1 .phone-text .phone-number a {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  color: #ffffff;
  padding: 5px 10px;
}
#pos-top1 .phone-text .phone-number a img {
  margin-right: 10px !important;
  text-decoration: none;
}
#pos-top1 .phone-text .phone-number a:hover {
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

#pos-top1 .phone-text .envelope {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  text-transform: uppercase;
  color: #ffffff;
}

@media only screen and (max-width: 1199px) {
  .section-headlines .solaranlage-section .pos-banner-content h1 {
    font-size: 37px;
    line-height: 45px;
  }
  .section-headlines .solaranlage-section .pos-banner-content h4 {
    font-size: 24px;
    line-height: 30px;
    margin: 0;
  }

  /* #form_holder fieldset label, #form_holder fieldset .answerSlide div{width: 220px;height: 230px;background-size: 80% 150px;} */
}
@media only screen and (max-width: 991px) {
  header .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    margin-right: -15px;
    margin-left: -15px;
  }
  .header-right.col-6 {
    width: 50%;
  }
  .pos-logo.col-6 {
    width: 50%;
  }
  .phone .phone-text > div:first-child {
    font-size: 17px;
  }
  #pos-top1 .phone .phone-text > div.envelope {
    font-size: 14px;
  }

  .solaranlage-section {
    padding: 30px 0 10px 0;
  }
  .section-headlines .solaranlage-section {
    padding: 0;
  }

  /* #form_holder fieldset label, #form_holder fieldset .answerSlide div{width: 190px;height: 220px;} */
  /* #form_holder fieldset label span, #form_holder fieldset .answerSlide div span{font-size: 16px;} */

  #pos-top1 .phone-text .envelope {
    display: none;
  }
  #pos-top1 .phone-text .phone-number {
    margin-right: 0;
  }
  #pos-top1 .phone-text .phone-number a {
    font-size: 0;
    margin: 0;
  }
  #pos-top1 .phone-text .phone-number a img {
    margin-right: 0;
  }
  .benefits-list h3 {
    font-size: 18px;
  }
}

@media only screen and (max-width: 768px) {
  .lastPage div.mapholder {
    overflow: hidden;
    width: 0px;
    height: 0px;
    margin: 0px auto;
  }
  #touch {
    display: block;
  }
  #tease_arrow {
    display: none;
  }
  figure#locationBig {
    display: none;
  }
  figure#locationSmall {
    display: inline-block;
    width: 55px;
    padding-right: 10px;
  }
  #loc-right {
    padding: 0 10px;
  }
  #loc_right input {
    width: 100%;
  }
  .lastPage #form_mask {
    overflow: hidden;
    margin-top: 20px;
  }
  #last {
    padding: 0 10px;
  }
  #bottom_seal_holder {
    margin-bottom: 70px;
  }
  #validator > span {
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
  }
  #validator object {
    height: 36px;
    vertical-align: middle;
  }
  .complete .success_message {
    margin: 10px auto 0;
  }
  #house {
    width: 24%;
    margin: 0 auto;
  }
  a.brand {
    margin-left: 15px;
  }
  #loc_right {
    padding: 0 15px;
  }
  #loc_right h3 {
    margin-left: 15px;
  }
  #loc_right figure {
    margin-left: 15px;
  }
  #loc_right p {
    margin-right: 15px;
  }
  .mobilesmall {
    height: 260px;
  }
  #formHolder h3.h3aslabel {
    font-size: 22px;
    line-height: 24px;
    margin-left: 0;
    text-align: center;
  }
  #formHolder .next {
    margin-top: 22px;
    margin-bottom: 27px;
  }
  #last #validator {
    margin-top: 22px;
    margin-bottom: 10px;
  }
  #formHolder fieldset input,
  #formHolder fieldset select {
    font-size: 18px;
    font-family: "Inter", sans-serif;
  }
  .pg-finish2 .row .col-sm-4 {
    margin-bottom: 10px;
  }
  #progressbar {
    margin-left: 15px;
    margin-right: 15px;
  }
  .lastPage #success2 p strong {
    font-size: 18px;
    line-height: 24px;
    padding-bottom: 0px;
  }
  .lastPage #success2 p.success1 {
    font-size: 16px;
  }
  #last {
    padding: 0px;
  }
  .service {
    margin-top: -13px;
  }
  #knownFrom {
    text-align: center;
    padding: 15px;
  }
  div#priceHubbleResult {
    width: 96%;
    margin-left: 2%;
  }
  fieldset figure#locationBig {
    display: none;
  }
  fieldset figure#locationSmall {
    display: inline-block;
    width: 50px;
  }
  #add_input {
    padding: 0 10px;
  }
  div.infoLabel {
    width: 27px;
    height: 27px;
  }
  div.infoLabel::before {
    content: "";
    display: block;
    position: absolute;
    width: 300%;
    height: 200%;
    transform: translate(-50%, -25%);
  }
  .completeScreen object {
    width: 45px;
    right: 6px;
  }
  .completeScreen .col-xs-10 {
    height: 66px;
    display: flex;
    align-items: center;
  }

  header .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    margin-right: -15px;
    margin-left: -15px;
  }

  header {
    height: auto;
  }

  .header-right.col-6 {
    width: 40%;
  }
  .pos-logo.col-6 {
    width: 60%;
  }
  .pos-logo img {
    max-width: 156px;
  }
  #pos-top1 .phone .phone-text {
    display: none;
  }
  #pos-top1 .phone .phone-text > div.envelope {
    display: none;
  }

  #info {
    padding-top: 50px;
    padding-bottom: 25px;
  }
  .testimonial {
    padding-top: 25px;
    padding-bottom: 50px;
  }
  .pos-section-title {
    margin-bottom: 15px;
  }
  .pos-section-title h2 {
    font-size: 27px;
    line-height: 1.2;
  }

  .bekannt_aus {
    padding: 50px 0;
  }
  .bekannt_aus .pos-section-title h3 {
    font-size: 20px;
    line-height: 1.2;
  }

  .bekannt_aus #knownFrom img {
    max-width: 200px;
  }

  .benefits-list {
    margin-bottom: 5px;
    padding: 0;
  }
  .benefits-list h3 {
    font-size: 18px;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
    display: flex;
    align-items: center;
  }
  .benefits-list h3 img {
    height: 22px;
    width: 22px;
  }
  .de-ser-vers-sec {
    margin-top: 5px;
    padding-right: 0;
  }
  .section-headlines .solaranlage-section img {
    height: 260px;
    object-fit: cover;
  }
  .solaranlage-section .pos-banner-content {
    text-align: center;
    top: 60%;
  }
  .section-headlines .solaranlage-section .pos-banner-content h4 {
    font-size: 20px;
  }

  .pos-section-title .pos-title-heading {
    font-size: 27px;
    line-height: 30px;
    margin-bottom: 22px;
  }
  h3.pos-title-heading.enter-zip {
    font-size: 27px;
    line-height: 30px;
    margin-bottom: 22px;
  }
  footer {
    text-align: center;
    padding-bottom: 20px;
  }

  footer ul.nav li {
    display: block;
    margin-bottom: 15px;
  }
  #fmenu.nav li > a {
    font-size: 16px;
  }
  #fmenu.nav li > a:after {
    display: none;
  }
  footer #some {
    margin-top: 15px;
  }
  #some span.footer {
    display: none;
  }

  #some a img {
    width: auto;
    height: auto;
  }

  footer ul.nav li {
    display: block;
  }
  .section-headlines .solaranlage-section .pos-banner-content h1 {
    font-size: 26px;
    line-height: 36px;
  }
  .section-headlines .solaranlage-section .pos-banner-content h4 {
    font-size: 20px;
    line-height: 28px;
  }
}

.footer span.text {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: #fff;
}

/* Default style, hides <br> on all screens */

.desktop-break {
  display: none;
}

/* Media query for screens larger than a certain width (e.g., desktop) */
@media (min-width: 460px) {
  .desktop-break {
    display: inline;
    content: "";
    margin: 0;
    padding: 0;
    line-height: 0;
  }
}

@media only screen and (max-width: 450px) {
  .endMsg {
    margin-top: 35px;
  }
  /* #form_holder fieldset label             {width: calc(100% - 20px); height: 94px; background-size: 80px; background-position: 4px 3px; display: flex; align-items: center;} */
  #form_holder form.answers2 {
    height: 430px;
  }
  #form_holder form.answers3 {
    height: 340px;
  }
  #form_holder form.answers4 {
    height: 430px;
  }
  #form_holder form.slider1 {
    height: 340px;
  }
  /* #form_holder fieldset label span        {font-size: 20px; line-height: 1em; text-align: left; padding-left: 95px; bottom: auto;} */
  /*#formHolder                             {padding-top: 65px;background-color: #f4f4f6;}*/
  #formHolder:after {
    display: none;
  }
  #formHolder:before {
    display: none;
  }

  .section-headlines .solaranlage-section {
    /*    background-image: url(/images/pos-banner-mb.png);*/
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    height: 280px;
    border-radius: 0;
  }
}

/* @media only screen and (max-width: 380px) {
  #form_holder fieldset label span        {font-size: 20px; }

}

@media only screen and (max-width: 310px) {
  #form_holder fieldset label span        {font-size: 15px; }
} */

/* carousel */

#testimonial_holder {
  padding: 0 15px;
}
#testimonials .carousel-indicators li {
  border: 1px solid #179107;
}
#testimonials .carousel-indicators li.active {
  background-color: #179107;
}
#testimonials .carousel-control.right {
  background: none;
  color: #179107;
}
#testimonials .carousel-control.left {
  background: none;
  color: #179107;
}
#testimonials .arrow {
  border: solid #179107;
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 4px;
  line-height: 1em;
  margin-top: 65px;
}
#testimonials .arrow.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
#testimonials .arrow.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  float: none;
}
#testimonials h3 {
  color: #ff8c00;
}
#testimonials h3 img {
  border: 4px solid #ff8c00;
  margin-right: 10px;
  height: 60px;
  border-radius: 30px;
}
#testimonials .item {
  padding: 0 25%;
}
#testimonials .item p {
  height: 150px;
  font-size: 15px;
}
@media only screen and (max-width: 450px) {
  #testimonials .item {
    padding: 0 11%;
  }
  #testimonials .arrow {
    padding: 5px;
    line-height: 0.5em;
    height: 5px;
    width: 5px;
  }
  #testimonials .item p {
    line-height: 1.3em;
  }
}

/* hubbleResult */

#priceHubbleResult {
  position: relative;
  background: #ffffff;
  z-index: 20;
  top: 0px;
  border: 1px solid #777;
  width: 615px;
  padding: 15px;
  box-shadow: 5px 5px 5px #222;
  margin-left: 166px;
  margin-bottom: 10px;
}
#softener {
  background: #222;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9;
  opacity: 0.8;
}
#priceHubbleResult h4 {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.4;
  font-family: "Inter";
  color: #179107;
}
#priceHubbleResult h3 {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.4;
  font-family: "Inter";
  color: #179107;
}
#priceHubbleResult p {
  font-size: 14px;
}

/* info */
#usp_holder {
  border-bottom: 1px solid #179107;
  text-align: center;
  padding-bottom: 30px;
}
#usp_holder:before {
  border: 16px solid #179107;
  content: " ";
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -16px;
  border-right-color: transparent;
  border-top-color: transparent;
  border-left-color: transparent;
}
#usp_holder:after {
  border: 16px solid #fff;
  content: " ";
  position: absolute;
  left: 50%;
  bottom: -1px;
  margin-left: -16px;
  border-right-color: transparent;
  border-top-color: transparent;
  border-left-color: transparent;
}
.usp {
  margin-bottom: 60px;
}
.usp h2 {
  text-align: center;
  color: #179107;
  font-size: 20px;
}
.usp p {
  text-align: center;
  font-size: 15px;
}
@media only screen and (max-width: 950px) {
  .usp p {
    max-width: 300px;
    margin: 0 auto;
  }
  #usp_holder .printico {
    width: 60px;
    margin-top: 40px;
  }
  #success2 ul {
    display: none;
  }
  .sm-only {
    display: none;
  }
  #location {
    padding: 0 10px;
  }
}
/* .socialico, .printico                   {width: auto;}*/
.socialico {
  height: 21px;
}
.guruico {
  height: 37px;
}
.printico {
  height: 23px;
}
.socialm,
.printer {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #333;
}
.socialm li,
.printer li {
  list-style: none;
  padding: 0 7px 0 0;
}
.printer .printer {
  padding-right: 0px;
}
ul li.socialmli-1,
.printer-1 {
  outline: none;
  vertical-align: middle;
  padding-left: 0;
}
.right {
  display: block;
  float: right;
}
#explanation_text {
  float: left;
  font-size: 0.85em;
  margin-top: 10px;
}

@media only screen and (min-width: 768px) {
  .socialm,
  .printer {
    display: table;
  }
  .socialm li,
  .printer li {
    display: table-cell;
  }
}

@media only screen and (max-width: 768px) {
  ul.socialm {
    text-align: center;
    padding: 0;
  }
  .socialm li {
    padding: 0px;
    min-height: 30px;
  }
  .socialmli {
    display: inline;
  }
  .socialmli > a > img {
    width: 60px;
    height: 60px;
  }
  .socialico {
    height: 50px;
  }
  .print .right {
    display: none;
  }
  .guruico {
    margin-top: 22px;
  }
}
/* info end */

/* footer */
footer {
  background: #179107;
  font-size: 14px;
}
#some img {
  width: 33px;
  padding-left: 10px;
  margin-bottom: 2px;
}
.footer {
  color: #fff;
  font-size: 12px;
  font-family: "Inter", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
#fmenu.nav li > a {
  color: #fff;
  padding: 0 12px 0 0px;
}
#fmenu.nav li > a:hover {
  color: #fff;
}

li.item-113 {
  width: auto;
  height: 70px;
  background: url(../../../images/brandkopf_weiss-50x35.svg);
  background-size: auto auto;
  background-position: -10px 14px;
  background-repeat: no-repeat;
}
li.item-113 > a {
  display: block;
  width: 52px;
  height: 77px;
  font-size: 0;
  color: transparent;
}
.item-112 > a::after {
  content: "-";
  margin-left: 10px;
  color: #fff;
}
a[class^="vertical"]::after {
  content: "|";
  margin-left: 10px;
  color: #fff;
}
footer ul.nav li {
  display: inline-block;
  text-transform: uppercase;
  vertical-align: middle;
}
#fmenu.nav li > a:after {
  display: none;
}
#fmenu.nav li.item-108 > a:after {
  display: inline-block;
  margin-left: 20px;
}
footer ul.nav {
  display: inline-block;
}

@media only screen and (min-width: 768px) {
  footer {
    height: 77px;
    line-height: 77px;
    overflow: hidden;
  }
  #some {
    float: right;
  }
}
/* footer end */

.loader {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: #ff8c00;
  background: -moz-linear-gradient(
    left,
    #ff8c00 10%,
    rgba(255, 255, 255, 0) 42%
  );
  background: -webkit-linear-gradient(
    left,
    #ff8c00 10%,
    rgba(255, 255, 255, 0) 42%
  );
  background: -o-linear-gradient(left, #ff8c00 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(
    left,
    #ff8c00 10%,
    rgba(255, 255, 255, 0) 42%
  );
  background: linear-gradient(
    to right,
    #ff8c00 10%,
    rgba(255, 255, 255, 0) 42%
  );
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #ff8c00;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
.loader:after {
  background: #fff;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* horizontal spaces in forms */
#form_holder .col-lg-1,
#form_holder .col-lg-2,
#form_holder .col-lg-3,
#form_holder .col-lg-4,
#form_holder .col-lg-5,
#form_holder .col-lg-6,
#form_holder .col-lg-7,
#form_holder .col-lg-8,
#form_holder .col-lg-9,
#form_holder .col-lg-10,
#form_holder .col-lg-11,
#form_holder .col-lg-12,
#form_holder .col-md-1,
#form_holder .col-md-2,
#form_holder .col-md-3,
#form_holder .col-md-4,
#form_holder .col-md-5,
#form_holder .col-md-6,
#form_holder .col-md-7,
#form_holder .col-md-8,
#form_holder .col-md-9,
#form_holder .col-md-10,
#form_holder .col-md-11,
#form_holder .col-md-12,
#form_holder .col-sm-1,
#form_holder .col-sm-2,
#form_holder .col-sm-3,
#form_holder .col-sm-4,
#form_holder .col-sm-5,
#form_holder .col-sm-6,
#form_holder .col-sm-7,
#form_holder .col-sm-8,
#form_holder .col-sm-9,
#form_holder .col-sm-10,
#form_holder .col-sm-11,
#form_holder .col-sm-12,
#form_holder .col-xs-1,
#form_holder .col-xs-2,
#form_holder .col-xs-3,
#form_holder .col-xs-4,
#form_holder .col-xs-5,
#form_holder .col-xs-6,
#form_holder .col-xs-7,
#form_holder .col-xs-8,
#form_holder .col-xs-9,
#form_holder .col-xs-10,
#form_holder .col-xs-11,
#form_holder .col-xs-12 {
  position: relative;
  min-height: 1px;
  padding-left: 7px;
  padding-right: 7px;
}

#form_holder .row {
  margin-left: -7px;
  margin-right: -7px;
}

@media only screen and (max-width: 768px) {
  .brand {
    height: 36px;
    margin-left: 15px;
    background: url(../../../images/vergleichs-guru-brand_02.svg) 0 50% / auto
      36px no-repeat;
  }
  .phone {
    height: 36px;
    width: 31px;
    margin-right: 25px;
    background: url(../../../images/vergleichs-guru-telefon-02.svg) 0 50% / auto
      36px no-repeat !important;
  }
  header {
    height: auto; /*line-height: 60px;*/
  }
  .section-headlines h1 {
    text-align: center;
    font-size: 19px;
    line-height: 24px;
    margin-top: 10px;
  }
  .section-headlines h2 {
    text-align: center;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 24px;
  }
  #success p,
  #success2 p {
    font-size: 19px;
  }
  .success_message p {
    font-size: 14px;
  }
  #form_holder fieldset legend {
    font-size: 23px;
    line-height: 24px;
    padding: 0 15px;
  }
  #last .service p,
  #last .service li {
    font-size: 14px;
  }
  #seal_holder {
    float: none;
  }
  .usp h2 {
    font-size: 19px;
  }
  .usp p {
    font-size: 14px;
  }
  /* footer                                  {text-align: center; padding-bottom: 37px;} */
  li.item-113 {
    background-position: 50% 24px;
  }
  #fmenu .item-108 > a::after {
    content: " ";
    float: right;
  }
  #fmenu > :not(:nth-child(n + 3)) {
    display: block;
  }
  .item-109,
  .item-110,
  .item-111 {
    display: inline;
  }
  /* .footer                                 {display: block; margin: 24px 0 10px 0;} */
  #some {
    height: auto;
  }
  #some a {
    margin: 0;
    padding: 0;
  }
  #some a img {
    /*width: 50px; height: 50px;*/
    padding: 0;
  }
  .fcenter {
    margin: 0 10px;
  }
  #explanation_text {
    margin-left: 15px;
  }
  .pg-complete h4 {
    font-size: 19px;
    line-height: 30px;
  }
  figure#locationBig {
    display: none;
  }
  figure#locationSmall {
    display: inline-block;
    width: 55px;
    padding-right: 10px;
  }
  #add_input {
    padding: 0 10px;
  }
  .lastPage #success2 p strong {
    padding-bottom: 0;
  }
  .lastPage form.answers0 {
    height: 405px;
  }
  .useForMobile {
    display: block;
  }
  html body #formHolder .useNotForMobile {
    display: none;
  }
  #fmenu.nav li > a {
    padding: 0 0 0 0px;
  }
}

/*RANGE SLIDER*/
input[type="range"].range_slider {
  width: 100%;
  margin: 5.8px 0;
  background-color: transparent;
  /* -webkit-appearance: none;*/
}
input[type="range"].range_slider:focus::-ms-fill-lower {
  background: #4596db;
}
input[type="range"].range_slider:focus::-ms-fill-upper {
  background: #3785c7;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align: auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type="range"].range_slider {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}

/* answer card of type 3 and 4*/
.funnel-card {
  width: 100%;
  position: relative;
}

/* #form_holder fieldset label.recommended {
  border-color: #0aa527;
  border-width: 2px;
}
#form_holder fieldset label.recommended:hover {
  border-color: #ff8c00;
    margin-top: -1px;
}
#form_holder fieldset label.recommended:hover > div.recommended-title {
  background: #ff8c00;
} */

.funnel-card > img {
  width: 23%;
  height: auto;
  position: absolute;
  top: 62px;
  left: 29px;
}

.funnel-card > div.recommended-title {
  position: absolute;
  min-width: calc(100% + 4px);
  background: #0aa527;
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  margin-top: -2px;
  margin-right: -2px;
  margin-left: -2px;
  padding-top: 8px;
  padding-bottom: 5px;
  font-weight: 400;
  line-height: 1em;
  border-radius: 7px;
}

.funnel-card > div.title-container,
.funnel-card > ul {
  padding-left: 41%;
  width: 100%;
  height: auto;
  position: absolute;
  text-align: left;
}

.funnel-card > div.title-container {
  top: 47px;
  margin-left: 5px;
  margin-right: 5px;
}

.funnel-card > ul {
  bottom: 27px;
  list-style-type: none;
  vertical-align: bottom;
}

.funnel-card .title {
  color: #179107;
  font-size: 20px;
  line-height: 1em;
  font-weight: 500;
}

.funnel-card .subtext,
.funnel-card > ul > li > svg {
  position: absolute;
  color: #007ec8;
  line-height: 1;
}

.funnel-card .subtext {
  line-height: 1.4em;
  margin-top: 3px;
}

.funnel-card > ul > li > div {
  color: #555555;
  margin-left: 20px;
}

.funnel-card .subtext,
.funnel-card > ul > li {
  font-size: 14px;
  font-weight: 400;
}

.funnel-card > ul > li.small {
  display: none;
}

@keyframes answerSlide {
  0% {
    margin-left: -0%;
  }
  10% {
    margin-left: -0%;
  }
  18% {
    margin-left: -100%;
  }
  28% {
    margin-left: -100%;
  }
  36% {
    margin-left: -200%;
  }
  46% {
    margin-left: -200%;
  }
  54% {
    margin-left: -300%;
  }
  64% {
    margin-left: -300%;
  }
  72% {
    margin-left: -400%;
  }
  82% {
    margin-left: -400%;
  }
  90% {
    margin-left: -500%;
  }
  100% {
    margin-left: -500%;
  }
}

.current .answerSlideHolder {
  display: block;
  animation-name: answerSlide;
  animation-duration: 6s;
  animation-fill-mode: forwards;
}

@keyframes calcButton {
  0% {
    margin: 15px auto 10px;
  }
  2% {
    width: 75px;
  }
  17% {
    height: 55px;
    width: 55px;
    margin: 15px auto 10px;
    border-radius: 30px;
    border: none;
  }
  18% {
    background-image: none;
    border: 3px solid #aaa;
    border-left: 3px solid #179107;
    transform: rotate(0deg);
  }
  33% {
    background-image: none;
    border: 3px solid #aaa;
    border-left: 3px solid #179107;
    transform: rotate(0deg);
  }
  88% {
    background-image: none;
    border: 3px solid #aaa;
    transform: rotate(260deg);
    border-left: 3px solid #179107;
    border-radius: 30px;
  }
  89% {
    width: 55px;
    margin: 15px auto 10px;
    transform: rotate(0deg);
    border-radius: 3px;
  }
  100% {
    width: 100%;
    border-radius: 3px;
    margin: 15px auto 10px;
  }
}

@keyframes arrow {
  0% {
    opacity: 1;
  }
  17% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes check {
  0% {
    opacity: 0;
  }
  88% {
    visibility: hidden;
  }
  89% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

#validator.animated.calc span {
  display: none;
}

#validator.animated.calc {
  animation-name: calcButton;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#validator.animated.calc img {
  animation-name: arrow;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#validator.animated.calc span {
  display: none;
}

a#validator.animated div {
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  width: 12px;
  height: 25px;
  display: inline;
  visibility: hidden;
  transform: rotate(45deg) translate(-14px, 7px);
  opacity: 0;
}

a#validator.animated.calc div {
  animation-name: check;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

#location .claim.claim-title-heading {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 39px;
  text-align: center;
  color: #292929;
  margin-top: 0;
}
#location input#zip {
  margin-bottom: 20px;
  margin-top: 40px;
}
.lastPage .solaranlage-text.text-center {
  display: none;
}

fieldset#last a.compare-offer-btn {
  max-width: 100%;
  min-height: 20px;
  height: 55px;
  margin: 20px auto 0 auto;
  background: #179107;
  border-radius: 50px;
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 19px;
  text-transform: uppercase;
  padding: 15px 44px;
  border: 2px solid #179107;
}
h3.success-message-desc {
  margin: 0;
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  color: #212121;
}
@media only screen and (max-width: 800px) {
  #form_holder fieldset label.funnel-card {
    height: 340px;
    margin-bottom: 30px;
  }
  .funnel-card > div.title-container {
    padding-left: 0%;
  }
  .funnel-card .title,
  .funnel-card .subtext {
    text-align: center;
    width: 100%;
    padding: 0 15px;
  }
  .funnel-card > img {
    width: 90px;
    height: auto;
    position: absolute;
    top: 130px;
    left: auto;
    margin-left: -45px;
  }
  .funnel-card > ul {
    bottom: 19px;
    padding-left: 22%;
  }
  #progressbar {
    margin: 0 10px 21px 10px;
  }
  #priceHubbleResult {
    width: calc(100% - 20px);
    margin-left: 10px;
  }
}

@media only screen and (max-width: 768px) {
  fieldset#last a#validator.compare-offer-btn span {
    font-size: 16px;
    line-height: 22px;
  }
  footer ul.nav li {
    display: block;
  }
  #location input#zip {
    margin-bottom: 7px;
    margin-top: 0px;
  }
  #formHolder.hideformHolder .solaranlage-section {
    padding: 100px 0 100px 0;
  }
}
@media only screen and (max-width: 600px) {
  .funnel-card > ul > li.small {
    display: block;
  }
  .funnel-card > ul > li.big {
    display: none;
  }
  /*
    #priceHubbleResult h4,  #priceHubbleResult h3{
        font-size: 17px;
    }
    #priceHubbleResult p{
        font-size: 12px;
    }
    */
}

@media only screen and (max-width: 500px) {
  .funnel-card > ul {
    bottom: 19px;
    padding-left: 15%;
  }
  .funnel-card > img {
    width: 80px;
    top: 145px;
  }
  .funnel-card .title,
  .funnel-card .subtext {
    text-align: center;
    width: 100%;
    padding: 0 22px;
  }
  .funnel-card .subtext,
  .funnel-card > ul > li {
    font-size: 12px;
    font-weight: 400;
  }
  .lastPage form.answers0 {
    height: 415px;
  }
}

@media only screen and (max-width: 450px) {
  .funnel-card .subtext,
  .funnel-card > ul > li {
    font-size: 10px;
    font-weight: 400;
  }
  .funnel-card .title,
  .funnel-card .subtext {
    text-align: center;
    width: 100%;
    padding: 0 10px;
  }
  /*
    #priceHubbleResult h4,  #priceHubbleResult h3{
        font-size: 13px;
    }
    #priceHubbleResult p{
        font-size: 10px;
    }
    */
}
.solaranlage-section.header-top-img::before {
  content: "" !important;
  background: rgba(0, 0, 0, 0.4) !important;
  position: absolute !important;
  left: 0 !important;
  right: 0;
  top: 0 !important;
  bottom: 0;
  display: inline-block !important;
}

#formHolder.hideformHolder .solaranlage-section {
  padding: 170px 0 100px 0;
}

.amazonaffiliate-sec .filter-title h4 {
  margin-top: 0;
  color: #1b920c;
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 24px;
}

.amazon-pg .section-headlines .solaranlage-section {
  background: #179107 no-repeat top left !important;
}

/********************************css by Milan***************************



/***********Start  Sticky Sidebar********/

/* Styling for the box container */
.box_mpa {
  width: 130px;
  height: 150px;
  border-radius: 10px 0 0 10px;
  background-color: #439d4c;
  box-shadow: 0 0 7px 1px rgba(23, 23, 23, 0.42);
  position: fixed;
  top: 150px;
  right: 0;
  display: flex;
  padding: 20px;
  opacity: 0;
  /*jump animation */
  animation: delayedFadeIn 1s ease-in-out 5s forwards,
    jumpAnimation_mpa 0.3s ease-out, jumpAnimation_mpa 1.5s ease-in;
  -webkit-animation: delayedFadeIn 1s ease-in-out 5s forwards,
    jumpAnimation_mpa 0.3s ease-out, jumpAnimation_mpa 1.5s ease-in;
  /* Delay the animations by 5 seconds */
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  cursor: pointer;
  z-index: 999;
}

.jump {
  animation: delayedFadeIn 1s ease-in-out 5s forwards,
    jumpAnimation_mpa 0.3s ease-out, jumpAnimation_mpa 1.5s ease-in;
  -webkit-animation: delayedFadeIn 1s ease-in-out 5s forwards,
    jumpAnimation_mpa 0.3s ease-out, jumpAnimation_mpa 1.5s ease-in;
}

@keyframes delayedFadeIn {
  to {
    opacity: 1;
  }
}

@-webkit-keyframes delayedFadeIn {
  to {
    opacity: 1;
  }
}

/* Keyframes animation for jumping effect */
@keyframes jumpAnimation_mpa {
  30% {
    width: 200px;
  }
}

/* Vendor prefixes for keyframes animation */
@-moz-keyframes jumpAnimation_mpa {
  30% {
    width: 200px;
  }
}

@-webkit-keyframes jumpAnimation_mpa {
  30% {
    width: 200px;
  }
}

@-o-keyframes jumpAnimation_mpa {
  30% {
    width: 200px;
  }
}

.button_mpa span {
  display: inline-block;
  writing-mode: vertical-lr;
}

.button_mpa:hover {
  color: #179107;
  border-top: 3px solid #179107;
  border-bottom: 3px solid #179107;
  border-right: 3px solid #179107;
  background-color: #fff;
  transform-origin: center center;
}

/* Styling for the vertical text inside the box */
.vertical-text_mpa {
  writing-mode: vertical-lr;
  /* Display the text vertically */
  transform: rotate(180deg);
  /* Rotate the text */
  color: white;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  font-family: "Inter";
  letter-spacing: 1px;
  margin-right: 3%;
}

/* Styling for the button */
.button_mpa {
  width: 50px;
  height: auto;
  background-color: #439d4c;
  box-shadow: 0px 0px 7px 1px rgba(23, 23, 23, 0.42);
  color: white;
  border: none;
  cursor: pointer;
  padding: 20px 0 20px 10px;
  font-weight: normal;
  font-family: "Inter";
  writing-mode: vertical-lr;
  /* Display the text vertically */
  transform: rotate(180deg);
  /* Rotate the text */
  top: 150px;
  border-radius: 0px 10px 10px 0px;
  right: 0;
  align-items: center;
  display: none;
  /* Initially hide the button */
  font-size: 16px;
  position: fixed;
  letter-spacing: 1px;
  z-index: 999;
}

/* Styling for the image inside the box */
.image_mpa {
  width: 107px;
  height: 144px;
  /*position: inherit;
    right: 20px;*/
  transition: transform 0.1s ease-out;
  transition: transform 0.9s ease-in;
  -webkit-transition: transform 0.1s ease-out;
  -webkit-transition: transform 0.9s ease-in;
}

.image_mpa:hover {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  transform-origin: center center;
}

/* Styles for the modal overlay */
.modal-overlay_mpa {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  padding: 5%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Styles for the modal content */
.modal-content_mpa {
  background-color: white;
  margin-top: 100px;
  padding: 20px;
  border-radius: 18px;
  width: -webkit-fill-available;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  /* Added for positioning the close button */
}

/* Styles for the close button */
.close-button_mpa {
  position: absolute;
  top: 10px;
  border-radius: 10px;
  right: 10px;
  color: #fff;
  background-color: #cd1719;
  border-color: #cd1719;
  font-size: 26px;
  font-weight: 900;
  height: 50px;
  width: 50px;
  font-family: "Inter";
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.close-button_mpa:hover {
  transform: scale(1.1);
  font-size: 32px;
  color: #cd1719;
  background-color: #fff;
  border-color: #cd1719;
  border: solid 2px;
}

/* bekannt_aus logos */

.bottom-sticky {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 16px 0 26px 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.bottom-sticky img {
  object-fit: contain !important;
  width: 35px !important;
  margin-right: 15px;
}

.bekannt_aus_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.bekannt_aus_logo {
  height: 25px;
  width: auto;
  object-fit: contain;
}

.focus_logo {
  width: 15% !important;
  min-width: 80px;
  margin-right: 15px;
}

.handelsblatt_logo {
  width: 20% !important;
  min-width: 100px;
  margin-right: 15px;
}

.bekannt_aus_text_desktop {
  min-width: 110px;
  font-size: 14px;
  line-height: 16px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: left;
  margin-right: 15px;
}

.bekannt_aus_text_mobile {
  display: none;
}

/* Media query for mobile screens */

@media screen and (max-width: 430px) {
  .button_mpa {
    top: 115px;
    display: block;
    /* Display the button */
    position: fixed;
    font-size: 12px;
    padding: 5px;
    width: 30px;
    height: 161px;
    opacity: 0; /* Set initial opacity to 0 */
    -webkit-animation: fadeIn_mpa 1s ease-out 5s forwards; /* Apply a delayed animation for Safari */
    animation: fadeIn_mpa 1s ease-out 5s forwards; /* Apply a delayed animation for other browsers */
  }

  /* Define the fadeIn_mpa animation */
  @keyframes fadeIn_mpa {
    to {
      opacity: 1;
    }
  }
  /* Define the fadeIn_mpa animation */
  @-webkit-keyframes fadeIn_mpa {
    to {
      opacity: 1;
    }
  }

  .box_mpa {
    display: none;
    /* Hide the box */
    width: 152px;
    height: 161px;
    top: 115px;
    padding: 10px 10px 10px 10px;
  }

  .image_mpa {
    width: 107px;
    height: 140px;
    transition: transform 0.1s ease-out;
    transition: transform 0.9s ease-in;
  }

  .vertical-text_mpa {
    letter-spacing: 1.5px;
    font-size: 12px;
  }

  .modal-content_mpa {
    min-width: 100%;
  }

  /* bekannt_aus logos */

  .bottom-sticky {
    padding: 5px 0 25px 0;
  }

  .bottom-sticky img {
    -webkit-object-fit: contain !important;
    -moz-object-fit: contain !important;
    -ms-object-fit: contain !important;
    object-fit: contain !important;
    max-height: 18px;
    width: 25px !important;
    height: auto !important;
    margin-right: 5px;
  }

  .focus_logo {
    width: 30% !important;
  }

  .handelsblatt_logo {
    width: 20% !important;
    min-width: 80px !important;
  }

  .bekannt_aus_text_desktop {
    display: none;
  }

  .bekannt_aus_text_mobile {
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
  }
}

@media screen and (max-width: 1000px) and (orientation: landscape) {
  .button_mpa {
    top: 100px;
    display: block;
    /* Display the button */
    position: fixed;
    font-size: 14px;
    padding: 5px;
    width: 35px;
  }

  .box_mpa {
    display: none;
    /* Hide the box */
    width: 166px;
    height: 180px;
    top: 100px;
    padding: 20px 20px 20px 10px;
  }

  .bottom-sticky img {
    margin-right: 15px;
  }
}

@media (min-width: 430px) and (max-width: 900px) {
  .button_mpa {
    top: 95px;
    display: block;
    /* Display the button */
    position: fixed;
    font-size: 14px;
    padding: 5px;
    width: 35px;
  }

  .box_mpa {
    display: none;
    /* Hide the box */
    width: 166px;
    height: 180px;
    top: 95px;
    padding: 20px 20px 20px 10px;
  }

  /* bekannt_aus logos */

  .bekannt_aus_text_desktop {
    display: none;
  }
  .bekannt_aus_text_mobile {
    font-size: 14px;
    display: block;
  }
}

@media (min-width: 900px) and (max-width: 1720px) {
  .button_mpa {
    position: fixed;
    font-size: 14px;
    width: 30px;
    letter-spacing: 0;
  }

  .box_mpa {
    padding: 20px 20px 20px 10px;
    width: 160px;
    height: 182px;
  }

  .vertical-text_mpa {
    letter-spacing: 0;
  }

  /* bekannt_aus logos */

  .bottom-sticky {
    padding: 8px 0 26px 0;
  }

  .bekannt_aus_text_desktop {
    display: none;
  }
  .bekannt_aus_text_mobile {
    font-size: 18px;
    display: block;
    margin-bottom: 2%;
  }
}

@media (min-width: 1720px) {
  .button_mpa {
    position: fixed;
    font-size: 14px;
    letter-spacing: 0;
  }

  .box_mpa {
    padding: 20px 0 20px 10px;
    width: 166px;
    height: 185px;
  }

  .vertical-text_mpa {
    font-size: 14px;
    letter-spacing: 0;
  }

  .modal-content_mpa {
    min-width: 800px;
  }
}

/*********** End  Sticky Sidebar********/