.header-bar {
    text-align: center;
    background-color: #303030;
    color: #EFF6FF;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    text-transform: uppercase;
}
@media only screen and (max-width: 40.063em) {
    .header-bar {
        font-size: 0.75rem;
    }
}

.mod-breadcrumbs {
	display: none;
}

/* Module Count Down */
.mod-count {
    color: #303030;
}
.mod-count .container {
    animation: revealUp 1s ease-in-out forwards;
    animation-delay: 2.5s;
    opacity: 0;
}
.mod-count h2 {
    font-size: 28px;
}
.mod-count ul { margin: 0; }
.mod-count li {
    display: inline-block;
    font-size: 1.5rem;
    list-style-type: none;
    text-transform: uppercase;
    font-weight: 700;
    padding: 1em;
    line-height: 0.75;
} 
.mod-count li span {
    display: block;
    margin-bottom: 1rem;
    font-size: 7.25rem;
}
.mod-count .count-down {
    text-align: center;
}
.mod-count #countMessage {
    display: none;
    text-align: center;
}
.mod-count .line-wrapper {
    margin-top: 2rem;
    height: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
}
.mod-count .line {
    content: '';
    width: 168px;
    height: 1px;
    background: #C4C4C4;
}
@media only screen and (max-width: 40.063em) {
    .mod-count h2 {
        font-size: 1.5rem;
    }
    .mod-count li {
        font-size: 1rem;
        padding: 0.3em;
    }
    .mod-count li span {
        font-size: 2.5rem;
    }
}
@keyframes revealUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
}

/* Module Video */
.mod-video {
    padding-top: 4rem;
    padding-bottom: 7rem;
    display: flex;
    justify-content: center;
    position: relative;
    flex-wrap: wrap;
}
.mod-video .title-block { width: 100%; margin-bottom: 2rem; position: relative; z-index: 5; }
.mod-video .title-block .title { color: #303030; font-size: 72px; font-weight: 700; }
.mod-video .video-wrapper {
    aspect-ratio: 2/1;
    width: 1200px;
    position: relative;
    z-index: 5;
}

.page-template-default .mod-video .video-wrapper {
    animation: revealUp 1s ease-in-out forwards;
    animation-delay: 1.5s;
    opacity: 0;
}

.mod-video iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
    border-radius: 8px;
}
.mod-video .background {
    position: absolute;
    width: 100%;
    height: 50%;
    top: 50%;
    background-color: #f8f8f8;
}
.mod-video .background.full {
    height: 100%;
    top: 0;
}
@media only screen and (max-width: 59.9375em) { 
    .mod-video {
        padding: 2rem 0 4rem 0;
    }
    .mod-video iframe {
        border-radius: 0;
    }
    .mod-video .title-block .title { font-size: 2rem;  }
}

