/* HEADER */

body header .bannerwrapper{
  --home-page-banner-height: 100vh;
  height: 100vh;
}

body header .bannerwrapper::after{
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.7) 100%);
}

body .taglineoverlay{
  bottom: 170px;
  .fixed{
    --site-max-width: 1300px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.2em;
  }
}

@media only screen and (max-width: 550px) {
  body .taglineoverlay .fixed{
    font-size: 5.3vw;
  }
}

/* LAYOUT */

body .mainwrapper{
  border-inline: 0px solid transparent;
  .container::before{
    display: none;
  }
}

/* WELCOME */

body section.ParagraphBloq.mod_none{
  div.Welcome > div.WelcomeFlex{
    &::before{
      content: '';
      width: 320px;
      height: 320px;
      position: absolute;
      bottom: -20px;
      right: calc(-15vw - 100px);
      background-image: var(--watermark);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 0% 100%;
      opacity: 0.15;
      z-index: -1;
    }
    .ItemImage{
      .ItemBefore {
        border-radius: 50%;
      }
    }
    .Title {
      font-family: var(--hp-bloq-family);
      font-weight: var(--hp-bloq-weight);
      font-size: var(--hp-bloq-font-size);
      text-transform: var(--hp-bloq-text-transform);
      color: rgb(var(--hp-bloq-color));
      letter-spacing: var(--hp-bloq-letter-spacing);
      span {
        font-family: var(--hp-bloq-span-family);
        font-weight: var(--hp-bloq-span-weight);
        font-size: var(--hp-bloq-span-font-size);
        text-transform: var(--hp-bloq-span-text-transform);
        color: rgb(var(--hp-bloq-span-color));
        letter-spacing: var(--hp-bloq-span-letter-spacing);
        line-height: 1;
      }
      br + span{
        padding-left: var(--hp-bloq-span-indent);
      }
    }
    label{
      text-transform: uppercase;
      color: rgb(var(--color1));
    }
    input:checked+label{
      color: rgb(var(--color6));
    }
  }
}

@media only screen and (min-width: 701px) {
  body section.ParagraphBloq.mod_none{
    padding-top: 110px !important;
    div.Welcome > div.WelcomeFlex{
      --welcome-max-width: max(68vw, 1000px);
      padding-left: min(var(--welcome-max-width) / 2, 50%);
      .ItemImage{
        width: 28%;
        .ItemBefore {
          position: absolute;
          top: auto;
          bottom: 0;
          z-index: 1;
        }
      }
      .Title {
        position: absolute;
        left: 0;
        top: 0;
        max-width: 50%;
      }
      .ItemContent{
        min-height: max(23vw, 333px);
        padding-bottom: 20px;
        .paracontent p:first-child{
          margin-top: 0;
        }
      }
      .LinkWrapper{
        position: relative;
        &::before{
          content: '';
          height: 1px;
          width: 80%;
          background-color: rgb(var(--color1));
          position: absolute;
          right: calc(100% - 20px);
          top: 50%;
        }
      }
      label{
        background-color: transparent !important;
        position: absolute;
        top: -100px;
        left: 50%;
        margin: 0 !important;
        font-size: 16px;
        line-height: 16px;
        border-left: 2px solid rgb(var(--color1));
        padding-block: 0;
        &:nth-child(2){
          transform: translateX(calc(-100% - 65px));
          border-left: 0px solid transparent;
        }
        &:nth-child(8){
          transform: translateX(-50%);
        }
        &:nth-child(14){
          transform: translateX(65px);
        }
      }
    }
  }
}

@media only screen and (max-width: 700px) {
  body section.ParagraphBloq.mod_none{
    padding-top: 20px !important;
    div.Welcome>div.WelcomeFlex{
      padding-left: 0 !important;
      .ItemImage{
        position: relative !important;
        order: -2;
        min-width: 100%;
        .ItemBefore{
          aspect-ratio: 1 / 1 !important;
          position: static !important;
          width: 250px !important;
          margin: 0px auto 30px;
        }
      }
      .Title, .ItemContent, .LinkWrapper{
        padding-left: 0;
      }
      .Title{
        padding-top: 30px;
      }
      label{
        background-color: rgb(245,245,245) !important;
        margin: 0;
      }
      label:nth-child(2){
        margin-left: 0px;
      }
    }
  }
}

/* QUICK LINKS */

