body{
  --submenu-background-color: var(--color1);
  header{
    background-color: rgb(var(--color2));
    min-height: 650px;
    &::before{
      display: none;
    }
    .bannerwrapper{
      width: calc(50% - 80px);
      left: 50%;
    }
    .fadedtext{
      color: rgb(var(--color3));
      position: absolute;
      font-family: var(--font-heading);
      font-weight: 900;
      right: 0;
      top: 0;
      div{
        font-size: 16vw;
        letter-spacing: 0.1em;
        line-height: 1em;
        height: 13vw;
        position: relative;
        top: -0.12em;
        right: -0.12em;
        --item-opacity: 0.5;
        animation-name: fadedtextslidein;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
        animation-delay: 0.6s;
        animation-timing-function: cubic-bezier(0.768, -0.003, 0.59, 1.331);
        transform: translateX(100%);
        opacity: 0;
        &:nth-child(1){
          --item-opacity: 0.1;
          animation-delay: 0s;
        }
        &:nth-child(2){
          --item-opacity: 0.3;
          animation-delay: 0.3s;
        }
      }
    }
  }
}


@keyframes fadedtextslidein {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: var(--item-opacity);
  }
}

@media screen and (max-width: 900px){
  body header .bannerwrapper {
    width: calc(80% - 50px);
    left: 20%;
    .bannerinner::after{
      content: '';
      inset: 0;
      position: absolute;
      background-color: rgba(0, 0, 0, .4);
    }
  }
  body header .taglineoverlay {
    max-width: 80%;
    .fixed {
      padding-left: 80px;
      &::before{
        left: 50px;
      }
    }
    .tagline.animated{
      padding-left: 80px;
    }
  }
}

@media screen and (max-width: 600px){
  body header{
    min-height: 550px;
    .bannerwrapper{
      width: calc(100% - 50px);
      left: 25px;
      top: 180px;
      height: calc(100% - 300px);
      .bannerinner::after{
        background-color: transparent;
        background-image: linear-gradient(transparent,rgb(var(--color2)));
      }
    }
    .fadedtext{
      top: 120px;
      div{
        font-size: 29.5vw;
        height: 24vw;
      }
    }
  }
  body .topnav .toplogolink{
    width: calc(var(--logo-link-height) / 1.5 / var(--logo-height) * var(--logo-width)) !important;
    min-width: calc(var(--logo-link-height) / 1.5 / var(--logo-height) * var(--logo-width)) !important;
    --logo-top: 20px;
  }
  body header .taglineoverlay {
    max-width: 100%;
    bottom: 110px;
    .fixed{
      font-size: var(--fs3);
    }
    .tagline.animated {
      .taglineinner .title {
        font-size: var(--fs6);
      }
    }
  }
}

/* WELCOME */

section.welcome{
  position: relative;
  &::before{
    content: '';
    background-image: var(--fleur-grey);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    width: 22vw;
    height: 22vw;
    left: -7vw;
    bottom: -2vw;
    position: absolute;
    z-index: 1;
  }
  .Magazine{
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 3vw;
    .Item{
      .ItemBefore{
        transition: unset;
        width: 35vw;
        min-width: 175px;
        max-width: 350px;
        height: 43.8vw;
        min-height: 219px;
        max-height: 438px;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          inset: -8%;
          background-image: var(--welcome);
          background-size: cover;
          background-position: 50% 50%;
        }
      }
      .ItemInner{
        padding-left: min(140px, 8vw);
        h6{
          text-transform: uppercase;
          margin-bottom: 1em;
          position: relative;
          overflow: hidden;
          display: flex;
          gap: 10px;
          &::after{
            content: '';
            display: block;
            height: 1px;
            flex: 1 1 1px;
            position: relative;
            top: 0.7em;
            left: 0;
            background-color: rgb(var(--color4));
          }
        }
        h4{
          font-size: var(--fs3);
          line-height: 1.2em;
          border-bottom: 1px solid rgb(var(--color4));
          padding-bottom: 0.7em;
          margin-bottom: 0.7em;
        }
        p{
          font-size: var(--fs5);
        }
      }
    }
  }
}

