body{
  header.Homepage{
    overflow: visible;
  }
  .mainwrapper{
    margin-top: 50px;
  }
}

/* FOOTER WATERMARK */

.footertop::before{
  width: 300px;
  height: 300px;
  bottom: -40px;
  right: max(calc(50% - 810px), -60px);
}

/* TAGLINES */

body .taglineoverlay{
  bottom: calc(2vw + 80px);
  .fixed{
    text-transform: uppercase;
    font-weight: 800;
    padding-right: 9vw;
    opacity: 0;
    animation: 2s ease-in-out 0s forwards tagline-slide-in;
    letter-spacing: 0.08em;
  }
  .taglines .tagline .taglineinner{
    .title{
      font-size: calc(var(--fs0) + var(--fs0));
      font-family: var(--font-cursive);
      line-height: 1em;
      opacity: 0;
      animation: 2s ease-in-out 0.25s forwards tagline-slide-in;
      letter-spacing: 0.03em;
      font-style: italic;
    }
    .subtitle{
      font-family: var(--font-normal);
      text-transform: uppercase;
      font-size: var(--fs6);
      font-weight: 600;
      opacity: 0;
      animation: 2s ease-in-out 0.5s forwards tagline-slide-in;
      letter-spacing: 0.08em;
    }
  }
}

@keyframes tagline-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  50%{
    transform: translateX(50%);
    opacity: 0;
  }
  to {
    transform: translateX(0%);
    opacity: 1;
  }
}

/* BUTTONS */


body {
  a.buttonstyle{
    position: relative;
    overflow: hidden;
  }
  a.buttonstyle:hover{
    background-color: rgba(var(--button-background-color), 1) !important;
  }
  a.buttonstyle::after{
    position: relative;
  }
  a.buttonstyle::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);
  }
  a.buttonstyle:hover::before{
    width: 100%;
  }
  div#gdpr{
    a.buttonstyle{
      &::before{
        display: none !important;
      }
      &:hover{
        background-color: white !important;
      }
    }
  }
}

/* WELCOME */

body main div.typography{
  &::before{
    z-index: 1;
    content: '';
    position: absolute;
    right: max(calc(100% - 250px), calc(50% + 36vw));
    top: calc(-60px - 5vw);
    width: 330px;
    height: 330px;
    background-image: var(--welcome-watermark);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 100% 100%;
  }
}

@media (max-width: 1200px) {
  body main div.typography{
    &::before{
      display: none;
    }
  }
}

@media (max-width: 600px) {
  body main div.typography{
    &::before{
      opacity: 0.3;
    }
  }
}

body section.mod_chunky_welcome{
  padding-top: 40px !important;
  padding-bottom: 20px !important;
  div.Welcome{
    --welcome-max-width: 1200px;
    position: relative;
    left: 14vw;
    & > div.WelcomeFlex{
      padding-right: min(calc((var(--welcome-max-width) / 2.22) + 30px), calc(45% + 30px));
      .ItemImage .ItemBefore{
        border-radius: 50px;
        border: 18px solid white;
        box-shadow: -4px -4px 20px rgba(var(--grey2), 0.3);
      }
      .ItemContent .paracontent h5{
        font-size: var(--fs4);
        color: rgb(var(--color6));
        font-weight: 400;
        em{
          font-style: normal;
          font-weight: 600;
          color: rgb(var(--color1));
        }
      }
    }
  }
}

body section.mod_chunky_welcome.animationcomplete{
  div.Welcome{
    & > div.WelcomeFlex{
      &::before{
        opacity: 1;
      }
    }
  }
}

@media (min-width: 1600px) {
  body section.mod_chunky_welcome{
    div.Welcome{
      left: 50px;
    }
  }
}

@media (max-width: 600px) {
  body section.mod_chunky_welcome div.Welcome{
    left: 0;
    &> div.WelcomeFlex{
      padding: 0;
      min-height: 0;
      .ItemImage{
        display: none !important;
      }
    }
  }
}