body section.LinksBloq.mod_grid_concertina{
  padding: 30px 40px !important;
  div.Concertina > ul > li{
    max-height: unset;
    .ItemInner{
      padding-top: 70%;
      &::before{
        top: 0;
        bottom: 0;
        background-image: linear-gradient(rgba(var(--grey0),0.1), rgba(var(--grey0),0.5));
        background-color: transparent;
        opacity: 0.9;
      }
      .ItemContent{
        scale: 0.872;
      }
    }
    &:hover{
      scale: 1.16;
      z-index: 1;
      .ItemInner{
        padding-top: 20px;
        &::before{
          background-image: linear-gradient(var(--item-color), var(--item-color));
          background-color: transparent;
          opacity: 0.9;
        }
      }
    }
  }
}

body section.LinksBloq.mod_grid_concertina div.Concertina > ul > li{
  opacity: 0;
  transform: translateX(100vw);
  transition-delay: 0s, 0s, 0s;
  transition: 1s, 1s, 0.2s;
  transition-property: opacity, transform, scale;
  &:nth-child(2){
    transition-delay: 0.2s, 0.2s, 0s;
    transform: translateX(75vw);
  }
  &:nth-child(3){
    transition-delay: 0.4s, 0.4s, 0s;
    transform: translateX(50vw);
  }
  &:nth-child(4){
    transition-delay: 0.6s, 0.6s, 0s;
    transform: translateX(50vw);
  }
}
body section.LinksBloq.mod_grid_concertina.animationcomplete div.Concertina > ul > li{
  opacity: 1;
  transform: translateX(0px);
}

@media only screen and (max-width: 1080px) {
  body section.LinksBloq.mod_grid_concertina div.Concertina > ul > li{
    min-width: 340px;
    .ItemInner{
      padding-top: 70%;
      .ItemContent{
        scale: 0.928;
      }
    }
    &:hover{
      scale: 1.09 !important;
    }
  }
}

@media only screen and (max-width: 800px) {
  body section.LinksBloq.mod_grid_concertina div.Concertina > ul > li{
    min-width: 250px;
  }
}

/* VIDEO */

section.VideoBloq{
  padding-inline: 0px !important;
  &::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(var(--color1));
    height: calc(80px + 20vw);
  }
  h2.bloqTitle{
    text-align: center;
    width: 70%;
    margin-left: auto;
    color: rgb(var(--color1));
    padding-bottom: 30px;
    padding-inline: 20px;
    span{
      color: rgb(var(--color1));
    }
  }
  div.Full{
    width: 84%;
    margin-left: auto;
    position: relative;
    &::before{
      content: '';
      position: absolute;
      top: -30px;
      left: -30px;
      background-color: rgb(var(--color6));
      height: 30px;
      aspect-ratio: 1 / 1;
      z-index: -1;
      transition: 1s;
    }
    ul li .Item{
      .ItemBefore{
        margin-bottom: 0;
      }
      .description{
        display: none;
      }
    }
  }
  @media only screen and (max-width: 600px) {
    h2.bloqTitle{
      width: 100%;
    }
    div.Full{
      width: calc(100% - 30px);
      &::before{
        top: -20px;
        left: -20px;
        height: calc(34vw + 20px);
      }
    }
  }
}

section.VideoBloq.animationcomplete{
  div.Full{
    &::before{
      height: calc(28vw + 30px);
    }
  }
}

/* GREEN FLEX */

body .greenwrapper{
  background-color: rgb(var(--color1));
  padding-bottom: 220px;
  margin-bottom: -120px;
  .greenflex{
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    padding-inline: 30px;
    .greenleft{
      flex: 0 0 50%;
      max-width: 50%;
      min-width: 300px;
      padding-right: 30px;
      section{
        max-width: 100%;
      }
    }
    .greenright{
      flex: 0 0 50%;
      max-width: 50%;
      padding-left: 8%;
      min-width: 324px;
      section{
        max-width: 100%;
      }
    }
  }
}

@media only screen and (max-width: 800px) {
  body .greenwrapper .greenflex{
    flex-wrap: wrap;
    .greenleft{
      flex: 0 0 100%;
      min-width: 100%;
      padding-right: 0;
    }
    .greenright{
      flex: 0 0 100%;
      min-width: 100%;
      padding-left: 0;
    }
  }
}

@media only screen and (max-width: 450px) {
  body .greenwrapper .greenflex{
    padding-inline: 0;
  }
}

