/* HOMEPAGE BUTTONS */

body a.buttonstyle, body button.buttonstyle{
  position: relative;
  overflow: hidden;
  &:hover{
    background-color: rgba(var(--button-background-color), 1) !important;
  }
  &::after{
    position: relative;
  }
  &::before{
    content: '';
    position: absolute;
    background-color: rgba(var(--button-background-color-hover), 1);
    width: 0;
    top: 0;
    bottom: 0;
    left: 0;
    transition: 0.2s;
    border-radius: var(--button-border-radius);
  }
  &:hover::before{
    width: 100%;
  }
}

body .gdprbuttons a.buttonstyle, body .gdprbuttons button.buttonstyle{
  &:hover{
    border: 1px solid rgb(var(--grey10)) !important;
    &::after{
      color: white;
    }
  }
}

/* HEADER */

body header{
  clip-path: padding-box;
  .bannerwrapper{
    margin-left: 0;
    padding-top: calc(420px - var(--top-nav-height));
    &::after{
      height: 100%;
      bottom: -1px;
      background: transparent;
      background-image: var(--homepage-header-mask);
      background-position: 0% 100%;
      background-size: contain;
      background-repeat: no-repeat;
      z-index: 1;
      top: auto;
    }
    .bannerinner .Slideshow{
      --margin: 50px;
      width: calc(100% - var(--margin) - var(--margin));
      margin-inline: var(--margin);
      ul li::after{
        content: '';
        position: absolute;
        inset: 0;
        background-color: rgba(var(--grey5),0.4);
      }
    } 
  }
  .taglineoverlay {
    position: fixed;
    bottom: auto;
    top: 170px;
    height: 250px;
    display: grid;
    place-items: center;
    .fixed{
      color: rgb(var(--color1));
      font-size: clamp(30px, 7vw, 70px);
      line-height: 1.2em;
      span{
        color: rgb(var(--color2));
      }
    }
    &:nth-child(3){
      --cut-top: 300px; 
      clip-path: polygon(0 var(--cut-top), 100% var(--cut-top), 100% 300px, 0 300px);
      .fixed{
        color: rgb(var(--grey10));
        span{
          color: rgb(var(--grey10));
        }
      }
    }
    .taglines{
      display: none;
    }
  }
}

/* TAGLINES */

body header .taglineoverlay .fixed{
  font-family: var(--font-cursive);
}

/* WELCOME */

section.ParagraphBloq.mod_none{
  div.Welcome{
    --welcome-max-width: 1080px;
  }
  .bloqTitle{
    text-align: center;
    margin-bottom: 1em;
  }
}

@media only screen and (max-width: 600px) {
  section.ParagraphBloq.mod_none{
    div.Welcome > div.WelcomeFlex{
      .ItemImage{
        .ItemBefore{
          border-radius: 0;
          aspect-ratio: 1 / 0.6;
        }
      }
    }
  }
}

@media only screen and (min-width: 601px) {
  section.ParagraphBloq.mod_none{
    .bloqTitle{
      text-align: center;
      margin-bottom: 1em;
    }
    div.Welcome{
      & > div.WelcomeFlex{
        padding-left: min(var(--welcome-max-width) * 0.33, 33%);
        min-height: calc(var(--welcome-max-width) * 0.396);
        &::before{
          content: '';
          position: absolute;
          bottom: 0;
          right: -150px;
          width: 380px;
          height: 380px;
          background-image: var(--grey-watermark);
          background-position: 100% 100%; 
          background-size: contain;
          background-repeat: no-repeat;
          z-index: -1;
        }
        .Title{
          display: none !important;
        }
        .ItemImage{
          width: 33%;
          .ItemBefore{
            border-radius: 0;
            aspect-ratio: 1 / 1.2;
          }
        }
        .ItemContent{
          padding-left: min(6vw, 80px);
        }
        .LinkWrapper{
          padding-left: min(6vw, 80px);
        }
      }
    }
  }
}

/* SECTION LINKS */