/* QUICK LINKS */

body section.LinksBloq.mod_none.popstyle{
  background-image: var(--quick-links-mask), linear-gradient(0deg, white 0px, white 121px, rgb(var(--color7)) 121px);
  background-size: contain, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 calc(100% - 120px), 0 0;
  div.Grid{
    max-width: 1260px;
    margin: 0 auto;
    & > ul{
      --grid-gap: 24px;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      & > li{
        transition: 0.5s;
        scale: 0.75;
        opacity: 0;
        transition-delay: 0s;
        .Item{
          height: 270px;
          .ItemInner{
            background-color: rgba(var(--color3),0.75);
            --item-color: rgb(var(--color3));
            justify-content: flex-end;
            align-items: flex-start;
            .Title{
              text-align: left;
              margin: 0;
              padding: 0px;
            }
            .ItemContent{
              display: block;
              order: -1;
              text-align: left;
              text-transform: uppercase;
              padding: 0px;
            }
            .popbutton{
              margin: 10px 0;
            }
          }
          &:hover{
            margin: -12px;
	    height: 294px;
	    .ItemInner{
	      padding: 32px;
              background-color: rgba(var(--color3),0.9);
              .Title{
                display: block;
                padding-bottom: 10px;
              }
              .popbutton::after {
                content: 'Find out more';
              }
              .popbutton:hover{
                color: var(--item-color);
              }
	    }
          }
        }
        &:nth-child(2){
          transition-delay: 0.3s;
        }
        &:nth-child(3){
          transition-delay: 0.6s;
        }
        &:nth-child(4){
          transition-delay: 0.9s;
        }
        &:nth-child(5){
          transition-delay: 1.2s;
        }
        &:nth-child(3n + 1){
          .Item{
            .ItemInner{
              background-color: rgba(var(--color1),0.75);
              --item-color: rgb(var(--color1));
            }
            &:hover{
              .ItemInner{
                background-color: rgba(var(--color1),0.9);
              }
            }
          }
        }
        &:nth-child(3n + 2){
          .Item{
            .ItemInner{
              background-color: rgba(var(--color2),0.75);
              --item-color: rgb(var(--color2));
            }
            &:hover{
              .ItemInner{
                background-color: rgba(var(--color2),0.9);
              }
            }
          }
        }
      }
    }
  }
}

body section.LinksBloq.mod_none.popstyle.animationcomplete{
  div.Grid > ul > li{
    scale: 1;
    opacity: 1;
  }
}