body .greenwrapper{

  /* HISTORY */

  section.HistoryBloq{
    .bloqTitle{
      --hp-bloq-color: var(--color4);
      --hp-bloq-span-color: var(--grey10);
      padding-bottom: 50px;
    }
    div.Slider{
      padding-inline: 0;
      --SliderRowHeight: 570px;
      .nav{
        top: auto;
        bottom: 8px !important;
        z-index: 1;
        --nav-background-color: var(--color5);
        --nav-color-hover: var(--color5);
        &.next{
          left: auto !important;
          right: 30px !important;
        }
        &.last{
          left: auto !important;
          right: 83px !important;
        }
      }
      .SliderInner>ul>li{
        .Item{
          .ItemBefore{
            height: 100%;
          }
          &:hover{
            .ItemBefore{
              height: calc(100% + 20px);
              bottom: -10px;
            }
          }
          &::before{
            content: '';
            position: absolute;
            width: 100%;
            height: 33px;
            background-color: rgb(var(--color1));
            bottom: -3px;
            left: 0;
            z-index: 1;
          }
          .ItemInner{
            height: 100%;
            background-color: transparent;
            color: rgb(var(--grey10));
            background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8));
            padding: 40px 40px 90px;
            align-items: flex-start;
            text-align: left;
            justify-content: flex-end;
            .Title{
              font-size: var(--fs3);
              color: white;
              font-weight: 900;
              margin-bottom: 0;
            }
            .ItemSubtitle{
              text-transform: uppercase;
              font-size: calc((var(--fs6) + var(--fs5)) / 2);
            }
            .ItemContent{
              opacity: 1;
              max-height: unset;
              .paracontent{
                font-weight: 200;
                .cardBottomLinks{
                  border-top: 0px solid transparent;
                  display: block;
                  a{
                    z-index: 1;
                    position: absolute;
                    bottom: 8px;
                    left: 20px;
                    display: inline-grid;
                    place-items: center;
                    background-color: rgb(var(--color5));
                    padding: var(--button-padding);
                    font-size: var(--button-font-size);
                    color: white;
                    cursor: pointer;
                    text-decoration: none;
                    text-align: center;
                    text-transform: var(--button-text-transform);
                    margin: 0;
                    border-radius: var(--button-border-radius);
                    font-family: var(--button-font-family);
                    font-weight: var(--button-font-weight);
                    line-height: 1.5em;
                    &:hover{
                      background-color: white;
                      color: rgb(var(--color5));
                    }
                  }
                }
              }
            }
          }
        }
      } 
    }
  }

  /* EVENTS */

  section.CalendarBloq{
    position: relative; 
    margin-bottom: 30px;
    .bloqTitle{
      --hp-bloq-color: var(--grey10);
      font-size: var(--fs3);
      font-weight: 900;
      padding-left: 30px;
      position: relative;
    }
    .filterSourceSideBySideButtons{
      position: absolute;
      bottom: -22px;
      padding-left: 30px;
      margin: 0px;
      .sourceButtonWrapper{
        margin: 0;
        .buttonstyle{
          margin: 0;
          --button-background-color: var(--color6);
          --button-color: var(--grey10);
          --button-background-color-hover: var(--grey10);
          --button-color-hover: var(--color6);
          z-index: 1;
        }
      }
    }
    .Roller{
      position: relative;
      padding-top: 20px;
      padding-left: 30px;
      .nav{
        bottom: -22px !important;
        z-index: 1;
        &.next{
          left: auto !important;
          right: 30px !important;
        }
        &.last{
          left: auto !important;
          right: 83px !important;
        }
      }
      .Item{
        &:hover .ItemBefore{
          left: 0;
          top: 0;
          bottom: 0;
          width: 100px;
        }
        .ItemBefore{
          display: none;
        }
        .ItemInner{
          padding: 10px 30px;
          background-color: transparent;
          display: block;
          .Title{
            color: white;
            text-transform: none;
            font-weight: 200;
            text-align: left;
            font-size: calc(var(--fs5) - 2px);
          }
          .ItemDate{
            min-width: 100px;
            max-width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: -100px;
            display: grid;
            place-items: center;
            padding-block: 20px;
            z-index: 2;
            background-color: rgb(var(--color3));
            d{
              display: block;
              color: white;
              line-height: 1em;
              &:first-child{
                font-size: var(--fs3);
              }
              &:nth-child(2){
                font-size: var(--fs5);
                text-transform: none;
                font-weight: 200;
              }
            }
            d + d ~ *{
              display: none;
            }
          }
          .ItemContent{
            display: block;
            .paracontent{
              .location, .tags{
                display: none;
              }
              .cardBottomLinks{
                position: absolute;
                bottom: 0px;
                left: 30px;
                &::before{
                  content: '';
                  height: 1.33px;
                  width: 200vw;
                  position: absolute;
                  left: -50vw;
                  top: -18px;
                  background-color: white;
                }
                a{
                  &::after{
                    content: 'ADD TO CALENDAR';
                  }
                  position: absolute;
                  bottom: 0px;
                  left: 0px;
                  min-width: max-content;
                  transform-origin: 0 100%;
                  transform: scale(0.75);
                  display: inline-grid;
                  place-items: center;
                  background-color: rgb(var(--color2));
                  padding: var(--button-padding);
                  font-size: var(--button-font-size);
                  color: white;
                  cursor: pointer;
                  text-decoration: none;
                  text-align: center;
                  text-transform: var(--button-text-transform);
                  margin: 0;
                  border-radius: var(--button-border-radius);
                  font-family: var(--button-font-family);
                  font-weight: var(--button-font-weight);
                  line-height: 1.5em;
                  border: 1px solid white;
                  &:hover{
                    background-color: white;
                    color: rgb(var(--color2));
                  }
                }
              }
            }
          }
        }
      } 
    }
    &::before{
      content: '';
      position: absolute;
      top: 1.4em;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgb(var(--color2));
    }
  }

  /* NEWSLETTER LINK */

  section.LinksBloq{
    margin: 0;
    padding-top: 90px;
    .bloqTitle{
      text-align: center;
      background-color: rgb(var(--color5));
      font-size: var(--fs6);
      padding: 40px 20px 64px;
      color: rgb(var(--grey10));
      margin: 0px;
      span{
        color: rgb(var(--grey10));
        font-size: var(--fs3);
        padding-top: 5px;
        display: block;
      }
    }
    .Button > ul{
      justify-content: center;
      position: relative;
      top: -22px;
      & > li{
        margin: 0;
        --button-background-color: var(--color2);
        --button-color: var(--grey10);
        --button-background-color-hover: var(--grey10);
        --button-color-hover: var(--color2);
      }
    }
  }
}