/* Module Carousel */
.mod-carousel {
    background-color: #f8f8f8;
}
.mod-carousel .swiper-slide {
    aspect-ratio: 5/3;
    max-width: 900px;
}
.mod-carousel .swiper-slide figure {
    width: 100%;
    height: 100%;
}
.mod-carousel .swiper-slide figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
.mod-carousel .swiper-slide .image-text-section {
    position: absolute;
    height: fit-content;
    padding: 0 2rem;
    padding-bottom: 1rem;
    bottom: 0; left: 0; right: 0;
    z-index: 5;
    opacity: 0;
    transform: translateY(2rem);
    transition: all 1s ease-in-out 0.4s;
}
.mod-carousel .swiper-slide .image-text-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120%;
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 20%, rgba(0,0,0,0) 100%);
    z-index: 5;
}
.mod-carousel .swiper-slide.swiper-slide-active .image-text-section {
    opacity: 1;
    transform: translateY(0);
}
.mod-carousel .swiper-slide.swiper-slide-active:hover .image-link::after { 
    animation: shake 1s ease-in-out infinite;
}
.mod-carousel .swiper-slide .image-text-section .image-title { color: #ffff; font-size: 3rem; font-weight: 600; position: relative; z-index: 6; }
.mod-carousel .swiper-slide .image-text-section .image-link { color: #ffff; display: flex; align-items: center; column-gap: 0.5rem; font-size: 1.5rem; font-weight: 600; position: relative; z-index: 6; }
.mod-carousel .swiper-slide .image-text-section .image-link::after { 
    content: ''; 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.9836 11.4998L16.5834 12.0871C16.9029 11.7608 16.9029 11.2389 16.5834 10.9126L15.9836 11.4998ZM12.323 14.0388L11.7357 14.6386L12.9354 15.8132L13.5226 15.2133L12.323 14.0388ZM13.5226 7.78635L12.9354 7.18653L11.7357 8.36106L12.323 8.96089L13.5226 7.78635ZM15.9676 12.3393C16.4312 12.3393 16.807 11.9635 16.807 11.4998C16.807 11.0362 16.4312 10.6604 15.9676 10.6604L15.9676 12.3393ZM8.3417 10.6604L7.50225 10.6604L7.50225 12.3393L8.3417 12.3393L8.3417 10.6604ZM11.4679 2.2659C16.5677 2.2659 20.7019 6.40008 20.7019 11.4998L22.3808 11.4998C22.3808 5.47285 17.4949 0.587002 11.4679 0.587002L11.4679 2.2659ZM20.7019 11.4998C20.7019 16.5996 16.5677 20.7338 11.4679 20.7338L11.4679 22.4127C17.4949 22.4127 22.3808 17.5268 22.3808 11.4998L20.7019 11.4998ZM11.4679 20.7338C6.36816 20.7338 2.23398 16.5996 2.23398 11.4998L0.555081 11.4998C0.555081 17.5268 5.44093 22.4127 11.4679 22.4127L11.4679 20.7338ZM2.23398 11.4998C2.23398 6.40008 6.36816 2.2659 11.4679 2.2659L11.4679 0.587002C5.44093 0.587002 0.555081 5.47285 0.555081 11.4998L2.23398 11.4998ZM15.3838 10.9126L12.323 14.0388L13.5226 15.2133L16.5834 12.0871L15.3838 10.9126ZM12.323 8.96089L15.3838 12.0871L16.5834 10.9126L13.5226 7.78635L12.323 8.96089ZM15.9676 10.6604L8.3417 10.6604L8.3417 12.3393L15.9676 12.3393L15.9676 10.6604Z' fill='white'/%3E%3C/svg%3E%0A");
    aspect-ratio: 1;
    height: 1.5rem;
    display: block;
}
.mod-carousel .swiper-button-prev {
    left: 30px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 17 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 0.999998L0.999999 16.5L16 32' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
}
.mod-carousel .swiper-button-next {
    right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 17 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.999998 32L16 16.5L0.999999 1.00003' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
}
.mod-carousel .swiper-button-prev::after, .mod-carousel .swiper-button-next::after {
    display: none;
}
@media only screen and (max-width: 40.063em) {
    .mod-carousel .swiper-slide {
        width: 100%;
    }
    .mod-carousel .swiper-button-prev {
        left: 10px;
    }
    .mod-carousel .swiper-button-next {
        right: 10px;
    }
    .mod-carousel .swiper-slide figure img {
		border-radius: 0;
	}
    .mod-carousel .swiper-slide .image-text-section .image-title { font-size: 1.5rem; }
    .mod-carousel .swiper-slide .image-text-section .image-link { font-size: 0.75rem; }
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
    .mod-carousel .swiper-slide .image-text-section .image-title { font-size: 2.5rem; }
    .mod-carousel .swiper-slide .image-text-section .image-link { font-size: 1rem; }
 } 

/* Activities */
.mod-activities { color: #ffff; }
.mod-activities .title-section { max-width: 670px;}
.mod-activities .title-section .heading { font-size: 3rem; font-weight: 700; }
.mod-activities .title-section .subtext { font-size: 20px; margin-bottom: 0.5rem; }
.mod-activities .title-section .link { font-size: 18px; color: #BA8FFF; font-weight: 700; display: flex; align-items: center; column-gap: 0.5rem; width: fit-content; }
.mod-activities .title-section .link::after { 
    content: ''; 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.9836 11.5L16.5834 12.0873C16.9029 11.7609 16.9029 11.2391 16.5834 10.9127L15.9836 11.5ZM12.323 14.039L11.7357 14.6388L12.9354 15.8133L13.5226 15.2135L12.323 14.039ZM13.5226 7.7865L12.9354 7.18668L11.7357 8.36122L12.323 8.96104L13.5226 7.7865ZM15.9676 12.3394C16.4312 12.3394 16.807 11.9636 16.807 11.5C16.807 11.0364 16.4312 10.6605 15.9676 10.6605L15.9676 12.3394ZM8.3417 10.6605L7.50225 10.6605L7.50225 12.3394L8.3417 12.3394L8.3417 10.6605ZM11.4679 2.26605C16.5677 2.26605 20.7019 6.40023 20.7019 11.5L22.3808 11.5C22.3808 5.473 17.4949 0.587154 11.4679 0.587154L11.4679 2.26605ZM20.7019 11.5C20.7019 16.5998 16.5677 20.7339 11.4679 20.7339L11.4679 22.4128C17.4949 22.4128 22.3808 17.527 22.3808 11.5L20.7019 11.5ZM11.4679 20.7339C6.36816 20.7339 2.23398 16.5998 2.23398 11.5L0.555081 11.5C0.555081 17.527 5.44093 22.4128 11.4679 22.4128L11.4679 20.7339ZM2.23398 11.5C2.23398 6.40023 6.36816 2.26605 11.4679 2.26605L11.4679 0.587154C5.44093 0.587154 0.555081 5.473 0.555081 11.5L2.23398 11.5ZM15.3838 10.9127L12.323 14.039L13.5226 15.2135L16.5834 12.0873L15.3838 10.9127ZM12.323 8.96104L15.3838 12.0873L16.5834 10.9127L13.5226 7.7865L12.323 8.96104ZM15.9676 10.6605L8.3417 10.6605L8.3417 12.3394L15.9676 12.3394L15.9676 10.6605Z' fill='%23BA8FFF'/%3E%3C/svg%3E%0A");
    aspect-ratio: 1;
    height: 23px;
    display: block;
}
.mod-activities .title-section .link:hover:after { animation: shake 1s ease-in-out infinite; }
.mod-activities .activities { display: flex; justify-content: flex-start; margin-top: 2rem; opacity: 0; flex-wrap: wrap; row-gap: 2rem; column-gap: 1.25rem; }
.mod-activities .activities.animate { animation: fade-in-up-1 0.8s ease-in-out forwards; }
.mod-activities .activities .activity-item { width: calc(25% - 1.25rem); transition: opacity 1s ease-in-out; }
.mod-activities .activities .activity-item figure { overflow: hidden; border-radius: 5px; }
.mod-activities .activities:hover .activity-item { opacity: 0.7; transition: opacity 0.5s ease-in-out; }
.mod-activities .activities:hover .activity-item:hover { opacity: 1; transition: opacity 1s ease-in-out; }
.mod-activities .activities:hover .activity-item:hover img { transform: scale(1.05); }
.mod-activities .activities .activity-item img { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: 5px; transform: scale(1); transition: all .25s ease-in-out;}
.mod-activities .activities .activity-item .activity-title { color: #ffff; margin: 0.75rem 0; }
.mod-activities .activities .activity-item .activity-description { color: #8E8E8E; font-weight: 600; margin-bottom: 0.35rem; }
.mod-activities .activities .activity-item .level { text-transform: capitalize; padding: 0.25rem 0.625rem; border: 0.6px solid gray; border-radius: 25px; font-size: 0.65rem; font-weight:700; }
.mod-activities .activities .activity-item .level.colour-yellow { border-color: #F7B718; color: #F7B718; }
.mod-activities .activities .activity-item .level.colour-orange { border-color: #FFAA5C; color: #FFAA5C; }
.mod-activities .activities .activity-item .level.colour-red { border-color: #F15E5E; color: #F15E5E; } 

@media only screen and (max-width: 40.063em) {
    .mod-activities .title-section { text-align: center; }
    .mod-activities .title-section .heading, .mod-activities .title-section .subtext { display: none; }
    .mod-activities .activities { flex-direction: column; row-gap: 3rem; column-gap: 0; }
    .mod-activities .activities .activity-item { width: 100%; }
    .mod-activities .activities .activity-item img { aspect-ratio: 7/4; width: 100%; object-fit: cover; }
    .mod-activities .activities .activity-item .level { display: none; }
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
    .mod-activities .activities { column-gap: 1rem; }
    .mod-activities .title-section .heading { font-size: 2.5rem; }
    .mod-activities .activities .activity-item { width: calc(50% - 1rem); }
 } 


/* Image-Items */
.mod-image-items { padding: 7rem 0; }
.mod-image-items .row { max-width: 825px; }
.mod-image-items .title-block { margin-bottom: 4rem; }
.mod-image-items .title-block .title { color: #303030; font-size: 72px; font-weight: 700; }
.mod-image-items .image-items { display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap; row-gap: 1rem; }
.mod-image-items .image-item { text-align: center; }
.mod-image-items .image-item .image { padding: 2rem; border: 0.6px solid #C4C4C4; border-radius: 10px; margin-bottom: 1rem;}
.mod-image-items .image-item .image img { aspect-ratio: 1; width: 100%; }
.mod-image-items .image-item span { font-size: 1.625rem; color: #303030; font-weight: 600; }

@media only screen and (max-width: 59.9375em) { 
    .mod-image-items .title-block .title { font-size: 2rem;  }
    .mod-image-items .image-item span { font-size: 1rem; }
    .mod-image-items .image-item .image { padding: 1rem }
    .mod-image-items .title-block { margin-bottom: 2rem; }
    .mod-image-items { padding: 3.5rem 0; }
    .mod-image-items .image-item { width: calc(33% - 0.33rem); text-align: center; }
}

/* Resources */
.mod-resources { padding: 6rem 0; }
.mod-resources .title-block .title { color: #303030; font-size: 72px; font-weight: 700; }
.mod-resources h3 { margin-bottom: 1rem; font-size: 1.25rem; }
.mod-resources p { font-size: 1.25rem; margin-bottom: 1rem; }
.mod-resources .resource-item { padding: 1.5rem; border-radius: 15px; position: relative; overflow: hidden; }
.mod-resources .resources-items .tab-button { display: flex; align-items: center; cursor: pointer; row-gap: 1rem; }
.mod-resources .resources-items .tab-button h3 { margin-bottom: 0; }
.mod-resources .resources-items .control-circle { width: 2.25rem; height: 2.25rem; position: relative; margin-right: 2rem; background-color: #ffff; border-radius: 50%; cursor: pointer;}
.mod-resources .resources-items .control-circle span { background-color:#BCBCD9; display: block; position: absolute; transition: 300ms; }
.mod-resources .resources-items .control-circle .line-1 { top: 25%; bottom: 25%; width: 2px; left: calc(50% - 1px); }
.mod-resources .resources-items .control-circle .line-2 { left: 25%; right: 25%; height: 2px; top: calc(50% - 1px); }
.mod-resources .resources-items .resource-item-wrapper { scroll-margin-top: 180px; }
.mod-resources .resources-items .resource-item::after { content: ''; position: absolute; top: 1rem; left: 0; width: 2.25rem; aspect-ratio: 1; background: #F9F9FB; transition: all 0.2s cubic-bezier(.93,.1,.42,.91); z-index: -1; opacity: 0; }
.mod-resources .resources-items .open.resource-item::after { right: 0; bottom:0; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.5s cubic-bezier(.93,.1,.42,.91); opacity: 1; }
.mod-resources .resources-items .open .control-circle span { transform: rotate(90deg); }
.mod-resources .resources-items .open .control-circle .line-2 { left: 50%; right: 50%; }
.mod-resources .resource__content { width: calc(100% - 4.5rem); margin-left: auto; display: none;}
.mod-resources .resource__content .resource-text { padding-top:1rem; padding-bottom: 1.5rem; }
.mod-resources .resource-tiles { display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap; row-gap: 1rem; }
.mod-resources .resource-tile { padding: 1rem; width: calc((100%/3) - 0.5rem); background: #ffff; border: 0.6px solid #C4C4C4; border-radius: 10px;}
.mod-resources .resource-tile h3 { margin-bottom: 0.5rem; }
.mod-resources .resource-tile p { font-size: 1rem; margin-bottom: 0.5rem; }
.mod-resources .resource-tile .tile-link { font-size: 16px; color: #BA8FFF; font-weight: 700; display: flex; align-items: center; column-gap: 0.5rem; }
.mod-resources .resource-tile .tile-link::after { 
    content: ''; 
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0017 14.635L9.30214 15.3495C9.69088 15.7301 10.3126 15.7301 10.7013 15.3495L10.0017 14.635ZM7.9595 11.236L7.24495 10.5364L5.84578 11.9655L6.56032 12.6651L7.9595 11.236ZM13.4431 12.6651L14.1577 11.9655L12.7585 10.5364L12.044 11.236L13.4431 12.6651ZM9.00172 14.6209C9.00172 15.1732 9.44944 15.6209 10.0017 15.6209C10.554 15.6209 11.0017 15.1732 11.0017 14.6209H9.00172ZM11.0017 7.93276V6.93276H9.00172V7.93276H11.0017ZM17.8365 10.6746C17.8365 15.0016 14.3287 18.5093 10.0017 18.5093V20.5093C15.4333 20.5093 19.8365 16.1061 19.8365 10.6746H17.8365ZM10.0017 18.5093C5.67472 18.5093 2.16699 15.0016 2.16699 10.6746H0.166992C0.166992 16.1061 4.57015 20.5093 10.0017 20.5093V18.5093ZM2.16699 10.6746C2.16699 6.34757 5.67472 2.83984 10.0017 2.83984V0.839844C4.57015 0.839844 0.166992 5.243 0.166992 10.6746H2.16699ZM10.0017 2.83984C14.3287 2.83984 17.8365 6.34757 17.8365 10.6746H19.8365C19.8365 5.243 15.4333 0.839844 10.0017 0.839844V2.83984ZM10.7013 13.9204L7.9595 11.236L6.56032 12.6651L9.30214 15.3495L10.7013 13.9204ZM12.044 11.236L9.30214 13.9204L10.7013 15.3495L13.4431 12.6651L12.044 11.236ZM11.0017 14.6209V7.93276H9.00172V14.6209H11.0017Z' fill='%23BA8FFF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    aspect-ratio: 1;
    height: 20px;
    display: block;
}
.mod-resources .resource-tile .tile-link:hover:after { animation: bounce 1s ease-in-out infinite; }

@media only screen and (max-width: 40.063em) {
    .mod-resources { padding: 4rem 0; }
    .mod-resources p {
        font-size: 1rem;
    }
    .mod-resources .resources-items .resource-item-wrapper { scroll-margin-top: 150px; }
    .mod-resources .resource__content .resource-text { padding: 0.5rem 0 0.5rem 0; }
    .mod-resources .resource-tiles {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    .mod-resources .resource-tile {
        width: 100%;
    }
    .mod-resources .title-block .title { font-size: 2rem;  }
    .mod-resources .resource-tile h3 { font-size: 1rem; margin-bottom: 0.25rem; }
    .mod-resources .resource-tile p { font-size: 0.85rem; margin-bottom: 0.25rem; }
    .mod-resources .resource-tile .tile-link { font-size: 0.85rem; }
    .mod-resources .resource-tile .tile-link::after { height: 0.85rem; }
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
    .mod-resources .resource-tile {
        width: calc((100%/2) - 0.5rem);
    }
}

/* Glass Banner */
.mod-glass-banner { scroll-margin-top: 157px; }
.mod-glass-banner .banner-inner { width: 100% !important; aspect-ratio: 16/9; position: relative; overflow: hidden;}
.mod-glass-banner .banner-inner .banner-description { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; line-height: 140%; color: #ffff; }

.mod-glass-banner .banner-inner .banner-video { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.mod-glass-banner.musical .banner-inner { background-size: cover; background-repeat: no-repeat; } 
.mod-glass-banner.musical .banner-title { font-size: 18vw; font-weight: 600; letter-spacing: -0.08em; color: #ffff; opacity: 0; line-height: 90%; position: absolute; left: 2rem; top: 5%; }
.mod-glass-banner.musical .banner-description { width: 700px; position: absolute; left: 50%; transform: translate(-50%, -50%); bottom: 5%; }
.mod-glass-banner.musical.animate .banner-title { animation: fade-in-up 0.8s ease-in-out forwards; }
.mod-glass-banner.musical.animate .sound-button { animation: pulse 1s infinite 2.05s ease-in-out alternate, fade-in 1s linear 1.05s forwards; }
.mod-glass-banner.musical .sound-button { padding: 0.75rem; border: 2px solid #ffff; color: #ffff; position: absolute; border-radius: 50%; font-size: 1.25rem; aspect-ratio: 1; cursor: pointer; opacity: 0; }
.mod-glass-banner.musical .sound-button:nth-of-type(1) { bottom: 20.5%; left: 16%; }
.mod-glass-banner.musical .sound-button:nth-of-type(2) { bottom: 53%; left: 59%; }
.mod-glass-banner.musical .sound-button:nth-of-type(3) { top: 13%; right: 12%; }

.mod-glass-banner.liquid .text-content { position: absolute; display: flex; justify-content: center; top: 0; bottom: 0; left: 0; right: 0; flex-direction: column; max-width: 1300px; margin: 0 auto; }
.mod-glass-banner.liquid .banner-title { width: 680px; font-size: 11.5vw; font-weight: 700; letter-spacing: -0.07em; line-height: 87%; color: #161616; opacity: 100%; }
.mod-glass-banner.liquid .banner-description {  width: 370px; margin-top: 2%; color: #161616; }
.mod-glass-banner.liquid .animate.text-content { animation: bounce-in-left 2s ease forwards;  }

.mod-glass-banner.lens .text-content { position: absolute; display: flex; justify-content: center; top: 0; bottom: 0; right: 17%; flex-direction: column; max-width: 1200px; margin: 0 auto; transform: translateX(2000px); }
.mod-glass-banner.lens .banner-title { font-size: 6.5vw; letter-spacing: -0.07em; line-height: 87%; font-weight: 700; color: #ffff; width: 600px;}
.mod-glass-banner.lens .banner-description { width: 600px; margin-top: 3%;}
.mod-glass-banner.lens .animate.text-content { animation: bounce-in-right 2s ease forwards; }

.mod-glass-banner.invisible-glass .text-content { display: flex; flex-direction: column; position: absolute; top: 20%; bottom: 0; left: 0; right: 0; max-width: 1300px; margin: 0 auto; }
.mod-glass-banner.invisible-glass .banner-title { width: 680px; font-size: 10vw; font-weight: 700; letter-spacing: -0.07em; line-height: 87%; color: #ffff; }
.mod-glass-banner.invisible-glass .banner-description { width: 450px; margin-top: 3%; }
.mod-glass-banner.invisible-glass .animate.text-content { animation: bounce-in-left 2s ease forwards;  }

@media only screen and (max-width: 59.9375em) { 
    .mod-glass-banner { scroll-margin-top: 102px; }
    .mod-glass-banner .banner-inner .banner-description { font-size: 0.65rem; }
    .mod-glass-banner .banner-inner .banner-title, .mod-glass-banner .banner-inner .banner-description { width: 100% !important;}
    .mod-glass-banner .banner-inner .text-content { padding: 0 0.625rem; }
    .mod-glass-banner.musical .sound-button { padding: 0.35rem; font-size: 0.85rem; }
    .mod-glass-banner.musical .banner-title { position: relative; left: 0; bottom: 0; top: 0; transform: translate(0);}
    .mod-glass-banner.musical .banner-description { position: absolute; bottom: 10%; transform: translate(0); display: none; }
    .mod-glass-banner.musical .text-content { position: absolute; display: flex; top: 5%; bottom: 0; left: 0; right: 0; flex-direction: column; width: 55%;}
    .mod-glass-banner.musical .banner-description { margin-top: 2%; }
    .mod-glass-banner.invisible-glass .text-content, .mod-glass-banner.liquid .text-content { left: 10%; width: 55%; margin: unset; }
    .mod-glass-banner.lens .text-content { right: 10%; width: 50%; }
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
    .mod-glass-banner.musical .banner-description { 
        display: block;
    }
} 

/* Baner overlay */
#eye-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    padding-top: calc(var(--feature-offset-y) * var(--feature-size));
    padding-bottom: calc(var(--feature-offset-y) * var(--feature-size) * -1);
}
#eye-overlay-content p {
    white-space: nowrap;
    line-height: var(--text-leading);
    margin-left: -0.095em;
    margin-right: -0.06em;
    margin-bottom: 0;
}

#eye-overlay .text-top {
    color: #000000;
    font-weight: 600;
    font-size: 0.2em;
}

#eye-overlay .text-top > span {
    display: inline-block;
    overflow: hidden;
}

#eye-overlay .text-middle {
    font-weight: 600;
    font-size: 0.64em;
    display: flex;
    opacity: 0; transform: translateY(1rem);
}
#eye-overlay .text-middle span {
    display: inline-block;
    flex-shrink: 0;
}
#eye-overlay .text-middle span:first-child {
    margin-right: calc(var(--feature-size) * 0.54);
}
#eye-overlay .text-bottom {
    letter-spacing: -.05em;
    font-weight: 600;
    color: #EAEDFB;
    font-size: 0.165em;
    margin-top: 0.2em;
    display: flex;
    justify-content: center;
    column-gap: 0.2em;
}
#eye-overlay .text-bottom > span {
    display: inline-block;
}

#eye-cta {
    position: absolute;
    left: 0;
    bottom: 2rem;
    width: 100%;
    z-index: 6;
}

/* Eye Banner */
.portal-banner {
    /* The eyeball and text scale to this value */
    --feature-size: min(45vw, 60vh);
    --feature-offset-y: -0.18;

    /* Control eyeball size and position */
    --eyeball-size: 1.05;
    --iris-size: 0.5;
    --eye-offset-x: -0.2;
    --eye-offset-y: 0.02;

    /* Control text */
    --text-leading: 0.85;

    font-size: var(--feature-size);
    max-width: 100vw;
    height: calc(100vh - 157px);
    background-color: #2596be;
    position: relative;
    overflow: hidden;
}
.portal-banner-inner {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
    position: relative;
    z-index: 10;
}
.portal-banner::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20%; width: 100%; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); opacity: 0.5; }
.portal-banner .flex-center { display: flex; align-items: center; justify-content: center; }
.portal-banner .circle { aspect-ratio: 1; border-radius: 50%; }
.portal-banner #canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    --offset-y: calc(var(--eye-offset-y) + var(--feature-offset-y));
    padding-left: calc(var(--eye-offset-x) * var(--feature-size));
    padding-right: calc(var(--eye-offset-x) * var(--feature-size) * -1);
    padding-top: calc(var(--offset-y) * var(--feature-size));
    padding-bottom: calc(var(--offset-y) * var(--feature-size) * -1);
    overflow: hidden;
}
.portal-banner #eyeball {
    --diameter: calc(var(--feature-size) * var(--eyeball-size));
    width: var(--diameter);
    position: relative;
    overflow: hidden;
    background-color: #f8f8f8;
    background-image: -webkit-linear-gradient(-45deg, #f8f8f8 0%, #cccccc 100%);
    z-index: 5;
}
.portal-banner #eyeball:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    box-shadow: inset calc(var(--diameter) / -10) calc(var(--diameter) / -10) calc(var(--diameter) / 5) rgba(0,0,0,.4);
}
.portal-banner #iris {
    position: absolute;
    width: calc(var(--diameter) * var(--iris-size));
    background-color: #3a4458;
    background-image: url('../iaq2022/images/eye-iris-iaq.png');
    background-size: cover;
}
.portal-banner #pupil {
    width: 30%;
    background-color: black;
    transition: width 0.25s cubic-bezier(0.33, 1, 0.68, 1);
}
.portal-banner:active #pupil {
    width: 45%;
}
.portal-banner .bottom-shadow {
    width: 0.13em;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%);
    opacity: 0;
    transform: skew(-87deg, 50deg) translate(26%, -33%);
    position: absolute;
    bottom: 0.23em;
    z-index: 1;
    filter: blur(0.75px);
}
.portal-banner .text-middle span:nth-of-type(1){
    background: linear-gradient(90deg, rgba(255,255,255,0.31) 0%, rgba(255,255,255,0.71) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: lighten;
}
.portal-banner .text-middle span:nth-of-type(2){
    background: linear-gradient(220deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: lighten;
}
.portal-banner .bottom-text {
    font-size: calc(110vw / 19.2);
    letter-spacing: -.05em;
    font-weight: 600;
    color: #EAEDFB;
    display: flex;
    justify-content: center;
    column-gap: 2%;
}
.portal-banner .portal-banner-button {
    padding: 1rem 1.5rem;
    border: 1.38px #F9F9FB solid;
    width: fit-content;
    margin: 0 auto;
    border-radius: 45px;
    color: #F9F9FB;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    column-gap: 0.5rem;
    justify-content: center;
    align-items: center;
}
.portal-banner #eye-cta {
    opacity: 0;
}
.portal-banner .portal-banner-button .button-arrow {
    width: 20px;
}
.portal-banner .portal-banner-button:hover .button-arrow { animation: shake 1s ease-in-out infinite; }

/* active eye ball */
.portal-banner.active #eyeball {
    animation: bounce-eye-ball 0.75s cubic-bezier(0.5,0.5,0.5,1) forwards, roll 3s .80s ease forwards;
}
.portal-banner.active .bottom-shadow {
    animation: fade-in-eye-shadow 1s ease-in-out 2s forwards;
}
.portal-banner.active #eye-overlay .text-top > span {
    animation: zoomIn 0.5s ease-in-out backwards;
}
.portal-banner.active #eye-overlay .text-middle {
    animation: fade-in-up 1.5s ease-in-out 3s forwards;
}
.portal-banner.active #eye-overlay .text-bottom > span {
    animation: slideUp 1s ease-in-out backwards;
}
.portal-banner.active #eye-cta {
    animation: fade-in-up-1 1s ease-in-out 6s forwards;
}

@media only screen and (max-width: 59.9375em) { 
    .portal-banner .bottom-shadow {
        display: none;
    }
}

/* Twitter Feed */
#ctf {
    display: flex;
    flex-direction: column;
}
#ctf .ctf-tweets{
    display: flex;
    flex-wrap: wrap;
}
#ctf .ctf-tweets > .ctf-item {
    width: calc(100%/3);
}
#ctf .ctf-item:last-of-type {
    border-bottom: 1px solid #DDD!important;
}
#ctf.ctf-narrow .ctf-context {  
    margin-left: 0;
}
@media only screen and (max-width: 40.063em) {
    #ctf .ctf-tweets > .ctf-item {
        width: 100%;
    }
    #ctf .ctf-item:last-of-type {
        border-bottom: none;
    }
}

