*{margin: 0; padding: 0}

/*html{scroll-behavior: smooth}*/

html{overflow-x: hidden !important}

body{background: #f4f2ed; font: 20px/32px "scale-variable", sans-serif; font-variation-settings: 'wdth' 100, 'wght' 300; letter-spacing: 1.5px; color: #0F5840; overflow-x: hidden !important}


.video-container{position: relative; width: 300px; height: 200px; overflow: hidden; display: flex; align-items: center; justify-content: center}
.video-thumbnail{width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; top: 0; left: 0; z-index: 1; transition: opacity 0.1s ease-in-out}
.video-player{width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.1s ease-in-out}

.video-container:hover .video-thumbnail{opacity: 0}
.video-container:hover .video-player{opacity: 1; pointer-events: auto}
.video-container span{position: relative; z-index: 1}


h1{font: 40px/40px "scale-variable", sans-serif; font-variation-settings: 'wdth' 100, 'wght' 500; margin-bottom: 40px}
h1 span{font-variation-settings: 'wdth' 150, 'wght' 300}

h2{font: 26px/40px "scale-variable", sans-serif; font-variation-settings: 'wdth' 100, 'wght' 300; margin-bottom: 40px}
h2 span{font-variation-settings: 'wdth' 100, 'wght' 500}

h3{font: 26px/40px "scale-variable", sans-serif; font-variation-settings: 'wdth' 100, 'wght' 500}
h3 em{font-variation-settings: 'wdth' 100, 'wght' 300; font-style: normal}

h4{font: 20px/22px "scale-variable", sans-serif; font-variation-settings: 'wdth' 100, 'wght' 400}
h4 em{font-variation-settings: 'wdth' 100, 'wght' 300; font-style: normal}

h5{font: 16px/22px "scale-variable", sans-serif; font-variation-settings: 'wdth' 100, 'wght' 300; margin: -40px 0 40px}

p{margin-bottom: 20px}

video, img{max-width: 100%; vertical-align: bottom}

a, a:hover, span, span:hover, header nav ul li, header nav ul li:hover{transition: 0.3s ease}


header nav{background: rgba(255,255,255,.5); position: fixed; z-index: 4; display: grid; left: 50%; transform: translateX(-50%); height: 50px; top: 25px; border-radius: 60px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px)}
header nav ul{display: flex; list-style: none}
header nav ul li a{color: #0F5840; display: block; padding: 0 25px; margin: 5px 2.5px; height: 40px; font: 12px/42px "scale-variable", sans-serif; border-radius: 50px; text-decoration: none}
header nav ul li a.active, header nav ul li a:hover{background: #0F5840; color: #FFF}


.home.fp-viewing-home .home-link, .fp-viewing-about .about-link, .fp-viewing-students .students-link{background: #0F5840; color: #FFF}

header nav ul li:first-child a{margin-left: 5px}
header nav ul li:last-child a{margin-right: 5px}

.home{padding: 25px 0}

.mobile{display: none}

.yellow-ribbon-home{position: absolute; top: -250px; right: -225px; max-width: 600px; transform: rotate(-27deg)}
.red-ribbon-home{position: absolute; max-width: 350px; z-index: 3; left: -100px; top: 400px; transform: rotate(-45deg)}

.about{color: #FFF; position: relative; padding-bottom: 200px}
.about .container{position: absolute; height: fit-content; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 1000px; padding: 0 40px; z-index: 1}

.about:before{background: url(assets/mask-about-top.svg); content: ''; width: 100%; display: block; background-size: cover; height: 200px; position: absolute; z-index: 2; background-position: center}

.about:after{background: url(assets/mask-about-bottom.svg); content: ''; width: 100%; display: block; background-size: cover; height: 220px; position: absolute; bottom: 0; z-index: 2; background-position: center}


.students{height: 100vh; position: relative}
.students .container{position: absolute; height: fit-content; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 1200px; padding: 0 40px; z-index: 3}
.students .container ul:nth-of-type(1){max-width: 1000px; margin: 40px auto 0}

.orange-ribbon-students{position: absolute; top: -100px; right: -225px; max-width: 500px; z-index: 4}
.red-ribbon-students{position: absolute; max-width: 350px; z-index: 4; left: -150px; top: 50px}

.students ul{display: grid; grid-template-columns: 1fr 1fr 1fr; list-style: none; margin: 20px 0 0}
.students ul:nth-of-type(2){grid-template-columns: 1fr 1fr 1fr 1fr}
.students ul li a{font: 40px/50px "scale-variable", sans-serif; font-variation-settings: 'wdth' 100, 'wght' 300; text-decoration: none; color: #F05623; text-align: center; display: block}

.students ul li:nth-child(1){transform: rotate(-10deg)}
.students ul li:nth-child(2){transform: rotate(10deg)}
.students ul li:nth-child(3){transform: rotate(-10deg)}

.students ul li:nth-child(4){transform: rotate(-10deg)}
.students ul li:nth-child(5){transform: rotate(10deg)}
.students ul li:nth-child(6){transform: rotate(-10deg)}

.students ul:nth-of-type(2) li:nth-child(1){transform: rotate(-10deg)}
.students ul:nth-of-type(2) li:nth-child(2){transform: rotate(10deg)}
.students ul:nth-of-type(2) li:nth-child(3){transform: rotate(-10deg)}
.students ul:nth-of-type(2) li:nth-child(4){transform: rotate(10deg)}

.student .container{display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; align-items: center; padding: 25px 0 0}
.student .photo img{width: 100%}

.student .details p{max-width: 800px; padding-right: 40px}
.student .details ul{font: 18px/40px "scale-variable", sans-serif; font-variation-settings: 'wdth' 100, 'wght' 300; list-style: none; margin: 40px 0}
.student .details a{color: #0F5840; text-decoration: none; display: block; padding-left: 35px}

.student .details .instagram{background: url(assets/icon-instagram.svg) no-repeat; background-size: 25px; background-position: 0 8px}
.student .details .linkedin{background: url(assets/icon-linkedin.svg) no-repeat; background-size: 25px; background-position: 0 8px}
.student .details .email{background: url(assets/icon-email.svg) no-repeat; background-size: 25px; background-position: 0 8px}
.student .details .website{background: url(assets/icon-website.svg) no-repeat; background-size: 25px; background-position: 0 8px}

.portfolio{padding: 0 0 50px}
.portfolio .swiper{width: 100%; height: 80vh; min-height: 700px; overflow: visible !important}
.portfolio .swiper .swiper-slide{border-radius: 30px; display: flex; align-items: end; background-repeat: no-repeat; background-size: cover; background-position: center; color: #FFF; text-decoration: none}

.portfolio h3{margin: 30px 40px}
.portfolio h4{margin: 40px}
.portfolio h3 em, .portfolio h4 em{display: none}

.portfolio .swiper .swiper-slide.swiper-slide-active{transform: scale(1) !important; transition: 1s ease}
.portfolio .swiper .swiper-slide-prev, .portfolio .swiper .swiper-slide-next, .portfolio .swiper .swiper-slide{transform: scale(0.9) !important; transition: 1s ease}

.portfolio .swiper .swiper-pagination{margin-bottom: -60px; display: none}
.swiper-pagination-bullet-active{background: #0F5840 !important}

.portfolio .swiper-slide span{position: absolute; z-index: 1; background: #FFF; padding: 0 40px; display: block; right: 30px; border-radius: 50px; bottom: 30px; height: 50px; font: 12px/50px "scale-variable", sans-serif; color: #0F5840; text-decoration: none}
.portfolio .swiper-slide span:hover{background: #0F5840; color: #FFF}


.portfolio .swiper-button-prev{background: url('assets/icon-arrow-prev.svg'); text-indent: -9999px; width: 60px; left: 30px}
.portfolio .swiper-button-next{background: url('assets/icon-arrow-next.svg'); text-indent: -9999px; width: 60px; right: 30px}

.portfolio .swiper-button-next, .portfolio .swiper-button-prev{opacity: 0; transition: 0.5s ease}
.portfolio .swiper:hover .swiper-button-next, .portfolio .swiper:hover .swiper-button-prev{opacity: 1; transition: 0.5s ease}


#lean_overlay{position: fixed; z-index: 100; top: 0; left: 0; height: 100%; width: 100%; display: none}

.popup{display: none; width: 100%}
.popup img{width: 100%}
.popup-container{position: relative; overflow-y: scroll; height: 100vh}

.showreel .popup-container{display: flex; align-items: center}

/*.showreel .popup-wrapper{position: relative; background: #FCF3E1}*/
.showreel .popup-container{padding: 0 100px; background: rgba(0,0,0,0.8)}
.showreel .popup-wrapper{max-width: 1600px; margin: 60px auto; border-radius: 25px}
.showreel .popup-wrapper video{border-radius: 25px}


.popup .popup-wrapper{background: #FFF}
.popup .popup-wrapper .description{background: #FFF; padding: 80px 40px; max-width: 1280px; margin: 0 auto}
.popup .popup-wrapper .description h4{margin: 0 0 20px}
.popup .popup-wrapper .grid{display: grid; grid-template-columns: 1fr 1fr}

.close{position: absolute; z-index: 6; color: #fff; top: 20px; right: 20px; margin: 0 auto; cursor: pointer}



.lineup{background: #FFF; padding: 50px 0 50px 20px}
.lineup .swiper{width: 100%}
.lineup .swiper .swiper-slide{border-radius: 25px; display: flex; align-items: end; background-repeat: no-repeat; background-size: cover !important; color: #FFF; background-color: #F5F4ED; text-decoration: none; position: relative; padding-top: 20px}

.lineup .swiper .swiper-slide img{border-radius: 25px}

.lineup .swiper .swiper-slide h4{position: absolute; padding: 80px 30px 30px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; width: calc(100% - 60px)}

.lineup .swiper-button-next{background: url('assets/icon-arrow-next-green.svg'); text-indent: -9999px; width: 60px; right: 30px}


.acknowledgements{color: #FFF; position: relative; margin: 0 40px}


.flexible{display: flex; height: 100vh; align-items: center}

.acknowledgements .container{padding: 120px 60px; background: #FAAF41; border-radius: 25px; margin: 0 auto}

.acknowledgements .container .wrapper{max-width: 1200px; margin: 0 auto}

.acknowledgements .teachers{display: flex; justify-content: space-between; max-width: 800px}
.acknowledgements .teachers ul{padding-left: 40px}
.acknowledgements .teachers ul{margin-top: 30px}
.acknowledgements .teachers ul li{line-height: 32px}

footer{background: #FFF; padding: 40px}
footer .container{max-width: 1320px; margin: 0 auto; display: flex; justify-content: space-between}
footer p{margin-bottom: 0; line-height: 44px; font: 12px/32px "scale-variable", sans-serif}

.footer{background: #F5F4ED; position: relative; top: -50px; padding: 0 80px 0}

.fade-background{width: 100%; position: absolute; height: 100%; z-index: 1; top: 0; background-color: hsla(352, 0%, 100%, 1); background-image: radial-gradient(circle at 96% 4%, hsla(66, 67%, 57%, 1) 15.80367024123173%, transparent 57.99348443427695%), radial-gradient(circle at 5% 92%, hsla(14, 87%, 53%, 1) 11.765433237379828%, transparent 42.61565699371391%), radial-gradient(circle at 88% 93%, hsla(42, 94%, 53%, 1) 13.397207798497323%, transparent 72.24142776300877%), radial-gradient(circle at 17% 3%, hsla(336, 81%, 63%, 1) 86.86660163785204%, transparent 106.50617409537358%)}

.fade-background:before{content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; animation: fadeBackgroundInOutB 10s infinite; background-color: hsla(352, 0%, 100%, 1); background-image: radial-gradient(circle at 96% 4%, hsla(14, 87%, 53%, 1) 15.80367024123173%, transparent 57.99348443427695%), radial-gradient(circle at 5% 92%, hsla(66, 67%, 57%, 1) 11.765433237379828%, transparent 42.61565699371391%), radial-gradient(circle at 88% 93%, hsla(336, 81%, 63%, 1) 13.397207798497323%, transparent 72.24142776300877%), radial-gradient(circle at 17% 3%, hsla(42, 94%, 53%, 1) 86.86660163785204%, transparent 106.50617409537358%)}


.fade-background:after{content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; animation: fadeBackgroundInOutA 15s infinite; background-image: radial-gradient(circle at 96% 4%, hsla(42, 94%, 53%, 1) 15.80367024123173%, transparent 57.99348443427695%), radial-gradient(circle at 5% 92%, hsla(336, 81%, 63%, 1) 11.765433237379828%, transparent 42.61565699371391%), radial-gradient(circle at 88% 93%, hsla(66, 67%, 57%, 1) 13.397207798497323%, transparent 72.24142776300877%), radial-gradient(circle at 17% 3%, hsla(14, 87%, 53%, 1) 86.86660163785204%, transparent 106.50617409537358%)}
    
    
@keyframes fadeBackgroundInOutB {
  20%, 40%, 60%, 80%{
    opacity: 0
  }
  0%, 100% {
    opacity: 1
  }
}

@keyframes fadeBackgroundInOutA {
  40%, 60%{
    opacity: 1
  }
  0%, 20%, 80%, 100% {
    opacity: 0
  }
}



@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
.hvr-buzz-out {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
}
.hvr-buzz-out:hover{animation-name: hvr-buzz-out; animation-duration: 0.75s; animation-timing-function: linear; animation-iteration-count: 1}


@media(max-width: 1279px){
    
    .video-container{width: auto; height: auto}
    .video-player{display: none}
    .students ul li a{padding: 20px}
    .red-ribbon-students, .orange-ribbon-students{z-index: 3}
}

@media(max-width: 1024px){
    .desktop{display: none}
    .mobile{display: block}
    
    .yellow-ribbon-home{top: -100px; right: -230px; max-width: 450px}
    .red-ribbon-home{max-width: 225px; top: 450px}
    
    .red-ribbon-students{max-width: 300px; top: -80px}
    .orange-ribbon-students{top: -120px; right: -300px; max-width: 400px; transform: rotate(-25deg)}
    
    .portfolio .swiper-button-prev{left: 60px}
    .portfolio .swiper-button-next{right: 60px}
    
    .students ul li a{font: 30px/44px "scale-variable", sans-serif; font-variation-settings: 'wdth' 100, 'wght' 300; padding: 30px}
    
    .portfolio .swiper{min-height: 500px}
    
    .acknowledgements{margin: 40px 20px 0}
    .acknowledgements .container{padding: 100px 20px 40px}
    .acknowledgements .teachers{padding: 0 40px}
    .acknowledgements .teachers ul{padding: 0}
    
    .showreel .popup-container{padding: 0 40px}
    
}


@media(max-width: 767px){
    
    
    
    header nav ul li a{padding: 0 15px; letter-spacing: 1px; font: 11px/42px "scale-variable", sans-serif}
    
    .about:before{height: 80px}
    
    .about .container{padding: 0 20px}
    
    h1{font: 24px/30px "scale-variable", sans-serif; font-variation-settings: 'wdth' 100, 'wght' 400}
    h2{font: 18px/36px "scale-variable", sans-serif; font-variation-settings: 'wdth' 100, 'wght' 300}
    
    .student .container{display: block}
    .student, .student .fp-tableCell{height: auto !important}
    
    .student .photo{margin: 50px 0 0}
    .student .details{padding: 0 20px 20px}
    
    .student .details p{padding-right: 0}
    
    .student .details ul{font: 16px/40px "scale-variable", sans-serif; font-variation-settings: normal; font-variation-settings: 'wdth' 100, 'wght' 300}
    
    
    .students, .students .fp-tableCell{height: auto !important}
    
    .students .container{position: relative; max-width: 500px}
    
    .students ul{grid-template-columns: 1fr 1fr} 
    .students ul:nth-of-type(2){grid-template-columns: 1fr 1fr} 
    
    .acknowledgements, .acknowledgements .fp-tableCell{height: auto !important}
    
    .acknowledgements .teachers ul:nth-of-type(3){display: none}

    footer .container{display: block; padding-bottom: 40px}
    footer img{max-width: 250px; margin-bottom: 5px}

        
}


@media(max-width: 599px){
    
    h3{font: 22px/40px "scale-variable", sans-serif; font-variation-settings: normal; font-variation-settings: 'wdth' 100, 'wght' 500}
    h4{font: 14px/20px "scale-variable", sans-serif; font-variation-settings: normal; font-variation-settings: 'wdth' 100, 'wght' 400}
    
    body{font: 16px/32px "scale-variable", sans-serif; font-variation-settings: 'wdth' 100, 'wght' 300}
  
    .acknowledgements{margin: 0 20px 60px}
    .acknowledgements .flexible{display: block; height: auto}
    .acknowledgements .teachers{display: block}
    .acknowledgements .teachers ul{margin-top: 0}
    .acknowledgements .teachers ul:first-of-type{margin-top: 30px}
    .acknowledgements .teachers ul:nth-of-type(3){display: block}
    
    .students .container{padding: 60px 20px}
    
    .red-ribbon-students{max-width: 250px; top: 0; left: -150px; transform: rotate(-10deg)}
    .orange-ribbon-students{top: 100px; right: -300px; max-width: 380px; transform: rotate(-25deg)}
    
    .students ul li a{font: 24px/36px "scale-variable", sans-serif; font-variation-settings: 'wdth' 100, 'wght' 300; padding: 20px}
    
    .showreel .popup-container{padding: 0 20px}
    
    .portfolio{padding: 0 20px 100px}
    
    .portfolio h4{font: 16px/22px "scale-variable", sans-serif; font-variation-settings: normal; font-variation-settings: 'wdth' 100, 'wght' 400; margin: 30px}
    .portfolio .swiper-slide span{display: none}
    
    .portfolio .swiper{min-height: 500px; height: 50vh}
    
    .portfolio .swiper-button-prev, .portfolio .swiper-button-next{display: none}
    
    .portfolio .swiper .swiper-pagination{display: block}
    
    .student .details ul{margin: 40px 0 80px}
    
    .lineup .swiper-button-next{display: none}
    
    .popup .popup-wrapper .grid{display: block}
    
    .popup .popup-wrapper .description{padding: 40px 20px}
    
    footer{padding: 0 40px}

}