/* HEADER */
.toplogolink {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.uppercontrols {
  padding: 0 var(--page-padding-inline);
  width: calc(100% - 165px);
  right: 135px !important;
  justify-content: space-between !important;
  flex-direction: row;

}


body.homeSplashMenu #nav:not(:checked)~.topnav .topnavflex .navcontainer nav>ul li.burger {
  &>.menutogglelabel {
    bottom: 39px;
  }
}


.uppercontrols {
  padding: 0 var(--page-padding-inline);
  width: calc(100% - 165px);
  right: 135px !important;
  justify-content: space-between !important;
  flex-direction: row;

}

header.Homepage {
  overflow: visible;

  &>.bannerwrapper {
    overflow: hidden;
    border-radius: 0 0 350px 0;
  }
}


body .topnav {
  z-index: 5;

  &>.topnavflex .navcontainer nav {

    &>ul li.burger .menutogglelabel,
    &>.menutogglecloselabel {
      width: 68px !important;
      height: 68px !important;
      background-color: #484571;
      border-radius: 50%;

      &>span {
        top: 0 !important;
        line-height: 67px !important;
      }
    }

    &>ul li.burger {
      height: 0 !important;
    }

    &>ul li.burger .menutogglelabel {
      opacity: 1;
      transition: 1s;
    }

    &>.menutogglecloselabel {
      background-color: rgb(var(--color2));
      /* right: calc((50vw - var(--page-padding-inline) - var(--site-max-width) / 2) + 0px) !important;
    top: 50px !important; */
      top: 46px !important;
      right: 50px !important;

      &:hover {

        &::before,
        &::after {
          left: 20px !important;
        }
      }

      &::before,
      &::after {
        left: 22px !important;
      }
    }
  }
}

/* TAGLINES */
body .taglineoverlay {
  &>.taglines .tagline {
    max-width: none;
    padding-left: 76px;

    &>.taglineinner .title {
      font-size: calc(var(--fs0) + 40px);
    }
  }
}


/* HOME PAGE TYPOGRAPHY */
body.homePageStyle .bloqTitle {
  font-size: calc(var(--fs1) - 6px);
  line-height: 1em;

  & span.bold {
    font-weight: 700;
  }

  &>span.colorchange {
    font-size: calc(var(--fs1) - 6px);
    font-family: var(--font-heading);
    text-transform: none;
  }
}

/* WELCOME */
body.homePageStyle .typography>section.bloq.HomeWelcome {
  max-width: max(1200px, 75vw);
  padding-left: max(8vw, 100px);
  margin-right: 50px;

  &>div.Welcome>div.WelcomeFlex {
    max-width: 100%;
    padding-left: calc(25% + 10vw);

    &>h3.Title {
      display: none;
    }

    &>.ItemImage {
      width: 42%;
      opacity: 0.08;

      &>.ItemBefore {
        background-position: 0% 0%;
        background-size: contain;
      }
    }

    &>.ItemContent .paracontent {
      &>p {
        font-size: calc(var(--fs6) + 3px);
      }

      &>*:first-child {
        margin-top: 0 !important;
      }
    }
  }

  &>h2.bloqTitle {
    text-align: right;
    margin-bottom: 30px;
  }
}