@media screen and (max-width: 1200px){
  section.welcome .Magazine{
    .Item{
      .ItemBefore{
        max-height: unset;
        min-height: unset;
        max-width: unset;
        min-width: unset;
        height: 36.7vw;
        transform: translateX(20px);
      }
    }
  }
}

@media screen and (max-width: 1160px){
  section.welcome .Magazine{
    .Item{
      .ItemBefore{
        height: 37vw;
      }
    }
  }
}

@media screen and (max-width: 600px){
  section.welcome .Magazine{
    .Item{
      .ItemBefore{
        display: none;
      }
      .ItemInner{
        padding-left: 0;
        padding-top: 0;
      }
    }
  }
}

/* VALUES */

section.values{
  .Magazine{
    max-width: 1200px;
    margin: 0 auto;
    & > ul{
      & > li{
        opacity: 0;
        transition: opacity 0.8s, transform 0.8s;
        transition-delay: calc((0.5s * var(--item-num)) - 0.5s);
        transform: translateX(-50vw);
        &:nth-child(even){
          transform: translateX(50vw);
        }
        .Item{
          .ItemBefore{
            z-index: 1;
            --cut: 26px;
            clip-path: shape(from var(--cut) 0px,line to calc(100% - var(--cut)) 0px,arc to 100% var(--cut) of var(--cut),line to 100% calc(100% - var(--cut)),arc to calc(100% - var(--cut)) 100% of var(--cut),line to var(--cut) 100%,arc to 0px calc(100% - var(--cut)) of var(--cut),line to 0px var(--cut),arc to var(--cut) 0px of var(--cut));
          }
          .ItemInner{
            opacity: 0;
            transition: opacity 0.8s;
            transition-delay: calc(0.5s * var(--item-num));
            h3.Title{
              color: white;
              font-family: var(--font-heading);
              font-size: var(--fs2);
              font-weight: 400;
              position: relative;
            }
            p{
              color: white;
              position: relative;
            }
            .ItemContent .paracontent .buttonstyle{
              --button-border: 1px solid rgb(var(--color3));
              --button-color: var(--grey10);
              --button-background-color: transparent;
              --button-border-hover: 1px solid rgb(var(--color3));
              --button-background-color-hover: var(--color3);
              --button-color-hover: var(--color1);
              position: relative;
              &::after{
                content: 'FIND OUT MORE' !important;
              }
            }
          }
        }
        &:first-child{
          .Item{
            .ItemBefore{
              display: none;
            }
            .ItemInner{
              transition-delay: 0s;
              h3.Title{
                font-size: var(--fs0);
              }
            }
          }
        }
        &:nth-child(2),&:nth-child(3),&:nth-child(4){
          .Item{
            .ItemInner{
              position: relative;
              padding-bottom: 20px;
              &::before{
                content:'';
                position: absolute;
                left: -25px;
                right: -25px;
                top: -40px;
                bottom: 5px;
                background-color: rgb(var(--color6));
              }
            }
          }
        }
        &:nth-child(3), &:nth-child(4){
          .Item{
            .ItemInner{
              h3.Title, p{
                color: rgb(var(--color1));
              }
            }
          }
        }
        &:nth-child(3){
          .Item{
            .ItemInner{
              &::before{
                background-color: rgb(var(--color5));
              }
            }
          }
        }
        &:nth-child(4){
          .Item{
            .ItemInner{
              &::before{
                background-color: rgb(var(--color3));
              }
            }
          }
        }
      }
    }
  }
  .fadedtext{
    color: rgb(var(--color5));
    position: absolute;
    font-family: var(--font-heading);
    font-weight: 900;
    left: 0;
    bottom: 0;
    overflow: hidden;
    div{
      font-size: 16vw;
      letter-spacing: 0.1em;
      line-height: 1em;
      height: 13vw;
      position: relative;
      bottom: 0.05em;
      left: -0.03em;
      --item-opacity: 0.3;
      animation-duration: 1.2s;
      animation-fill-mode: forwards;
      animation-delay: 0.6s;
      animation-timing-function: cubic-bezier(0.768, -0.003, 0.59, 1.331);
      opacity: 0.3;
      &:nth-child(1){
        --item-opacity: 0.05;
        animation-delay: 0s;
        opacity: 0.05;
      }
      &:nth-child(2){
        --item-opacity: 0.175;
        animation-delay: 0.3s;
        opacity: 0.175;
      }
    }
  }
}