section.LinksBloq.mod_none div.Concertina{
  & >ul{
    padding: 0 40px;
    & >li{
      height: 450px;
      &:hover {
        flex: 4 4 4px;
      }
    }
  }
  .Item::before{
    content: '';
    height: 25px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--item-color);
    opacity: 0.95;
    z-index: 1;
    transition: 0.3s;
  }
  .Item .ItemInner{
    margin-left: 50px;
    text-align: left;
    display: flex;
    flex-direction: column;
    transform: none;
    justify-content: flex-end;
    padding-bottom: 60px;
    &::before{
      order: -2;
      top: 0;
      bottom: 0;
      background-color: transparent;
      background-image: linear-gradient(rgba(var(--grey0),0),rgb(var(--grey0)));
    }
    .Title{
      text-align: left;
      color: white;
      font-family: var(--font-cursive);
      font-size: var(--fs1);
      text-transform: none;
      font-weight: 100;
      margin-bottom: 0;
      z-index: 1;
      white-space: normal;
      max-width: 330px;
    }
    .ItemContent{
      transform: none;
      order: -1;
      z-index: 1;
      text-align: left;
      font-size: 14px;
      opacity: 1;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 0.06em;
      position: relative;
      &::before{
        content: '';
        position: absolute;
        top: -80px;
        left: 0;
        width: 60px;
        height: 60px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 0 100%;
        background-image: var(--white-watermark);
      }
    }
    .popbutton{
      height: 40px;
      display: grid;
      place-items: center;
      padding: 0 25px;
      letter-spacing: 0.06em;
      font-size: 14px;
      font-weight: 600;
      color: white;
      border: 1px solid white;
      border-radius: 5px;
      z-index: 1;
      width: fit-content;
      margin-top: -40px;
      transition: 0.2s;
      opacity: 0;
      &::after{
        content: 'FIND OUT MORE';
      }
      &:hover{
        background-color: white;
        &::after{
          color: var(--item-color);
        }
      }
    }
  }
  .Item:hover{
    &::before{
      height: 100%;
      opacity: 0.85;
    }
    .ItemInner{
      .popbutton{
        margin-top: 10px;
        opacity: 1;
      }
    }
  }
}

@media only screen and (max-width: 650px) {
  section.LinksBloq.mod_none{
    padding-inline: 0 !important;
    div.Concertina>ul{
      padding: 0;
      margin-inline: -20px;
    }
  }
}

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

/* EVENTS */

body section.mod_mini_slider{
  --titles-max-width: min(1200px, calc(100vw - 380px));
  --SliderRowHeight: 340px;
  --SliderItemMinWidth: 240px;
  --SliderGridGap: 80px;
  --nav-size: 60px;
  --nav-color: var(--color4);
  padding-top: 40px !important;
  padding-bottom: 100px !important;
  &::before{
    content: '';
    position: absolute;
    top: -20px;
    bottom: 0;
    left: 60px;
    right: 60px;
    background-color: rgb(var(--color6));
    z-index: -1;
  }
  h2.bloqTitle{
    margin: 0 auto;
    font-size: var(--fs3);
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.06em;
    height: 100px;
    display: grid;
    place-items: center start;
  }
  .filterSourceSideBySideButtons{
    margin: 0 auto;
    display: grid;
    place-items: center end;
    height: 100px;
    margin-top: -100px;
    .sourceButtonWrapper{
      margin: 0;
      .calendarPageLink{
        margin: 0;
        height: auto;
        padding: var(--button-padding);
        font-size: var(--button-font-size);
        border: var(--button-border);
        background-color: rgb(var(--color6));
      }
    }
  }
  div.Slider{
    width: calc(100vw - 60px);
    max-width: unset;
    padding: 0 160px;
    position: relative;
    &::before{
      content: '';
      width: 100%;
      height: 1px;
      position: absolute;
      left: 0;
      top: 100px;
      background-color: rgb(var(--color4));
    }
    .nav{
      top: 70px;
    }
    .SliderInner>ul>li .Item{
      .ItemInner{
        background-color: transparent;
        color: rgb(var(--color1));
        padding: 0;
        display: block;
        .ItemDate{
          background-color: rgb(var(--color4));
          letter-spacing: 0.04em;
          display: block;
          min-width: unset;
          width: 220px;
          top: 0;
          left: 0;
          height: 70px;
          border-radius: 8px 8px 0 0;
          position: absolute;
          font-size: 20px;
          padding: 19px 0;
          d{
            display: none;
            &:nth-child(1), &:nth-child(2), &:nth-child(4), &:nth-child(5), &:nth-child(6){
              display: inline;
            }
          }
          &::before, &::after{
            position: absolute;
            display: inline !important;
            color: rgb(var(--color1));
            position: absolute;
            top: 96px;
            color: rgb(var(--color1));
            left: 0;
            font-size: 13px;
          }
          &::before{
            content: "\f017";
            font-family: 'Font Awesome 6 Free';
            font-weight: 400;
          }
          &::after{
            content: 'ALL DAY';
            left: 20px;
            font-size: 14px;
            top: 95px;
          }
          &:has(i){
            &::before, &::after{
              display: none !important;
            }
            i, i + d{
              display: inline !important;
              color: rgb(var(--color1));
              position: absolute;
              top: 104px;
              color: rgb(var(--color1));
              left: 0;
              font-size: 13px;
            }
            i + d{
              left: 15px;
              font-size: 14px;
              top: 100px;
            }
          }

        }
        .Title{
          color: rgb(var(--color1));
          text-transform: none;
          font-size: 20px;
          top: 150px;
          position: absolute;
          width: 100%;
          left: 0;
          text-align: left;
          font-weight: 600;
        }
        .ItemContent{
          opacity: 1;
          .paracontent .cardBottomLinks{
            margin: 0;
            padding: 0;
            a.downloadics{
              left: 0;
              transform: none;
              background-color: rgb(var(--color1));
              padding-left: 45px;
              height: 32px;
              border-radius: 5px;
              font-size: 11px;
              font-weight: 600;
              &::before{
                content: '+';
                background-color: rgb(var(--color3));
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                width: 32px;
                border-radius: 5px;
                font-size: 23px;
                display: grid;
                place-items: center;
              }
              &:hover{
                background-color: rgb(var(--color3));
              }
            }
          }
        }
      }
      &:hover{
        .ItemInner .ItemDate {
          background-color: rgb(var(--color3));
        }
      }
    }
  }
}