/* NEWS LETTERS */
body section.homeletters {
  background-color: rgb(var(--color1));
  border-radius: 200px 0 0 0;
  padding: 0 70px 70px 70px !important;

  &>h2.bloqTitle {
    text-align: center;
    padding: 105px 0 50px 0;
    color: white;

    &>span:not(.colorchange) {
      color: white;
    }
  }

  &>div.Grid>ul {
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    max-width: 980px;
    grid-gap: 22px 34px;

    &>li {
      min-width: 200px;

      &>a.Item {
        height: 165px;
        border-radius: 30px;

        &>.ItemInner {
          background-color: rgba(var(--grey0), .4);

          &>.ItemIcon,
          &>.ItemDate {
            display: none;
          }

          &>.Title {
            font-size: calc(var(--fs5) - 1px);
            font-weight: 700;
            text-transform: uppercase;
            position: relative;
            padding: 6px 0;

            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 1px;
              bottom: 0;
              left: 0;
              background-color: white;
              opacity: 0;
              transition: 0.4s;
            }
          }

          &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 0;
            left: 0;
            background-color: rgba(var(--color2), .6);
            opacity: 0;
            transition: 0.4s;
          }
        }

        &:hover {
          &>.ItemInner {
            &>.Title::before {
              opacity: 1;
            }

            &::before {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}

section.newsletterslink {
  background-color: rgb(var(--color1));

  &>div.Button ul {
    justify-content: center;

    li .Item {
      &>.ItemInner {
        &>.ItemIcon {
          display: none;
        }

        &>.Title {
          color: white;
        }
      }

      &:hover {
        .ItemInner .Title {
          color: rgb(var(--color1));
        }
      }
    }
  }

  &::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: var(--icongold);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 100% 0%;
    top: 0;
    right: 20px;
  }
}

/* INSTAGRAM */
body .instawrapper {
  display: flex;
  gap: 9vw;
  margin: 0 50px;
  border-radius: 10px;
  background-color: rgb(var(--color4));
  padding: 80px 0;
  position: relative;

  &>.LinksBloq {
    flex: 1 1 45%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;

    &>h2.bloqTitle {
      width: fit-content;
    }

    div.Icon ul {
      li .Item {
        background-color: rgb(var(--color4));
        border-radius: 50%;
        border: 1px solid rgb(var(--color2));

        &>.ItemInner .ItemIcon {
          color: rgb(var(--color2));
        }

        &:hover {
          background-color: rgb(var(--color2));

          &>.ItemInner .ItemIcon {
            color: white;
          }
        }
      }

      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
    }
  }

  &>.homeinsta {
    flex: 1 1 55%;
    max-width: 700px;
  }

  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 63%;
    left: 0;
    top: 190px;
    background-image: var(--instawatermark);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0% 0%;
    opacity: 0.08;
  }
}

body section.homevalues {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1300px;
  z-index: 1;
  margin: 0 auto -135px auto;

  &>h2.bloqTitle {
    flex: 1 1 25%;
    max-width: 230px;
    padding-top: 80px;
  }

  &>div.filteroot.paraset.Card {
    flex: 1 1 75%;

    &>ul {
      grid-gap: 17px;
      --SliderRowHeight: 440px;
      max-width: 900px;

      &>li {
        &>.Item {
          border: 15px solid white;
          border-radius: 27px;

          &>.ItemInner {
            background-color: transparent;
            color: white;
            flex-wrap: nowrap;
            justify-content: flex-start;
            justify-items: flex-start;
            height: 210px;

            &>.ItemIcon {
              display: none !important;
            }

            &>.Title {
              color: white;
              font-family: var(--font-cursive);
              font-size: 34px;
            }

            &>.ItemContent {
              margin-top: 0 !important;

              .paracontent {
                opacity: 0;
                transition: 0.4s;
                font-size: 19px;
                font-weight: 300;

                &>.cardBottomLinks {
                  border-top: none;
                  width: 100%;
                  margin: 0 0;
                  display: flex;
                  justify-content: center;
                  position: static;
                  padding-top: 30px;

                  &>a {

                    display: inline-grid;
                    place-items: center;
                    position: relative;
                    text-align: center;
                    padding: var(--button-padding);
                    border: var(--button-border);
                    background-color: rgba(var(--button-background-color), 1);
                    color: white !important;
                    border-radius: var(--button-border-radius);
                    text-transform: var(--button-text-transform);
                    transition: .2s;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    line-height: 1.5em;
                    font-size: var(--button-font-size);
                    width: fit-content;
                    max-width: fit-content;

                    &:hover {
                      background-color: rgb(var(--color2));
                    }
                  }
                }
              }
            }

            &::before {
              content: '';
              background-color: transparent;
              background-image: var(--smallwhiteicon);
              background-position: 50% 50%;
              background-repeat: no-repeat;
              background-size: contain;
              width: 31px;
              height: 31px;
              min-height: 31px;
              border-radius: 0;
              margin-bottom: 20px;
            }
          }

          &>.ItemBefore {
            display: block;
            position: relative;
            width: 100%;
            height: 100%;

            &::after {
              content: '';
              left: 0;
              top: 0;
              position: absolute;
              width: 100%;
              height: 100%;
              background-image: linear-gradient(0deg, rgba(var(--color1), 1) 0%, rgba(var(--color1), 1) 25%, rgba(var(--color1), 0.7) 35%, rgba(var(--color1), 0.7) 100%);
              transition: 0.4s;
            }
          }

          &:hover {
            &>.ItemInner {
              height: 100%;
              justify-content: center;
              justify-items: center;

              &>.Title {
                display: none;
              }

              &>.ItemContent .paracontent {
                opacity: 1;
              }
            }

            &>.ItemBefore {
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }
        }
      }
    }
  }
}


@media only screen and (max-width: 1400px) {
  .uppercontrols {
    width: calc(100% - 125px);
    right: 95px !important;
    justify-content: space-between !important;
    flex-direction: row;
  }

  body .topnav .topnavflex .navcontainer nav .menutogglecloselabel {
    right: 20px !important;
  }

}

@media only screen and (max-width: 1200px) {
  body section.homevalues {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
}

@media only screen and (max-width: 900px) {
  body section.homevalues {
    padding-top: 40px !important;

    &>div.filteroot.paraset.Card {
      &>ul {
        --SliderRowHeight: 300px;
        grid-template-columns: 1fr;
      }
    }
  }

  body .instawrapper {
    padding: 80px 20px;
    margin: 0 0;
    flex-direction: column;
    gap: 20px;
  }

  body .taglineoverlay .taglines .tagline {
    padding-left: 20px;

    &>.taglineinner .title {
      font-size: calc(var(--fs0) + 0px);
    }
  }

  body .scrolloverlay .scrollDown::after {
    display: none;
  }

  body.homePageStyle .typography>section.bloq.HomeWelcome {
    padding: 80px 20px 80px 20px !important;
    margin-right: 0;

    &>div.Welcome>div.WelcomeFlex {
      padding-left: 0;

      &>.ItemImage {
        display: none;
      }
    }
  }

  body section.homeletters {
    border-radius: 0;
    padding: 0 20px 65px 20px !important;

    &>div.Grid>ul {
      grid-template-columns: repeat(1, 1fr);
      max-width: 600px;
      margin: 0 auto;
    }
  }

  .uppercontrols {
    align-items: center;

    &>.moveable nav {
      margin-left: 0 !important;
    }
  }

  body .topnav .topnavflex .navcontainer nav {

    &>ul li.burger .menutogglelabel,
    &>.menutogglecloselabel {
      width: 50px !important;
      height: 50px !important;

      &>span {
        line-height: 51px !important;
      }
    }

    &>ul li.burger .menutogglelabel {
      bottom: 59px !important;
    }

    &>label.menutogglecloselabel {
      right: 20px !important;

      &:hover {

        &::before,
        &::after {
          left: 11px !important;
        }
      }

      &::before,
      &::after {
        left: 13px !important;
        top: calc(50% - 1px) !important;
      }
    }
  }
}


@media only screen and (max-width: 800px) {
  .uppercontrols {
    right: auto !important;
    left: 0;
    z-index: 1;
    align-items: flex-end !important;
    width: fit-content !important;
    padding: 0 0 0 20px !important;
  }
}