@import url('https://webarchive.lib.cuhk.edu.hk/20250208022540cs_/https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@font-face {
    font-family: 'Basel Grotesk';
    src: url('./Fonts/baselgrotesk-book-webfont.woff2') format('woff2'), url('./Fonts/baselgrotesk-book-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Basel Grotesk Medium';
    src: url('./Fonts/baselgrotesk-medium-webfont.woff2') format('woff2'), url('./Fonts/baselgrotesk-medium-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Basel Grotesk Light';
    src: url('./Fonts/BaselGrotesk-Light.woff2') format('woff2'), url('./Fonts/BaselGrotesk-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

.header-logo,
.header-heading,
.main-menu-container ul.menu>li,
.db-icon,
#backtotop,
.home-banner-inner,
.hl-icon,
.read-more,
.ts-photo,
.ts-text,
.ts-name:before,
.icon {
    display: inline-block;
}

.language-switcher a,
.main-menu-container ul ul:before,
.main-menu-container .menu>li>ul>li,
.main-menu-container .menu>li>ul>li>a,
.main-menu-container .menu>li>ul>li.menu-item-has-children>a:after,
.main-menu-container ul ul ul li,
.home-slide:before,
.hl-photo,
.hl-heading,
.page-top:before,
.hb-photo,
.large-photo,
.video-container,
.dh-1:before,
.sl-item,
.sl-icon,
.sl-text {
    display: block;
}

.main-menu-container .menu>li>ul>li.menu-item-has-children>a:after {
    content: '';
}

.language-switcher a,
.main-menu-container ul ul,
.main-menu-container ul ul:before,
.main-menu-container .menu>li>ul>li.menu-item-has-children>a:after,
.main-menu-container ul ul ul,
.home-slide:before,
.home-banner-inner,
.bx-wrapper .bx-controls-direction a,
.hl-photo:before,
.page-top:before,
.read-more,
.video-container iframe,
.dh-1:before,
.highlight-title h2,
.highlight-title:before,
.ts-photo {
    position: absolute;
}

.main-menu-container ul.menu>li,
.main-menu-container .menu>li>ul>li>a,
.home-slider-container,
.home-slide,
.hl-photo,
.hl-icon,
.page-top,
.page-top h2,
.page-top h1,
.hb-photo,
.large-photo,
.video-container,
.sl-item,
.ts-inner,
.accordion-icon {
    position: relative;
}

.main-menu-container ul ul ul li {
    text-align: left;
}

.ts-photo,
.ts-text,
.icon {
    vertical-align: top;
}

.header-logo,
.header-heading,
.ts-name:before {
    vertical-align: middle;
}

.hb-photo {
    overflow: hidden;
}

.main-menu-container .menu>li>ul>li.menu-item-has-children>a:after,
.highlight-title h2 {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.accordion-sort span {
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.home-slider-container,
.home-slide,
.hl-photo,
.page-top,
.large-photo,
.ts-photo,
.image-block {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.main-menu-container ul ul:before,
.db-icon,
#backtotop,
.bx-wrapper .bx-controls-direction a,
.hl-icon,
.read-more,
.dh-1,
.dh-1:before,
.highlight-title:before,
.sl-icon,
.ts-text,
.accordion-icon,
.icon {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

body {
    min-width: 300px;
    color: #222222;
    font-size: 50%;
    font-family: "Basel Grotesk Light", "Noto Sans TC", "Noto Sans SC", sans-serif;
}

.container {
    width: 100%;
    min-width: 300px;
}

.content {
    position: relative;
    border-radius: 40px 40px 0 0;
    z-index: 2;
}

.wrapper {
    position: relative;
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
    max-width: 1280px;
    width: 90%;
}

.inpage-wrapper {
    position: relative;
    max-width: 1280px;
    z-index: 2;
}

.large-wrapper {
    max-width: 100%;
}

h2 {
    font-size: 4.2em;
}

h3 {
    font-size: 3.5em;
}

a {
    color: #222222;
}

a:hover {
    color: #7D2882;
}

i,
em {
    font-style: italic;
}

p {
    font-size: 2.4em;
    font-weight: 400;
    line-height: 1.8;
    text-align: left;
}

p a,
p li {
    font-size: 1em;
}

.aligncenter {
    text-align: center;
}


/* MOBILE */

.main-menu-button-inner {
    width: 29px;
    height: 22px;
    position: relative;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.main-menu-button-inner span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: #7D2882;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.main-menu-button-inner span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}

.main-menu-button-inner span:nth-child(2) {
    top: 10px;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}

.main-menu-button-inner span:nth-child(3) {
    top: 20px;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}

.menu-open .main-menu-button-inner span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0px;
    left: 5px;
}

.menu-open .main-menu-button-inner span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

.menu-open .main-menu-button-inner span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 20px;
    left: 5px;
}

.main-menu-mask,
.main-menu-button,
.main-menu-top {
    display: none;
}


/* GRID */

.grid-1-2 {
    overflow: hidden;
}

.grid-1-2>.grid-col {
    display: block;
    float: left;
    width: 49%;
    margin-right: 2%;
    margin-bottom: 1.5%;
}

.grid-1-2>.grid-col:nth-child(2n+2) {
    margin-right: 0;
}

.grid-1-2>.grid-col:nth-child(2n+1) {
    clear: both;
}

.grid-1-3 {
    overflow: hidden;
}

.grid-1-3>.grid-col {
    display: block;
    float: left;
    width: 32%;
    margin-right: 2%;
    margin-bottom: 3%;
}

.grid-1-3>.grid-col:nth-child(3n+3) {
    margin-right: 0;
}

.grid-1-3>.grid-col:nth-child(3n+1) {
    clear: both;
}

.grid-1-4 {
    overflow: hidden;
}

.grid-1-4>.grid-col {
    display: block;
    float: left;
    width: 23.5%;
    margin-right: 2%;
    margin-bottom: 4%;
}

.grid-1-4>.grid-col:nth-child(4n+4) {
    margin-right: 0;
}

.grid-1-4>.grid-col:nth-child(4n+1) {
    clear: both;
}


/* HEADER */

.sticky {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
}

.header {
    position: relative;
    -webkit-box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
    z-index: 10;
}

.header-top {
    padding: 10px 0;
}

.header-top .wrapper {
    position: relative;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.language-switcher {
    font-size: 1.8em;
    font-weight: 500;
    line-height: 1.2;
}

.language-switcher li {
    position: relative;
    display: inline-block;
    text-align: center;
    margin-right: 5px;
    padding: 13px 12px 10px 12px;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    -ms-transition: .2s ease-in-out;
}

.language-switcher li:last-child {
    margin-right: 0;
}

.language-switcher li:hover {
    background-color: #ccc;
    line-height: 1;
}

.language-switcher li:hover a {
    color: #fff;
}

.language-switcher a {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #222222;
}

.language-chooser li.active {
    background-color: #e2e2e2;
}

.header-logo img {
    max-width: none;
    width: auto;
    height: 100%;
    max-height: 55px;
}

.header-logo-1 {
    margin-right: 11px;
}

.header-heading {
    margin-left: 10px;
    font-size: 2.4em;
    font-weight: 400;
    line-height: 1.2;
}

.header-heading span {
    display: block;
}

.header-heading strong {
    font-size: 1.25em;
}

.header-bottom {
    height: 50px;
    border-top: 1px solid #cdcdcd;
}

.main-menu-container ul.menu {
    font-size: 0.1px;
    text-align: justify;
    font-size: 2em;
    font-weight: 700;
    line-height: 1.2;
}

.main-menu-container ul.menu:after {
    display: inline-block;
    content: '';
    width: 100%;
}

.main-menu-container ul.menu>li {
    display: inline-block;
    font-size: 10px;
    vertical-align: middle;
}

.main-menu-container ul.menu:after {
    display: inline-block;
    content: '';
    width: 100%;
}

.main-menu-container ul.menu>li {
    padding: 17px 0;
    border-bottom: 4px solid transparent;
    font-size: 1em;
}

.main-menu-container ul.menu>li a {
    color: #222222;
    border-bottom: 3px solid transparent;
    padding: 17px 17px 14px 17px;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    -ms-transition: .2s ease-in-out;
}

.main-menu-container ul.menu>li a:hover {
    color: #7D2882;
    border-color: #7D2882;
}

.main-menu-container ul.menu>li>ul>li:first-child a {
    border-radius: 15px 15px 0 0;
}

.main-menu-container ul.menu>li>ul>li:last-child a {
    border-radius: 0 0 15px 15px;
}

.main-menu-container ul.menu>li>ul>li a:hover {
    text-decoration: none;
    background-color: #7D2882;
    color: #fff;
}

.main-menu-container ul ul {
    margin-top: 13px;
}

.main-menu-container ul ul {
    display: none;
    background-color: #fff;
    color: #222222;
    left: 0;
    width: 298px;
    z-index: 10000;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    /* padding: 7px 0; */
    border-radius: 15px;
    border: 2px solid #dcdcdc;
}

.main-menu-container ul ul:before {
    top: -16px;
    left: 36px;
    width: 27px;
    height: 16px;
    background-image: url(images/give-to-uc/submenu-arrow.png);
    content: '';
}

.main-menu-container ul ul>li>a {
    color: #222222;
    text-decoration: none;
}

.main-menu-container ul ul>li {
    font-weight: 700;
}

.main-menu-container ul ul>li:hover>a {
    color: #7D2882;
    text-decoration: underline;
}

.main-menu-container ul li:last-child ul ul {
    left: auto;
    right: 0;
}

.main-menu-container ul li:hover>ul {
    display: block;
}

.main-menu-container .menu>li>ul>li {
    width: 100%;
}

.main-menu-container .menu>li>ul>li>a {
    padding: 16px 25px;
}

.main-menu-container .menu>li:last-child>ul>li.menu-item-has-children>a {
    padding: 12px 25px;
}

.main-menu-container .menu>li>ul>li.menu-item-has-children>a:after {
    background-image: url("images/menu-arrow-sprite@2x.png");
    right: 10px;
    width: 6px;
    height: 9px;
    margin-top: 4px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 4px 26px;
}

.main-menu-container .menu>li:last-child>ul>li.menu-item-has-children>a:after {
    left: 10px;
    right: auto;
    margin-top: 0;
    -webkit-transform: rotate(-180deg) translateY(50%);
    transform: rotate(-180deg) translateY(50%);
}

.main-menu-container .menu>li>ul>li.menu-item-has-children:hover>a:after {
    background-position: 0 -20px;
}

.main-menu-container ul ul ul {
    left: 100%;
    top: 0;
    width: 100%;
    height: auto;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.main-menu-container .menu>li:last-child ul ul {
    left: 100%;
}

.main-menu-container .menu>li:last-child ul li.menu-item-has-children:hover:after {
    left: auto;
    right: 100%;
}

.main-menu-container ul ul li:hover>ul {
    display: block;
}

.main-menu-container ul ul ul li {
    background-color: white;
    width: 100%;
    padding: 8px 15px;
    border-radius: 15px;
}

.main-menu-container ul ul>li>a {
    color: #222222;
    text-decoration: none;
}

.main-menu-container ul ul>li>a:hover {
    text-decoration: underline;
    color: #7D2882;
}

.development-highlights .main-menu-container ul.menu>li:nth-child(2) a {
    color: #7D2882;
    border-color: #7D2882;
}

.breadcrumbs {
    padding: 3em 0 7em;
}

.about .breadcrumbs {
    display: none;
}

.crumbs {
    text-align: left;
    font-size: 2.2em;
    font-weight: 400;
    line-height: 1.2;
    color: #222222;
}

.crumbs a {
    color: #222222;
}

.crumbs li {
    display: inline-block;
    text-align: center;
    margin: 0 5px;
}

.crumbs li:last-child a {
    color: #7D2882;
    cursor: unset;
}

.crumbs .current {
    margin-left: 5px;
    border-bottom: 1px solid #7D2882;
}

.crumbs>span:first-child {
    display: none;
}

.main-menu-container .menu:after {
    display: none;
}

.donate-btn {
    position: fixed;
    top: 10%;
    background-color: #7D2882;
    color: #fff;
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1.2;
    font-family: "Basel Grotesk Medium", "Noto Sans TC", sans-serif;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    -webkit-box-shadow: 3px 3px 6px rgba(145, 145, 145, 0.6);
    box-shadow: 3px 3px 6px rgba(145, 145, 145, 0.6);
    z-index: 9999;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

.donate-btn:hover {
    background-color: #F0AA23;
    color: #fff;
}

.donate-btn:hover .db-icon {
    background-color: #f5f5f5;
}

.db-text {
    display: inline-block;
    padding: 10px;
}

.db-icon {
    width: 44px;
    height: 44px;
    background-color: #fff;
    background-size: 22px;
    background-image: url(images/give-to-uc/heart.png);
}


/* FOOTER */

#backtotop {
    display: inline-block;
    background-color: #7D2882;
    background-size: 30%;
    background-image: url(images/give-to-uc/backtotop@2x.png);
    width: 72px;
    height: 72px;
    text-align: center;
    position: fixed;
    bottom: 5%;
    right: 5%;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    opacity: 0;
    z-index: 1000;
    -webkit-box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

#backtotop.show {
    opacity: 1;
}

.footer {
    background-color: #7D2882;
    color: #fff;
    padding: 2.5em 0;
}

.copyright {
    width: 100%;
    font-size: 1.8em;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    text-align: center;
}


/* Home */

.home-slider-container {
    width: 100%;
}

.home-slide {
    width: 100%;
    padding-bottom: 40%;
}

.home-slide:before {
    width: 100%;
    height: 100%;
    content: '';
    background: black;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), color-stop(75%, rgba(255, 255, 255, 0)));
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 75%);
}

.home-banner-inner {
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 1280px;
    color: #fff;
    text-align: center;
    font-family: "Basel Grotesk Medium", "Noto Sans TC", sans-serif;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.home-banner-inner h2 {
    font-size: 10em;
    font-weight: 500;
    line-height: 1.5;
    text-shadow: 1px 1px 3px rgba(35, 35, 35, 0.6);
    font-family: 'Satisfy', cursive;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    width: 12px;
    height: 12px;
    margin: 0 10px;
}

.bx-wrapper .bx-controls-direction a {
    background-color: rgba(255, 255, 255, 0.6);
    width: 53px;
    height: 53px;
    background-size: 20%;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    z-index: 10;
}

.bx-wrapper .bx-controls-direction a:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.bx-wrapper .bx-controls-direction a.bx-prev {
    background-image: url(images/give-to-uc/arrow-prev@2x.png);
}

.bx-wrapper .bx-controls-direction a.bx-next {
    right: 0;
    background-image: url(images/give-to-uc/arrow-next@2x.png);
}

.home-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: -1px;
}

.home-link {
    display: block;
    width: 33.33%;
    -ms-flex-preferred-size: 33.33%;
    flex-basis: 33.33%;
    margin-bottom: 0;
    /*   .hl-inner {
        @extend %abs;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }*/
}

.home-link:nth-child(3n+1) .hl-photo:before {
    background-color: #CD4631;
}

.home-link:nth-child(3n+2) .hl-photo:before {
    background-color: #63beac;
}

.home-link:nth-child(3n+3) .hl-photo:before {
    background-color: #BAA5FF;
}

.home-link:nth-child(3n+4) .hl-photo:before {
    background-color: #7D2882;
}

.home-link:nth-child(3n+5) .hl-photo:before {
    background-color: #F0AA23;
}

.home-link:nth-child(3n+6) .hl-photo:before {
    background-color: #83b4da;
}

.home-link:hover .hl-photo:before {
    opacity: 0;
}

.home-link:hover .hl-heading {
    color: #7D2882;
}

.hl-inner {
    display: block;
    text-align: center;
    border-right: 1px solid #919191;
}

.hl-photo {
    width: 100%;
    padding-bottom: 67%;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    overflow: hidden;
}

.hl-photo:before {
    width: 100%;
    height: 100%;
    opacity: .3;
    content: '';
    z-index: 1;
}

.hl-icon {
    width: 85px;
    height: 85px;
    margin: -40px auto 8px;
    background-color: #7D2882;
    background-size: 60%;
    border-radius: 80px;
    z-index: 2;
}

.hl-heading {
    font-size: 3em;
    font-weight: 700;
    line-height: 1.2;
    color: #222222;
    text-align: center;
    padding: 10px 0 25px 0;
    font-family: "Basel Grotesk Medium", "Noto Sans TC", sans-serif;
}

.photo {
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

.photo img {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

.photo:hover img {
    -webkit-transform: perspective(1000px) scale(1.1, 1.1);
    transform: perspective(1000px) scale(1.1, 1.1);
    -webkit-transform-style: flat;
    transform-style: flat;
}


/* Inpage */

.page-top {
    width: 100%;
    padding: 10% 0;
    background-position: center 40%;
}

.page-top:before {
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: black;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), color-stop(75%, rgba(255, 255, 255, 0)));
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 75%);
    z-index: 1;
}

.page-top h2 {
    font-size: 3em;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    font-family: "Basel Grotesk Medium", "Noto Sans TC", sans-serif;
    text-align: center;
    z-index: 2;
    text-shadow: 1px 1px 3px rgba(35, 35, 35, 0.6);
}

.page-top h1 {
    font-size: 6em;
    font-weight: 400;
    line-height: 1.5;
    text-shadow: 1px 1px 3px rgba(35, 35, 35, 0.6);
    color: #fff;
    text-align: center;
    z-index: 2;
}

.sec-padding {
    padding: 7em 0;
}

.hb-photo {
    width: 100%;
    padding-bottom: 67%;
}

.highlights-block {
    display: block;
    padding: 15px;
    overflow: hidden;
}

.highlights-block:hover .read-more {
    background-color: #7D2882;
}

.hb-heading {
    display: block;
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1.4;
    font-family: "Basel Grotesk Medium", "Noto Sans TC", sans-serif;
    padding: 10px 0 0 0;
}

.read-more {
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background-image: url(images/give-to-uc/right-arrow.png); 
    background-size: 30%;
    background-color: #F0AA23;
    color: #fff;
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1.2;
    padding: 8px 20px;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

.large-photo {
    width: 100%;
    padding-bottom: 56%;
    margin-bottom: 3%;
}

.video-container {
    width: 100%;
    padding-bottom: 56%;
    border-radius: 30px;
    margin-bottom: 3em;
}

.video-container:last-child {
    margin-bottom: 0;
}

.video-container iframe {
    width: 100%;
    height: 100%;
}

.hb-date {
    display: block;
    padding: 15px 0 0;
    color: #878787;
    font-size: 2em;
    font-weight: 700;
    line-height: 1.2;
}

.dh-1 {}

.dh-1:before {
    width: 100%;
    padding-bottom: 20%;
    background-color: #eff0ec;
    background-image: url(images/give-to-uc/grey-bg.jpg);
    content: '';
    background-size: cover;
    z-index: -1;
}

.dh-1.cover {
    background-image: url(images/give-to-uc/grey-bg.jpg);
    background-size: cover;
    padding-bottom: 7em;
}

.dh-1.cover:before {
    display: none;
}

.text-block {
    padding: 3em 0;
}

.text-block a,
.enquiries-block a,
.accordion-details a {
    color: #7d2882;
}

.text-block>ul>li,
.text-block>ol>li {
    font-size: 2.4em;
    font-weight: 400;
    line-height: 1.8;
    text-align: left;
}

.text-block ul ul,
.text-block ol ul {
    margin-top: 0.5em;
}


/*.donate-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    font-weight: 800;
    font-size: 2em;
    color: #fff;
    //Button shape & animation
    border-radius: 0 6px 6px 0;
    padding: 15px 10px;
    @include bc($purple);
    transition: 0.5s;
    &:hover {
        color: #fff;
    }
}*/

.highlights-blocks-section {
    padding: 5em 0 0 0;
}

.highlights-blocks {
    /* margin-top: 5em;*/
}

.highlight-title {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 104px;
    margin-bottom: 6em;
    font-family: "Basel Grotesk Medium", "Noto Sans TC", sans-serif;
}

.highlight-title h2 {
    position: relative;
    z-index: 2;
    margin-top: -8px;
    color: #fff;
}

.highlight-title:before {
    left: 50%;
    top: 0;
    width: 100%;
    padding-bottom: 34.6%;
    background-image: url(images/give-to-uc/half-circle.png);
    content: '';
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    z-index: 1;
}

.video-section {
    position: relative;
    text-align: center;
}

.sec-heading {
    border-bottom: 2px solid;
    padding-bottom: 5px;
    color: #7d2882;
    font-weight: 700;
    font-family: "Basel Grotesk Medium", "Noto Sans TC", sans-serif;
}

.sec-heading h3 {
    font-size: 3em;
}

.highlights-blocks-section {
    position: relative;
    margin-bottom: 7em;
}

.carousel-slider-container {
    width: calc(100% - 106px);
    margin: auto;
}

.carousel-slider-container .bx-controls-direction,
.gallery-container .bx-controls-direction{
    position: unset;
    width: auto;
    top: unset;
}

.bx-wrapper .bx-controls-direction a.bx-prev {
    left: 0;
}

.carousel-slider-container .bx-wrapper .bx-controls-direction a,
.gallery-container .bx-wrapper .bx-controls-direction a {
    top: 50%;
    background-color: rgba(126, 41, 130, 0.2);
}

.carousel-slider-container .bx-wrapper .bx-controls-direction a:hover,
.gallery-container .bx-wrapper .bx-controls-direction a:hover {
    background-color: rgba(126, 41, 130, 0.5);
}

.strive-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid #DBCADF;
    background-color: #fff;
    border-bottom: 0;
}

.wrapper>.text-block {
    padding-top: 6em;
}

.single-highlight .wrapper>.text-block{
    padding-top:0;
}

.sl-item {
    display: table-cell;
    width: 33.33%;
    font-size: 2.2em;
    background-color: #fff;
    border-bottom: 1px solid #DBCADF;
}

.sl-item:nth-child(3n+1) {
    border-right: 1px solid #DBCADF;
}

.sl-item:nth-child(3n+3) {
    border-left: 1px solid #DBCADF;
}

.sl-inner {
    padding: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    flex-wrap: wrap;
}

.sl-icon {
    width: 70px;
    height: 70px;
    background-color: #f5e8f8;
    background-size: 65%;
    margin: 0 auto 5%;
}

.sl-text {
    text-align: center;
    width: 100%;
}

.testimonial-slide-container {
    position: relative;
    margin-bottom: 7em;
    padding: 7em 4em;
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    z-index: 2;
}
.home-slider-container .bx-wrapper .bx-pager{
left:50%;
}
.bx-wrapper .bx-pager.bx-default-pager a {
    text-indent: -9999px;
    display: block;
    width: 9px;
    height: 9px;
    margin: 0 6px;
    outline: 0;
    font: 0 / 0 a;
    color: transparent;
    background-color: rgba(255, 255, 255, 0.4);
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    box-shadow: 0 0 0;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    margin: 0 10px;
}

.bx-controls.bx-has-pager {
    position: unset;
    left: 0;
    bottom: unset;
    width: unset;
    height: unset;
    padding-top: unset;
}

.bx-wrapper .bx-pager {
    position: absolute;
    bottom: 25px;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.bx-controls-direction {
    position: absolute;
    width: 100%;
    top: 50%;
}

.bx-wrapper .bx-pager.bx-default-pager a.active {
    background-color: #FFF;
}

.testimonial-slide-container .bx-wrapper .bx-pager {
    position: relative;
    transform: unset;
    -ms-transform: unset;
    -webkit-transform: unset;
}

.testimonial-slide-container .bx-wrapper .bx-pager.bx-default-pager a {
    background-color: #DBCADF;
}

.testimonial-slide-container .bx-wrapper .bx-pager.bx-default-pager a.active {
    background-color: #7d2882;
}

.testimonial-slide-container .bx-wrapper .bx-controls-direction a {
    background-color: transparent;
}

.ts-inner {
    overflow: hidden;
    padding: 1em;
}

.testimonial-slide {
    padding: 5%;
}

.ts-photo {
    top: 0;
    left: 0;
    width: 20%;
    padding-bottom: 20%;
    border-radius: 20px;
    background-image: url(images/give-to-uc/user.png);
    background-color: #556080;
    -webkit-box-shadow: 0 3px 6px #ccc;
    box-shadow: 0 3px 6px #ccc;
    z-index: 2;
}

.ts-text {
    padding: 4% 7% 7%;
    margin-top: 5%;
    width: 85%;
    border-radius: 20px;
    background-color: #f8f5fb;
    -webkit-box-shadow: 0 3px 6px #ccc;
    box-shadow: 0 3px 6px #ccc;
    float: right;
    background-image: url(images/give-to-uc/quote@2x.png);
    background-position: right 3.5% bottom 7%;
    background-size: 60px;
}

.ts-text p {
    font-size: 3em;
    font-weight: 400;
    line-height: 1.2;
}

.ts-name {
    font-size: 2.6em;
    font-weight: 400;
    line-height: 1.2;
    color: #7D2882;
    margin-top: 2em;
}

.ts-name:before {
    width: 25px;
    height: 3px;
    background-color: #7D2882;
    margin-right: 1%;
    content: '';
}

.ts-name span {
    display: inline-block;
    width: calc(100% - 35px);
    vertical-align: top;
}

.accordion-row {
    margin-bottom: 1em;
}

.accordion-sort {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    top: 0;
    left: 0;
    width: 45px;
    height: 45px;
    color: #fff;
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1.2;
    margin-right: 10px;
    text-align: center;
    background-color: purple;
}

.accordion-sort span {
    position: absolute;
}

.accordion-icon {
    font-size: 2.8em;
    background-color: #f8f5fb;
    padding: 10px;
    background-image: url(images/give-to-uc/plus@2x.png);
    background-position: right 15px center;
    background-size: 18px;
    cursor: pointer;
}

.accordion-icon:hover {
    background-color: #DBCADF;
}

.accordion-icon.active {
    background-image: url(images/give-to-uc/minus@2x.png);
    background-color: #7d2882;
    color: #fff;
}

.accordion-details {
    display: none;
    padding: 1em 2em;
    /* background-color: #f8f5fb;  */
    border: 1px solid #cacaca;
}

.sec-subheading {
    margin-bottom: 2em;
    font-weight: 700;
    color: #7D2882;
}

.accordion-section .sec-padding {
    padding-top: 0;
}

.col-1-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.image-block {
    width: 100%;
    padding-bottom: 56%;
}

.col-left {
    width: 48%;
}

.col-right {
    width: 48%;
    padding-right: 5%;
}

.sec-card {
    border: 1px solid #DBCADF;
    background-color: #fff;
    margin-bottom: 2em;
    padding: 0 3em;
}

.donate-btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 3em;
}

.primary-btn {
    display: inline-block;
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1.2;
    width: 48%;
    padding: 20px 25px;
    background-color: #7D2882;
    color: #fff;
    margin: 0 10px;
    -webkit-transition: all 300ms;
    transition: all 300ms;
}

.primary-btn:hover {
    color: #fff;
    background-color: #F0AA23;
    -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 4px #F0AA23;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #F0AA23;
}

.enquiries-block {
    padding: 3em 0 7em 0;
}

.enquiries-block strong {
    color: #7D2882;
}

.enquiries-block span {
    display: inline-block;
    vertical-align: middle;
}

.icon {
    width: 20px;
    height: 20px;
}

.icon-tel {
    margin-right: 10px;
    background-image: url(images/give-to-uc/tel@2x.png);
}

.icon-email {
    margin-right: 10px;
    background-image: url(images/give-to-uc/email@2x.png);
}

.icon-link {
    margin-left: 15px;
    background-image: url(images/give-to-uc/link@2x.png);
}

.icon-download {
    margin-left: 15px;
    background-image: url(images/give-to-uc/download@2x.png);
}

.custom-table {
    margin-top: 1em;
    width: 100%;
    table-layout: fixed;
    font-size: 1.8em;
}

.custom-table th {
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    padding: 10px;
    border: 0;
    background-color: #7d2882;
    color: #fff;
    font-weight: 700;
}

.custom-table td {
    padding: 10px;
    border: 0;
}

.custom-table tr:nth-child(odd) {
    background-color: #ffffff;
}

.custom-table tr:nth-child(even) {
    background-color: #f8f5fb;
}

.grey-bg {
    background-color: #eff0ec;
}

.donation-block {
    padding-top: 0.5em;
}

.patron-rows {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.patrons-row {
    position: relative;
    width: 32.5%;
    font-size: 2em;
    line-height: 1.6;
    text-align: center;
    background-color: #fff8e7;
    margin-bottom: 1em;
    padding-bottom: 10%;
    margin-right: 1.25%;
}

.patrons-row:nth-child(3n+3) {
    margin-right: 0;
}

.page-template-page-acknowledgement-scheme .accordion-icon {
    color: #fff;
    background-image: url(images/give-to-uc/plus-w@2x.png);
}

.page-template-page-acknowledgement-scheme .accordion-icon:hover {
    opacity: 0.7;
}

.page-template-page-acknowledgement-scheme .accordion-row .accordion-icon.active {
    background-image: url(images/give-to-uc/minus@2x.png);
}

.pr-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.gallery-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.details-photo {
    position: relative;
    display: block;
    width: 100%;
    flex-basis: 32%;
    margin-bottom: 2%;
}

.details-photo-inner {
    width: 100%;
    display: block;
    height: 0;
    padding-bottom: 67%;
    background-size: cover;
    background-position: center;
}

.gallery-section-1 .details-photo {
    flex-basis: 100%;
}

.gallery-section-2 .details-photo {
    flex-basis: 49%;
}

.gallery-section-4 .details-photo {
    flex-basis: 24%;
}

.gallery-section-5 .details-photo:nth-child(5n+4),
.gallery-section-5 .details-photo:nth-child(5n+5) {
    flex-basis: 49%;
}

.details-photo-caption {
    position: relative;
    display: block;
    font-size: 2.2em;
    top: 0;
    left: 0;
    width: 90%;
    color: white;
    font-size: 2.2em;
    font-weight: 700;
    line-height: 1.5;
    padding: 15px 25px;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.details-photo.details-photo-more:after,
.details-photo.with-caption:before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
}

.details-photo.with-caption {
    position: relative;
}

.details-photo.with-caption:before {
    background-color: rgba(103, 38, 98, 0.65);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.details-photo.with-caption:hover:before {
    opacity: 0.7;
}

.details-photo.with-caption:hover .details-photo-caption {
    opacity: 1;
}

.highlight-block {
    background-color: #F2D59A;
    padding: 40px 20px;
    margin: 3em 0 6em 0;
}

.carousel-slider-static .carousel-slide {
    display: inline-block;
    vertical-align: top;
    width: 33%;
    padding: 15px;
}


/*# sourceMappingURL=style.css.map */

.language-chooser {
    display: none;
}

.donor-filter-container {
    padding: 30px 40px;
    margin: 30px 0 35px 0;
    background-color: #F3E4F7;
}

.df-inner {
    display: flex;
    align-items: center;
}

.df-text {
    font-size: 2.4em;
}

.df-search {
    width: 300px;
    max-width: 100%;
    padding: 5px 10px;
    font-size: 2em;
}

.donor-entry {
    display: none;
}

.donor-entry.active {
    display: block;
    padding: 30px 0;
    border-bottom: 1px solid #ccc;
}

.donor-entry.last {
    padding-bottom: 0;
    border-bottom: 0;
}

.de-inner {
    display: flex;
    align-items: center;
}

.de-name {
    margin-right: 1em;
    font-size: 2em;
}

.de-level {
    padding: 5px 10px;
    border-radius: 10px;
    color: white;
    font-size: 2em;
}

a.cs-photo {
    display: block;
    background-position: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    width: 100%;
    padding-bottom: 67%;
    background-color: #f5f5f5;
}

.hib-caption {
    position: absolute;
    display: block;
    bottom: 0;
    width: 100%;
    color: #fff;
    background: rgb(0, 0, 0, 0.5);
    padding: 5px;
    font-size: 1.5em;
    line-height: 1.4;
}

.gallery-container {
    position: relative;
    padding: 0 7em;
}

.photo-links {
    display: flex;
    flex-wrap: wrap;
}

.photo-link {
    position: relative;
    flex-basis: 33.33%;
    padding-bottom: 18.48%;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .2s ease-in-out;
}

.photo-link:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: #823d86;
    opacity: 0.1;
    transform: translate(-50%, -50%);
    content: '';
    transition: .2s ease-in-out;
}

.photo-link span {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 4em;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-shadow: 0 3px 6px #000;
    transform: translate(-50%, -50%);
}

.photo-link:hover:before {
    opacity: 0.5;
}
.highlights-blocks-mobile .bx-wrapper{
    position: absolute; 
    opacity: 0; 
    visibility: hidden;
  bottom: 10000px;
  
}