/* PARAGRAPHS */
body{
  --para-s: 60px;
  --para-m: 90px;
  --para-l: 120px;
}

section.ParagraphBloq.mod_none.first-paragraph, section.ParagraphBloq.mod_none.first-paragraph ~ section.ParagraphBloq.mod_none{
  --readmore: 'Explore';
  --button-background-color: transparent;
  padding: 0px !important;
  &::before{
    content: '';
    position: absolute;
    background-color: rgb(var(--color6));
    top: 0;
    bottom: 0;
    left: -100vw;
    right: -100vw;
    z-index: -1;
  }
  div.Magazine .Item{
    position: relative;
    padding: 0;
    .ItemBefore{
      flex: 9 9 45%;
      min-width: 0;
      width: auto;
      max-width: unset;
      min-height: unset;
      height: auto;
      max-height: unset;
      position: relative;
      border-radius: 0;
      top: 0;
    }
    .ItemInner{
      flex: 11 11 55%;
      padding: var(--para-m) var(--para-l) !important;
      .Title{
        font-family: var(--font-cursive);
        text-transform: none;
        font-size: var(--fs1);
        color: rgb(var(--color1));
        font-weight: 100;
        span{
          color: rgb(var(--color4));
        }
      }
      .ItemContent .paracontent .buttonstyle{
        margin: 30px 0 0;
      }
    }
  }
}