/* MAP FLEX */

body .mapwrapper{
  .mapflex{
    max-width: 1340px;
    margin: 0 auto;
    display: flex;
    padding-inline: 30px;
    .mapleft{
      flex: 2 2 66%;
      min-width: 300px;
      padding-right: 30px;
      section{
        max-width: 100%;
        margin-top: 0;
      }
    }
    .mapright{
      flex: 1 1 33%;
      min-width: 300px;
      section{
        max-width: 100%;
        margin-top: 0;
      }
    }
  }
}

@media only screen and (max-width: 1000px) {
  body .greenwrapper{
    margin-bottom: 0;
    padding-bottom: 70px;
  }
  body .mapwrapper .mapflex{
    flex-wrap: wrap-reverse;
    .mapleft{
      flex: 0 0 100%;
      min-width: 100%;
      padding-right: 0;
    }
    .mapright{
      flex: 0 0 100%;
      min-width: 100%;
      section.ParagraphBloq{
        padding-top: 80px !important;
        div.Magazine .Item{
          padding-bottom: 40px;
        }
      }
    }
  }
}


body .mapwrapper{

  /* PARAGRAPH */

  section.ParagraphBloq{
    padding-top: 200px !important;
    div.Magazine .Item{
      .ItemBefore{
        display: none;
      }
      .ItemInner{
        padding-left: 0;
      }
    }
  }

  /* INTERACTIVE MAP */
  section.InteractiveMapBloq .interactiveMapWrapper{
    .interactivemappopup{
      display: none !important;
    }
    .pin{
      width: 11px;
      height: 11px;
      i{
        display: none;
      }
      &::before{
        width: 11px;
        height: 11px;
        background-color: rgb(var(--color6));
      }
      &::after{
        content: '';
        width: 1px;
        height: 0;
        position: absolute;
        left: 5px;
        top: 10px;
        background-color: rgb(var(--color6));
        transition: 0.2s;
      }
      span{
        font-size: 9px;
        height: 20px;
        border-radius: 100px;
        background-color: rgb(var(--color6));
        color: white;
        border: 0px solid transparent;
        text-transform: uppercase;
        left: 5.5px !important;
        right: auto !important;
        transform: translate(-50%, 20px) !important;
      }
      &:hover{
        span{
          padding-inline: 13px;
        }
        &::after{
          height: 15px;
        }
      }
    }
  }
}