/* Template - Portal */
.page-template-portal .portal-background { background-color: #000000; background-blend-mode: hard-light; }
.page-template-portal .layout { margin-top: 157px; }
.page-template-portal .portal-heading { padding: 4rem 0; text-align: center; color: #ffff; }
.page-template-portal .portal-heading .heading { font-size: 6rem; font-weight: 700; letter-spacing: 0.02em; }
.page-template-portal .portal-heading .sub-text { font-size: 1.75rem; font-weight: 600; width: 450px; margin: 0 auto; line-height: 130%; }
.page-template-portal .portal-heading .line-wrapper {
    margin-top: 2rem;
    height: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
}
.page-template-portal .portal-heading .line {
    content: '';
    width: 131px;
    height: 1px;
    background:  #6C6C6C;
}
@media only screen and (max-width: 59.9375em) { 
    .page-template-portal .layout { margin-top: 102px; }
    .page-template-portal .portal-heading .heading {
        font-size: 3rem;
    }
    .page-template-portal .portal-heading .sub-text { font-size: 1rem; width: 80%; margin: 0 auto; }
}

/* Template - Activities */
.page-template-activities .layout { margin-top: 157px; }
.page-template-activities .activities-nav { 
    position: fixed; 
    bottom: -25%; left: 0; right: 0; 
    display: flex; justify-content: center;  justify-items: stretch; align-items: center;
    min-height: 100px; background: white; z-index: 20;
    flex-wrap: nowrap;
    padding: 1.5rem 0;
    transition: bottom 1s ease-in-out;
    box-shadow: 0px 1px 10px #999;
}
.page-template-activities .activities-nav.open {
    bottom: 0; 
}
.page-template-activities .activities-nav .menu-item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    color: #000000;
    font-weight: 700;
    width: 10%;
    font-size: 0.75rem;
    position: relative;
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.4s ease-in-out 0.65s; 
}
.page-template-activities .activities-nav.open .menu-item {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0ms;
}
.page-template-activities .activities-nav .menu-item::after {
    content: '';
    position: absolute;
    top: 11%;
    left: 50%;
    width: 0;
    height: 1px;
    background: #000000;
    transition: all 0.75s ease-in-out 1s;
}
.page-template-activities .activities-nav.open .menu-item::after {
    width: 100%;
}
.page-template-activities .activities-nav .menu-item:last-child:after {
    display: none;
}
.page-template-activities .activities-nav .menu-item .circle{
    width: 10px;
    aspect-ratio: 1;
    background: #000000;
    border-radius: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page-template-activities .activities-nav .menu-item .circle::after {
    width: 25px;
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    content: '';
    border: 1px solid #000000;
    clip-path: polygon(50% 50%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%);
}
.page-template-activities .activities-nav .menu-item.active .circle::after {
    animation: circle-wipe 0.2s linear 1;
    animation-fill-mode: both;
}

.page-template-activities .activities-nav .menu-item .label {
    margin-top: 1rem;
}
.page-template-activities .activities-nav-hamburger {
    width: 60px;
    aspect-ratio: 1;
    background: #000000;
    border-radius: 50%;
    position: fixed;
    bottom: 20px;
    left: 2rem;
    z-index: 25;
    transition: bottom 1s ease-in-out;
}
.page-template-activities .activities-nav-hamburger.hidden {
    bottom: -80px;
}
.page-template-activities .activities-nav-hamburger.open {
    background: #E9E9F1;
}
.page-template-activities .activities-nav-hamburger.close {
    animation: gelatine 1s ease-in-out 2 forwards;
}
.page-template-activities .activities-nav-hamburger span { background-color:#ffff; display: block; position: absolute; transition: 300ms; left: 25%; right: 25%; height: 1px; transition: all 0.4s ease-in-out; z-index: 27;}
.page-template-activities .activities-nav-hamburger .line-1 { top: 35%; }
.page-template-activities .activities-nav-hamburger .line-2 { top: 50%; }
.page-template-activities .activities-nav-hamburger .line-3 { top: 65%; }
.page-template-activities .activities-nav-hamburger.open .line-1 { top: 50%; transform: rotate(45deg); }
.page-template-activities .activities-nav-hamburger.open .line-2 { opacity: 0; }
.page-template-activities .activities-nav-hamburger.open .line-3 { top: 50%; transform: rotate(-45deg); }
.page-template-activities .activities-nav-hamburger.open span { background-color: #000000; }

@media only screen and (max-width: 59.9375em) { 
    .page-template-activities .layout { margin-top: 102px; }
}
@media only screen and (max-width: 40em) {
    .page-template-activities .activities-nav { 
        flex-direction: column;
        padding: 0.75rem;
        row-gap: 0.5rem;
    }
    .page-template-activities .activities-nav .menu-item {
        flex-direction: row;
        width: 50%;
        padding: 0.25rem 0;
        justify-content: space-between;
    }
    .page-template-activities .activities-nav .menu-item::after {
        width: 1px;
        height: 0;
        top: 50%;
        left: 2.5%;
    }
    .page-template-activities .activities-nav .menu-item .label{
        margin-top: 0;
    }
    .page-template-activities .activities-nav-hamburger {
        left: 1rem;
        width: 45px;
        bottom: 27.5px;
    }
    .page-template-activities .activities-nav.open .menu-item::after {
        width: 1px;
        height: calc(100% + 0.5rem);
    }
 }


/* Footer */
.mod-footer .menu li {
    font-weight: 600;
    font-size: 1.25rem;
    color: #6C6C6C;
}
.mod-footer .menu {
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margins */
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}
.mod-footer .sub-menu {
    list-style-type: none; /* Remove bullets */
}
.mod-footer .sub-menu li { font-weight: 400; }
.mod-footer .ginput_container_email #input_1_3 { border: #C4C4C4 1px solid; border-radius: 10px; margin: 0; }
.mod-footer #gform_submit_button_1 { top: 5px; right: 1.5%; border-radius: 10px; padding: 11px 43px; background: #303030; color: #ffff;}
@media only screen and (max-width: 59.9375em) { 
    .mod-footer .menu {
        text-align: center;
    }
    .mod-footer .footer-nav-middle {
        margin: 1rem 0;
    }
    .mod-footer .footer-nav-middle, .mod-footer .footer-nav-left {
        width: 100%;
    }
    .mod-footer .sub-menu {
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margins */
    }
    .mod-footer .right-content {
        width: 100%;
        text-align: center;
    }
}

/* Tool */

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}


.mod-glass-banner.musical p:not(.animate), .page-template-activities .title:not(.animate), .mod-image-items .image-items:not(.animate),
 .page-template-activities .mod-video .video-wrapper:not(.animate), .mod-activities .title-section:not(.animate), .portal-heading:not(.animate), .resources-items:not(.animate) {
    opacity: 0;
    transform: translateY(1rem);
}

.mod-glass-banner.musical p, .page-template-activities .title, .mod-image-items .image-items, .page-template-activities .mod-video .video-wrapper, .mod-activities .title-section, .portal-heading, .resources-items {
    transition: .8s ease all .2s;
}

@keyframes bounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

@keyframes shake {
	0%   { transform: translateX(0); }
    50%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

@keyframes pulse {
    from { transform: scale(0.9); }
    to { transform: scale(1.1); }
}

@keyframes bounce-in-right {
    0% {
      opacity: 0;
      transform: translateX(2000px);
    }
    60% {
      opacity: 1;
      transform: translateX(-30px);
    }
    80% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

@keyframes bounce-in-left {
    0% {
      opacity: 0;
      transform: translateX(-2000px);
    }
    60% {
      opacity: 1;
      transform: translateX(30px);
    }
    80% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}


@keyframes roll-in {
    0% {
        opacity: 0;
        transform: translateX(-50%) rotate(-10deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(1rem) }
    to { opacity: 0.75; transform: translateY(0) }
}

@keyframes fade-in-up-1 {
    from { opacity: 0; transform: translateY(1rem) }
    to { opacity: 1; transform: translateY(0) }
}

@keyframes bounce-eye-ball {
    0% {transform: translate(-0.2em, -0.1em) rotate(300deg);}
    100% {transform: translate(-0.2em, 0) rotate(300deg);}
}

@keyframes roll {
    from { 
      transform: translateX(-0.2em) rotate(300deg);
    }
    to { 
      transform: translateX(0) rotate(359.9deg);
    }
}

@keyframes fade-in-eye-shadow {
    from { opacity: 0; }
    to { opacity: 0.2; }
}

@keyframes zoomIn {
    from {
      opacity: 0;
      transform: scale(0.5);
    }
}
@keyframes slideUp {
    from {
      opacity: 0;
      transform: translate(0, .7em);
    }
}

@keyframes gelatine {
    from, to { transform: scale(1, 1); }
    25% { transform: scale(0.8, 1.2); }
    50% { transform: scale(1.3, 0.7); }
    75% { transform: scale(0.85, 1.15); }
}

@keyframes circle-wipe {
    0% {
        clip-path: polygon(50% 50%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%);
        animation-timing-function: ease-in;
    }
    12.5% {
        clip-path: polygon(50% 50%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 100% 0);
        animation-timing-function: linear;
    }
    25% {
        clip-path: polygon(50% 50%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 100% 0, 125% 50%);
        animation-timing-function: linear;
    }
    37.5% {
        clip-path: polygon(50% 50%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 100% 0, 125% 50%, 100% 100%);
        animation-timing-function: linear;
    }
    50% {
        clip-path: polygon(50% 50%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 100% 0, 125% 50%, 100% 100%, 50% 125%);
        animation-timing-function: linear;
    }
    62.5% {
        clip-path: polygon(50% 50%, 50% -25%, 50% -25%, 50% -25%, 50% -25%, 100% 0, 125% 50%, 100% 100%, 50% 125%, 0 100%);
        animation-timing-function: linear;
    }
    75% {
        clip-path: polygon(50% 50%, 50% -25%, 50% -25%, 50% -25%, 100% 0, 125% 50%, 100% 100%, 50% 125%, 0 100%, -25% 50%);
        animation-timing-function: linear;
    }
    87.5% {
        clip-path: polygon(50% 50%, 50% -25%, 50% -25%, 100% 0, 125% 50%, 100% 100%, 50% 125%, 0 100%, -25% 50%, 0 0);
        animation-timing-function: linear;
    }
    100% {
        clip-path: polygon(50% 50%, 50% -25%, 100% 0, 125% 50%, 100% 100%, 50% 125%, 0 100%, -25% 50%, 0 0, 50% -25%);
        animation-timing-function: ease-out;
    }
}