section.animationtrigger{
  position: relative;
  top: -80vh;
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0 !important;
}

section.values:has(+ section.animationtrigger){
  .fadedtext div{
    opacity: 0;
    transform: translateX(100%);
  }
}
section.values:has(+ section.animationtrigger.animationcomplete){
  .fadedtext{
    div{
      animation-name: fadedtextslidein;
    }
  }
}

section.values.animationcomplete{
  .Magazine{
    & > ul{
      & > li{
        opacity: 1;
        transform: translateX(0vw) !important;
        .Item .ItemInner{
          opacity: 1;
        }
      }
    }
  }
}


@media screen and (min-width: 601px){
  section.values .Magazine > ul{
    display: flex;
    flex-wrap: wrap;
    gap: 70px;
    padding-right: 25px;
    & > li {
      &:nth-child(2), &:nth-child(3), &:nth-child(4) {
        .Item .ItemBefore{
          transform: translateY(-70px);
        }
        .Item .ItemInner{
          padding-left: 40px;
          padding-right: 20px;
          &::before {
            left: -50px;
            right: -25px;
            top: -25px;
            bottom: 5px;
          }
          &::after{
            content: '';
            width: 5.5em;
            height: 7.5em;
            position: absolute;
            top: -4.5em;
            right: 1em;
            background-image: var(--val1);
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
      }
      &:nth-child(3) .Item .ItemInner::after{
        background-image: var(--val2);
      }
      &:nth-child(4) .Item .ItemInner::after{
        background-image: var(--val3);
      }
    }
  }
}

@media screen and (min-width: 801px){
  section.values .Magazine > ul > li{
    flex: 1 1 40%;
    &:first-child{
      margin-bottom: 30px;
      .Item .ItemInner{
        padding-top: 80px;
        .ItemContent .paracontent .buttonstyle {
          margin-top: 40px;
        }
      }
    }
    &:nth-child(2), &:nth-child(3), &:nth-child(4) {
      .Item{
        flex-direction: column;
        padding-bottom: 0;
        .ItemBefore{
          position: static;
          min-width: unset;
          max-width: unset;
          min-height: unset;
          max-height: unset;
          height: unset;
          aspect-ratio: 1 / 0.7;
          width: 92%;
          transform: unset;
          z-index: unset;
        }
        .ItemInner{
          padding: 0px !important;
          width: 70%;
          margin-left: auto;
          margin-top: -50px;
          &::before{
            left: -50px;
            right: -50px;
            top: -35px;
            bottom: -30px;
          }
        }
      }
    }
    &:nth-child(3){
      .Item{
        .ItemBefore{
          margin-top: -100px;
          width: 100%;
        }
        .ItemInner::after{
          right: -0.8em;
        }
      }
    }
    &:nth-child(4){
      .Item{
        .ItemBefore{
          margin-top: 60px;
          width: 80%;
          margin-left: auto;
          transform: translateX(20px);
          aspect-ratio: 1 / 1.4;
        }
        .ItemInner{
          margin-right: auto;
          margin-left: 0;
          width: 72%;
          transform: translateX(-30px);
          &::after{
            right: -0.8em;
          }
        }
      }
    }
  }
}


/* INTERACTIVE MAP */

section.HomeSchoolsBloq{
  overflow: hidden;
  &::before{
    content: '';
    background-image: var(--fleur-grey);
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    width: 22vw;
    height: 22vw;
    right: 0;
    top: -2vw;
    position: absolute;
    z-index: 1;
  }
  .bloqTitle{
    text-align: center;
  }
}
.schoolsmapflex{
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  padding: 0 20px;
  transform: translateX(20px);
  align-items: center;
  gap: 6%;
  .bloqTitle{
    padding-right: 6vw;
  }
  .flexleft{
    flex: 0 0 48%;
    order: 2;
    .mapslist{
      .allschools{
        .allschoolsbutton{
          margin: 0 0 0 auto;
          &::after{
            content: 'VIEW ALL';
          }
        }
        .regiontitle{
          display: none;
          &.region0{
            display: block;
          }
          h5{
            text-transform: uppercase;
            font-weight: 800;
            letter-spacing: 0.07em;
          }
        }
        .schoolitemswrapper{
          border-top: 1px solid rgb(var(--color2));
          border-bottom: 1px solid rgb(var(--color2));
          height: 325px;
          overflow: auto;
          overflow-y: auto; 
          scroll-snap-type: y mandatory; 
          scrollbar-width: none;          /* Firefox */
          -ms-overflow-style: none;       /* IE and Edge */
          &::-webkit-scrollbar {
            display: none;
          }
        }
        .schoolitem{
          border-bottom: 1px solid rgb(var(--color2));
          height: 81px;
          max-height: 81px;
          min-height: 81px;
          display: grid;
          scroll-snap-align: start;
          &:last-child{
            border-bottom-width: 0px;
          }
          .schooliteminner{
            position: relative;
            display: flex;
            align-items: center;
            .badge{
               height: 60px;
               width: 60px;
               min-width: 60px;
               max-width: 60px;
               background-size: contain;
               background-position: 50% 50%;
               background-repeat: no-repeat;
               margin-right: 10px;
            }
            p{
              color: rgb(var(--color1)); 
              font-weight: 600;
              margin: 0;
              font-size: var(--fs7);
              min-width: 150px;
              padding-right: 15px;
              text-transform: uppercase;
            }
            .buttonstyle{
              border: 1px solid rgb(var(--color2));
              white-space: nowrap;
              margin: 0;
              margin-left: auto;
              min-width: max-content;
              --button-padding: 11px 25px;
              --button-font-size: 11px;
              color: rgb(var(--color1));
              &:hover{
                background-color: rgb(var(--color2));
                color: white;
              }
            }
            .profile{
              margin-left: auto;
              &::after{
                content: 'SCHOOL PROFILE';
              }
            }
            .website{
              &::after{
                content: 'SCHOOL WEBSITE';
              }
            }
          }
        }
      }
      .schoolsstagewrapper{
        display: flex;
        padding-bottom: 30px;
        .lab{
          display: grid;
          padding: 0 10px;
          place-items: center;
          font-weight: 700;
          font-size: 13px;
        }
        .nav{
          display: block;
          border: 1px solid rgb(var(--color2));
          background-color: transparent;
          width: var(--nav-size);
          height: var(--nav-size);
          font-size: calc(var(--nav-size) * .5);
          border-radius: 50%;
          cursor: pointer;
          color: rgb(var(--color2));
          display: grid;
          place-items: center;
          transition: .1s;
          &.secondary{
            margin-left: 10px;
          }
          i{
            color: rgb(var(--color3));
          }
          &:hover{
            background-color: rgb(var(--color3));
            border-color: rgb(var(--color3));
            i{
              color: white;
            }
          }
        }
      }
      .schoolsnavwrapper{
        display: flex;
        padding-top: 30px;
        .nav{
          display: block;
          border: 1px solid rgb(var(--color2));
          background-color: transparent;
          width: var(--nav-size);
          height: var(--nav-size);
          font-size: calc(var(--nav-size) * .35);
          border-radius: 50%;
          cursor: pointer;
          color: rgb(var(--color2));
          display: grid;
          place-items: center;
          transition: .1s;
          &.down{
            margin-left: 10px;
            margin-right: 10px;
          }
          &.close{
            margin-right: auto;
            margin-left: 0px;
            display: none;
          }
          &:hover{
            background-color: rgb(var(--color2));
            color: white;
          }
        }
      }
    }
  }
  .flexright{
    flex: 0 0 46%;
    transform: translateX(-50px);
    #tooltip-svg{
      overflow: visible;
      .st0{
        fill: rgb(var(--color2));
        cursor: pointer;
        &:hover{
          fill: rgb(var(--color1));
          title{
            opacity: 1;
          }
        }
      }
    }
  }
}

@media (max-width: 900px) {
  .schoolsmapflex{
    transform: translateX(0px);
    flex-wrap: wrap;
    gap: 40px;
    .flexleft{
      min-width: 100%;
      .mapslist{
        .allschools .schoolitem .schooliteminner{
          margin-right: 0;
        }
        .schoolsnavwrapper{
          .nav.close{
            margin-right: 0;
          }
        }
      }
    }
    .flexright{
      min-width: 100%;
      transform: translateX(0px);
      display: grid;
      place-items: center;
      svg{
        max-height: 400px;
      }
    }
  }
}

@media (max-width: 460px) {
  .schoolsmapflex{
    padding-inline: 0;
    .flexleft .mapslist .allschools .schoolitem .schooliteminner{
      .badge{
        display: none;
      }
    }
  }
}


/* INSTAGRAM SLIDER */

body section.mod_avatar_slider{
  div.Slider{
    --SliderRowHeight: 520px;
    --SliderItemMinWidth: 320px;
    margin: 0px -210px !important;
    .nav{
      top: auto;
      bottom: -64px;
      --nav-border: 1px solid rgb(var(--color3));
      --nav-border-hover: 1px solid rgb(var(--color3));
      --nav-background-color-hover: var(--color3);
      &.last{
        left: calc(50% - 52px);
      }
      &.next{
        right: calc(50% - 52px);
      }
    }
    .SliderInner>ul>li{
      &:nth-child(3n + 1) .Item .ItemInner{
        background-color: rgb(var(--color6));
      }
      .Item{
        pointer-events: none;
        .ItemBefore {
          width: 240px;
          height: 240px;
          left: calc(50% - 120px) !important;
          border-radius: 0;
          --cut: 18px;
          clip-path: shape(from var(--cut) 0px,line to calc(100% - var(--cut)) 0px,arc to 100% var(--cut) of var(--cut),line to 100% calc(100% - var(--cut)),arc to calc(100% - var(--cut)) 100% of var(--cut),line to var(--cut) 100%,arc to 0px calc(100% - var(--cut)) of var(--cut),line to 0px var(--cut),arc to var(--cut) 0px of var(--cut));
        }
        .ItemInner{
          height: calc(100% - 120px);
          padding-top: 160px;
          .ItemIcon {
            top: calc(120px - var(--nav-size) / 2);
            font-size: 22px;
            transition: 0.4s;
          }
          h3.Title{
            pointer-events: all;
            display: inline-grid;
            place-items: center;
            background-color: transparent;
            padding: var(--button-padding);
            font-size: 0px;
            color: white;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            text-transform: var(--button-text-transform);
            border: 1px solid rgb(var(--color3));
            margin: 0;
            border-radius: var(--button-border-radius);
            font-family: var(--button-font-family);
            font-weight: var(--button-font-weight);
            line-height: 1.5em;
            max-width: fit-content;
            min-width: fit-content;
            &::after{
              font-size: var(--button-font-size);
              content: 'VIEW POST';
              line-height: 1.5em;
            }
            &:hover{
              background-color: rgb(var(--color3));
              color: rgb(var(--color1));
            }
          }
        }
      }
      &:hover{
        .Item{
          .ItemInner{
            padding-top: 220px;
            height: calc(100% - 60px);
            .ItemIcon {
              top: calc(180px - var(--nav-size) / 2);
            }
          }
        }
      }
    }
  }
}

@media (max-width: 620px) {
  body section.mod_avatar_slider{
    div.Slider{
      margin: 0px -20px !important;
    }
  }
}

/* SOCIAL LINKS */

section.LinksBloq{
  display: flex;
  justify-content: center;
  gap: 8vw;
  flex-wrap: wrap;
  padding-bottom: 90px !important;
  .bloqTitle{
    --hp-bloq-font-size: calc((var(--fs5) + var(--fs6)) / 1);
    margin: 0;
    width: max-content;
  }
  .Icon{
    display: grid;
    place-items: end center;
    padding-bottom: 0.8em;
    & > ul{
      gap: 16px;
      & > li .Item{
        border-radius: 50%;
        border: 1px solid rgb(var(--color2));
        background-color: white;
        .ItemInner .ItemIcon{
          width: 64px;
          height: 64px;
          color: rgb(var(--color2));
          --base-font-size: 24px;
        }
        &:hover{
          background-color: rgb(var(--color2));
          .ItemInner .ItemIcon{
            color: white;
          }
        }
      }
    }
  }
  &::after{
    display: none;
  }
}

@media (max-width: 880px) {
  section.LinksBloq{
    gap: 20px;
    .bloqTitle{
      text-align: center;
      min-width: 100%;
    }
  }
}