/* HOUSE POINTS */

body section.housepointslink{
  padding: 200px 0 0 !important;
  max-width: 1120px;
  margin: 0 auto;
  div.Button>ul{
    justify-content: flex-end;
    padding-right: 80px;
    &>li{
      margin: 0 !important;
      z-index: 1;
      a{
        background-color: transparent;
      }
    }
  }
}

body section.StatisticsBloq{
  padding: 0 40px 80px !important;
  &::before{
    content: '';
    background-color: rgb(var(--color8));
    top: -150px;
    bottom: 0;
    left: 40px;
    right: 40px;
    position: absolute;
  }
  .bloqTitle{
    margin: 0 auto;
    max-width: 1040px;
    transform: translateY(calc(-50% - 22px));
    padding-left: 40px;
    span{
      color: rgb(var(--color1));
    }
  }
  div.SVG > ul{
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    padding-inline: 20px;
    & > li .statistic{
      .StatText{
        display: flex;
        flex-direction: column;
        .AnimationWrapper{
          .StatFigure{
            color: rgb(var(--color5)) !important;
            font-size: var(--fs2);
            position: relative;
            bottom: unset;
            left: unset;
            width: 100%;
          }
          .SVGContainer{
            width: 110px;
            margin: 0 auto;
            svg{
              transform: translateX(6.5%);
            }
          }
        }
        .StatTitle{
          order: 2;
          font-weight: 100;
          color: rgb(var(--color5)) !important;
          font-size: var(--fs6);
          position: relative;
          padding: 0;
          
        }
      }
    }
  }
}

/* SVG ELEMENT CSS */
body section.StatisticsBloq div.SVG > ul > li .statistic .StatText .AnimationWrapper .SVGContainer svg{
      .st0 {
        fill: #2b2b2b;
      }
      .st1 {
        fill: #f35452;
      }
      .st2 {
        fill: var(--stat-color);
      }
      .st3 {
        stroke: var(--stat-color);
        stroke-width: 3.1px;
        filter: brightness(1.6) saturate(75%);
      }
      .st6 {
        fill: var(--stat-color);
        filter: brightness(1.6) saturate(75%);
      }
      .st3, .st4 {
        fill: none;
        stroke-miterlimit: 10;
      }
      .st5 {
        fill: #fff;
      }
      .st7 {
        fill: #2c7f4b;
      }
      .st4 {
        stroke: #2c7f4b;
        stroke-width: 6.2px;
      }
}

/* HIDE STAGES OF GROWTH */

body section.StatisticsBloq div.SVG > ul > li{
  div[data-stage="0"]{
    .stage_1, .stage_2, .stage_3, .stage_4, .stage_5{
      display: none !important;
    }
  }
  div[data-stage="1"]{
    .stage_2, .stage_3, .stage_4, .stage_5{
      display: none !important;
    }
  }
  div[data-stage="2"]{
    .stage_3, .stage_4, .stage_5{
      display: none !important;
    }
  }
  div[data-stage="3"]{
    .stage_4, .stage_5{
      display: none !important;
    }
  }
  div[data-stage="4"]{
    .stage_5{
      display: none !important;
    }
  }
}

/* SET UP ANIMATION OF ELEMENTS */