@media (max-width: 1240px) {
  body section.LinksBloq.mod_none.popstyle{
    div.Grid{
      max-width: 950px;
      & > ul{
        & > li{
          &:nth-child(n + 4){
            .Item{
              transform: translateX(calc(50% + 12px));
              &:hover{
                transform: translateX(50%);
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 750px) {
  body section.LinksBloq.mod_none.popstyle{
    div.Grid{
      max-width: 700px;
      & > ul{
        & > li{
          &:nth-child(n + 4){
            .Item{
              transform: translateX(0);
              &:hover{
                transform: translateX(0);
              }
            }
          }
          &:nth-child(n + 5){
            .Item{
              transform: translateX(calc(50% + 12px));
              &:hover{
                transform: translateX(50%);
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 510px) {
  body section.LinksBloq.mod_none.popstyle{
    div.Grid{
      max-width: 460px;
      & > ul{
        & > li{
          &:nth-child(n + 5){
            .Item{
              transform: translateX(0);
              &:hover{
                transform: translateX(0);
              }
            }
          }
        }
      }
    }
  }
}

/* INTERACTIVE MAP */

.schoolsmapflex{
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  padding: 0 20px;
  transform: translateX(20px);
  align-items: center;
  .bloqTitle{
    padding-right: 6vw;
  }
  .flexleft{
    flex: 0 0 46%;
    .mapslist{
      .noschools{
        padding-right: 6vw;
        p.bolder{
          font-weight: 600;
        }
        .allschoolsbutton{
          margin: 20px 0 0;
          &::after{
            content: 'ALL SCHOOLS';
          }
        }
      }
      .allschools{
        .regiontitle{
          display: none;
          h5{
            text-transform: uppercase;
            font-weight: 800;
            letter-spacing: 0.07em;
          }
        }
        .schoolitem{
          display: none;
          padding-top: 5px;
          padding-bottom: 5px;
          .schooliteminner{
            position: relative;
            background-color: rgb(var(--color2));
            padding: 14px 20px;
            border-radius: 10px;
            display: flex;
            align-items: center; 
            margin-right: 40px;
            p{
              color: white; 
              font-weight: 600;
              margin: 0;
              font-size: var(--fs7);
              min-width: 150px;
              padding-right: 5px;
            }
            .buttonstyle{
              border: 1px solid white;
              white-space: nowrap;
              margin: 4px;
              min-width: max-content;
              --button-padding: 9px 15px;
              --button-font-size: 9px;
              &:hover{
                border: 1px solid rgb(var(--color5));
              }
            }
            .profile{
              margin-left: auto;
              &::after{
                content: 'SCHOOL PROFILE';
              }
            }
            .website{
              &::after{
                content: 'SCHOOL WEBSITE';
              }
            }
          }
        }
      }
      .schoolsnavwrapper{
        display: none;
        padding-top: 10px;
        .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: 12px;
          }
          &.close{
            margin-left: auto;
            margin-right: 40px;
          }
          &:hover{
            background-color: rgb(var(--color2));
            color: white;
          }
        }
      }
    }
  }
  .flexright{
    flex: 0 0 54%;
    #tooltip-svg{
      overflow: visible;
      .st0{
        fill: rgb(var(--color3));
        cursor: pointer;
        &:hover{
          fill: rgb(var(--color1));
          title{
            opacity: 1;
          }
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .schoolsmapflex .flexleft .mapslist .allschools .schoolitem .schooliteminner{
    flex-wrap: wrap;
    justify-content: center;
    p{
      min-width: 100%;
      text-align: center;
      padding-bottom: 5px;
    }
    .profile{
      margin-left: 5px;
    }
  }
}

@media (max-width: 800px) {
  .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%;
      max-height: 400px;
      text-align: center;
      svg{
        max-height: 100%;
        max-width: 100%;
      }
    }
  }
}

/* NEWS SLIDER */

section.mod_overlap_slider.CutoffSlider{
  --cutoff-overlap: calc(var(--SliderItemMinWidth) + 30px);
  --min-extras-width: 0px;
  .filterSourceSideBySideButtons{
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 540px;
    width: fit-content;
    margin: 0px !important;
    transform: translateX(-50%);
    .sourceButtonWrapper{
      margin: 0px !important;
      padding: 0px !important;
      .sourceLink{
        margin: 0px !important;
        white-space: nowrap;
        width: fit-content !important;
        padding: 10px 25px !important;
        background-color: rgb(var(--color2)) !important;
        border: 0px solid transparent !important;
        &::after{
          content: 'VIEW ALL NEWS';
          position: relative;
          font-size: var(--button-font-size);
          color: white !important;
        }
        &::before{
          content: '' !important;
        }
      }
    }
  }
  div.Slider {
    --SliderRowHeight: 500px;
    --SliderItemMinWidth: 360px;
    --SliderGridGap: 32px;
    padding: 0 0 calc(40px + var(--nav-size)) !important;
    .nav{
      top: 540px !important;
      &.last{
        left: calc(50% - var(--nav-size) - 100px - (var(--SliderGridGap) / 2)) !important;
      }
      &.next{
        right: calc(50% - var(--nav-size) - 100px - (var(--SliderGridGap) / 2)) !important;
      }
    }
    .SliderInner>ul>li .Item{
      .ItemBefore{
        z-index: 1;
        background-image: none;
        background-color: transparent;
        border-radius: 100px;
        width: fit-content;
        font-size: var(--button-font-size);
        height: auto;
        border: 1px solid white;
        color: white;
        padding: var(--button-padding);
        position: absolute;
        bottom: -50px !important;
        left: 30px !important;
        top: auto !important;
        right: auto !important;
        transition: 0.2s;
        &::after{
          content: 'READ MORE';
        }
        img{
          display: none;
        }
        &:hover{
          background-color: white;
          color: rgb(var(--color1));
        }
      }
      .ItemInner{
        background-image: var(--item-image);
        background-size: cover;
        background-position: var(--bg-pos);
        background-color: var(--social-link-color) !important;
        --nav-size: 48px;
        --nav-border-radius: 24px;
        &::before{
          background: linear-gradient(0deg, rgba(var(--color6), 0.7) 0%, rgba(var(--color6), 0) 100%);
        }
        .ItemIcon{
          background-color: rgb(var(--color1)) !important;
          font-size: 20px !important;
          &::before{
            content: '\f1ea' !important;
          } 
        }
        .Title{
          text-transform: none;
          font-weight: 600;
          font-size: var(--fs4);
        }
        .ItemContent .paracontent{
          font-size: var(--fs6);
        }
      }
      &:hover{
        .ItemBefore{
          bottom: 40px !important;
          left: 30px !important;
          top: auto !important;
          right: auto !important;
          transition: 0.5s;
        }
        .ItemInner{
          padding-bottom: calc(60px + var(--nav-size)) !important;
          .ItemIcon{
            background-color: white !important;
            &::before{
              color: rgb(var(--color1));
            }
          } 
        }
      }
    }
  }
}

@media (max-width: 500px) {
  body section.mod_overlap_slider.CutoffSlider div.Slider {
    --SliderItemMinWidth: 300px !important;
  }
}

/* MEET OUR STAFF */

section.TextBloq.mod_none{
  padding-bottom: 20px !important;
  .bloqTitle{
    text-align: center;
    margin-top: .2em;
  }
  p{
    max-width: 710px;
    margin: 0 auto;
  }
}

section.QuotesBloq.mod_none{
  padding: 30px 0 90px !important;
  div.Concertina>ul>li{
    min-height: 20vw;
    .Item{
      .ItemInner{
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        transform: none;
        padding-top: 0px;
        .Title{
          color: white; 
          margin-bottom: 0;
        }
        .ItemSubtitle{
          text-transform: uppercase;
          font-weight: 600;
          font-size: var(--fs6);
        }
        .ItemContent{
          padding-top: 15px;
          order: -1;
          text-align: left;
          padding-bottom: 5px;
          .paracontent{
            text-align: left;
          }
        }
        &::before{
          background-color: rgba(var(--color1),0.65);
          opacity: 1;
        }
      }
    }
    &:nth-child(4n+2){
      .Item .ItemInner::before{
        background-color: rgba(var(--color2),0.65);
      }
    }
    &:nth-child(4n+3){
      .Item .ItemInner::before{
        background-color: rgba(var(--color3),0.65);
      }
    }
    &:nth-child(4n+4){
      .Item .ItemInner::before{
        background-color: rgba(var(--color5),0.65);
      }
    }
    &:hover{
      margin: -30px 0;
      border-radius: 10px;
      z-index: 1;
      flex: 4.2 4.2 4.2px;
      .Item{
        .ItemInner{
          padding-top: 30px;
          .ItemContent{
            order: 0;
          }
          &::before{
            background-color: rgba(var(--color1),0.9) !important;
          }
        }
      }
      &:nth-child(4n+2){
        .Item .ItemInner::before{
          background-color: rgba(var(--color2),0.9) !important;
        }
      }
      &:nth-child(4n+3){
        .Item .ItemInner::before{
          background-color: rgba(var(--color3),0.9) !important;
        }
      }
      &:nth-child(4n+4){
        .Item .ItemInner::before{
          background-color: rgba(var(--color5),0.9) !important;
        }
      }
    }
  }
}

@media (max-width: 1400px) {
  body section.QuotesBloq.mod_none div.Concertina>ul>li {
    flex-basis: 50% !important;
    .Item .ItemInner{
      min-width: 80%;
      max-width: 80%;
    }
  }
}

/* EVENTS */

body section.mod_bubbles_slider{
  --SliderGridGap: 50px;
  padding: 9vw 0 calc(6vw + 80px) !important;
  .downloadics{
    &::before {
      content: var(--addtocalendar);
      color: white;
      font-size: 12px;
      display: inline-block;
      min-width: max-content;
    }
    &::after{
      color: white;
    }
    &:hover{
      &::before, &::after{
        color: rgb(var(--color4));
      }
    }
  }
  &::before, &::after{
    content:'';
    visibility: visible;
    width: 100%;
    height: 9vw;
    background-size: contain;
    background-position: 0% 0%;
    position: absolute;
    background-image: var(--events-top);
    background-repeat: no-repeat;
    left: 0;
    top: -1px;
  }
  &::after{
    top: auto;
    bottom: -1px;
    height: 6vw;
    background-position: 0% 100%;
    background-image: var(--events-bottom);
  }
  h2.bloqTitle{
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding-right: 40%;
    padding-left: 8%;
    color: white;
    padding-bottom: 30px;
    padding-top: 20px;
  }
  div.filterSourceSideBySideButtons{
    max-width: unset;
    margin: 0;
    position: relative;
    width: 100%;
    div.sourceButtonWrapper{
      padding-right: 40%;
      padding-left: 8%;
      bottom: auto;
      top: 290px;
      max-width: 1500px;
      width: 100%;
      margin: 0 auto;
      .buttonstyle{
        border-color: rgb(var(--color4));
        color: white;
        background-color: transparent !important;
        font-size: var(--button-font-size);
        &::before{
          background-color: rgb(var(--color4));
        }
        &::after{
          background-color: transparent !important;
        }
        &:hover{
          background-color: transparent !important;
        }
      }
    }
  }
  div.Slider{
    width: 100% !important;
    max-width: unset;
    padding-right: calc(40% + max((50% - 750px),0px));
    padding-left: calc(8% + max((50% - 750px),0px));
    padding-bottom: 170px;
    --SliderRowHeight: 220px;
    --SliderItemMinWidth: 300px !important;
    .nav{
      border: 1px solid rgb(var(--color4));
      background-color: transparent;
      color: rgb(var(--color4));
      bottom: 50px !important;
      &.last{
        left: calc(50% - 150px - ((40% + max((50% - 750px),0px))/2) + ((8% + max((50% - 750px),0px))/2));
      }
      &.next{
        right: auto;
        left: calc(50% + 110px - ((40% + max((50% - 750px),0px))/2) + ((8% + max((50% - 750px),0px))/2));
      }
      &:hover{
        border: 1px solid rgb(var(--color4));
        background-color: rgb(var(--color4));
        color: white;
      }
    }
    .SliderInner>ul>li .Item{
      .ItemInner{
        &::before{
          top: 50px;
          left: 100px;
          width: 700px;
        }
        &::after{
          top: 42px;
        }
        .ItemDate{
          width: 100px;
          height: 100px;
          padding: 19px 0 21px;
          &:not(:has(i))::before{
            color: white !important;
            left: 120px !important;
          }
          &:not(:has(i))::after{
            font-weight: 400 !important;
            color: white !important;
            left: 140px !important;
          }
          d:first-child{
            font-size: 36px;
            line-height: 36px;
          }
          d:nth-child(2){
            font-size: 20px;
            line-height: 20px;
          }
          i{
            left: 120px;
            color: white;
            & ~ d{
              left: 135px;
              color: white;
              font-weight: 400;
            }
          }
        }
        .Title{
          padding-left: 97px;
          top: 32px;
          text-transform: none;
          color: white;
          font-size: calc(var(--fs4) - 2px);
          font-weight: 600;
        }
        .ItemContent .paracontent .cardBottomLinks{
          padding-left: 107px;
        }
      }
      &:hover .ItemInner{
        .ItemDate, &::after, &::before{
          background-color: rgb(var(--color4));
        }
      }
    }
  }
  .Slider::before{
    content: '';
    height: 500px;
    width: 500px;
    border: 1px solid red;
    position: absolute;
    right: -100px;
    top: calc(-100px - 9vw);
    background-image: var(--events-photo);
    border: 18px solid white;
    box-shadow: -4px -4px 20px rgba(var(--grey2), 0.3);
    border-radius: 50px;
    background-size: cover;
    background-position: 50% 50%;
  }
  .Slider::after{
    content: '';
    position: absolute;
    left: -50px;
    bottom: calc(-6vw - 120px);
    height: 300px;
    width: 300px;
    background-image: var(--white-watermark);
    background-size: contain;
    opacity: 0.1;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    
  }
}

@media (max-width: 950px) {
  body section.mod_bubbles_slider{
    .Slider::before{
      display: none;
    }
    h2.bloqTitle{
      padding-top: 60px;
      padding-right: 20px;
      padding-left: 20px;
    }
    div.filterSourceSideBySideButtons {
      div.sourceButtonWrapper {
        padding-right: 20px;
        padding-left: 20px;
      }
    }
    div.Slider{
      padding-right: 20px;
      padding-left: 20px;
      .nav.last{
        left: calc(50% - 150px);
      }
      .nav.next{
        left: calc(50% + 110px);
      }
    }
  }
}

@media (max-width: 1200px) {
  body section.mod_bubbles_slider .Slider::before{
    width: 400px;
  }
}

@media (min-width: 1600px) {
  body section.mod_bubbles_slider {
    h2.bloqTitle{
      padding-left: 0%;
      padding-right: 32%;
    }
    div.Slider {
      padding-right: calc(32% + max((50% - 750px), 0px));
      padding-left: calc(0% + max((50% - 750px), 0px));
    }
  }
}

@media (min-width: 1900px) {
  body section.mod_bubbles_slider {
    div.Slider {
      padding-right: calc(32% + max((40% - 750px), 0px));
      padding-left: calc(0% + max((40% - 750px), 0px));
    }
  }
}

/* STATISTICS */

body section.mod_postcard_textonly{
  padding-inline: max(20px, calc(50vw - 500px)) !important;
  display: flex;
  div.StatTextOnly{
    flex: 3 3 60%;
    &>ul{
      margin-top: 0;
      &>li{
        margin-bottom: 0;
      }
      &>li .statistic{
        .StatImage{
          display: none;
        }
        .StatText{
          position: relative;
          .AnimationWrapper::before{
            content: '';
            position: absolute;
            left: 15px;
            bottom: 5.5em;
            height: 0.8em;
            width: 0px;
            transition: 5s;
            background-color: rgb(var(--color5));
            border-radius: 100px;
          }
          .StatTitle{
            color: rgb(var(--color2));
            font-size: var(--fs4);
            font-weight: 600;
            min-height: 3em;
          }
          .AnimationWrapper .StatFigure{
            font-size: calc(var(--fs1) + var(--fs3));
            .StatPrefix, .StatNumber, .StatSuffix{
              font-size: calc(var(--fs1) + var(--fs3));
            }
          }
        }
      }
    }
  }
  .bloqTitle{
    flex: 2 2 40%;
    text-align: left !important;
    padding-top: 0.4em;
  } 
}

body section.mod_postcard_textonly.animationcomplete{
  div.StatTextOnly > ul > li .statistic .StatText .AnimationWrapper::before{
    width: calc(100% - 30px);
  }
}

@media (max-width: 700px) {
  body section.mod_postcard_textonly{
    flex-direction: column;
    .bloqTitle{
      text-align: center !important;
    }
  }
}