/* responsive styles */
@media screen and (min-width: 1px) and (max-width: 768px) {

  .mobileOnly {
    display: block;
  }

  .hideOnMobile {
    display: none;
  }


  body {
    font-size: 14px;
    line-height: 18px;
  }

  h2 {
    line-height: 34px;
  }

  .h50 {
    font-size: 32px;
    margin-bottom: 32px;
  }

  .h40 {
    font-size: 32px;
    line-height: 38px;
  }

  .h40b {
    font-size: 24px;
    line-height: 32px;
  }

  .h32 {
    font-size: 24px;
    line-height: 28px;
  }

  .h24b {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 32px;
  }

  .c50l,
  .c50r {
    width: 100%;
    float: none;
  }





  .memberFormSteps {
    flex-direction: column;
  }

  .memberFormSteps p {
    margin-top: 20px;
    margin-bottom: 20px;
  }


  .buttonWrapper .button,
  form button {
    padding: 0px 24px;
    width: calc(100% - 48px);
  }

  .buttonWrapper .outlineButton {
    width: calc(100% - 50px);
  }


  header {
    top: 0px;
  }

  header .buttonWrapper,
  .headerScrolled .buttonWrapper {
    display: none;
  }

  header .inner,
  .headerScrolled .inner {
    width: 100%;
  }


  footer .inner,
  section .sectionInner,
  .event .eventInner {
    width: 325px;
  }

  section.shadowBox .sectionInner,
  div.shadowBox  {
    width: 293px;
    padding: 32px 16px;
  }

  header .navMain {
    width: 100%;
    height: 0;
    margin: 0 0 60px;
    padding: 0;
    box-shadow: 0 0 40px 19px rgba(0, 0, 0, 0.16);
    background: #FFFFFF;
    right: 0px;
    border-bottom-left-radius: 1000px;
    border-bottom-right-radius: 1000px;
    overflow: hidden;
    transition: height 0.5s, padding 0.5s;
  }

  header .navMain.active {
    height: 160px;
    padding: 80px 0px 50px 0px;
  }

  body.lightBg header .navMain {
    background: radial-gradient(circle at 50% -20%, #78b03c, #295f1e 75%);
  }


  header .navMain ul li {
    display: block;
    width: 100%;
    margin: 0px 0px 0px 0px;
    text-align: center;
  }

  header .navMain ul li a {
    color: #000000;
    font-weight: 400;
    display: inline-block;
  }

  header .navMain ul li a:hover {
    border: none;
  }

  body.lightBg header .navMain ul li a,
  body.lightBg header .navMain ul li a:hover,
  body.lightBg header .navMain ul li a.active,
  body.lightBg header .navMain ul li a.active:hover {
    color: #FFFFFF;
  }


  header .navMain ul li a.active,
  header .navMain ul li a.active:hover {
    color: var(--dark-grass-green);
    border-bottom: 1px solid var(--dark-grass-green);
    font-weight: 600;
  }


  body.lightBg header .navMain ul li a.active,
  body.lightBg header .navMain ul li a.active:hover  {
    border-bottom: 1px solid #FFFFFF;
  }

  header .navMain ul li.portal,
  .headerScrolled .navMain ul li.portal {
    display: inline-block;
  }

  .navMobileTriggers {
    width: 32px;
    height: 32px;
    display: block;

    position: absolute;
    top: 24px;
    right: calc(50% - 163px);
  }

  .navMobileTriggers .line {
    width: 18px;
    height: 2px;
    display: block;
    border-radius: 2px;

    position: absolute;
    left: 7px;
    opacity: 1;
    z-index: 100;
  }

  .navMobileTriggers.active .line,
  body.lightBg .navMobileTriggers .line {
    background-color: #303d35;
  }

  .navMobileTriggers .line,
  body.lightBg .navMobileTriggers.active .line {
    background-color: #FFFFFF;
  }

  .navMobileTriggers .line-1 {
    top: 10px;
    transition: transform 1s ease-in-out, top 1s ease-in-out, background-color 0.5s ease-in-out;
  }

  .navMobileTriggers .line-2 {
    top: 15px;
    transition: left 0.5s ease-in-out, width 0.5s ease-in-out, transform 0.2s ease-in-out, background-color 0.5s ease-in-out;
  }

  .navMobileTriggers .line-3 {
    top: 20px;
    transition: transform 1s ease-in-out, top 1s ease-in-out, background-color 0.5s ease-in-out;
  }

  .navMobileTriggers:hover {
    cursor: pointer;
  }

  .navMobileTriggers:hover .line-2 {
    width: 22px;
    left: 5px;
  }

  .navMobileTriggers.active .line {
    top: 15px;
  }





  .navMobileTriggers.active .line-1 {
    transform: rotateZ(-135deg);
  }

  .navMobileTriggers.active .line-2 {
    transform: rotateY(90deg);
  }
  .navMobileTriggers.active .line-3 {
    transform: rotateZ(315deg);
  }

  header .logo.navActive a {
    background-image: url(../i/7Energy-EG-Austria_Logo-green.svg);
  }

  body.lightBg header .logo.navActive a {
    background-image: url(../i/7Energy-EG-Austria_Logo-white.svg);
  }


  header .navMain ul,
  footer nav ul  {
    text-align: center;
  }

  header .logo,
  footer .logo {
    width: 195px;
    height: 32px;
  }

  header .logo {
    position: absolute;
    z-index: 100;
    left: calc(50% - 163px);
    top: 24px;
  }


  footer .logo {
    position: relative;
    margin: 0 auto;
  }

  footer nav {
    float: none;
    width: 100%;
    padding-top: 32px;
    padding-bottom: 12px;
  }

  footer nav ul li {
    margin: 0px;
    width: 100%;
    display: block;
    padding-bottom: 24px;
  }

  footer nav ul li a {
    line-height: 18px;
    height: auto;
  }

  footer nav ul li a:hover  {
    border: none;
  }

  footer .footerBottom {
    padding-bottom: 24px;
  }

  footer .socialLinks {
    float: none;
    padding: 0px;
    text-align: center;
    height: auto;
    margin-bottom: 40px;
  }

  footer .socialLinks a,
  footer .socialLinks a.facebook {
    margin: 0px;
  }

  .firstSectionCircles {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
  }

  .firstSection .sectionInner {
    padding-top: 90px;
  }

  h1 {
    padding-top: 80px;
  }

  h1,
  .firstSection h1 {
    font-size: 40px;
    line-height: 50px;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }

  body.home .firstSection h1 {
    font-weight: 300;
  }

  .firstSection p {
    font-size: 14px;
  }

  section h1 + p,
  section.newsletter h2 + p,
  section.yourAdvantages h2 + p,
  section.allAdvantages h2 + p,
  section.growingNetwork h2 + p,
  section.faqs h2 + p {
    min-width: auto;
    width: auto;
    margin-bottom: 25px;
  }


  .firstSection .innerCircle {
    top: -30px;
    left: calc(50% - 150px);
    width: 300px;
    height: 300px;
  }


  .firstSection .outerCircle {
    top: -300px;
    left: calc(50% - 400px);
    width: 800px;
    height: 800px;
  }


  .firstSection {
    background-image: radial-gradient(circle at 50% 50%, #78b03c, #295f1e 83%);
  }


  .introBG {
    height: 375px;
    background-image: url(../i/homeIntroBG-1440.webp);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 375px;
  }

  .introBG img {
    display: none;
  }

  #newsletterReg {
    position: relative;
    padding-bottom: 64px;
  }

  section.newsletter .widget-text input {
    width: 261px;
  }

  section.newsletter .widget-checkbox {
    width: 100%;
    padding-top: 16px;
  }

  #newsletterReg .widget-checkbox label,
  .privacyConsent label {
      width: calc(100% - 30px);
      padding-left: 30px;
  }

  section.newsletter .widget-submit {
    position: absolute;
    bottom: 0px;
    left: 0px;
  }

  form button {
    width: 293px;
  }

  img {
    width: auto;
    height: auto;
    max-width: 100%;
  }

  .advantageItems .advantageItem,
  .advantageItems .yourAdvantageItem,
  .advantageItems .advantageItem:first-child,
  .advantageItems .yourAdvantageItem:first-child,
  .advantageItems .advantageItem:last-child,
  .advantageItems .yourAdvantageItem:last-child {
    width: 100%;
    margin: 0px 0px 24px 0px;
  }


  .advantageItems {
    padding-bottom: 12px;
  }

  section.fourSteps .leftSection {
    width: 100%;
    height: 385px;
    position: relative;
  }

  section.fourSteps .rightSection {
    width: 100%;
    padding: 0px;
    background: linear-gradient(13deg, #295f1e -1%, #669d35 113%);
  }

  section.fourSteps .rightSection .rightSectionInner {
    width: auto;
    background: none;
    padding: 32px 24px 0px 24px;
  }

  .networkStats .networkStat {
    margin-bottom: 40px;
  }

  .growingNetwork .austriaMap {
    width: 293px;
    padding: 0px 0px 50px;
  }

  .growingNetwork .austriaMap .circles {
    transform: scale(0.3);
    position: absolute;
    top: 0px;
    left: 25px;
  }

  .faqListHome .faqItem,
  .faqList {
    padding: 24px;
    width: 277px;
  }

  .faqList .faqItem:first-child {
    padding-top: 0px;
  }

  .faqList .faqItem:last-child {
    padding-bottom: 0px;
  }



  .faqList .faqItem h2,
  .faqListHome .faqItem h3 {
    background-position: right top;
  }


  body.contentPage .firstSection {
    padding-bottom: 20px;
  }

  form .formCheckboxGroup {
    width: 100%;
  }

  .widget-radio .radioItem {
    padding-right: 0px;
    width: 125px;
  }

  form .widget-text,
  form .widget-submit {
    display: block;
  }

  form .widget-text input,
  form .widget-textarea textarea {
    width: calc(100% - 48px) !important;
    margin-right: 0px;
    padding: 0px 24px;
  }

  form .widget-textarea textarea {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  form .formGroup .widget-checkbox {
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .energiekompassLogo {
    margin-left: 0px;
  }


  body.energiegemeinschaften  .topGreenBg {
    height: 1100px;
  }

  ul.energiegemeinschaftenSwitch li {
    position: relative;
    z-index: 10;
  }

  ul.energiegemeinschaftenSwitch li {
    font-size: 16px;
    margin-bottom: 32px;
  }

  ul.energiegemeinschaftenSwitch li:first-child {
    margin-right: 0px;
  }



  .c50r ul,
  .c50l ul {
    font-size: 14px;
    line-height: 21px;
  }

  .c50r ul li,
  .c50l ul li {
    width: 100%;
  }


  .leftText .buttonWrapper,
  .rightText .buttonWrapper {
    text-align: center;
  }

  section.vorteile7Energy .c50l.leftText,
  section.vorteile7Energy .c50r.leftText  {
    text-align: center;
    width: 100%;
    padding-left: 0px;
  }

  section.vorteile7Energy figure  {
    padding-bottom: 32px;
  }

  .energiegemeinschaften .introText .colSet {
    padding-bottom: 0px;
  }

  .energiegemeinschaften .introText .c50l figure {
    padding-bottom: 16px;
  }

  /* CSS Carousel on Home */


  @keyframes tonext {
    75% { left: 0; }
    95% { left: 100%; }
    98% { left: 100%; }
    99% { left: 0; }
  }

  @keyframes tostart {
    75% { left: 0; }
    95% { left: -300%; }
    98% { left: -300%; }
    99% { left: 0; }
  }

  @keyframes snap {
    96%  { scroll-snap-align: center; }
    97%  { scroll-snap-align: none; }
    99%  { scroll-snap-align: none; }
    100% { scroll-snap-align: center; }
  }



  .carousel,
  .carousel div {
    box-sizing: border-box;
    scrollbar-color: transparent transparent; /* thumb and track color */
    scrollbar-width: 0px;
  }

  .carousel div::-webkit-scrollbar {
    width: 0;
  }

  .carousel div::-webkit-scrollbar-track {
    background: transparent;
  }

  .carousel div::-webkit-scrollbar-thumb {
    background: transparent;
    border: none;
  }

  .carousel,
  .carousel div {
    -ms-overflow-style: none;
  }


  .carousel {
    position: relative;
    height: 350px;
    perspective: 100px;
    padding-bottom: 50px;
  }

  .carousel__viewport {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }

  .carousel__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    counter-increment: item;
  }


  .carousel__slide:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-40%,70px);
    color: #fff;
    font-size: 2em;
  }

  .carousel__snapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    scroll-snap-align: center;
  }

  @media (hover: hover) {
    .carousel__snapper {
      animation-name: tonext, snap;
      animation-timing-function: ease;
      animation-duration: 4s;
      animation-iteration-count: infinite;
    }

    .carousel__slide:last-child .carousel__snapper {
      animation-name: tostart, snap;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .carousel__snapper {
      animation-name: none;
    }
  }

  .carousel:hover .carousel__snapper,
  .carousel:focus-within .carousel__snapper {
    animation-name: none;
  }

  .carousel__navigation {
    position: absolute;
    right: 0;
    bottom: 30px;
    left: 0;
    text-align: center;
  }

  .carousel__navigation-list,
  .carousel__navigation-item {
    display: inline-block;
  }

  .carousel__navigation-list,
  .carousel__navigation-item a {
    width: 48px;
    height: 48px;
    margin: 0px 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .carousel__navigation-button {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--dark-grass-green);
    background-clip: content-box;
    border: none;
    border-radius: 50%;
    font-size: 0;
    transition: transform 0.1s;
  }



  .lab10Logo {
    margin-bottom: 50px;
  }

  .c50l figure,
  .c50r figure {
    margin-bottom: 10px;
  }



  .tarifZusatzBox {
    width: 100%;
  }

  .tarifZusatzBox .tarifContainer,
  .tarifZusatzBox .zusatzContainer {
    margin: 0px auto 50px auto;
    height: auto;
  }

  .tarifZusatzBox h2 {
    font-size: 22px;
  }
  .firstSection h1 {
    word-break: normal;
  }

  .stepsList .stepsItem h3 {
    line-height: 20px;
    padding-top: 10px;
  }

  .stepsList .stepsItem .buttonWrapper a {
    font-size: 14px;
    text-align: center;
    padding: 0px 5px;
    width: calc(100% - 10px);
  }


  .event .eventInner .eventIcon {
    font-size: 20px;
    display: none;
  }
  .event .eventInner .eventInfos {
    padding-left: 0px;
    padding-top: 10px;
  }

  .event .eventTitle {
    font-size: 20px;
  }

  .event .more .button {
    width: auto;
    min-width: auto;
  }

  .faqItem .tableWrapper {
    overflow-x: scroll;
  }

  .faqItem table tr:first-child td {
    white-space: nowrap;
  }

  .memberFormSteps {
    text-align: left;
  }

  .memberFormSteps .iconLine {
    border-top: 0px dashed #74C14F;
    border-left: 3px dashed #74C14F;
    width: 0px;
    height: calc(100% - 200px);
    top: 50px;
    left: 50px;
  }

  .memberFormStep {
    width: calc(100% - 120px);
    display: block;
    position: relative;
    padding-top: 0px;
    padding-left: 120px;
    padding-bottom: 50px;
  }

  .memberFormStep .icon {
    left: 0px;
  }

  .memberFormStep h3 {
    padding-top: 15px;
    padding-bottom: 0px;
  }

  .memberFormStep p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 18px;
  }

  .memberFormStep p a {
    font-size: 14px;
    line-height: 18px;
  }

  .memberFormStep p br {
    display: none;
  }

  .memberFormButton h3 {
    font-size: 18px;
    line-height: 20px;
  }

  .memberFormButton .memberFormButtonArrow {
    top: -160px;
    background-image: url(../i/memberFormButtonArrowMobile.svg);
  }


  .memberFormButton .buttonWrapper {
    padding: 0px 20px;
  }

  .memberFormButton .buttonWrapper a {
    min-width: auto;
  }

  section.wosBringts .sectionInner {
    width: 100%;
  }

  section.wosBringts h2.headline {
    line-height: 42px;
  }

  section.wosBringts h2.headline,
  section.wosBringts h2.headline+p {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

 .tarifeProduzentMain .tarifCosts {
   padding-top: 30px;
 }

 .tarifeProduzentMain .selections {
   width: 340px;
 }

 .tarifeProduzentMain .selections .tarifSelection {
   padding: 7px 12px;
   line-height: 15px;
 }

 .finanzielleVorteile .overview {
  background-size: auto 60%;
  height: 400px;
 }

 .finanzielleVorteileSwitch {
   font-size: 14px;
 }

 .finanzielleVorteileSwitch .toggle {
   margin: 0px 10px;
 }

 .produzent .overlap.einspeisungMehrertrag,
 .verbraucher .overlap.bezugErsparnis {
   left: 45px;
   top: 315px;
   width: 200px;
   text-align: center;
 }

 .verbraucher .overlap .label,
 .produzent .overlap .label {
   left: 5px;
 }

 .produzent .overlap.einspeisungMehrertrag .label,
 .verbraucher .overlap.bezugErsparnis .label {
   left: 50%;
   transform: translateX(-50%);
 }

 .produzent .overlap.einspeisungSevenEnergy,
 .verbraucher .overlap.bezugSevenEnergy {
   top: 15px;
   left: 00px;
 }

  .produzent .overlap.einspeisungNetzeinspeisung,
  .verbraucher .overlap.bezugNetzbezug {
    left: auto;
    right: 0px;
    top: 15px;
  }

  .stromkostenBremse {
    font-size: 12px;
    line-height: 15px;
    padding-top: 10px;
    text-align: left;
  }

  .stromkostenBremse .check {
    left: 3px;
    top: 5px;
  }

  .produzent .overlap.einspeisungSevenEnergy,
  .verbraucher .overlap.bezugSevenEnergy,
  .produzent .overlap.einspeisungNetzeinspeisung,
  .verbraucher .overlap.bezugNetzbezug {
    height: 50px;
    width: 140px;
  }

  .finanzielleVorteile .overviewArrows {
   background-size: 256px auto;
   background-position: center 80px, center 200px;
  }

  .finanzielleVorteile .produzent .overviewArrows  {
    background-image: url(../i/content/FV-Produzent-In-Mobile.svg), url(../i/content/FV-Out-Mobile.svg);
  }

  .finanzielleVorteile .verbraucher .overviewArrows  {
    background-image: url(../i/content/FV-Verbraucher-In-Mobile.svg), url(../i/content/FV-Out-Mobile.svg);
  }

  .finanzielleVorteile .disclaimer {
    font-size: 12px;
    line-height: 18px;
    padding-top: 20px;
  }



}