body section.StatisticsBloq div.SVG > ul > li .statistic .StatText .AnimationWrapper .SVGContainer svg{
  --this-perc: 100% !important;
  & > *{
    position: relative;
    transform-box: fill-box;
    transform-origin: center;
    transition: 0.75s;
    transition-delay: calc(var(--item-index) + (var(--elnum) * 0.15s));
    animation: none;
    &.fade{
      opacity: 0;
    }
    &.grow{
      transform: scale(0);
      &:nth-child(3){
        transform-origin: 90% 90%;
      }
      &:nth-child(5){
        transform-origin: 70% 100%;
      }
      &:nth-child(7){
        transform-origin: 10% 100%;
      }
      &:nth-child(10){
        transform-origin: 100% 90%;
      }
      &:nth-child(12){
        transform-origin: 2% 18%;
      }
      &:nth-child(15){
        transform-origin: 80% 55%;
      }
      &:nth-child(17){
        transform-origin: 22% 36%;
      }
      &:nth-child(20){
        transform-origin: 50% 1%;
      }
      &:nth-child(24){
        transform-origin: 55% 4%;
      }
      &:nth-child(28){
        transform-origin: 40% 4%;
      }
    }
    &.line{
      clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0 100%);
      &:nth-child(18), &:nth-child(26){
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
      }
      &:nth-child(22){
        clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
      }
    }
    &.pot{
      opacity: 0;
      transition: 0s;
      transition-delay: calc(var(--item-index) + (var(--elnum) * 0.15s));
      animation: 5s linear 0s 1 normal forwards running svganimation;
      animation-delay: calc(var(--item-index) + (var(--elnum) * 0.15s));
    }
  }
}

body section.StatisticsBloq div.SVG > ul > li .statistic .StatText .AnimationWrapper:has(.isCounting) .SVGContainer svg{
  *{
    &.fade{
      opacity: 1;
    }
    &.grow{
      transform: scale(1);
    }
    &.line{
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%) !important;
    }
    &.pot{
      opacity: 1;
    }
  }
}

@media only screen and (max-width: 1280px) {
  body section.StatisticsBloq div.SVG > ul {
    grid-template-columns: repeat(auto-fill, minmax(164px, 1fr));
  }
}
@media only screen and (max-width: 1100px) {
  body section.StatisticsBloq div.SVG > ul {
    gap: 20px;
  }
}
@media only screen and (max-width: 1020px) {
  body section.StatisticsBloq div.SVG > ul {
    grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
  }
}
@media only screen and (max-width: 870px) {
  body section.StatisticsBloq div.SVG > ul {
    grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
  }
}

@media only screen and (max-width: 700px) {
  body section.housepointslink {
    padding-top: 250px !important;
    div.Button>ul{
      padding-inline: 60px !important;
      justify-content: center;
    }
  }
  body section.StatisticsBloq {
    .bloqTitle{
      padding-inline: 20px !important;
      text-align: center;
      transform: translateY(calc(-50% - 102px));
    }
    &::before {
      top: -200px;
    }
  }
}
@media only screen and (max-width: 450px) {
  body section.housepointslink {
    margin-bottom: -30px;
  }
}

/* GOOGLE MAP */

.googlewrapper{
  max-width: 1200px;
  padding-top: 110px;
  margin: 0 auto;
  &::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 130px;
    background-color: rgb(var(--color1));
  }
  .googleflex{
    position: relative;
    margin: 0 40px;
    display: flex;
    section{
      margin-top: 0;
    }
    .googleleft{
      flex: 0 0 50%;
      background-color: rgb(var(--color5));
      display: grid;
      place-items: center;
      section.LinksBloq{
        --button-border: 1px solid rgb(var(--grey10));
        --button-background-color: transparent;
        --button-color: var(--grey10);
        --button-border-hover: 1px solid rgb(var(--grey10));
        --button-background-color-hover: var(--grey10);
        --button-color-hover: var(--color5);
        div.Button>ul>li {
          margin: 5px 8px;
        }
        h2.bloqTitle{
          font-size: var(--fs6);
          color: rgb(var(--color4));
          padding-inline: 8px;
          padding-bottom: 40px;
          span{
            font-size: var(--fs3);
            color: rgb(var(--grey10));
          }
        }
      }
    }
    .googleright{
      flex: 0 0 50%;
      section div.mapwrapper{
        margin: 0;
        height: 350px;
        overflow: hidden;
        &>.mapcontainer{
          height: calc(100% + 400px);
          margin: -200px 0;
        }
      }
    }
  }
}

@media only screen and (max-width: 800px) {
  .googlewrapper .googleflex{
    flex-wrap: wrap;
    .googleleft, .googleright{
      flex: 0 0 100%;
    }
    .googleleft{
      padding: 60px 20px;
      section.LinksBloq{
        div.Button>ul{
          justify-content: center;
        }
        h2.bloqTitle{
          text-align: center;
        }
      }
    }
  }
}

@media only screen and (max-width: 450px) {
  .googlewrapper .googleflex{
    margin-inline: 20px;
  }
}