section.ParagraphBloq.mod_none.first-paragraph{  /* ITEM 1 */
  --button-color: var(--grey10);
  div.Magazine .Item{
    background-color: rgb(var(--color1));
  }
  div.Magazine .Item .ItemInner{
    order: -1;
    .Title{
      color: rgb(var(--grey10)) !important;
    }
    .ItemContent{
      color: rgb(var(--grey10));
    }
  }
  & + section.ParagraphBloq.mod_none{  /* ITEM 2 */
    padding: var(--para-s) var(--para-s) !important;
    div.Magazine .Item{
      background-color: rgb(var(--color6));
      padding: var(--para-s);
      background: white;
    }
    & + section.ParagraphBloq.mod_none{  /* ITEM 3 */
      background-color: rgb(var(--color6));
      padding-bottom: var(--para-s) !important;
      div.Magazine .Item .ItemInner{
        order: -1;
      }
      & + section.ParagraphBloq.mod_none{  /* ITEM 4 */
        --button-color: var(--grey10);
        div.Magazine .Item{
          background-color: rgb(var(--color1));
        }
        div.Magazine .Item .ItemInner{
          .Title{
            color: rgb(var(--grey10));
          }
          .ItemContent{
            color: rgb(var(--grey10));
          }
        }
        & + section.ParagraphBloq.mod_none{  /* ITEM 5 */
          padding: var(--para-s) var(--para-s) !important;
          div.Magazine .Item{
            background-color: rgb(var(--color6));
            padding: var(--para-s);
            background: white;
            .ItemInner{
              order: -1;
            }
          }
          & + section.ParagraphBloq.mod_none{  /* ITEM 6 */
            padding-bottom: var(--para-s) !important;
            div.Magazine .Item{
              background-color: rgb(var(--color6));
            }
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 900px) {
  body{
    --para-s: 30px;
    --para-m: 45px;
    --para-l: 60px;
  }
  section.ParagraphBloq.mod_none.first-paragraph, section.ParagraphBloq.mod_none.first-paragraph ~ section.ParagraphBloq.mod_none {
    & div.Magazine .Item {
      .ItemBefore{
        flex: 1 1 25%;
      }
      .ItemInner{
        flex: 3 3 75%;
      }
    }
  }
}
@media only screen and (max-width: 600px) {
  body{
    --para-s: 10px;
    --para-m: 15px;
    --para-l: 20px;
  }
}

/* CURVES */

div.curves{
  background-color: rgb(var(--color6));
  height: 14vw;
  background-image: var(--curves);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

/* SOCIALS */

body .curves + section.LinksBloq.mod_none{
  padding: 0 !important;
  padding-top: 80px !important;
  z-index: 1;
  background-color: rgb(var(--color1));
  div.Icon{
    max-width: 1000px;
    margin: 0 auto;
    ul{
      height: 90px;
      padding: 20px 0;
      padding-right: 20px;
      justify-content: right;
      margin-bottom: -90px;
      .Item {
        background-color: transparent;
        .ItemInner .ItemIcon{
          margin-left: 10px;
          background-color: rgb(var(--color4));
          width: var(--nav-size);
          height: var(--nav-size);
          font-size: calc(var(--nav-size) * .45);
          border-radius: var(--nav-border-radius);
          color: rgb(var(--grey10));
        }
        &:hover .ItemInner .ItemIcon{
          background-color: rgb(var(--grey10));
          color: rgb(var(--color1));
        }
      }
    }
  }
}

body section.DataBloq.mod_none{
  background-color: rgb(var(--color1));
  --SliderRowHeight: 450px;
  --SliderItemMinWidth: 300px;
  --SliderGridGap: 50px;
  .bloqTitle{
    height: 90px;
    display: grid;
    place-items: center start;
    max-width: 1000px;
    margin: 0 auto;
    font-family: var(--font-normal);
    font-size: var(--fs3);
    text-transform: uppercase;
    color: rgb(var(--grey10));
    font-weight: 600;
    margin-bottom: 40px;
  }
  div.Slider{
    width: calc(50vw + 800px);
    margin-right: -320px;
    margin-left: auto;
    padding: 0;
    .SliderInner>ul>li{
      margin-bottom: 0;
      .Item{
        height: calc(var(--SliderRowHeight) - 40px);
        margin: 20px 0;
        transition: 0.4s;
        .ItemBefore{
          &::after{
            content: '';
            position: absolute;
            inset: 0;
            background-color: rgba(var(--color1),0);
            transition: 0.4s;
          }
        }
        .ItemInner{
          height: 175px;
          background-color: rgb(var(--color2));
          color: white;
          justify-content: space-between;
          align-items: flex-start;
          padding: 25px 30px;
          .ItemIcon{
            --nav-size: 40px;
            left: 35px;
            top: -220px;
            background-color: rgb(var(--color4));
            color: white;
            font-size: calc(var(--nav-size) * .45);
          }
          .ItemContent{
            margin-top: 0;
            opacity: 1;
            text-align: left;
            padding: 0;
            max-height: unset;
          }
          .ItemDate{
            display: none;
          }
          .Title{
            order: 2;
            border: 1px solid white;
            font-size: 0;
            width: fit-content;
            height: 40px;
            display: grid;
            place-items: center;
            padding: 0 20px;
            border-radius: 5px;
            min-width: unset;
            opacity: 0;
            transition: 0.2s;
            &::after{
              content: 'VIEW POST';
              font-size: 14px;
              color: white;
              line-height: 38px;
            }
            &:hover{
              background-color: white;
              &::after{
                color: rgb(var(--color3));
              }
            }
          }
        }
      }
      &:hover{
        .Item{
          height: var(--SliderRowHeight);
          margin: 0 0;
          .ItemBefore{
            &::after{
              background-color: rgba(var(--color1),0.8);
            }
          }
          .ItemInner{
            height: 215px;
            background-color: rgb(var(--color3));
            .Title{
              opacity: 1;
            }
          }
        }
      }
    }
    .nav{
      top: -110px;
      border: 1px solid rgb(var(--color4));
      background-color: transparent;
      color: white;
      z-index: 1;
      &:hover{
        background-color: rgb(var(--color4));
      }
      &.next{
        right: auto;
        left: 280px;
      }
      &.last{
        left: 220px;
      }
    }
  }
}

@media only screen and (max-width: 840px) {
  body section.DataBloq.mod_none{
    div.Slider{
      width: 100%;
      margin-right: 0;
      margin-left: 0;
    }
  }
}

/* HOUSE POINTS */

.houseswrapper{
  background-color: rgb(var(--color1));
  .housesouter{
    margin: 0 !important;
    padding: 0 60px;
    .housesflex{
      display: flex;
      max-width: 1100px;
      margin: 0 auto;
      justify-content: space-between;
      padding-bottom: 50px;
      .housesleft{
        flex: 0 0 41%;
        section div.Magazine .Item{
          .ItemBefore{
            display: none;
          }
          .ItemInner{
            padding-left: 0;
            .Title{
              font-family: var(--font-cursive);
              font-weight: 100;
              font-size: var(--fs1);
              color: white;
              text-transform: none;
              span{
                color: rgb(var(--color4));
              }
            }
            .ItemContent{
              color: white;
              .paracontent .buttonstyle{
                --readmore: 'FIND OUT MORE';
                --button-background-color: var(--color1);
                --button-border: 1px solid rgb(var(--grey10));
                --button-color: var(--grey10);
                --button-background-color-hover: var(--grey10);
                --button-color-hover: var(--color1);
                --button-border-hover: 1px solid rgb(var(--grey10));
                margin: 40px 0 0;
              }
            }
          }
        } 
      }
      .housesright{
        flex: 0 0 47%;
        section div.StatTextOnly > ul {
          grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
          gap: 40px;
          & > li .statistic{
            position: relative;
            .StatImage{
              padding: 0;
            }
            .StatText{
              .StatTitle{
                font-size: var(--fs5);
                color: white;
                font-weight: 100;
                padding: 20px 0 0;
                margin: 0;
                position: relative;
                top: 3px;
              }
              .AnimationWrapper .StatFigure{
                font-size: var(--fs2);
                color: white;
                padding: 0;
              }
              .housepagelink{
                width: 34px;
                height: 34px;
                border-radius: 50%;
                background-color: var(--stat-color);
                display: inline-grid;
                place-items: center;
                position: absolute;
                top: -17px;
                left: calc(50% - 17px);
                z-index: 1;
                color: white;
                transition: 0.2s;
                &.dtext{
                  color: black;
                }
                &::after{
                  content: '+';
                  font-weight: 500;
                  font-size: 22px;
                }
                &:hover{
                  width: 40px;
                  height: 40px;
                  top: -20px;
                  left: calc(50% - 20px);
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .houseswrapper {
    .housesouter {
      .housesflex {
        .housesleft {
          flex: 0 0 26%;
        }
        .housesright {
          flex: 0 0 62%;
        }
      }
    }
  }
}

@media (max-width: 850px) {
  body section.mod_mini_slider{
    --titles-max-width: calc(100% - 130px);
    h2.bloqTitle{
     /* max-width: calc(100% - 130px);*/
    }
    div.Slider{
      padding: 0 100px;
    }
  }
}

@media (max-width: 650px) {
  body section.mod_mini_slider{
    padding-inline: 0;
    h2.bloqTitle{
      text-align: center;
      place-items: center;
    }
    .filterSourceSideBySideButtons{
      place-items: center;
      margin-top: 0px;
      margin-bottom: -30px;
    }
    &::before {
      left: 0;
      right: 0;
    }
    div.Slider{
      width: calc(100vw - 40px);
      padding: 0 !important;
      &::before{
        left: -20px;
        width: calc(100% + 40px);
      }
      .nav{
        top: -80px;
      }
      .nav.last{
        left: 0px;
      }
      .nav.next{
        right: 0px;
      }
    }


  }
}



@media (max-width: 700px) {
  .houseswrapper .housesouter {
    padding: 0 20px;
    .housesflex{
      flex-wrap: wrap;
      .housesleft, .housesright{
        min-width: 100%;
      }
    }
  }
}

@media (max-width: 550px) {
  body .curves + section.LinksBloq.mod_none {
    padding-top: 20px !important;
    div.Icon {
      ul {
        padding-left: 20px;
        justify-content: center;
        margin-bottom: 0;
        li:first-child{
          .Item {
            .ItemInner .ItemIcon {
              margin-left: 0;
            }
          }
        }
      }
    }
  }
  body section.DataBloq.mod_none {
    div.Slider {
      .nav {
        &.last{
          left: auto;
          right: 60px;
        }
        &.next {
          right: 0px;
          left: auto;
        }
      }
    }
  }
}

@media (max-width: 400px) {
  section.ParagraphBloq.mod_none.first-paragraph, section.ParagraphBloq.mod_none.first-paragraph ~ section.ParagraphBloq.mod_none{
    div.Magazine .Item .ItemBefore{
      display: none;
    }
  }
}